/* =========================================================
   Premium Lingerie UI — Inspired by Ann Summers / Victoria’s Secret
   ========================================================= */

/* -------- Tokens -------- */
:root{
  --bg: #0B0A0C;
  --bg-soft: #141218;
  --surface: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);
  --text: #F7F6FA;
  --muted: #BDB6C9;
  --brand: #D81B60; /* VS pink deep */
  --brand-2: #FF6FA3;
  --brand-ink: #fff;
  --ring: 3px;
  --ring-color: color-mix(in oklab, var(--brand), white 35%);
  --radius: 18px;
  --shadow-1: 0 10px 30px -15px rgba(0,0,0,.55);
}

html[data-theme="light"]{
  --bg: #FAF7FA;
  --bg-soft: #FFFFFF;
  --surface: rgba(0,0,0,.06);
  --stroke: rgba(0,0,0,.10);
  --text: #181019;
  --muted: #5C4F5D;
  --brand: #C2185B;
  --brand-2: #FF7AA2;
  --brand-ink: #fff;
}

/* -------- Reset / Base -------- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }

.container{ max-width: 1320px; margin-inline:auto; padding-inline: 24px; }
.section{ padding: 48px 0; }
.section-title{ font: 700 clamp(20px, 2.5vw, 28px) /1.2 'Inter', sans-serif; margin: 0 0 14px 4px; }

/* -------- Announcement -------- */
.announce{ background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:var(--brand-ink); font-weight:600; }
.announce .container{ padding: 10px 24px; text-align:center; }

/* -------- Header -------- */
.site-header.sticky{ position: sticky; top:0; z-index:60; backdrop-filter: blur(10px) saturate(140%); background: color-mix(in oklab, var(--bg), transparent 25%); border-bottom:1px solid var(--stroke); }
.head-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 14px 0; }
.brand{ font: 700 22px/1 'Playfair Display', serif; letter-spacing:.2px; }
.brand span{ color: var(--brand-2); }
.nav.main{ display:flex; gap:8px; }
.nav.main a{ padding:10px 14px; border-radius:999px; transition: background .2s ease; }
.nav.main a:hover{ background: var(--surface); }
.header-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; border:1px solid var(--stroke); background: var(--bg-soft); }
.icon-btn.tiny{ width:28px; height:28px; font-size:14px; }
.icon-btn.ghost{ background: transparent; }

/* ---------- Header mobile fix ---------- */

html, body {
  overflow-x: hidden;
}

.site-header.sticky {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(10px) saturate(140%);
  background: color-mix(in oklab, var(--bg), transparent 25%);
  border-bottom: 1px solid var(--stroke);
  overflow: hidden; /* Prevents internal overflow from flex items */
}

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px; /* slightly reduced gap for small screens */
  padding: 10px 0;
  flex-wrap: nowrap;
}

@media (max-width: 480px) {
  .head-row {
    padding-inline: 12px;
  }
  .brand {
    font-size: 20px;
  }
  .nav.main {
    display: none; /* hides main nav links on very small devices */
  }
  .header-actions {
    gap: 4px;
  }
  .icon-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
}


/* Utility tags */
.pill{ display:inline-flex; min-width:18px; height:18px; padding:0 6px; align-items:center; justify-content:center; border-radius:999px; background:var(--brand); color:var(--brand-ink); font-weight:700; margin-left:6px; font-size:12px; }

