:root{
  --bg:#0b0c10;
  --text:#f2f3f5;
  --muted:#a7adbb;
  --line:#353c52;
  --line-strong:rgba(255,255,255,.28);
  --line-stronger:rgba(255,255,255,.40);
  --line-glow:rgba(255,255,255,.14);
  --accent:#7cf7c9;
  --accent2:#7aa7ff;
  --love:#ff7aa9;
  --travel:#ffd37a;
}
*{box-sizing:border-box}

/* Safety: keep media inside containers */
img, picture, video, canvas, svg{
  max-width:100%;
  height:auto;
  display:block;
}
body{
  margin:0;
  padding-bottom:96px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 20% 10%, #10142a, var(--bg));
  color:var(--text);
}
a{color:inherit; text-decoration:none}
.container{max-width:1080px; margin:0 auto; padding:24px}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;}
.brand{display:flex; align-items:baseline; gap:10px; font-weight:800; letter-spacing:.6px;}
.brand .logo{font-size:22px}
.brand .tag{font-size:12px; color:var(--muted); font-weight:600}
.nav a.btn{
  border:1px solid var(--line);
  padding:10px 12px; border-radius:12px;
  background: rgba(255,255,255,.03);
}

.nav a.btn.btn-accent{
  background: var(--accent);
  color:#081014;
  border-color: transparent;
  font-weight:800;
  box-shadow: 0 10px 28px rgba(124,247,201,.20);
}
.nav a.btn.btn-accent:hover{
  filter: brightness(1.02);
  box-shadow: 0 12px 32px rgba(124,247,201,.28);
}

.nav a.btn.nav-offer{
  border-color:rgba(124,247,201,.28);
  background:rgba(124,247,201,.07);
  color:#eafff8;
  font-weight:900;
}
.nav a.btn.nav-offer:hover{
  border-color:rgba(124,247,201,.42);
  background:rgba(124,247,201,.11);
}
.secondary.btn-accent{
  background: var(--accent);
  color:#081014;
  border-color: transparent;
  font-weight:800;
  box-shadow: 0 10px 28px rgba(124,247,201,.20);
}
.secondary.btn-accent:hover{
  filter: brightness(1.02);
  box-shadow: 0 12px 32px rgba(124,247,201,.28);
}
.hero{
  margin-top:10px;
  padding:26px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  background:
    radial-gradient(520px 240px at 0% 0%, rgba(124,247,201,.12), transparent 58%),
    radial-gradient(460px 220px at 100% 0%, rgba(122,167,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 18px 52px rgba(0,0,0,.20);
}
.hero h1{margin:0 0 8px; font-size:34px}
.hero p{margin:0; color:var(--muted); max-width:78ch; line-height:1.5}
.hero .cta{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.primary{
  background: var(--accent);
  color:#081014;
  border:0;
  padding:12px 14px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.secondary{
  border:1px solid var(--line);
  padding:12px 14px;
  border-radius:14px;
  background: rgba(255,255,255,.03);
  font-weight:700;
}
.small{font-size:12px; color:var(--muted)}

.hero-price{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin-top:18px;
  padding:16px 20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(124,247,201,.10), rgba(122,167,255,.08) 58%, rgba(255,122,169,.07));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 46px rgba(0,0,0,.28);
  overflow:hidden;
  isolation:isolate;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-price::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:17px;
  background: linear-gradient(180deg, rgba(7,12,18,.08), rgba(7,12,18,.26));
  z-index:-1;
}
.hero-price::after{
  content:"";
  position:absolute;
  top:-30%;
  right:-12%;
  width:160px;
  height:160px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
  pointer-events:none;
}
.hero-price-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#d7fbe7;
}
.hero-price-label::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 16px rgba(124,247,201,.45);
  flex:0 0 auto;
}
.hero-price strong{
  font-size:clamp(1.75rem, 3.4vw, 2.55rem);
  line-height:1;
  font-weight:950;
  letter-spacing:-.03em;
  color:var(--text);
  text-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.hero-price-note{
  font-size:.92rem;
  font-weight:800;
  color:rgba(242,243,245,.76);
}
.hero-price-promo{
  border-color:rgba(124,247,201,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    radial-gradient(180px 120px at 20% 22%, rgba(124,247,201,.18), transparent 68%),
    radial-gradient(190px 130px at 95% 8%, rgba(255,155,38,.18), transparent 72%),
    linear-gradient(135deg, rgba(124,247,201,.10), rgba(122,167,255,.08) 58%, rgba(255,155,38,.08));
}
.hero-price-promo strong{
  color:#7cf7c9;
  text-shadow: 0 0 24px rgba(124,247,201,.22), 0 2px 14px rgba(0,0,0,.22);
}
.hero-price-promo .hero-price-note{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.promo-note{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,155,38,.16);
  border:1px solid rgba(255,155,38,.35);
  color:#ffd37a;
}
.price-separator{
  color:rgba(242,243,245,.48);
}
.regular-note{
  color:rgba(242,243,245,.72);
}
.hero-delivery{
  margin-top:10px !important;
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  margin-top:16px;
}
.card{
  grid-column: span 4;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,.03);
  padding:16px;
}
.card h3{margin:0 0 6px}
.card p{margin:0; color:var(--muted); line-height:1.5}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:10px; padding:8px 10px;
  border-radius:999px; border:1px solid var(--line);
  color:var(--muted); font-weight:600; font-size:12px;
}
.dot{width:8px; height:8px; border-radius:50%}
.dot.explore{background:var(--accent)}
.dot.vibe{background:var(--accent2)}
.dot.love{background:var(--love)}
.dot.airports{background:var(--travel)}

.collections-grid .card{
  grid-column: span 6;
  min-height: 320px;
  padding:26px 24px 22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:22px;
}
.collections-grid .card h3{
  margin:0;
  font-size:clamp(3.1rem, 5vw, 4.8rem);
  line-height:.92;
  letter-spacing:-0.045em;
  font-weight:900;
  text-wrap:balance;
  color:#f5f7fb;
  text-shadow:0 10px 26px rgba(122,167,255,.08);
}
.collections-grid .card p{
  font-size:14px;
  line-height:1.45;
}
.collection-card-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.collection-card-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(226,232,240,.72);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.collections-grid .collection-kind{
  display:none;
}
.collections-grid .card p{
  max-width:24ch;
  margin:0;
  color:rgba(226,232,240,.82);
}
.section-title-collections h2{
  font-size:clamp(1.7rem, 2.2vw, 2.2rem);
  letter-spacing:-.02em;
}
.section-title-collections span{
  color:rgba(226,232,240,.66);
  font-size:14px;
}
@media (max-width: 980px){
  .collections-grid .card{grid-column: span 6;}
}

.section-title{
  margin-top:26px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.section-title h2{margin:0}
.section-title span{color:var(--muted)}

.toolbar{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.input, .select{
  background: rgba(255,255,255,.03);
  border:1px solid var(--line);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  outline:none;
}

.table{
  margin-top:12px;
  border:1px solid var(--line-strong);
  border-radius:16px;
  overflow: visible; /* allow dropdown to escape */
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
.row{
  position: relative;
  display:grid;
  grid-template-columns: 120px 1fr 180px 240px 120px;
  gap:12px;
  padding:12px 14px;
  border-top:1px solid var(--line-strong);
  align-items:center;
}
.row:first-child{border-top:0}
.row.header{
  background: rgba(255,255,255,.04);
  color:var(--muted);
  font-weight:700;
  font-size:12px;
}

.pill{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  font-weight:800;
  letter-spacing:1px;
}



.pill.words-pill{
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.pill.words-pill .promo-sticker{
  margin-left:4px;
}

/* FREE129 promo sticker for selected DOKYs */
.promo-sticker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  margin-left:8px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(135deg, #ff2d2d, #c90000);
  color:#fff;
  font-size:10px;
  line-height:1;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(255,45,45,.28);
}
.words-line{
  display:inline-flex;
  align-items:center;
  gap:0;
  flex-wrap:wrap;
  max-width:100%;
}
.row.is-promo .pill,
.best-card.is-promo .best-words{
  border-color:rgba(255,45,45,.48);
  box-shadow:0 0 0 1px rgba(255,45,45,.14) inset;
}

.btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:700;
  user-select:none;
  text-align:center;
}
.qtybox{display:flex; align-items:center; gap:8px;}
.qty{
  min-width:36px;
  text-align:center;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  font-weight:800;
}

.footer{
  margin:30px 0 10px;
  color:var(--muted);
  font-size:12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
@media (max-width: 900px){
  .card{grid-column: span 12;}
  .collections-grid .card{grid-column: span 12;}
  .row{grid-template-columns: 90px 1fr 150px 160px 90px;}
  .hero h1{font-size:28px}
  .hero-price{
    width:100%;
    padding:14px 16px;
  }
}


/* Shopee-like quantity stepper */
.qty-stepper{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background: rgba(255,255,255,.02);
}
.qty-stepper button{
  border:0;
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-weight:900;
  cursor:pointer;
  padding:10px 12px;
  min-width:44px;
}
.qty-stepper button:hover{
  background: rgba(255,255,255,.06);
}
.qty-stepper input{
  width:52px;
  text-align:center;
  border:0;
  outline:none;
  background: transparent;
  color: var(--text);
  font-weight:900;
  padding:10px 0;
  -moz-appearance:textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Cells for responsive tables */
.cell{display:flex; align-items:center; gap:10px;}
.cell.qty{justify-content:flex-start;}
.cell.color{justify-content:flex-start;}
.cell.cart{justify-content:flex-start;}

/* Make select look tighter inside tables */
.table .select{padding:10px 12px; border-radius:12px;}

/* Stronger combo table borders for clearer desktop and mobile display */
.table{
  border-width:1.5px;
  border-color: var(--line-stronger);
  box-shadow: 0 0 0 1px rgba(255,255,255,.09) inset, 0 0 24px rgba(255,255,255,.04);
}
.table .row:not(.header){
  background: rgba(255,255,255,.014);
}
.table .row + .row:not(.header){
  box-shadow: 0 -1px 0 rgba(255,255,255,.05) inset;
}
.table .row:hover:not(.header){
  background: rgba(255,255,255,.03);
}
.row.header{
  background: rgba(255,255,255,.055);
  box-shadow: 0 -1px 0 rgba(255,255,255,.06) inset;
}

@media (min-width: 901px){
  .table .row{
    border-top:1.5px solid var(--line-stronger);
  }
  .table .cell + .cell{
    border-left:1px solid rgba(255,255,255,.07);
    padding-left:14px;
  }
}

#cartTable .row{
  grid-template-columns: 110px 110px minmax(180px,1fr) 190px 190px 130px !important;
}
#cartTable .cell{
  min-width:0;
}
#cartTable .cell.words{
  overflow:hidden;
}
#cartTable .cell.words .pill{
  max-width:100%;
  white-space:normal;
  line-height:1.15;
}
#cartTable .cell.qty{
  overflow:visible;
}
#cartTable .qty-stepper{
  flex-shrink:0;
}

@media (max-width: 1180px){
  #cartTable .row{
    grid-template-columns: 100px 100px minmax(150px,1fr) 176px 176px 120px !important;
  }
  #cartTable .cell + .cell{
    padding-left:10px;
  }
}

/* Mobile: stack qty + color + cart under the words */
@media (max-width: 900px){
  .row{
    grid-template-columns: 90px 1fr;
    gap:10px;
    padding:14px;
  }
  .row.header{display:none;}
  .table{
    border-width:2px;
    border-color: var(--line-stronger);
    box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 0 20px rgba(255,255,255,.04);
  }
  .table .row{
    border-top:1.5px solid var(--line-stronger);
  }
  .cell.code{grid-column:1; align-items:flex-start;}
  .cell.words{grid-column:2; align-items:flex-start;}
  .cell.qty{grid-column:1 / 3; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.14);}
  .cell.color{grid-column:1 / 3;}
  .cell.cart{grid-column:1 / 3;}
}


