/* =====================================================================
   STOREFRONT SKIN  —  shop/index.php
   ---------------------------------------------------------------------
   A dense, quiet catalogue in the manner of the big menswear stores:
   white ground, no card chrome, small type, and the product photography
   doing all the talking. Everything is namespaced sx- so none of it
   collides with style.css or the older mobile template.
   ===================================================================== */

.sx-body{
    --ink:#111111;
    --ink-2:#6b6b6b;
    --line:#e9e9e9;
    --sale:#c0392b;
    --gold:#BC9C74;

    margin:0;
    background:#ffffff;
    color:var(--ink);
    font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:14px;
    padding-bottom:0;
}
.sx-body *{box-sizing:border-box;}
.sx-body a{color:inherit;text-decoration:none;}
.sx-body img{display:block;max-width:100%;}
/* style.css sets a direct colour on h1..h6, which beats anything a parent
   passes down — so every heading here states its own colour */
.sx-body h1,.sx-body h2,.sx-body h3,.sx-body h4,.sx-body h5{
    margin:0; font-weight:600; color:var(--ink);
}

/* ---------------------------------------------------------------
   ANNOUNCEMENT STRIP
----------------------------------------------------------------*/
.sx-ticker{
    background:var(--ink); color:#fff;
    font-size:11px; letter-spacing:.6px;
    display:flex; align-items:center; justify-content:center; gap:10px;
    height:34px; padding:0 12px;
    overflow:hidden; white-space:nowrap;
}
.sx-ticker .sx-dot{opacity:.45;}
.sx-ticker i{margin-right:4px;}
@media (max-width:640px){
    .sx-ticker span:nth-child(n+3){display:none;}
}

/* ---------------------------------------------------------------
   HEADER
----------------------------------------------------------------*/
.sx-head{
    position:sticky; top:0; z-index:200;
    background:#fff; border-bottom:1px solid var(--line);
}
/* burger · centred wordmark · search + icons — the bar is one row and the
   wordmark is absolutely centred, so it stays put whatever sits beside it */
.sx-head-in{
    position:relative;
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; height:62px; padding:0 22px;
}

/* hand-drawn burger, heavier than an icon font */
.sx-burger{
    background:none; border:none; padding:6px 0;
    width:30px; display:flex; flex-direction:column; gap:6px;
    cursor:pointer; flex:0 0 auto;
}
.sx-burger span{
    display:block; height:2px; width:100%;
    background:var(--ink); border-radius:2px;
}

.sx-logo{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    display:inline-flex; align-items:center;
    line-height:0;
}
.sx-logo img{height:34px; width:auto; max-width:190px; object-fit:contain;}

.sx-right{
    display:flex; align-items:center; gap:18px;
    margin-left:auto; flex:0 0 auto;
}