/* -------- Hero -------- */
.hero.immersive{ position:relative; height: 88vh; min-height:520px; display:grid; place-items:center; isolation:isolate; color: var(--brand-ink); }
.hero.immersive .hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter: brightness(.55); z-index:-1; }
.hero .hero-content{ text-align:center; }
.hero h1{ font: 700 clamp(48px, 9vw, 96px)/1 'Playfair Display', serif; margin:0; }
.hero .accent{ background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p{ font-size: clamp(16px, 2.3vw, 22px); opacity:.92; margin: 16px auto 0; max-width: 780px; }
.hero .hero-cta{ margin-top:24px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* -------- Buttons -------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 18px; border-radius: 14px; border:1px solid transparent; background: var(--brand); color: var(--brand-ink); font-weight:700; box-shadow: var(--shadow-1); cursor:pointer; }
.btn.ghost{ background: transparent; color: var(--text); border-color: var(--stroke); box-shadow:none; }
.btn.tiny{ padding:8px 10px; font-size: 13px; }
.btn.small{ padding:8px 12px; font-size: 14px; }
.btn.xl{ padding: 14px 22px; font-size: 18px; width:100%; }
.btn:focus{ outline:none; box-shadow: 0 0 0 var(--ring) var(--ring-color); }
.btn:disabled{ opacity:.65; cursor:not-allowed; }

.link{ color:inherit; text-decoration: underline; text-underline-offset: 3px; }
.link.danger{ color:#ff8b9b; }

/* -------- Category tiles -------- */
.cat-tiles{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:18px; }
.tile{ position:relative; isolation:isolate; border-radius: var(--radius); overflow:hidden; aspect-ratio: 16 / 10; background: linear-gradient(135deg, color-mix(in oklab, var(--brand), transparent 70%), transparent 70%); border:1px solid var(--stroke); }
.tile-bg{ position:absolute; inset:0; background: radial-gradient(800px 400px at 90% 0%, color-mix(in oklab, var(--brand-2), transparent 70%), transparent 70%); filter: saturate(120%); z-index:-1; }
.tile-content{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:16px; gap:6px; color:#fff; text-shadow:0 8px 32px rgba(0,0,0,.35); }
.tile h3{ margin:0; font: 700 20px/1.1 'Inter', sans-serif; }
.tile .link{ font-weight:600; opacity:.9; border-bottom: 1px solid rgba(255,255,255,.6); }

/* -------- Product grid -------- */
.grid.products{ display:grid; gap:22px; grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) ); }
.card.product{ background: var(--bg-soft); border:1px solid var(--stroke); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-1); transform: translateZ(0); }
.card .media{ position:relative; display:block; }
.card .thumb{ width:100%; aspect-ratio: 4/5; object-fit: cover; }
.card .thumb.secondary{ position:absolute; inset:0; opacity:0; transform: scale(1.04); transition: opacity .25s ease, transform .25s ease; }
.card.product:hover .thumb.secondary{ opacity:1; transform: scale(1.0); }
.card .badge{ position:absolute; top:10px; left:10px; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; color:#fff; }
.badge.sale{ background: #d23c69; } .badge.best{ background:#4caf7a; }
.card .overlay{ position:absolute; inset:auto 10px 10px 10px; display:flex; justify-content:center; opacity:0; transform: translateY(6px); transition: .2s ease; }
.card.product:hover .overlay{ opacity:1; transform: translateY(0); }

.card .info{ padding:12px 14px 16px; }
.card .title{ font-weight:600; display:block; }
.card .meta{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.price{ font-weight:800; }
.was{ text-decoration: line-through; }

.quick-add{ display:flex; gap:8px; margin-top:10px; }


input:focus, select:focus, textarea:focus{ border-color: color-mix(in oklab, var(--brand), white 25%); box-shadow:0 0 0 var(--ring) var(--ring-color); }
label{ display:block; font-weight:600; margin:8px 0 6px; color:var(--text); }

/* -------- Tables (legacy cart) -------- */
.table-wrap{ overflow:auto; border:1px solid var(--stroke); border-radius: var(--radius); background: var(--bg-soft); }
.table{ width:100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td{ padding:12px; border-bottom:1px solid var(--stroke); }
.table thead th{ text-align:left; font-weight:700; background: color-mix(in oklab, var(--bg), white 5%); position:sticky; top:0; z-index:1; }

/* -------- Footer -------- */
.site-footer{ margin-top:64px; padding: 40px 0; border-top:1px solid var(--stroke); background: var(--bg-soft); }
.foot-cols{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:22px; }
.newsletter{ display:flex; gap:8px; }
.newsletter input{ flex:1; }

/* -------- Utilities -------- */
.surface { background: var(--bg-soft); border: 1px solid var(--stroke); border-radius: var(--radius); }
.muted{ color: var(--muted); }
.small{ font-size: 14px; }
.tiny{ font-size: 12px; }
.line-clamp{ display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.flash-wrap{ display:grid; gap:10px; padding: 12px 0; }
.flash{ padding:12px 14px; border-radius:12px; background: var(--surface); border:1px solid var(--stroke); }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); background: var(--bg-soft); }
.chip.small{ padding:4px 8px; font-size:12px; }
.sep{ opacity:.5; margin: 0 6px; }

/* -------- Scroll reveal -------- */
.reveal{ opacity:0; transform: translateY(12px); transition: .4s ease; }
.reveal.is-in{ opacity:1; transform: none; }

/* =========================================================
   PDP (Product Detail Page)
   ========================================================= */
.product-wide .site-header.sticky { backdrop-filter: blur(12px) saturate(150%); }

/* Layout */
.pd-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: clamp(16px, 2vw, 22px);
}
@media (min-width: 960px){
  .pd-layout{
    grid-template-columns: minmax(460px, 1fr) minmax(380px, 520px);
    gap: 36px;
    align-items:start;
  }
}
.pd-left{ position: relative; }
@media (min-width: 960px){
  .pd-left{ position: sticky; top: 90px; align-self: start; }
}
.pd-right{ padding: 6px 4px; }

.pd-title{
  font: 700 clamp(22px, 3vw, 34px)/1.2 'Playfair Display', serif;
  margin: 0 0 8px;
}

/* Price row */
.price-row{
  display:flex; align-items:center; gap:12px; margin: 2px 0 16px;
}
.price-row .price{ font-weight: 900; font-size: clamp(18px, 2.4vw, 24px); }
.price-row .was{ opacity: .7; }
.price-row .badge.saving{
  background: #296f52; color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 999px;
}

/* Description */
.pd-desc{ margin: 8px 0 18px; }

/* Gallery */
.pd-gallery{ width: 100%; }
.pd-gallery.single .pd-thumbs-swiper{ display:none; }

.pd-main{
  position: relative;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--bg-soft), black 4%);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
}
.pd-main img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover zoom via background */
.pd-main.zoomable{
  background-size: calc(100% * var(--zoom));
  background-position: 50% 50%;
  transition: background-size .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pd-main.zoomable.is-zooming{
  cursor: zoom-in;
  box-shadow: 0 16px 50px -20px rgba(0,0,0,.55);
}

/* Thumbs */
.pd-thumbs-swiper{ margin-top: 10px; }
.pd-thumbs-swiper .swiper-slide{
  width: 80px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  opacity: .9;
  transition: transform .15s ease, opacity .15s ease, border-color .15s ease;
}
.pd-thumbs-swiper .swiper-slide img{
  width: 100%; height: 100%; object-fit: cover;
}
.pd-thumbs-swiper .swiper-slide-thumb-active,
.pd-thumbs-swiper .swiper-slide:hover{
  opacity: 1;
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--brand), white 25%);
}