/* Custom color picker (dark dropdown, Shopee-like) */
.color-picker{position:relative; width:100%; max-width:220px;}
.color-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-weight:800;
  cursor:pointer;
}
.color-btn .left{display:flex; align-items:center; gap:10px;}
.swatch{
  width:12px; height:12px; border-radius:4px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.25);
}
.swatch.black{background:#0b0c10;}
.swatch.orange{background:#f08a1a;}
.swatch.peakgreen{background:#2bb673;}
.swatch.lightblue{background:#4da3ff;}

.color-menu{
  position:absolute;
  top: calc(100% + 8px);
  left:0;
  right:0;
  z-index:999;
  border:1px solid var(--line);
  border-radius:14px;
  background: #0f121a;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  padding:6px;
  display:none;
  max-height:220px;
  overflow:auto;
}
.color-menu.open{display:block;}
.color-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  color: var(--text);
  font-weight:800;
}
.color-item:hover{background: rgba(255,255,255,.06);}
.color-item.active{background: rgba(124,247,201,.14); border:1px solid rgba(124,247,201,.35);}

.color-menu::-webkit-scrollbar{width:10px;}
.color-menu::-webkit-scrollbar-track{background:#0b0c10; border-radius:12px;}
.color-menu::-webkit-scrollbar-thumb{background:#2a3146; border-radius:12px;}
.color-menu::-webkit-scrollbar-thumb:hover{background:#3a4564;}


/* DOKY logo in navbar */
.brand-logo{
  height: 52px; /* bigger on desktop */
  width: auto;
  display:block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.brand-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}

/* smaller on mobile */
@media (max-width: 600px){
  .brand-logo{height: 40px;}
}


/* Small color thumbnail (subtle) */
.color-thumb{
  width:46px;
  height:46px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
@media (max-width: 600px){
  .color-thumb{ width:40px; height:40px; }
}


/* Prevent color picker from overlapping QTY cell */
.cell{min-width:0;}
.cell.color{gap:10px; overflow: visible;}
.color-picker{max-width:170px; flex: 0 0 170px;}
.color-btn{min-width:0;}


/* Color chips (no dropdown => no blocking) */
.color-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  user-select:none;
  font-weight:800;
  font-size:12px;
  color: var(--text);
}
.chip .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
}
.dot.black{background:#0b0c10;}
.dot.orange{background:#f08a1a;}
.dot.peakgreen{background:#2bb673;}
.dot.lightblue{background:#4da3ff;}
.chip.active{
  border-color: rgba(124,247,201,.55);
  background: rgba(124,247,201,.12);
}


/* Keep color chips inside their column (avoid blocking QTY clicks) */
.cell.color{overflow:hidden;}
.color-chips{max-width:220px;}


/* Logo safety clamp (prevents huge logo if inserted without sizing) */
img[src*="doky_logo_green_transparent.png"],
img[src*="doky_logo_transparent.png"],
img[src*="doky_logo_"]{
  max-height: 56px;
  width: auto;
}

/* Navbar logo */
.brand-logo{
  height: 52px;
  width: auto;
  max-height: 52px;
  max-width: 220px;
  display:block;
}
@media (max-width:600px){
  .brand-logo{ height: 40px; max-height:40px; }
}

/* ----------------------------
   Royal Color Showcase (Phase 1)
----------------------------- */
.colors-showcase{
  margin-top:16px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background: rgba(255,255,255,.02);
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap:16px;
  position:relative;
  overflow:hidden;
}
.colors-showcase::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(500px 260px at 15% 15%, rgba(124,247,201,.18), transparent 60%),
    radial-gradient(520px 280px at 85% 25%, rgba(122,167,255,.14), transparent 62%),
    radial-gradient(520px 320px at 60% 110%, rgba(255,122,169,.10), transparent 62%);
  filter: blur(10px);
  opacity:.9;
  pointer-events:none;
}
.colors-left{position:relative;}
.colors-left h2{margin:0 0 8px; font-size:22px; letter-spacing:.2px;}
.colors-left p{margin:0; color:var(--muted); line-height:1.5; max-width:54ch;}
.colors-meta{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.meta-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  color:var(--muted);
  font-weight:700;
  font-size:12px;
}
.meta-pill b{color:var(--text)}
.colors-actions{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.colors-grid{
  position:relative;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.color-card{
  appearance:none;
  -webkit-appearance:none;
  font-family: inherit;
  color: inherit;
  outline:none;
  position:relative;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,.02);
  padding:10px;
  cursor:pointer;
  text-align:left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  overflow:hidden;
  min-height:170px;
}
.color-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.03);
}
.color-card:active{transform: translateY(0px) scale(.99);}
.color-card .media{
  display:block;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  aspect-ratio: 21 / 10;
  height:auto;
}
.color-card .media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.03);
  transition: transform .25s ease, filter .25s ease;
  filter: saturate(1.08) contrast(1.03);
  object-position:center;
}
.color-card:hover .media img{transform: scale(1.07);}
.color-card .cc-footer{
  margin:10px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--text);
  font-weight:900;
  font-size:13px;
}
.color-card .hint{
  color:var(--muted);
  font-weight:700;
  font-size:12px;
  margin-top:2px;
}
.color-card .selected-badge{
  position:absolute;
  top:10px;
  right:10px;
  padding:6px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.2px;
  color:#081014;
  background: rgba(124,247,201,.92);
  display:none;
}
.color-card.active{
  border-color: rgba(124,247,201,.55);
  box-shadow: 0 0 0 2px rgba(124,247,201,.14), 0 22px 60px rgba(0,0,0,.35);
}
.color-card.active .selected-badge{display:inline-flex;}

.colors-note{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
}


/* Merged ordering + color block */
.colors-showcase--ordering{
  margin-top:0;
  padding:20px;
  grid-template-columns:minmax(300px, .92fr) minmax(360px, 1.08fr);
  gap:20px;
}
.colors-showcase--ordering .ordering-title{
  margin:0 0 14px;
}
.colors-showcase--ordering .ordering-title h2{
  font-size:clamp(1.7rem, 2.3vw, 2.25rem);
  letter-spacing:-.03em;
}
.colors-showcase--ordering .ordering-title span{
  max-width:34ch;
}
.ordering-steps{
  display:grid;
  gap:10px;
  margin:0 0 16px;
}
.ordering-step{
  display:grid;
  grid-template-columns:38px minmax(0, 1fr);
  gap:12px;
  align-items:start;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.03);
}
.ordering-step .step-num{
  margin:0;
}
.ordering-step h3{
  margin:0 0 4px;
  font-size:15px;
}
.ordering-step p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
  font-size:14px;
}
.colors-intro{
  margin-top:2px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.colors-intro h3{
  margin:0 0 6px;
  font-size:20px;
  letter-spacing:-.01em;
}
.colors-intro p{
  margin:0;
}
.colors-intro p + p{
  margin-top:8px;
}
.colors-intro strong{
  color:var(--text);
}
@media (max-width: 900px){
  .colors-showcase--ordering{
    grid-template-columns:1fr;
  }
  .colors-showcase--ordering .ordering-title{
    display:block;
  }
}
@media (max-width: 640px){
  .colors-showcase--ordering{
    padding:16px;
  }
  .ordering-step{
    grid-template-columns:34px minmax(0, 1fr);
    padding:11px;
  }
  .ordering-step h3{
    font-size:14px;
  }
  .ordering-step p{
    font-size:13px;
  }
}


.word-clarity{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.word-clarity strong{
  display:block;
  margin-bottom:4px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text);
}
.word-clarity p{
  margin:0;
  max-width:62ch;
  color:var(--muted);
  line-height:1.5;
  font-size:14px;
}
.collection-kind{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.collection-kind .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  border:none;
}
.collection-card-cta{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.94);
  font-size:12px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.collection-card-cta span{
  opacity:.72;
  transition:transform .22s ease, opacity .22s ease;
}

/* Collection card light effect — blue premium glow */
.collections-grid .card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  will-change:transform, box-shadow;
  --card-rest-lift:0px;
  transform:translateY(var(--card-rest-lift));
  background:
    radial-gradient(240px 120px at 82% 0%, rgba(122,167,255,.16), rgba(122,167,255,0) 62%),
    radial-gradient(220px 110px at 18% 0%, rgba(122,167,255,.08), rgba(122,167,255,0) 64%),
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.014) 34%, rgba(255,255,255,.006) 100%),
    rgba(255,255,255,.022);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(255,255,255,.012),
    0 14px 32px rgba(0,0,0,.20);
  transition: transform .26s cubic-bezier(.2,.7,.2,1), border-color .26s ease, box-shadow .26s ease, background .26s ease;
}
.collections-grid .card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 11%, rgba(255,255,255,0) 26%),
    linear-gradient(140deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(260px 140px at 88% -6%, rgba(122,167,255,.20), rgba(122,167,255,0) 68%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}
.collections-grid .card::after{
  content:"";
  position:absolute;
  right:-10%;
  top:-18%;
  width:68%;
  height:44%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(122,167,255,.22) 0%, rgba(122,167,255,.08) 34%, rgba(122,167,255,0) 74%);
  filter:blur(24px);
  opacity:.72;
  pointer-events:none;
  z-index:0;
}
.collections-grid .card > *{
  position:relative;
  z-index:1;
}
.collections-grid .card:nth-child(1){
  --card-rest-lift:-4px;
}
.collections-grid .card:nth-child(2)::after{
  right:-6%;
  width:64%;
}
.collections-grid .card:nth-child(3)::after{
  right:-14%;
  width:70%;
}
.collections-grid .card:nth-child(4){
  --card-rest-lift:-4px;
}
.collections-grid .card:nth-child(4)::after{
  right:-8%;
  width:62%;
}
@media (hover:hover) and (pointer:fine){
  .collections-grid .card:hover,
  .collections-grid .card:focus-visible{
    transform:translateY(calc(var(--card-rest-lift) - 4px));
    border-color:rgba(122,167,255,.22);
    background:
      radial-gradient(280px 150px at 82% 0%, rgba(122,167,255,.22), rgba(122,167,255,0) 64%),
      radial-gradient(220px 120px at 18% 0%, rgba(122,167,255,.10), rgba(122,167,255,0) 66%),
      linear-gradient(180deg, rgba(255,255,255,.034) 0%, rgba(255,255,255,.016) 34%, rgba(255,255,255,.007) 100%),
      rgba(255,255,255,.024);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      inset 0 -1px 0 rgba(255,255,255,.015),
      0 22px 46px rgba(0,0,0,.28),
      0 0 0 1px rgba(122,167,255,.06);
  }
  .collections-grid .card:hover::after,
  .collections-grid .card:focus-visible::after{
    opacity:.92;
  }
  .collections-grid .card:hover .collection-card-cta span,
  .collections-grid .card:focus-visible .collection-card-cta span{
    transform:translateX(4px);
    opacity:1;
  }
}

@media (hover:none), (pointer:coarse){
  .collections-grid .card{
    transition: transform .14s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .collections-grid .card:active{
    transform:translateY(calc(var(--card-rest-lift) - 2px)) scale(.992);
    border-color:rgba(122,167,255,.18);
    background:
      radial-gradient(260px 138px at 82% 0%, rgba(122,167,255,.20), rgba(122,167,255,0) 64%),
      radial-gradient(220px 120px at 18% 0%, rgba(122,167,255,.09), rgba(122,167,255,0) 66%),
      linear-gradient(180deg, rgba(255,255,255,.032) 0%, rgba(255,255,255,.015) 34%, rgba(255,255,255,.007) 100%),
      rgba(255,255,255,.023);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 -1px 0 rgba(255,255,255,.014),
      0 18px 36px rgba(0,0,0,.24),
      0 0 0 1px rgba(122,167,255,.05);
  }
  .collections-grid .card:active::after{
    opacity:.84;
  }
  .collections-grid .card:active .collection-card-cta span{
    transform:translateX(3px);
    opacity:1;
  }
}

/* Slim picker for collection pages */
.colors-bar{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,.02);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.colors-bar .left{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.colors-bar .title{
  font-weight:900;
  letter-spacing:.2px;
}
.colors-bar .subtitle{color:var(--muted); font-size:12px;}
.colors-bar .picks{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.color-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  user-select:none;
  font-weight:900;
  font-size:12px;
  color:var(--text);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.color-pill:hover{background: rgba(255,255,255,.05); transform: translateY(-1px);}
.color-pill.active{
  border-color: rgba(124,247,201,.55);
  background: rgba(124,247,201,.10);
}

.color-pill .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .color-card, .color-card .media img, .color-pill{transition:none;}
  .color-card:hover{transform:none;}
  .color-pill:hover{transform:none;}
}

/* Mobile layout */
@media (max-width: 900px){
  .colors-showcase{grid-template-columns: 1fr; }
  .colors-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 520px){
  .colors-grid{grid-template-columns: 1fr;}
  .color-card{min-height:160px;}
  .color-card .media{aspect-ratio: 21 / 10; height:auto;}
}

/* =========================
   Instagram (4:5 posts - 1080 x 1350)
   ========================= */
.ig-section{
  margin-top: 32px;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
}

.ig-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.ig-title{
  margin: 0;
  font-size: 24px;
  font-weight: 800;
}

.ig-follow{
  font-size: 14px;
  text-decoration: none;
  opacity: .85;
}
.ig-follow:hover{ opacity: 1; }

.ig-subtitle{
  margin: 0 0 18px 0;
  opacity: .8;
  font-size: 14px;
}

.ig-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.ig-card{
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  transition: transform .15s ease, border-color .15s ease, opacity .15s ease;
}

.ig-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
}

.ig-card img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.ig-footer{
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}

.ig-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  text-decoration: none;
  font-size: 14px;
  opacity: .9;
}
.ig-cta:hover{ opacity: 1; }

