/* ==========================================================================
   SALERS — world-class storefront theme
   Philosophy: restraint + rhythm + crisp type. Red is a sharp accent (logo,
   price, primary CTA), never a flood. Ink text, near-white canvas, white
   cards with layered shadow and real micro-interactions.
   Loaded last in frontend/layouts/app.blade.php so it wins.
   ========================================================================== */

:root {
    --s-red:        #E4002B;   /* Salers brand red */
    --s-red-600:    #C70026;
    --s-red-700:    #B00020;
    --s-ink:        #15171a;   /* primary text */
    --s-ink-2:      #5b626b;   /* secondary text */
    --s-canvas:     #f4f5f7;   /* page background */
    --s-card:       #ffffff;
    --s-line:       #e7e9ee;   /* hairline borders */
    --s-shadow:     0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
    --s-shadow-lg:  0 12px 32px rgba(16,24,40,.14);
    --s-radius:     14px;
}

/* ---- Canvas & type ----------------------------------------------------- */
body {
    background-color: var(--s-canvas) !important;
    color: var(--s-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.01em;
}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5 { font-weight: 700; letter-spacing: -0.02em; color: var(--s-ink); }
.fs-12{letter-spacing:0}

/* ---- Brand wordmark ---------------------------------------------------- */
.salers-wordmark{
    font-family:'Inter',sans-serif;
    font-weight:800;
    font-size:27px;
    letter-spacing:-.04em;
    color:var(--s-red);
    line-height:1;
    display:inline-flex;
    align-items:center;
}
.salers-wordmark::after{
    content:"";
    width:7px;height:7px;margin-left:2px;margin-top:10px;
    background:var(--s-red);border-radius:50%;
}

/* ---- Top utility bar / header polish ----------------------------------- */
.top-header{ background:var(--s-ink) !important; }
.top-header, .top-header a, .top-header span { color:#e9eaee !important; }
.logo-bar-area{ background:#fff !important; border-bottom:1px solid var(--s-line) !important; box-shadow:var(--s-shadow); }

/* search: clean pill, red submit ---------------------------------------- */
.front-header-search{ border-radius:999px !important; }
.front-header-search .form-control,
.front-header-search input[type="text"]{
    border:1px solid var(--s-line) !important;
    border-right:0 !important;
    border-radius:999px 0 0 999px !important;
    height:46px;
}
.front-header-search .btn,
.front-header-search button[type="submit"]{
    background:var(--s-red) !important;
    color:#fff !important;
    border-radius:0 999px 999px 0 !important;
    height:46px; padding-inline:22px;
    transition:background .15s ease;
}
.front-header-search .btn:hover{ background:var(--s-red-700) !important; }

/* Guest wishlist heart + count badge */
.salers-guest-wishlist{ display:inline-flex; align-items:center; text-decoration:none; transition:color .15s ease; }
.salers-guest-wishlist:hover{ color:var(--s-red) !important; }
.salers-wishlist-badge{
    position:absolute; top:-5px; right:-8px; min-width:17px; height:17px; padding:0 4px;
    border-radius:999px; background:var(--s-red); color:#fff; font-size:10px; font-weight:700;
    display:none; align-items:center; justify-content:center; line-height:1;
}

/* Track My Order link (far right of nav) */
.salers-track-order:hover{ color:var(--s-red) !important; }
.salers-track-order i{ opacity:.75; }

/* category nav row ------------------------------------------------------- */
.bottom-header,.navbar{ background:#fff !important; border-bottom:1px solid var(--s-line); }
.bottom-header a:hover,.navbar a:hover{ color:var(--s-red) !important; }

/* ---- Buttons: confident pills ----------------------------------------- */
.btn{ border-radius:999px !important; font-weight:600; letter-spacing:-.01em; transition:all .16s ease; }
.btn-primary,.btn-base,.btn.bg-primary{
    background:var(--s-red) !important; border-color:var(--s-red) !important; color:#fff !important;
    box-shadow:0 1px 2px rgba(228,0,43,.25);
}
.btn-primary:hover,.btn-base:hover,.btn.bg-primary:hover{
    background:var(--s-red-700) !important; border-color:var(--s-red-700) !important;
    transform:translateY(-1px); box-shadow:0 6px 16px rgba(228,0,43,.3);
}
.btn-soft-primary,.btn-outline-primary{ color:var(--s-red) !important; border-color:var(--s-red) !important; background:transparent !important; }
.btn-soft-primary:hover,.btn-outline-primary:hover{ background:var(--s-red) !important; color:#fff !important; }

/* ---- Accent mapping (old red/base -> Salers red) ----------------------- */
.text-primary,a.text-primary,.hov-text-primary:hover{ color:var(--s-red) !important; }
.bg-primary{ background-color:var(--s-red) !important; }
a{ transition:color .15s ease; }
a:hover{ color:var(--s-red) !important; }

/* ---- Product cards: the centerpiece ------------------------------------ */
.aiz-card-box{
    background:var(--s-card) !important;
    border:1px solid var(--s-line) !important;
    border-radius:var(--s-radius) !important;
    box-shadow:var(--s-shadow);
    transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    overflow:hidden;
}
.aiz-card-box:hover{
    box-shadow:var(--s-shadow-lg) !important;
    transform:translateY(-4px);
    border-color:#dfe2e8 !important;
}
/* image zoom on hover */
.aiz-card-box .image-hover-effect,
.aiz-card-box .img-fit.overflow-hidden{ overflow:hidden; }
.aiz-card-box .product-main-image{ transition:transform .45s cubic-bezier(.2,.7,.3,1) !important; }
.aiz-card-box:hover .product-main-image{ transform:scale(1.06); }

/* Incredible-style hover reveal: Add-to-Cart bar in Salers red + quick icons */
.aiz-card-box .cart-btn{
    background:var(--s-red) !important; color:#fff !important; border:0 !important;
    letter-spacing:-.01em; box-shadow:0 -2px 10px rgba(228,0,43,.18);
    transition:background .15s ease;
}
.aiz-card-box .cart-btn:hover{ background:var(--s-red-700) !important; color:#fff !important; }
.aiz-card-box .cart-btn .cart-btn-text{ font-weight:700; }
/* reveal top-right quick icons only on card hover (Incredible-style) */
.aiz-card-box .absolute-top-right.aiz-p-hov-icon{ opacity:0; transition:opacity .18s ease; }
.aiz-card-box:hover .absolute-top-right.aiz-p-hov-icon{ opacity:1; }
/* top-right quick-action icons: white chip, red on icon-hover */
.aiz-card-box .aiz-p-hov-icon > a{
    background:#fff; border:1px solid var(--s-line); border-radius:9px;
    width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
    margin-bottom:6px; box-shadow:0 2px 6px rgba(16,24,40,.08); transition:all .15s ease;
}
.aiz-card-box .aiz-p-hov-icon > a:hover{ background:var(--s-red); border-color:var(--s-red); }
.aiz-card-box .aiz-p-hov-icon > a:hover svg path{ fill:#fff !important; }

/* product name */
.aiz-card-box .fw-600,.aiz-card-box .fw-700{ letter-spacing:-.01em; }
/* price: red, prominent */
.aiz-card-box .text-primary,
.aiz-card-box .fw-700.text-primary,
.aiz-card-box [class*="price"]{ color:var(--s-red) !important; font-weight:700 !important; }
/* discount / strike */
del,.text-secondary del{ color:var(--s-ink-2) !important; }

/* discount badge polish */
.badge,.position-absolute .badge{ border-radius:999px !important; font-weight:600; letter-spacing:0; }

/* ---- Section headings: kicker + tight type ----------------------------- */
.section-heading,.h4.fw-700{ position:relative; }

/* ---- Featured category tiles ------------------------------------------ */
.featured-categories,.home-categories{ border-radius:var(--s-radius) !important; }

/* ---- Bespoke hero ------------------------------------------------------ */
.salers-hero{
    position:relative;
    display:flex; flex-direction:column; justify-content:center;
    padding:44px 40px;
    background: linear-gradient(135deg, #23262d 0%, #14161a 55%, #0e1013 100%);
    color:#fff;
    border:1px solid rgba(255,255,255,.06);
    isolation:isolate;
    transition:transform .25s ease, box-shadow .25s ease;
}
.salers-hero:hover{ transform:translateY(-3px); box-shadow:var(--s-shadow-lg); }
.salers-hero--wide{ padding:48px 56px; }
.salers-hero--wide .salers-hero__glow{ width:420px; height:420px; inset:auto -80px -120px auto; }
@media (min-width:992px){
    .salers-hero--wide .salers-hero__sub{ max-width:40ch; }
}
.salers-hero__glow{
    position:absolute; inset:auto -40px -60px auto; width:260px; height:260px;
    background:radial-gradient(circle, rgba(255,255,255,.05), transparent 70%);
    filter:blur(20px); z-index:-1;
}
.salers-hero__kicker{
    font-size:12px; font-weight:700; letter-spacing:.14em; color:#ff5d76;
    text-transform:uppercase; margin-bottom:14px;
}
.salers-hero__title{
    font-size:clamp(28px,3.2vw,44px); font-weight:800; line-height:1.04;
    letter-spacing:-.03em; color:#fff; margin:0 0 14px;
}
.salers-hero__sub{
    font-size:15px; line-height:1.5; color:#c7cbd2; max-width:34ch; margin:0 0 26px;
}
.salers-hero__cta{
    align-self:flex-start;
    background:var(--s-red); color:#fff; font-weight:700; font-size:14px;
    padding:12px 22px; border-radius:999px;
    box-shadow:0 8px 22px rgba(228,0,43,.4);
    transition:transform .15s ease, background .15s ease;
}
.salers-hero:hover .salers-hero__cta{ background:#ff1f47; transform:translateX(3px); }

/* ---- Header: Incredible-style sign-in / cart pills --------------------- */
.salers-signin-pill{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--s-ink); color:#fff !important; border-radius:999px;
    padding:7px 18px 7px 9px; text-decoration:none; white-space:nowrap;
    transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.salers-signin-pill:hover{ background:#000; color:#fff !important; transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.18); }
.salers-signin-pill__icon{
    display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center;
    background:rgba(255,255,255,.14); border-radius:50%; color:#fff; flex:0 0 auto;
}
.salers-signin-pill__text{ display:flex; flex-direction:column; line-height:1.08; }
.salers-signin-pill__text small{ font-size:10px; opacity:.72; font-weight:500; letter-spacing:.02em; }
.salers-signin-pill__text strong{ font-size:13px; font-weight:700; letter-spacing:-.01em; }

/* main-row Products / Explore nav */
.salers-mainnav{ gap:2px; }
.salers-mainnav__link{
    display:inline-flex; align-items:center; white-space:nowrap;
    padding:9px 14px; border-radius:999px;
    font-weight:600; font-size:14px; color:var(--s-ink) !important;
    text-decoration:none; letter-spacing:-.01em;
    transition:background .15s ease, color .15s ease;
}
.salers-mainnav__link:hover{ background:#f4f5f7; color:var(--s-red) !important; }
.salers-mainnav__link i{ opacity:.6; transition:transform .18s ease; }
.salers-mainnav__link:hover i{ transform:rotate(180deg); color:var(--s-red); opacity:1; }

/* cart pill in the main row */
.salers-cart-wrap{ display:inline-flex; align-items:center; }
.salers-cart-wrap .nav-cart-box > a{
    background:#f4f5f7; border-radius:999px; padding:9px 16px !important;
    transition:background .15s ease, box-shadow .15s ease;
}
.salers-cart-wrap .nav-cart-box > a:hover{ background:#eaecf0; box-shadow:var(--s-shadow); }

/* ---- Search focus dropdown (Popular Search + Products) ----------------- */
.salers-search-overlay{
    display:none;
    position:fixed; inset:0; background:rgba(10,12,16,.5);
    z-index:1020; animation:salersFade .18s ease;
}
@keyframes salersFade{ from{opacity:0} to{opacity:1} }
.salers-search-pop{
    display:none;
    position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
    width:min(1040px, 92vw);
    background:#fff; border-radius:18px;
    box-shadow:0 24px 60px rgba(16,24,40,.28);
    padding:26px 28px; z-index:1060;
}
/* show on focus-within (pure CSS, no JS race); hide while a query is typed */
.front-header-search:focus-within .salers-search-pop:not(.has-query){ display:block; }
.front-header-search:focus-within ~ .salers-search-overlay:not(.has-query){ display:block; }
.salers-search-pop__grid{ display:flex; gap:32px; }
.salers-search-pop__left{ flex:0 0 190px; border-right:1px solid var(--s-line); padding-right:24px; }
.salers-search-pop__right{ flex:1 1 auto; min-width:0; }
.salers-search-pop__title{ font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--s-ink); margin-bottom:16px; }
.salers-pop-terms li{ margin-bottom:13px; }
.salers-pop-terms a{ color:var(--s-ink-2); font-size:15px; text-decoration:none; transition:color .15s ease; }
.salers-pop-terms a:hover{ color:var(--s-red); }
.salers-search-pop__nav{ display:flex; gap:8px; }
.salers-search-pop__nav button{
    width:32px; height:32px; border-radius:50%; border:1px solid var(--s-line);
    background:#fff; color:var(--s-ink); display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .15s ease;
}
.salers-search-pop__nav button:hover{ background:var(--s-red); color:#fff; border-color:var(--s-red); }
.salers-pop-scroll{ display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:6px; }
.salers-pop-card{ flex:0 0 186px; max-width:186px; }
.salers-pop-card .aiz-card-box{ height:100%; }
.salers-pop-scroll::-webkit-scrollbar{ height:6px; }
.salers-pop-scroll::-webkit-scrollbar-thumb{ background:#cdd2da; border-radius:999px; }
@media (max-width:991px){ .salers-search-pop{ display:none !important; } }

/* search: prominent centered pill (Incredible) */
.front-header-search .search-input-box{ width:100%; }
.front-header-search .search-input-box input{
    background:#fff !important;
    border:1px solid var(--s-line) !important;
    border-radius:999px !important;
    height:46px; padding-left:20px; padding-right:46px;
    box-shadow:inset 0 1px 2px rgba(16,24,40,.03);
}
.front-header-search .search-input-box input:focus{
    border-color:var(--s-red) !important; box-shadow:0 0 0 3px rgba(228,0,43,.12) !important;
}
.front-header-search .search-input-box svg{ right:16px; }

/* bottom-bar cart as a dark pill */
.bottom-header .nav-cart-box,
#category-menu-bar ~ * .nav-cart-box{ }

/* ---- Account side panel (Incredible-style slide-out) ------------------- */
.salers-account-overlay{
    position:fixed; inset:0; background:rgba(10,12,16,.5);
    opacity:0; visibility:hidden; transition:opacity .25s ease; z-index:1090;
}
.salers-account-overlay.open{ opacity:1; visibility:visible; }
.salers-account-panel{
    position:fixed; top:0; right:0; height:100vh; width:392px; max-width:92vw;
    background:#fff; box-shadow:-12px 0 44px rgba(16,24,40,.22);
    transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
    z-index:1095; display:flex; flex-direction:column; overflow-y:auto;
}
.salers-account-panel.open{ transform:translateX(0); }
.salers-account-panel__head{ display:flex; align-items:flex-start; justify-content:space-between; padding:22px 24px 14px; }
.salers-account-panel__head h3{ font-size:22px; font-weight:800; margin:0; color:var(--s-ink); letter-spacing:-.02em; }
.salers-account-panel__head span{ font-size:13px; color:var(--s-ink-2); }
.salers-account-close{ background:none; border:0; font-size:28px; line-height:1; color:var(--s-ink-2); cursor:pointer; }
.salers-account-close:hover{ color:var(--s-red); }
.salers-account-banner{
    margin:0 24px 18px; padding:18px 20px; border-radius:14px;
    background:linear-gradient(135deg,#23262d,#0e1013);
    color:#fff; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.salers-account-banner__tag{ font-weight:800; color:var(--s-red); letter-spacing:-.03em; font-size:22px; }
.salers-account-banner__logo{ height:26px; width:auto; max-width:130px; object-fit:contain; }
.salers-account-banner__txt{ font-size:13.5px; text-align:right; line-height:1.3; }
.salers-account-body{ padding:0 24px 28px; }
.salers-account-body h4{ font-size:17px; font-weight:800; color:var(--s-ink); margin:8px 0 4px; letter-spacing:-.01em; }
.salers-account-body > p{ font-size:13px; color:var(--s-ink-2); margin-bottom:14px; }
.salers-account-form input{ width:100%; height:46px; border:1px solid var(--s-line); border-radius:10px; padding:0 16px; margin-bottom:10px; font-size:14px; }
.salers-account-form input:focus{ border-color:var(--s-red); outline:none; box-shadow:0 0 0 3px rgba(228,0,43,.12); }
.salers-account-signin{ width:100%; height:48px; border:0; border-radius:999px; background:var(--s-red); color:#fff; font-weight:700; cursor:pointer; transition:background .15s ease; }
.salers-account-signin:hover{ background:var(--s-red-700); color:#fff; }
.salers-acct-toggle{ display:flex; background:#f1f2f4; border-radius:999px; padding:5px; margin:6px 0 14px; }
.salers-acct-tab{ flex:1; border:0; background:none; padding:10px; border-radius:999px; font-weight:700; font-size:14px; color:var(--s-ink); cursor:pointer; transition:all .15s ease; }
.salers-acct-tab.active{ background:var(--s-ink); color:#fff; }
.salers-acct-benefits{ font-size:13px; color:var(--s-ink-2); margin-bottom:16px; }
.salers-acct-benefits ul{ padding-left:18px; margin:6px 0 0; }
.salers-acct-benefits li{ margin-bottom:5px; }
.salers-account-create{ display:block; text-align:center; width:100%; padding:13px; border:1.5px solid var(--s-red); border-radius:999px; color:var(--s-red); font-weight:700; text-decoration:none; transition:all .15s ease; }
.salers-account-create:hover{ background:var(--s-red); color:#fff !important; }

/* ---- Auth pages: login / register (Incredible-style) ------------------- */
.salers-auth-hero{
    position:relative; display:flex; flex-direction:column; justify-content:center;
    padding:48px 44px; min-height:560px; overflow:hidden; color:#fff;
    background: linear-gradient(135deg, #23262d 0%, #14161a 55%, #0e1013 100%);
}
.salers-auth-hero__title{ font-size:40px; font-weight:800; letter-spacing:-.03em; margin:6px 0 12px; color:#fff; }
.salers-auth-hero__sub{ font-size:15px; color:#c7cbd2; max-width:36ch; margin-bottom:22px; }
.salers-auth-hero__img{ max-width:74%; align-self:center; position:relative; z-index:2; filter:drop-shadow(0 24px 40px rgba(0,0,0,.5)); }

.salers-auth-tabs{ display:flex; background:#f1f2f4; border-radius:999px; padding:5px; margin-bottom:18px; }
.salers-auth-tab{ flex:1; text-align:center; padding:11px 8px; border-radius:999px; font-weight:700; font-size:15px; color:var(--s-ink); text-decoration:none; transition:all .15s ease; }
.salers-auth-tab.active{ background:#fff; color:var(--s-red); box-shadow:0 2px 8px rgba(16,24,40,.1); }
.salers-auth-tab:not(.active):hover{ color:var(--s-red); }
.salers-auth-subtitle{ font-size:13.5px; color:var(--s-ink-2); line-height:1.5; margin-bottom:22px; }
.aiz-main-wrapper .form-control{ border-radius:10px !important; }
#createAccountBtn, #loginBtn, .auth-submit-btn, .right-content .submit-button{
    background:var(--s-red) !important; border-color:var(--s-red) !important; color:#fff !important;
    border-radius:999px !important; padding:14px !important; font-weight:700 !important; letter-spacing:-.01em;
}
#createAccountBtn:hover, #loginBtn:hover, .right-content .submit-button:hover{ background:var(--s-red-700) !important; }

/* ---- Product detail page (Incredible-style) ---------------------------- */
/* primary Add to Cart = solid red pill, Buy Now = dark pill */
#added_to_cart_btn.add-to-cart, .add-to-cart{
    background:var(--s-red) !important; color:#fff !important;
    border-radius:999px !important; letter-spacing:-.01em;
    box-shadow:0 6px 16px rgba(228,0,43,.25); transition:all .16s ease;
}
#added_to_cart_btn.add-to-cart *, .add-to-cart *{ color:#fff !important; }
#added_to_cart_btn.add-to-cart:hover, .add-to-cart:hover{ background:var(--s-red-700) !important; color:#fff !important; transform:translateY(-1px); }
.buy-now{
    background:var(--s-ink) !important; color:#fff !important;
    border-radius:999px !important; letter-spacing:-.01em; transition:all .16s ease;
}
.buy-now:hover{ background:#000 !important; color:#fff !important; transform:translateY(-1px); }
/* blue accents -> Salers red */
.text-blue{ color:var(--s-red) !important; }
.bg-soft-blue{ background:rgba(228,0,43,.08) !important; }
.animate-underline-blue:hover{ color:var(--s-red) !important; }
.product-details-tab-area .inc-btn, .product-details-tab-area .dec-btn,
.inc-btn, .dec-btn{ border:1px solid var(--s-line) !important; }
/* qty box + chips rounded */
.product-quantity, .quantity-box{ border-radius:999px; }
/* price prominence */
.product-price, .base-price, .main-price{ color:var(--s-red) !important; font-weight:800 !important; }
/* gallery + section cards */
.detail-gallery, .product-gallery, .aiz-card-box{ border-radius:14px; }
/* description / spec tables clean */
.product-description table td{ padding:10px 14px; border-color:var(--s-line) !important; }
/* tabs underline (Incredible-style) */
.product-details-tab .nav-link.active, .nav-tabs .nav-link.active{
    color:var(--s-red) !important; border-bottom:2px solid var(--s-red) !important; background:transparent !important;
}

/* ---- Lifestyle showcase bento grid (Incredible-style) ------------------ */
.salers-showcase{ background:#ffffff; padding:30px 0; }
.salers-showcase__grid{
    display:grid; gap:14px;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:190px 268px 268px;
    grid-template-areas:
        "watch watch call run"
        "cosy  play  bday work"
        "cosy  capt  netw bett";
}
.sc-watch{grid-area:watch} .sc-call{grid-area:call} .sc-run{grid-area:run}
.sc-cosy{grid-area:cosy} .sc-play{grid-area:play} .sc-bday{grid-area:bday}
.sc-work{grid-area:work} .sc-capt{grid-area:capt} .sc-netw{grid-area:netw} .sc-bett{grid-area:bett}
.sc-tile{
    position:relative; overflow:hidden; border-radius:10px;
    background:#1a1a1d; padding:26px 28px; text-decoration:none; display:block;
    box-shadow:inset 0 0 0 0 var(--salers-red, #E4002B);
    transition:background .2s ease, box-shadow .18s ease;
}
.sc-tile:hover{ background:#232328; box-shadow:inset 0 0 0 3px var(--salers-red, #E4002B); }
.sc-tile__body{ position:relative; z-index:2; }
.sc-tile h3{ color:#fff; font-weight:800; font-size:22px; letter-spacing:-.02em; line-height:1.12; margin:0 0 16px; }
.sc-shop{
    display:inline-block; padding:9px 22px; border:1px solid rgba(255,255,255,.55);
    border-radius:7px; color:#fff; font-weight:600; font-size:13px; transition:all .15s ease;
}
.sc-tile:hover .sc-shop{ background:#fff; color:#15171a; border-color:#fff; }
.sc-tile__img{
    position:absolute; bottom:0; right:0; max-height:64%; max-width:58%; object-fit:contain;
    pointer-events:none; filter:drop-shadow(0 12px 22px rgba(0,0,0,.55));
}
.sc-img-sm{ max-height:78%; max-width:44%; }
.sc-img-tall{ max-height:50%; max-width:78%; right:50%; transform:translateX(50%); }
/* Hero "Big-Screen TVs" tile — show the TV a bit larger */
.sc-watch .sc-tile__img{ max-height:84%; max-width:66%; }
/* only the text/promo variant gets the transparent centred treatment;
   a product-image bday tile inherits the normal dark .sc-tile styling */
.sc-bday:has(.sc-bday__text){ background:transparent; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; }
.sc-bday__text h2{ color:#36363c; font-weight:800; font-size:46px; line-height:.92; letter-spacing:-.03em; margin:0; }
.sc-bday__text p{ color:#86868e; font-size:15px; margin-top:14px; }
@media (max-width:991px){
    .salers-showcase__grid{ grid-template-columns:1fr 1fr; grid-template-rows:none; grid-auto-rows:210px; grid-template-areas:none; }
    .sc-tile{ grid-area:auto !important; grid-row:auto !important; }
    .sc-watch{ grid-column:span 2 !important; }
    .sc-bday{ grid-column:span 2 !important; }
}
@media (max-width:575px){
    .salers-showcase__grid{ grid-template-columns:1fr; }
    .sc-watch, .sc-bday{ grid-column:span 1 !important; }
}

/* ---- Brand landing page ------------------------------------------------ */
.salers-section-title{ font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--s-ink); }

.salers-brand-hero{
    position:relative; display:flex; align-items:center; gap:32px;
    min-height:300px; padding:44px 56px; overflow:hidden;
    background:
        radial-gradient(46% 70% at 28% 46%, rgba(46,104,210,.30), transparent 62%),
        radial-gradient(44% 66% at 74% 52%, rgba(50,184,138,.24), transparent 60%),
        radial-gradient(60% 90% at 50% 120%, rgba(120,90,220,.18), transparent 60%),
        linear-gradient(135deg, #1c1f26 0%, #121419 55%, #0c0e12 100%);
    color:#fff; border:1px solid rgba(255,255,255,.06);
}
.salers-brand-hero__text{ flex:1 1 55%; position:relative; z-index:2; }
.salers-brand-hero__title{ font-size:clamp(34px,4vw,56px); font-weight:800; letter-spacing:-.03em; margin:6px 0 12px; color:#fff; }
.salers-brand-hero__sub{ font-size:16px; line-height:1.5; color:#c7cbd2; max-width:46ch; margin:0 0 26px; }
.salers-brand-hero__media{ flex:0 0 38%; display:flex; justify-content:center; align-items:center; position:relative; z-index:2; }
.salers-brand-hero__media img{ max-height:230px; max-width:100%; object-fit:contain;
    filter:drop-shadow(0 24px 40px rgba(0,0,0,.5));
    -webkit-box-reflect: below 6px linear-gradient(to bottom, transparent 58%, rgba(255,255,255,.22)); }
@media (max-width:767px){
    .salers-brand-hero{ flex-direction:column; text-align:center; padding:32px 24px; }
    .salers-brand-hero__media img{ max-height:170px; }
}

/* brand hero slider (homepage) */
.salers-hero-slide{
    display:flex !important; align-items:center; gap:32px;
    height:300px; min-height:300px;
}
@media (min-width:1200px){ .salers-hero-slide{ height:380px; } }
@media (max-width:767px){ .salers-hero-slide{ height:auto; min-height:260px; flex-direction:column; text-align:center; padding:28px 22px; gap:14px; } }
.salers-hero-carousel .slick-dots{ bottom:16px; }
.salers-hero-carousel .slick-dots li button:before{ color:#fff; opacity:.45; font-size:9px; }
.salers-hero-carousel .slick-dots li.slick-active button:before{ color:var(--s-red); opacity:1; }

/* Featured category image: dark outline on hover (Incredible-style) */
.featured-categories .carousel-box .img{ position:relative; }
.featured-categories .carousel-box .img::after{
    content:""; position:absolute; inset:0; border-radius:inherit;
    border:2px solid transparent; transition:border-color .2s ease; pointer-events:none; z-index:3;
}
.featured-categories .carousel-box .img:hover::after{ border-color:var(--s-ink); }

/* brand category tiles */
.salers-brand-tile{
    display:flex; flex-direction:column; align-items:flex-start; gap:6px;
    height:100%; padding:18px 18px; border-radius:14px;
    background:#fff; border:1px solid var(--s-line); box-shadow:var(--s-shadow);
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    text-decoration:none;
}
.salers-brand-tile:hover{ transform:translateY(-3px); box-shadow:var(--s-shadow-lg); border-color:#dfe2e8; }
.salers-brand-tile__icon{ font-size:26px; color:var(--s-red); line-height:1; }
.salers-brand-tile__name{ font-weight:700; font-size:15px; color:var(--s-ink); letter-spacing:-.01em; }
.salers-brand-tile__count{ font-size:12px; color:var(--s-ink-2); }

/* ---- Rounded mega-menu (Incredible-style) ------------------------------ */
#click-category-menu { margin-top: 10px; }
.salers-megamenu{
    width: 340px !important;
    border: 1px solid var(--s-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 50px rgba(16,24,40,.18) !important;
    padding: 10px !important;
    overflow: visible !important;
    background: #fff !important;
    position: relative !important;   /* flyout anchors to the whole menu, not each row */
}
.salers-megamenu .categories{ max-height: none; }
.salers-megamenu .category-nav-element{
    border: 0 !important;
    position: static;                /* so flyout uses the menu as its containing block */
    border-radius: 12px;
}
.salers-megamenu .salers-mm-row{
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 13px 16px !important;
    border-radius: 12px;
    color: var(--s-ink) !important;
    font-weight: 500;
    font-size: 15px;
    transition: background .15s ease, color .15s ease;
    text-decoration: none;
}
.salers-megamenu .salers-mm-icon{
    width: 24px; text-align: center;
    color: #6b7280; font-size: 19px; transition: color .15s ease;
}
.salers-megamenu .salers-mm-label{ flex: 1 1 auto; letter-spacing: -.01em; }
.salers-megamenu .salers-mm-chev{ color: #c0c5cd; font-size: 14px; transition: transform .15s ease, color .15s ease; }
/* hover state — light fill, red accents, chevron nudges */
.salers-megamenu .category-nav-element:hover > .salers-mm-row,
.salers-megamenu .category-nav-element:hover > .salers-mm-row .salers-mm-label{
    background: #f4f5f7; color: var(--s-red) !important;
}
.salers-megamenu .category-nav-element:hover > .salers-mm-row .salers-mm-icon,
.salers-megamenu .category-nav-element:hover > .salers-mm-row .salers-mm-chev{
    color: var(--s-red);
}
.salers-megamenu .category-nav-element:hover > .salers-mm-row .salers-mm-chev{ transform: translateX(3px); }

/* flyout sub-panel — one stable, full-height pane to the right (Incredible-style) */
.salers-megamenu .sub-cat-menu{
    position: absolute;
    left: 100%; top: 0; bottom: 0;            /* contiguous with the list, fixed position */
    margin-left: 12px;
    min-width: 480px; max-width: 640px;
    max-height: 72vh; overflow-y: auto;
    background: #fff;
    border: 1px solid var(--s-line);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(16,24,40,.18);
    padding: 22px 24px !important;
    display: none;
    z-index: 1080;
}
/* invisible bridge across the 12px gap so the mouse never loses :hover
   while travelling from a row into its sub-panel */
.salers-megamenu .sub-cat-menu::before{
    content: ''; position: absolute;
    left: -14px; top: 0; width: 16px; height: 100%;
}
.salers-megamenu .category-nav-element:hover > .sub-cat-menu{ display: block; }
.salers-megamenu .sub-cat-menu .card-columns{ column-count: 2; column-gap: 28px; }
.salers-megamenu .sub-cat-menu .card{ background: transparent; break-inside: avoid; }
.salers-megamenu .sub-cat-menu li.fw-700 a{ color: var(--s-ink) !important; font-weight: 700 !important; }
.salers-megamenu .sub-cat-menu a:hover{ color: var(--s-red) !important; }

/* ---- Footer ------------------------------------------------------------ */
.aiz-footer,footer{ background:var(--s-ink) !important; }
.aiz-footer a:hover{ color:#fff !important; }

/* ---- Forms / inputs ---------------------------------------------------- */
.form-control{ border-radius:10px; border-color:var(--s-line); }
.form-control:focus{ border-color:var(--s-red); box-shadow:0 0 0 3px rgba(228,0,43,.12); }

/* ---- Scrollbar (desktop) ----------------------------------------------- */
@media (min-width:992px){
    ::-webkit-scrollbar{ width:10px;height:10px; }
    ::-webkit-scrollbar-thumb{ background:#cdd2da;border-radius:999px;border:2px solid var(--s-canvas); }
    ::-webkit-scrollbar-thumb:hover{ background:#b6bcc6; }
}

/* ===================================================================
   Slide-in category drawer (Incredible-style) — click to open,
   accordion sub-categories expand in place, page dims behind.
   =================================================================== */
.salers-menu-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; margin-right:6px;
    border:0; background:none; color:var(--s-ink, #15171a); font-size:23px;
    cursor:pointer; border-radius:9px; transition:background .15s ease, color .15s ease;
}
.salers-menu-btn:hover{ background:#f4f5f7; color:var(--s-red, #E4002B); }

.salers-drawer{
    position:fixed; top:0; left:0; height:100vh; height:100dvh;
    width:360px; max-width:88vw;
    background:#fff; z-index:2147483000;
    display:flex; flex-direction:column;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:0 0 60px rgba(16,24,40,.28);
    will-change:transform;
}
.salers-drawer.open{ transform:none; }
.salers-drawer__head{
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 20px; border-bottom:1px solid var(--s-line, #e9ebef);
}
.salers-drawer__title{ font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--s-ink, #15171a); }
.salers-drawer__close{
    border:0; background:#f4f5f7; width:34px; height:34px; border-radius:50%;
    color:var(--s-ink, #15171a); font-size:18px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease;
}
.salers-drawer__close:hover{ background:var(--s-red, #E4002B); color:#fff; }
.salers-drawer__scroll{ flex:1 1 auto; overflow-y:auto; padding:6px 0 24px; }

.salers-drawer .sd-list{ list-style:none; margin:0; padding:0; }
.salers-drawer .sd-item{ border-bottom:1px solid #f1f2f4; }
.salers-drawer .sd-row{
    width:100%; display:flex; align-items:center; gap:14px;
    padding:14px 20px; background:none; border:0; text-align:left;
    font-size:15px; font-weight:600; color:var(--s-ink, #15171a);
    text-decoration:none; cursor:pointer; transition:background .12s ease, color .12s ease;
}
.salers-drawer .sd-row:hover{ background:#f7f8fa; color:var(--s-red, #E4002B); }
.salers-drawer .sd-icon{ width:24px; text-align:center; color:#6b7280; font-size:19px; transition:color .12s ease; }
.salers-drawer .sd-row:hover .sd-icon{ color:var(--s-red, #E4002B); }
.salers-drawer .sd-name{ flex:1 1 auto; letter-spacing:-.01em; }
.salers-drawer .sd-chev{ color:#c0c5cd; font-size:14px; transition:transform .25s ease, color .15s ease; }
.salers-drawer .sd-item.open > .sd-row .sd-chev{ transform:rotate(180deg); color:var(--s-red, #E4002B); }

.salers-drawer .sd-sub{ max-height:0; overflow:hidden; transition:max-height .32s ease; background:#fafbfc; }
.salers-drawer .sd-item.open > .sd-sub{ max-height:2000px; }
.salers-drawer .sd-child{
    display:block; padding:10px 20px 10px 58px; font-size:14px;
    color:#4b5563; text-decoration:none; transition:color .12s ease;
}
.salers-drawer .sd-child:hover{ color:var(--s-red, #E4002B); }
.salers-drawer .sd-shopall{ font-weight:700; color:var(--s-ink, #15171a); padding-top:14px; }
.salers-drawer .sd-grandchild{ padding-left:74px; font-size:13px; color:#6b7280; }

.salers-drawer-overlay{
    position:fixed; inset:0; background:rgba(16,18,22,.5); z-index:2147482000;
    opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease;
}
.salers-drawer-overlay.open{ opacity:1; visibility:visible; }
body.sd-open{ overflow:hidden; }

/* ===================================================================
   Cascading mega-menu (Incredible-style) — one rounded card that grows
   column-by-column: departments -> sub-categories -> sub-sub.
   =================================================================== */
.salers-mega{
    display:flex; align-items:stretch;
    background:#fff;
    border:1px solid var(--s-line, #e9ebef);
    border-radius:16px;
    box-shadow:0 18px 50px rgba(16,24,40,.18);
    padding:8px;
    overflow:hidden;
    min-height:200px;
}
.salers-mega .smega-col{ list-style:none; margin:0; }
.salers-mega .smega-col1{ flex:0 0 344px; width:344px; padding:0; }
.salers-mega .smega-col2,
.salers-mega .smega-col3{
    position:relative; flex:0 0 0; width:0;
    overflow:hidden; padding:0;
    transition:flex-basis .18s ease, width .18s ease, margin .18s ease, padding .18s ease;
}
.salers-mega .smega-col2.show,
.salers-mega .smega-col3.show{
    flex:0 0 274px; width:274px;
    margin-left:8px; padding-left:9px;
    border-left:1px solid #f0f1f3;
}
.salers-mega .smega-panel{ display:none; list-style:none; margin:0; padding:0; }
.salers-mega .smega-panel.active{ display:block; }
.salers-mega .smega-item{ margin:0; }
.salers-mega .smega-row{
    display:flex; align-items:center; gap:13px;
    padding:11px 15px; border-radius:11px;
    color:var(--s-ink, #15171a); font-size:14.5px; font-weight:500; letter-spacing:-.01em;
    text-decoration:none; position:relative; transition:background .12s ease, color .12s ease;
}
.salers-mega .smega-row:hover,
.salers-mega .smega-row.active{ background:#f4f5f7; color:var(--s-red, #E4002B); }
/* department column: active row gets a straight (square) red left accent bar */
.salers-mega .smega-col1 .smega-row.active{
    border-top-left-radius:0; border-bottom-left-radius:0;
}
.salers-mega .smega-col1 .smega-row.active::before{
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:3px; background:var(--s-red, #E4002B); border-radius:0;
}
.salers-mega .smega-ic{ width:22px; text-align:center; color:#6b7280; font-size:18px; transition:color .12s ease; }
.salers-mega .smega-row:hover .smega-ic,
.salers-mega .smega-row.active .smega-ic{ color:var(--s-red, #E4002B); }
.salers-mega .smega-tx{ flex:1 1 auto; min-width:0; white-space:normal; line-height:1.25; word-break:normal; overflow-wrap:break-word; }
.salers-mega .smega-ch{ flex:0 0 auto; margin-left:auto; padding-left:10px; color:#c0c5cd; font-size:13px; transition:color .12s ease; }
.salers-mega .smega-row:hover .smega-ch,
.salers-mega .smega-row.active .smega-ch{ color:var(--s-red, #E4002B); }

/* the rounded panel container sits flush-left under the Products tab */
#click-category-menu .salers-mega{ display:inline-flex; }

/* ===================================================================
   Explore flyout — row of lifestyle image tiles (Incredible-style)
   =================================================================== */
.salers-explore{
    display:flex; gap:14px;
    background:#fff; border:1px solid var(--s-line, #e9ebef);
    border-radius:18px; box-shadow:0 18px 50px rgba(16,24,40,.18);
    padding:16px;
}
.salers-explore .sx-tile{
    position:relative; flex:1 1 0; min-width:0; height:236px;
    border-radius:14px; overflow:hidden;
    display:flex; align-items:flex-end; justify-content:center;
    text-decoration:none;
}
.salers-explore .sx-tile__img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; transition:transform .35s ease;
}
.salers-explore .sx-tile::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,0) 45%);
}
.salers-explore .sx-tile:hover .sx-tile__img{ transform:scale(1.05); }
.salers-explore .sx-tile__btn{
    position:relative; z-index:2; margin-bottom:18px;
    background:#fff; color:var(--s-ink, #15171a);
    font-weight:700; font-size:13px; letter-spacing:-.01em;
    padding:9px 18px; border-radius:999px; white-space:nowrap;
    box-shadow:0 6px 16px rgba(0,0,0,.18); transition:transform .15s ease, color .15s ease;
}
.salers-explore .sx-tile:hover .sx-tile__btn{ transform:translateY(-3px); color:var(--s-red, #E4002B); }
@media (max-width:1199px){
    .salers-explore{ flex-wrap:wrap; }
    .salers-explore .sx-tile{ flex:1 1 22%; height:200px; }
}

/* ===================================================================
   Brands flyout — all brands as pills (Salers theme)
   =================================================================== */
.salers-brandsmenu{
    background:#fff; border:1px solid var(--s-line, #e9ebef);
    border-radius:18px; box-shadow:0 18px 50px rgba(16,24,40,.18);
    padding:22px 26px;
}
.salers-brandsmenu .sbm-head{
    display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
    color:var(--s-ink, #15171a); font-size:18px; font-weight:800; letter-spacing:-.02em;
    text-decoration:none; transition:color .15s ease;
}
.salers-brandsmenu .sbm-head__ic{
    width:22px; height:22px; border:1.5px solid currentColor; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:11px;
}
.salers-brandsmenu .sbm-head:hover{ color:var(--s-red, #E4002B); }
.salers-brandsmenu .sbm-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.salers-brandsmenu .sbm-pill{
    display:inline-flex; align-items:center; padding:8px 17px;
    border:1px solid var(--s-line, #e9ebef); border-radius:999px;
    color:var(--s-ink, #15171a); font-size:13.5px; font-weight:500; letter-spacing:-.01em;
    text-decoration:none; white-space:nowrap;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.salers-brandsmenu .sbm-pill:hover{ border-color:var(--s-red, #E4002B); color:var(--s-red, #E4002B); background:#fff5f6; }

/* ===================================================================
   All Brands page (Salers theme)
   =================================================================== */
.salers-brandpage{ background:var(--s-canvas, #f5f6f8); min-height:60vh; }
.salers-brandpage__head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.salers-brandpage__head h1{ font-size:28px; font-weight:800; color:var(--s-ink, #15171a); letter-spacing:-.02em; margin:0 0 6px; }
.salers-brandpage__head .breadcrumb-item.active{ color:var(--s-ink, #15171a); font-weight:600; }
.salers-brandpage__count{ color:#6b7280; font-size:14px; font-weight:600; }
.salers-brandpage__grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:18px; }
.salers-brandpage .bp-card{
    background:#fff; border:1px solid var(--s-line, #e9ebef); border-radius:16px;
    padding:26px 18px; min-height:152px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.salers-brandpage .bp-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(16,24,40,.12); border-color:rgba(228,0,43,.4); }
.salers-brandpage .bp-card__logo{ height:56px; width:100%; display:flex; align-items:center; justify-content:center; }
.salers-brandpage .bp-card__logo img{ width:100%; height:100%; max-width:150px; object-fit:contain; }
.salers-brandpage .bp-card__name{ font-size:14px; font-weight:700; color:var(--s-ink, #15171a); letter-spacing:-.01em; }
.salers-brandpage .bp-card:hover .bp-card__name{ color:var(--s-red, #E4002B); }
@media (max-width:991px){ .salers-brandpage__grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:575px){ .salers-brandpage__grid{ grid-template-columns:repeat(2, 1fr); } .salers-brandpage__head h1{ font-size:22px; } }

/* ===================================================================
   Footer — Takealot-style multi-column link footer (Salers theme)
   =================================================================== */
.salers-footer{ padding:46px 0 30px; }
.salers-footer__top{ margin-bottom:34px; }
.salers-footer__logo img{ height:40px; width:auto; }
.salers-footer__about{ margin-top:14px; max-width:540px; font-size:13.5px; opacity:.72; line-height:1.6; }
.salers-footer__cols{ display:grid; grid-template-columns:repeat(5, 1fr); gap:24px; }
.salers-footer .sf-col h4{ color:inherit !important; font-size:15px; font-weight:800; margin:0 0 16px; letter-spacing:-.01em; }
.salers-footer .sf-col ul{ list-style:none; margin:0; padding:0; }
.salers-footer .sf-col li{ margin-bottom:11px; }
.salers-footer .sf-col a{ color:inherit; opacity:.72; font-size:13.5px; text-decoration:none; transition:opacity .15s ease, color .15s ease; }
.salers-footer .sf-col a:hover{ opacity:1; color:var(--s-red, #E4002B); }
.salers-footer__bottom{ display:flex; flex-wrap:wrap; gap:48px; margin-top:40px; padding-top:30px; border-top:1px solid rgba(255,255,255,.08); }
.salers-footer .sf-apps h4, .salers-footer .sf-social h4{ color:inherit !important; font-size:15px; font-weight:800; margin:0 0 14px; }
.salers-footer .sf-apps__badges{ display:flex; gap:12px; flex-wrap:wrap; }
.salers-footer .sf-apps__badges img{ height:42px; width:auto; border-radius:7px; }
.salers-footer .sf-social__list{ list-style:none; display:flex; gap:12px; margin:0; padding:0; }
.salers-footer .sf-social__list a{
    width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); color:inherit;
    display:flex; align-items:center; justify-content:center; font-size:17px;
    transition:background .15s ease, color .15s ease;
}
.salers-footer .sf-social__list a:hover{ background:var(--s-red, #E4002B); color:#fff; }
@media (max-width:991px){ .salers-footer__cols{ grid-template-columns:repeat(2, 1fr); gap:30px 20px; } }
@media (max-width:575px){ .salers-footer__cols{ grid-template-columns:1fr 1fr; } }

/* ===================================================================
   Footer payment bar (Incredible-style dark rounded bar)
   =================================================================== */
.salers-paybar{
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    background:#202023; border:1px solid rgba(255,255,255,.06);
    border-radius:36px; padding:13px 34px; margin:4px 0;
}
.salers-paybar__copy{ color:#cfd2d6; font-size:13.5px; font-weight:500; white-space:nowrap; letter-spacing:-.01em; flex:0 0 auto; }
.salers-paybar__logos{ display:flex; align-items:center; gap:15px; flex-wrap:wrap; justify-content:flex-end; flex:1 1 auto; }
/* real brand logos rendered as clean uniform white silhouettes on the dark bar */
.salers-paybar__logo{
    height:21px; width:auto; max-width:96px; display:block; object-fit:contain;
    filter:brightness(0) invert(1); opacity:.9;
    transition:opacity .15s ease;
}
.salers-paybar__logo:hover{ opacity:1; }
@media (max-width:991px){
    .salers-paybar{ flex-direction:column; gap:16px; border-radius:22px; padding:18px 22px; text-align:center; }
    .salers-paybar__copy{ white-space:normal; }
    .salers-paybar__logos{ justify-content:center; }
}

/* ===================================================================
   Custom info/policy pages (Salers theme) — clean retail page look
   =================================================================== */
.salers-page{ background:var(--s-canvas, #f5f6f8); padding-bottom:60px; min-height:60vh; }
.salers-page__hero{ background:linear-gradient(180deg,#ffffff,#f5f6f8); border-bottom:1px solid var(--s-line, #e9ebef); padding:38px 0 30px; margin-bottom:34px; }
.salers-page__crumb{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 12px; font-size:13px; }
.salers-page__crumb li:not(:last-child)::after{ content:'/'; margin-left:8px; color:#c0c5cd; }
.salers-page__crumb a{ color:#6b7280; text-decoration:none; }
.salers-page__crumb a:hover{ color:var(--s-red, #E4002B); }
.salers-page__crumb li:last-child{ color:var(--s-ink, #15171a); font-weight:600; }
.salers-page__title{ font-size:34px; font-weight:800; letter-spacing:-.02em; color:var(--s-ink, #15171a); margin:0; }
.salers-page__body{ max-width:880px; margin:0 auto; background:#fff; border:1px solid var(--s-line, #e9ebef); border-radius:16px; padding:38px 42px; box-shadow:0 6px 24px rgba(16,24,40,.05); }
.salers-page__body > :first-child{ margin-top:0; }
.salers-page__body h1{ font-size:26px; }
.salers-page__body h2{ font-size:22px; font-weight:800; color:var(--s-ink, #15171a); margin:28px 0 12px; letter-spacing:-.01em; }
.salers-page__body h3{ font-size:17px; font-weight:700; color:var(--s-ink, #15171a); margin:22px 0 10px; }
.salers-page__body p, .salers-page__body li{ color:#4b5563; font-size:15px; line-height:1.75; }
.salers-page__body ul, .salers-page__body ol{ padding-left:20px; margin-bottom:16px; }
.salers-page__body li{ margin-bottom:8px; }
.salers-page__body a{ color:var(--s-red, #E4002B); }
.salers-page__body strong{ color:var(--s-ink, #15171a); }
.salers-page__body img{ max-width:100%; height:auto; border-radius:10px; }
@media (max-width:575px){ .salers-page__title{ font-size:26px; } .salers-page__body{ padding:24px 22px; } }

/* ============================================================
   Salers Careers  (Takealot-style layout, Salers red, outline icons)
   ============================================================ */
.salers-careers{ background:#fff; }
.salers-careers .container{ max-width:1200px; }
.salers-careers section{ width:100%; }

/* Shared buttons */
.sc-btn{ display:inline-block; font-weight:700; font-size:15px; padding:14px 30px; border:none; cursor:pointer; text-decoration:none; transition:filter .12s ease, background .12s ease, color .12s ease; }
.sc-btn--primary{ background:var(--s-red,#E4002B); color:#fff; }
.sc-btn--primary:hover{ filter:brightness(1.08); color:#fff; }
.sc-btn--light{ background:#fff; color:var(--s-red,#E4002B); }
.sc-btn--light:hover{ background:#f1f1f1; color:var(--s-red,#E4002B); }

/* HERO: geometric pattern + left content panel */
.sc-hero{ position:relative; overflow:hidden; background:#15171a; min-height:430px; display:flex; align-items:center; padding:50px 0; }
.sc-hero__pattern{ position:absolute; inset:0;
  background-color:#1c1f24;
  background-image:
    radial-gradient(circle at 20% 25%, var(--s-red,#E4002B) 0 38px, transparent 39px),
    radial-gradient(circle at 78% 18%, #2a2d33 0 60px, transparent 61px),
    radial-gradient(circle at 92% 62%, var(--s-red,#E4002B) 0 50px, transparent 51px),
    radial-gradient(circle at 60% 80%, #2a2d33 0 70px, transparent 71px),
    radial-gradient(circle at 38% 70%, #3a0d14 0 46px, transparent 47px),
    radial-gradient(circle at 8% 85%, #2a2d33 0 40px, transparent 41px);
  opacity:.9;
}
.sc-hero .container{ position:relative; z-index:2; }
.sc-hero__panel{ background:rgba(255,255,255,.94); padding:42px 44px; max-width:560px; box-shadow:0 18px 50px rgba(0,0,0,.25); }
.sc-hero__title{ font-size:44px; font-weight:800; line-height:1.06; letter-spacing:-1px; color:var(--s-red,#E4002B); margin:0 0 16px; }
.sc-hero__sub{ font-size:18px; line-height:1.55; color:var(--s-ink,#15171a); margin:0 0 26px; }

/* INTRO: media + text */
.sc-intro{ padding:64px 0; background:#fff; }
.sc-intro__row{ display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center; }
.sc-intro__media{ height:300px; background:linear-gradient(135deg,#15171a 0%,#3a0d14 60%,var(--s-red,#E4002B) 130%); display:flex; align-items:center; justify-content:center; }
.sc-intro__media i{ font-size:110px; color:rgba(255,255,255,.85); }
.sc-intro__media--image{ background-size:cover; background-position:center; }

/* Careers hero with a background image + flat dark overlay (no gradient) */
.sc-hero--image{ background-size:cover; background-position:center; }
.sc-hero--image .sc-hero__pattern{ background:rgba(17,19,22,.5); background-image:none; opacity:1; }
.sc-intro__title{ font-size:32px; font-weight:800; color:var(--s-ink,#15171a); margin:0 0 16px; letter-spacing:-.4px; line-height:1.15; }
.sc-intro__body{ font-size:17px; line-height:1.7; color:#3c4148; margin:0 0 18px; }
.sc-intro__link{ font-size:15px; font-weight:700; color:var(--s-red,#E4002B); text-decoration:none; }

/* FIND YOUR SPOT */
.sc-spot{ background:#f4f5f7; padding:60px 0; text-align:center; }
.sc-spot__title{ font-size:30px; font-weight:800; color:var(--s-ink,#15171a); margin:0 0 26px; letter-spacing:-.4px; }

/* POSITIONS (revealed) */
.sc-roles{ padding:56px 0 64px; background:#fff; }
.sc-roles__title{ font-size:28px; font-weight:800; color:var(--s-ink,#15171a); margin:0 0 26px; letter-spacing:-.4px; }
.sc-dept{ margin-bottom:36px; }
.sc-dept__name{ font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; color:var(--s-red,#E4002B); margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid #e6e8ec; }
.sc-joblist{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.sc-jobcard{ display:flex; align-items:center; justify-content:space-between; gap:16px; background:#fff; border:1px solid #e6e8ec; padding:24px 26px; text-decoration:none; transition:border-color .12s ease, box-shadow .12s ease; }
.sc-jobcard:hover{ border-color:var(--s-red,#E4002B); box-shadow:0 6px 20px rgba(20,23,26,.07); }
.sc-jobcard__title{ font-size:19px; font-weight:800; color:var(--s-ink,#15171a); margin:0 0 6px; }
.sc-jobcard__summary{ font-size:14px; line-height:1.5; color:#5a616a; margin:0 0 12px; }
.sc-jobcard__meta{ display:flex; flex-wrap:wrap; gap:20px; font-size:13.5px; color:#6b7280; }
.sc-jobcard__meta i{ color:var(--s-red,#E4002B); margin-right:5px; font-size:15px; vertical-align:-1px; }
.sc-jobcard__go{ flex:none; font-size:14px; font-weight:700; color:var(--s-red,#E4002B); white-space:nowrap; }
.sc-empty{ background:#fff; border:1px dashed #d4d8de; padding:44px; text-align:center; color:#6b7280; }

/* VALUES band: circular outline-icon badges */
.sc-values-band{ background:var(--s-red,#E4002B); padding:62px 0; text-align:center; }
.sc-values-band__title{ color:#fff; font-size:34px; font-weight:800; margin:0 0 12px; }
.sc-values-band__sub{ color:rgba(255,255,255,.9); font-size:16px; line-height:1.6; max-width:760px; margin:0 auto 40px; }
.sc-values{ display:flex; flex-wrap:wrap; justify-content:center; gap:34px 26px; }
.sc-value{ width:170px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.sc-value__badge{ width:104px; height:104px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:16px; transition:transform .15s ease; }
.sc-value:hover .sc-value__badge{ transform:translateY(-4px); }
.sc-value__badge i{ font-size:46px; color:var(--s-ink,#15171a); }
.sc-value__label{ color:#fff; font-size:17px; font-weight:800; margin-bottom:6px; }
.sc-value__text{ color:rgba(255,255,255,.85); font-size:13px; line-height:1.5; }

/* JOIN band */
.sc-join{ background:var(--s-ink,#15171a); padding:62px 0; text-align:center; }
.sc-join__title{ color:#fff; font-size:32px; font-weight:800; margin:0 0 14px; letter-spacing:-.4px; }
.sc-join__text{ color:rgba(255,255,255,.82); font-size:17px; line-height:1.6; max-width:680px; margin:0 auto 26px; }

/* ============================================================
   Job DETAIL page  (Takealot job layout: patterned bg + white card)
   ============================================================ */
.sc-jobpage{ position:relative; background:#15171a; padding:0 0 70px; min-height:60vh; }
.sc-jobpage__pattern{ position:absolute; inset:0; height:340px;
  background-color:#1c1f24;
  background-image:
    radial-gradient(circle at 12% 20%, var(--s-red,#E4002B) 0 46px, transparent 47px),
    radial-gradient(circle at 84% 12%, #2a2d33 0 70px, transparent 71px),
    radial-gradient(circle at 95% 55%, var(--s-red,#E4002B) 0 56px, transparent 57px),
    radial-gradient(circle at 70% 0%, #2a2d33 0 60px, transparent 61px),
    radial-gradient(circle at 30% 5%, #3a0d14 0 50px, transparent 51px);
  opacity:.9;
}
.sc-jobpage .container{ position:relative; z-index:2; }
.sc-jobcard-wrap{ background:#fff; max-width:960px; margin:0 auto; padding:46px 56px 52px; box-shadow:0 24px 60px rgba(0,0,0,.22); margin-top:46px; }
.sc-back{ display:inline-block; font-size:14px; font-weight:700; color:var(--s-red,#E4002B); text-decoration:none; margin-bottom:26px; }
.sc-back:hover{ color:var(--s-red,#E4002B); text-decoration:underline; }
.sc-job__title{ font-size:36px; font-weight:800; color:var(--s-ink,#15171a); margin:0 0 14px; letter-spacing:-.6px; line-height:1.1; }
.sc-job__meta{ display:flex; flex-wrap:wrap; gap:22px; font-size:14.5px; color:#5a616a; margin-bottom:30px; padding-bottom:26px; border-bottom:1px solid #e6e8ec; }
.sc-job__meta i{ color:var(--s-red,#E4002B); margin-right:6px; font-size:16px; vertical-align:-2px; }
.sc-job__body{ box-shadow:none !important; border-radius:0; padding:0 !important; background:transparent !important; }
.sc-job__body h3{ font-size:20px; margin-top:26px; }
.sc-detail-lead{ font-size:17px; font-weight:600; color:var(--s-ink,#15171a); }
.sc-divider{ border:none; border-top:1px solid #e6e8ec; margin:38px 0 30px; }
.sc-apply-h{ font-size:24px; font-weight:800; color:var(--s-ink,#15171a); margin:0 0 22px; }

/* Application form (single column, square inputs) */
.sc-form{ max-width:640px; }
.sc-row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sc-field{ margin-bottom:18px; }
.sc-field label{ display:block; font-size:13.5px; font-weight:700; color:var(--s-ink,#15171a); margin-bottom:7px; }
.sc-field label span{ color:var(--s-red,#E4002B); }
.sc-field input[type=text], .sc-field input[type=email], .sc-field textarea, .sc-field select{ width:100%; border:1px solid #cdd2d9; border-radius:0; padding:12px 13px; font-size:14.5px; color:var(--s-ink,#15171a); background:#fff; transition:border-color .12s ease, box-shadow .12s ease; }
.sc-field input:focus, .sc-field textarea:focus, .sc-field select:focus{ outline:none; border-color:var(--s-red,#E4002B); box-shadow:0 0 0 3px rgba(228,0,43,.12); }
.sc-field textarea{ resize:vertical; }
.sc-phone{ display:flex; align-items:stretch; }
.sc-phone__cc{ flex:none; display:flex; align-items:center; padding:0 14px; background:#f2f3f5; border:1px solid #cdd2d9; border-right:none; font-weight:700; font-size:14.5px; color:#3c4148; }
/* Attach (Takealot-style outlined pill) */
.sc-attach{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--s-red,#E4002B); color:var(--s-red,#E4002B); background:#fff; font-weight:700; font-size:14px; padding:11px 26px; border-radius:999px; cursor:pointer; transition:background .12s ease, color .12s ease; max-width:100%; }
.sc-attach:hover{ background:var(--s-red,#E4002B); color:#fff; }
.sc-attach i{ font-size:17px; }
.sc-attach__txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-hint{ display:block; margin-top:8px; font-size:12.5px; color:#8a909a; }
.sc-apply__btn{ background:var(--s-red,#E4002B); color:#fff; font-weight:800; font-size:15px; border:none; padding:14px 40px; border-radius:0; cursor:pointer; transition:filter .12s ease; margin-top:8px; }
.sc-apply__btn:hover{ filter:brightness(1.08); }

@media (max-width:991px){
    .sc-intro__row{ grid-template-columns:1fr; gap:26px; }
    .sc-intro__media{ height:220px; }
    .sc-joblist{ grid-template-columns:1fr; }
}
@media (max-width:575px){
    .sc-hero__title{ font-size:32px; }
    .sc-hero__panel{ padding:30px 26px; }
    .sc-value{ width:130px; }
    .sc-jobcard{ flex-direction:column; align-items:flex-start; }
    .sc-jobcard-wrap{ padding:30px 22px 38px; }
    .sc-job__title{ font-size:27px; }
    .sc-row2{ grid-template-columns:1fr; gap:0; }
}

/* ============================================================
   Salers Contact page  (Takealot "How to contact us" layout, red theme)
   ============================================================ */
.salers-contact{ background:#f4f5f7; padding-bottom:64px; }
.salers-contact .container{ max-width:1200px; }

/* Hero: red patterned band */
.sct-hero{ position:relative; overflow:hidden; background:var(--s-red,#E4002B); padding:46px 0 130px; }
.sct-hero__pattern{ position:absolute; inset:0; opacity:.5;
  background-image:
    radial-gradient(circle at 10% 30%, rgba(255,255,255,.14) 0 26px, transparent 27px),
    radial-gradient(circle at 26% 75%, rgba(255,255,255,.10) 0 18px, transparent 19px),
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.12) 0 34px, transparent 35px),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.10) 0 22px, transparent 23px),
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.08) 0 16px, transparent 17px);
}
.sct-hero .container{ position:relative; z-index:2; }
.sct-hero .salers-page__crumb{ margin-bottom:16px; }
.sct-hero .salers-page__crumb li, .sct-hero .salers-page__crumb a{ color:rgba(255,255,255,.8); }
.sct-hero .salers-page__crumb li:last-child{ color:#fff; }
.sct-hero__title{ font-size:42px; font-weight:800; color:#fff; margin:0; letter-spacing:-.6px; }

/* White card overlapping hero */
/* Two-column layout: main + Data & Privacy sidebar */
.sct-layout{ display:grid; grid-template-columns:1fr 330px; gap:28px; margin:-92px auto 0; position:relative; z-index:3; align-items:start; }
.sct-card{ background:#fff; padding:46px 50px 50px; box-shadow:0 18px 50px rgba(16,24,40,.10); }

/* Sidebar */
.sct-aside__card{ background:#fff; box-shadow:0 18px 50px rgba(16,24,40,.10); }
.sct-aside__title{ font-size:18px; font-weight:800; color:var(--s-ink,#15171a); margin:0; padding:24px 26px 18px; border-bottom:1px solid #e6e8ec; }
.sct-aside__list{ list-style:none; margin:0; padding:8px 0 14px; }
.sct-aside__list li a{ display:block; padding:11px 26px; font-size:14.5px; line-height:1.45; color:var(--s-ink,#15171a); text-decoration:none; border-left:3px solid transparent; transition:background .12s ease, color .12s ease, border-color .12s ease; }
.sct-aside__list li a:hover{ background:#faf1f2; color:var(--s-red,#E4002B); }
.sct-aside__list li a.is-active{ background:#fdeef0; color:var(--s-red,#E4002B); border-left-color:var(--s-red,#E4002B); font-weight:700; }
.sct-lead{ font-size:17px; line-height:1.7; color:#3c4148; margin:0 0 22px; max-width:880px; }
.sct-h{ font-size:20px; font-weight:800; color:var(--s-ink,#15171a); margin:26px 0 16px; }
.sct-steps{ list-style:none; padding:0; margin:0 0 22px; max-width:860px; }
.sct-steps li{ display:flex; align-items:flex-start; gap:16px; margin-bottom:16px; }
.sct-steps__num{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--s-red,#E4002B); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; }
.sct-steps__txt{ font-size:16px; line-height:1.6; color:#3c4148; padding-top:3px; }
.sct-note{ font-size:16px; line-height:1.7; color:#3c4148; margin:0 0 30px; }

/* 3-step illustration band */
.sct-illus{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#e6e8ec; border:1px solid #e6e8ec; }
.sct-illus__step{ background:#f7f8fa; padding:30px 26px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.sct-illus__tag{ background:var(--s-ink,#15171a); color:#fff; font-size:11px; font-weight:800; letter-spacing:.5px; padding:7px 14px; border-radius:999px; margin-bottom:20px; }
.sct-illus__icon{ width:74px; height:74px; border-radius:50%; background:#fff; border:1px solid #e6e8ec; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.sct-illus__icon i{ font-size:34px; color:var(--s-red,#E4002B); }
.sct-illus__cap{ font-size:14px; line-height:1.5; color:#5a616a; max-width:230px; }

.sct-divider{ border:none; border-top:1px solid #e6e8ec; margin:40px 0 34px; }

/* Get in Touch: details + form */
.sct-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:44px; align-items:start; }
.sct-details{ padding-top:6px; }
.sct-detail{ display:flex; gap:16px; margin-bottom:28px; }
.sct-detail__ic{ flex:none; width:48px; height:48px; border:1px solid #e6e8ec; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.sct-detail__ic i{ font-size:21px; color:var(--s-red,#E4002B); }
.sct-detail__t{ display:block; font-size:17px; font-weight:800; color:var(--s-ink,#15171a); margin-bottom:3px; }
.sct-detail__v{ display:block; font-size:14.5px; line-height:1.6; color:#5a616a; }

.sct-form-card{ background:#fff; border:1px solid #e6e8ec; padding:30px 32px 34px; max-width:600px; }
.sct-form-card__title{ font-size:20px; font-weight:800; color:var(--s-ink,#15171a); margin:0 0 22px; padding-bottom:16px; border-bottom:2px solid var(--s-red,#E4002B); }
.sct-field{ margin-bottom:18px; }
.sct-field label{ display:block; font-size:13.5px; font-weight:700; color:var(--s-ink,#15171a); margin-bottom:7px; }
.sct-field label span{ color:var(--s-red,#E4002B); }
.sct-field input[type=text], .sct-field input[type=email], .sct-field textarea{ width:100%; border:1px solid #cdd2d9; border-radius:0; padding:12px 13px; font-size:14.5px; color:var(--s-ink,#15171a); background:#fff; transition:border-color .12s ease, box-shadow .12s ease; }
.sct-field input:focus, .sct-field textarea:focus{ outline:none; border-color:var(--s-red,#E4002B); box-shadow:0 0 0 3px rgba(228,0,43,.12); }
.sct-field textarea{ resize:vertical; }
.sct-phone{ display:flex; align-items:stretch; }
.sct-phone__cc{ flex:none; display:flex; align-items:center; padding:0 14px; background:#f2f3f5; border:1px solid #cdd2d9; border-right:none; font-weight:700; font-size:14.5px; color:#3c4148; }
.sct-hint{ display:block; margin-top:6px; font-size:12.5px; color:#8a909a; }
.sct-submit{ display:inline-block; background:var(--s-red,#E4002B); color:#fff; font-weight:800; font-size:15px; border:none; padding:13px 44px; border-radius:0; cursor:pointer; transition:filter .12s ease; }
.sct-submit:hover{ filter:brightness(1.08); color:#fff; }

@media (max-width:991px){
    .sct-layout{ grid-template-columns:1fr; gap:22px; }
    .sct-card{ padding:34px 26px 40px; }
    .sct-illus{ grid-template-columns:1fr; }
    .sct-grid{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width:575px){
    .sct-layout{ margin-top:-70px; }
    .sct-hero__title{ font-size:30px; }
}

/* Contact: "Didn't find what you need?" prompt + Get in Touch modal */
.sct-prompt{ display:flex; align-items:center; gap:18px; background:#fdeef0; border:1px solid #f6d3d8; padding:24px 28px; }
.sct-prompt__icon{ flex:none; width:52px; height:52px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; }
.sct-prompt__icon i{ font-size:26px; color:var(--s-red,#E4002B); }
.sct-prompt__text{ flex:1; font-size:17px; font-weight:700; color:var(--s-ink,#15171a); }
.sct-prompt__btn{ flex:none; background:var(--s-red,#E4002B); color:#fff; font-weight:700; font-size:15px; border:none; padding:12px 30px; border-radius:999px; cursor:pointer; transition:filter .12s ease; }
.sct-prompt__btn:hover{ filter:brightness(1.08); }

.sct-modal{ position:fixed; inset:0; z-index:1100; display:none; }
.sct-modal.is-open{ display:block; }
.sct-modal__backdrop{ position:absolute; inset:0; background:rgba(16,24,40,.55); }
.sct-modal__dialog{ position:relative; background:#fff; width:520px; max-width:calc(100% - 32px); margin:6vh auto 0; max-height:88vh; overflow:auto; box-shadow:0 24px 60px rgba(0,0,0,.3); animation:sctPop .16s ease; }
@keyframes sctPop{ from{ transform:translateY(14px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.sct-modal__head{ position:relative; display:flex; align-items:center; justify-content:center; padding:18px 20px; border-bottom:1px solid #e6e8ec; }
.sct-modal__title{ font-size:19px; font-weight:800; color:var(--s-ink,#15171a); margin:0; }
.sct-modal__close{ position:absolute; left:14px; top:50%; transform:translateY(-50%); background:none; border:none; font-size:28px; line-height:1; color:#5a616a; cursor:pointer; padding:0 6px; }
.sct-modal__close:hover{ color:var(--s-red,#E4002B); }
.sct-modal__body{ padding:26px 28px 30px; }
.sct-modal__body .sct-form-card__title{ display:none; }

@media (max-width:575px){
    .sct-prompt{ flex-direction:column; text-align:center; }
    .sct-modal__dialog{ margin-top:0; max-height:100vh; height:100vh; }
}

/* ============================================================
   Salers Doc pages (footer policy/help pages, Takealot help-centre style)
   Reuses .sct-hero / .sct-layout / .sct-card / .sct-aside
   ============================================================ */
.salers-doc{ background:#f4f5f7; padding-bottom:64px; }
.salers-doc .container{ max-width:1200px; }
.sct-layout--full{ grid-template-columns:minmax(0, 920px); justify-content:center; }
/* content sits directly inside the white card, so drop the inner card chrome */
.sct-card .salers-page__body{ max-width:none; margin:0; background:transparent; border:none; border-radius:0; padding:0; box-shadow:none; }
@media (max-width:991px){ .sct-layout--full{ grid-template-columns:1fr; } }

/* ============================================================
   Rich doc content: lead, callouts, tables, FAQ accordions
   ============================================================ */
.salers-page__body .doc-lead{ font-size:17px; line-height:1.7; color:#2f343b; font-weight:500; }
.salers-page__body h2 + .doc-lead{ margin-top:0; }

/* Callout note */
.salers-page__body .doc-note{ display:flex; gap:14px; background:#fdeef0; border-left:4px solid var(--s-red,#E4002B); padding:16px 20px; margin:22px 0; border-radius:0 8px 8px 0; }
.salers-page__body .doc-note i{ color:var(--s-red,#E4002B); font-size:22px; margin-top:2px; }
.salers-page__body .doc-note p{ margin:0; color:#3c4148; }

/* Tables */
.salers-page__body table{ width:100%; border-collapse:collapse; margin:18px 0 24px; font-size:14.5px; }
.salers-page__body table th{ background:#15171a; color:#fff; text-align:left; font-weight:700; padding:12px 16px; }
.salers-page__body table td{ padding:12px 16px; border-bottom:1px solid #e6e8ec; color:#4b5563; vertical-align:top; }
.salers-page__body table tr:nth-child(even) td{ background:#fafbfc; }

/* FAQ accordion (native details/summary) */
.salers-page__body .doc-faq{ margin:18px 0 8px; }
.salers-page__body details{ border:1px solid #e6e8ec; border-radius:8px; margin-bottom:10px; overflow:hidden; background:#fff; }
.salers-page__body details[open]{ border-color:#f1c6cd; }
.salers-page__body summary{ list-style:none; cursor:pointer; padding:16px 48px 16px 18px; font-weight:700; font-size:15px; color:var(--s-ink,#15171a); position:relative; }
.salers-page__body summary::-webkit-details-marker{ display:none; }
.salers-page__body summary::after{ content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:22px; font-weight:400; color:var(--s-red,#E4002B); line-height:1; }
.salers-page__body details[open] summary::after{ content:"\2212"; }
.salers-page__body summary:hover{ color:var(--s-red,#E4002B); }
.salers-page__body details > p, .salers-page__body details > ul{ padding:0 18px 16px; margin:0; }
.salers-page__body details > p{ color:#4b5563; line-height:1.7; }

/* Related links footer block */
.salers-page__body .doc-related{ margin-top:34px; padding-top:24px; border-top:1px solid #e6e8ec; }
.salers-page__body .doc-related h3{ margin-top:0; }
.salers-page__body .doc-related ul{ list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; }
.salers-page__body .doc-related a{ font-weight:600; }
@media (max-width:575px){ .salers-page__body .doc-related ul{ grid-template-columns:1fr; } }

/* Contact callout at the bottom of help pages */
.salers-page__body .doc-help{ background:#15171a; color:#fff; padding:26px 30px; border-radius:12px; margin-top:34px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.salers-page__body .doc-help h3{ color:#fff; margin:0 0 4px; }
.salers-page__body .doc-help p{ color:rgba(255,255,255,.8); margin:0; }
.salers-page__body .doc-help a{ flex:none; background:var(--s-red,#E4002B); color:#fff; font-weight:700; padding:12px 26px; border-radius:999px; text-decoration:none; }

/* ============================================================
   Salers for Business landing (Takealot for Business style, red)
   ============================================================ */
.sb-page{ background:#fff; }
.sb-page .container{ max-width:1180px; }
.sb-btn{ display:inline-block; font-weight:700; font-size:15px; padding:14px 32px; border-radius:999px; text-decoration:none; transition:filter .12s ease, transform .12s ease; }
.sb-btn--light{ background:#fff; color:var(--s-red,#E4002B); }
.sb-btn--light:hover{ color:var(--s-red,#E4002B); transform:translateY(-1px); }
.sb-btn--primary{ background:var(--s-red,#E4002B); color:#fff; }
.sb-btn--primary:hover{ color:#fff; filter:brightness(1.08); transform:translateY(-1px); }

/* Hero: solid colour or image with a flat dark overlay (no gradient) */
.sb-hero{ position:relative; overflow:hidden; background:#15171a; padding:54px 0 70px; }
.sb-hero--image{ background-size:cover; background-position:center; }
.sb-hero__overlay{ display:none; }
.sb-hero--image .sb-hero__overlay{ display:block; position:absolute; inset:0; background:rgba(17,19,22,.62); }
.sb-hero .container{ position:relative; z-index:2; }
.sb-hero .salers-page__crumb{ margin-bottom:26px; }
.sb-hero .salers-page__crumb li, .sb-hero .salers-page__crumb a{ color:rgba(255,255,255,.75); }
.sb-hero .salers-page__crumb li:last-child{ color:#fff; }
.sb-hero__inner{ max-width:none; }
.sb-hero__kicker{ display:inline-block; background:var(--s-red,#E4002B); color:#fff; font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:18px; }
.sb-hero__title{ font-size:48px; font-weight:800; color:#fff; line-height:1.05; letter-spacing:-1px; margin:0 0 14px; }
.sb-hero__sub{ font-size:19px; color:rgba(255,255,255,.85); line-height:1.5; margin:0 0 28px; }

/* Intro */
.sb-intro{ padding:46px 0; background:#fff; }
.sb-intro p{ font-size:18px; line-height:1.7; color:#3c4148; max-width:none; margin:0; }

/* Promo banners */
.sb-banners{ padding:0 0 14px; }
.sb-banners .container{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.sb-banner{ background:#15171a; color:#fff; padding:34px 36px; border-radius:0; display:flex; flex-direction:column; justify-content:space-between; min-height:190px; }
.sb-banner__title{ font-size:24px; font-weight:800; color:#fff; margin:0 0 10px; }
.sb-banner__sub{ font-size:15px; line-height:1.6; color:rgba(255,255,255,.85); margin:0 0 18px; }
.sb-banner__cta{ color:#fff; font-weight:700; font-size:15px; text-decoration:underline; text-underline-offset:3px; }
.sb-banner__cta:hover{ color:#fff; opacity:.85; }

/* Why */
.sb-why{ padding:56px 0; background:#f6f7f9; }
.sb-section-title{ font-size:32px; font-weight:800; color:var(--s-ink,#15171a); text-align:center; margin:0 0 10px; letter-spacing:-.4px; }
.sb-section-sub{ font-size:16px; color:#5a616a; text-align:center; max-width:760px; margin:0 auto 38px; line-height:1.6; }
.sb-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.sb-card{ background:#fff; border:1px solid #e6e8ec; border-radius:0; overflow:hidden; transition:box-shadow .15s ease, transform .15s ease; }
.sb-card:hover{ box-shadow:0 12px 30px rgba(20,23,26,.1); transform:translateY(-3px); }
.sb-card__top{ height:120px; background:var(--s-red,#E4002B); display:flex; align-items:center; justify-content:center; }
.sb-card__top i{ font-size:48px; color:#fff; }
.sb-card__body{ padding:22px 22px 26px; }
.sb-card__title{ font-size:18px; font-weight:800; color:var(--s-red,#E4002B); margin:0 0 10px; }
.sb-card__text{ font-size:14.5px; line-height:1.6; color:#5a616a; margin:0; }

/* Savings banner */
.sb-savings{ padding:56px 0; }
.sb-savings__box{ background:var(--s-red,#E4002B); color:#fff; border-radius:0; padding:46px 48px; text-align:center; }
.sb-savings__tag{ display:inline-block; background:rgba(255,255,255,.18); color:#fff; font-size:12px; font-weight:800; letter-spacing:.6px; padding:6px 14px; border-radius:999px; margin-bottom:16px; }
.sb-savings__title{ font-size:34px; font-weight:800; color:#fff; margin:0 0 10px; }
.sb-savings__sub{ font-size:17px; color:rgba(255,255,255,.9); margin:0 0 24px; }
.sb-savings .sb-btn--primary{ background:#fff; color:var(--s-red,#E4002B); }
.sb-savings .sb-btn--primary:hover{ background:#f1f1f1; color:var(--s-red,#E4002B); }

/* Long-form body: flush to the container so every section shares one width */
.sb-body{ padding:30px 0 50px; }
.sb-body .salers-page__body{ max-width:none; margin:0; background:transparent; border:none; border-radius:0; box-shadow:none; padding:0; }

/* Final CTA */
.sb-final{ background:#15171a; padding:58px 0; text-align:center; }
.sb-final__title{ font-size:30px; font-weight:800; color:#fff; margin:0 0 12px; }
.sb-final__sub{ font-size:17px; color:rgba(255,255,255,.82); margin:0 0 26px; }

@media (max-width:991px){
    .sb-banners .container{ grid-template-columns:1fr; }
    .sb-cards{ grid-template-columns:1fr 1fr; }
}
@media (max-width:575px){
    .sb-hero__title{ font-size:34px; }
    .sb-cards{ grid-template-columns:1fr; }
    .sb-savings__box{ padding:34px 24px; }
}

/* ============================================================
   Brand hero slider (Dell-style product carousel)
   ============================================================ */
/* Full width: background spans the viewport, content stays centred */
.brand-slider-fullwidth{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }
.brand-slider{ position:relative; border-radius:0; overflow:hidden; background:#edf0f4; }
.brand-slider__viewport{ position:relative; }
.brand-slide{ position:absolute; left:0; right:0; top:0; bottom:0; opacity:0; visibility:hidden; transition:opacity .5s ease; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:24px; padding:46px 60px; min-height:420px; max-width:1240px; margin:0 auto; }
.brand-slide.is-active{ position:relative; opacity:1; visibility:visible; }
.brand-slide__kicker{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:1px; color:var(--s-red,#E4002B); margin-bottom:12px; }
.brand-slide__title{ font-size:38px; font-weight:800; color:#15171a; line-height:1.08; margin:0 0 14px; letter-spacing:-.5px; }
.brand-slide__sub{ font-size:16px; line-height:1.6; color:#4b5563; margin:0 0 24px; max-width:440px; }
.brand-slide__cta{ display:inline-block; background:var(--s-red,#E4002B); color:#fff; font-weight:700; font-size:15px; padding:13px 30px; border-radius:999px; text-decoration:none; transition:filter .12s ease; }
.brand-slide__cta:hover{ color:#fff; filter:brightness(1.08); }
.brand-slide__media{ display:flex; align-items:center; justify-content:center; }
.brand-slide__media img{ max-width:100%; max-height:320px; object-fit:contain; filter:drop-shadow(0 18px 30px rgba(0,0,0,.18)); }
.brand-slider__arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,255,255,.92); color:#15171a; font-size:26px; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.12); z-index:3; display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease; }
.brand-slider__arrow:hover{ background:#fff; color:var(--s-red,#E4002B); }
.brand-slider__arrow--prev{ left:16px; }
.brand-slider__arrow--next{ right:16px; }
.brand-slider__dots{ position:absolute; bottom:18px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:3; }
.brand-slider__dot{ width:9px; height:9px; border-radius:50%; border:none; background:rgba(21,23,26,.25); cursor:pointer; padding:0; transition:background .15s ease, width .15s ease; }
.brand-slider__dot.is-active{ background:var(--s-red,#E4002B); width:24px; border-radius:999px; }
@media (max-width:767px){
    .brand-slide{ grid-template-columns:1fr; text-align:center; padding:28px 22px 46px; gap:10px; min-height:0; }
    .brand-slide__media{ order:-1; }
    .brand-slide__media img{ max-height:200px; }
    .brand-slide__title{ font-size:26px; }
    .brand-slide__sub{ margin-left:auto; margin-right:auto; }
    .brand-slider__arrow{ display:none; }
}

/* Doc page hero with a background image + brand-red overlay (no gradient) */
.salers-doc .sct-hero--image{ background-size:cover; background-position:center; }
.salers-doc .sct-hero--image .sct-hero__pattern{ background:rgba(150,0,28,.74); background-image:none; opacity:1; }

/* Solid doc hero: plain brand colour, no shapes (Terms and Policies pages) */
.salers-doc .sct-hero--solid .sct-hero__pattern{ display:none; }

/* ============================================================
   Salers newsletter popup (first visit)
   ============================================================ */
.snl-modal{ position:fixed; inset:0; z-index:1200; display:none; }
.snl-modal.is-open{ display:block; }
.snl-modal__backdrop{ position:absolute; inset:0; background:rgba(16,24,40,.6); }
.snl-modal__dialog{ position:relative; background:#fff; width:760px; max-width:calc(100% - 32px); margin:7vh auto 0; max-height:86vh; overflow:auto; border-radius:4px; box-shadow:0 30px 70px rgba(0,0,0,.35); padding:40px 48px 36px; animation:snlPop .18s ease; }
@keyframes snlPop{ from{ transform:translateY(16px); opacity:0; } to{ transform:none; opacity:1; } }
.snl-modal__close{ position:absolute; top:14px; right:16px; background:none; border:none; font-size:30px; line-height:1; color:#9aa0a8; cursor:pointer; padding:0 6px; }
.snl-modal__close:hover{ color:var(--s-red,#E4002B); }
.snl-modal__brand{ text-align:center; margin-bottom:18px; }
.snl-logo-img{ height:46px; width:auto; max-width:240px; object-fit:contain; }
.snl-title{ text-align:center; font-size:24px; font-weight:800; color:var(--s-ink,#15171a); margin:0 0 8px; }
.snl-sub{ text-align:center; font-size:15px; color:#5a616a; margin:0 auto 24px; max-width:520px; line-height:1.5; }
.snl-form{ max-width:600px; margin:0 auto; }
.snl-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.snl-row--one{ grid-template-columns:1fr; }
.snl-field input{ width:100%; height:50px; border:1px solid #cdd2d9; border-radius:0; padding:0 14px; font-size:14.5px; color:var(--s-ink,#15171a); background:#fff; transition:border-color .12s ease, box-shadow .12s ease; }
.snl-field input::placeholder{ color:#9aa0a8; }
.snl-field input:focus{ outline:none; border-color:var(--s-red,#E4002B); box-shadow:0 0 0 3px rgba(228,0,43,.12); }

/* Multi-select product interests (checkbox list) */
.snl-interests{ margin-bottom:18px; }
.snl-interests__label{ display:block; font-size:13px; font-weight:700; color:#3c4148; margin-bottom:10px; }
.snl-req{ color:var(--s-red,#E4002B); }
.snl-checks{ display:grid; grid-template-columns:1fr 1fr; gap:9px 16px; max-height:168px; overflow-y:auto; border:1px solid #cdd2d9; padding:14px 16px; }
.snl-check{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--s-ink,#15171a); cursor:pointer; margin:0; line-height:1.3; }
.snl-check input{ width:17px; height:17px; flex:none; accent-color:var(--s-red,#E4002B); cursor:pointer; }
.snl-interests__err{ display:none; margin-top:8px; font-size:12.5px; font-weight:600; color:var(--s-red,#E4002B); }
.snl-interests__err.is-shown{ display:block; }
@media (max-width:575px){ .snl-checks{ grid-template-columns:1fr; max-height:200px; } }
.snl-phone{ display:flex; align-items:stretch; }
.snl-phone__cc{ flex:none; display:flex; align-items:center; padding:0 14px; background:#f2f3f5; border:1px solid #cdd2d9; border-right:none; font-weight:700; font-size:14.5px; color:#3c4148; }
.snl-submit{ display:inline-block; background:var(--s-red,#E4002B); color:#fff; font-weight:800; font-size:15px; border:none; padding:14px 44px; border-radius:999px; cursor:pointer; margin-top:6px; transition:filter .12s ease; }
.snl-submit:hover{ filter:brightness(1.08); }
.snl-consent{ font-size:12px; line-height:1.55; color:#8a909a; margin:18px 0 0; }
.snl-consent a{ color:var(--s-red,#E4002B); }
@media (max-width:575px){
    .snl-modal__dialog{ padding:30px 22px 28px; margin-top:0; min-height:100vh; max-height:100vh; }
    .snl-row{ grid-template-columns:1fr; gap:12px; }
    .snl-logo-img{ height:38px; }
}

/* ============================================================
   Mobile apps coming soon page
   ============================================================ */
.sma-page{ position:relative; overflow:hidden; background:#15171a; min-height:78vh; display:flex; align-items:center; padding:60px 0; }
.sma-pattern{ position:absolute; inset:0; opacity:.85; background-color:#1b1e23;
  background-image:
    radial-gradient(circle at 14% 24%, var(--s-red,#E4002B) 0 70px, transparent 71px),
    radial-gradient(circle at 90% 16%, #2a2d33 0 90px, transparent 91px),
    radial-gradient(circle at 96% 80%, var(--s-red,#E4002B) 0 60px, transparent 61px),
    radial-gradient(circle at 70% 92%, #2a2d33 0 80px, transparent 81px); }
.sma-page .container{ position:relative; z-index:2; max-width:760px; }
.sma-grid{ display:block; }
.sma-kicker{ display:inline-block; background:var(--s-red,#E4002B); color:#fff; font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:18px; }
.sma-title{ font-size:46px; font-weight:800; color:#fff; line-height:1.06; letter-spacing:-1px; margin:0 0 16px; }
.sma-sub{ font-size:18px; line-height:1.6; color:rgba(255,255,255,.82); margin:0 0 24px; max-width:520px; }
.sma-features{ list-style:none; padding:0; margin:0 0 28px; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
.sma-features li{ color:rgba(255,255,255,.9); font-size:15px; display:flex; align-items:center; gap:10px; }
.sma-features i{ color:var(--s-red,#E4002B); font-size:18px; }
.sma-badges{ display:flex; gap:14px; margin-bottom:30px; }
.sma-badge{ position:relative; display:inline-flex; opacity:.85; }
.sma-badge img{ height:46px; filter:grayscale(.1); }
.sma-badge__tag{ position:absolute; top:-8px; right:-8px; background:var(--s-red,#E4002B); color:#fff; font-size:10px; font-weight:800; padding:3px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.4px; }
.sma-notify{ display:flex; max-width:460px; }
.sma-notify input{ flex:1; height:52px; border:1px solid rgba(255,255,255,.25); border-right:none; background:rgba(255,255,255,.06); color:#fff; padding:0 16px; font-size:15px; border-radius:0; }
.sma-notify input::placeholder{ color:rgba(255,255,255,.5); }
.sma-notify input:focus{ outline:none; border-color:var(--s-red,#E4002B); }
.sma-notify button{ flex:none; background:var(--s-red,#E4002B); color:#fff; font-weight:800; font-size:15px; border:none; padding:0 30px; cursor:pointer; transition:filter .12s ease; }
.sma-notify button:hover{ filter:brightness(1.08); }
.sma-note{ font-size:12.5px; color:rgba(255,255,255,.5); margin:12px 0 0; }

/* Phone mockup */
.sma-visual{ display:flex; justify-content:center; }
.sma-phone{ position:relative; width:264px; height:540px; background:#0c0d10; border:10px solid #2a2d33; border-radius:42px; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.sma-phone__notch{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:108px; height:22px; background:#2a2d33; border-radius:0 0 14px 14px; }
.sma-phone__screen{ position:absolute; inset:0; border-radius:32px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:radial-gradient(circle at 50% 38%, #3a0d14, #0c0d10 70%); }
.sma-phone__logo{ font-size:40px; }
.sma-phone__logo span{ color:#fff; }
.sma-phone__soon{ color:rgba(255,255,255,.7); font-size:14px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.sma-phone__bars{ display:flex; gap:6px; }
.sma-phone__bars i{ width:8px; height:8px; border-radius:50%; background:var(--s-red,#E4002B); animation:smaPulse 1.2s infinite ease-in-out; }
.sma-phone__bars i:nth-child(2){ animation-delay:.2s; } .sma-phone__bars i:nth-child(3){ animation-delay:.4s; }
@keyframes smaPulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

@media (max-width:880px){
    .sma-grid{ grid-template-columns:1fr; gap:36px; text-align:center; }
    .sma-features{ max-width:420px; margin-left:auto; margin-right:auto; }
    .sma-badges, .sma-notify{ justify-content:center; margin-left:auto; margin-right:auto; }
    .sma-sub{ margin-left:auto; margin-right:auto; }
    .sma-visual{ order:-1; }
    .sma-title{ font-size:34px; }
}

/* Footer newsletter subscribe box (opens the popup) */
.sf-subscribe{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:22px 0 26px; margin-bottom:10px; border-bottom:1px solid rgba(255,255,255,.12); }
.sf-subscribe__text h4{ margin:0 0 4px; font-size:17px; font-weight:800; color:#fff; }
.sf-subscribe__text p{ margin:0; font-size:13.5px; color:rgba(255,255,255,.6); max-width:520px; line-height:1.5; }
.sf-subscribe__form{ display:flex; flex:none; min-width:320px; }
.sf-subscribe__input{ flex:1; height:48px; min-width:200px; border:1px solid rgba(255,255,255,.22); border-right:none; background:rgba(255,255,255,.06); color:#fff; padding:0 16px; font-size:14px; border-radius:0; cursor:pointer; }
.sf-subscribe__input::placeholder{ color:rgba(255,255,255,.5); }
.sf-subscribe__btn{ flex:none; background:var(--s-red,#E4002B); color:#fff; font-weight:800; font-size:14px; border:none; padding:0 28px; cursor:pointer; transition:filter .12s ease; }
.sf-subscribe__btn:hover{ filter:brightness(1.08); }
@media (max-width:767px){
    .sf-subscribe{ flex-direction:column; align-items:flex-start; }
    .sf-subscribe__form{ width:100%; min-width:0; }
}

/* Hide the "Sold by / Inhouse product" indicator from shoppers (keep the Brand card) */
.bg-light:has(.store-logo-container img[alt="seller"]){ display:none !important; }