/* Nav arrows */
.pd-nav{
  position: absolute;
  inset: calc(50% - 22px) auto auto;
  z-index: 5;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--bg), white 6%);
  box-shadow: var(--shadow-1);
}
.pd-nav.prev { left: 10px; }
.pd-nav.next { right: 10px; }
.pd-nav::before{
  content: '';
  display:block;
  width: 10px; height: 10px;
  border-right: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  position: absolute; top: 50%; left: 50%;
  transform: translate(-40%, -50%) rotate(135deg);
}
.pd-nav.next::before{ transform: translate(-60%, -50%) rotate(-45deg); }

/* Buy box */
.buybox{
  margin-top: 8px;
  display: grid;
  gap: 16px;
  background: color-mix(in oklab, var(--bg-soft), white 2%);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 14px;
}
.variant-group{ display:grid; gap:10px; }
.label{ font-weight: 700; letter-spacing:.2px; }

.segmented{ display:flex; flex-wrap:wrap; gap:8px; }
.seg-btn{ position: relative; isolation: isolate; }
.seg-btn input{ position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.seg-btn span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 48px; padding: 10px 14px; border-radius: 12px;
  border:1px solid var(--stroke);
  background: var(--bg-soft);
  font-weight: 700;
  transition: border-color .2s ease, box-shadow .2s ease, transform .06s ease;
}
.seg-btn:hover span{ transform: translateY(-1px); }
.seg-btn input:checked + span{
  border-color: color-mix(in oklab, var(--brand), white 25%);
  box-shadow: 0 0 0 var(--ring) var(--ring-color) inset;
}

/* Qty (PDP) */
.qty-wrap .qty{ display:inline-flex; align-items:center; gap:8px; }
.qty-input{
  width: 64px; text-align:center; font-weight:700;
  background: var(--bg-soft); color: var(--text);
  border:1px solid var(--stroke); border-radius: 10px; padding: 8px 10px;
}
.qty-btn{
  width: 36px; height: 36px; border-radius: 10px;
  border:1px solid var(--stroke); background: var(--bg-soft);
  display:inline-grid; place-items:center; font-size:20px; line-height:1;
}

/* Actions */
.buy-actions{ display:flex; gap:10px; flex-wrap: wrap; }
.buy-actions .btn.xl{ min-width: 210px; }

/* Perks */
.pd-perks{ display:grid; gap:6px; margin: 8px 0 0 0; padding-left: 18px; }

/* Recently viewed pill row */
.pd-rv{ margin-top: 16px; display:flex; gap:8px; flex-wrap:wrap; }
.pd-rv .mini{
  padding: 6px 10px;
  border:1px solid var(--stroke);
  border-radius: 999px;
  background: var(--bg-soft);
  font-size: 13px;
}

