/* ===== Style Hub theme — fashion store: navy, warm yellow, deep green; mobile + desktop ===== */
:root{--nv:#0f1b2d;--nv2:#18263b;--gr:#0f3b33;--cr:#faf6ee;--bt:#10192b;--bl:color-mix(in srgb,var(--b) 16%,#fff);--bg:#f7f7f4;--t:#10192b;--m:#667085;--l:#e8e8e2;--r:14px;--sw:1240px}
body{background:var(--bg);overflow-x:hidden}
#app{max-width:none;background:var(--bg)}
.st-in{max-width:var(--sw);margin:0 auto;padding:0 16px}
@media(min-width:900px){.st-in{padding:0 24px}}

/* ---------- buttons ---------- */
.st-btn{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 22px;border-radius:999px;background:var(--b);color:var(--bt);font-weight:700;font-size:15px;transition:filter .15s}
.st-btn:hover{filter:brightness(.95)}
.st-btn.sm{height:38px;padding:0 16px;font-size:14px}
.st-btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.st-btn.ghost:hover{background:rgba(255,255,255,.08)}

/* ---------- header ---------- */
.st-hdr,.hdr{background:var(--nv);color:#fff;border-radius:0;box-shadow:none;padding:0}
.hdr:not(.st-hdr){padding:10px 14px 12px}
.hdr:not(.st-hdr)>*{max-width:var(--sw);margin-left:auto;margin-right:auto}
.hdr .ibtn{background:rgba(255,255,255,.1);color:#fff;border-radius:50%}
.hdr .search{background:#fff;border-radius:999px}
.st-bar{max-width:var(--sw);margin:0 auto;padding:10px 14px;display:grid;grid-template-columns:40px 1fr auto;grid-template-areas:"menu brand icons" "search search search";align-items:center;gap:10px}
.st-ib{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;position:relative}
.st-ib:hover{background:rgba(255,255,255,.08)}
.st-menu{grid-area:menu}
.st-brand{grid-area:brand;display:flex;align-items:center;gap:8px;min-width:0}
.st-brand img{height:32px;width:auto;max-width:130px;object-fit:contain;border-radius:6px}
.st-brand b{font-size:20px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-icons{grid-area:icons;display:flex;gap:2px}
.st-d{display:none}
.st-cart .badge{top:-2px;left:auto;right:-2px;background:var(--b);color:var(--bt);border:2px solid var(--nv);min-width:20px;height:20px;border-radius:10px}
.st-search{grid-area:search;display:flex;align-items:center;height:42px;border-radius:10px;background:var(--nv2);border:1px solid rgba(255,255,255,.1);padding:0 4px 0 14px;transition:border-color .15s}
.st-search:focus-within{border-color:var(--b)}
.st-search input{flex:1;min-width:0;border:0;outline:0;background:none;color:#fff;font-size:15px;height:100%}
.st-search input::placeholder{color:rgba(255,255,255,.55)}
.st-search span{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75)}
.st-nav{border-top:1px solid rgba(255,255,255,.08)}
.st-nav>div{max-width:var(--sw);margin:0 auto;padding:0 8px;display:flex;overflow-x:auto;scrollbar-width:none}
.st-nav>div::-webkit-scrollbar{display:none}
.st-nav a{flex-shrink:0;padding:11px 12px;font-size:14px;font-weight:600;color:rgba(255,255,255,.75);border-bottom:2px solid transparent;white-space:nowrap}
.st-nav a:hover{color:#fff}
.st-nav a.on{color:#fff;border-bottom-color:var(--b)}
@media(min-width:900px){
  .st-bar{grid-template-columns:auto 1fr auto;grid-template-areas:"brand search icons";gap:28px;padding:14px 24px}
  .st-menu{display:none}
  .st-search{max-width:560px;width:100%;justify-self:center}
  .st-d{display:flex}
  .st-nav>div{padding:0 14px}
}

/* ---------- hero ---------- */
.st-hero{position:relative;height:420px;margin:0;border-radius:0;background:var(--nv);overflow:hidden}
.st-hero .sl img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.st-hcap{position:absolute;inset:0;display:flex;align-items:flex-end;background:linear-gradient(0deg,rgba(15,27,45,.92) 0%,rgba(15,27,45,.55) 45%,rgba(15,27,45,.05) 75%);color:#fff;padding-bottom:44px}
.st-hcap .st-in{width:100%}
.st-hcap small{display:block;font-size:14px;font-weight:700;color:var(--b);margin-bottom:8px}
.st-hcap h1{margin:0;font-size:32px;line-height:1.15;font-weight:700;letter-spacing:-.4px;max-width:560px}
.st-hcap h1 span{color:var(--b)}
.st-hcap p{margin:10px 0 0;font-size:15px;opacity:.88;max-width:460px}
.st-hcap .st-btn{margin-top:18px}
.st-hero-plain{height:280px}
.st-hero .dots{right:auto;left:50%;transform:translateX(-50%);bottom:14px}
.st-hero .dots i.on{background:var(--b)}
@media(min-width:900px){
  .st-hero{height:520px}
  .st-hcap{align-items:center;padding-bottom:0;background:linear-gradient(90deg,rgba(15,27,45,.92) 0%,rgba(15,27,45,.7) 35%,rgba(15,27,45,0) 70%)}
  .st-hcap h1{font-size:54px}
  .st-hcap p{font-size:17px}
}

/* ---------- service strip ---------- */
.st-svc{background:var(--nv);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.st-svc .st-in{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;padding-top:12px;padding-bottom:14px}
.st-svc .st-in>div{display:flex;align-items:center;gap:10px;padding:6px 0;min-width:0}
.st-svc i{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--b);color:var(--b);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.st-svc span{display:flex;flex-direction:column;min-width:0}
.st-svc b{font-size:13.5px;line-height:1.3}
.st-svc small{font-size:11.5px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:900px){.st-svc .st-in{grid-template-columns:repeat(4,1fr);padding-top:16px;padding-bottom:18px}}

/* ---------- sections ---------- */
.st-sec{max-width:var(--sw);margin:34px auto 0;padding:0 16px}
@media(min-width:900px){.st-sec{margin-top:52px;padding:0 24px}}
.st-sh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.st-sh h2{margin:0;font-size:21px;font-weight:700;letter-spacing:-.2px}
.st-sh p{margin:2px 0 0;font-size:13.5px;color:var(--m)}
.st-sh a{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:var(--t);white-space:nowrap}
.st-sh a:hover{color:var(--nv);text-decoration:underline;text-underline-offset:3px}
@media(min-width:900px){.st-sh h2{font-size:26px}}

/* categories */
.st-cats{display:flex;gap:12px;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none;scroll-snap-type:x mandatory}
.st-cats::-webkit-scrollbar{display:none}
.st-cat{flex:0 0 132px;background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--l);scroll-snap-align:start;transition:box-shadow .2s,border-color .2s}
.st-cat:hover{border-color:#d6d6cc;box-shadow:0 10px 24px -16px rgba(15,27,45,.35)}
.st-ci{aspect-ratio:5/4;background:var(--cr);display:flex;align-items:center;justify-content:center;color:var(--nv);overflow:hidden}
.st-ci img{width:100%;height:100%;object-fit:cover}
.st-cn{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 10px 11px 12px}
.st-cn span{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-cn i{width:24px;height:24px;border-radius:50%;background:var(--bl);color:var(--t);display:flex;align-items:center;justify-content:center;flex-shrink:0}
@media(min-width:900px){.st-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin:0;padding:0;overflow:visible;gap:16px}.st-cat{flex:none}}

/* promo pair */
.st-promos{display:grid;gap:14px}
@media(min-width:900px){.st-promos{grid-template-columns:1.7fr 1fr;gap:20px}}
.st-promo{position:relative;display:flex;border-radius:18px;overflow:hidden;min-height:200px}
.st-promo-a{background:var(--gr);color:#fff}
.st-promo-a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-promo-a:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,59,51,.95) 0%,rgba(15,59,51,.75) 40%,rgba(15,59,51,.1) 80%)}
.st-promo-a>div{position:relative;z-index:1;padding:24px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:70%}
.st-promo-a b{font-size:24px;line-height:1.2}
.st-promo-a p{margin:6px 0 14px;font-size:14px;opacity:.88}
.st-promo-b{background:var(--cr);color:var(--t);align-items:center;justify-content:space-between;padding:22px}
.st-promo-b:before{content:"";position:absolute;right:-40px;bottom:-40px;width:170px;height:170px;border-radius:50%;background:var(--b);opacity:.85}
.st-promo-b>div{position:relative;z-index:1}
.st-promo-b small{font-size:14px;font-weight:600;color:var(--m)}
.st-promo-b b{display:block;font-size:36px;line-height:1.1;font-weight:800;letter-spacing:-.5px}
.st-promo-b p{margin:4px 0 0;font-size:14px;color:var(--m)}
.st-promo-b img{position:relative;z-index:1;width:42%;max-width:170px;aspect-ratio:1/1;object-fit:cover;border-radius:16px;box-shadow:0 12px 24px -12px rgba(0,0,0,.35)}
@media(min-width:900px){.st-promo{min-height:260px}.st-promo-a b{font-size:32px}.st-promo-a>div{padding:34px}}

/* rails */
.st-railw{position:relative}
.st-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none}
.st-rail::-webkit-scrollbar{display:none}
.st-rail .pc{flex:0 0 calc(50% - 22px);scroll-snap-align:start}
@media(min-width:640px){.st-rail .pc{flex-basis:calc(33.33% - 18px)}}
@media(min-width:900px){.st-rail{margin:0;padding:2px 0 8px;gap:18px}.st-rail .pc{flex-basis:calc(25% - 14px)}}
@media(min-width:1200px){.st-rail .pc{flex-basis:calc(20% - 15px)}}
.st-arr{position:absolute;top:36%;z-index:3;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--t);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(15,27,45,.18)}
.st-arr.l{left:-6px}.st-arr.r{right:-6px}
.st-arr:hover{background:var(--b);color:var(--bt)}
.gd-railw.nofl .st-arr{display:none}
@media(max-width:899px){.st-arr{display:none}}

/* offer band */
.st-offer{display:grid;border-radius:20px;overflow:hidden;background:var(--gr);color:#fff;position:relative}
.st-offer-t{position:relative;z-index:1;padding:28px 22px}
.st-offer-t small{display:block;font-size:14px;font-weight:700;color:var(--b)}
.st-offer-t b{display:block;font-size:32px;line-height:1.15;margin:8px 0 6px;font-weight:800;letter-spacing:-.4px}
.st-offer-t b span{color:var(--b)}
.st-offer-t p{margin:0 0 16px;opacity:.85}
.st-offer-i{height:200px;position:relative}
.st-offer-i img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){.st-offer{grid-template-columns:1fr 1.1fr;min-height:320px}.st-offer-t{padding:44px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.st-offer-t b{font-size:48px}.st-offer-i{height:auto;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}}

/* tabs */
.st-tabs{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 14px;padding:0 16px;scrollbar-width:none}
.st-tabs::-webkit-scrollbar{display:none}
.st-tabs button{flex-shrink:0;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--l);background:#fff;font-weight:600;font-size:14px}
.st-tabs button:hover{border-color:#c9c9bf}
.st-tabs button.on{background:var(--nv);border-color:var(--nv);color:#fff}
@media(min-width:900px){.st-tabs{margin:0 0 18px;padding:0}}

/* ---------- product card ---------- */
.st-grid{gap:12px}
@media(min-width:640px){.st-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:900px){.st-grid{grid-template-columns:repeat(4,1fr);gap:18px}}
@media(min-width:1200px){.st-grid{grid-template-columns:repeat(5,1fr)}}
.st-pc{background:#fff;border-radius:var(--r);border:1px solid var(--l);box-shadow:none;transition:box-shadow .2s,border-color .2s}
.st-pc:hover{border-color:#d6d6cc;box-shadow:0 14px 30px -18px rgba(15,27,45,.35)}
.st-pc .pim{aspect-ratio:4/5;background:var(--cr);border-radius:var(--r) var(--r) 0 0}
.st-pc .pim img{transition:transform .35s}
.st-pc:hover .pim img{transform:scale(1.04)}
.st-off{position:absolute;top:10px;left:10px;background:var(--b);color:var(--bt);font-size:12px;font-weight:800;padding:3px 9px;border-radius:6px}
.st-so{position:absolute;left:10px;bottom:10px;background:#fff;color:#b42318;font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px}
.st-pc .fav{top:10px;right:10px;width:32px;height:32px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.st-pc .pb{padding:10px 12px 12px}
.st-pc .pn{font-size:14.5px;font-weight:600;height:38px}
.st-pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 8px;margin-top:6px}
.st-pr b{font-size:17px;font-weight:800;color:var(--t)}
.st-pr del{font-size:13px;color:#98a2b3}
.st-pr small{font-size:12px;color:var(--m)}
.st-add{margin-top:10px;height:38px;border-radius:10px;background:var(--nv);color:#fff;font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:6px;transition:background-color .15s}
.st-add:hover{background:#1f3350}
.st-add[disabled]{background:#eceae4;color:#7a7a72}

/* ---------- contact band ---------- */
.st-cta{margin-top:44px;background:var(--nv);color:#fff}
.st-cta .st-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:22px;padding-bottom:22px}
.st-cta i{width:52px;height:52px;border-radius:50%;background:var(--b);color:var(--bt);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.st-cta .st-in>div:not(.st-cta-b){flex:1;min-width:200px}
.st-cta b{display:block;font-size:18px}
.st-cta small{font-size:13.5px;opacity:.75}
.st-cta-b{display:flex;flex-wrap:wrap;gap:10px}
@media(min-width:900px){.st-cta{margin-top:60px}.st-cta .st-in{padding-top:28px;padding-bottom:28px}}

/* ---------- footer ---------- */
.st-foot{background:#0b1524;color:rgba(255,255,255,.82)}
.st-fin{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px;padding-top:34px;padding-bottom:26px}
.st-fa{grid-column:1/-1}
.st-foot .st-brand{color:#fff}
.st-fa p{margin:10px 0 0;font-size:14px;max-width:320px;opacity:.8}
.st-soc{display:flex;gap:10px;margin-top:14px}
.st-soc a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff}
.st-soc a:hover{border-color:var(--b);color:var(--b)}
.st-fc h4{margin:0 0 10px;color:#fff;font-size:14px;font-weight:700}
.st-fc a,.st-fc span{display:block;font-size:14px;padding:4px 0;opacity:.8}
.st-fc a:hover{opacity:1;color:var(--b)}
.st-pay{font-size:13px!important;opacity:.65!important}
.st-copy{border-top:1px solid rgba(255,255,255,.08);font-size:13px;opacity:.7}
.st-copy .st-in{padding-top:14px;padding-bottom:14px}
@media(min-width:900px){.st-fin{grid-template-columns:1.6fr 1fr 1fr 1.2fr;padding-top:48px;padding-bottom:34px}.st-fa{grid-column:auto}}

/* ---------- inner pages ---------- */
#app>.sec,#app>.chips{max-width:var(--sw);margin-left:auto;margin-right:auto}
.chip.on{background:var(--nv);border-color:var(--nv)}
.card{border:1px solid var(--l);box-shadow:none}
.btn{border-radius:999px;background:var(--nv)}
.btn.ol{background:#fff;border:1.5px solid var(--nv);color:var(--nv)}
.catgrid .cat{border:1px solid var(--l);box-shadow:none}
.catgrid .cat .ci{background:var(--cr);color:var(--nv)}
@media(min-width:900px){#app>.sec{padding:0 10px}.sheet{max-width:640px;border-radius:22px;margin-bottom:4vh}.ov{align-items:center}}

/* ---------- bottom nav: phones only ---------- */
.bnav{max-width:none;border-top:1px solid var(--l)}
.bnav a.on{color:var(--t)}
.bnav a.on svg{color:var(--t)}
@media(min-width:900px){.bnav{display:none}#app{padding-bottom:0!important}.toast{bottom:40px}}