/* Shondalai Professional — shell and EasyCommerce SPA skin. */
body{background:var(--ec-page);color:var(--ec-ink);font-family:var(--ec-font-body)}
.ts-container{max-width:var(--ec-cw)}
.ts-topbar{background:#101a35;color:#fff;border:0}.ts-topbar__inner{min-height:34px;font-size:.72rem}.ts-topbar__announcement{font-weight:600}.ts-topbar a{color:#c9d8ff}
.ts-header{background:color-mix(in srgb,var(--ec-surface) 96%,transparent);border-bottom:1px solid var(--ec-border);box-shadow:none}
.ts-header__inner{min-height:76px}.ts-brand,.ts-brand__name{font-family:var(--ec-font-heading);font-weight:700;letter-spacing:-.04em;color:var(--ec-ink)}.ts-brand__name{font-size:1.25rem}
.ts-nav a,.ts-nav button{font-weight:600;font-size:.86rem}.ts-nav a:hover,.ts-nav a[aria-current="page"]{color:var(--ec-brand)}
.ts-header-actions a,.ts-header-actions button{border-color:var(--ec-border)}.ts-header-actions a:hover,.ts-header-actions button:hover{background:var(--ec-surface-soft);border-color:var(--ec-brand)}
.ts-btn{border-radius:var(--ec-radius-sm);font-weight:700;box-shadow:none}.ts-shell:not(.ts-shell--storefront) .ts-main{min-width:0;padding:clamp(18px,2.4vw,34px);border:1px solid #d9e2ee;border-radius:var(--ec-radius-lg);background:linear-gradient(145deg,rgb(255 255 255 / .82),rgb(239 244 250 / .94));box-shadow:0 18px 48px rgb(16 26 53 / .065)}.ts-footer{position:relative;width:100%;max-width:var(--ec-cw);margin-inline:auto;overflow:hidden;border:0;background:transparent;color:#fff}.ts-footer:before{content:"";position:absolute;z-index:0;inset:0 var(--ec-gut);background:radial-gradient(circle at 12% 0%,rgb(var(--ec-brand-rgb) / .2),transparent 32%),linear-gradient(135deg,#0b1630 0%,#101f43 58%,#173469 100%);box-shadow:0 -12px 45px rgb(16 26 53 / .08)}.ts-footer:after{content:"";position:absolute;z-index:1;inset:0 var(--ec-gut) auto;height:3px;background:linear-gradient(90deg,var(--ec-brand),#7ca0ff,var(--ec-accent))}.ts-footer>.ts-container{position:relative;z-index:2;width:100%;max-width:none;padding-inline:var(--ec-gut)}.ts-footer__cols,.ts-footer__bottom,.ts-footer__main{margin-inline:32px}.ts-footer h5,.ts-footer .ts-module__title,.ts-footer .ts-footer__col h5{color:#e8efff}.ts-footer p,.ts-footer__blurb{color:#aebbd4}.ts-footer a{color:#b9c7df;transition:color var(--ec-dur-1),transform var(--ec-dur-1)}.ts-footer li a{display:inline-block}.ts-footer a:hover{color:#fff;transform:translateX(2px)}.ts-footer__brand .ts-brand,.ts-footer__brand .ts-brand__text{color:#78a0ff}.ts-footer__bottom{border-color:#324464;color:#91a0bc}.ts-footer .ts-footer__legal{color:#9eacc5}.ts-footer__pay li{border-color:#415475;background:rgb(255 255 255 / .06);color:#cbd6e9}.ts-shell--storefront{min-height:0;padding-block:0}.ts-shell--storefront+.ts-footer{border-top:0}.ts-shell--storefront+.ts-footer:before,.ts-shell--storefront+.ts-footer:after{inset-inline:0}
.sp-home{margin-inline:calc(var(--ec-gutter) * -1)}
.sp-hero{min-height:680px;padding:clamp(70px,8vw,120px) var(--ec-gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(460px,.9fr);gap:clamp(40px,7vw,110px);align-items:center;background:linear-gradient(135deg,#fbfcff 0%,#edf3ff 100%);overflow:hidden}
.sp-eyebrow{display:flex;gap:.55rem;align-items:center;color:var(--ec-brand);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.sp-hero h1{font-size:clamp(3.5rem,6.2vw,6.8rem);line-height:.93;letter-spacing:-.075em;margin:.9rem 0 1.6rem;max-width:850px}.sp-hero__desc{font-size:clamp(1rem,1.35vw,1.25rem);line-height:1.75;color:var(--ec-ink-muted);max-width:660px}.sp-actions{display:flex;gap:.8rem;align-items:center;margin-top:2rem}.sp-btn-primary{display:inline-flex;align-items:center;gap:1.1rem;background:var(--ec-brand);color:#fff!important;padding:.9rem 1.25rem;text-decoration:none}.sp-btn-primary:hover{background:#2353c7;transform:translateY(-1px)}.sp-btn-secondary{padding:.85rem 1rem;border:1px solid var(--ec-border);border-radius:var(--ec-radius-sm);background:#fff;color:var(--ec-ink);font-weight:700;text-decoration:none}
.sp-proof{display:flex;gap:1.6rem;margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--ec-border)}.sp-proof span{display:flex;flex-direction:column;color:var(--ec-ink-muted);font-size:.72rem}.sp-proof b{font:700 1.45rem var(--ec-font-heading);color:var(--ec-ink)}
.sp-hero__visual{position:relative}.sp-admin{background:#fff;border:1px solid #d5ddeb;box-shadow:var(--ec-shadow-3);transform:rotate(1deg);border-radius:var(--ec-radius-md);overflow:hidden}.sp-admin__bar{height:40px;background:#e9edf4;display:flex;align-items:center;gap:5px;padding:0 13px;color:#7d899e;font-size:.65rem}.sp-admin__bar i{width:6px;height:6px;border-radius:50%;background:#b5becd}.sp-admin__bar i:first-child{background:var(--ec-accent)}.sp-admin__bar span{margin-left:auto}.sp-admin__body{display:flex;min-height:430px}.sp-admin__body>aside{width:72px;background:#101a35;padding:17px}.sp-admin__body>aside b{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:var(--ec-accent);color:#fff}.sp-admin__body>aside i{display:block;height:5px;border-radius:4px;background:#41506d;margin-top:24px}.sp-admin__body>main{flex:1;padding:28px}.sp-admin__body main header{display:flex;justify-content:space-between}.sp-admin__body main header span{width:72px;height:20px;background:#edf0f5}.sp-admin__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:35px 0}.sp-admin__stats i{height:68px;border:1px solid var(--ec-border);border-radius:6px}.sp-admin__chart{height:190px;display:flex;align-items:end;gap:8px;border-bottom:1px solid var(--ec-border)}.sp-admin__chart i{height:var(--h);flex:1;background:var(--ec-brand);border-radius:3px 3px 0 0}.sp-float{position:absolute;background:#fff;border:1px solid var(--ec-border);box-shadow:var(--ec-shadow-2);padding:.9rem 1rem;border-radius:10px}.sp-float small{display:block;font-size:.58rem;color:var(--ec-ink-muted)}.sp-float b{font-size:1.1rem}.sp-float em{color:var(--ec-success);font-size:.7rem}.sp-float--revenue{left:-34px;bottom:38px}.sp-float--license{right:-20px;top:40px;display:flex;align-items:center;gap:.65rem}.sp-float--license span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#dcf8ec;color:var(--ec-success)}
.sp-trust{padding:1.8rem var(--ec-gutter);background:linear-gradient(90deg,#f4f7fb 0%,#edf2f8 50%,#f4f7fb 100%);border-block:1px solid #dbe3ee;text-align:center}.sp-trust>span{font-size:.72rem;color:#748096}.sp-trust>div{display:flex;justify-content:space-around;gap:1.5rem;margin-top:1.1rem}.sp-trust b{font-size:.78rem;letter-spacing:.04em;color:#536078}
.sp-section{padding:var(--ec-section-space) var(--ec-gutter)}.sp-products{background:radial-gradient(circle at 88% 8%,rgb(16 26 53 / .065),transparent 36%),linear-gradient(145deg,#f2f5f9 0%,#e5ebf3 100%);border-block:1px solid #d1dae7}.sp-section__head{display:flex;justify-content:space-between;align-items:end;gap:3rem;margin-bottom:3rem}.sp-section__head small,.sp-easycommerce small,.sp-cta small{color:var(--ec-brand);font-weight:800;letter-spacing:.1em}.sp-section__head h2,.sp-easycommerce h2,.sp-cta h2{font-size:clamp(2.5rem,4.4vw,4.6rem);line-height:1.04;letter-spacing:-.06em;margin:.65rem 0 0}.sp-section__head p{max-width:490px;color:var(--ec-ink-muted);line-height:1.75}.sp-product-grid{display:grid;grid-template-columns:repeat(var(--ec-grid,3),minmax(0,1fr));gap:1.25rem}.sp-text-link{display:flex;width:max-content;gap:1rem;margin:2.5rem auto 0;color:var(--ec-ink);font-weight:700;text-decoration:none;border-bottom:1px solid}
.ts-pcard{display:flex;min-width:0;flex-direction:column;background:#fff;border:1px solid var(--ec-border);border-radius:var(--ec-radius-md) var(--ec-radius-md) 0 0;overflow:hidden;box-shadow:none;transition:transform var(--ec-dur-2),box-shadow var(--ec-dur-2)}.ts-pcard:hover{transform:translateY(-5px);box-shadow:var(--ec-shadow-2)}.ts-pcard__media{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--ec-surface-soft);text-decoration:none}.ts-pcard__media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center top}.ts-pcard__placeholder{position:absolute;inset:0;display:grid;place-items:center;font:700 3rem var(--ec-font-heading);color:var(--ec-brand)}.ts-pcard__body{display:flex;flex:1;min-width:0;flex-direction:column;padding:1.65rem}.ts-pcard__meta{display:flex;align-items:center;justify-content:space-between;gap:1rem}.ts-pcard__category{color:var(--ec-ink-muted);font-size:.72rem}.ts-pcard__price{margin:0;white-space:nowrap;font-size:.72rem}.ts-pcard__title{margin:.8rem 0 .7rem;font-size:clamp(1.35rem,1.7vw,1.8rem);line-height:1.15}.ts-pcard__title a{color:inherit;text-decoration:none}.ts-pcard__summary{min-height:3.5em;margin:0;color:var(--ec-ink-muted);font-size:.86rem;line-height:1.65}.ts-pcard__amount{color:var(--ec-brand);font-weight:800}.ts-pcard__features{display:flex;flex-wrap:wrap;gap:.45rem 1rem;min-height:2.2rem;margin:auto 0 1.25rem;padding:1.7rem 0 0;list-style:none;color:#536079;font-size:.68rem}.ts-pcard__features li{display:flex;align-items:center;gap:.35rem}.ts-pcard__features li span{color:var(--ec-success);font-weight:800}.ts-pcard__learn{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid var(--ec-border);color:var(--ec-ink);font-size:.76rem;font-weight:800;text-decoration:none}.ts-pcard__learn:hover{color:var(--ec-brand)}.ts-pcard__stock{display:none}.ts-pcard__add{border-radius:8px;background:var(--ec-brand);color:#fff;border:0}
.sp-easycommerce{padding:var(--ec-section-space) var(--ec-gutter);background:radial-gradient(circle at 8% 12%,rgb(var(--ec-brand-rgb) / .11),transparent 30%),linear-gradient(135deg,#edf2ff 0%,#dfe8fb 100%);border-block:1px solid #cfdaef;display:grid;grid-template-columns:.75fr 1.25fr;gap:7vw;align-items:center}.sp-easycommerce p{color:var(--ec-ink-muted);line-height:1.75}.sp-easycommerce ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:2rem 0}.sp-easycommerce li{font-size:.86rem}.sp-ec-showcase{position:relative;margin:0;border:1px solid #c4d1e8;border-radius:var(--ec-radius-lg);background:#f7faff;box-shadow:0 28px 70px rgb(16 26 53 / .18);overflow:visible}.sp-ec-showcase img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:inherit}.sp-ec-showcase figcaption{position:absolute;right:clamp(12px,2vw,28px);bottom:clamp(-18px,-1.3vw,-10px);padding:.85rem 1rem;border-radius:8px;background:#101a35;color:#fff;font-size:.7rem;font-weight:800;box-shadow:0 12px 28px rgb(16 26 53 / .22)}
.sp-slot{padding:var(--ec-section-space) var(--ec-gutter);background:#fff}.sp-slot--soft{background:var(--ec-surface-soft)}.sp-cta{text-align:center;padding:var(--ec-section-space) var(--ec-gutter);background:linear-gradient(135deg,#101a35,#243f82);color:#fff}.sp-cta h2{color:#fff}.sp-cta p{color:#c1cbe0;max-width:700px;margin:1.2rem auto 2rem}.sp-cta .sp-btn-primary{background:var(--ec-accent);color:#fff}
/* EasyCommerce SPA: the product layout engine owns content; this layer owns the visual system. */
#ec-store-root{--background:218 33% 98%;--foreground:224 43% 16%;--card:0 0% 100%;--card-foreground:224 43% 16%;--primary:222 80% 55%;--primary-foreground:0 0% 100%;--secondary:218 65% 96%;--secondary-foreground:224 43% 16%;--muted:218 24% 94%;--muted-foreground:220 13% 46%;--accent:12 87% 59%;--accent-foreground:0 0% 100%;--border:220 22% 89%;--ring:222 80% 55%;font-family:var(--ec-font-body)}
#ec-store-root h1,#ec-store-root h2,#ec-store-root h3{font-family:var(--ec-font-heading);letter-spacing:-.045em}
#ec-store-root [data-section-type]{scroll-margin-top:96px}
#ec-store-root [data-section-type="hero"],#ec-store-root [data-section-type="product-hero"]{background:linear-gradient(135deg,#fbfcff,#edf3ff)}
#ec-store-root [data-section-type="feature-grid"] [class*="grid"]>*,#ec-store-root [data-section-type="use-cases"] [class*="grid"]>*,#ec-store-root [data-section-type="faq"] [class*="border"]{border-color:var(--ec-border);border-radius:var(--ec-radius-md)}
#ec-store-root [data-section-type="statistics"]{background:#101a35;color:#fff}
#ec-store-root [data-section-type="testimonials"]{background:#eaf0ff}
#ec-store-root [data-section-type="pricing-purchase"],#ec-store-root [data-section-type="pricing-table"]{background:#f1f4f9}
#ec-store-root button,#ec-store-root [role="button"]{border-radius:8px}
@media(max-width:1024px){.sp-hero{grid-template-columns:1fr}.sp-hero__visual{max-width:720px}.sp-product-grid{grid-template-columns:repeat(2,1fr)}.sp-easycommerce{grid-template-columns:1fr}.sp-float--license{right:8px}}
@media(max-width:640px){.sp-home{margin-inline:calc(var(--ec-gutter) * -1)}.sp-hero{padding:64px var(--ec-gutter)}.sp-hero h1{font-size:3.5rem}.sp-actions{align-items:flex-start;flex-direction:column}.sp-proof{gap:1rem;flex-wrap:wrap}.sp-admin__body{min-height:330px}.sp-float{display:none}.sp-trust>div{flex-wrap:wrap}.sp-section__head{align-items:flex-start;flex-direction:column}.sp-product-grid{grid-template-columns:1fr}.sp-easycommerce ul{grid-template-columns:1fr}.sp-ec-showcase figcaption{position:static;margin:.75rem;text-align:center}}

/* ------------------------------------------------------------------ *
 * Flush content shell + container-width chrome (requested).
 * ------------------------------------------------------------------ */
.ts-shell:not(.ts-shell--storefront) {
    padding-block: 0;
    display: flex;
    flex-direction: column;
}

/* The main region runs from the header to the footer with no card and no
   empty band. A small top inset keeps the content clear of the menu. */
.ts-shell:not(.ts-shell--storefront) .ts-main {
    flex: 1 0 auto;
    min-width: 0;
    /* Escape the container gutter (the sp-home idiom) so the main region
       spans the full layout box on every page, exactly like the home. */
    margin-inline: calc(var(--ec-gut) * -1);
    padding: clamp(1rem, 2vw, 1.5rem) 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* One boxed column at the layout width (--ec-cw) on every page: the header +
   topbar bands, the storefront sections and the footer band all span the full
   box, and their content keeps the standard side gutter. Tracks the layout
   setting automatically (edge-to-edge when it is set to full width). */
.ts-topbar,
.ts-header {
    max-width: var(--ec-cw);
    margin-inline: auto;
}

/* Footer band fills the full box too, so it lines up with the header and the
   storefront rather than sitting inset. */
.ts-footer::before,
.ts-footer::after {
    inset-inline: 0;
}

/* Keep the positioned header above later page chrome (for example the CjForum
   sticky toolbar) so its menus paint above content but below modals and toasts.
   Do not add filters here: they would contain the fixed mobile navigation. */
.ts-header {
    position: relative;
    z-index: 950;
}

/* ------------------------------------------------------------------ *
 * Footer payment methods: a single inline row of brand icons. The text
 * label stays in the DOM as an accessible fallback (moved off-screen).
 * ------------------------------------------------------------------ */
.ts-footer .ts-footer__pay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    grid-template-columns: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-footer__pay li {
    width: 40px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent center / contain no-repeat;
    box-shadow: 0 1px 2px rgb(0 0 0 / .25);
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
}

.ts-footer__pay li[data-pay="visa"]       { background-image: url(../images/payments/visa.svg); }
.ts-footer__pay li[data-pay="mastercard"] { background-image: url(../images/payments/mastercard.svg); }
.ts-footer__pay li[data-pay="amex"]       { background-image: url(../images/payments/amex.svg); }
.ts-footer__pay li[data-pay="discover"]   { background-image: url(../images/payments/discover.svg); }
.ts-footer__pay li[data-pay="paypal"]     { background-image: url(../images/payments/paypal.svg); }
.ts-footer__pay li[data-pay="stripe"]     { background-image: url(../images/payments/stripe.svg); }

/* ------------------------------------------------------------------ *
 * Product page presentation. Two goals:
 *   1. FLUID width - EasyCommerce sections cap content at .container-custom
 *      (1280px); on the shondalai shell that reads as narrow / over-padded.
 *      Fill the container at whatever width it is (1600, 1440, ...).
 *   2. CONNECTED + REFINED, like the home page - header, component and footer
 *      flow as one continuous surface (no floating card, no gaps) on one calm
 *      background. Neutralise EC's tint bands + the template's dark stats band;
 *      rein in text/split sections so full width does not read sparse; and lift
 *      every card with one consistent soft shadow.
 * Scoped to .product-layout so shop/category views keep their own widths;
 * inner text blocks keep their max-w-* so copy stays readable.
 * ------------------------------------------------------------------ */
.ts-shell .product-layout,
.ts-shell .product-layout .product-layout__main,
.ts-shell .product-layout .container-custom {
    max-width: 100%;
}

/* Connect header -> component -> footer flush, like the home page: no floating
   card, no gaps. The non-storefront .ts-main adds a 24px pad above main; drop it
   only for product pages (via :has) so the hero meets the header. */
.ts-shell:not(.ts-shell--storefront) .ts-main:has(.product-layout) {
    padding-top: 0 !important;
}

.ts-shell .product-layout {
    background: transparent;
    /* !important overrides the prior deployed panel rule + EC preflight so no
       card outline remains and the component reads flush. */
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

/* Neutralise EC's tint overlays and the template's dark statistics band so
   every section blends into the continuous flow. */
.ts-shell .product-layout [class*="bg-muted"],
.ts-shell .product-layout .bg-background {
    background-color: transparent !important;
}

.ts-shell .product-layout [data-section-type="statistics"] {
    color: var(--ec-fg) !important;
}

/* Full width suits card grids (stats, features), but text and image-split
   sections spread thin edge-to-edge. Rein those in to a readable measure,
   centred inside their full-width section. */
.ts-shell .product-layout [data-section-type="image-text-split"] .container-custom {
    max-width: 1180px !important;
}
.ts-shell .product-layout [data-section-type="faq"] .container-custom {
    max-width: 900px !important;
}
.ts-shell .product-layout [data-section-type="compatibility"] .container-custom {
    max-width: 1100px !important;
}
.ts-shell .product-layout [data-section-type="cta-block"] .container-custom {
    max-width: 1120px !important;
}

/* Calm the very airy 96px section padding. */
.ts-shell .product-layout .py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Lift every card with one consistent soft shadow + refined border, so the
   page reads as premium cards on a calm background rather than flat blocks. */
.ts-shell .product-layout .bg-card {
    border-color: #e6ecf5 !important;
    box-shadow: 0 10px 30px rgb(16 26 53 / .06) !important;
}

/* FAQ accordion rows stay lighter so a stack of them does not feel heavy. */
.ts-shell .product-layout [data-section-type="faq"] .bg-card {
    box-shadow: 0 4px 14px rgb(16 26 53 / .04) !important;
}