/* Light theme tweaks for PDP */
html[data-theme="light"] .pd-main { background: #fafafa; }
html[data-theme="light"] .pd-nav { background: #fff; }

/* =========================================================
   CART 2.0
   ========================================================= */

.empty-cart{ padding: 24px; text-align:center; }

.cart-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 980px){
  .cart-grid{
    grid-template-columns: 1fr minmax(320px, 420px);
    align-items:start;
  }
}

.cart-items{ display:grid; gap:14px; }

.cart-item{
  display:grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 12px;
  box-shadow: var(--shadow-1);
}
.ci-thumb{
  width:96px; height:120px; border-radius: 12px; overflow:hidden;
  border:1px solid var(--stroke); background:#0003; flex-shrink:0;
}
.ci-thumb img{ width:100%; height:100%; object-fit: cover; }

.ci-main{ display:flex; flex-direction:column; gap:10px; }
.ci-top{ display:flex; align-items:start; gap:10px; justify-content:space-between; }
.ci-title{ font-weight:700; line-height:1.25; }

.ci-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }

.ci-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.qty-control{
  display:inline-flex; align-items:center; gap:8px;
  background: color-mix(in oklab, var(--bg-soft), white 2%);
  border:1px solid var(--stroke);
  border-radius: 12px;
  padding: 6px;
}
.qty-control .qty-input{
  width: 64px; height: 36px; border-radius:10px;
}

.ci-prices{
  display:grid; gap:2px; text-align:right; min-width: 160px;
}
.ci-price{ font-weight:700; opacity:.9; }
.ci-line-total{ font-weight:900; font-size: 18px; }

.ci-remove{ border-color: transparent; }

.cart-actions-left{
  display:flex; gap:10px; flex-wrap:wrap; padding: 2px; margin-top: 4px;
}

/* Summary */
.cart-summary{
  position: relative;
  padding: 16px;
  box-shadow: var(--shadow-1);
}
@media (min-width: 980px){
  .cart-summary{
    position: sticky; top: 90px;
  }
}
.summary-head{ margin-bottom:8px; }
.summary-title{ font-weight:800; letter-spacing:.3px; }

.summary-rows{ display:grid; gap:10px; padding: 6px 0 12px; border-bottom:1px solid var(--stroke); }
.s-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.s-row .strong{ font-weight:900; }

.summary-cta{ margin: 14px 0 8px; }
.trust-copy{ text-align:center; margin:8px 0 0; opacity:.8; }

