/* =====================================================================
   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;}

/* the catalogue runs the width of the screen — a grid of clothes wants the
   room, and stopping it at 1380px wasted a third of a wide monitor */
.sx-sec.sx-wide{max-width:none; padding-left:26px; padding-right:26px;}
@media (max-width:640px){ .sx-sec.sx-wide{padding-left:12px; padding-right:12px;} }

/* 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);}

/* a category's own banner and words, from the Product Category master */
.sx-cat-banner{padding-top:22px;}
.sx-cat-banner img{
    display:block; width:100%;
    aspect-ratio:16/5; object-fit:cover;
    background:#f3f1ef;
}
.sx-cat-desc{
    max-width:860px; margin:18px 0 0;
    font-size:13.5px; line-height:1.75; color:var(--ink-2);
}
.sx-cat-desc > :first-child{margin-top:0;}
.sx-cat-desc > :last-child{margin-bottom:0;}
.sx-cat-desc img{max-width:100%; height:auto;}
.sx-cat-desc table{width:100%; border-collapse:collapse;}
.sx-cat-desc td,.sx-cat-desc th{border:1px solid var(--line); padding:6px 10px;}
@media (max-width:640px){
    .sx-cat-banner{padding-top:12px;}
    .sx-cat-banner img{aspect-ratio:16/7;}
}

@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
----------------------------------------------------------------*/
/* an editorial grid — tall pictures, few to a row, room to breathe:
   two on a phone, three on a small tablet, four on any desktop or laptop.
   Four starts at 900px, not 1000: a laptop running Windows display scaling
   at 125-150% reports a narrower width than its screen, and still has to
   read as desktop. 900 is also where the .sx-grid-4 rail turns four. */
.sx-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px 12px;
}
@media (min-width:700px){
    .sx-grid{grid-template-columns:repeat(3,1fr); gap:40px 18px;}
}
/* a screen worked with a mouse is a desktop, however narrow its window or
   however far Windows has scaled it down — four across from 768px. Touch
   tablets keep three. Placed before the 900px rule so wide screens still
   take the larger gaps below. */
@media (min-width:768px) and (hover:hover) and (pointer:fine){
    .sx-grid{grid-template-columns:repeat(4,1fr); gap:44px 18px;}
}
@media (min-width:900px){
    .sx-grid{grid-template-columns:repeat(4,1fr); gap:48px 22px;}
}

/* a fixed four across, two on a phone — used where the row is a suggestion
   rail rather than the catalogue itself */
.sx-grid.sx-grid-4{grid-template-columns:repeat(2,1fr);}
@media (min-width:900px){
    .sx-grid.sx-grid-4{grid-template-columns:repeat(4,1fr);}
}

/* min-width:0 lets a long name ellipsis instead of widening its column */
.sx-card{position:relative; background:transparent; min-width:0;}

/* MEDIA — the picture carries the card: no frame, no shadow */
.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;
    object-position:center top;   /* a model's face stays in the frame */
    display:block; transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.sx-card:hover .sx-card-img img{transform:scale(1.04);}

/* the saving, in a small square-cornered ink chip */
.sx-off{
    position:absolute; top:12px; left:12px; z-index:2;
    background:#141414; color:#fff;
    font-size:10px; font-weight:700; letter-spacing:1px; line-height:1;
    text-transform:uppercase;
    padding:6px 9px; border-radius:2px;
}

/* the wishlist heart sits on the picture as a pane of frosted glass —
   always there, never shouting. Colour is stated with !important on the
   anchor and its icon, as style.css and bootstrap both colour anchors. */