@media (max-width: 1100px){
  .ig-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px){
  .ig-section{
    padding: 20px;
    border-radius: 20px;
  }

  .ig-header{
    flex-direction: column;
    align-items: flex-start;
  }

  .ig-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Video Showcase (16:9)
   ========================= */
.vid-section{
  margin-top: 22px;
}

.vid-frame{
  width: 80%;
  max-width: 980px; 
  margin: 0 auto;            /* centre horizontalement */
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

@media (max-width: 700px){
  /* espace uniquement entre LOVE et la TV */
  .vid-section{
    margin-top: 0;
    padding-top: 18px;
  }

  /* TV plus grande uniquement en mobile */
  .vid-frame{
    width: 100%;
    max-width: none;   /* enlève la limite 980px en mobile */
    margin: 0 auto;
  }

  /* sécurité */
  .grid{ margin-bottom: 0; }
}

.vid-el{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity .35s ease;
}

.vid-el.is-fading{
  opacity: 0;
}

/* Instagram link in Colors section */
.colors-bar .subtitle a{
  text-decoration: underline;
  opacity: 0.9;
}

.colors-bar .subtitle a:hover{
  opacity: 1;
}


.hero-metrics{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.hero-metrics .hero-price{
  margin-top:0;
  width:100%;
  min-width:0;
}
.hero-price-compact{
  min-height:120px;
}
.hero-price-compact strong{
  font-size:clamp(1.45rem, 2.8vw, 2.05rem);
}
.hero-summary-note{
  font-size:.88rem;
  line-height:1.35;
  color:rgba(242,243,245,.74);
}
.hero-delivery-inline-note{
  display:none;
  margin-top:6px;
  font-size:.86rem;
  line-height:1.35;
  color:rgba(216,251,232,.88);
  font-weight:800;
}
.order-hero-metrics{
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
  align-items:stretch;
}
.order-hero-metrics .hero-price-total{
  min-height:132px;
}
.order-hero-metrics .hero-price-total strong{
  font-size:clamp(2.05rem, 4vw, 3rem);
}
.order-hero-metrics .hero-price-delivery{
  min-height:132px;
}
.order-hero-metrics .hero-price-delivery strong{
  font-size:clamp(1.75rem, 3.2vw, 2.35rem);
}
@media (max-width: 900px){
  .hero-price{
    width:100%;
    padding:14px 16px;
  }
  .hero-metrics,
  .order-hero-metrics{
    grid-template-columns: 1fr;
  }
  .order-hero-metrics .hero-price-total{
    min-height:112px;
  }
  .order-hero-metrics .hero-price-delivery{
    display:none;
  }
  .order-hero-metrics .hero-delivery-inline-note{
    display:block;
  }
}


.airport-route{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  font-weight:800;
}
.airport-name{
  min-width:0;
  line-height:1.3;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.airport-dest{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  white-space:nowrap;
}
.airport-final{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.airport-final-label{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:900;
}
@media (max-width: 900px){
  .airport-route{
    grid-template-columns:1fr;
    align-items:flex-start;
    gap:6px;
  }
  .airport-dest{
    white-space:normal;
    letter-spacing:.08em;
  }
}

/* Unified cart buttons across the whole site */
a[href="cart.html"].btn,
a[href="cart.html"].primary,
a[href="cart.html"].secondary{
  background: var(--accent);
  color:#081014;
  border-color: transparent;
  font-weight:800;
  box-shadow: 0 10px 28px rgba(124,247,201,.20);
}
a[href="cart.html"].btn:hover,
a[href="cart.html"].primary:hover,
a[href="cart.html"].secondary:hover{
  filter: brightness(1.02);
  box-shadow: 0 12px 32px rgba(124,247,201,.28);
}


/* =========================
   V7.6 commercial boost
   ========================= */
.feature-band{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.feature-pill{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.03);
  padding:14px;
}
.feature-pill strong{
  display:block;
  font-size:15px;
  margin-bottom:4px;
}
.feature-pill span{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#d8fbe8;
}
.kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 16px rgba(124,247,201,.45);
}
.steps-grid,
.audience-grid,
.best-grid,
.reseller-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
.step-card,
.audience-card,
.best-card,
.info-card,
.reseller-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.03);
  padding:18px;
}
.step-card{grid-column:span 4;}
.audience-card{grid-column:span 6;}
.best-card{grid-column:span 4; display:flex; flex-direction:column; gap:12px;}
.info-card{grid-column:span 3;}
.reseller-card{grid-column:span 6;}
.step-num{
  width:34px;
  height:34px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(124,247,201,.12);
  color:var(--accent);
  font-weight:900;
  margin-bottom:10px;
  border:1px solid rgba(124,247,201,.24);
}
.step-card h3,
.audience-card h3,
.best-card h3,
.info-card h3,
.reseller-card h3{margin:0 0 8px;}
.step-card p,
.audience-card p,
.best-card p,
.info-card p,
.reseller-card p{margin:0; color:var(--muted); line-height:1.55;}
.best-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.best-code{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:900;
}
.best-words{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  font-weight:900;
  font-size:20px;
  letter-spacing:.04em;
}
.best-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.best-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:auto;
}
.quick-add{
  min-width:132px;
}
.audience-card{
  position:relative;
  overflow:hidden;
}
.audience-card::after{
  content:"";
  position:absolute;
  inset:auto -80px -80px auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(124,247,201,.14), transparent 68%);
  pointer-events:none;
}
.audience-card .badge,
.reseller-card .badge{margin-top:14px;}
.list-clean{
  margin:14px 0 0;
  padding-left:18px;
  color:var(--muted);
}
.list-clean li{margin:0 0 8px; line-height:1.5;}


.spring-pick{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:8px 6px 10px;
  text-align:center;
}
.spring-pick-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#dffcef;
}
.spring-pick-combo{
  display:grid;
  gap:0;
  font-size:clamp(3.4rem, 12vw, 7.25rem);
  line-height:.88;
  font-weight:1000;
  letter-spacing:-.07em;
  text-transform:uppercase;
}
.spring-pick-combo span{
  display:block;
  text-shadow:0 18px 42px rgba(0,0,0,.30);
}
.spring-pick-actions{
  display:flex;
  justify-content:center;
}
.spring-pick-btn{
  min-width:170px;
}

/* Home promo stickers */
.spring-pick-combo.is-promo{
  color:#fff;
}
.spring-pick-promo-sticker{
  margin-top:-8px;
  margin-left:0;
  transform:scale(1.05);
}
@media (max-width: 640px){
  .spring-pick-promo-sticker{
    margin-top:-6px;
    transform:scale(.95);
  }
}
@media (max-width: 640px){
  .spring-pick{
    gap:14px;
    padding:2px 0 4px;
  }
  .spring-pick-kicker{
    font-size:10px;
    letter-spacing:.14em;
  }
  .spring-pick-combo{
    font-size:clamp(2.7rem, 18vw, 4.7rem);
    line-height:.9;
  }
  .spring-pick-btn{
    width:100%;
    min-width:0;
  }
}

body.doky-popup-open .sticky-orderbar{
  opacity:0;
  pointer-events:none;
}

.sticky-orderbar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  width:min(760px, calc(100% - 24px));
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  z-index:9999;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) repeat(2, minmax(0,1fr));
  align-items:stretch;
  gap:10px;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(11,12,16,.92);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.sticky-orderbar a,
.sticky-orderbar button{
  width:100%;
  min-width:0;
  min-height:46px;
  white-space:nowrap;
}
.sticky-orderbar--single{
  grid-template-columns:minmax(0,1fr);
  width:min(420px, calc(100% - 24px));
}
.cart-counter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  margin-left:8px;
  padding:0 7px;
  border-radius:999px;
  background:#081014;
  color:var(--accent);
  font-size:12px;
  font-weight:900;
}


/* Premium desktop sticky order bar */
body{
  padding-bottom: 96px;
}

@media (min-width: 701px){
  .sticky-orderbar{
    width: auto;
    min-width: 600px;
    max-width: calc(100% - 48px);
    bottom: 18px;
    padding: 12px;
    gap: 12px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
    background:
      linear-gradient(180deg, rgba(22,24,31,.94), rgba(10,11,16,.94));
    box-shadow:
      0 18px 48px rgba(0,0,0,.34),
      0 0 0 1px rgba(255,255,255,.02) inset;
  }
  .sticky-orderbar::before{
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(124,247,201,.28), rgba(255,255,255,.08), rgba(124,247,201,.12));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: .9;
  }
  .sticky-orderbar a,
  .sticky-orderbar button{
    min-height: 50px;
    border-radius: 16px;
    font-weight: 900;
    letter-spacing: .01em;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }
  .sticky-orderbar a.primary,
  .sticky-orderbar button.primary{
    box-shadow: 0 10px 28px rgba(124,247,201,.22);
  }
  .sticky-orderbar a.secondary,
  .sticky-orderbar button.secondary{
    color: #f2f3f5;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
  }
  .sticky-orderbar a.secondary:hover,
  .sticky-orderbar button.secondary:hover{
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.16);
  }
  .sticky-orderbar a:hover,
  .sticky-orderbar button:hover{
    transform: translateY(-1px);
  }
  .sticky-orderbar .cart-counter{
    min-width: 24px;
    height: 24px;
    font-size: 11px;
    box-shadow: inset 0 0 0 1px rgba(124,247,201,.14);
  }
  .sticky-orderbar--single{
    min-width: 0;
    width: min(420px, calc(100% - 48px));
  }
}