.summary-secondary{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ci-line-total, .ci-price {
  font-variant-numeric: tabular-nums;
}
.qty-input {
  caret-color: var(--text);
}

/* =========================================================
   CHECKOUT (NEW)
   ========================================================= */

.checkout .checkout-steps{
  margin-bottom: 16px;
  padding: 10px 14px;
}

.steps{
  list-style:none; margin:0; padding:0;
  display:flex; gap:18px; align-items:center; justify-content:center;
}
.step{
  display:flex; align-items:center; gap:8px; position:relative; color: var(--muted);
  font-weight:700;
}
.step .dot{
  width:12px; height:12px; border-radius:999px; border:2px solid var(--stroke);
  display:inline-block; background:transparent;
}
.step.done .dot{ background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-color: transparent; }
.step.active{ color: var(--text); }
.step.active .dot{ border-color: color-mix(in oklab, var(--brand), white 25%); }

.checkout-grid{
  display:grid; gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 980px){
  .checkout-grid{
    grid-template-columns: minmax(520px, 1fr) minmax(320px, 420px);
    align-items:start;
  }
}

.checkout-card{ padding: 16px; box-shadow: var(--shadow-1); }
.checkout-summary{ padding: 16px; position: sticky; top: 90px; }

.card-title{
  margin: 0 0 8px;
  font: 700 20px/1.2 'Inter', sans-serif;
}

.addr-grid{
  display:grid; gap:12px;
  grid-template-columns: 1fr;
  margin-top: 8px;
}
.addr-grid .span-2{ grid-column: 1 / -1; }
@media (min-width: 640px){
  .addr-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

.radio-cards{
  display:grid; gap:10px; margin: 10px 0 6px;
}
.rc-input{ position:absolute; opacity:0; pointer-events:none; }
.rcard{
  display:block; padding:12px; border:1px solid var(--stroke); border-radius: 14px;
  background: color-mix(in oklab, var(--bg-soft), white 2%);
  transition: border-color .2s ease, box-shadow .2s ease, transform .06s ease, background .2s ease;
  cursor:pointer;
}
.rcard:hover{ transform: translateY(-1px); }
.rc-input:checked + .rcard{
  border-color: color-mix(in oklab, var(--brand), white 25%);
  box-shadow: 0 0 0 var(--ring) var(--ring-color) inset;
  background: color-mix(in oklab, var(--bg-soft), white 4%);
}
.rc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rc-title{ font-weight:800; }
.rc-price{ font-weight:900; }
.rc-note{ margin:6px 0 0; color: var(--muted); font-size: 14px; }

.checkout-secure{
  display:flex; align-items:center; gap:10px;
  margin-top: 6px; padding: 10px 12px;
  border:1px dashed var(--stroke); border-radius: 12px;
  background: color-mix(in oklab, var(--bg-soft), white 1%);
}
.checkout-secure .lock{
  width:18px; height:18px; border:2px solid var(--text); border-radius:4px; position:relative;
}
.checkout-secure .lock::before{
  content:''; position:absolute; width:12px; height:10px; border:2px solid var(--text);
  border-bottom:0; left:50%; transform:translateX(-50%); top:-9px; border-radius:8px 8px 0 0;
}
.secure-title{ font-weight:800; font-size:14px; }
.secure-note{ font-size:13px; color:var(--muted); }

/* Summary bits */
.summary-title{ margin:0 0 8px; font-weight:800; letter-spacing:.3px; }
.summary-rows{ display:grid; gap:10px; padding: 6px 0 12px; border-bottom:1px solid var(--stroke); }
.summary-perks{ display:grid; gap:8px; padding: 12px 0; }
.perk{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); }
.perk-ico{ width:16px; height:16px; display:inline-block; border:2px solid var(--muted); border-radius:4px; opacity:.9; position:relative; }
.ico-box::after{ content:''; position:absolute; width:10px; height:2px; background:var(--muted); top:-4px; left:2px; border-radius:2px; }
.ico-return{ border-radius:999px; }
.ico-shield{ border-radius:4px; clip-path: polygon(50% 0, 95% 20%, 95% 65%, 50% 100%, 5% 65%, 5% 20%); }

.payments-row{ display:flex; gap:8px; align-items:center; padding-top:10px; border-top:1px solid var(--stroke); }
.pay-ico{ width:38px; height:24px; border-radius:6px; border:1px solid var(--stroke); background: #1114; display:inline-block; position:relative; overflow:hidden; }
.pi-visa::after{ content:''; position:absolute; inset:0; background: linear-gradient(90deg, #1a1f, #335); mix-blend-mode: screen; }
.pi-mc::after{ content:''; position:absolute; width:18px; height:18px; border-radius:999px; background:#E31B23; left:7px; top:3px; box-shadow: 14px 0 0 0 #F79E1B; opacity:.8; }
.pi-amex::after{ content:'AM'; font-weight:900; font-size:12px; position:absolute; left:6px; top:4px; opacity:.8; }
.pi-apple::after{ content:''; font-size:16px; position:absolute; left:12px; top:2px; opacity:.85; }
.pi-gpay::after{ content:'G'; font-weight:900; position:absolute; left:12px; top:2px; opacity:.85; }

/* Make the main CTA feel special on checkout */
.checkout .btn.xl{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border: 0;
}
.checkout .btn.xl:hover{
  filter: brightness(1.06);
}
/* Nicer inputs (works for input/select/textarea) */
input[type=text], input[type=email], input[type=password],
input[type=tel], input[type=number], select, textarea{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) border-box;
  border: 1px solid color-mix(in oklab, var(--stroke), white 10%);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 6px 18px -12px rgba(0,0,0,.6);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .06s ease;
}

input:hover, select:hover, textarea:hover{
  border-color: color-mix(in oklab, var(--stroke), white 25%);
}

input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: color-mix(in oklab, var(--brand), white 35%);
  box-shadow:
    0 0 0 var(--ring) color-mix(in oklab, var(--brand), white 35%),
    0 10px 28px -16px rgba(0,0,0,.75);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)) border-box;
}

select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* Hide the payment icon row on checkout summary */
.checkout .payments-row{ display:none !important; }
/* ---------- Premium input look ---------- */
:root{
  --input-h: 62px;        /* up from 56 */
  --input-pad-t: 26px;    /* up from 22 so the label floats nicely */
  --input-pad-x: 18px;    /* a smidge wider */
}
.ux-input{ font-size: 17px; }
/* opt-in on .form .field via JS */
.ux-field{
  position: relative;
  margin-bottom: 12px;
}
.ux-field .label{
  position: absolute;
  left: calc(var(--input-pad-x) - 2px);
  top: 12px;
  z-index: 1;
  padding: 0 6px;
  border-radius: 8px;
  pointer-events: none;
  color: color-mix(in oklab, var(--muted), white 10%);
  background:
    linear-gradient(var(--bg) 0 0) padding-box; /* keeps label legible */
  transform-origin: top left;
  transition: transform .18s ease, color .18s ease, opacity .18s ease, top .18s ease;
}

/* Base control */
.ux-input{
  width: 100%;
  height: var(--input-h);
  padding: var(--input-pad-t) var(--input-pad-x) 12px var(--input-pad-x);
  border-radius: var(--input-r);
  border: 1px solid color-mix(in oklab, var(--stroke), white 12%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) border-box;
  color: var(--text);
  font-size: 16.5px;
  line-height: 1.35;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 26px -20px rgba(0,0,0,.7);
  transition: border-color .18s ease, box-shadow .18s ease, transform .06s ease, background .18s ease;
}
.ux-input:hover{
  border-color: color-mix(in oklab, var(--stroke), white 28%);
}
.ux-field.is-focus .ux-input{
  border-color: color-mix(in oklab, var(--brand), white 35%);
  box-shadow:
    0 0 0 var(--ring) color-mix(in oklab, var(--brand), white 35%),
    0 18px 40px -24px rgba(0,0,0,.85);
  transform: translateY(-1px);
}

/* Floating label states */
.ux-field.is-focus .label,
.ux-field.is-filled .label{
  top: -8px;
  transform: translateY(0) scale(.88);
  color: color-mix(in oklab, var(--brand), white 25%);
  opacity: .95;
}

/* Placeholder tint (if you use them) */
.ux-input::placeholder{
  color: color-mix(in oklab, var(--muted), white 8%);
  opacity: .75;
}

/* Select — keep native but tidy chevron */
.ux-field select.ux-input{
  appearance: none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 26px) calc(50% - 4px),
    calc(100% - 18px) calc(50% - 4px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}

/* Valid / invalid feedback (HTML5) */
.ux-input:invalid:not(:focus){ border-color: #ff7a90; }
.ux-input:valid:not(:placeholder-shown){ border-color: #5ad6a0; }

/* Bigger look on small screens (tappable) */
@media (max-width: 520px){
  :root{ --input-h: 60px; --input-pad-t: 24px; }
}

/* Light theme tweaks */
html[data-theme="light"] .ux-input{
  background:
    linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0)) padding-box,
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.04)) border-box;
}