.sx-wish,
.sx-wish:link,
.sx-wish:visited,
.sx-wish i{
    color:#ffffff !important;
}
.sx-wish{
    position:absolute; top:10px; right:10px; z-index:2;
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.28);
    border:1px solid rgba(255,255,255,.5);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; line-height:1; text-decoration:none;
    transition:background .2s, border-color .2s;
}
/* a faint shadow keeps a white heart readable on a pale photograph */
.sx-wish i{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28));}
.sx-wish:hover{background:#ffffff; border-color:#ffffff;}
.sx-wish:hover i{color:var(--sale) !important; filter:none;}

/* Choose Option slides up over the foot of the picture on hover.
   The label is stated white on the anchor AND its children,
   because style.css and bootstrap both carry their own anchor colours */
.sx-quick,
.sx-quick:link,
.sx-quick:visited,
.sx-quick:hover,
.sx-quick:focus,
.sx-quick:active,
.sx-quick i{
    color:#ffffff !important;
}
.sx-quick{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    background:rgba(15,15,15,.92);
    display:flex; align-items:center; justify-content:center; gap:8px;
    height:44px;
    font-size:11px; font-weight:600; letter-spacing:1.6px;
    text-transform:uppercase; text-decoration:none;
    transform:translateY(100%); transition:transform .28s ease, background .18s;
}
.sx-card:hover .sx-quick{transform:none;}
.sx-quick:hover{background:#000;}

/* a phone cannot hover. The picture and the name already open the product,
   so the bar stays away rather than sitting as a black strip under every
   picture, and a tap does not leave the photograph zoomed. */
@media (hover:none){
    .sx-quick{display:none;}
    .sx-card:hover .sx-card-img img{transform:none;}
}

/* BODY — name, then price, set close beneath the picture */
.sx-card-body{display:block; padding:14px 2px 0; text-decoration:none;}
.sx-card-body h3{
    font-size:14px; font-weight:400; color:#141414;
    line-height:1.35; margin:0 0 7px; letter-spacing:.2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sx-card:hover .sx-card-body h3{color:#000;}
.sx-price{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 9px;}
.sx-price b{font-size:15px; font-weight:600; color:#141414; letter-spacing:.2px;}
.sx-price s{font-size:12.5px; color:#a3a3a3; text-decoration-thickness:1px;}

/* laptop and up — the larger, calmer proportions of the reference */
@media (min-width:992px){
    .sx-card-body{padding-top:16px;}
    .sx-card-body h3{font-size:16px;}
    .sx-price b{font-size:16.5px;}
    .sx-price s{font-size:13.5px;}
}

.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;}
}

/* ---------------------------------------------------------------
   PRODUCT PAGE  —  product-details.php
   Gallery left, buy panel right on desktop; stacked with a sticky
   buy bar on a phone.
----------------------------------------------------------------*/
.pd-crumb-wrap{padding-top:22px;}
.pd{padding-top:14px;}

.pd-grid{display:grid; gap:26px; grid-template-columns:1fr;}
@media (min-width:900px){
    .pd-grid{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); gap:48px; align-items:start;}
}

/* GALLERY ---------------------------------------------------- */
.pd-gallery{display:grid; gap:12px; grid-template-columns:1fr;}
@media (min-width:900px){
    .pd-gallery{grid-template-columns:78px minmax(0,1fr);}
    .pd-gallery .pd-stage{position:sticky; top:88px;}
}

.pd-stage{position:relative; background:#f3f1ef; overflow:hidden; order:-1;}
@media (min-width:900px){ .pd-stage{order:0;} }
.pd-stage img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block;}
.pd-off{
    position:absolute; top:14px; left:14px; z-index:2;
    background:rgba(17,17,17,.9); color:#fff;
    font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    padding:5px 10px; border-radius:2px;
}

.pd-thumbs{display:flex; gap:9px; overflow-x:auto; scrollbar-width:none;}
.pd-thumbs::-webkit-scrollbar{display:none;}
@media (min-width:900px){ .pd-thumbs{flex-direction:column; overflow:visible;} }
.pd-thumb{
    flex:0 0 68px; width:68px; padding:0; cursor:pointer;
    background:#f3f1ef; border:1px solid transparent; border-radius:2px; overflow:hidden;
    transition:border-color .15s, opacity .15s; opacity:.72;
}
@media (min-width:900px){ .pd-thumb{flex-basis:auto; width:78px;} }
.pd-thumb img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block;}
.pd-thumb:hover{opacity:1;}
.pd-thumb.on{border-color:var(--ink); opacity:1;}

/* films sit in the thumbnail rail beside the pictures; a play mark tells them apart */
.pd-thumb-video{position:relative;}
.pd-play{
    position:absolute; inset:0; pointer-events:none;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.26); color:#fff; font-size:22px;
}

/* the film plays in the middle of the page, in the picture's own frame */
.pd-stage.is-video{aspect-ratio:3/4; background:#000;}
.pd-video{position:absolute; inset:0; width:100%; height:100%; border:0; display:block; z-index:1;}

/* the play button centred on the main picture */
.pd-stage-play{
    position:absolute; top:50%; left:50%; z-index:3;
    transform:translate(-50%,-50%);
    display:flex; flex-direction:column; align-items:center; gap:9px;
    background:none; border:0; padding:0; cursor:pointer;
    color:#fff; font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
    text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.pd-stage-play i{
    width:68px; height:68px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:32px; padding-left:4px; color:#fff;
    background:rgba(255,255,255,.26); border:1px solid rgba(255,255,255,.6);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    box-shadow:0 6px 24px rgba(0,0,0,.22);
    transition:background .2s, transform .2s;
}
.pd-stage-play:hover i{background:rgba(255,255,255,.44); transform:scale(1.06);}

/* specifications — the item's attributes, name beside text */
.pd-spec{margin:0;}
.pd-spec div{
    display:grid; grid-template-columns:minmax(110px,36%) 1fr; gap:14px;
    padding:9px 0; border-bottom:1px solid var(--line);
}
.pd-spec div:last-child{border-bottom:0;}
.pd-spec dt{margin:0; font-weight:600; color:var(--ink);}
.pd-spec dd{margin:0;}

/* BUY PANEL -------------------------------------------------- */
.pd-buy{min-width:0;}
.pd-eyebrow{
    margin:0 0 8px; font-size:11px; font-weight:600;
    letter-spacing:2px; text-transform:uppercase; color:var(--gold);
}
.pd-title{
    font-size:26px; font-weight:600; line-height:1.28;
    letter-spacing:.3px; margin:0 0 14px; color:var(--ink);
}
@media (min-width:900px){ .pd-title{font-size:30px;} }

.pd-price{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;}
.pd-price b{font-size:27px; font-weight:700; color:var(--ink); letter-spacing:.3px;}
.pd-price s{font-size:15px; color:#adadad;}
.pd-tax{margin:6px 0 0; font-size:12.5px; color:var(--ink-2);}

.pd-facts{display:flex; gap:9px; flex-wrap:wrap; margin-top:16px;}
.pd-facts span{
    display:inline-flex; align-items:center; gap:7px;
    background:#f5f3f1; border:1px solid var(--line); border-radius:40px;
    padding:7px 14px; font-size:12.5px; color:#4a4a4a;
}
.pd-facts i{color:var(--gold); font-size:13px;}

.pd-block{margin-top:26px; padding-top:22px; border-top:1px solid var(--line);}
.pd-block-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:12px;}
.pd-block-head h2{
    margin:0; font-size:12px; font-weight:700;
    letter-spacing:1.6px; text-transform:uppercase; color:var(--ink);
}
.pd-block-head span{font-size:12.5px; color:var(--ink-2);}
.pd-link{font-size:12px; color:var(--ink-2); text-decoration:underline;}
.pd-link:hover{color:var(--ink);}

.pd-swatches{display:flex; gap:10px; flex-wrap:wrap;}
.pd-swatch{
    width:58px; padding:0; cursor:pointer; background:#f3f1ef;
    border:1px solid transparent; border-radius:2px; overflow:hidden; opacity:.75;
    transition:border-color .15s, opacity .15s;
}
.pd-swatch img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block;}
.pd-swatch:hover{opacity:1;}
.pd-swatch.on{border-color:var(--ink); opacity:1;}

.pd-sizes{display:flex; gap:9px; flex-wrap:wrap;}
.pd-size{
    min-width:52px; padding:11px 15px; cursor:pointer;
    background:#fff; color:#333; border:1px solid #dcdcdc; border-radius:2px;
    font-family:inherit; font-size:12.5px; font-weight:600;
    letter-spacing:.8px; text-transform:uppercase;
    transition:border-color .15s, background .15s, color .15s;
}
.pd-size:hover{border-color:var(--ink);}
.pd-size.on{background:var(--ink); border-color:var(--ink); color:#fff;}
.pd-size-warn{margin:10px 0 0; font-size:12.5px; color:#c0392b;}

.pd-actions{display:flex; gap:11px; margin-top:26px;}
.pd-btn{
    flex:1; height:52px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    font-size:13px; font-weight:700; letter-spacing:1.3px;
    text-transform:uppercase; text-decoration:none; border-radius:2px;
    transition:background .18s, color .18s, border-color .18s;
}
.pd-btn.ghost{background:#fff; color:var(--ink); border:1px solid var(--ink); flex:0 0 auto; padding:0 22px;}
.pd-btn.ghost:hover{background:#f5f3f1;}
.pd-btn.solid,
.pd-btn.solid:link,
.pd-btn.solid:visited,
.pd-btn.solid:hover,
.pd-btn.solid i{color:#ffffff !important;}
.pd-btn.solid{background:var(--ink); border:1px solid var(--ink);}
.pd-btn.solid:hover{background:#000;}

.pd-assure{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:9px;}
.pd-assure li{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-2);}
.pd-assure i{color:var(--gold); font-size:15px;}

.pd-acc{margin-top:22px; border-top:1px solid var(--line);}
.pd-acc summary{
    list-style:none; cursor:pointer; padding:16px 0;
    display:flex; align-items:center; justify-content:space-between;
    font-size:12px; font-weight:700; letter-spacing:1.6px;
    text-transform:uppercase; color:var(--ink);
}
.pd-acc summary::-webkit-details-marker{display:none;}
.pd-acc summary i{font-size:13px; transition:transform .2s;}
.pd-acc[open] summary i{transform:rotate(180deg);}
.pd-acc-body{padding:0 0 18px; font-size:13.5px; line-height:1.85; color:var(--ink-2);}
.pd-acc-body p{margin:0 0 10px;}

/* STICKY BUY BAR — phones only */
.pd-sticky{display:none;}
@media (max-width:899px){
    .pd-sticky{
        position:fixed; left:0; right:0; bottom:0; z-index:120;
        display:flex; align-items:center; gap:14px;
        padding:11px 14px calc(11px + env(safe-area-inset-bottom));
        background:#fff; border-top:1px solid var(--line);
        box-shadow:0 -4px 18px rgba(0,0,0,.07);
    }
    .pd-sticky-price{display:flex; align-items:baseline; gap:7px; white-space:nowrap;}
    .pd-sticky-price b{font-size:17px; font-weight:700; color:var(--ink);}
    .pd-sticky-price s{font-size:12.5px; color:#adadad;}
    .pd-sticky .pd-btn{height:46px; flex:1;}
    .pd .pd-actions{display:none;}      /* the sticky bar carries it instead */
    body.sx-body{padding-bottom:72px;}
    .sx-tabs{display:none;}             /* one bar at the bottom, not two */
}

/* the size block flashes when Add to Cart is pressed without a choice */
.pd-flash{animation:pdFlash 1.2s ease;}
@keyframes pdFlash{
    0%,100%{background:transparent;}
    25%,60%{background:#fdf3e7;}
}
.pd-size-warn{font-weight:600;}

/* ---------------------------------------------------------------
   THE BAG  —  cart.php
----------------------------------------------------------------*/
.ct{padding-top:14px;}
.ct-head{margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--line);}
.ct-head h1{font-size:26px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; margin:0;}
.ct-head p{margin:6px 0 0; font-size:12.5px; color:var(--ink-2);}

.ct-notice{
    display:flex; align-items:center; gap:9px;
    background:#e8f6ee; border:1px solid #c9e9d6; color:#1e6b3f;
    padding:12px 16px; font-size:13px; border-radius:2px;
}
.ct-notice i{font-size:16px;}

.ct-grid{display:grid; gap:30px; grid-template-columns:1fr; align-items:start;}
@media (min-width:960px){ .ct-grid{grid-template-columns:minmax(0,1fr) 360px; gap:44px;} }

/* ITEMS ------------------------------------------------------ */
.ct-items{display:flex; flex-direction:column;}
.ct-row{
    display:grid; gap:16px; align-items:start;
    grid-template-columns:96px minmax(0,1fr) auto;
    padding:22px 0; border-bottom:1px solid var(--line);
}
.ct-img{display:block; background:#f3f1ef; overflow:hidden;}
.ct-img img{width:96px; aspect-ratio:3/4; object-fit:cover; display:block;}

.ct-info{min-width:0;}
.ct-name{display:block; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4;}
.ct-name:hover{text-decoration:underline;}
.ct-variant{display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; font-size:12px; color:var(--ink-2);}
.ct-variant b{color:#333; font-weight:600;}
.ct-price{display:flex; align-items:baseline; gap:8px; margin-top:9px;}
.ct-price b{font-size:15px; font-weight:700;}
.ct-price s{font-size:12.5px; color:#adadad;}

.ct-tools{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:14px;}
.ct-qf{margin:0;}
.ct-qty{display:inline-flex; align-items:center; border:1px solid #dcdcdc;}
.ct-qty button{
    width:34px; height:34px; border:none; background:#fff; cursor:pointer;
    color:var(--ink); font-size:13px; display:flex; align-items:center; justify-content:center;
}
.ct-qty button:hover:not(:disabled){background:#f2f0ee;}
.ct-qty button:disabled{opacity:.35; cursor:not-allowed;}
.ct-qty span{
    min-width:38px; text-align:center; font-size:13.5px; font-weight:600;
    border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc; line-height:34px;
}
.ct-remove{
    background:none; border:none; padding:0; cursor:pointer;
    font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.6px;
    color:var(--ink-2); display:inline-flex; align-items:center; gap:6px;
}
.ct-remove:hover{color:var(--sale);}

.ct-line{font-size:15px; font-weight:700; white-space:nowrap; text-align:right;}

.ct-continue{
    display:inline-flex; align-items:center; gap:8px; margin-top:22px;
    font-size:12.5px; font-weight:600; letter-spacing:.6px; color:var(--ink-2);
}
.ct-continue:hover{color:var(--ink);}

@media (max-width:560px){
    .ct-row{grid-template-columns:80px minmax(0,1fr); gap:13px;}
    .ct-img img{width:80px;}
    .ct-line{grid-column:2; text-align:left; margin-top:2px;}
    .ct-head h1{font-size:20px;}
}

/* SUMMARY ---------------------------------------------------- */
.ct-sum{
    background:#faf9f8; border:1px solid var(--line);
    padding:24px 22px;
}
@media (min-width:960px){ .ct-sum{position:sticky; top:88px;} }
.ct-sum h2{
    margin:0 0 18px; font-size:12px; font-weight:700;
    letter-spacing:1.8px; text-transform:uppercase; color:var(--ink);
}
.ct-line-item{
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 0; font-size:13.5px; color:var(--ink-2);
}
.ct-line-item.saving span:last-child{color:#1e8449; font-weight:700;}
.ct-nudge{
    margin:10px 0 0; padding:10px 12px;
    background:#fdf3e7; border:1px solid #f0d9b5; color:#8a6d3b;
    font-size:12px; line-height:1.5;
}
.ct-nudge i{margin-right:6px;}
.ct-total{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:14px; padding-top:16px; border-top:1px solid var(--line);
    font-size:13px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
}
.ct-total b{font-size:22px; letter-spacing:.3px;}
.ct-saved{margin:8px 0 0; font-size:12.5px; color:#1e8449; font-weight:600;}
.ct-go{width:100%; margin-top:20px;}
.ct-signin{margin:10px 0 0; font-size:11.5px; color:var(--ink-2); text-align:center; line-height:1.6;}
.ct-sum .pd-assure{margin-top:20px; padding-top:18px; border-top:1px solid var(--line);}

/* the numeric bag badge on the header */
.sx-bag .sx-bag-n{
    position:absolute; top:-5px; right:-8px;
    min-width:17px; height:17px; padding:0 4px;
    border-radius:20px; background:#F0522F; color:#fff;
    font-size:10px; font-weight:700; line-height:17px; text-align:center;
    border:1px solid #fff;
}

/* ---------------------------------------------------------------
   CHECKOUT  —  checkout.php
----------------------------------------------------------------*/
.co-main{display:flex; flex-direction:column; gap:22px; min-width:0;}

.co-block{border:1px solid var(--line); background:#fff; padding:22px;}
.co-block h2{
    display:flex; align-items:center; gap:11px; margin:0 0 18px;
    font-size:12px; font-weight:700; letter-spacing:1.6px;
    text-transform:uppercase; color:var(--ink);
}
.co-block h2 span{
    width:24px; height:24px; flex:0 0 24px; border-radius:50%;
    background:var(--ink); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; letter-spacing:0;
}

.co-fields{display:grid; gap:14px; grid-template-columns:1fr;}
@media (min-width:640px){ .co-fields{grid-template-columns:1fr 1fr;} }
.co-f{display:flex; flex-direction:column; gap:6px; min-width:0;}
.co-f.wide{grid-column:1 / -1;}
.co-f > span{font-size:11.5px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-2);}
.co-f > span i{color:#c0392b; font-style:normal;}
.co-f input,.co-f textarea{
    width:100%; border:1px solid #dcdcdc; border-radius:2px;
    padding:11px 13px; font-family:inherit; font-size:14px; color:var(--ink);
    background:#fff; outline:none; resize:vertical;
}
.co-f input:focus,.co-f textarea:focus{border-color:var(--ink);}

.co-pay{display:flex; align-items:flex-start; gap:12px; padding:14px; border:1px solid #dcdcdc; cursor:pointer; margin-bottom:10px;}
.co-pay:last-child{margin-bottom:0;}
.co-pay:hover{border-color:var(--ink);}
.co-pay input{margin-top:3px; accent-color:var(--ink); width:16px; height:16px;}
.co-pay-b b{display:block; font-size:14px; font-weight:600;}
.co-pay-b b i{color:var(--gold); margin-right:7px;}
.co-pay-b small{display:block; margin-top:3px; font-size:12px; color:var(--ink-2);}
.co-pay.disabled{opacity:.5; cursor:not-allowed;}
.co-pay.disabled:hover{border-color:#dcdcdc;}

.co-line{display:flex; align-items:center; gap:13px; padding:11px 0; border-bottom:1px solid var(--line);}
.co-line:last-of-type{border-bottom:none;}
.co-line img{width:54px; aspect-ratio:3/4; object-fit:cover; background:#f3f1ef; flex:0 0 54px;}
.co-line div{flex:1; min-width:0;}
.co-line b{display:block; font-size:13.5px; font-weight:600; line-height:1.4;}
.co-line small{display:block; margin-top:3px; font-size:12px; color:var(--ink-2);}
.co-line span{font-size:14px; font-weight:700; white-space:nowrap;}

.co-errors{
    display:flex; gap:11px; align-items:flex-start;
    background:#fdecea; border:1px solid #f5c6c0; color:#8a2f24;
    padding:14px 16px; margin-bottom:22px; font-size:13px;
}
.co-errors i{font-size:16px; margin-top:1px;}
.co-errors ul{margin:0; padding-left:16px;}
.co-errors li{margin:2px 0;}

/* ---------------------------------------------------------------
   ORDER PLACED  —  the receipt after checkout
----------------------------------------------------------------*/
.ok{max-width:960px; padding-top:34px;}

.ok-hero{text-align:center; padding:14px 0 34px;}
.ok-mark{
    width:76px; height:76px; margin:0 auto 22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:38px; color:#fff; background:#1e8449;
    box-shadow:0 0 0 9px rgba(30,132,73,.10);
    animation:okPop .5s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes okPop{ 0%{transform:scale(.4); opacity:0;} 100%{transform:scale(1); opacity:1;} }
.ok-hero h1{font-size:28px; font-weight:600; letter-spacing:.6px; margin:0 0 8px;}
.ok-hero > p{margin:0 0 22px; font-size:14px; color:var(--ink-2);}

.ok-no{
    display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap;
    background:#faf9f8; border:1px solid var(--line);
    padding:12px 16px;
}
.ok-no span{font-size:11px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-2);}
.ok-no b{font-size:16px; font-weight:700; letter-spacing:1.4px;}
.ok-copy{
    background:none; border:1px solid #dcdcdc; cursor:pointer;
    padding:5px 11px; font-family:inherit; font-size:11.5px; font-weight:600;
    color:var(--ink-2); display:inline-flex; align-items:center; gap:6px;
}
.ok-copy:hover{border-color:var(--ink); color:var(--ink);}

/* the four steps of the journey */
.ok-track{
    display:grid; grid-template-columns:repeat(2,1fr); gap:18px 10px;
    padding:24px 0 30px; margin-bottom:26px;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
@media (min-width:760px){ .ok-track{grid-template-columns:repeat(4,1fr);} }
.ok-step{text-align:center; color:#b9b4ae; position:relative;}
.ok-step i{font-size:21px; display:block; margin-bottom:8px;}
.ok-step b{display:block; font-size:12px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:#9a948d;}
.ok-step small{display:block; margin-top:4px; font-size:11.5px; color:#b9b4ae;}
.ok-step.on{color:#1e8449;}
.ok-step.on i{color:#1e8449;}
.ok-step.on b{color:var(--ink);}
.ok-step.on small{color:var(--ink-2);}

.ok-grid{display:grid; gap:18px; grid-template-columns:1fr;}
@media (min-width:760px){ .ok-grid{grid-template-columns:1.25fr 1fr;} }
.ok-card{border:1px solid var(--line); background:#fff; padding:22px;}
.ok-card h2{
    margin:0 0 16px; font-size:12px; font-weight:700;
    letter-spacing:1.6px; text-transform:uppercase; color:var(--ink);
}
.ok-muted{font-size:13px; color:var(--ink-2); margin:0;}

.ok-pay{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
}
.ok-pay span{font-size:13px; color:var(--ink-2); display:inline-flex; align-items:center; gap:8px;}
.ok-pay span i{color:var(--gold); font-size:15px;}
.ok-pay b{font-size:19px; font-weight:700;}

.ok-addr{font-style:normal; display:grid; gap:5px; font-size:13.5px; line-height:1.6; color:var(--ink-2);}
.ok-addr b{font-size:14px; font-weight:600; color:var(--ink);}
.ok-addr i{color:var(--gold); margin-right:5px;}

.ok-eta{
    display:flex; align-items:center; gap:12px;
    margin-top:18px; padding:13px 14px;
    background:#f6f9f7; border:1px solid #d9ebe1;
}
.ok-eta i{font-size:19px; color:#1e8449;}
.ok-eta b{display:block; font-size:13.5px; color:#186c3b;}
.ok-eta small{display:block; margin-top:2px; font-size:11.5px; color:#5d7d6b;}

.ok-acts{display:flex; gap:11px; justify-content:center; flex-wrap:wrap; margin-top:30px;}
.ok-acts .pd-btn{flex:0 1 240px;}
.ok-help{margin:20px 0 0; text-align:center; font-size:12.5px; color:var(--ink-2);}
.ok-help a{color:var(--ink); font-weight:600; text-decoration:underline;}

@media (max-width:640px){
    .ok-hero h1{font-size:22px;}
    .ok-mark{width:64px; height:64px; font-size:31px;}
    .ok-acts .pd-btn{flex:1 1 100%;}
}

/* ---------------------------------------------------------------
   MY ORDERS  —  my-orders.php
----------------------------------------------------------------*/
.mo-pills{justify-content:flex-start; margin-bottom:26px;}
.mo-pills .sx-pill{text-decoration:none;}

.mo-list{display:flex; flex-direction:column; gap:16px;}

.mo-card{border:1px solid var(--line); background:#fff; padding:20px 22px;}
.mo-card.gold{border-color:#ecdcbb; background:linear-gradient(180deg,#fffdf8,#fff);}

.mo-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    padding-bottom:15px; border-bottom:1px solid var(--line);}
.mo-top b{display:block; font-size:14.5px; font-weight:700; letter-spacing:.8px;}
.mo-top small{display:block; margin-top:3px; font-size:12px; color:var(--ink-2);}

.mo-pill{
    font-size:10.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
    padding:5px 12px; border-radius:20px; white-space:nowrap;
    background:#eef4f9; color:#2b6ea8; border:1px solid #d6e6f2;
}
.mo-pill.done{background:#e8f6ee; color:#1e8449; border-color:#c9e9d6;}
.mo-pill.off{background:#fdecea; color:#a03226; border-color:#f3ccc6;}

.mo-items{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:16px 0;}
.mo-thumb{position:relative; display:block; width:58px; flex:0 0 58px; background:#f3f1ef; overflow:hidden;}
.mo-thumb img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block;}
.mo-thumb span{
    position:absolute; right:3px; bottom:3px;
    min-width:18px; height:18px; padding:0 4px; border-radius:20px;
    background:rgba(17,17,17,.88); color:#fff;
    font-size:10px; font-weight:700; line-height:18px; text-align:center;
}
.mo-more{
    width:58px; height:77px; flex:0 0 58px;
    display:flex; align-items:center; justify-content:center;
    background:#f6f4f2; border:1px dashed var(--line);
    font-size:12.5px; font-weight:700; color:var(--ink-2);
}
.mo-gold{
    width:58px; height:77px; flex:0 0 58px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(150deg,#f5e6c4,#e6cf9d);
    font-size:23px; color:#8a6d2f;
}
.mo-names{min-width:0; padding-left:4px;}
.mo-names b{display:block; font-size:14px; font-weight:600; line-height:1.4;}
.mo-names small{display:block; margin-top:3px; font-size:12.5px; color:var(--ink-2);}

/* the journey, as a rail of dots */
.mo-track{display:flex; gap:4px; padding:4px 0 16px;}
.mo-step{flex:1; min-width:0; text-align:center;}
.mo-dot{
    display:block; height:3px; border-radius:3px;
    background:#e6e3df; margin-bottom:7px;
}
.mo-step.on .mo-dot{background:#1e8449;}
.mo-step small{
    font-size:10px; font-weight:600; letter-spacing:.4px;
    color:#b3aea8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
}
.mo-step.on small{color:var(--ink-2);}

.mo-foot{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    padding-top:15px; border-top:1px solid var(--line);}
.mo-amt small{display:block; font-size:11.5px; color:var(--ink-2);}
.mo-amt b{display:block; margin-top:2px; font-size:18px; font-weight:700;}

.mo-acts{display:flex; gap:9px; flex-wrap:wrap;}
.mo-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    padding:10px 16px; border:1px solid #dcdcdc; background:#fff; cursor:pointer;
    font-family:inherit; font-size:12px; font-weight:700; letter-spacing:.9px;
    text-transform:uppercase; color:var(--ink); text-decoration:none;
}
.mo-btn:hover{border-color:var(--ink);}
.mo-btn.solid,
.mo-btn.solid:link,
.mo-btn.solid:visited,
.mo-btn.solid:hover,
.mo-btn.solid i{color:#ffffff !important;}
.mo-btn.solid{background:var(--ink); border-color:var(--ink);}
.mo-btn.solid:hover{background:#000;}

@media (max-width:560px){
    .mo-card{padding:16px;}
    .mo-track{display:none;}          /* the pill already says where it is */
    .mo-foot{align-items:flex-start;}
    .mo-acts{width:100%;}
    .mo-acts .mo-btn,.mo-acts form{flex:1;}
    .mo-acts form .mo-btn{width:100%;}
}

/* ---------------------------------------------------------------
   MY ACCOUNT  —  profile.php
----------------------------------------------------------------*/
.ac{padding-top:20px;}

/* WHO ---------------------------------------------------------- */
.ac-hero{
    display:flex; align-items:center; gap:22px; flex-wrap:wrap;
    padding:28px; margin-bottom:20px;
    background:linear-gradient(135deg,#181613,#25211c); color:#fff;
    border:1px solid #241f19;
}
.ac-hero.gold{
    background:linear-gradient(135deg,#1c1710,#332714);
    border-color:rgba(202,166,75,.45);
}

.ac-face{
    width:84px; height:84px; flex:0 0 84px; border-radius:50%; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.07); border:1px solid rgba(202,166,75,.45);
}
.ac-face img{width:100%; height:100%; object-fit:cover;}
.ac-face span{font-size:32px; font-weight:600; color:var(--gold);}

.ac-who{flex:1; min-width:200px;}
.ac-who h1{margin:0 0 6px; font-size:24px; font-weight:600; letter-spacing:.4px; color:#fff;}
.ac-who p{margin:0 0 12px; font-size:12.5px; color:rgba(255,255,255,.6);}
.ac-who p i{color:var(--gold); margin-right:5px;}

.ac-tier{
    display:inline-flex; align-items:center; gap:7px;
    font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
    padding:6px 14px; border-radius:20px; text-decoration:none;
    background:linear-gradient(135deg,#BC9C74,#A8865B); color:#1a1510;
}
.ac-tier.plain{background:transparent; color:var(--gold); border:1px solid rgba(202,166,75,.5);}
.ac-tier.plain:hover{background:rgba(202,166,75,.12);}

.ac-stats{display:flex; gap:10px; flex-wrap:wrap;}
.ac-stats a{
    min-width:92px; text-align:center; padding:13px 16px; text-decoration:none;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
}
.ac-stats a:hover{background:rgba(202,166,75,.12); border-color:rgba(202,166,75,.35);}
.ac-stats b{display:block; font-size:20px; font-weight:700; color:#fff;}
.ac-stats small{display:block; margin-top:3px; font-size:10.5px; letter-spacing:1px;
    text-transform:uppercase; color:rgba(255,255,255,.55);}

/* PANELS ------------------------------------------------------- */
.ac-grid{display:grid; gap:18px; grid-template-columns:1fr; align-items:start;}
@media (min-width:900px){ .ac-grid{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);} }

.ac-card{border:1px solid var(--line); background:#fff; padding:22px; display:block; text-decoration:none;}
.ac-card h2{
    display:flex; align-items:center; gap:9px; margin:0 0 18px;
    font-size:12px; font-weight:700; letter-spacing:1.6px;
    text-transform:uppercase; color:var(--ink);
}
.ac-card h2 i{color:var(--gold); font-size:15px;}

.ac-form{display:grid; gap:14px; grid-template-columns:1fr;}
@media (min-width:640px){ .ac-form{grid-template-columns:1fr 1fr;} }
.ac-form .co-f.wide{grid-column:1 / -1;}
.ac-form input:disabled{background:#f5f3f1; color:#8d8880; cursor:not-allowed;}
.ac-save{grid-column:1 / -1; display:flex; justify-content:flex-end; margin-top:4px;}
.ac-save .pd-btn{flex:0 1 220px;}

.ac-side{display:flex; flex-direction:column; gap:18px;}

/* the gold strip */
.ac-gold{
    display:flex; align-items:center; gap:14px;
    background:linear-gradient(135deg,#fffdf8,#f8efdc);
    border-color:#ecdcbb;
}
.ac-gold > i:first-child{font-size:26px; color:#a8813a;}
.ac-gold div{flex:1; min-width:0;}
.ac-gold b{display:block; font-size:14.5px; font-weight:600; color:var(--ink);}
.ac-gold small{display:block; margin-top:2px; font-size:12.5px; color:#8a7550;}
.ac-gold .ac-go{color:#a8813a; font-size:14px;}
.ac-gold:hover{border-color:#d9c294;}

/* the option lists */
.ac-menu{display:flex; flex-direction:column;}
.ac-menu a{
    display:flex; align-items:center; gap:12px;
    padding:13px 0; border-bottom:1px solid var(--line);
    font-size:13.5px; color:var(--ink); text-decoration:none;
}
.ac-menu a:last-child{border-bottom:none;}
.ac-menu a:hover{color:#000;}
.ac-menu a > i{
    width:32px; height:32px; flex:0 0 32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#f6f4f2; color:var(--ink-2); font-size:14px;
}
.ac-menu a:hover > i{background:#efe9e0; color:var(--ink);}
.ac-menu a span{
    margin-left:auto; font-size:11.5px; font-weight:700;
    background:#f2efec; color:var(--ink-2); padding:3px 10px; border-radius:20px;
}
.ac-menu .ac-out{color:#c0392b;}
.ac-menu .ac-out > i{background:#fdecea; color:#c0392b;}

@media (max-width:640px){
    .ac-hero{padding:20px; gap:16px;}
    .ac-face{width:64px; height:64px; flex-basis:64px;}
    .ac-face span{font-size:25px;}
    .ac-who h1{font-size:19px;}
    .ac-stats{width:100%;}
    .ac-stats a{flex:1; min-width:0; padding:11px 8px;}
    .ac-stats b{font-size:17px;}
    .ac-save .pd-btn{flex:1 1 100%;}
}