@media (max-width: 700px){
  body{
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  }
  .sticky-orderbar{
    left:max(12px, env(safe-area-inset-left, 0px));
    right:max(12px, env(safe-area-inset-right, 0px));
    width:auto;
    transform:none;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    gap:8px;
    padding:8px;
    grid-template-columns:minmax(0,1.28fr) repeat(2, minmax(0,.92fr));
  }
  .sticky-orderbar a,
  .sticky-orderbar button{
    min-height:48px;
    padding-inline:10px;
    font-size:14px;
  }
  .sticky-orderbar .cart-counter{
    margin-left:6px;
  }
  .sticky-orderbar--single{
    grid-template-columns:minmax(0,1fr);
  }
  .sticky-orderbar--order{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .sticky-orderbar--order .sticky-cart-btn{
    grid-column:1 / -1;
  }
  .sticky-orderbar--order a,
  .sticky-orderbar--order button{
    font-size:13px;
  }
}

@media (max-width: 380px){
  .sticky-orderbar--order{
    grid-template-columns:minmax(0,1fr);
  }
  .sticky-orderbar--order .sticky-cart-btn{
    grid-column:auto;
  }
}


/* Checkout clarity: keep the sticky action bar for mobile only, so desktop checkout stays clean. */
@media (min-width: 901px){
  body{
    padding-bottom: 32px;
  }
  .sticky-orderbar{
    display:none;
  }
}

.reseller-hero-note{
  margin-top:14px !important;
  max-width:65ch;
}
.cta-note{
  margin-top:12px;
  color:var(--muted);
  font-size:12px;
}
.page-anchor-offset{scroll-margin-top:92px;}
@media (max-width: 980px){
  .feature-band{grid-template-columns:repeat(2,minmax(0,1fr));}
  .step-card,
  .best-card,
  .info-card{grid-column:span 6;}
}
@media (max-width: 900px){
  .audience-card,
  .reseller-card,
  .step-card,
  .best-card,
  .info-card{grid-column:span 12;}
}
@media (max-width: 520px){
  .feature-band{grid-template-columns:1fr;}
  .best-words{font-size:18px;}
}


/* =========================
   V7.7 ultra terrain boost
   ========================= */
.promo-strip{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.promo-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  padding:18px;
  background:
    radial-gradient(280px 140px at 100% 0%, rgba(124,247,201,.10), transparent 65%),
    rgba(255,255,255,.03);
  box-shadow:0 16px 42px rgba(0,0,0,.18);
}
.promo-card h3{
  margin:0 0 8px;
  font-size:22px;
}
.promo-card p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}
.promo-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.intent-grid,
.spotlight-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
.intent-card,
.spotlight-card,
.route-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.03);
  padding:18px;
}
.intent-card{
  grid-column:span 4;
  position:relative;
  overflow:hidden;
}
.intent-card::after{
  content:"";
  position:absolute;
  inset:auto -70px -70px auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(124,247,201,.12), transparent 68%);
  pointer-events:none;
}
.intent-card h3,
.spotlight-card h3,
.route-card h3{
  margin:0 0 8px;
}
.intent-card p,
.spotlight-card p,
.route-card p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}
.intent-meta{
  margin-top:14px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.intent-meta .badge{margin-top:0}
.spotlight-card{grid-column:span 6;}
.route-card{grid-column:span 4;}
.route-code{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.section-note{
  margin-top:10px;
  color:var(--muted);
  line-height:1.55;
}
.quickpick-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
.quickpick-card{
  grid-column:span 4;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.03);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.quickpick-card p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}
.tiny-note{
  font-size:12px;
  color:var(--muted);
}
.reseller-pack{
  grid-column:span 4;
}
.sticky-orderbar .sticky-cart-btn{
  gap:2px;
}
.sticky-orderbar .secondary.is-zalo{
  border-color:rgba(26,164,255,.28);
  background:rgba(26,164,255,.08);
}
.sticky-orderbar .secondary.is-whatsapp{
  border-color:rgba(124,247,201,.20);
}

.sticky-orderbar .secondary{
  color:var(--text);
  -webkit-text-fill-color:var(--text);
}

@media (max-width: 700px) and (orientation: portrait){
  .sticky-orderbar .secondary,
  .sticky-orderbar .secondary.is-zalo,
  .sticky-orderbar .secondary.is-whatsapp{
    color:#f3f5f7;
    -webkit-text-fill-color:#f3f5f7;
    font-weight:800;
  }
}
@media (max-width: 980px){
  .promo-strip{grid-template-columns:1fr;}
  .intent-card,
  .route-card,
  .quickpick-card,
  .reseller-pack{grid-column:span 6;}
}
@media (max-width: 900px){
  .intent-card,
  .spotlight-card,
  .route-card,
  .quickpick-card,
  .reseller-pack{grid-column:span 12;}
}

@media (max-width: 980px){
  .collections-grid .card{
    min-height:unset;
    transform:none !important;
  }
}



/* =========================
   Homepage FREE129 promo picks
   ========================= */
.home-promo-panel{
  border-color:rgba(255,111,0,.26);
  background:
    radial-gradient(circle at 90% 12%, rgba(255,111,0,.16), transparent 34%),
    radial-gradient(circle at 6% 100%, rgba(173,219,0,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.022));
}
.home-promo-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:end;
}
.home-promo-badge{
  display:inline-flex;
  width:max-content;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,111,0,.14);
  border:1px solid rgba(255,111,0,.34);
  color:#ffb169;
  font-weight:900;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-bottom:12px;
}
.home-promo-code{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(173,219,0,.12);
  border:1px solid rgba(173,219,0,.28);
  color:#d8ff45;
  font-weight:950;
  letter-spacing:.04em;
  width:max-content;
  margin-top:12px;
}
.home-promo-prices{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.home-promo-price-pill{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);
  border-radius:16px;
  padding:10px 12px;
  min-width:132px;
}
.home-promo-price-pill span{
  display:block;
  color:rgba(255,255,255,.62);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.home-promo-price-pill strong{
  display:block;
  margin-top:3px;
  font-size:18px;
  color:#fff;
}
.home-promo-note{
  margin-top:16px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.76);
  font-size:14px;
  font-weight:750;
}
.home-promo-card-note{
  color:rgba(255,255,255,.62);
  font-size:12px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.home-promo-card .best-words{
  width:max-content;
  max-width:100%;
  flex-wrap:wrap;
}
@media (max-width: 860px){
  .home-promo-intro{grid-template-columns:1fr;}
  .home-promo-prices{justify-content:flex-start;}
}


/* =========================
   Section backgrounds refresh
   ========================= */
.section-panel{
  --panel-glow-1: rgba(124,247,201,.10);
  --panel-glow-2: rgba(122,167,255,.08);
  --panel-glow-3: rgba(255,122,169,.05);
  --panel-border: rgba(255,255,255,.08);
  --panel-fill: rgba(255,255,255,.028);
  position:relative;
  margin-top:24px;
  padding:22px;
  border:1px solid var(--panel-border);
  border-radius:24px;
  background:
    radial-gradient(560px 260px at 0% 0%, var(--panel-glow-1), transparent 62%),
    radial-gradient(540px 260px at 100% 0%, var(--panel-glow-2), transparent 64%),
    radial-gradient(520px 260px at 50% 115%, var(--panel-glow-3), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.016)),
    var(--panel-fill);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 50px rgba(0,0,0,.22);
  overflow:hidden;
  isolation:isolate;
}
.section-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 28%),
    linear-gradient(130deg, rgba(255,255,255,.02), rgba(255,255,255,0) 48%);
  pointer-events:none;
  z-index:0;
}
.section-panel > *{
  position:relative;
  z-index:1;
}
.section-panel .section-title{
  margin-top:0;
}
.section-panel .section-title h2{
  font-size:clamp(1.45rem, 2vw, 2rem);
  letter-spacing:-.02em;
}
.section-panel .section-title span{
  color:rgba(226,232,240,.68);
}
.section-panel.panel-accent{
  --panel-glow-1: rgba(124,247,201,.14);
  --panel-glow-2: rgba(122,167,255,.08);
  --panel-glow-3: rgba(255,255,255,.035);
}
.section-panel.panel-blue{
  --panel-glow-1: rgba(122,167,255,.16);
  --panel-glow-2: rgba(124,247,201,.06);
  --panel-glow-3: rgba(255,255,255,.03);
}
.section-panel.panel-love{
  --panel-glow-1: rgba(255,122,169,.16);
  --panel-glow-2: rgba(122,167,255,.08);
  --panel-glow-3: rgba(255,211,122,.05);
}
.section-panel.panel-travel{
  --panel-glow-1: rgba(255,211,122,.16);
  --panel-glow-2: rgba(124,247,201,.08);
  --panel-glow-3: rgba(122,167,255,.06);
}
.section-panel.panel-neutral{
  --panel-glow-1: rgba(255,255,255,.055);
  --panel-glow-2: rgba(122,167,255,.07);
  --panel-glow-3: rgba(124,247,201,.05);
}
.section-panel.panel-media{
  --panel-glow-1: rgba(122,167,255,.18);
  --panel-glow-2: rgba(124,247,201,.10);
  --panel-glow-3: rgba(255,122,169,.07);
}
.section-panel.panel-tight{
  padding:18px;
}
.section-panel .feature-band,
.section-panel .colors-showcase,
.section-panel .best-grid,
.section-panel .steps-grid,
.section-panel .reseller-grid,
.section-panel .quickpick-grid,
.section-panel .audience-grid,
.section-panel .ig-section,
.section-panel .vid-section,
.section-panel .table{
  margin-top:16px;
}
.section-panel .colors-showcase,
.section-panel .ig-section,
.section-panel .vid-section{
  margin-top:0;
}
.section-panel .feature-band{
  margin-top:0;
}
.section-panel .toolbar{
  margin-top:14px;
}
.section-panel .footer{
  margin-top:0;
}
.section-title.is-inline-block{
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.section-panel .table{
  background:rgba(7,10,16,.26);
}
.section-panel .best-card,
.section-panel .step-card,
.section-panel .reseller-card,
.section-panel .quickpick-card,
.section-panel .audience-card,
.section-panel .info-card,
.section-panel .feature-pill{
  background:rgba(255,255,255,.034);
}
.section-panel .best-card,
.section-panel .step-card,
.section-panel .reseller-card,
.section-panel .quickpick-card,
.section-panel .audience-card,
.section-panel .info-card{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.section-panel .colors-bar{
  margin-top:0;
}
@media (max-width: 900px){
  .section-panel{
    padding:18px;
    border-radius:20px;
  }
}


/* Footer v3 + legal pages */
.site-footer{
  position:relative;
  overflow:hidden;
  margin:38px 0 14px;
  padding:26px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:30px;
  background:
    radial-gradient(1200px 460px at 0% 0%, rgba(122,167,255,.14), transparent 58%),
    radial-gradient(1000px 420px at 100% 100%, rgba(124,247,201,.11), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  box-shadow:
    0 24px 64px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:29px;
  background:linear-gradient(180deg, rgba(5,8,12,.08), rgba(5,8,12,.24));
  pointer-events:none;
}
.site-footer::after{
  content:"";
  position:absolute;
  top:-80px;
  right:-70px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);
  opacity:.42;
  pointer-events:none;
}
.site-footer > *{
  position:relative;
  z-index:1;
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(250px, 1fr) minmax(0, 1.45fr);
  gap:28px;
  align-items:start;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
.footer-brand-line{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:24px;
  font-weight:950;
  letter-spacing:.02em;
}
.footer-brand-line img{
  width:46px;
  height:46px;
  object-fit:contain;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.28));
}
.footer-brand p{
  margin:0;
  color:rgba(242,243,245,.78);
  max-width:36ch;
  line-height:1.65;
}
.footer-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.footer-badges span,
.footer-chip,
.footer-address{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.footer-badges span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#eef2ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.footer-badges span::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px rgba(124,247,201,.42);
}
.footer-address{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.65;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}
.footer-address strong{
  color:#eef2ff;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
}
.footer-right{
  display:grid;
  gap:18px;
}
.footer-cta-card{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) auto;
  gap:18px;
  align-items:center;
  padding:18px 20px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(360px 180px at 0% 0%, rgba(124,247,201,.10), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
}
.footer-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  color:#d8fce9;
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.footer-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 16px rgba(124,247,201,.46);
}
.footer-cta-copy strong{
  display:block;
  font-size:clamp(1.05rem, 2.2vw, 1.28rem);
  line-height:1.25;
  letter-spacing:-.02em;
}
.footer-cta-copy p{
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.55;
  max-width:42ch;
}
.footer-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.footer-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#f2f3f5;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.footer-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}
.footer-chip-accent{
  background:var(--accent);
  color:#081014;
  border-color:transparent;
  box-shadow:0 10px 28px rgba(124,247,201,.18);
}
.footer-chip-accent:hover{
  background:var(--accent);
  color:#081014;
  box-shadow:0 14px 34px rgba(124,247,201,.26);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}
.footer-col{
  min-width:0;
  padding:16px 16px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
}
.footer-col h3{
  margin:0 0 12px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#d9def2;
}
.footer-list{
  display:grid;
  gap:9px;
}
.footer-list a{
  color:rgba(242,243,245,.88);
  text-decoration:none;
  opacity:.96;
}
.footer-list a:hover{
  opacity:1;
  text-decoration:underline;
}
.footer-bottom{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  color:var(--muted);
  font-size:12px;
}
.footer-bottom a{
  color:inherit;
}

.legal-page{
  padding:26px;
}
.policy-hero p{
  max-width:72ch;
}
.policy-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 18px;
}
.policy-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:18px;
}
.policy-card{
  grid-column:span 6;
  padding:20px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.policy-card.full{
  grid-column:1 / -1;
}
.policy-card h2{
  margin:0 0 12px;
  font-size:24px;
}
.policy-card p{
  margin:0 0 12px;
  color:var(--muted);
  line-height:1.65;
}
.policy-card ul,
.policy-card ol{
  margin:0;
  padding-left:18px;
  color:#d7dbec;
  line-height:1.7;
}
.policy-card li + li{margin-top:8px;}
.policy-callout{
  margin-top:18px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--muted);
}
.contact-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}
.contact-line{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
}
.contact-line strong{
  color:var(--text);
}
.contact-note{
  color:var(--muted);
  font-size:13px;
}
@media (max-width: 980px){
  .site-footer{
    padding:20px;
    border-radius:24px;
  }
  .site-footer::before{
    border-radius:23px;
  }
  .footer-top{
    grid-template-columns:1fr;
    gap:20px;
  }
  .footer-cta-card{
    grid-template-columns:1fr;
    align-items:flex-start;
  }
  .footer-cta-actions{
    justify-content:flex-start;
  }
}
@media (max-width: 900px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .policy-card,
  .policy-card.full{
    grid-column:1 / -1;
  }
  .policy-card h2{
    font-size:21px;
  }
}