/* --- Uniform product imagery --- */
.card.product .media {
  position: relative;
  overflow: hidden;
}
.card.product img.thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: opacity .25s ease;
  display: block;
  background: transparent;
}
.card.product img.thumb.secondary {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .25s ease, transform .25s ease;
}
.card.product:hover img.thumb.secondary {
  opacity: 1;
  transform: scale(1.0);
}
.card.product:hover img.thumb.primary {
  opacity: 0;
}

/* Product detail page main gallery */
.product-detail .main-image img,
.product-detail .gallery img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  background: #fff;
}

/* ---------- Homepage carousel redesign ---------- */

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.product-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: none; /* Firefox */
}
.product-carousel::-webkit-scrollbar { display: none; }

.product-carousel .card.product {
  flex: 0 0 72%;
  max-width: 72%;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .product-carousel .card.product {
    flex: 0 0 45%;
    max-width: 45%;
  }
}
@media (min-width: 960px) {
  .product-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    overflow: visible;
  }
  .product-carousel .card.product {
    flex: none;
    max-width: 100%;
  }
}

.product-carousel .card.product {
  position: relative;
  overflow: visible; /* allows the absolute secondary image */
}

.card.product .media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.08), transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
}
.card.product:hover .media::after {
  opacity: 1;
}


/* Hero responsiveness */
.hero.immersive {
  height: 75vh;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}
.hero h1 {
  font-size: clamp(36px, 10vw, 72px);
}
.hero p {
  font-size: clamp(15px, 4vw, 20px);
  margin-top: 12px;
}
.hero .hero-cta .btn {
  flex: 1 1 auto;
  min-width: 140px;
}
/* ---------- Product Page Redesign ---------- */

/* Remove zoom feature completely */
.pd-main.no-zoom {
  cursor: default;
  background: var(--bg-soft);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.pd-main.no-zoom img {
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #fff;
}

/* Make layout mobile-first */
.pd-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 960px) {
  .pd-layout {
    display: grid;
    grid-template-columns: minmax(400px, 1fr) minmax(320px, 460px);
    gap: 40px;
    align-items: start;
  }
}

/* Title & description spacing */
.pd-title {
  font-size: clamp(22px, 5vw, 32px);
  margin-bottom: 10px;
}

.pd-desc {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 20px;
}