/* boxed search, square corners, magnifier inside on the left */
.sx-search{position:relative; width:260px;}
.sx-search i{
    position:absolute; left:11px; top:50%; transform:translateY(-50%);
    font-size:16px; color:var(--ink);
}
.sx-search input{
    width:100%; height:38px;
    border:1px solid var(--ink); border-radius:0;
    background:#fff;
    padding:0 12px 0 36px;
    font-family:inherit; font-size:13px; color:var(--ink);
    outline:none;
}
.sx-search input::placeholder{color:#8a8a8a;}
.sx-search input:focus{box-shadow:inset 0 0 0 1px var(--ink);}

.sx-ico{
    position:relative; font-size:21px; color:var(--ink);
    display:inline-flex; align-items:center;
}
.sx-ico:hover{opacity:.65;}
.sx-bag .sx-bag-dot{
    position:absolute; top:1px; right:-1px;
    width:7px; height:7px; border-radius:50%;
    background:#F0522F; border:1px solid #fff;
}

/* tablet — the search box gives up width before anything else moves */
@media (max-width:1100px){
    .sx-search{width:190px;}
}
/* phone — the boxed search drops to its own row under the bar */
@media (max-width:760px){
    .sx-head-in{height:56px; padding:0 14px;}
    .sx-logo img{height:26px; max-width:140px;}
    .sx-right{gap:15px;}
    .sx-search{
        position:absolute; left:0; right:0; top:100%;
        width:auto; margin:0 14px 10px;
    }
    .sx-head{padding-bottom:48px;}
}

/* ---------------------------------------------------------------
   HERO
----------------------------------------------------------------*/
/* a strip of tall banners running edge to edge — two and a bit in view, so
   the next one is always showing and the row reads as a continuous rail */
.sx-hero{background:#f4f4f4; position:relative; overflow:hidden;}
.sx-hero .sx-hero-slide img{
    width:100%; aspect-ratio:4/5; object-fit:cover;
    display:block;
}
/* slick lays the track out itself — no gutters, the banners butt together */
.sx-hero .slick-slide{line-height:0;}
.sx-hero .slick-list,.sx-hero .slick-track{line-height:0;}

/* arrows, only on the wide layouts */
.sx-hero .sx-arw{
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:5; width:44px; height:44px; border:none; border-radius:50%;
    background:rgba(255,255,255,.9); color:#111;
    display:flex; align-items:center; justify-content:center;
    font-size:19px; cursor:pointer;
    box-shadow:0 2px 12px rgba(0,0,0,.18);
    opacity:0; transition:opacity .2s;
}
.sx-hero:hover .sx-arw{opacity:1;}
.sx-hero .sx-arw.prev{left:18px;}
.sx-hero .sx-arw.next{right:18px;}
.sx-hero .sx-arw:hover{background:#fff;}

/* until slick initialises, only the first banner should be on screen */
.sx-hero .banner-slider:not(.slick-initialized) .sx-hero-slide{display:none;}
.sx-hero .banner-slider:not(.slick-initialized) .sx-hero-slide:first-child{display:block;}

@media (max-width:640px){
    .sx-hero .sx-hero-slide img{aspect-ratio:3/4;}
}

/* ---------------------------------------------------------------
   SECTIONS
----------------------------------------------------------------*/
.sx-sec{max-width:1380px; margin:0 auto; padding:64px 20px 0;}

/* heading block — a rule under the title gives the section a proper start */
.sx-sec-head{text-align:center; margin-bottom:30px;}
.sx-sec-title{
    position:relative; display:inline-block;
    font-size:20px; font-weight:600;
    letter-spacing:2.4px; text-transform:uppercase;
    padding-bottom:12px; margin:0;
}
.sx-sec-title::after{
    content:""; position:absolute; left:50%; bottom:0;
    width:44px; height:2px; margin-left:-22px;
    background:var(--gold);
}
.sx-sec-sub{
    margin:12px 0 0; font-size:13px; color:var(--ink-2);
    letter-spacing:.2px;
}
/* headings used on their own, without the block wrapper */
.sx-sec > .sx-sec-title{display:block; text-align:center; margin-bottom:30px;}
.sx-sec > .sx-sec-title::after{left:50%;}

.sx-empty{text-align:center; color:var(--ink-2); padding:36px 0; font-size:13px;}

@media (max-width:640px){
    .sx-sec{padding:44px 12px 0;}
    .sx-sec-title{font-size:16px; letter-spacing:1.8px;}
    .sx-sec-sub{font-size:12px;}
    .sx-sec-head{margin-bottom:22px;}
}

/* SHOP BY CATEGORY — editorial tiles, the name set over the picture.
   auto-fit means the row always fills: five categories stretch to five
   even columns instead of leaving an orphan gap on the right. */
.sx-cat-grid{
    display:grid; gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.sx-cat{display:block;}
.sx-cat-img{
    position:relative; overflow:hidden;
    background:#f0eeec;
}
.sx-cat-img img{
    width:100%; aspect-ratio:4/5; object-fit:cover;
    display:block; transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
/* the scrim only darkens the lower third, so the photograph stays clean */
.sx-cat-img::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to top,
        rgba(12,10,9,.88) 0%,
        rgba(12,10,9,.62) 18%,
        rgba(12,10,9,.20) 40%,
        rgba(12,10,9,0)   62%);
    transition:opacity .35s;
}
.sx-cat:hover .sx-cat-img img{transform:scale(1.06);}
.sx-cat:hover .sx-cat-img::after{opacity:.88;}

.sx-cat-cap{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:18px 18px 20px; color:#fff; text-align:left;
}
/* the colour must be set ON the heading: style.css carries a direct
   h1..h6 colour rule, and an inherited value always loses to that */
.sx-cat-cap h3{
    font-size:15px; font-weight:600;
    letter-spacing:1.4px; text-transform:uppercase;
    line-height:1.25; margin:0;
    color:#ffffff;
    text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.sx-cat-cap span{
    display:inline-flex; align-items:center; gap:6px;
    margin-top:7px;
    font-size:11px; font-weight:500; letter-spacing:1.1px;
    text-transform:uppercase; color:rgba(255,255,255,.92);
    text-shadow:0 1px 8px rgba(0,0,0,.5);
    opacity:0; transform:translateY(6px);
    transition:opacity .3s, transform .3s;
}
.sx-cat:hover .sx-cat-cap span{opacity:1; transform:none;}
/* touch devices never hover — show the cue outright */
@media (hover:none){
    .sx-cat-cap span{opacity:1; transform:none;}
}

@media (max-width:640px){
    .sx-cat-grid{grid-template-columns:repeat(2,1fr); gap:8px;}
    .sx-cat-cap{padding:13px 13px 15px;}
    .sx-cat-cap h3{font-size:12.5px; letter-spacing:1px;}
    .sx-cat-cap span{font-size:10px;}
}

/* ---------------------------------------------------------------
   CATALOGUE PAGE  —  shop.php
----------------------------------------------------------------*/

/* the rail of categories that sits under the header */
.sx-rail{
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:28px;
    max-width:1380px; margin:0 auto; padding:13px 20px;
    overflow-x:auto; scrollbar-width:none;
}
.sx-rail::-webkit-scrollbar{display:none;}
.sx-rail a{
    font-size:12px; font-weight:500; letter-spacing:.9px;
    text-transform:uppercase; white-space:nowrap; color:#5f5f5f;
    padding-bottom:3px; border-bottom:2px solid transparent;
}
.sx-rail a:hover{color:var(--ink);}
.sx-rail a.active{color:var(--ink); border-bottom-color:var(--ink);}

.sx-cat-top{padding-top:26px;}
.sx-cat-body{padding-top:26px;}

.sx-crumb{font-size:11.5px; color:#9a9a9a; letter-spacing:.4px; margin-bottom:14px;}
.sx-crumb a{color:#9a9a9a;}
.sx-crumb a:hover{color:var(--ink);}
.sx-crumb i{font-size:9px; margin:0 5px;}
.sx-crumb span{color:var(--ink);}

/* title on the left, sort on the right */
.sx-toolbar{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:18px; flex-wrap:wrap;
    padding-bottom:16px; border-bottom:1px solid var(--line);
}
.sx-toolbar-l h1{
    font-size:26px; font-weight:600; letter-spacing:1.4px;
    text-transform:uppercase; margin:0; color:var(--ink);
}
.sx-toolbar-l p{margin:6px 0 0; font-size:12.5px; color:var(--ink-2);}

.sx-sortwrap{display:flex; align-items:center; gap:9px;}
.sx-sortwrap label{
    font-size:11px; font-weight:600; letter-spacing:1.2px;
    text-transform:uppercase; color:#9a9a9a;
}
.sx-sort{
    appearance:none; -webkit-appearance:none;
    background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23111' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 10px center;
    border:1px solid #dedede; border-radius:2px;
    padding:9px 32px 9px 13px;
    font-family:inherit; font-size:12.5px; color:var(--ink);
    cursor:pointer; outline:none;
}
.sx-sort:hover,.sx-sort:focus{border-color:var(--ink);}

/* the active search term, removable */
.sx-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
.sx-chip{
    display:inline-flex; align-items:center; gap:8px;
    background:#f4f2f0; border:1px solid var(--line);
    border-radius:40px; padding:6px 8px 6px 14px;
    font-size:12.5px; color:var(--ink);
}
.sx-chip a{
    width:19px; height:19px; border-radius:50%;
    background:#ddd8d3; color:#444;
    display:flex; align-items:center; justify-content:center; font-size:11px;
}
.sx-chip a:hover{background:var(--ink); color:#fff;}

/* nothing found */
.sx-none{text-align:center; padding:70px 20px 40px;}
.sx-none i{font-size:34px; color:#cfcac4;}
.sx-none h3{margin:16px 0 6px; font-size:18px; letter-spacing:1px; color:var(--ink);}
.sx-none p{margin:0 0 22px; font-size:13px; color:var(--ink-2);}

@media (max-width:640px){
    .sx-rail{padding:11px 14px; gap:20px;}
    .sx-cat-top{padding-top:18px;}
    .sx-toolbar{align-items:flex-start;}
    .sx-toolbar-l h1{font-size:19px; letter-spacing:1px;}
    .sx-sortwrap label{display:none;}
    .sx-sort{padding:8px 30px 8px 11px; font-size:12px;}
}

/* ---------------------------------------------------------------
   FILTER PILLS
----------------------------------------------------------------*/
.sx-pills{
    display:flex; gap:10px; justify-content:center; flex-wrap:nowrap;
    overflow-x:auto; scrollbar-width:none;
    padding-bottom:6px; margin-bottom:34px;
}
.sx-pills::-webkit-scrollbar{display:none;}
.sx-pill{
    flex:0 0 auto;
    background:#fff; color:#4a4a4a;
    border:1px solid #dedede;
    padding:9px 20px; border-radius:40px;
    font-family:inherit; font-size:12.5px; font-weight:500;
    letter-spacing:.5px; white-space:nowrap; cursor:pointer;
    transition:background .18s, color .18s, border-color .18s;
}
.sx-pill:hover{border-color:#111; color:#111;}
.sx-pill.active{background:var(--ink); color:#fff; border-color:var(--ink);}
@media (max-width:640px){
    .sx-pills{justify-content:flex-start; margin-bottom:24px;}
    .sx-pill{padding:8px 16px; font-size:12px;}
}

/* ---------------------------------------------------------------
   PRODUCT GRID
----------------------------------------------------------------*/
/* auto-fit with a capped track width: the cards keep a sensible size and
   the row centres itself, so a short catalogue does not sit stranded on
   the left with empty columns beside it */
.sx-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:26px 14px;
}
@media (min-width:700px){
    .sx-grid{
        grid-template-columns:repeat(auto-fit,minmax(200px,255px));
        justify-content:center;
        gap:30px 18px;
    }
}

.sx-card{position:relative; background:#fff;}

/* MEDIA */
.sx-card-media{
    position:relative; overflow:hidden;
    background:#f3f1ef;
}
.sx-card-img{display:block;}
.sx-card-img img{
    width:100%; aspect-ratio:3/4; object-fit:cover;
    display:block; transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.sx-card:hover .sx-card-img img{transform:scale(1.05);}

/* a quiet ink chip rather than a red slab */
.sx-off{
    position:absolute; top:10px; left:10px; z-index:2;
    background:rgba(17,17,17,.88); color:#fff;
    font-size:10px; font-weight:600; letter-spacing:.9px;
    text-transform:uppercase;
    padding:4px 8px; border-radius:2px;
    backdrop-filter:blur(2px);
}

.sx-wish{
    position:absolute; top:8px; right:8px; z-index:2;
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,.94);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; color:#333;
    box-shadow:0 1px 6px rgba(0,0,0,.12);
    opacity:0; transform:translateY(-4px);
    transition:opacity .22s, transform .22s, color .15s;
}
.sx-card:hover .sx-wish{opacity:1; transform:none;}
.sx-wish:hover{color:var(--sale);}

/* add-to-bag slides up over the foot of the picture */
.sx-quick{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    background:rgba(17,17,17,.92); color:#fff;
    display:flex; align-items:center; justify-content:center; gap:7px;
    height:42px;
    font-size:11.5px; font-weight:600; letter-spacing:1.2px;
    text-transform:uppercase;
    transform:translateY(100%); transition:transform .28s ease;
}
.sx-card:hover .sx-quick{transform:none;}
.sx-quick:hover{background:#000;}

/* a phone cannot hover — keep the controls on screen */
@media (hover:none){
    .sx-wish{opacity:1; transform:none;}
    .sx-quick{position:static; transform:none; height:38px; background:#111;}
}

/* BODY */
.sx-card-body{display:block; padding:12px 2px 0;}
.sx-card-body h3{
    font-size:13px; font-weight:500; color:#1c1c1c;
    line-height:1.4; margin:0 0 6px;
    display:-webkit-box; -webkit-line-clamp:1; line-clamp:1;
    -webkit-box-orient:vertical; overflow:hidden;
}
.sx-price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.sx-price b{font-size:14px; font-weight:700; color:var(--ink);}
.sx-price s{font-size:12px; color:#a2a2a2;}
.sx-price span{font-size:12px; font-weight:600; color:#1e8449;}

.sx-more{text-align:center; padding:34px 0 8px;}

/* BUTTONS */
.sx-btn{
    display:inline-block;
    background:#fff; color:var(--ink);
    padding:13px 34px;
    font-size:12px; font-weight:600; letter-spacing:1.6px;
    text-transform:uppercase;
    border:1px solid #fff;
}
.sx-btn:hover{background:transparent; color:#fff;}
.sx-btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink);}
.sx-btn.ghost:hover{background:var(--ink); color:#fff;}

/* ---------------------------------------------------------------
   FOOTER
----------------------------------------------------------------*/
.sx-foot{margin-top:70px; background:#0F0E0D; color:#cfcac4;}

/* the four promises sit above the footer proper, on their own band */
.sx-promise{
    max-width:1380px; margin:0 auto;
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:1px; padding:0 20px;
    border-bottom:1px solid rgba(255,255,255,.09);
}
@media (min-width:820px){ .sx-promise{grid-template-columns:repeat(4,1fr);} }
.sx-promise > div{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:28px 14px; gap:3px;
    border-right:1px solid rgba(255,255,255,.07);
}
.sx-promise > div:last-child{border-right:none;}
.sx-promise i{font-size:22px; color:var(--gold); margin-bottom:6px;}
.sx-promise b{
    font-size:12px; font-weight:600; letter-spacing:1.1px;
    text-transform:uppercase; color:#fff;
}
.sx-promise span{font-size:11.5px; color:#8e8880;}
@media (max-width:819px){
    .sx-promise > div:nth-child(2n){border-right:none;}
    .sx-promise > div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.07);}
}

.sx-foot-in{
    max-width:1380px; margin:0 auto; padding:48px 20px 38px;
    display:grid; gap:34px 26px;
    grid-template-columns:repeat(2,1fr);
}
@media (min-width:1000px){ .sx-foot-in{grid-template-columns:1.9fr 1fr 1fr 1fr 1.2fr;} }

.sx-foot-brand{min-width:0;}
.sx-foot-logo{
    height:34px; width:auto; max-width:180px; margin-bottom:16px;
    filter:brightness(0) invert(1);   /* the mark is dark artwork on a dark ground */
}
.sx-foot p{
    font-size:12.5px; color:#8e8880; line-height:1.8;
    max-width:330px; margin:0 0 18px;
}
.sx-foot h5{
    font-size:11px; letter-spacing:1.8px; text-transform:uppercase;
    margin:0 0 16px; color:#ffffff;
}
.sx-foot-col a,
.sx-foot-contact span{
    display:block; font-size:12.5px; color:#9c968e;
    padding:6px 0; transition:color .15s;
}
.sx-foot-col a:hover{color:#fff;}
.sx-foot-contact a i,.sx-foot-note i{color:var(--gold); margin-right:7px; font-size:12px;}
.sx-foot-note{color:#7c766e !important;}

/* social */
.sx-social{display:flex; gap:9px;}
.sx-social a{
    width:36px; height:36px; border-radius:50%;
    border:1px solid rgba(255,255,255,.16);
    display:flex; align-items:center; justify-content:center;
    font-size:15px; color:#cfcac4; transition:.18s;
}
.sx-social a:hover{background:var(--gold); border-color:var(--gold); color:#111;}

.sx-foot-base{
    border-top:1px solid rgba(255,255,255,.09);
    max-width:1380px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:12px;
    padding:18px 20px; font-size:11.5px; color:#7c766e;
}
.sx-foot-pay{display:flex; gap:14px; font-size:17px; color:#5f5a54;}

@media (max-width:640px){
    .sx-foot-in{padding:34px 16px 26px; gap:26px 18px;}
    .sx-foot-base{justify-content:center; text-align:center;}
    .sx-promise > div{padding:20px 10px;}
    .sx-promise i{font-size:19px;}
}

/* ---------------------------------------------------------------
   CATEGORY DRAWER
   Pictures across the top, then a plain list. No icons anywhere —
   the words carry it.
----------------------------------------------------------------*/
.sx-drawer{
    width:470px !important; max-width:92vw;
    background:#fff; border-right:none;
    font-family:'Jost',system-ui,sans-serif;
}
.sx-drawer *{box-sizing:border-box;}

.sx-dr-head{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    height:64px; padding:0 18px; flex:0 0 auto;
}
.sx-dr-head h2{
    margin:0; font-size:15px; font-weight:600;
    letter-spacing:2.2px; text-transform:uppercase; color:var(--ink,#111);
}
.sx-dr-x{
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    background:none; border:none; padding:6px;
    font-size:17px; line-height:1; color:#111; cursor:pointer;
}
.sx-dr-x:hover{opacity:.6;}

.sx-dr-body{flex:1 1 auto; overflow-y:auto; padding:0 0 34px;}

/* picture strip — scrolls sideways, four and a bit in view */
.sx-dr-strip{
    display:flex; gap:9px;
    padding:4px 18px 22px;
    overflow-x:auto; scrollbar-width:none;
}
.sx-dr-strip::-webkit-scrollbar{display:none;}
.sx-dr-tile{
    flex:0 0 112px; text-decoration:none; color:#111;
}
.sx-dr-tile img{
    width:112px; height:112px; object-fit:cover; display:block;
    background:#f2f2f2;
}
.sx-dr-tile span{
    display:block; margin-top:7px;
    font-size:10px; font-weight:600; letter-spacing:.8px;
    text-transform:uppercase; text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* the list */
.sx-dr-list{display:flex; flex-direction:column; padding:0 18px;}
.sx-dr-list a{
    display:flex; align-items:center; gap:10px;
    padding:11px 0;
    font-size:14px; font-weight:500; letter-spacing:.9px;
    text-transform:uppercase; color:#111; text-decoration:none;
}
.sx-dr-list a:hover{opacity:.55;}
.sx-dr-list.small a{
    font-size:12.5px; font-weight:400; letter-spacing:.5px;
    text-transform:none; color:#5f5f5f; padding:9px 0;
}
.sx-dr-list .sx-dr-out{color:#c0392b;}

/* the little pill beside an entry */
.sx-tag{
    font-style:normal;
    background:#FDE8E0; color:#E2542B;
    font-size:9.5px; font-weight:700; letter-spacing:1px;
    text-transform:uppercase;
    padding:3px 8px; border-radius:3px;
}

.sx-dr-sub{
    margin:26px 18px 4px; padding-top:18px;
    border-top:1px solid var(--line,#e9e9e9);
    font-size:10.5px; font-weight:600; letter-spacing:1.6px;
    text-transform:uppercase; color:#9a9a9a;
}

@media (max-width:560px){
    .sx-drawer{width:88vw !important;}
    .sx-dr-tile,.sx-dr-tile img{flex-basis:96px; width:96px;}
    .sx-dr-tile img{height:96px;}
}

/* ---------------------------------------------------------------
   MOBILE TAB BAR — phones only, the header carries desktop
----------------------------------------------------------------*/
.sx-tabs{display:none;}
@media (max-width:900px){
    .sx-body{padding-bottom:70px;}
    .sx-tabs{
        position:fixed; left:0; right:0; bottom:0; z-index:300;
        display:flex; align-items:center; justify-content:space-around;
        height:62px; background:#fff; border-top:1px solid var(--line);
    }
    .sx-tabs a{
        display:flex; flex-direction:column; align-items:center; gap:3px;
        font-size:10px; color:#8a8a8a; flex:1;
    }
    .sx-tabs a i{font-size:18px;}
    .sx-tabs a.active{color:var(--ink);}
    .sx-tabs .sx-tab-mid{
        flex:0 0 52px; height:52px; margin-top:-22px;
        background:var(--ink); color:#fff; border-radius:50%;
        justify-content:center; border:4px solid #fff;
        font-size:20px;
    }
    .sx-tabs .sx-tab-mid i{font-size:19px;}
}