/* Enhanced legal pages */
.policy-hero{
  position:relative;
  overflow:hidden;
  padding:30px;
  border-radius:28px;
  isolation:isolate;
}
.policy-hero::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:27px;
  background:linear-gradient(180deg, rgba(8,12,18,.08), rgba(8,12,18,.22));
  z-index:-1;
}
.policy-hero::after{
  content:"";
  position:absolute;
  top:-80px;
  right:-60px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
  opacity:.45;
  pointer-events:none;
}
.policy-hero.policy-theme-privacy{
  background:
    radial-gradient(620px 280px at 0% 0%, rgba(124,247,201,.14), transparent 60%),
    radial-gradient(420px 220px at 100% 0%, rgba(122,167,255,.14), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}
.policy-hero.policy-theme-terms{
  background:
    radial-gradient(620px 280px at 0% 0%, rgba(255,211,122,.14), transparent 60%),
    radial-gradient(420px 220px at 100% 0%, rgba(122,167,255,.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}
.policy-hero.policy-theme-shipping{
  background:
    radial-gradient(620px 280px at 0% 0%, rgba(124,247,201,.12), transparent 60%),
    radial-gradient(420px 220px at 100% 0%, rgba(255,211,122,.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}
.policy-hero.policy-theme-contact{
  background:
    radial-gradient(620px 280px at 0% 0%, rgba(124,247,201,.16), transparent 60%),
    radial-gradient(420px 220px at 100% 0%, rgba(255,122,169,.10), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}
.legal-hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(280px, .9fr);
  gap:18px;
  align-items:stretch;
}
.legal-hero-copy h1{
  margin:0 0 10px;
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.02;
  letter-spacing:-.04em;
}
.legal-hero-copy p{
  max-width:64ch;
}
.legal-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.legal-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  color:#edf2ff;
}
.legal-badge::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 14px rgba(124,247,201,.35);
}
.legal-side-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(320px 160px at 0% 0%, rgba(255,255,255,.05), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.legal-side-card .footer-kicker{
  margin-bottom:0;
}
.legal-side-card strong{
  font-size:1.18rem;
  line-height:1.25;
}
.legal-side-card p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}
.legal-checks{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.legal-checks li{
  position:relative;
  padding-left:18px;
  color:#e7ebf7;
  line-height:1.55;
}
.legal-checks li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 14px rgba(124,247,201,.35);
}
.legal-switcher{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0 0;
}
.legal-switcher a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  color:#eef2ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.legal-switcher a:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
}
.legal-switcher a.active{
  background:var(--accent);
  color:#081014;
  border-color:transparent;
  box-shadow:0 10px 28px rgba(124,247,201,.18);
}
.policy-highlights{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin:0 0 20px;
}
.policy-highlight{
  position:relative;
  overflow:hidden;
  padding:16px 16px 15px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(260px 120px at 0% 0%, rgba(255,255,255,.05), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
}
.policy-highlight::before{
  content:"";
  position:absolute;
  top:0;
  left:16px;
  right:16px;
  height:1px;
  background:linear-gradient(90deg, rgba(124,247,201,.28), rgba(255,255,255,0));
}
.policy-highlight strong{
  display:block;
  margin-bottom:6px;
  font-size:15px;
}
.policy-highlight span{
  display:block;
  color:var(--muted);
  line-height:1.55;
  font-size:13px;
}
.policy-card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:
    radial-gradient(260px 140px at 0% 0%, rgba(255,255,255,.045), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.022));
}
.policy-card::before{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  top:0;
  height:1px;
  background:linear-gradient(90deg, rgba(124,247,201,.30), rgba(255,255,255,0));
}
.policy-card h2{
  font-size:22px;
  letter-spacing:-.02em;
}
.policy-card p + p{
  margin-top:10px;
}
.policy-card ul,
.policy-card ol{
  padding-left:20px;
}
.policy-card li::marker{
  color:rgba(124,247,201,.95);
}
.policy-card.full{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  gap:18px;
  align-items:start;
}
.policy-card.full .policy-callout{
  margin-top:0;
  height:100%;
}
.policy-callout{
  background:
    radial-gradient(260px 110px at 0% 0%, rgba(124,247,201,.08), transparent 70%),
    rgba(255,255,255,.03);
}
.policy-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}
.policy-actions .primary,
.policy-actions .secondary{
  min-height:46px;
}
.legal-note{
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.contact-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}
.contact-page-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:18px;
}
.contact-page-grid .policy-card{
  grid-column:span 6;
}
.contact-page-grid .policy-card.full{
  grid-column:1 / -1;
}
.contact-line{
  gap:8px;
}
.contact-line span{
  color:#eef2ff;
  line-height:1.55;
}
.contact-list{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.contact-list .contact-line{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.contact-actions{
  gap:10px;
}
@media (max-width: 980px){
  .legal-hero-grid{
    grid-template-columns:1fr;
  }
  .policy-highlights{
    grid-template-columns:1fr;
  }
  .policy-card.full{
    grid-template-columns:1fr;
  }
}
@media (max-width: 900px){
  .policy-hero{
    padding:22px;
    border-radius:22px;
  }
  .policy-hero::before{
    border-radius:21px;
  }
  .contact-page-grid .policy-card{
    grid-column:1 / -1;
  }
}



@media (max-width: 900px){
  #cartTable .row{
    grid-template-columns: 90px minmax(0,1fr) !important;
  }
  #cartTable .cell.words{
    overflow: visible;
  }
  #cartTable .cell.words .pill{
    display:flex;
    width:100%;
    max-width:none;
    justify-content:center;
    font-size:clamp(14px, 4.4vw, 18px);
    letter-spacing:.4px;
    white-space:normal;
  }
}


/* Checkout / order page */
.checkout-layout{
  margin-top:24px;
}
.checkout-grid{
  display:grid;
  grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr);
  gap:18px;
}
.checkout-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  padding:18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 42px rgba(0,0,0,.18);
}
.checkout-form-card form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.checkout-field-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
.checkout-field-grid-compact{
  grid-template-columns: minmax(190px, .8fr) minmax(0, 1.2fr);
}
.checkout-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.checkout-field span{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(242,243,245,.78);
}
.checkout-field span small{
  font-size:11px;
  color:rgba(242,243,245,.52);
  text-transform:none;
  letter-spacing:0;
}
.checkout-field input,
.checkout-field select,
.checkout-field textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background: rgba(8,12,18,.55);
  color:var(--text);
  padding:13px 14px;
  font:inherit;
  outline:none;
}
.checkout-field textarea{
  resize:vertical;
  min-height:110px;
}
.checkout-field input:focus,
.checkout-field select:focus,
.checkout-field textarea:focus{
  border-color: rgba(124,247,201,.5);
  box-shadow: 0 0 0 4px rgba(124,247,201,.08);
}
.checkout-note-box{
  border:1px solid rgba(124,247,201,.18);
  background: rgba(124,247,201,.05);
  border-radius:16px;
  padding:14px 15px;
}
.checkout-note-box strong{
  display:block;
  margin-bottom:6px;
}
.checkout-note-box p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

.checkout-status{
  margin:0;
  min-height:42px;
  display:flex;
  align-items:center;
  padding:11px 13px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  color:rgba(242,243,245,.72);
  line-height:1.35;
}
.checkout-status.is-error{
  color:#f4ffc7;
  font-weight:900;
  border-color:rgba(190,255,76,.42);
  background:
    radial-gradient(180px 70px at 0% 50%, rgba(190,255,76,.16), transparent 70%),
    rgba(190,255,76,.09);
  box-shadow:0 0 0 4px rgba(190,255,76,.07), 0 14px 30px rgba(0,0,0,.20);
}
.checkout-status.is-success{
  color:#d7fbe7;
  font-weight:800;
  border-color:rgba(124,247,201,.22);
  background:rgba(124,247,201,.055);
}
.checkout-field input.is-invalid,
.checkout-field select.is-invalid,
.checkout-field textarea.is-invalid{
  border-color:rgba(190,255,76,.70);
  box-shadow:0 0 0 4px rgba(190,255,76,.10);
}
.checkout-field.has-error > span{
  color:#f4ffc7;
  font-weight:900;
}
.checkout-actions{
  margin-top:2px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  align-items:stretch;
}
.checkout-actions .primary,
.checkout-actions .secondary{
  min-height:48px;
  width:100%;
  justify-content:center;
  text-align:center;
}
.checkout-actions a.secondary{
  display:flex;
  align-items:center;
  justify-content:center;
}
.checkout-actions > :last-child{
  grid-column:1 / -1;
}
.checkout-summary-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.checkout-summary-head h3{
  margin:0;
  font-size:1.15rem;
}
.checkout-items{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.checkout-item,
.checkout-total-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.checkout-item{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  border-radius:14px;
  padding:12px 13px;
}
.checkout-item strong{
  display:block;
  line-height:1.15;
}
.checkout-item span{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
}
.checkout-item-meta{
  text-align:right;
  white-space:nowrap;
}
.checkout-item-meta b{
  display:block;
  margin-top:6px;
  font-size:1rem;
}
.checkout-totals{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.checkout-total-line span{
  color:var(--muted);
}
.checkout-total-line strong{
  text-align:right;
}
.checkout-total-line.is-grand{
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.checkout-total-line.is-grand strong{
  font-size:1.1rem;
}
.checkout-empty{
  border:1px dashed rgba(255,255,255,.18);
  border-radius:16px;
  padding:18px;
  color:var(--muted);
  line-height:1.5;
}
@media (max-width: 900px){
  .checkout-grid,
  .checkout-field-grid,
  .checkout-field-grid-compact,
  .checkout-actions{
    grid-template-columns: 1fr;
  }
  .checkout-card{
    padding:16px;
  }
  .checkout-summary-head,
  .checkout-item,
  .checkout-total-line{
    gap:10px;
  }
  .checkout-actions > :last-child{
    grid-column:auto;
  }
}

/* App-brand colors for order contact buttons */
:root{
  --whatsapp-green:#25D366;
  --zalo-blue:#0068FF;
}

#sendWhatsApp,
.sticky-orderbar .secondary.is-whatsapp{
  background:var(--whatsapp-green) !important;
  color:#06140b !important;
  -webkit-text-fill-color:#06140b !important;
  border-color:rgba(37,211,102,.72) !important;
  box-shadow:0 12px 30px rgba(37,211,102,.24) !important;
}

#sendWhatsApp:hover,
.sticky-orderbar .secondary.is-whatsapp:hover{
  filter:brightness(1.04);
  box-shadow:0 14px 34px rgba(37,211,102,.32) !important;
}

#sendZalo,
.sticky-orderbar .secondary.is-zalo{
  background:var(--zalo-blue) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:rgba(0,104,255,.72) !important;
  box-shadow:0 12px 30px rgba(0,104,255,.24) !important;
}

#sendZalo:hover,
.sticky-orderbar .secondary.is-zalo:hover{
  filter:brightness(1.06);
  box-shadow:0 14px 34px rgba(0,104,255,.32) !important;
}

#sendWhatsApp:disabled,
#sendZalo:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:saturate(.75);
}

/* Global app-brand colors for contact buttons across the full site */
:root{
  --whatsapp-green:#25D366;
  --zalo-blue:#0068FF;
  --instagram-purple:#833AB4;
  --instagram-pink:#E1306C;
  --instagram-red:#FD1D1D;
  --instagram-orange:#FCAF45;
}

/* WhatsApp buttons and chips */
a.primary[href*="wa.me"],
a.secondary[href*="wa.me"],
a.footer-chip[href*="wa.me"],
#sendWhatsApp,
#stickySendWhatsApp,
#resellerWA,
#resellerWA2,
#resellerWA3,
#resellerStickyWA,
.sticky-orderbar .secondary.is-whatsapp{
  background:var(--whatsapp-green) !important;
  background-image:none !important;
  color:#06140b !important;
  -webkit-text-fill-color:#06140b !important;
  border-color:rgba(37,211,102,.72) !important;
  box-shadow:0 12px 30px rgba(37,211,102,.24) !important;
}

a.primary[href*="wa.me"]:hover,
a.secondary[href*="wa.me"]:hover,
a.footer-chip[href*="wa.me"]:hover,
#sendWhatsApp:hover,
#stickySendWhatsApp:hover,
#resellerWA:hover,
#resellerWA2:hover,
#resellerWA3:hover,
#resellerStickyWA:hover,
.sticky-orderbar .secondary.is-whatsapp:hover{
  filter:brightness(1.04) !important;
  box-shadow:0 14px 34px rgba(37,211,102,.32) !important;
}

/* Zalo buttons and chips */
a.primary[href*="zalo.me"],
a.secondary[href*="zalo.me"],
a.footer-chip[href*="zalo.me"],
#sendZalo,
#stickySendZalo,
#resellerZalo,
#resellerZalo2,
#resellerStickyZalo,
.sticky-orderbar .secondary.is-zalo{
  background:var(--zalo-blue) !important;
  background-image:none !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:rgba(0,104,255,.72) !important;
  box-shadow:0 12px 30px rgba(0,104,255,.24) !important;
}

a.primary[href*="zalo.me"]:hover,
a.secondary[href*="zalo.me"]:hover,
a.footer-chip[href*="zalo.me"]:hover,
#sendZalo:hover,
#stickySendZalo:hover,
#resellerZalo:hover,
#resellerZalo2:hover,
#resellerStickyZalo:hover,
.sticky-orderbar .secondary.is-zalo:hover{
  filter:brightness(1.06) !important;
  box-shadow:0 14px 34px rgba(0,104,255,.32) !important;
}

/* Instagram buttons and chips */
a.primary[href*="instagram.com"],
a.secondary[href*="instagram.com"],
a.footer-chip[href*="instagram.com"],
.ig-follow,
.ig-cta{
  background:linear-gradient(135deg, var(--instagram-purple) 0%, var(--instagram-pink) 42%, var(--instagram-red) 68%, var(--instagram-orange) 100%) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:rgba(255,255,255,.22) !important;
  box-shadow:0 12px 30px rgba(225,48,108,.24) !important;
  opacity:1 !important;
  font-weight:800 !important;
}

a.primary[href*="instagram.com"]:hover,
a.secondary[href*="instagram.com"]:hover,
a.footer-chip[href*="instagram.com"]:hover,
.ig-follow:hover,
.ig-cta:hover{
  filter:brightness(1.06) !important;
  box-shadow:0 14px 34px rgba(225,48,108,.32) !important;
}

#sendWhatsApp:disabled,
#sendZalo:disabled,
#stickySendWhatsApp:disabled,
#stickySendZalo:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
  filter:saturate(.75) !important;
}


/* DOKY combination explainer */
.combination-panel{
  --panel-glow-1: rgba(124,247,201,.09);
  --panel-glow-2: rgba(255,255,255,.045);
}
.combination-explainer{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
}
.combination-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-bottom:8px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(124,247,201,.22);
  background:rgba(124,247,201,.07);
  color:#d8fbe8;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.combination-copy p{
  margin:0;
  max-width:72ch;
  color:rgba(226,232,240,.84);
  font-size:clamp(15px,1.7vw,18px);
  line-height:1.6;
  font-weight:700;
}
.combination-visual{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(7,10,16,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.combination-visual span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:86px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.055);
  color:var(--text);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}