/* Buy box refinement */
.buybox {
  margin-top: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-1);
}
.buy-actions .btn.xl {
  width: 100%;
  font-size: 16px;
  text-transform: uppercase;
}

/* Mobile spacing tweaks */
@media (max-width: 600px) {
  .pd-left {
    order: -1; /* image first */
  }
  .pd-main.no-zoom {
    border-radius: 14px;
  }
}

/* Hide “related tags” or extras under add to cart if any */
.pd-rv, .tag-row, .related-products {
  display: none !important;
}


/* === Polished icon buttons === */
.icon-btn .ico{ width: 20px; height: 20px; display:inline-block; }
#themeToggle .ico-sun{ display:none; }
html[data-theme="light"] #themeToggle .ico-sun{ display:inline-block; }
html[data-theme="light"] #themeToggle .ico-moon{ display:none; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  border:1px solid var(--stroke); background: var(--bg-soft);
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
.icon-btn:hover{ transform: translateY(-1px); border-color: color-mix(in oklab, var(--stroke), white 25%); }
.icon-btn .pill{ margin-left: 6px; }

/* === Hover-swap fix (unified) === */
.card.product .media{ position: relative; overflow: hidden; }
.card.product img.thumb{
  width:100%; aspect-ratio: 4 / 5; object-fit: cover; background: transparent;
  transition: opacity .25s ease;
}
.card.product img.thumb.secondary{
  position:absolute; inset:0; opacity:0; transform: scale(1.04);
  transition: opacity .25s ease, transform .25s ease;
}
.card.product:hover img.thumb.secondary{ opacity:1; transform: scale(1.0); }
.card.product:hover img.thumb.primary{ opacity:0; }

/* Ensure hover image isn't clipped in carousel */
.product-carousel .card.product{ position: relative; overflow: visible; }

/* Header mobile overflow guard */
@media (max-width: 480px){
  .head-row{ padding-inline: 12px; gap:8px; }
  .icon-btn{ width:36px; height:36px; border-radius:10px; }
  .nav.main{ display:none; } /* hide row links on very small screens */
}



/* Fix duplicate gallery arrows: keep custom .pd-nav arrows, hide Swiper's defaults */
.swiper-button-next::after, .swiper-button-prev::after { content: none !important; }



/* Mobile improvements */
@media (max-width: 640px){
  .container { padding-left: 12px; padding-right: 12px; }
  .site-header .nav { gap: 8px; }
  .pd-layout { display:block; }
  .pd-left { margin-bottom: 16px; }
  .grid { grid-template-columns: 1fr !important; }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px; }
  .buybox .qty-row { flex-direction: column; gap: 8px; align-items: stretch; }
  .site-footer .foot { grid-template-columns: 1fr !important; gap: 16px; }
}
/* Slightly larger breakpoint for product grid */
@media (max-width: 480px){
  .product-grid { grid-template-columns: 1fr !important; }
}



/* Footer mobile slimming */
@media (max-width: 640px){
  .site-footer .foot{ display:grid; grid-template-columns: 1fr; gap: 10px; }
  .site-footer .foot section{ margin: 0; padding: 0; }
  .site-footer .brand.small{ font-size: 16px; }
  .site-footer h4{ font-size: 14px; margin-bottom: 6px; }
  .site-footer .foot a{ display:block; padding: 4px 0; }
  .site-footer .legal{ margin-top: 8px; font-size: 12px; text-align:center; }
  .site-footer{ padding-top: 16px; padding-bottom: 16px; }
}