.combination-visual strong{
  color:var(--accent);
  font-size:20px;
  line-height:1;
}
@media (max-width: 820px){
  .combination-explainer{
    grid-template-columns:1fr;
    gap:14px;
  }
  .combination-visual{
    justify-content:center;
    width:100%;
    flex-wrap:wrap;
  }
}
@media (max-width: 420px){
  .combination-visual span{
    min-width:auto;
    flex:1 1 110px;
  }
}


/* =========================================================
   DOKY Unified Card System — Free DOKY style across shop pages
   Turns collection tables into clean combo cards.
   ========================================================= */

:root{
  --doky-orange:#ff6f00;
  --doky-peak:#addb00;
  --doky-card-border:rgba(255,255,255,.10);
  --doky-card-fill-top:rgba(255,255,255,.065);
  --doky-card-fill-bottom:rgba(255,255,255,.035);
}

.primary,
.secondary,
.btn,
.nav a.btn{
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, filter .16s ease;
}

.primary:hover,
.secondary:hover,
.btn:hover,
.nav a.btn:hover{
  transform:translateY(-1px);
  border-color:rgba(173,219,0,.50);
  background:rgba(255,255,255,.06);
}

.primary,
.nav a.btn.btn-accent,
.secondary.btn-accent{
  background:linear-gradient(135deg, #7cf7c9, #d8ff45);
  color:#071014;
  border-color:transparent;
  box-shadow:0 12px 30px rgba(124,247,201,.18);
}

.card,
.best-card,
.step-card,
.audience-card,
.info-card,
.reseller-card,
.quickpick-card,
.feature-pill,
.campaign-pill,
.free-step{
  border:1px solid var(--doky-card-border);
  background:linear-gradient(180deg, var(--doky-card-fill-top), var(--doky-card-fill-bottom));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

.card:hover,
.best-card:hover,
.step-card:hover,
.audience-card:hover,
.info-card:hover,
.reseller-card:hover,
.quickpick-card:hover{
  border-color:rgba(173,219,0,.40);
  background:linear-gradient(180deg, rgba(173,219,0,.075), rgba(255,255,255,.035));
}

/* Collection pages: replace old horizontal table with Free-DOKY-style combo cards */
body.collection-page .toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px auto;
  gap:12px;
  align-items:center;
  margin:14px 0 14px;
}

body.collection-page .input,
body.collection-page .select{
  min-height:44px;
  border-radius:14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

body.collection-page .colors-bar{
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius:20px;
  padding:14px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

body.collection-page .color-pill,
body.collection-page .chip{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
}

body.collection-page .color-pill.active,
body.collection-page .chip.active{
  border-color:rgba(173,219,0,.82);
  background:rgba(173,219,0,.14);
  box-shadow:0 0 0 3px rgba(173,219,0,.08);
}

body.collection-page .table{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  margin-top:0;
}

body.collection-page .table .row.header{
  display:none !important;
}

body.collection-page .table .row:not(.header){
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  min-height:252px;
  padding:14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

body.collection-page .table .row:not(.header):hover{
  transform:translateY(-2px);
  border-color:rgba(173,219,0,.55);
  background:linear-gradient(180deg, rgba(173,219,0,.10), rgba(255,255,255,.035));
  box-shadow:0 16px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}

body.collection-page .table .cell + .cell{
  border-left:0 !important;
  padding-left:0 !important;
}

body.collection-page .table .cell{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  width:100%;
}

body.collection-page .table .cell.code{
  order:1;
  justify-content:flex-end;
  color:rgba(255,255,255,.55);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  min-height:20px;
}

body.collection-page .table .cell.code::before{
  content:"DOKY";
  margin-right:auto;
  display:inline-flex;
  border-radius:999px;
  padding:4px 9px;
  background:rgba(255,111,0,.13);
  color:#ffb075;
  border:1px solid rgba(255,111,0,.28);
  font-weight:1000;
}

body.collection-page .table .cell.words{
  order:2;
  min-height:50px;
}

body.collection-page .table .cell.words .pill{
  border:0;
  background:transparent;
  padding:0;
  width:100%;
  color:#fff;
  font-size:clamp(24px, 2.2vw, 30px);
  line-height:1;
  font-weight:1000;
  letter-spacing:-.05em;
  text-shadow:0 4px 18px rgba(0,0,0,.22);
}

body.collection-page .table .cell.qty{
  order:3;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
}

body.collection-page .table .cell.color{
  order:4;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  overflow:visible;
}

body.collection-page .table .cell.qty::before,
body.collection-page .table .cell.color::before{
  display:block;
  color:rgba(255,255,255,.58);
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.collection-page .table .cell.qty::before{
  content:"Quantity";
}

body.collection-page .table .cell.color::before{
  content:"Color";
}

body.collection-page .qty-stepper{
  width:100%;
  justify-content:space-between;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
}

body.collection-page .qty-stepper button{
  min-width:46px;
  background:rgba(255,255,255,.04);
}

body.collection-page .qty-stepper input{
  flex:1;
}

body.collection-page .cell.color .color-thumb{
  display:none;
}

body.collection-page .color-chips{
  max-width:none;
  width:100%;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
}

body.collection-page .color-chips .chip{
  justify-content:center;
  padding:9px 10px;
}

body.collection-page .table .cell.cart{
  order:5;
  margin-top:auto;
}

body.collection-page .table .cell.cart .btn{
  width:100%;
  justify-content:center;
  min-height:44px;
  border-radius:14px;
  font-weight:900;
}

body.collection-page .best-card{
  border-radius:20px;
}

body.collection-page .best-words{
  border:0;
  background:transparent;
  padding:0;
  color:#fff;
  font-size:clamp(24px, 2.2vw, 30px);
  line-height:1;
  font-weight:1000;
  letter-spacing:-.05em;
}

body.collection-page .badge{
  border-color:rgba(255,111,0,.28);
  background:rgba(255,111,0,.13);
  color:#ffb075;
  font-weight:900;
}

@media (max-width: 1060px){
  body.collection-page .table{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 760px){
  body.collection-page .toolbar{
    grid-template-columns:1fr;
  }
  body.collection-page .table{
    grid-template-columns:1fr;
  }
  body.collection-page .table .row:not(.header){
    min-height:auto;
  }
  body.collection-page .color-chips{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (prefers-reduced-motion: reduce){
  .primary,
  .secondary,
  .btn,
  .nav a.btn,
  body.collection-page .table .row:not(.header){
    transition:none;
  }
  .primary:hover,
  .secondary:hover,
  .btn:hover,
  .nav a.btn:hover,
  body.collection-page .table .row:not(.header):hover{
    transform:none;
  }
}

/* Shared hero color selector — Home logic reused across section heroes */
.hero-visual.hero-visual--color{
  flex-direction:column;
  gap:14px;
}
.hero-color-picker{
  width:min(100%, 380px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.hero-color-label{
  color:rgba(255,255,255,.66);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-color-buttons{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.hero-color-btn{
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:999px;
  padding:8px 10px;
  font-weight:900;
  font-size:13px;
}
.hero-color-btn.is-active{
  border-color:rgba(173,219,0,.82);
  background:rgba(173,219,0,.14);
  box-shadow:0 0 0 3px rgba(173,219,0,.08);
}
.hero-color-btn .dot{
  width:14px;
  height:14px;
  border-radius:999px;
  display:inline-block;
  border:1px solid rgba(255,255,255,.30);
}
.hero-art{
  transition:opacity .18s ease, transform .18s ease;
}
.hero-art.is-switching{
  opacity:.25;
  transform:scale(.985);
}


@media (max-width: 900px){
  .promo-sticker{
    margin-left:6px;
    padding:4px 7px;
    font-size:9px;
  }
  .pill.words-pill .promo-sticker{
    margin-left:4px;
  }
}


/* =========================================================
   DOKY Navigation Update — collections first + clean mobile menu
   ========================================================= */
.nav{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.nav-links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
}

.nav a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:9px 10px;
  border-radius:14px;
  font-size:14px;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
}

.nav a.nav-free{
  border-color:rgba(255,111,0,.45);
  background:rgba(255,111,0,.08);
  color:#ffd3a8;
}

.nav a.nav-free:hover{
  border-color:rgba(255,111,0,.70);
  background:rgba(255,111,0,.14);
}

.nav a.nav-free.btn-accent{
  background:linear-gradient(135deg, #ff6f00, #ffd37a);
  color:#071014;
  border-color:transparent;
  box-shadow:0 12px 30px rgba(255,111,0,.20);
}

.nav-mobile-actions{
  display:none;
}

.mobile-menu-toggle{
  display:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:14px;
  min-height:40px;
  padding:9px 12px;
  font-size:14px;
  line-height:1;
  font-weight:950;
  cursor:pointer;
}

.mobile-menu-toggle::before{
  content:"☰";
  margin-right:7px;
  font-size:14px;
  line-height:1;
}

body.nav-menu-open .mobile-menu-toggle::before{
  content:"×";
  font-size:18px;
  margin-right:7px;
}

@media (max-width: 980px){
  .nav{
    align-items:flex-start;
  }

  .nav-links{
    flex:1 1 100%;
  }

  .brand .tag{
    max-width:190px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media (max-width: 760px){
  .container{
    padding:14px;
  }

  .nav{
    position:sticky;
    top:0;
    z-index:100;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin:-14px -14px 16px;
    padding:10px 14px;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(11,12,16,.92);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  .brand-wrap{
    flex:1 1 auto;
    min-width:0;
    gap:8px;
  }

  .brand-logo,
  img.brand-logo{
    height:38px;
    max-height:38px;
    max-width:96px;
  }

  .brand .tag{
    max-width:118px;
    font-size:11px;
    line-height:1.15;
  }

  .nav-mobile-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
  }

  .mobile-menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .nav a.nav-cart-mobile{
    display:inline-flex;
  }

  .nav a.nav-cart-desktop{
    display:none;
  }

  .nav-links{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:100%;
    flex:1 0 100%;
    gap:8px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    padding-top:0;
    transition:max-height .24s ease, opacity .18s ease, padding-top .18s ease, visibility .18s ease;
  }

  body.nav-menu-open .nav-links,
  .nav-links.is-open{
    max-height:520px;
    opacity:1;
    visibility:visible;
    padding-top:8px;
  }

  .nav a.btn{
    width:100%;
    min-height:42px;
    padding:10px 9px;
    border-radius:14px;
    font-size:13px;
    letter-spacing:.01em;
    text-align:center;
  }

  .nav a.nav-free{
    grid-column:1 / -1;
  }

  .nav a.btn:hover{
    transform:none;
  }
}

@media (max-width: 380px){
  .brand .tag{
    display:none;
  }

  .nav a.btn,
  .mobile-menu-toggle{
    font-size:12px;
    padding-left:8px;
    padding-right:8px;
  }
}


/* =========================================================
   V21.28 — Home collection cards: more visual + combo-first
   ========================================================= */

.collections-panel{
  --panel-glow-1: rgba(255,111,0,.12);
  --panel-glow-2: rgba(124,247,201,.10);
  --panel-glow-3: rgba(122,167,255,.08);
}

.section-title-collections{
  align-items:flex-start;
}

.section-title-collections > div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.collection-color-note{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(242,243,245,.78);
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
}

.collection-color-note .dot{
  width:8px;
  height:8px;
  background:linear-gradient(135deg, #7cf7c9, #d8ff45);
  box-shadow:0 0 14px rgba(124,247,201,.55);
}

.collections-grid.collections-grid-v2{
  gap:16px;
}

.collections-grid.collections-grid-v2 .collection-card{
  grid-column:span 6;
  min-height:285px;
  padding:18px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  border-radius:20px;
  border-color:rgba(255,255,255,.11);
  background:
    radial-gradient(320px 180px at 98% 2%, rgba(255,255,255,.13), transparent 62%),
    radial-gradient(360px 210px at 0% 0%, rgba(124,247,201,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.026));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 18px 44px rgba(0,0,0,.20);
}

.collections-grid.collections-grid-v2 .collection-card::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.55;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 40%);
}

.collections-grid.collections-grid-v2 .collection-card--explore{ --collection-glow: rgba(255,211,122,.18); }
.collections-grid.collections-grid-v2 .collection-card--vibe{ --collection-glow: rgba(124,247,201,.16); }
.collections-grid.collections-grid-v2 .collection-card--love{ --collection-glow: rgba(255,122,169,.16); }
.collections-grid.collections-grid-v2 .collection-card--airports{ --collection-glow: rgba(122,167,255,.18); }

.collections-grid.collections-grid-v2 .collection-card::after{
  content:"";
  position:absolute;
  right:-72px;
  top:-76px;
  width:230px;
  height:230px;
  border-radius:50%;
  background:radial-gradient(circle, var(--collection-glow), transparent 68%);
  pointer-events:none;
}

.collection-card-top{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 138px;
  gap:14px;
  align-items:start;
}

.collections-grid.collections-grid-v2 .collection-card-body{
  gap:9px;
  min-width:0;
}

.collections-grid.collections-grid-v2 .collection-card h3{
  margin:0;
  font-size:clamp(2.45rem, 4vw, 3.65rem);
  line-height:.90;
  letter-spacing:-.045em;
  color:#f7f8fb;
}

.collections-grid.collections-grid-v2 .collection-card p{
  max-width:26ch;
  font-size:13px;
  line-height:1.45;
  color:rgba(226,232,240,.82);
}

.collections-grid.collections-grid-v2 .collection-card-kicker{
  font-size:10px;
  letter-spacing:.13em;
  color:rgba(226,232,240,.68);
}

.collection-card-preview{
  min-height:136px;
  border-radius:17px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(160px 90px at 50% 20%, rgba(255,255,255,.18), transparent 70%),
    rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 16px 32px rgba(0,0,0,.20);
}

.collection-card-preview img{
  width:100%;
  height:138px;
  object-fit:cover;
  transform:scale(1.06);
  filter:saturate(1.08) contrast(1.05);
}

.collection-combos{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto;
}

.collection-combos span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(8,12,18,.42);
  color:rgba(246,248,251,.92);
  font-size:12px;
  line-height:1;
  font-weight:950;
  letter-spacing:.03em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.collections-grid.collections-grid-v2 .collection-card-cta{
  position:relative;
  z-index:1;
  margin-top:0;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#f7f8fb;
  font-size:12px;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.collections-grid.collections-grid-v2 .collection-card:hover{
  border-color:rgba(173,219,0,.44);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 22px 50px rgba(0,0,0,.26),
    0 0 0 1px rgba(173,219,0,.12);
}

.collections-grid.collections-grid-v2 .collection-card:hover .collection-card-preview img{
  transform:scale(1.10);
}

.collection-card-preview img,
.collections-grid.collections-grid-v2 .collection-card{
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

@media (max-width: 980px){
  .collections-grid.collections-grid-v2 .collection-card{
    min-height:unset;
  }
  .collection-card-top{
    grid-template-columns:minmax(0,1fr) 124px;
  }
  .collection-card-preview img{
    height:124px;
  }
}

@media (max-width: 760px){
  .collections-grid.collections-grid-v2 .collection-card{
    grid-column:span 12;
  }
  .section-title-collections{
    align-items:flex-start;
  }
}

@media (max-width: 520px){
  .collections-grid.collections-grid-v2 .collection-card{
    padding:16px;
  }
  .collection-card-top{
    grid-template-columns:1fr;
  }
  .collection-card-preview{
    min-height:160px;
  }
  .collection-card-preview img{
    height:170px;
  }
  .collection-combos span{
    font-size:11px;
    padding:7px 9px;
  }
}


/* =========================================================
   DOKY language selector — reserved, visible, no emoji flags
   ========================================================= */

.nav{
  display:grid;
  grid-template-columns:auto minmax(290px, 430px) minmax(0, 1fr);
  align-items:center;
  gap:14px;
}

.brand-wrap{
  grid-column:1;
}

.language-choice{
  grid-column:2;
  width:100%;
  min-width:0;
  padding:6px;
  border:1px solid rgba(124,247,201,.42);
  border-radius:22px;
  background:
    radial-gradient(120px 56px at 18% 0%, rgba(124,247,201,.20), transparent 72%),
    linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.035)),
    rgba(10,13,18,.88);
  box-shadow:
    0 16px 34px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.055);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.language-label{
  display:block;
  margin:0 0 5px;
  color:rgba(242,243,245,.58);
  font-size:10px;
  line-height:1;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
}

.language-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}

.language-choice button{
  appearance:none;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  min-width:0;
  min-height:42px;
  padding:7px 9px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(255,255,255,.045);
  color:rgba(242,243,245,.82);
  font:inherit;
  line-height:1;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.language-choice button:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.085);
  color:#fff;
  border-color:rgba(255,255,255,.18);
}

.language-choice button.is-active{
  background:linear-gradient(135deg, #7cf7c9, #d8ff45);
  color:#071014;
  border-color:transparent;
  box-shadow:0 10px 26px rgba(124,247,201,.27);
}

.language-choice button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.flag-css{
  position:relative;
  flex:0 0 auto;
  width:28px;
  height:20px;
  overflow:hidden;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.36);
  box-shadow:0 5px 12px rgba(0,0,0,.28);
}

.flag-en{
  background:
    linear-gradient(90deg, transparent 0 41%, #fff 41% 59%, transparent 59%),
    linear-gradient(0deg, transparent 0 38%, #fff 38% 62%, transparent 62%),
    #173b8f;
}

.flag-en::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 0 45%, #d32030 45% 55%, transparent 55%),
    linear-gradient(0deg, transparent 0 43%, #d32030 43% 57%, transparent 57%);
}

.flag-vi{
  background:#da251d;
}

.flag-vi::before{
  content:"★";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -52%);
  color:#ffdf00;
  font-size:12px;
  line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
}

.lang-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  min-width:0;
}

.lang-text strong{
  font-size:13px;
  font-weight:1000;
  letter-spacing:.05em;
}

.lang-text small{
  color:currentColor;
  opacity:.68;
  font-size:10px;
  font-weight:850;
  letter-spacing:.01em;
  white-space:nowrap;
}

.nav-links{
  grid-column:3;
}

@media (min-width: 981px){
  .nav{
    grid-template-columns:auto minmax(300px, 410px) minmax(0, 1fr);
  }
}

@media (max-width: 980px) and (min-width: 761px){
  .nav{
    grid-template-columns:auto minmax(270px, 360px) minmax(0, 1fr);
    align-items:start;
  }

  .language-choice{
    max-width:360px;
  }

  .language-choice button{
    min-height:40px;
    padding-left:7px;
    padding-right:7px;
  }

  .lang-text small{
    display:none;
  }
}

@media (max-width: 760px){
  .nav{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
  }

  .brand-wrap{
    grid-column:1;
    grid-row:1;
  }

  .nav-mobile-actions{
    grid-column:2;
    grid-row:1;
    display:flex;
    align-items:center;
    gap:8px;
  }

  .language-choice{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    padding:7px;
    border-radius:22px;
    background:
      radial-gradient(220px 68px at 10% 0%, rgba(124,247,201,.22), transparent 70%),
      linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045)),
      rgba(10,13,18,.92);
  }

  .language-label{
    margin-bottom:6px;
    font-size:10px;
  }

  .language-choice button{
    min-height:48px;
    border-radius:16px;
    gap:9px;
  }

  .flag-css{
    width:30px;
    height:21px;
  }

  .lang-text strong{
    font-size:14px;
  }

  .lang-text small{
    font-size:10px;
  }

  .nav-links{
    grid-column:1 / -1;
    grid-row:3;
  }
}

@media (max-width: 430px){
  .language-choice{
    padding:6px;
  }

  .language-choice button{
    min-height:46px;
    padding-left:7px;
    padding-right:7px;
    gap:7px;
  }

  .flag-css{
    width:27px;
    height:19px;
  }

  .lang-text strong{
    font-size:13px;
  }

  .lang-text small{
    font-size:9px;
  }
}

@media (max-width: 360px){
  .language-options{
    gap:4px;
  }

  .language-choice button{
    min-height:44px;
    padding-left:6px;
    padding-right:6px;
  }

  .lang-text small{
    display:none;
  }
}


/* =========================================================
   DOKY V21.36 — language-first header + clean sandwich menu
   Decision:
   - EN / VI has a reserved, visible place.
   - Desktop also uses one clean Menu button instead of wrapping links.
   - Mobile header is NOT sticky.
   ========================================================= */

.nav{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(170px, auto) minmax(360px, 460px) auto !important;
  grid-template-rows:auto auto !important;
  align-items:center !important;
  gap:12px 16px !important;
  padding:16px 0 20px !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  z-index:40 !important;
}

.brand-wrap{
  grid-column:1 !important;
  grid-row:1 !important;
  min-width:0 !important;
}

.nav-mobile-actions{
  grid-column:3 !important;
  grid-row:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  min-width:0 !important;
}

.mobile-menu-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:48px !important;
  padding:0 18px !important;
  border-radius:18px !important;
  border:1px solid rgba(124,247,201,.36) !important;
  background:
    radial-gradient(80px 42px at 20% 0%, rgba(124,247,201,.22), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.045)) !important;
  color:#f7f8fb !important;
  font-size:15px !important;
  font-weight:1000 !important;
  letter-spacing:.01em !important;
  line-height:1 !important;
  cursor:pointer !important;
  box-shadow:0 14px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.mobile-menu-toggle::before{
  content:"☰" !important;
  margin-right:9px !important;
  font-size:18px !important;
  line-height:1 !important;
}

body.nav-menu-open .mobile-menu-toggle{
  border-color:rgba(216,255,69,.62) !important;
  background:linear-gradient(135deg, #7cf7c9, #d8ff45) !important;
  color:#071014 !important;
  box-shadow:0 16px 38px rgba(124,247,201,.24) !important;
}

body.nav-menu-open .mobile-menu-toggle::before{
  content:"×" !important;
  margin-right:9px !important;
  font-size:22px !important;
  line-height:.8 !important;
}

.mobile-menu-toggle:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(124,247,201,.55) !important;
}

.nav a.nav-cart-mobile{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:48px !important;
  padding:0 18px !important;
  border-radius:18px !important;
  background:var(--accent) !important;
  color:#071014 !important;
  border-color:transparent !important;
  font-size:15px !important;
  font-weight:1000 !important;
  box-shadow:0 14px 34px rgba(124,247,201,.22) !important;
}

.nav a.nav-cart-desktop{
  display:none !important;
}

.language-choice{
  grid-column:2 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:460px !important;
  justify-self:center !important;
  padding:6px !important;
  border-radius:22px !important;
  border:1px solid rgba(124,247,201,.44) !important;
  background:
    radial-gradient(180px 58px at 16% 0%, rgba(124,247,201,.22), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.038)),
    rgba(10,13,18,.90) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.055) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}

.language-label{
  margin:0 0 5px !important;
  color:rgba(242,243,245,.62) !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  text-align:center !important;
}

.language-options{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:6px !important;
}

.language-choice button{
  min-height:44px !important;
  padding:7px 10px !important;
  border-radius:16px !important;
  gap:9px !important;
}

.language-choice button.is-active{
  background:linear-gradient(135deg, #7cf7c9, #d8ff45) !important;
  color:#071014 !important;
  border-color:transparent !important;
  box-shadow:0 10px 26px rgba(124,247,201,.28) !important;
}

.flag-css{
  width:30px !important;
  height:21px !important;
  border-radius:6px !important;
}

.lang-text strong{
  font-size:14px !important;
}

.lang-text small{
  font-size:10px !important;
  font-weight:900 !important;
}

.nav .nav-links{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:10px !important;
  width:min(100%, 760px) !important;
  justify-self:end !important;
  margin:0 !important;
  padding:0 !important;
  max-height:0 !important;
  overflow:hidden !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  border-radius:24px !important;
  background:
    radial-gradient(220px 110px at 92% 10%, rgba(124,247,201,.12), transparent 68%),
    linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.035)),
    rgba(10,13,18,.93) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 22px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.055) !important;
  transition:max-height .24s ease, opacity .18s ease, padding .18s ease, visibility .18s ease !important;
}

body.nav-menu-open .nav .nav-links,
.nav .nav-links.is-open{
  max-height:460px !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  padding:14px !important;
}

.nav .nav-links a.btn{
  width:100% !important;
  min-height:48px !important;
  padding:0 13px !important;
  border-radius:16px !important;
  font-size:14px !important;
  font-weight:1000 !important;
  letter-spacing:.01em !important;
  background:rgba(255,255,255,.045) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.nav .nav-links a.btn:hover{
  transform:translateY(-1px) !important;
  background:rgba(255,255,255,.075) !important;
  border-color:rgba(124,247,201,.28) !important;
}

.nav .nav-links a.btn.btn-accent{
  background:var(--accent) !important;
  color:#071014 !important;
  border-color:transparent !important;
}

.nav .nav-links a.nav-free{
  grid-column:span 2 !important;
  background:linear-gradient(135deg, rgba(255,111,0,.20), rgba(255,211,122,.08)) !important;
  border-color:rgba(255,111,0,.50) !important;
  color:#ffd7b0 !important;
}

.nav .nav-links a.nav-free.btn-accent{
  background:linear-gradient(135deg, #ff6f00, #ffd37a) !important;
  color:#071014 !important;
  border-color:transparent !important;
}

@media (max-width: 980px){
  .nav{
    grid-template-columns:minmax(0, 1fr) auto !important;
    grid-template-rows:auto auto auto !important;
    align-items:center !important;
    gap:10px !important;
  }

  .brand-wrap{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  .nav-mobile-actions{
    grid-column:2 !important;
    grid-row:1 !important;
  }

  .language-choice{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    max-width:none !important;
  }

  .nav .nav-links{
    grid-column:1 / -1 !important;
    grid-row:3 !important;
    width:100% !important;
    justify-self:stretch !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px){
  .container{
    padding:14px !important;
  }

  .nav{
    position:relative !important;
    top:auto !important;
    z-index:40 !important;
    margin:0 0 14px !important;
    padding:10px 0 14px !important;
    background:transparent !important;
    border-bottom:0 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .brand-wrap{
    gap:8px !important;
  }

  .brand-logo,
  img.brand-logo{
    height:38px !important;
    max-height:38px !important;
    max-width:96px !important;
  }

  .brand .tag{
    max-width:128px !important;
    font-size:11px !important;
    line-height:1.15 !important;
  }

  .nav-mobile-actions{
    gap:8px !important;
  }

  .mobile-menu-toggle,
  .nav a.nav-cart-mobile{
    min-height:44px !important;
    padding:0 13px !important;
    border-radius:16px !important;
    font-size:13px !important;
  }

  .mobile-menu-toggle::before{
    font-size:17px !important;
    margin-right:7px !important;
  }

  .language-choice{
    padding:7px !important;
    border-radius:22px !important;
  }

  .language-label{
    margin-bottom:6px !important;
  }

  .language-choice button{
    min-height:48px !important;
    border-radius:16px !important;
    padding:7px 8px !important;
  }

  .nav .nav-links{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
    border-radius:22px !important;
  }

  body.nav-menu-open .nav .nav-links,
  .nav .nav-links.is-open{
    padding:10px !important;
    max-height:540px !important;
  }

  .nav .nav-links a.btn{
    min-height:44px !important;
    font-size:13px !important;
    padding:0 9px !important;
    border-radius:14px !important;
  }

  .nav .nav-links a.nav-free{
    grid-column:1 / -1 !important;
  }
}

@media (max-width: 430px){
  .brand .tag{
    max-width:110px !important;
  }

  .mobile-menu-toggle,
  .nav a.nav-cart-mobile{
    min-height:42px !important;
    padding:0 11px !important;
    font-size:12px !important;
  }

  .language-choice button{
    min-height:46px !important;
    gap:7px !important;
  }

  .flag-css{
    width:27px !important;
    height:19px !important;
  }

  .lang-text strong{
    font-size:13px !important;
  }

  .lang-text small{
    font-size:9px !important;
  }
}

@media (max-width: 360px){
  .brand .tag{
    display:none !important;
  }

  .lang-text small{
    display:none !important;
  }
}


/* Big payment reassurance on order page */
.cod-banner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  max-width:720px;
  margin-top:18px;
  padding:20px 24px;
  border-radius:22px;
  border:1px solid rgba(124,247,201,.30);
  background:
    radial-gradient(260px 160px at 88% 12%, rgba(190,255,76,.22), transparent 70%),
    radial-gradient(220px 150px at 8% 18%, rgba(124,247,201,.20), transparent 72%),
    linear-gradient(135deg, rgba(124,247,201,.16), rgba(255,255,255,.055));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 20px 52px rgba(0,0,0,.32),
    0 0 0 4px rgba(124,247,201,.055);
  overflow:hidden;
}
.cod-banner::after{
  content:"";
  position:absolute;
  right:-42px;
  top:-48px;
  width:160px;
  height:160px;
  border-radius:50%;
  background:rgba(124,247,201,.18);
  filter: blur(8px);
  pointer-events:none;
}
.cod-banner-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#d7fbe7;
}
.cod-banner-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 16px rgba(124,247,201,.55);
}
.cod-banner strong{
  font-size:clamp(2rem, 4.8vw, 4.1rem);
  line-height:.95;
  font-weight:950;
  letter-spacing:-.055em;
  color:var(--text);
  text-shadow:0 3px 18px rgba(0,0,0,.25);
}
.cod-banner p{
  max-width:58ch;
  margin:0;
  color:rgba(242,243,245,.82);
  font-weight:800;
}
.checkout-status-cod{
  color:#d7fbe7;
  font-weight:900;
  border-color:rgba(124,247,201,.24);
  background:
    radial-gradient(160px 80px at 0% 50%, rgba(124,247,201,.12), transparent 72%),
    rgba(124,247,201,.055);
}
@media (max-width: 680px){
  .cod-banner{
    padding:16px 17px;
    border-radius:18px;
  }
  .cod-banner strong{
    font-size:clamp(1.95rem, 9.5vw, 3rem);
  }
}


.offer-home-strip{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:8px 0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(124,247,201,.34);
  background:
    radial-gradient(circle at 0% 0%, rgba(124,247,201,.12), transparent 38%),
    rgba(255,255,255,.045);
  color:#eafff8;
  font-weight:900;
  box-shadow:
    0 0 0 1px rgba(197,255,55,.12),
    0 0 18px rgba(124,247,201,.22),
    0 14px 34px rgba(0,0,0,.18);
  animation: offerPulse 2.6s ease-in-out infinite;
}
.offer-home-strip::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  padding:2px;
  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 55deg,
    rgba(197,255,55,.95) 80deg,
    rgba(124,247,201,.95) 105deg,
    transparent 135deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  filter:blur(.2px);
  animation: offerBorderSpin 3.8s linear infinite;
  z-index:-1;
}
.offer-home-strip::after{
  content:"";
  position:absolute;
  inset:-70% -12%;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(124,247,201,0) 38%,
      rgba(197,255,55,.18) 48%,
      rgba(124,247,201,.32) 52%,
      rgba(197,255,55,.18) 56%,
      rgba(124,247,201,0) 66%,
      transparent 100%);
  transform:translateX(-70%) rotate(8deg);
  animation: offerLightSweep 3.2s ease-in-out infinite;
  pointer-events:none;
  z-index:-1;
}
.offer-home-strip span{
  position:relative;
  z-index:1;
}
.offer-home-strip small{
  color:rgba(255,255,255,.66);
  font-weight:750;
}
.offer-home-strip span:last-child{
  white-space:nowrap;
  color:#081014;
  background:var(--accent);
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
  box-shadow:0 0 18px rgba(124,247,201,.26);
}
@keyframes offerBorderSpin{
  to{ transform:rotate(360deg); }
}
@keyframes offerLightSweep{
  0%{ transform:translateX(-70%) rotate(8deg); opacity:.05; }
  18%{ opacity:.95; }
  54%{ transform:translateX(70%) rotate(8deg); opacity:.45; }
  100%{ transform:translateX(70%) rotate(8deg); opacity:.05; }
}
@keyframes offerPulse{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(197,255,55,.10),
      0 0 16px rgba(124,247,201,.18),
      0 14px 34px rgba(0,0,0,.18);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(197,255,55,.34),
      0 0 28px rgba(124,247,201,.36),
      0 0 46px rgba(197,255,55,.18),
      0 14px 34px rgba(0,0,0,.18);
  }
}
@media (prefers-reduced-motion: reduce){
  .offer-home-strip,
  .offer-home-strip::before,
  .offer-home-strip::after{
    animation:none;
  }
}

@media (max-width: 640px){
  .offer-home-strip{
    flex-direction:column;
    align-items:flex-start;
  }
  .offer-home-strip span:last-child{
    width:100%;
    text-align:center;
  }
}


/* Mobile fix — center pricing card content on the home page */
@media (max-width: 520px){
  .hero .hero-price.hero-price-promo{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    align-items:center;
    text-align:center;
  }
  .hero .hero-price-promo .hero-price-label,
  .hero .hero-price-promo strong{
    align-self:center;
  }
  .hero .hero-price-promo .hero-price-note{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:8px 10px;
  }
  .hero .hero-price-promo .price-separator{
    display:none;
  }
  .hero .hero-price-promo .promo-note,
  .hero .hero-price-promo .regular-note{
    text-align:center;
  }
  .hero .hero-price-promo .regular-note{
    flex:0 0 100%;
  }
}

/* =========================
   Scroll reveal + fixed background
   DOKY: sections appear once while scrolling down, then stay normal.
   ========================= */
html{
  background:var(--bg);
}

body{
  position:relative;
  min-height:100vh;
  background:transparent;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 20% 10%, #10142a, var(--bg)),
    var(--bg);
}

.scroll-reveal{
  opacity:0;
  transform:translate3d(0, 26px, 0);
  filter:blur(8px);
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1),
    transform .7s cubic-bezier(.22, 1, .36, 1),
    filter .7s cubic-bezier(.22, 1, .36, 1);
  will-change:opacity, transform, filter;
}

.scroll-reveal.is-visible,
.scroll-reveal.has-revealed{
  opacity:1;
  transform:translate3d(0, 0, 0);
  filter:blur(0);
}

@media (prefers-reduced-motion: reduce){
  .scroll-reveal{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
}