/* Nav icon contrast */
.site-header .nav, .site-header .nav a, .site-header .nav svg{
  color: var(--text);
  fill: currentColor;
  stroke: currentColor;
}
html[data-theme="dark"] .site-header .nav a{ color: #fff; }



/* Auth pages */
.auth-wrap{ display:flex; justify-content:center; }
.auth-card{ max-width: 420px; margin: 0 auto; padding: 24px; border-radius: 16px; }
.auth-title{ margin: 0 0 6px 0; font-size: 24px; font-weight: 700; }
.auth-form label{ display:block; font-weight:600; margin: 10px 0 4px; }
.auth-form input{ width:100%; height:44px; border:1px solid var(--stroke); border-radius:10px; padding:0 12px; background: var(--card); color: var(--text); }
.auth-form .btn{ margin-top: 12px; }
.muted.small{ font-size: 13px; margin-top: 10px; }



/* === Dark theme: make header icon buttons white for contrast === */
html[data-theme="dark"] .icon-btn{
  background: #ffffff;
  border-color: rgba(255,255,255,0.5);
}
html[data-theme="dark"] .icon-btn .ico,
html[data-theme="dark"] .icon-btn svg{
  color: #111111;
  fill: currentColor;
  stroke: currentColor;
}


/* Newsletter modal */
.modal{ position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.5); z-index: 2000; }
.modal[hidden]{ display: none; }
.modal-dialog{ width: min(520px, 92vw); background: var(--bg-soft); border:1px solid var(--stroke); border-radius: 16px; padding: 22px; color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.modal-dialog h3{ margin: 0 0 6px; font-weight: 800; }
.modal-close{ position:absolute; right: max(4vw, 16px); top: max(4vh, 16px); background: #fff; border:none; width:38px; height:38px; border-radius: 50%; font-size: 22px; cursor: pointer; }
html[data-theme="light"] .modal-dialog{ background: #fff; color:#111; }

/* Size button base */
.seg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-width: 46px;
  height: 44px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  margin: 2px;
  font-weight: 500;
  transition: 0.2s;
}

/* When sold out */
.seg-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(180,180,180,0.1);
}

/* Add a faint cross overlay */
.seg-btn.disabled .size-cross {
  position: absolute;
  font-size: 22px;
  line-height: 1;
  color: rgba(90,90,90,0.7);
  pointer-events: none;
}

/* Ensure hidden radio inputs don’t mess layout */
.seg-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
}


/* ---------- Redesigned Footer ---------- */
.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--stroke);
  margin-top: 64px;
  padding: 48px 0 24px;
  color: var(--text);
}

.foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.site-footer h4 {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
  color: var(--brand-2);
}

.site-footer a {
  display: block;
  margin: 4px 0;
  color: var(--muted);
  transition: color .2s ease;
}
.site-footer a:hover {
  color: var(--brand);
}

.foot-brand p {
  margin: 4px 0;
}

.ig-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-2);
  font-weight: 600;
  margin-top: 6px;
  text-decoration: none;
}
.ig-link:hover {
  color: var(--brand);
}
.ig-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* Footer legal line */
.legal {
  text-align: center;
  font-size: 13px;
  margin-top: 36px;
  opacity: .75;
}

/* Responsive: single-column on mobile */
@media (max-width: 640px) {
  .foot-cols {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
  .ig-link {
    justify-content: center;
  }
}
/* Unify social icon sizes & alignment */
.social-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-block;
  fill: currentColor;
  stroke: none;
  vertical-align: middle;
  transition: transform 0.25s ease, color 0.25s ease;
}

/* Force uniform box alignment for icons with uneven internal viewBox space */
.ig-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
}

.ig-link:hover {
  color: var(--brand);
}

.ig-link .social-icon {
  width: 18px;
  height: 18px;
}

.ig-link svg {
  aspect-ratio: 1 / 1;
  align-self: center;
  transform: translateY(1px);
}

/* Slight scale correction for TikTok icon (its glyph sits smaller in its viewBox) */
.ig-link[aria-label="TikTok"] .social-icon {
  transform: scale(1.25) translateY(1px);
  transform-origin: center;
}

/* ---------- Top Utility Bar ---------- */
.topbar {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  padding: 6px 0;
  z-index: 60;
}

.topbar a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.topbar a:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.topbar-left {
  flex: 1;
  text-align: center;
}

.newsletter-link {
  cursor: pointer;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.topbar-right .divider {
  opacity: 0.6;
}

@media (max-width: 640px) {
  .topbar {
    font-size: 13px;
    text-align: center;
  }
  .topbar-inner {
    flex-direction: column;
    gap: 4px;
  }
  .topbar-right {
    gap: 6px;
  }
}
/* ---------- Cart Icon Badge Fix ---------- */
.cart-btn {
  position: relative;
}

.cart-btn .pill {
  position: absolute;
  top: 2px;
  right: 3px;
  transform: translate(40%, -40%);
  min-width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  background: var(--brand-2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bg-soft); /* keeps clean outline */
}

/* Prevent layout shift */
.header-actions .icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* --- Enhanced flash messages --- */
  /* --- Floating Toast Notifications --- */
  .toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 2000;
  }
  .toast {
    padding: 14px 18px;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 10px 25px -8px rgba(0,0,0,.4);
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    animation: toast-in 0.3s ease forwards;
  }
  .toast.info { background: linear-gradient(90deg,#3b82f6,#60a5fa); }
  .toast.success { background: linear-gradient(90deg,#22c55e,#4ade80); }
  .toast.warning { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
  .toast.error { background: linear-gradient(90deg,#ef4444,#f87171); }

  @keyframes toast-in {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes toast-out {
    to { opacity: 0; transform: translateY(-10px) scale(0.95); }
  }