/* ================================================================
   iota international — Inner Pages CSS  (Light Theme)
   Reference: gonoise.com
   ================================================================ */

/* ── Body padding for fixed navbar ── */
.inner-page {
  background: #ffffff;
}

/* ── Navbar always white on inner pages ── */
.inner-page #ann-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
.inner-page #navbar {
  position: fixed !important;
  top: var(--ann-h);
  left: 0;
  right: 0;
  z-index: 900;
  transition: background .38s ease, box-shadow .38s ease;
}
.inner-page #navbar .mega-menu { top: calc(var(--ann-h) + var(--nav-h)) !important; }

/* ---- Top of page: dark navbar (sits over the dark hero), white logo & links ---- */
.inner-page #navbar.at-top {
  background: var(--bg) !important;
  box-shadow: none !important;
}

/* ---- Scrolled: solid white navbar, dark logo & links ---- */
.inner-page #navbar.is-sticky {
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.09), 0 2px 16px rgba(0,0,0,.06) !important;
}
.inner-page #navbar.is-sticky .logo img       { filter: invert(1) !important; }
.inner-page #navbar.is-sticky .nav-link,
.inner-page #navbar.is-sticky .nav-link--mega  { color: rgba(0,0,0,.72) !important; }
.inner-page #navbar.is-sticky .nav-link:hover,
.inner-page #navbar.is-sticky .nav-link--active{ color: #000 !important; background: rgba(0,0,0,.05) !important; }
.inner-page #navbar.is-sticky .nav-icon-btn    { color: rgba(0,0,0,.7) !important; }
.inner-page #navbar.is-sticky .nav-icon-btn:hover{ color: #000 !important; background: rgba(0,0,0,.06) !important; }
.inner-page #navbar.is-sticky .hamburger span  { background: #111 !important; }
.inner-page #navbar.is-sticky .search-bar      { border-color: rgba(0,0,0,.15); color: rgba(0,0,0,.7); background: rgba(0,0,0,.04); }


/* ================================================================
   PAGE HERO — light, minimal (gonoise style)
   ================================================================ */
.page-hero {
  background: #f7f7f7;
  padding: 56px var(--pad-x) 48px;
  border-bottom: 1px solid #eeeeee;
}
.page-hero-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  display: block;
}
.page-hero-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  color: #0a0a0a;
  letter-spacing: -1px;
  line-height: 1.15;
  margin-bottom: 12px;
}
.page-hero-sub {
  font-size: 15px;
  color: rgba(0,0,0,.5);
  max-width: 480px;
  line-height: 1.7;
}

/* ── Breadcrumb ── */
.breadcrumb {
  background: #ffffff;
  padding: 12px var(--pad-x);
  border-bottom: 1px solid #f0f0f0;
}
.breadcrumb-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(0,0,0,.45);
}
.breadcrumb-inner a { color: rgba(0,0,0,.45); transition: color .15s; }
.breadcrumb-inner a:hover { color: var(--accent); }
.breadcrumb-inner .bc-sep { color: rgba(0,0,0,.25); }
.breadcrumb-inner .bc-current { color: rgba(0,0,0,.75); font-weight: 500; }

/* ── Page wrap ── */
.page-wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }

/* ── Sections ── */
.pg-section         { padding: 64px 0; background: #ffffff; }
.pg-section--cream  { padding: 64px 0; background: #f7f7f7; }
.pg-section--dark   { padding: 64px 0; background: #0a0a0a; }
.pg-section-label   { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; display: block; }
.pg-section-title   { font-size: clamp(24px, 3vw, 36px); font-weight: 800; color: #0a0a0a; letter-spacing: -.8px; line-height: 1.2; margin-bottom: 14px; }
.pg-section-sub     { font-size: 15px; color: rgba(0,0,0,.5); line-height: 1.7; max-width: 520px; }


/* ================================================================
   PRODUCT DETAIL PAGE  (gonoise style)
   ================================================================ */

/* ── Layout ── */
.pdp-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px var(--pad-x) 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* ── Gallery ── */
.pdp-gallery { position: sticky; top: calc(var(--ann-h) + var(--nav-h) + 20px); min-width: 0; }

.pdp-main-img {
  border-radius: 16px;
  overflow: hidden;
  background: #f7f7f7;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eeeeee;
}
.pdp-main-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
  display: block;
}

/* Thumbnail strip — single row, horizontally scrollable with prev/next */
.pdp-thumbs-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
/* Viewport: fixed area, clips overflow */
.pdp-thumbs-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
/* Track: holds all thumbs in one row, slides via transform */
.pdp-thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* Prev / Next arrows (shown only when thumbs overflow) */
.pdp-thumb-nav {
  flex-shrink: 0;
  width: 30px; height: 68px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #333;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.pdp-thumbs-wrap.has-overflow .pdp-thumb-nav { display: flex; }
.pdp-thumb-nav:hover { background: #f7f7f7; border-color: var(--accent); color: var(--accent); }
.pdp-thumb-nav:disabled { opacity: .3; cursor: default; }
.pdp-thumb-nav:disabled:hover { background: #fff; border-color: #e0e0e0; color: #333; }

.pdp-thumb {
  width: 68px; height: 68px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #eeeeee;
  cursor: pointer;
  background: #f7f7f7;
  transition: border-color .18s;
  flex-shrink: 0;
}
.pdp-thumb.is-active, .pdp-thumb:hover { border-color: var(--accent); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

/* ── Info column ── */
.pdp-info { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }

.pdp-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: lowercase;
  color: var(--accent);
}

.pdp-title {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  color: #0a0a0a;
  letter-spacing: -.4px;
  line-height: 1.3;
}

.pdp-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdp-stars { color: #f5a623; font-size: 15px; letter-spacing: 1px; }
.pdp-rating-count { font-size: 13px; color: rgba(0,0,0,.45); border-bottom: 1px solid rgba(0,0,0,.25); }

/* Price */
.pdp-price-wrap { background: #f7f7f7; border-radius: 12px; padding: 16px 18px; }
.pdp-price-row  { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.pdp-price-sale {
  font-size: 30px;
  font-weight: 900;
  color: #0a0a0a;
  letter-spacing: -1px;
  line-height: 1;
}
.pdp-price-mrp  { font-size: 16px; color: rgba(0,0,0,.4); text-decoration: line-through; }
.pdp-price-off  {
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}
.pdp-tax-note { font-size: 11.5px; color: rgba(0,0,0,.4); margin-top: 4px; }

/* Delivery info pills */
.pdp-delivery-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pdp-del-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(0,0,0,.65);
  background: #f7f7f7;
  border-radius: 8px;
  padding: 9px 12px;
}
.pdp-del-item strong { color: #0a0a0a; }
.pdp-del-icon { color: var(--accent); flex-shrink: 0; }

/* Qty + CTA */
.pdp-qty-row { display: flex; align-items: center; gap: 14px; }
.pdp-qty-label { font-size: 13.5px; font-weight: 600; color: rgba(0,0,0,.65); }
.pdp-qty-ctrl {
  display: flex;
  align-items: center;
  border: 1.5px solid #dddddd;
  border-radius: 8px;
  overflow: hidden;
}
.pdp-qty-btn {
  width: 36px; height: 36px;
  background: none; border: none;
  font-size: 18px; color: #333; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.pdp-qty-btn:hover { background: #f0f0f0; }
.pdp-qty-num {
  width: 44px; text-align: center;
  font-size: 15px; font-weight: 700; color: #0a0a0a;
  border: none;
  border-left: 1.5px solid #ddd;
  border-right: 1.5px solid #ddd;
  outline: none; background: none;
}

.pdp-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pdp-btn-cart {
  flex: 1; min-width: 140px;
  padding: 15px 20px;
  background: #0a0a0a;
  color: #ffffff;
  border-radius: 10px;
  border: none;
  font: 700 14.5px/1 var(--font);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .18s, transform .18s;
}
.pdp-btn-cart:hover { background: #222; transform: translateY(-1px); }

.pdp-btn-buy {
  flex: 1; min-width: 140px;
  padding: 15px 20px;
  background: var(--accent);
  color: #ffffff;
  border-radius: 10px;
  border: none;
  font: 700 14.5px/1 var(--font);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .18s, transform .18s;
  text-decoration: none;
}
.pdp-btn-buy:hover { background: var(--accent-h); transform: translateY(-1px); }

.pdp-btn-wish {
  width: 50px; height: 50px;
  border-radius: 10px;
  border: 1.5px solid #ddd;
  background: #fff; color: rgba(0,0,0,.45); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s, color .18s;
  flex-shrink: 0;
}
.pdp-btn-wish:hover { border-color: var(--accent); color: var(--accent); }

/* Features */
.pdp-features { display: flex; flex-direction: column; gap: 10px; }
.pdp-feat-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: rgba(0,0,0,.65); line-height: 1.55;
}
.pdp-feat-item strong { color: #0a0a0a; font-weight: 700; }
.pdp-feat-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(232,80,42,.1); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}

/* Badge row */
.pdp-badge-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pdp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.pdp-badge--instock { background: #e8f5e9; color: #2e7d32; }
.pdp-badge--soon    { background: #fff3e0; color: #e65100; }
.pdp-badge--new     { background: #e3f2fd; color: #1565c0; }

/* ── Product Tabs ── */
.pdp-tabs-section { background: #ffffff; padding: 0 var(--pad-x) 64px; border-top: 1px solid #f0f0f0; }
.pdp-tabs-wrap    { max-width: 1200px; margin: 0 auto; padding-top: 40px; }
.pdp-tab-btns {
  display: flex; gap: 0;
  border-bottom: 2px solid #eeeeee;
  margin-bottom: 32px;
}
.pdp-tab-btn {
  padding: 12px 24px; background: none; border: none;
  font: 600 14px var(--font); color: rgba(0,0,0,.45); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .18s, border-color .18s;
}
.pdp-tab-btn.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.pdp-tab-btn:hover     { color: #0a0a0a; }
.pdp-tab-panel         { display: none; }
.pdp-tab-panel.is-active { display: block; }

/* Spec table */
.pdp-spec-table { width: 100%; border-collapse: collapse; }
.pdp-spec-table tr { border-bottom: 1px solid #f5f5f5; }
.pdp-spec-table td { padding: 12px 16px; font-size: 13.5px; vertical-align: top; }
.pdp-spec-table td:first-child { font-weight: 600; color: rgba(0,0,0,.5); width: 200px; background: #fafafa; }
.pdp-spec-table td:last-child  { color: #0a0a0a; }

/* ── Why Buy From Us strip ── */
.pdp-why-strip {
  background: #f7f7f7;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  padding: 20px var(--pad-x);
}
.pdp-why-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 0; flex-wrap: wrap;
}
.pdp-why-item {
  flex: 1; min-width: 160px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  font-size: 13px; color: rgba(0,0,0,.65);
  border-right: 1px solid #e8e8e8;
}
.pdp-why-item:last-child { border-right: none; }
.pdp-why-icon { color: var(--accent); flex-shrink: 0; }
.pdp-why-item strong { color: #0a0a0a; font-weight: 700; display: block; font-size: 13px; }
.pdp-why-item span   { font-size: 11.5px; color: rgba(0,0,0,.45); }

/* ── Related products ── */
.pdp-related { background: #f7f7f7; padding: 56px var(--pad-x); border-top: 1px solid #eeeeee; }
.pdp-related-wrap { max-width: var(--max-w); margin: 0 auto; }
.pdp-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

/* Responsive PDP */
@media (max-width: 860px) {
  .pdp-wrap { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  .pdp-gallery { position: static; }
  .pdp-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pdp-wrap { padding: 16px 14px 48px; }
  .pdp-cta-row { flex-direction: column; }
  .pdp-btn-cart, .pdp-btn-buy { width: 100%; }
  .pdp-delivery-info { grid-template-columns: 1fr; gap: 6px; }
  .pdp-price-sale { font-size: 26px; }
}


/* ================================================================
   ALL PRODUCTS PAGE
   ================================================================ */
.shop-section { background: #f7f7f7; padding: 40px var(--pad-x) 72px; }
.shop-wrap    { max-width: var(--max-w); margin: 0 auto; }
.shop-grid    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 380px)  { .shop-grid { grid-template-columns: 1fr; } }


/* ================================================================
   ABOUT PAGE  (redesigned — light only, video hero)
   ================================================================ */

/* ── Hero (light, centered, with brand video) ── */
.about-hero {
  background: #f7f7f7;
  padding: 60px var(--pad-x) 56px;
  text-align: center;
}
.about-hero-wrap { max-width: 1080px; margin: 0 auto; }
.about-hero-label {
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px; display: block;
}
.about-hero-title {
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 800; color: #0a0a0a;
  letter-spacing: -1.4px; line-height: 1.1; margin-bottom: 16px;
}
.about-hero-sub {
  font-size: 16px; color: rgba(0,0,0,.55);
  line-height: 1.7; max-width: 600px; margin: 0 auto;
}
.about-hero-video {
  position: relative;
  margin: 40px auto 0;
  max-width: 1080px;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 24px 70px rgba(0,0,0,.20);
}
.about-hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Stats band ── */
.about-stats { background: #ffffff; padding: 48px var(--pad-x); }
.about-stat-grid {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: #ececec;
  border-radius: 18px; overflow: hidden; border: 1px solid #ececec;
}
.about-stat-item { background: #ffffff; padding: 30px 20px; text-align: center; }
.about-stat-num   { font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; color: #0a0a0a; letter-spacing: -1px; }
.about-stat-num span { color: var(--accent); }
.about-stat-label { font-size: 12px; color: rgba(0,0,0,.45); letter-spacing: .5px; text-transform: uppercase; margin-top: 6px; }
@media (max-width: 700px) { .about-stat-grid { grid-template-columns: 1fr 1fr; } }

/* ── Generic light card helpers ── */
.about-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.about-card {
  background: #ffffff; border: 1px solid #eee;
  border-radius: 22px; padding: 38px;
}
.about-card--cream { background: #fcf7ee; border-color: #f0e6d6; }
.about-card-kicker { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.about-card-title  { font-size: 21px; font-weight: 800; color: #0a0a0a; margin-bottom: 14px; letter-spacing: -.4px; line-height: 1.3; }
.about-card-text   { font-size: 14.5px; color: rgba(0,0,0,.6); line-height: 1.8; }
.about-quote {
  background: #fcf7ee; border: 1px solid #f0e6d6; border-radius: 22px; padding: 40px;
  display: flex; flex-direction: column; gap: 18px; justify-content: center;
}
.about-quote blockquote { font-size: 22px; font-weight: 700; color: #0a0a0a; line-height: 1.45; font-style: italic; }
.about-quote cite { font-size: 13px; color: rgba(0,0,0,.45); font-style: normal; }
.about-client-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.about-client-tags span { background: #f4f4f4; padding: 8px 16px; border-radius: 100px; font-size: 13px; font-weight: 600; color: rgba(0,0,0,.7); }

/* ── Factory ecosystem gallery ── */
.about-factory-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-top: 40px;
}
.about-factory-card {
  background: #fff; border: 1px solid #eee; border-radius: 18px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .22s, transform .22s;
}
.about-factory-card:hover { box-shadow: 0 14px 40px rgba(0,0,0,.12); transform: translateY(-4px); }
.about-factory-img { aspect-ratio: 4 / 3; overflow: hidden; background: #f2f2f2; }
.about-factory-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.about-factory-card:hover .about-factory-img img { transform: scale(1.06); }
.about-factory-body { padding: 16px 18px 18px; }
.about-factory-name { font-size: 15.5px; font-weight: 700; color: #0a0a0a; margin-bottom: 3px; }
.about-factory-role { font-size: 12.5px; color: rgba(0,0,0,.5); }
.about-factory-tag  { display: inline-block; margin-top: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); background: rgba(232,80,42,.08); padding: 3px 9px; border-radius: 100px; }
/* Summary card (fills 6th cell, light accent) */
.about-factory-card--summary { background: #fcf7ee; border-color: #f0e6d6; justify-content: center; align-items: center; text-align: center; padding: 28px; }
.about-factory-summary-num { font-size: 46px; font-weight: 900; color: var(--accent); letter-spacing: -2px; line-height: 1; }
.about-factory-summary-title { font-size: 16px; font-weight: 800; color: #0a0a0a; margin: 10px 0 6px; }
.about-factory-summary-text  { font-size: 13px; color: rgba(0,0,0,.55); line-height: 1.6; }

/* ── Capabilities highlight box ── */
.about-caps { background: #fcf7ee; border: 1px solid #f0e6d6; border-radius: 22px; padding: 34px 38px; margin-top: 24px; }
.about-caps h3 { font-size: 18px; font-weight: 700; color: #0a0a0a; margin-bottom: 18px; }
.about-caps ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; }
.about-caps li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: rgba(0,0,0,.65); line-height: 1.5; }
.about-caps li svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

/* ── Light CTA ── */
.about-cta { background: #f7f7f7; padding: 72px var(--pad-x); text-align: center; border-top: 1px solid #eee; }
.about-cta-title { font-size: clamp(26px, 4vw, 42px); font-weight: 800; color: #0a0a0a; letter-spacing: -1px; margin-bottom: 14px; }
.about-cta-sub   { font-size: 15px; color: rgba(0,0,0,.55); max-width: 500px; margin: 0 auto 30px; line-height: 1.7; }
.about-cta-btns  { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.about-cta-btn   { padding: 14px 32px; border-radius: 100px; font-weight: 700; font-size: 14.5px; text-decoration: none; transition: transform .15s, background .15s; }
.about-cta-btn--primary { background: var(--accent); color: #fff; }
.about-cta-btn--primary:hover { background: var(--accent-h); transform: translateY(-2px); }
.about-cta-btn--ghost { background: #fff; color: #0a0a0a; border: 1.5px solid #ddd; }
.about-cta-btn--ghost:hover { border-color: #0a0a0a; transform: translateY(-2px); }

/* ── Trusted-by client logos marquee ── */
.about-logos-marquee {
  overflow: hidden;
  padding: 26px 0;
  background: #ffffff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.about-logos-track {
  display: flex; align-items: center;
  width: max-content;
  animation: marqueeScroll 50s linear infinite;
}
.about-logos-marquee:hover .about-logos-track { animation-play-state: paused; }
.about-logo {
  height: 44px; width: auto; object-fit: contain;
  padding: 0 34px; flex-shrink: 0;
  opacity: .6; filter: grayscale(100%);
  transition: opacity .25s, filter .25s;
}
.about-logo:hover { opacity: 1; filter: grayscale(0); }

/* ── Journey timeline ── */
.about-timeline { position: relative; max-width: 780px; margin: 40px auto 0; }
.about-tl-item { position: relative; padding: 0 0 30px 46px; }
.about-tl-item::after {
  content: ''; position: absolute; left: 7px; top: 6px; bottom: -2px;
  width: 2px; background: #f0e0d4;
}
.about-tl-item:last-child { padding-bottom: 0; }
.about-tl-item:last-child::after { display: none; }
.about-tl-item::before {
  content: ''; position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(232,80,42,.10);
}
.about-tl-year  { font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: .5px; margin-bottom: 4px; }
.about-tl-title { font-size: 16.5px; font-weight: 700; color: #0a0a0a; margin-bottom: 5px; }
.about-tl-text  { font-size: 13.5px; color: rgba(0,0,0,.6); line-height: 1.65; }

/* ── Scroll reveal (progressive enhancement) ── */
.has-reveal .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.has-reveal .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .has-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Founder's message (editorial) ── */
.about-founder-card {
  position: relative;
  max-width: 920px; margin: 0 auto;
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 28px;
  padding: 50px 54px;
  box-shadow: 0 20px 54px rgba(0,0,0,.07);
  overflow: hidden;
}
.about-founder-card::before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), #f1a98e);
}
.about-founder-glyph {
  position: absolute; top: 6px; right: 36px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 150px; line-height: 1; font-weight: 700;
  color: rgba(232,80,42,.07); pointer-events: none; user-select: none;
}
.about-founder-label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px; position: relative; z-index: 1;
}
.about-founder-label::before { content: ''; width: 26px; height: 2px; background: var(--accent); }
.about-founder-quote {
  position: relative; z-index: 1;
  font-size: clamp(19px, 2.3vw, 26px);
  color: #0a0a0a; line-height: 1.5; font-weight: 500;
  letter-spacing: -.3px; margin-bottom: 30px; max-width: 780px;
}
.about-founder-sign {
  display: flex; align-items: center; gap: 18px;
  border-top: 1px solid #f0f0f0; padding-top: 24px;
}
.about-founder-avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 21px; font-weight: 800; letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(232,80,42,.12);
}
.about-founder-meta { flex: 1; min-width: 0; }
.about-founder-name { font-size: 16px; font-weight: 800; color: #0a0a0a; }
.about-founder-role { font-size: 12.5px; color: rgba(0,0,0,.5); margin-top: 2px; }
.about-founder-signature {
  font-family: 'Caveat', cursive; font-size: 40px; line-height: 1;
  color: var(--accent); margin-left: auto; transform: rotate(-4deg);
}
@media (max-width: 640px) {
  .about-founder-card { padding: 34px 26px; }
  .about-founder-glyph { font-size: 110px; right: 18px; }
  .about-founder-signature { display: none; }
}

/* ── How We Build — process steps ── */
.about-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 40px; }
.about-step {
  background: #fff; border: 1px solid #eee; border-radius: 16px;
  padding: 26px 18px 22px; text-align: center; position: relative;
}
.about-step-icon {
  width: 50px; height: 50px; border-radius: 14px;
  background: rgba(232,80,42,.08); color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.about-step-num { position: absolute; top: 12px; right: 14px; font-size: 13px; font-weight: 800; color: rgba(0,0,0,.12); }
.about-step-title { font-size: 14px; font-weight: 700; color: #0a0a0a; margin-bottom: 5px; }
.about-step-text  { font-size: 12px; color: rgba(0,0,0,.5); line-height: 1.5; }
@media (max-width: 860px) { .about-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .about-steps { grid-template-columns: 1fr; } }

/* ── Certifications & compliance ── */
.about-certs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 38px; }
.about-cert {
  background: #fff; border: 1px solid #eee; border-radius: 16px;
  padding: 24px 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.about-cert:hover { box-shadow: 0 12px 32px rgba(0,0,0,.08); transform: translateY(-3px); border-color: #e6e6e6; }
.about-cert-img   { height: 50px; width: auto; object-fit: contain; }
.about-cert-badge {
  width: 50px; height: 50px; border-radius: 13px;
  background: rgba(232,80,42,.08); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; letter-spacing: .5px;
}
.about-cert-label { font-size: 12px; font-weight: 700; color: #0a0a0a; line-height: 1.35; }
@media (max-width: 820px) { .about-certs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .about-certs { grid-template-columns: 1fr 1fr; } }

@media (max-width: 820px) {
  .about-grid-2 { grid-template-columns: 1fr; gap: 18px; }
  .about-factory-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .about-factory-grid { grid-template-columns: 1fr; }
  .about-caps ul { grid-template-columns: 1fr; }
  .about-card, .about-quote, .about-caps { padding: 24px; }
  .about-hero-video { border-radius: 16px; }
}


/* ================================================================
   CONTACT PAGE
   ================================================================ */
.contact-section { background: #f7f7f7; padding: 56px var(--pad-x) 72px; }
.contact-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: 32px; align-items: start;
}
.contact-form-card {
  background: #ffffff; border-radius: 20px;
  padding: 36px; box-shadow: 0 2px 20px rgba(0,0,0,.06);
}
.contact-field { margin-bottom: 16px; }
.contact-label { display: block; font-size: 12.5px; font-weight: 600; color: rgba(0,0,0,.6); margin-bottom: 6px; }
.contact-input, .contact-textarea, .contact-select {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid #e8e8e8; border-radius: 10px;
  font: 400 14px var(--font); color: #0a0a0a; background: #fafafa;
  transition: border-color .18s, box-shadow .18s; outline: none;
}
.contact-input:focus, .contact-textarea:focus, .contact-select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,80,42,.1); background: #fff;
}
.contact-textarea { resize: vertical; min-height: 120px; }
.contact-submit {
  width: 100%; padding: 14px;
  background: var(--accent); color: #fff; border: none; border-radius: 10px;
  font: 700 14.5px var(--font); cursor: pointer; transition: background .18s; margin-top: 6px;
}
.contact-submit:hover { background: var(--accent-h); }
.contact-info-card { display: flex; flex-direction: column; gap: 14px; }
.contact-info-item {
  display: flex; align-items: flex-start; gap: 14px;
  background: #ffffff; border-radius: 14px; padding: 18px;
  box-shadow: 0 1px 8px rgba(0,0,0,.05);
}
.contact-info-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(232,80,42,.08); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-info-title { font-size: 11px; font-weight: 700; color: rgba(0,0,0,.4); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 4px; }
.contact-info-val   { font-size: 13.5px; color: #0a0a0a; line-height: 1.55; }
.contact-info-val a { color: #0a0a0a; }
.contact-info-val a:hover { color: var(--accent); }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } .contact-form-card { padding: 24px; } }


/* ================================================================
   AUTH PAGE
   ================================================================ */
.auth-section {
  background: #f7f7f7;
  min-height: calc(100vh - var(--ann-h) - var(--nav-h));
  display: flex; align-items: center; justify-content: center;
  padding: 40px var(--pad-x);
}
.auth-card {
  background: #ffffff; border-radius: 20px;
  padding: 40px 36px; width: 100%; max-width: 440px;
  box-shadow: 0 4px 40px rgba(0,0,0,.09);
}
.auth-logo        { text-align: center; margin-bottom: 24px; }
.auth-logo-text   { font-size: 26px; font-weight: 800; color: #0a0a0a; }
.auth-logo-int    { font-weight: 300; color: rgba(0,0,0,.4); }
.auth-tabs        { display: flex; background: #f2f2f2; border-radius: 10px; padding: 3px; margin-bottom: 24px; }
.auth-tab         { flex: 1; padding: 9px; text-align: center; font: 600 13.5px var(--font); color: rgba(0,0,0,.45); cursor: pointer; border-radius: 8px; border: none; background: none; transition: all .18s; }
.auth-tab.is-active { background: #fff; color: #0a0a0a; box-shadow: 0 1px 6px rgba(0,0,0,.1); }
.auth-panel       { display: none; }
.auth-panel.is-active { display: block; }
.auth-field       { margin-bottom: 14px; }
.auth-label       { display: block; font-size: 12.5px; font-weight: 600; color: rgba(0,0,0,.6); margin-bottom: 6px; }
.auth-input       { width: 100%; padding: 11px 14px; border: 1.5px solid #e8e8e8; border-radius: 10px; font: 400 14px var(--font); color: #0a0a0a; background: #fafafa; outline: none; transition: border-color .18s, box-shadow .18s; }
.auth-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,80,42,.1); background: #fff; }
.auth-input-row   { position: relative; }
.auth-eye         { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: rgba(0,0,0,.35); padding: 4px; }
.auth-row         { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 12.5px; }
.auth-row label   { display: flex; align-items: center; gap: 7px; color: rgba(0,0,0,.6); cursor: pointer; }
.auth-forgot      { color: var(--accent); font-weight: 600; }
.auth-btn         { width: 100%; padding: 13px; background: var(--accent); color: #fff; border: none; border-radius: 10px; font: 700 14.5px var(--font); cursor: pointer; transition: background .18s; margin-bottom: 12px; }
.auth-btn:hover   { background: var(--accent-h); }
.auth-divider     { text-align: center; color: rgba(0,0,0,.3); font-size: 12px; margin: 12px 0; position: relative; }
.auth-divider::before, .auth-divider::after { content: ''; position: absolute; top: 50%; width: 42%; height: 1px; background: #e8e8e8; }
.auth-divider::before { left: 0; } .auth-divider::after { right: 0; }
.auth-google-btn  { width: 100%; padding: 12px; background: #fff; border: 1.5px solid #e0e0e0; border-radius: 10px; font: 600 13.5px var(--font); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; color: #0a0a0a; transition: border-color .18s; text-decoration: none; }
.auth-google-btn:hover { border-color: #aaa; }
.auth-switch      { text-align: center; font-size: 13px; color: rgba(0,0,0,.45); margin-top: 18px; }
.auth-switch a    { color: var(--accent); font-weight: 700; }
@media (max-width: 500px) { .auth-card { padding: 28px 18px; border-radius: 16px; } }


/* ================================================================
   FAQ PAGE
   ================================================================ */
.faq-section { background: #f7f7f7; padding: 56px var(--pad-x) 72px; }
.faq-wrap     { max-width: 780px; margin: 0 auto; }
.faq-cat-heading { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(0,0,0,.4); margin: 28px 0 12px; }
.faq-item     { background: #ffffff; border-radius: 14px; margin-bottom: 8px; overflow: hidden; border: 1px solid #f0f0f0; }
.faq-q        { width: 100%; padding: 18px 20px; background: none; border: none; text-align: left; font: 600 14.5px var(--font); color: #0a0a0a; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; transition: color .18s; }
.faq-q:hover  { color: var(--accent); }
.faq-chevron  { flex-shrink: 0; transition: transform .3s; color: rgba(0,0,0,.3); }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); color: var(--accent); }
.faq-item.is-open .faq-q { color: var(--accent); }
.faq-a        { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .3s ease; padding: 0 20px; font-size: 14px; color: rgba(0,0,0,.6); line-height: 1.75; }
.faq-item.is-open .faq-a { max-height: 280px; padding: 0 20px 18px; }


/* ================================================================
   POLICY PAGES
   ================================================================ */
.policy-section { background: #ffffff; padding: 56px var(--pad-x) 72px; }
.policy-wrap    { max-width: 800px; margin: 0 auto; }
.policy-last-updated { font-size: 12px; color: rgba(0,0,0,.35); margin-bottom: 28px; }
.policy-wrap h2 { font-size: 19px; font-weight: 800; color: #0a0a0a; margin: 28px 0 10px; }
.policy-wrap h3 { font-size: 16px; font-weight: 700; color: #0a0a0a; margin: 20px 0 8px; }
.policy-wrap p  { font-size: 14.5px; color: rgba(0,0,0,.6); line-height: 1.8; margin-bottom: 12px; }
.policy-wrap ul { margin: 0 0 14px 20px; }
.policy-wrap li { font-size: 14px; color: rgba(0,0,0,.6); line-height: 1.75; margin-bottom: 5px; list-style: disc; }
.policy-wrap a  { color: var(--accent); }


/* ================================================================
   BLOG PAGE
   ================================================================ */
.blog-section { background: #f7f7f7; padding: 48px var(--pad-x) 72px; }
.blog-grid    { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-card    { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #f0f0f0; transition: box-shadow .22s, transform .22s; text-decoration: none; display: flex; flex-direction: column; }
.blog-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.1); transform: translateY(-3px); }
.blog-card-img   { aspect-ratio: 16/9; overflow: hidden; background: #f5f5f5; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-card-body  { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.blog-card-cat   { font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
.blog-card-title { font-size: 15.5px; font-weight: 700; color: #0a0a0a; line-height: 1.4; flex: 1; }
.blog-card-date  { font-size: 12px; color: rgba(0,0,0,.38); }
.blog-card-link  { font-size: 13px; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; }
@media (max-width: 860px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }


/* ================================================================
   CART / WISHLIST
   ================================================================ */
.cart-section   { background: #f7f7f7; padding: 40px var(--pad-x) 72px; min-height: 60vh; }
.cart-grid      { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.cart-items     { display: flex; flex-direction: column; gap: 10px; }
.cart-item      { background: #fff; border-radius: 14px; padding: 14px; display: flex; align-items: center; gap: 14px; border: 1px solid #f0f0f0; }
.cart-item-img  { width: 84px; height: 84px; border-radius: 10px; object-fit: contain; background: #f7f7f7; padding: 8px; flex-shrink: 0; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: 14.5px; font-weight: 700; color: #0a0a0a; margin-bottom: 4px; }
.cart-item-meta { font-size: 12px; color: rgba(0,0,0,.4); }
.cart-item-price { font-size: 15px; font-weight: 800; color: #0a0a0a; white-space: nowrap; }
.cart-item-remove { background: none; border: none; color: rgba(0,0,0,.3); cursor: pointer; padding: 6px; border-radius: 7px; transition: color .15s, background .15s; }
.cart-item-remove:hover { color: #e53935; background: rgba(229,57,53,.08); }
.cart-summary   { background: #fff; border-radius: 16px; padding: 24px; border: 1px solid #f0f0f0; position: sticky; top: calc(var(--ann-h) + var(--nav-h) + 16px); }
.cart-summary-title { font-size: 16px; font-weight: 800; color: #0a0a0a; margin-bottom: 18px; }
.cart-summary-row   { display: flex; justify-content: space-between; font-size: 13.5px; color: rgba(0,0,0,.6); margin-bottom: 10px; }
.cart-summary-row.total { font-weight: 800; font-size: 15.5px; color: #0a0a0a; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 4px; }
.cart-checkout-btn { width: 100%; padding: 14px; background: var(--accent); color: #fff; border: none; border-radius: 10px; font: 700 14.5px var(--font); cursor: pointer; margin-top: 18px; transition: background .18s; }
.cart-checkout-btn:hover { background: var(--accent-h); }
.cart-empty        { text-align: center; padding: 72px 24px; background: #fff; border-radius: 16px; border: 1px solid #f0f0f0; }
.cart-empty-icon   { font-size: 52px; margin-bottom: 14px; }
.cart-empty-title  { font-size: 19px; font-weight: 700; color: #0a0a0a; margin-bottom: 7px; }
.cart-empty-sub    { font-size: 13.5px; color: rgba(0,0,0,.45); margin-bottom: 22px; }
.cart-empty-btn    { display: inline-block; padding: 12px 28px; background: var(--accent); color: #fff; border-radius: 100px; font-weight: 700; text-decoration: none; }
@media (max-width: 800px) { .cart-grid { grid-template-columns: 1fr; } }


/* ================================================================
   TRACK ORDER / SIMPLE FORMS
   ================================================================ */
.track-section    { background: #f7f7f7; padding: 56px var(--pad-x) 72px; min-height: 60vh; }
.track-card       { max-width: 540px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 36px; border: 1px solid #f0f0f0; box-shadow: 0 2px 24px rgba(0,0,0,.06); }
.track-card-title { font-size: 22px; font-weight: 800; color: #0a0a0a; margin-bottom: 7px; }
.track-card-sub   { font-size: 13.5px; color: rgba(0,0,0,.45); margin-bottom: 24px; line-height: 1.6; }


/* ================================================================
   COMING SOON PAGE
   ================================================================ */
.cs-section {
  background: #f7f7f7;
  padding: 48px var(--pad-x) 72px;
}
.cs-hero {
  text-align: center;
  padding: 48px 0 40px;
  max-width: 560px;
  margin: 0 auto 48px;
}
.cs-label  { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; display: block; }
.cs-title  { font-size: clamp(28px, 4vw, 44px); font-weight: 800; color: #0a0a0a; letter-spacing: -1.2px; margin-bottom: 14px; line-height: 1.1; }
.cs-sub    { font-size: 15px; color: rgba(0,0,0,.5); line-height: 1.7; margin-bottom: 28px; }
.cs-notify-form  { display: flex; gap: 8px; max-width: 400px; margin: 0 auto; }
.cs-notify-input { flex: 1; padding: 12px 16px; background: #fff; border: 1.5px solid #ddd; border-radius: 10px; color: #0a0a0a; font: 400 14px var(--font); outline: none; transition: border-color .18s; }
.cs-notify-input:focus { border-color: var(--accent); }
.cs-notify-btn   { padding: 12px 22px; background: var(--accent); color: #fff; border: none; border-radius: 10px; font: 700 14px var(--font); cursor: pointer; white-space: nowrap; }
/* ── Section heading above the grid ── */
.cs-grid-head   { text-align: center; max-width: 560px; margin: 0 auto 36px; }
.cs-grid-label  { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; display: block; }
.cs-grid-title  { font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: #0a0a0a; letter-spacing: -.8px; margin-bottom: 10px; }
.cs-grid-sub    { font-size: 14.5px; color: rgba(0,0,0,.5); line-height: 1.7; }

/* ── Coming-soon product cards ── */
.cs-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; }
.cs-card {
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: box-shadow .22s, transform .22s, border-color .22s;
}
.cs-card:hover { box-shadow: 0 10px 34px rgba(0,0,0,.1); transform: translateY(-4px); border-color: #e0e0e0; }
.cs-card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f7f7f7;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cs-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 22px; transition: transform .4s; }
.cs-card:hover .cs-card-img img { transform: scale(1.05); }
.cs-card-badge {
  position: absolute; top: 12px; left: 12px;
  background: #fff3e0; color: #e65100;
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 5px 11px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 5px;
}
.cs-card-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #e65100; }
.cs-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cs-card-cat   { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); }
.cs-card-name  { font-size: 15px; font-weight: 700; color: #0a0a0a; line-height: 1.35; }
.cs-card-desc  { font-size: 12.5px; color: rgba(0,0,0,.5); line-height: 1.55; flex: 1; }
.cs-card-cta   {
  margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border-radius: 9px;
  background: #f4f4f4; color: #0a0a0a;
  font: 700 12.5px var(--font);
  transition: background .18s, color .18s;
}
.cs-card:hover .cs-card-cta { background: var(--accent); color: #fff; }

@media (max-width: 900px)  { .cs-products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .cs-products-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .cs-notify-form { flex-direction: column; } .cs-card-body { padding: 12px 13px 14px; } }


/* ================================================================
   MOBILE OVERRIDES (inner pages)
   ================================================================ */
@media (max-width: 600px) {
  .page-hero    { padding: 40px 14px 36px; }
  .page-hero-title { font-size: 26px; }
  .pg-section, .pg-section--cream, .pg-section--dark { padding: 40px 0; }
  .policy-section, .faq-section, .contact-section,
  .shop-section, .cart-section, .track-section,
  .blog-section, .cs-section { padding-left: 14px; padding-right: 14px; }
  .pdp-tabs-section { padding-left: 14px; padding-right: 14px; }
  .pdp-related { padding-left: 14px; padding-right: 14px; }
  .pdp-related-grid { grid-template-columns: 1fr 1fr; }
  .auth-section { padding: 20px 14px 48px; }
}


/* ================================================================
   PDP ENHANCEMENTS — hover-zoom / lightbox, sticky bar, offers, pincode
   ================================================================ */

/* ── Hover zoom on main image ── */
.pdp-main-img { cursor: zoom-in; }
.pdp-main-img img { transition: transform .2s ease; }

/* ── Lightbox ── */
.pdp-lightbox {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(10,10,10,.93);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.pdp-lightbox.is-open { opacity: 1; visibility: visible; }
.pdp-lb-top    { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
.pdp-lb-counter{ font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); }
.pdp-lb-close  { background: rgba(255,255,255,.12); border: none; color: #fff; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 17px; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.pdp-lb-close:hover { background: rgba(255,255,255,.25); }
.pdp-lb-stage  { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 16px; min-height: 0; }
.pdp-lb-img    { max-width: 88%; max-height: 76vh; object-fit: contain; cursor: zoom-in; transition: transform .2s ease; user-select: none; -webkit-user-drag: none; }
.pdp-lb-img.is-zoomed { cursor: zoom-out; }
.pdp-lb-arrow  { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.14); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.pdp-lb-arrow:hover { background: rgba(255,255,255,.3); }
.pdp-lb-arrow--prev { left: 18px; }
.pdp-lb-arrow--next { right: 18px; }
.pdp-lb-thumbs { display: flex; gap: 8px; justify-content: center; padding: 16px; flex-wrap: wrap; }
.pdp-lb-thumb  { width: 54px; height: 54px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: #fff; opacity: .5; transition: opacity .15s, border-color .15s; }
.pdp-lb-thumb.is-active { opacity: 1; border-color: #fff; }
.pdp-lb-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }

/* ── Sticky Add-to-Cart bar ── */
.pdp-sticky-bar {
  position: fixed; left: 0; right: 0;
  bottom: 0;
  background: #fff; border-top: 1px solid #eee;
  box-shadow: 0 -5px 24px rgba(0,0,0,.1);
  z-index: 950;
  transform: translateY(120%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.pdp-sticky-bar.is-visible { transform: translateY(0); }
/* Lift the WhatsApp button above the bar while it's showing */
body.pdp-bar-on .whatsapp-btn { bottom: 94px; }
.pdp-sticky-inner { max-width: 1200px; margin: 0 auto; padding: 9px var(--pad-x); display: flex; align-items: center; gap: 14px; }
.pdp-sticky-img   { width: 46px; height: 46px; border-radius: 8px; object-fit: contain; background: #f7f7f7; flex-shrink: 0; }
.pdp-sticky-info  { min-width: 0; flex: 1; }
.pdp-sticky-name  { font-size: 13.5px; font-weight: 700; color: #0a0a0a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-sticky-price { font-size: 13px; }
.pdp-sticky-price .s { font-weight: 800; color: #0a0a0a; }
.pdp-sticky-price .m { color: rgba(0,0,0,.4); text-decoration: line-through; margin-left: 6px; font-size: 12px; }
.pdp-sticky-btns  { display: flex; gap: 8px; flex-shrink: 0; }
.pdp-sticky-btns button { padding: 11px 22px; border: none; border-radius: 9px; font: 700 13px var(--font); cursor: pointer; white-space: nowrap; transition: opacity .15s; }
.pdp-sticky-btns button:hover { opacity: .9; }
.pdp-sticky-cart { background: #0a0a0a; color: #fff; }
.pdp-sticky-buy  { background: var(--accent); color: #fff; }
@media (max-width: 600px) {
  .pdp-sticky-img { display: none; }
  .pdp-sticky-name { font-size: 12.5px; }
  .pdp-sticky-btns button { padding: 10px 14px; font-size: 12px; }
  body.pdp-bar-on .whatsapp-btn { bottom: 80px; }
}

/* ── Offers box ── */
.pdp-offers       { border: 1px dashed #e3b489; background: #fff8f2; border-radius: 12px; padding: 14px 16px; }
.pdp-offers-title { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #0a0a0a; margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
.pdp-offer-item   { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: rgba(0,0,0,.7); line-height: 1.55; padding: 4px 0; }
.pdp-offer-item svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.pdp-offer-code   { display: inline-flex; align-items: center; gap: 6px; }
.pdp-coupon       { font-weight: 800; color: var(--accent); background: #fff; border: 1px dashed var(--accent); border-radius: 5px; padding: 0 7px; letter-spacing: .5px; }
.pdp-copy-btn     { background: none; border: none; color: var(--accent); font-weight: 700; font-size: 12px; cursor: pointer; text-decoration: underline; padding: 0; }

/* ── Pincode checker ── */
.pdp-pincode       { border: 1px solid #eee; border-radius: 12px; padding: 14px 16px; }
.pdp-pincode-title { font-size: 12.5px; font-weight: 700; color: #0a0a0a; margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
.pdp-pincode-row   { display: flex; gap: 8px; }
.pdp-pincode-input { flex: 1; min-width: 0; padding: 10px 12px; border: 1.5px solid #e0e0e0; border-radius: 8px; font: 500 13.5px var(--font); outline: none; transition: border-color .15s; }
.pdp-pincode-input:focus { border-color: var(--accent); }
.pdp-pincode-btn   { padding: 10px 18px; background: #0a0a0a; color: #fff; border: none; border-radius: 8px; font: 700 13px var(--font); cursor: pointer; white-space: nowrap; }
.pdp-pincode-result{ font-size: 12.5px; margin-top: 9px; line-height: 1.5; display: none; }
.pdp-pincode-result.show { display: block; }
.pdp-pincode-result.ok   { color: #2e7d32; }
.pdp-pincode-result.err  { color: #e53935; }


/* ================================================================
   PDP — LARGE SCREENS (≥1600px): widen layout, fill the width
   ================================================================ */
@media (min-width: 1600px) {
  /* All PDP containers grow together so the page stays consistent */
  .pdp-wrap {
    max-width: 1520px;
    gap: 60px;
    padding-top: 44px;
  }
  .pdp-tabs-wrap,
  .pdp-why-inner,
  .pdp-related-wrap,
  .pdp-sticky-inner { max-width: 1520px; }

  /* A touch more breathing room in the info column */
  .pdp-info        { gap: 22px; }
  .pdp-title       { font-size: 27px; line-height: 1.3; }
  .pdp-price-sale  { font-size: 34px; }
  .pdp-price-mrp   { font-size: 18px; }

  /* Larger gallery thumbnails on big screens */
  .pdp-thumb       { width: 78px; height: 78px; }
  .pdp-thumb-nav   { height: 78px; }

  /* Roomier related grid */
  .pdp-related-grid { gap: 22px; }

  /* Bigger, more legible lightbox image */
  .pdp-lb-img      { max-height: 82vh; }
}

/* ===== Homepage builder — product sliders & reels ===== */
.home-slider-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px;}
.home-slider-title{font-size:clamp(20px,3vw,28px);font-weight:800;letter-spacing:-.5px;color:#0a0a0a;}
.home-slider-arrows{display:flex;gap:8px;flex-shrink:0;}
.home-slider-arrow{width:38px;height:38px;border-radius:50%;border:1px solid #e6e6e6;background:#fff;color:#0a0a0a;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:all .2s;}
.home-slider-arrow:hover{background:#0a0a0a;color:#fff;border-color:#0a0a0a;}
.home-slider-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none;}
.home-slider-track::-webkit-scrollbar{display:none;}
.home-slider-item{flex:0 0 260px;max-width:260px;scroll-snap-align:start;}
.home-slider-item .product-card{height:100%;}
@media(max-width:640px){.home-slider-item{flex-basis:72vw;max-width:72vw;}}

.home-reels-section{padding-top:8px;}
.home-reels-grid{display:grid;grid-template-columns:repeat(var(--reel-cols,3),1fr);gap:14px;}
.home-reel-cell{display:block;position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 6px 20px -10px rgba(0,0,0,.4);}
.home-reel-cell video{transition:transform .4s;}
.home-reel-cell:hover video{transform:scale(1.04);}
@media(max-width:760px){.home-reels-grid{grid-template-columns:repeat(min(var(--reel-cols,3),2),1fr);}}

/* ============================================================
   MEGA MENU — enhanced (cards + bestseller promo)
   ============================================================ */
.mega-inner--v2 { display: flex; gap: 26px; align-items: stretch; }
.mega-main { flex: 1; min-width: 0; }

.mega-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 0 8px; }
.mega-head-title { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.6px; color: #aab; }
.mega-head-all { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--accent); transition: gap .18s ease; }
.mega-head-all:hover { gap: 9px; }

.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mega-card { display: flex; align-items: center; gap: 13px; padding: 10px 12px; border-radius: 14px; border: 1px solid transparent; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.mega-card:hover { background: #fff; border-color: #ececf3; box-shadow: 0 10px 26px -12px rgba(20,22,40,.22); transform: translateY(-2px); }
.mega-card-img { width: 60px; height: 60px; border-radius: 14px; background: linear-gradient(135deg,#f7f8fc 0%,#eef0f7 100%); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.mega-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; transition: transform .28s ease; }
.mega-card:hover .mega-card-img img { transform: scale(1.09); }
.mega-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mega-card-name { font-size: 13.5px; font-weight: 650; color: #16181f; line-height: 1.25; }
.mega-card-price { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; font-weight: 800; color: #111; }
.mega-card-price s { font-weight: 500; color: #bcbcc6; font-size: 11px; }
.mega-card-off { font-style: normal; font-size: 10.5px; font-weight: 800; color: #16a34a; }
.mega-card-soon { align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: #b45309; background: #fef3c7; border-radius: 6px; padding: 2px 7px; }

/* Bestseller promo panel */
.mega-promo { width: 232px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 16px 16px 15px; border-radius: 20px; background: radial-gradient(120% 90% at 80% 0%, #2a2a34 0%, #101015 60%); color: #fff; position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.mega-promo:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -18px rgba(0,0,0,.6); }
.mega-promo-tag { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #ffce6e; }
.mega-promo-img { width: 100%; height: 124px; display: grid; place-items: center; margin: 6px 0 10px; }
.mega-promo-img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0,0,0,.45)); }
.mega-promo-name { font-size: 15.5px; font-weight: 800; line-height: 1.2; }
.mega-promo-price { display: flex; gap: 7px; align-items: baseline; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.78); margin: 4px 0 13px; }
.mega-promo-price s { opacity: .5; font-weight: 500; }
.mega-promo-btn { margin-top: auto; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0; background: #fff; color: #111; font-size: 12.5px; font-weight: 800; border-radius: 11px; transition: background .2s ease, color .2s ease, gap .2s ease; }
.mega-promo:hover .mega-promo-btn { background: var(--accent); color: #fff; gap: 9px; }

@media (max-width: 1100px) {
  .mega-promo { display: none; }
  .mega-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   SHOP BY CATEGORY — floating transparent products on gradients
   ============================================================ */
.cat-eyebrow { text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.cat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.cat-tile { position: relative; overflow: hidden; border-radius: 26px; min-height: 196px; padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; isolation: isolate; box-shadow: 0 16px 36px -20px rgba(20,20,45,.5); transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease; }
.cat-tile:hover { transform: translateY(-5px); box-shadow: 0 32px 60px -26px rgba(20,20,45,.62); }
.cat-tile-blob { position: absolute; top: -40%; right: -24%; width: 72%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.14); z-index: 0; }
.cat-tile-img { position: absolute; top: 50%; right: -2px; width: 46%; max-width: 172px; height: auto; transform: translateY(-55%); object-fit: contain; filter: drop-shadow(0 22px 26px rgba(0,0,0,.34)); z-index: 1; transition: transform .42s cubic-bezier(.2,.8,.2,1); }
.cat-tile:hover .cat-tile-img { transform: translateY(-57%) scale(1.09) rotate(-4deg); }
.cat-tile-body { position: relative; z-index: 2; max-width: 62%; }
.cat-tile-name { display: block; font-size: 23px; font-weight: 800; letter-spacing: -.6px; color: #fff; line-height: 1.05; }
.cat-tile-sub { display: block; font-size: 12.5px; color: rgba(255,255,255,.86); margin-top: 5px; line-height: 1.35; }
.cat-tile-cta { margin-top: 15px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(6px); border-radius: 99px; padding: 7px 15px; transition: gap .2s ease, background .2s ease; }
.cat-tile:hover .cat-tile-cta { gap: 10px; background: rgba(255,255,255,.3); }
@media (max-width: 900px) { .cat-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cat-tiles { grid-template-columns: 1fr; } .cat-tile-img { width: 42%; } }

/* Search typewriter placeholder — make it visible + adapt to navbar theme */
.search-input::placeholder { color: currentColor; opacity: .55; }
.inner-page #navbar.is-sticky .search-input { color: rgba(0,0,0,.82); }

/* ============================================================
   SHOP BY CATEGORY — header bar + tile shine (enhanced)
   ============================================================ */
.cat-header--bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; text-align: left; }
.cat-subtitle { font-size: 14px; color: rgba(0,0,0,.52); margin-top: 7px; max-width: 520px; }
.cat-viewall { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: #111; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 99px; padding: 11px 20px; white-space: nowrap; transition: gap .2s ease, box-shadow .2s ease, transform .2s ease; }
.cat-viewall:hover { gap: 11px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.35); transform: translateY(-1px); }
.cat-tile-shine { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%); }

/* ============================================================
   SUCCESS STORIES — scrapbook / sketchable
   ============================================================ */
.success-section { padding: 64px 0 74px; background: linear-gradient(180deg,#fbf8f1 0%,#f5efe4 100%); }
.success-wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); }
.success-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.success-eyebrow { font-family: 'Caveat', cursive; font-size: 25px; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 2px; transform: rotate(-2deg); }
.success-title { font-size: clamp(24px,3vw,34px); font-weight: 900; letter-spacing: -.5px; color: #181818; }
.success-arrows { display: flex; gap: 8px; }
.success-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #1a1a1a; background: #fff; color: #1a1a1a; display: grid; place-items: center; cursor: pointer; transition: background .2s ease, color .2s ease; }
.success-arrow:hover:not(:disabled) { background: #1a1a1a; color: #fff; }
.success-arrow:disabled { opacity: .3; cursor: default; }
.success-viewport { overflow: hidden; padding: 20px 6px 30px; }
.success-track { display: flex; gap: 28px; transition: transform .5s cubic-bezier(.4,0,.2,1); will-change: transform; align-items: flex-start; }
.success-cell { flex: 0 0 auto; }

.ss-card { display: flex; flex-direction: column; position: relative; transform: rotate(var(--rot,0deg)); transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease; }
.ss-card:hover { transform: rotate(0deg) translateY(-7px) scale(1.025); z-index: 4; }

/* Screenshot — polaroid */
.ss-card--photo { width: 234px; background: #fff; padding: 12px 12px 14px; border-radius: 6px; box-shadow: 0 14px 34px -12px rgba(60,50,30,.4), 0 2px 6px rgba(0,0,0,.08); text-decoration: none; }
.ss-photo-img { width: 100%; height: auto; max-height: 370px; object-fit: cover; border-radius: 3px; display: block; background: #f1eee7; }
.ss-photo-cap { font-family: 'Caveat', cursive; font-size: 20px; font-weight: 700; color: #3a3a3a; text-align: center; margin-top: 9px; line-height: 1.1; }
.ss-tape { position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 80px; height: 23px; background: rgba(255,216,120,.6); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* Testimonial — sticky note */
.ss-card--quote { width: 300px; min-height: 218px; background: linear-gradient(180deg,#fffdf6,#fff6e3); padding: 30px 24px 24px; border-radius: 10px; box-shadow: 0 14px 34px -12px rgba(60,50,30,.42), 0 2px 6px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.04); }
.ss-quote-mark { font-family: Georgia, serif; font-size: 66px; line-height: .5; color: var(--accent); opacity: .85; display: block; height: 26px; }
.ss-quote-text { font-size: 15px; line-height: 1.62; color: #2c2c2c; margin: 8px 0 16px; }
.ss-quote-author { font-family: 'Caveat', cursive; font-size: 23px; font-weight: 700; color: #1a1a1a; }
.ss-quote-author::before { content: "— "; }
.ss-pin { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7a59, #d83a1f); box-shadow: 0 3px 6px rgba(0,0,0,.3), inset 0 -2px 3px rgba(0,0,0,.25); }

@media (max-width: 560px) { .ss-card--photo { width: 204px; } .ss-card--quote { width: 252px; } }

/* Category section — balanced spacing for the redesigned tiles */
.cat-section { background: #fcf7ee; padding: 52px var(--pad-x) 60px; }
@media (max-width: 640px) { .cat-section { padding: 36px var(--pad-x) 44px; } }

/* ============================================================
   HOMEPAGE POLISH — trust strip, rail headers, brand strip
   ============================================================ */
.home-trust { background: #fff; border-top: 1px solid #f1ede4; border-bottom: 1px solid #f1ede4; }
.home-trust-inner { max-width: var(--max-w); margin-inline: auto; padding: 18px var(--pad-x); display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.home-trust-item { display: flex; align-items: center; gap: 13px; justify-content: center; }
.home-trust-item:not(:last-child) { border-right: 1px solid #f1ede4; }
.home-trust-ic { width: 44px; height: 44px; border-radius: 13px; background: rgba(232,80,42,.09); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.home-trust-txt { display: flex; flex-direction: column; line-height: 1.1; }
.home-trust-txt b { font-size: 19px; font-weight: 900; color: #161616; letter-spacing: -.5px; }
.home-trust-txt span { font-size: 11.5px; color: rgba(0,0,0,.5); margin-top: 2px; }
@media (max-width: 680px) { .home-trust-inner { grid-template-columns: repeat(2, 1fr); gap: 16px; } .home-trust-item:nth-child(2n) { border-right: none; } .home-trust-item { justify-content: flex-start; } }

.section-header--rail { align-items: flex-end; }
.ps-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
.ps-head-right { display: flex; align-items: center; gap: 16px; }
.ps-viewall { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #141414; white-space: nowrap; transition: gap .2s ease, color .2s ease; }
.ps-viewall:hover { gap: 9px; color: var(--accent); }
@media (max-width: 560px) { .ps-viewall { display: none; } }

.home-brands { padding: 48px 0 8px; background: #fff; }
.home-brands-label { font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(0,0,0,.4); margin-bottom: 26px; }

/* ============================================================
   TRUSTED BY — brand logo cards (full colour)
   ============================================================ */
.brand-section { padding: 60px 0 72px; background: #fff; }
.brand-head { text-align: center; max-width: 640px; margin: 0 auto 38px; }
.brand-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.brand-sub { font-size: 14px; color: rgba(0,0,0,.52); margin-top: 11px; line-height: 1.6; }
.brand-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.brand-card { aspect-ratio: 3 / 2; background: #fff; border: 1px solid #ececec; border-radius: 16px; display: grid; place-items: center; padding: 16px 20px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.brand-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -16px rgba(0,0,0,.22); border-color: #e0e0e0; }
.brand-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 900px) { .brand-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } .brand-section { padding: 44px 0 52px; } }

/* ============================================================
   FOOTER — remove yellow (use brand accent) + payment fix
   ============================================================ */
.footer-trust-item:hover > svg { color: var(--accent) !important; }
.footer-link--highlight { color: var(--accent) !important; }
.footer-link--highlight:hover { color: #ffffff !important; }
.footer-made-in svg { color: var(--accent) !important; }
.footer-pay-img { opacity: 1 !important; height: 32px; background: #fff; border-radius: 7px; padding: 5px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }

/* ============================================================
   WHATSAPP — advanced live-chat widget
   ============================================================ */
.wa-widget { position: fixed; bottom: 26px; right: 26px; z-index: 1200; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.wa-widget .whatsapp-btn { position: relative; bottom: auto; right: auto; border: none; cursor: pointer; outline: none; }
.whatsapp-btn.wa-fab--open { background: #128c7e; }
.wa-fab-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #ff3b30; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }

.wa-chat { width: 326px; max-width: calc(100vw - 36px); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 26px 60px -16px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.12); transform-origin: bottom right; animation: wa-pop .32s cubic-bezier(.2,.9,.3,1.25); }
@keyframes wa-pop { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } }

.wa-chat-head { display: flex; align-items: center; gap: 11px; padding: 14px 15px; background: linear-gradient(135deg, #1faf54 0%, #128c7e 100%); color: #fff; }
.wa-chat-av { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; flex-shrink: 0; }
.wa-chat-id { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.wa-chat-name { font-size: 15px; font-weight: 800; }
.wa-chat-online { font-size: 11.5px; opacity: .92; display: flex; align-items: center; gap: 6px; }
.wa-online-dot { width: 7px; height: 7px; border-radius: 50%; background: #8affad; flex-shrink: 0; animation: wa-pulse 1.8s infinite; }
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(138,255,173,.6); } 70% { box-shadow: 0 0 0 6px rgba(138,255,173,0); } 100% { box-shadow: 0 0 0 0 rgba(138,255,173,0); } }
.wa-chat-x { margin-left: auto; background: rgba(255,255,255,.16); border: none; color: #fff; width: 27px; height: 27px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: background .2s; }
.wa-chat-x:hover { background: rgba(255,255,255,.3); }

.wa-chat-body { padding: 16px 15px 18px; background: #ece5dd; }
.wa-msg { background: #fff; border-radius: 3px 14px 14px 14px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.12); max-width: 94%; }
.wa-msg p { font-size: 13.5px; color: #2a2a2a; line-height: 1.55; margin: 0 0 8px; }
.wa-msg p:last-of-type { margin-bottom: 6px; }
.wa-msg-time { font-size: 10.5px; color: #9aa0a6; }

.wa-chat-cta { width: 100%; border: none; cursor: pointer; padding: 14px; background: #25d366; color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 9px; transition: background .2s; }
.wa-chat-cta:hover { background: #1faf54; }

@media (max-width: 480px) { .wa-widget { bottom: 18px; right: 16px; } }

/* Brand grid — flex so the last (incomplete) row stays centered */
.brand-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.brand-card { flex: 0 0 calc((100% - 80px) / 6); }
@media (max-width: 900px) { .brand-card { flex: 0 0 calc((100% - 48px) / 4); } }
@media (max-width: 560px) { .brand-card { flex: 0 0 calc((100% - 32px) / 3); } }

/* WhatsApp avatar — initials + online indicator for the support person */
.wa-chat-av { position: relative; font-size: 15px; font-weight: 800; color: #fff; letter-spacing: .5px; }
.wa-av-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: #4ade80; border: 2.5px solid #1aa558; }

/* Footer — white text only (no accent colour) */
.footer-trust-item:hover > svg { color: #ffffff !important; }
.footer-link--highlight { color: #ffffff !important; }
.footer-link--highlight:hover { color: #ffffff !important; opacity: .8; }
.footer-made-in svg { color: #ffffff !important; }

/* WhatsApp avatar — user photo */
.wa-chat-av { overflow: visible; }
.wa-chat-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* ============================================================
   PRODUCTS PAGE — attractive hero
   ============================================================ */
.shop-hero { position: relative; overflow: hidden; background: radial-gradient(135% 135% at 80% -20%, #2c2f3e 0%, #16171f 52%, #0c0d12 100%); color: #fff; }
.shop-hero-glow { position: absolute; top: -28%; right: 6%; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(232,80,42,.3), transparent 64%); z-index: 0; pointer-events: none; }
.shop-hero-inner { position: relative; z-index: 2; max-width: var(--max-w); margin-inline: auto; padding: 56px var(--pad-x) 60px; display: flex; align-items: center; gap: 30px; }
.shop-hero-text { flex: 1; min-width: 0; }
.shop-hero-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #ff8b6b; margin-bottom: 14px; }
.shop-hero-title { font-size: clamp(30px, 5vw, 50px); font-weight: 900; letter-spacing: -1px; line-height: 1.06; max-width: 600px; }
.shop-hero-title span { color: var(--accent); }
.shop-hero-sub { font-size: 15.5px; color: rgba(255,255,255,.62); margin-top: 16px; max-width: 500px; line-height: 1.6; }
.shop-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.shop-hero-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.82); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 99px; padding: 8px 15px; }
.shop-hero-badge b { color: #fff; font-weight: 800; }
.shop-hero-decor { position: relative; width: 300px; height: 220px; flex-shrink: 0; }
.shop-hero-prod { position: absolute; object-fit: contain; filter: drop-shadow(0 22px 30px rgba(0,0,0,.55)); }
.shop-hero-prod--1 { width: 150px; right: 78px; top: 8px; transform: rotate(-6deg); z-index: 3; }
.shop-hero-prod--2 { width: 122px; right: 0; top: 58px; transform: rotate(8deg); z-index: 2; }
.shop-hero-prod--3 { width: 108px; right: 150px; top: 92px; transform: rotate(-2deg); z-index: 1; opacity: .92; }
@media (max-width: 860px) { .shop-hero-decor { display: none; } .shop-hero-inner { padding: 42px var(--pad-x) 46px; } }

/* Products hero — electric blue / navy tech theme (Diva Light banner style) */
.shop-hero { background: radial-gradient(130% 130% at 76% -18%, #123c7c 0%, #0a1a38 46%, #050a16 100%); }
.shop-hero-glow { background: radial-gradient(circle, rgba(48,140,255,.5), transparent 60%); }
.shop-hero::after { content: ""; position: absolute; left: -8%; bottom: -42%; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(22,92,205,.32), transparent 66%); z-index: 0; pointer-events: none; }
.shop-hero-eyebrow { color: #63b4ff; }
.shop-hero-title span { background: linear-gradient(180deg, #82c6ff 0%, #2e84ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.shop-hero-badge { background: rgba(60,140,255,.1); border-color: rgba(95,165,255,.28); }
.shop-hero-badge b { color: #d4e8ff; }

/* Coming-soon cards — no faded opacity */
.product-card--soon { opacity: 1; }

/* ============================================================
   PRODUCTS HERO — animations
   ============================================================ */
@keyframes shop-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes shop-glow { 0%, 100% { opacity: .78; transform: scale(1); } 50% { opacity: 1; transform: scale(1.13); } }
@keyframes shop-float { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-14px) rotate(var(--rot, 0deg)); } }
@keyframes shop-sweep { 0% { transform: translateX(-48%); } 50% { transform: translateX(48%); } 100% { transform: translateX(-48%); } }

.shop-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(108deg, transparent 38%, rgba(130,190,255,.08) 50%, transparent 62%); animation: shop-sweep 8s ease-in-out infinite; }
.shop-hero-glow { animation: shop-glow 4.5s ease-in-out infinite; }
.shop-hero-eyebrow { animation: shop-rise .6s ease .05s both; }
.shop-hero-title { animation: shop-rise .65s ease .15s both; }
.shop-hero-sub { animation: shop-rise .65s ease .26s both; }
.shop-hero-badges { animation: shop-rise .65s ease .38s both; }
.shop-hero-prod { animation: shop-float 5.5s ease-in-out infinite; }
.shop-hero-prod--1 { --rot: -6deg; animation-delay: 0s; }
.shop-hero-prod--2 { --rot: 8deg; animation-delay: .8s; }
.shop-hero-prod--3 { --rot: -2deg; animation-delay: 1.6s; }
@media (prefers-reduced-motion: reduce) { .shop-hero *, .shop-hero::before { animation: none !important; } }

/* Products page — admin-managed banner (replaces the hero when set) */
.shop-banner { width: 100%; line-height: 0; background: #0c0d12; }
.shop-banner-img { width: 100%; height: auto; display: block; }

/* Wishlist — remove overlay on the shared ProductCard */
.wish-cell { position: relative; }
.wish-remove { position: absolute; top: 10px; right: 10px; z-index: 5; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #555; border: 1px solid #eee; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 10px -3px rgba(0,0,0,.2); transition: background .18s ease, color .18s ease, border-color .18s ease; }
.wish-remove:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

/* ============================================================
   CONTACT PAGE — redesigned
   ============================================================ */
.contact-hero { position: relative; overflow: hidden; background: linear-gradient(180deg,#fbf8f1 0%,#ffffff 100%); text-align: center; }
.contact-hero-glow { position: absolute; top: -130px; left: 50%; transform: translateX(-50%); width: 520px; height: 360px; background: radial-gradient(circle, rgba(232,80,42,.13), transparent 70%); z-index: 0; pointer-events: none; }
.contact-hero-inner { position: relative; z-index: 2; max-width: 640px; margin-inline: auto; padding: 54px var(--pad-x) 40px; }
.contact-hero-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.contact-hero-title { font-size: clamp(34px,5vw,52px); font-weight: 900; letter-spacing: -1px; color: #141414; line-height: 1.05; }
.contact-hero-sub { font-size: 15.5px; color: rgba(0,0,0,.55); margin-top: 14px; line-height: 1.65; }

.contact2-section { max-width: var(--max-w); margin-inline: auto; padding: 50px var(--pad-x) 72px; }
.contact-grid2 { display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px; align-items: start; }
.contact-lead-title { font-size: clamp(24px,3vw,32px); font-weight: 900; letter-spacing: -.5px; color: #161616; }
.contact-lead-sub { font-size: 14.5px; color: rgba(0,0,0,.55); margin-top: 12px; max-width: 420px; line-height: 1.65; }
.contact-methods { margin-top: 28px; display: flex; flex-direction: column; gap: 20px; }
.contact-method { display: flex; gap: 15px; align-items: flex-start; }
.contact-method-ic { width: 46px; height: 46px; border-radius: 14px; background: rgba(232,80,42,.1); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.contact-method-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: rgba(0,0,0,.4); }
.contact-method-val { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-top: 3px; line-height: 1.45; }
.contact-method-val a { color: inherit; }
.contact-method-val a:hover { color: var(--accent); }
.contact-wa-btn { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; background: #25d366; color: #fff; font-weight: 800; font-size: 14px; padding: 12px 22px; border-radius: 99px; box-shadow: 0 8px 20px -8px rgba(37,211,102,.6); transition: background .2s ease, transform .2s ease; }
.contact-wa-btn:hover { background: #1faf54; transform: translateY(-2px); }
.contact-socials2 { margin-top: 22px; display: flex; gap: 10px; }
.contact-social2 { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #e6e6e6; display: grid; place-items: center; color: #555; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.contact-social2:hover { background: #111; color: #fff; border-color: #111; transform: translateY(-2px); }
.contact-form-heading { font-size: 19px; font-weight: 800; color: #161616; }
.contact-form-note { font-size: 13.5px; color: rgba(0,0,0,.5); margin-top: 5px; margin-bottom: 18px; }
.contact-map { margin-top: 56px; border-radius: 20px; overflow: hidden; border: 1px solid #ececec; box-shadow: 0 16px 40px -22px rgba(20,22,40,.2); }
.contact-map iframe { width: 100%; height: 380px; border: 0; display: block; }
@media (max-width: 860px) { .contact-grid2 { grid-template-columns: 1fr; gap: 34px; } }

/* ============================================================
   WISHLIST PAGE — redesigned
   ============================================================ */
.wishlist-hero { position: relative; overflow: hidden; background: linear-gradient(180deg,#fbf8f1 0%,#ffffff 100%); text-align: center; }
.wishlist-hero-glow { position: absolute; top: -130px; left: 50%; transform: translateX(-50%); width: 500px; height: 340px; background: radial-gradient(circle, rgba(232,80,42,.12), transparent 70%); z-index: 0; pointer-events: none; }
.wishlist-hero-inner { position: relative; z-index: 2; max-width: 600px; margin-inline: auto; padding: 52px var(--pad-x) 36px; }
.wishlist-hero-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.wishlist-hero-title { font-size: clamp(32px,5vw,48px); font-weight: 900; letter-spacing: -1px; color: #141414; line-height: 1.05; }
.wishlist-hero-sub { font-size: 15px; color: rgba(0,0,0,.55); margin-top: 12px; }

.wish-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid #ededed; }
.wish-bar-count { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #161616; }
.wish-bar-count svg { color: var(--accent); }
.wish-bar-actions { display: flex; align-items: center; gap: 16px; }
.wish-bar-link { font-size: 13px; font-weight: 700; color: #444; }
.wish-bar-link:hover { color: var(--accent); }
.wish-bar-clear { font-size: 13px; font-weight: 700; color: #ef4444; background: none; border: none; cursor: pointer; padding: 0; }
.wish-bar-clear:hover { text-decoration: underline; }

.wish-empty-section { max-width: var(--max-w); margin-inline: auto; padding: 40px var(--pad-x) 90px; }
.wish-empty { text-align: center; max-width: 380px; margin: 0 auto; padding-top: 30px; }
.wish-empty-ring { width: 92px; height: 92px; border-radius: 50%; background: rgba(232,80,42,.08); color: var(--accent); display: grid; place-items: center; margin: 0 auto 22px; }
.wish-empty-title { font-size: 22px; font-weight: 800; color: #161616; }
.wish-empty-sub { font-size: 14.5px; color: rgba(0,0,0,.55); margin-top: 10px; line-height: 1.6; }
.wish-empty-btn { display: inline-flex; margin-top: 24px; background: var(--accent); color: #fff; font-weight: 800; font-size: 14px; padding: 12px 26px; border-radius: 99px; transition: transform .2s ease, box-shadow .2s ease; }
.wish-empty-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(232,80,42,.6); }

/* Wishlist icon pulse when a product flies in */
@keyframes nav-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.38); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
#navWishlist.nav-pulse { animation: nav-pulse .6s ease; }

/* ============================================================
   PRODUCT CARD — wishlist heart + interactive cart button
   ============================================================ */
.product-img-wrap { position: relative; }
.product-img-link { display: contents; }
.pc-wish { position: absolute; top: 10px; right: 10px; z-index: 4; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(0,0,0,.06); color: #9a9a9a; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.14); transition: transform .18s ease, color .18s ease; }
.pc-wish:hover { transform: scale(1.14); color: var(--accent); }
.pc-wish.is-active { color: var(--accent); }
button.product-cta { border: none; cursor: pointer; font: inherit; width: 100%; }
.nav-pulse { animation: nav-pulse .6s ease; }

/* Bottom footer — uniform muted-white text & icons (no pure white) */
.footer-bottom, .footer-bottom * { color: rgba(255,255,255,.52) !important; }

/* Footer-bottom icons also muted (override earlier white svg rules) */
.footer-bottom svg { color: rgba(255,255,255,.52) !important; }

/* Footer — mute the two remaining white texts (company "iota" + View All Products) */
.footer-logo-text { color: rgba(255,255,255,.52) !important; }
.footer-link--highlight, .footer-link--highlight:hover { color: rgba(255,255,255,.52) !important; }

/* ============================================================
   CART PAGE — redesigned
   ============================================================ */
.cart-hero { position: relative; overflow: hidden; background: linear-gradient(180deg,#fbf8f1 0%,#ffffff 100%); text-align: center; }
.cart-hero-glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 480px; height: 320px; background: radial-gradient(circle, rgba(232,80,42,.12), transparent 70%); z-index: 0; pointer-events: none; }
.cart-hero-inner { position: relative; z-index: 2; max-width: 600px; margin-inline: auto; padding: 48px var(--pad-x) 30px; }
.cart-hero-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.cart-hero-title { font-size: clamp(30px,5vw,46px); font-weight: 900; letter-spacing: -1px; color: #141414; }

.cartv-section { background: #f7f7f8; }
.cartv-wrap { max-width: 1100px; margin-inline: auto; padding: 36px var(--pad-x) 72px; }

.cartv-ship { background: #fff; border: 1px solid #ececec; border-radius: 16px; padding: 16px 20px; margin-bottom: 22px; }
.cartv-ship-txt { font-size: 14px; color: #333; }
.cartv-ship-txt b { color: #111; }
.cartv-ship-done { color: #16a34a; }
.cartv-ship-bar { margin-top: 12px; height: 8px; border-radius: 99px; background: #eee; overflow: hidden; }
.cartv-ship-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg,#fbbf24,var(--accent)); transition: width .4s ease; }

.cartv-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.cartv-items-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 14px; font-weight: 700; color: #333; }
.cartv-continue { font-size: 13px; font-weight: 700; color: var(--accent); }
.cartv-continue:hover { text-decoration: underline; }

.cartv-item { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 14px; margin-bottom: 12px; transition: box-shadow .2s ease; }
.cartv-item:hover { box-shadow: 0 10px 28px -16px rgba(0,0,0,.18); }
.cartv-item-img { width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: #f4f4f6; flex-shrink: 0; display: block; }
.cartv-item-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cartv-item-main { flex: 1; min-width: 0; }
.cartv-item-name { display: block; font-size: 15px; font-weight: 700; color: #161616; }
.cartv-item-name:hover { color: var(--accent); }
.cartv-item-each { font-size: 12.5px; color: rgba(0,0,0,.45); margin-top: 2px; }
.cartv-qty { display: inline-flex; align-items: center; margin-top: 10px; border: 1px solid #e2e2e2; border-radius: 10px; overflow: hidden; }
.cartv-qty button { width: 30px; height: 30px; background: #fff; border: none; cursor: pointer; font-size: 16px; color: #444; display: grid; place-items: center; }
.cartv-qty button:hover { background: #f3f3f3; }
.cartv-qty span { min-width: 34px; text-align: center; font-size: 14px; font-weight: 700; }
.cartv-item-right { text-align: right; flex-shrink: 0; }
.cartv-item-total { font-size: 16px; font-weight: 800; color: #111; }
.cartv-item-remove { margin-top: 8px; font-size: 12px; font-weight: 600; color: #ef4444; background: none; border: none; cursor: pointer; }
.cartv-item-remove:hover { text-decoration: underline; }

.cartv-summary { background: #fff; border: 1px solid #eee; border-radius: 20px; padding: 24px; position: sticky; top: calc(var(--ann-h) + var(--nav-h) + 16px); box-shadow: 0 18px 44px -26px rgba(20,22,40,.25); }
.cartv-summary-title { font-size: 17px; font-weight: 800; color: #161616; margin-bottom: 16px; }
.cartv-row { display: flex; justify-content: space-between; font-size: 14px; color: #444; padding: 8px 0; }
.cartv-free { color: #16a34a; font-weight: 800; }
.cartv-total { border-top: 1px solid #eee; margin-top: 6px; padding-top: 14px; font-size: 18px; font-weight: 900; color: #111; }
.cartv-checkout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 18px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 800; padding: 14px; border-radius: 12px; transition: gap .2s ease, transform .2s ease, box-shadow .2s ease; }
.cartv-checkout:hover { gap: 11px; transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(232,80,42,.6); }
.cartv-trust { display: flex; justify-content: center; gap: 18px; margin-top: 16px; }
.cartv-trust span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: rgba(0,0,0,.5); }
.cartv-trust svg { color: #16a34a; }
.cartv-pay { display: block; height: 26px; margin: 16px auto 0; opacity: .85; }

.cartv-empty-section { background: #f7f7f8; padding: 30px var(--pad-x) 90px; }
.cartv-empty { text-align: center; max-width: 380px; margin: 0 auto; padding-top: 30px; }
.cartv-empty-ring { width: 92px; height: 92px; border-radius: 50%; background: rgba(232,80,42,.08); color: var(--accent); display: grid; place-items: center; margin: 0 auto 22px; }
.cartv-empty-title { font-size: 22px; font-weight: 800; color: #161616; }
.cartv-empty-sub { font-size: 14.5px; color: rgba(0,0,0,.55); margin-top: 10px; line-height: 1.6; }
.cartv-empty-btn { display: inline-flex; margin-top: 24px; background: var(--accent); color: #fff; font-weight: 800; font-size: 14px; padding: 12px 26px; border-radius: 99px; transition: transform .2s ease, box-shadow .2s ease; }
.cartv-empty-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(232,80,42,.6); }

@media (max-width: 860px) { .cartv-grid { grid-template-columns: 1fr; } .cartv-summary { position: static; } }

/* ============================================================
   CHECKOUT PAGE — redesigned (easy & premium)
   ============================================================ */
.co-hero { position: relative; background: linear-gradient(180deg,#fbf8f1 0%,#ffffff 100%); text-align: center; }
.co-hero-inner { max-width: 700px; margin-inline: auto; padding: 44px var(--pad-x) 28px; }
.co-hero-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.co-hero-title { font-size: clamp(28px,4.5vw,42px); font-weight: 900; letter-spacing: -1px; color: #141414; }
.co-hero-steps { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.co-hstep { font-size: 12.5px; font-weight: 700; color: rgba(0,0,0,.4); padding: 6px 14px; border-radius: 99px; background: #fff; border: 1px solid #eee; }
.co-hstep.done { color: #16a34a; }
.co-hstep.done::before { content: "\2713 "; }
.co-hstep.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.co-hstep-line { width: 24px; height: 2px; background: #e2e2e2; }

.co-section { background: #f7f7f8; }
.co-wrap { max-width: 1100px; margin-inline: auto; padding: 32px var(--pad-x) 80px; }
.co-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.co-main { display: flex; flex-direction: column; gap: 18px; }
.co-card { background: #fff; border: 1px solid #eee; border-radius: 20px; padding: 24px; }
.co-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.co-step-no { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.co-card-title { font-size: 17px; font-weight: 800; color: #161616; }
.co-row2 { display: flex; gap: 12px; }
.co-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #444; margin-top: 8px; cursor: pointer; }
.co-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.co-saved { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.co-saved-chip { text-align: left; border: 1.5px solid #ececec; border-radius: 12px; padding: 11px 14px; background: #fafafa; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.co-saved-chip:hover { border-color: var(--accent); background: #fff; }
.co-saved-chip strong { display: block; font-size: 13px; color: #161616; }
.co-saved-chip span { display: block; font-size: 12px; color: rgba(0,0,0,.5); margin-top: 2px; }
.co-saved-note { font-size: 12px; color: rgba(0,0,0,.4); }
.co-pay { display: flex; align-items: center; gap: 12px; border: 1.5px solid #ececec; border-radius: 14px; padding: 14px 16px; cursor: pointer; margin-bottom: 10px; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.co-pay:hover { border-color: #d8d8d8; }
.co-pay.is-active { border-color: var(--accent); background: rgba(232,80,42,.04); box-shadow: 0 0 0 3px rgba(232,80,42,.08); }
.co-pay input { accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; }
.co-pay-body { flex: 1; display: flex; flex-direction: column; }
.co-pay-name { font-size: 14.5px; font-weight: 700; color: #161616; }
.co-pay-sub { font-size: 12px; color: rgba(0,0,0,.48); margin-top: 1px; }
.co-pay-ic { font-size: 22px; }
.co-error { color: #e53935; font-size: 13px; margin-top: 10px; font-weight: 600; }
.co-summary { background: #fff; border: 1px solid #eee; border-radius: 20px; padding: 22px; position: sticky; top: calc(var(--ann-h) + var(--nav-h) + 16px); box-shadow: 0 18px 44px -26px rgba(20,22,40,.25); }
.co-sum-title { font-size: 16px; font-weight: 800; color: #161616; margin-bottom: 14px; }
.co-sum-items { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #eee; }
.co-sum-item { display: flex; align-items: center; gap: 12px; }
.co-sum-thumb { position: relative; width: 48px; height: 48px; border-radius: 10px; background: #f4f4f6; overflow: visible; flex-shrink: 0; }
.co-sum-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.co-sum-thumb b { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #161616; color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.co-sum-iname { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #2a2a2a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-sum-iprice { font-size: 13.5px; font-weight: 800; color: #111; }
.co-offers { margin: 14px 0; border: 1px dashed #5b6fd6; background: #eef0fb; border-radius: 12px; padding: 12px; }
.co-offers-title { font-size: 12px; font-weight: 800; color: #4a5bc0; margin-bottom: 8px; }
.co-offer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; }
.co-offer-code { font-size: 12.5px; font-weight: 700; color: #0a0a0a; }
.co-offer-min { font-size: 11px; color: rgba(0,0,0,.45); }
.co-offer-min.ok { color: #16a34a; }
.co-offer-btn { padding: 6px 13px; border-radius: 8px; border: none; background: #5b6fd6; color: #fff; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }
.co-offer-btn:disabled { background: #cbd5e1; cursor: not-allowed; }
.co-coupon { display: flex; gap: 7px; margin: 14px 0 6px; }
.co-coupon-input { flex: 1; border: 1px solid #e0e0e0; border-radius: 10px; padding: 10px 12px; font-size: 13px; outline: none; }
.co-coupon-input:focus { border-color: var(--accent); }
.co-coupon-btn { padding: 10px 16px; border-radius: 10px; border: 1.5px solid #161616; background: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.co-coupon-btn:hover { background: #161616; color: #fff; }
.co-coupon-msg { font-size: 12px; color: #e53935; margin-bottom: 6px; font-weight: 600; }
.co-coupon-msg.ok { color: #16a34a; }
.co-sum-rows { margin-top: 6px; }
.co-sum-row { display: flex; justify-content: space-between; font-size: 14px; color: #444; padding: 7px 0; }
.co-free { color: #16a34a; font-weight: 800; }
.co-disc { color: #16a34a; font-weight: 700; }
.co-sum-grand { border-top: 1px solid #eee; margin-top: 4px; padding-top: 12px; font-size: 18px; font-weight: 900; color: #111; }
.co-place { width: 100%; margin-top: 16px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 800; padding: 15px; border-radius: 12px; border: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.co-place:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(232,80,42,.6); }
.co-place:disabled { opacity: .65; cursor: default; }
.co-trust { display: flex; justify-content: center; gap: 18px; margin-top: 14px; }
.co-trust span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: rgba(0,0,0,.5); }
.co-trust svg { color: #16a34a; }
.co-empty-section { background: #f7f7f8; padding: 30px var(--pad-x) 90px; }
.co-empty { text-align: center; max-width: 380px; margin: 0 auto; padding-top: 30px; }
.co-empty-ring { width: 90px; height: 90px; border-radius: 50%; background: rgba(232,80,42,.08); color: var(--accent); display: grid; place-items: center; margin: 0 auto 22px; }
.co-empty-title { font-size: 22px; font-weight: 800; color: #161616; }
.co-empty-sub { font-size: 14.5px; color: rgba(0,0,0,.55); margin-top: 10px; }
.co-empty-btn { display: inline-flex; margin-top: 22px; background: var(--accent); color: #fff; font-weight: 800; font-size: 14px; padding: 12px 26px; border-radius: 99px; }
@media (max-width: 860px) { .co-grid { grid-template-columns: 1fr; } .co-summary { position: static; } }

/* Checkout — pincode auto-fill hint */
.co-pin-hint { display: block; font-size: 11.5px; margin-top: 5px; font-weight: 600; color: rgba(0,0,0,.5); }
.co-pin-hint.ok { color: #16a34a; }
.co-pin-hint.err { color: #d97706; }

/* Checkout coupon row — keep Apply button always visible */
.co-coupon { align-items: stretch; }
.co-coupon-input { min-width: 0; }
.co-coupon-btn { flex-shrink: 0; white-space: nowrap; }

/* Checkout summary — per-item remove */
.co-sum-remove { background: none; border: none; color: #c4c4c4; cursor: pointer; padding: 3px; line-height: 0; flex-shrink: 0; border-radius: 6px; transition: color .15s ease, background .15s ease; }
.co-sum-remove:hover { color: #ef4444; background: #fef2f2; }

/* Checkout coupon button — explicit dark text (was inheriting white) */
.co-coupon-btn { color: #161616 !important; }
.co-coupon-btn:hover { color: #ffffff !important; }

/* =========================================================
   CART SIDE DRAWER (replaces /cart page) — v=33
   Lighter weights + premium footer
   ========================================================= */
.cd-overlay{
  position:fixed; inset:0; z-index:9998;
  background:rgba(15,18,28,.46); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.cd-overlay.is-open{ opacity:1; visibility:visible; }

.cd-drawer{
  position:fixed; top:0; right:0; z-index:9999;
  height:100%; width:412px; max-width:93vw;
  background:#f6f7f9; color:#1d2129;
  display:flex; flex-direction:column;
  box-shadow:-22px 0 60px rgba(15,18,28,.2);
  transform:translateX(102%); transition:transform .36s cubic-bezier(.22,.61,.36,1);
  font-family:"Outfit",system-ui,sans-serif; font-weight:400;
}
.cd-drawer.is-open{ transform:translateX(0); }

/* header */
.cd-head{
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:17px 20px; background:#fff; border-bottom:1px solid #eef0f3;
}
.cd-head-title{ margin:0; font-size:17px; font-weight:600; color:#1d2129; letter-spacing:-.2px; }
.cd-head-title span{ font-weight:400; color:#969ba5; font-size:13.5px; }
.cd-close{
  width:34px; height:34px; border:none; border-radius:50%;
  background:#f2f3f5; color:#4a4f59; display:grid; place-items:center;
  cursor:pointer; transition:background .2s, transform .25s;
}
.cd-close:hover{ background:#e8eaee; transform:rotate(90deg); }

/* progress */
.cd-progress{
  flex-shrink:0; padding:13px 20px; background:#fff; border-bottom:1px solid #eef0f3;
}
.cd-progress-txt{ margin:0 0 8px; font-size:12.5px; font-weight:400; color:#4a4f59; text-align:center; }
.cd-progress-txt b{ color:#1d2129; font-weight:600; }
.cd-progress-done b{ color:#1aa260; font-weight:600; }
.cd-progress-bar{ height:6px; border-radius:99px; background:#edeff2; overflow:hidden; }
.cd-progress-bar span{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#19c578,#13a85f); transition:width .5s ease;
}

/* body scroll */
.cd-body{ flex:1; overflow-y:auto; padding:14px 16px 8px; }
.cd-body::-webkit-scrollbar{ width:6px; }
.cd-body::-webkit-scrollbar-thumb{ background:#d8dade; border-radius:99px; }

/* items */
.cd-items{ display:flex; flex-direction:column; gap:10px; }
.cd-item{
  position:relative; display:flex; gap:13px; align-items:flex-start;
  background:#fff; border:1px solid #eef0f3; border-radius:15px; padding:12px;
  transition:box-shadow .2s, border-color .2s;
}
.cd-item:hover{ box-shadow:0 6px 18px rgba(15,18,28,.06); border-color:#e3e6ea; }
.cd-item-img{ flex-shrink:0; width:64px; height:64px; border-radius:11px; overflow:hidden; background:#f3f4f6; display:block; }
.cd-item-img img{ width:100%; height:100%; object-fit:contain; }
.cd-item-main{ flex:1; min-width:0; }
.cd-item-name{
  font-size:13.5px; font-weight:500; color:#1d2129; line-height:1.4;
  text-decoration:none; margin-bottom:11px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cd-item-name:hover{ color:#e8502a; }
.cd-item-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cd-qty{ display:inline-flex; align-items:center; border:1px solid #e3e6ea; border-radius:10px; overflow:hidden; background:#fff; }
.cd-qty button{
  width:30px; height:30px; border:none; background:#fff; color:#1d2129;
  font-size:17px; font-weight:400; cursor:pointer; transition:background .15s;
}
.cd-qty button:hover{ background:#f3f4f6; }
.cd-qty span{ min-width:30px; text-align:center; font-size:13.5px; font-weight:500; color:#1d2129; }
.cd-item-price{ font-size:15px; font-weight:600; color:#1d2129; }
.cd-item-del{
  position:absolute; top:11px; right:11px; width:27px; height:27px; border:none;
  background:transparent; color:#bfc3ca; border-radius:7px; display:grid; place-items:center;
  cursor:pointer; transition:color .2s, background .2s;
}
.cd-item-del:hover{ color:#e23b3b; background:#fdecec; }

/* coupon */
.cd-coupon{
  display:flex; align-items:center; gap:9px; margin-top:14px;
  background:#fff; border:1.5px dashed #d3d6dd; border-radius:13px; padding:0 14px;
}
.cd-coupon svg{ color:#969ba5; flex-shrink:0; }
.cd-coupon input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  padding:14px 0; font-size:13.5px; font-weight:500; color:#1d2129; letter-spacing:.4px;
}
.cd-coupon input::placeholder{ color:#a2a7b0; font-weight:400; letter-spacing:0; text-transform:none; }
.cd-offers-link{
  display:block; text-align:center; margin:12px 0 4px; font-size:13px; font-weight:500;
  color:#2f57d8; text-decoration:none;
}
.cd-offers-link:hover{ text-decoration:underline; }

/* recommendations */
.cd-recs{ margin-top:18px; }
.cd-recs-title{ font-size:13.5px; font-weight:600; color:#1d2129; margin-bottom:10px; }
.cd-recs-scroll{ display:flex; gap:11px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; }
.cd-recs-scroll::-webkit-scrollbar{ height:5px; }
.cd-recs-scroll::-webkit-scrollbar-thumb{ background:#d8dade; border-radius:99px; }
.cd-rec{
  flex:0 0 140px; scroll-snap-align:start; background:#fff; border:1px solid #eef0f3;
  border-radius:14px; padding:10px; display:flex; flex-direction:column;
  transition:box-shadow .2s, transform .2s;
}
.cd-rec:hover{ box-shadow:0 8px 20px rgba(15,18,28,.08); transform:translateY(-2px); }
.cd-rec-img{ position:relative; display:block; height:86px; border-radius:10px; overflow:hidden; background:#f3f4f6; margin-bottom:8px; }
.cd-rec-img img{ width:100%; height:100%; object-fit:contain; }
.cd-rec-off{
  position:absolute; top:6px; left:6px; background:#19c578; color:#fff;
  font-size:10px; font-weight:600; padding:2px 6px; border-radius:6px;
}
.cd-rec-name{
  font-size:12px; font-weight:500; color:#1d2129; line-height:1.35; margin-bottom:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:32px;
}
.cd-rec-price{ font-size:13px; color:#1d2129; margin-bottom:8px; font-weight:400; }
.cd-rec-price s{ color:#a2a7b0; font-weight:400; font-size:11px; margin-right:3px; }
.cd-rec-price b{ font-weight:600; }
.cd-rec-add{
  margin-top:auto; border:1.3px solid #1d2129; background:#fff; color:#1d2129;
  border-radius:9px; padding:7px 0; font-size:12px; font-weight:500; cursor:pointer;
  transition:background .2s, color .2s;
}
.cd-rec-add:hover{ background:#1d2129; color:#fff; }

/* ── footer (ref-style) ─────────────────────────────── */
.cd-foot{ flex-shrink:0; background:#fff; border-top:1px solid #eef0f3; padding:13px 16px 14px; }
.cd-total{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; padding:0 4px; }
.cd-total-label{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#1d2129; }
.cd-total-label svg{ color:#1d2129; }
.cd-total-amt{ font-size:21px; font-weight:700; color:#1d2129; letter-spacing:-.5px; }

.cd-checkout{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  background:#15171c; color:#fff; border:none; border-radius:16px; padding:14px 16px;
  text-decoration:none; cursor:pointer; text-align:left;
  transition:transform .15s, box-shadow .25s, background .2s;
}
.cd-checkout:hover{ background:#000; transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.26); }
.cd-checkout-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cd-checkout-title{ font-size:19px; font-weight:600; color:#fff; letter-spacing:-.3px; line-height:1.1; }
.cd-checkout-sub{ font-size:11px; font-weight:300; color:rgba(255,255,255,.6); }

.cd-pay-icons{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.cd-pay{
  display:grid; place-items:center; min-width:30px; height:24px; padding:0 7px;
  background:#fff; border-radius:6px; font-size:10px; font-weight:700; line-height:1;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.cd-pay-upi{ color:#0b8a3d; letter-spacing:.3px; }
.cd-pay-card{ color:#1a3fb0; padding:0 6px; }
.cd-pay-rupee{ color:#5b2d8e; font-size:13px; }

.cd-foot-quote{ margin:11px 0 0; text-align:center; font-size:12.5px; font-style:italic; font-weight:400; color:#5a5f68; }
.cd-foot-secure{ margin:6px 0 0; display:flex; align-items:center; justify-content:center; gap:5px; font-size:11px; font-weight:400; color:#a2a7b0; }
.cd-foot-secure svg{ color:#19c578; }

/* empty */
.cd-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 30px; gap:6px; }
.cd-empty-ic{ width:84px; height:84px; border-radius:50%; background:#fff; color:#c8ccd2; display:grid; place-items:center; margin-bottom:8px; box-shadow:0 6px 18px rgba(15,18,28,.06); }
.cd-empty-title{ margin:0; font-size:17px; font-weight:600; color:#1d2129; }
.cd-empty-sub{ margin:0 0 14px; font-size:13px; font-weight:400; color:#969ba5; }
.cd-empty-btn{ border:none; background:#15171c; color:#fff; border-radius:12px; padding:13px 28px; font-size:13.5px; font-weight:500; cursor:pointer; transition:background .2s, transform .15s; }
.cd-empty-btn:hover{ background:#000; transform:translateY(-1px); }

/* =========================================================
   ORDER CONFIRMATION PAGE — v=34
   ========================================================= */
.oc-wrap{ background:#f6f7f9; min-height:70vh; padding:38px 16px 60px; font-family:"Outfit",system-ui,sans-serif; }
.oc-inner{ max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }

/* hero */
.oc-hero{ text-align:center; padding:8px 10px 4px; }
.oc-check{ width:88px; height:88px; margin:0 auto 18px; }
.oc-check svg{ width:100%; height:100%; }
.oc-check-circle{ stroke:#19c578; stroke-width:2.4; stroke-dasharray:151; stroke-dashoffset:151; animation:ocCircle .6s ease forwards; }
.oc-check-mark{ stroke:#19c578; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:48; stroke-dashoffset:48; animation:ocMark .4s .55s ease forwards; }
.oc-check.is-cancel .oc-check-circle{ stroke:#e23b3b; }
.oc-check.is-cancel .oc-check-mark{ stroke:#e23b3b; }
@keyframes ocCircle{ to{ stroke-dashoffset:0; } }
@keyframes ocMark{ to{ stroke-dashoffset:0; } }

.oc-hero-title{ margin:0 0 8px; font-size:28px; font-weight:600; color:#15171c; letter-spacing:-.6px; }
.oc-hero-sub{ margin:0 auto; max-width:440px; font-size:14.5px; font-weight:400; color:#5a5f68; line-height:1.55; }
.oc-hero-sub b{ font-weight:600; color:#15171c; }
.oc-meta{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:18px; }
.oc-meta-chip{
  display:inline-flex; flex-direction:column; gap:2px; align-items:flex-start;
  background:#fff; border:1px solid #eef0f3; border-radius:11px; padding:8px 14px;
  font-size:13px; font-weight:500; color:#15171c;
}
.oc-meta-chip i{ font-size:10.5px; font-weight:400; font-style:normal; color:#969ba5; text-transform:uppercase; letter-spacing:.4px; }

/* cards */
.oc-card{ background:#fff; border:1px solid #eef0f3; border-radius:18px; padding:20px 20px; }
.oc-card-title{ margin:0 0 16px; font-size:16px; font-weight:600; color:#15171c; }
.oc-card-title span{ font-weight:400; color:#969ba5; font-size:13.5px; }

/* tracking */
.oc-track{ padding-top:18px; }
.oc-track-eta{ display:flex; align-items:center; gap:13px; background:#f0fbf5; border:1px solid #cdeedd; border-radius:13px; padding:13px 16px; margin-bottom:26px; }
.oc-track-eta-ic{ font-size:26px; }
.oc-track-eta-label{ margin:0; font-size:11.5px; font-weight:400; color:#5a7a68; text-transform:uppercase; letter-spacing:.5px; }
.oc-track-eta-date{ margin:1px 0 0; font-size:17px; font-weight:600; color:#0e7a45; letter-spacing:-.3px; }

.oc-steps{ position:relative; display:flex; justify-content:space-between; padding:0 4px 4px; }
.oc-steps-line{ position:absolute; top:13px; left:32px; right:32px; height:3px; background:#edeff2; border-radius:99px; overflow:hidden; }
.oc-steps-line span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#19c578,#13a85f); width:calc(var(--active) / 3 * 100%); transition:width .6s ease; }
.oc-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; flex:1; }
.oc-step-dot{
  width:28px; height:28px; border-radius:50%; background:#fff; border:2.5px solid #e1e4e8;
  color:#a2a7b0; display:grid; place-items:center; margin-bottom:9px; transition:.3s;
}
.oc-step-num{ font-size:12px; font-weight:600; }
.oc-step.is-done .oc-step-dot{ background:#19c578; border-color:#19c578; color:#fff; }
.oc-step.is-current .oc-step-dot{ box-shadow:0 0 0 5px rgba(25,197,120,.16); }
.oc-step-label{ margin:0; font-size:12.5px; font-weight:500; color:#a2a7b0; }
.oc-step.is-done .oc-step-label{ color:#15171c; }
.oc-step-desc{ margin:2px 0 0; font-size:10.5px; font-weight:400; color:#b3b7be; line-height:1.3; }

/* items */
.oc-items{ display:flex; flex-direction:column; gap:14px; }
.oc-item{ display:flex; align-items:center; gap:14px; }
.oc-item-img{ position:relative; flex-shrink:0; width:56px; height:56px; border-radius:12px; background:#f3f4f6; display:grid; place-items:center; overflow:visible; }
.oc-item-img img{ width:100%; height:100%; object-fit:contain; border-radius:12px; }
.oc-item-ph{ font-size:24px; }
.oc-item-qty{ position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px; background:#15171c; color:#fff; border-radius:99px; font-size:11px; font-weight:600; display:grid; place-items:center; border:2px solid #fff; }
.oc-item-main{ flex:1; min-width:0; }
.oc-item-name{ margin:0; font-size:14px; font-weight:500; color:#15171c; line-height:1.4; }
.oc-item-variant{ margin:3px 0 0; font-size:12.5px; font-weight:400; color:#969ba5; }
.oc-item-price{ font-size:14.5px; font-weight:600; color:#15171c; white-space:nowrap; }

/* totals */
.oc-totals{ margin-top:18px; padding-top:16px; border-top:1px solid #f0f1f4; display:flex; flex-direction:column; gap:9px; }
.oc-total-row{ display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:400; color:#5a5f68; }
.oc-total-row span:last-child{ font-weight:500; color:#15171c; }
.oc-total-disc span{ color:#0e9b52 !important; }
.oc-free{ color:#0e9b52; font-weight:600; }
.oc-total-grand{ margin-top:6px; padding-top:13px; border-top:1px dashed #e1e4e8; font-size:16px; font-weight:600; color:#15171c; }
.oc-total-grand span:last-child{ font-size:19px; font-weight:700; letter-spacing:-.4px; }

/* info cards */
.oc-info{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.oc-info-card{ padding:18px 18px; }
.oc-info-head{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#15171c; margin-bottom:11px; }
.oc-info-head svg{ color:#7a8089; }
.oc-info-name{ margin:0 0 5px; font-size:14px; font-weight:500; color:#15171c; }
.oc-info-text{ margin:0 0 3px; font-size:13px; font-weight:400; color:#5a5f68; line-height:1.5; }
.oc-pay-paid{ color:#0e9b52; font-weight:500; }

/* actions */
.oc-actions{ display:flex; gap:12px; margin-top:4px; }
.oc-btn{ flex:1; text-align:center; border-radius:13px; padding:15px; font-size:14px; font-weight:500; text-decoration:none; transition:transform .15s, background .2s, box-shadow .25s; }
.oc-btn-dark{ background:#15171c; color:#fff; }
.oc-btn-dark:hover{ background:#000; transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.22); }
.oc-btn-ghost{ background:#fff; color:#15171c; border:1.4px solid #e1e4e8; }
.oc-btn-ghost:hover{ border-color:#15171c; transform:translateY(-1px); }

.oc-help{ text-align:center; margin:6px 0 0; font-size:13px; font-weight:400; color:#969ba5; }
.oc-help a{ color:#2f57d8; font-weight:500; text-decoration:none; }
.oc-help a:hover{ text-decoration:underline; }

@media (max-width:560px){
  .oc-hero-title{ font-size:24px; }
  .oc-info{ grid-template-columns:1fr; }
  .oc-actions{ flex-direction:column; }
  .oc-step-desc{ display:none; }
  .oc-step-label{ font-size:11px; }
}

/* =========================================================
   TRACK ORDER PAGE — v=36  (reuses .oc-* timeline/items)
   ========================================================= */
.to-wrap{ background:#f6f7f9; min-height:72vh; padding:42px 16px 64px; font-family:"Outfit",system-ui,sans-serif; }
.to-inner{ max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }

.to-hero{ text-align:center; padding:4px 6px 6px; }
.to-hero-ic{ font-size:42px; display:block; margin-bottom:10px; }
.to-hero-title{ margin:0 0 8px; font-size:27px; font-weight:600; color:#15171c; letter-spacing:-.5px; }
.to-hero-sub{ margin:0 auto; max-width:420px; font-size:14px; font-weight:400; color:#5a5f68; line-height:1.55; }

/* form */
.to-card{ background:#fff; border:1px solid #eef0f3; border-radius:18px; padding:22px 22px; }
.to-form{ display:flex; flex-direction:column; gap:14px; }
.to-field{ display:flex; flex-direction:column; gap:6px; }
.to-label{ font-size:12.5px; font-weight:500; color:#4a4f59; }
.to-field input{
  border:1.5px solid #e3e6ea; border-radius:11px; padding:13px 14px; font-size:14px;
  font-weight:400; color:#15171c; background:#fbfbfc; outline:none; transition:border-color .2s, background .2s;
  font-family:inherit;
}
.to-field input:focus{ border-color:#15171c; background:#fff; }
.to-field input::placeholder{ color:#a2a7b0; }
.to-submit{
  margin-top:4px; border:none; background:#15171c; color:#fff; border-radius:12px; padding:15px;
  font-size:14.5px; font-weight:500; cursor:pointer; transition:background .2s, transform .15s, box-shadow .25s;
}
.to-submit:hover:not(:disabled){ background:#000; transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.22); }
.to-submit:disabled{ opacity:.65; cursor:not-allowed; }
.to-error{ margin:2px 0 0; font-size:13px; font-weight:400; color:#d63232; background:#fdecec; border-radius:9px; padding:10px 13px; }

/* result */
.to-result{ display:flex; flex-direction:column; gap:16px; }
.to-result-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.to-result-no{ margin:0; font-size:17px; font-weight:600; color:#15171c; letter-spacing:.2px; }
.to-result-date{ margin:4px 0 0; font-size:12.5px; font-weight:400; color:#969ba5; }

.to-badge{ flex-shrink:0; font-size:11px; font-weight:600; padding:5px 11px; border-radius:99px; text-transform:capitalize; letter-spacing:.2px; }
.to-badge-pending,.to-badge-confirmed{ background:#eaf0ff; color:#2f57d8; }
.to-badge-packed{ background:#fff2e0; color:#c2710a; }
.to-badge-dispatched{ background:#e6f4ff; color:#0a72c2; }
.to-badge-delivered{ background:#e6f8ef; color:#0e9b52; }
.to-badge-cancelled,.to-badge-returned{ background:#fdecec; color:#d63232; }

.to-cancel{ margin-top:16px; background:#fdecec; border:1px solid #f6cccc; border-radius:12px; padding:14px 16px; font-size:13.5px; font-weight:400; color:#a32525; }

.to-detail-link{ display:inline-block; margin-top:16px; font-size:13.5px; font-weight:500; color:#2f57d8; text-decoration:none; }
.to-detail-link:hover{ text-decoration:underline; }

.to-help{ text-align:center; margin:6px 0 0; font-size:13px; font-weight:400; color:#969ba5; line-height:1.6; }
.to-help b{ font-weight:600; color:#5a5f68; }
.to-help a{ color:#2f57d8; font-weight:500; text-decoration:none; }
.to-help a:hover{ text-decoration:underline; }

/* =========================================================
   SITEMAP PAGE — premium redesign (v=42)
   ========================================================= */
.sm-page{ font-family:"Outfit",system-ui,sans-serif; background:#f6f7f9; min-height:70vh; padding-bottom:60px; }

/* hero */
.sm-hero{ position:relative; overflow:hidden; padding:52px 20px 46px; text-align:center;
  background:linear-gradient(160deg,#15171c 0%,#23262f 60%,#2b2533 100%); color:#fff; }
.sm-hero::before{ content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0); background-size:24px 24px; }
.sm-hero-inner{ position:relative; z-index:1; max-width:560px; margin:0 auto; }
.sm-hero-ic{ display:inline-grid; place-items:center; width:54px; height:54px; border-radius:15px; margin-bottom:16px;
  background:rgba(255,255,255,.1); color:#ff8a6a; border:1px solid rgba(255,255,255,.14); }
.sm-eyebrow{ margin:0 0 8px; font-size:11.5px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:#ff8a6a; }
.sm-title{ margin:0 0 12px; font-size:clamp(30px,5vw,40px); font-weight:600; letter-spacing:-.8px; color:#fff; }
.sm-sub{ margin:0 auto; max-width:480px; font-size:14.5px; font-weight:300; color:rgba(255,255,255,.72); line-height:1.6; }
.sm-meta{ display:inline-flex; align-items:center; gap:14px; margin-top:22px; font-size:13px; font-weight:300; color:rgba(255,255,255,.72); }
.sm-meta b{ font-weight:700; color:#fff; }
.sm-meta i{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.3); }

.sm-inner{ max-width:1060px; margin:0 auto; padding:0 16px; }

/* section card head */
.sm-block-head{ display:flex; align-items:center; gap:10px; margin-bottom:15px; }
.sm-block-ic{ flex-shrink:0; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; }
.sm-block-title{ margin:0; font-size:14.5px; font-weight:600; color:#15171c; flex:1; }
.sm-block-count{ font-size:11.5px; font-weight:600; color:#969ba5; background:#f1f3f6; border-radius:99px; padding:2px 9px; }

/* section grid */
.sm-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin:-26px 0 16px; position:relative; z-index:2; }
.sm-block{ background:#fff; border:1px solid #eef0f3; border-radius:18px; padding:20px 20px; box-shadow:0 4px 14px rgba(15,18,28,.04); transition:box-shadow .2s, transform .2s; }
.sm-block:hover{ box-shadow:0 12px 28px rgba(15,18,28,.08); transform:translateY(-2px); }
.sm-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; --sm-accent:#e8502a; }
.sm-links a{
  display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:400; color:#4a4f59;
  text-decoration:none; padding:6px 8px; margin:0 -8px; border-radius:8px; transition:color .16s, background .16s, transform .16s;
}
.sm-links a svg{ color:#c8ccd2; transition:color .16s, transform .16s; flex-shrink:0; }
.sm-links a:hover{ color:var(--sm-accent); background:#f7f8fa; transform:translateX(2px); }
.sm-links a:hover svg{ color:var(--sm-accent); }

/* all products with thumbnails */
.sm-products{ background:#fff; border:1px solid #eef0f3; border-radius:18px; padding:22px 22px; box-shadow:0 4px 14px rgba(15,18,28,.04); }
.sm-products-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; }
.sm-product-link{
  display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:11px; text-decoration:none;
  transition:background .16s; min-width:0;
}
.sm-product-link:hover{ background:#f7f8fa; }
.sm-product-thumb{ flex-shrink:0; width:40px; height:40px; border-radius:9px; background:#f3f4f6; display:grid; place-items:center; overflow:hidden; }
.sm-product-thumb img{ width:100%; height:100%; object-fit:contain; }
.sm-product-ph{ font-size:18px; }
.sm-product-name{ flex:1; min-width:0; font-size:13.5px; font-weight:400; color:#3a3f48; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sm-product-link:hover .sm-product-name{ color:#15171c; }
.sm-product-arrow{ color:#d0d4da; flex-shrink:0; transition:color .16s, transform .16s; }
.sm-product-link:hover .sm-product-arrow{ color:#e8502a; transform:translateX(2px); }

@media (max-width:560px){
  .sm-grid{ grid-template-columns:1fr 1fr; margin-top:-22px; }
  .sm-products-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   CAREERS PAGE — v=38
   ========================================================= */
.cr-page{ font-family:"Outfit",system-ui,sans-serif; background:#f6f7f9; color:#15171c; }

/* hero */
.cr-hero{ position:relative; overflow:hidden; background:linear-gradient(160deg,#15171c 0%,#23262f 55%,#2c2030 100%); color:#fff; padding:64px 20px 56px; }
.cr-hero::before{ content:""; position:absolute; top:-120px; right:-80px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,rgba(232,80,42,.45),transparent 65%); filter:blur(20px); }
.cr-hero::after{ content:""; position:absolute; bottom:-140px; left:-60px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(91,111,214,.4),transparent 65%); filter:blur(20px); }
.cr-hero-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center; }
.cr-eyebrow{ margin:0 0 14px; font-size:12px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:#ff8a6a; }
.cr-hero-title{ margin:0 0 16px; font-size:clamp(30px,5vw,46px); font-weight:600; line-height:1.12; letter-spacing:-1px; }
.cr-hero-title span{ background:linear-gradient(90deg,#ff8a6a,#ffb199); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cr-hero-sub{ margin:0 auto 26px; max-width:560px; font-size:15px; font-weight:300; line-height:1.65; color:rgba(255,255,255,.72); }
.cr-hero-btn{ display:inline-block; background:#fff; color:#15171c; border-radius:12px; padding:13px 30px; font-size:14.5px; font-weight:500; text-decoration:none; transition:transform .15s, box-shadow .25s; }
.cr-hero-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.3); }

.cr-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:46px; }
.cr-stat{ display:flex; flex-direction:column; gap:3px; }
.cr-stat-num{ font-size:28px; font-weight:700; letter-spacing:-.5px; color:#fff; }
.cr-stat-label{ font-size:12px; font-weight:300; color:rgba(255,255,255,.6); }

/* perks */
.cr-perks{ max-width:1040px; margin:0 auto; padding:56px 20px 20px; }
.cr-section-head{ text-align:center; margin-bottom:34px; }
.cr-section-title{ margin:0 0 8px; font-size:28px; font-weight:600; letter-spacing:-.5px; }
.cr-section-sub{ margin:0; font-size:14.5px; font-weight:400; color:#5a5f68; }
.cr-perks-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.cr-perk{ background:#fff; border:1px solid #eef0f3; border-radius:16px; padding:24px 22px; transition:transform .2s, box-shadow .2s; }
.cr-perk:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(15,18,28,.08); }
.cr-perk-ic{ font-size:30px; display:block; margin-bottom:12px; }
.cr-perk-title{ margin:0 0 6px; font-size:16px; font-weight:600; color:#15171c; }
.cr-perk-desc{ margin:0; font-size:13.5px; font-weight:400; color:#5a5f68; line-height:1.55; }

/* apply */
.cr-apply{ max-width:1040px; margin:0 auto; padding:46px 20px 70px; }
.cr-apply-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:36px; align-items:start; }
.cr-apply-info{ padding-top:10px; }
.cr-apply-title{ margin:0 0 14px; font-size:30px; font-weight:600; line-height:1.15; letter-spacing:-.6px; }
.cr-apply-text{ margin:0 0 22px; font-size:14.5px; font-weight:400; color:#5a5f68; line-height:1.6; }
.cr-apply-list{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:12px; }
.cr-apply-list li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; font-weight:400; color:#3a3f48; line-height:1.5; }
.cr-apply-list li span{ flex-shrink:0; width:20px; height:20px; border-radius:50%; background:#e6f8ef; color:#0e9b52; display:grid; place-items:center; font-size:11px; font-weight:700; margin-top:1px; }
.cr-apply-contact{ border-top:1px solid #e8eaee; padding-top:18px; }
.cr-apply-contact p{ margin:0 0 3px; font-size:12.5px; font-weight:400; color:#969ba5; }
.cr-apply-contact a{ font-size:15px; font-weight:600; color:#e8502a; text-decoration:none; }
.cr-apply-contact a:hover{ text-decoration:underline; }

/* form */
.cr-form-card{ background:#fff; border:1px solid #eef0f3; border-radius:20px; padding:28px 26px; box-shadow:0 10px 36px rgba(15,18,28,.06); }
.cr-form-heading{ margin:0 0 5px; font-size:20px; font-weight:600; color:#15171c; }
.cr-form-note{ margin:0 0 20px; font-size:13px; font-weight:400; color:#969ba5; }
.cr-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cr-field{ margin-bottom:14px; }
.cr-label{ display:block; margin-bottom:6px; font-size:12.5px; font-weight:500; color:#4a4f59; }
.cr-input{
  width:100%; border:1.5px solid #e3e6ea; border-radius:11px; padding:12px 13px; font-size:14px;
  font-weight:400; color:#15171c; background:#fbfbfc; outline:none; transition:border-color .2s, background .2s;
  font-family:inherit;
}
.cr-input:focus{ border-color:#15171c; background:#fff; }
.cr-input::placeholder{ color:#a2a7b0; }
.cr-select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23969ba5' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; cursor:pointer; }
.cr-textarea{ resize:vertical; min-height:96px; line-height:1.5; }
.cr-form-error{ margin:0 0 12px; font-size:13px; font-weight:400; color:#d63232; background:#fdecec; border-radius:9px; padding:10px 13px; }
.cr-submit{
  width:100%; border:none; background:#15171c; color:#fff; border-radius:12px; padding:15px; font-size:15px;
  font-weight:500; cursor:pointer; transition:background .2s, transform .15s, box-shadow .25s;
}
.cr-submit:hover:not(:disabled){ background:#000; transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.22); }
.cr-submit:disabled{ opacity:.65; cursor:not-allowed; }
.cr-form-fineprint{ margin:13px 0 0; text-align:center; font-size:11.5px; font-weight:400; color:#a2a7b0; }

/* success */
.cr-form-success{ text-align:center; padding:50px 30px; }
.cr-success-ic{ width:72px; height:72px; margin:0 auto 16px; border-radius:50%; background:#e6f8ef; display:grid; place-items:center; }
.cr-success-title{ margin:0 0 8px; font-size:22px; font-weight:600; color:#15171c; }
.cr-success-sub{ margin:0 auto; max-width:340px; font-size:14px; font-weight:400; color:#5a5f68; line-height:1.6; }

@media (max-width:820px){
  .cr-apply-grid{ grid-template-columns:1fr; gap:26px; }
  .cr-stats{ grid-template-columns:repeat(2,1fr); gap:20px 14px; }
}
@media (max-width:520px){
  .cr-row{ grid-template-columns:1fr; gap:0; }
  .cr-hero{ padding:48px 18px 44px; }
}

/* =========================================================
   DEALERS — "How it works" steps (v=39)  (reuses .cr-* styles)
   ========================================================= */
.cr-steps-sec{ max-width:1040px; margin:0 auto; padding:34px 20px 6px; }
.cr-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cr-step-card{ position:relative; background:#fff; border:1px solid #eef0f3; border-radius:16px; padding:26px 22px; text-align:center; }
.cr-step-n{
  width:40px; height:40px; margin:0 auto 14px; border-radius:50%;
  background:linear-gradient(140deg,#15171c,#2c2030); color:#fff;
  display:grid; place-items:center; font-size:17px; font-weight:600;
}
.cr-step-title{ margin:0 0 6px; font-size:15.5px; font-weight:600; color:#15171c; }
.cr-step-desc{ margin:0; font-size:13px; font-weight:400; color:#5a5f68; line-height:1.5; }

@media (max-width:640px){
  .cr-steps{ grid-template-columns:1fr; }
}

/* =========================================================
   DEALERS PAGE — distinct emerald/partnership theme (v=40)
   ========================================================= */
.dl-page{ font-family:"Outfit",system-ui,sans-serif; background:#f4f7f5; color:#15211c; --dl:#0ea372; --dl-dk:#0b7d57; }

/* hero — light split */
.dl-hero{ position:relative; overflow:hidden; padding:56px 20px 50px;
  background:radial-gradient(120% 90% at 85% 0%, #e6f6ee 0%, #f4f7f5 55%); }
.dl-hero-inner{ position:relative; z-index:1; max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1.15fr 0.85fr; gap:42px; align-items:center; }
.dl-hero-left{ }
.dl-eyebrow{ display:inline-flex; align-items:center; gap:8px; margin:0 0 16px; font-size:12px; font-weight:500; letter-spacing:1.4px; text-transform:uppercase; color:var(--dl-dk); }
.dl-eyebrow-dot{ width:7px; height:7px; border-radius:50%; background:var(--dl); box-shadow:0 0 0 4px rgba(14,163,114,.18); }
.dl-hero-title{ margin:0 0 16px; font-size:clamp(30px,4.6vw,44px); font-weight:600; line-height:1.12; letter-spacing:-1px; color:#15211c; }
.dl-hero-title span{ color:var(--dl-dk); }
.dl-hero-sub{ margin:0 0 26px; max-width:520px; font-size:15px; font-weight:400; line-height:1.65; color:#4a5a52; }
.dl-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.dl-btn-primary{ background:var(--dl); color:#fff; border-radius:12px; padding:14px 28px; font-size:14.5px; font-weight:500; text-decoration:none; transition:background .2s, transform .15s, box-shadow .25s; }
.dl-btn-primary:hover{ background:var(--dl-dk); transform:translateY(-2px); box-shadow:0 12px 26px rgba(14,163,114,.32); }
.dl-btn-ghost{ display:inline-flex; align-items:center; gap:8px; color:#15211c; border:1.5px solid #cfe3d8; border-radius:12px; padding:13px 22px; font-size:14px; font-weight:500; text-decoration:none; background:#fff; transition:border-color .2s, transform .15s; }
.dl-btn-ghost svg{ color:var(--dl-dk); }
.dl-btn-ghost:hover{ border-color:var(--dl); transform:translateY(-2px); }

/* hero highlights card */
.dl-hero-card{ background:linear-gradient(155deg,#0f5f44 0%,#0ea372 100%); color:#fff; border-radius:22px; padding:28px 26px; box-shadow:0 24px 50px rgba(11,125,87,.28); }
.dl-hero-card-title{ margin:0 0 16px; font-size:16px; font-weight:600; }
.dl-hero-card-list{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:11px; }
.dl-hero-card-list li{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:400; color:rgba(255,255,255,.94); }
.dl-hero-card-list svg{ flex-shrink:0; color:#a9f0cf; }
.dl-hero-card-stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px; border-top:1px solid rgba(255,255,255,.18); padding-top:18px; }
.dl-hero-stat{ display:flex; flex-direction:column; gap:1px; }
.dl-hero-stat-num{ font-size:22px; font-weight:700; letter-spacing:-.4px; }
.dl-hero-stat-label{ font-size:11.5px; font-weight:300; color:rgba(255,255,255,.7); }

/* section heads */
.dl-sec-head{ text-align:center; margin-bottom:30px; }
.dl-sec-title{ margin:0 0 8px; font-size:27px; font-weight:600; letter-spacing:-.5px; color:#15211c; }
.dl-sec-sub{ margin:0; font-size:14.5px; font-weight:400; color:#5a6a62; }

/* benefits — icon-left horizontal cards */
.dl-benefits{ max-width:1040px; margin:0 auto; padding:54px 20px 18px; }
.dl-benefits-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }
.dl-benefit{ display:flex; align-items:flex-start; gap:15px; background:#fff; border:1px solid #e6ede9; border-radius:15px; padding:20px 20px; transition:transform .2s, box-shadow .2s, border-color .2s; }
.dl-benefit:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(11,125,87,.1); border-color:#bfe3d2; }
.dl-benefit-ic{ flex-shrink:0; width:46px; height:46px; border-radius:12px; background:#eafaf2; display:grid; place-items:center; font-size:23px; }
.dl-benefit-title{ margin:0 0 4px; font-size:15.5px; font-weight:600; color:#15211c; }
.dl-benefit-desc{ margin:0; font-size:13.5px; font-weight:400; color:#5a6a62; line-height:1.52; }

/* steps — connected flow */
.dl-steps{ max-width:980px; margin:0 auto; padding:42px 20px 14px; }
.dl-steps-flow{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.dl-steps-flow::before{ content:""; position:absolute; top:24px; left:16%; right:16%; height:2px; background:repeating-linear-gradient(90deg,#bfe3d2 0 8px,transparent 8px 16px); }
.dl-step{ position:relative; z-index:1; text-align:center; }
.dl-step-n{ width:48px; height:48px; margin:0 auto 14px; border-radius:50%; background:var(--dl); color:#fff; display:grid; place-items:center; font-size:18px; font-weight:600; box-shadow:0 0 0 6px #eafaf2; }
.dl-step-title{ margin:0 0 5px; font-size:15.5px; font-weight:600; color:#15211c; }
.dl-step-desc{ margin:0 auto; max-width:220px; font-size:13px; font-weight:400; color:#5a6a62; line-height:1.5; }

/* apply — colored band + centered form */
.dl-apply{ margin-top:48px; padding:50px 20px 64px; background:linear-gradient(160deg,#0f5f44 0%,#0b7d57 100%); }
.dl-apply-head{ text-align:center; max-width:560px; margin:0 auto 26px; }
.dl-apply-title{ margin:0 0 10px; font-size:30px; font-weight:600; letter-spacing:-.5px; color:#fff; }
.dl-apply-sub{ margin:0; font-size:14.5px; font-weight:400; color:rgba(255,255,255,.82); line-height:1.6; }
.dl-apply-form{ max-width:620px; margin:0 auto; }

/* keep the shared form card neutral; tint its primary button emerald on this page */
.dl-apply-form .cr-submit{ background:var(--dl); }
.dl-apply-form .cr-submit:hover:not(:disabled){ background:var(--dl-dk); box-shadow:0 12px 28px rgba(11,125,87,.3); }
.dl-apply-form .cr-input:focus{ border-color:var(--dl); }

@media (max-width:860px){
  .dl-hero-inner{ grid-template-columns:1fr; gap:30px; }
  .dl-hero-card{ order:2; }
}
@media (max-width:600px){
  .dl-steps-flow{ grid-template-columns:1fr; gap:24px; }
  .dl-steps-flow::before{ display:none; }
  .dl-hero-card-stats{ grid-template-columns:1fr 1fr; }
}

/* =========================================================
   BULK ORDERS PAGE — corporate indigo/blue theme (v=41)
   ========================================================= */
.bo-page{ font-family:"Outfit",system-ui,sans-serif; background:#f5f6fb; color:#161a2b; --bo:#2f57d8; --bo-dk:#1e3aa8; }

/* hero — deep indigo gradient, centered */
.bo-hero{ position:relative; overflow:hidden; padding:62px 20px 54px; color:#fff;
  background:linear-gradient(150deg,#1b2a6b 0%,#2f57d8 60%,#3f63de 100%); }
.bo-hero::before{ content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0); background-size:22px 22px; }
.bo-hero::after{ content:""; position:absolute; top:-110px; right:-70px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%); }
.bo-hero-inner{ position:relative; z-index:1; max-width:720px; margin:0 auto; text-align:center; }
.bo-eyebrow{ margin:0 0 14px; font-size:12px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:#c3d0ff; }
.bo-hero-title{ margin:0 0 16px; font-size:clamp(29px,4.6vw,44px); font-weight:600; line-height:1.13; letter-spacing:-.9px; }
.bo-hero-title span{ color:#bfccff; }
.bo-hero-sub{ margin:0 auto 26px; max-width:560px; font-size:15px; font-weight:400; line-height:1.65; color:rgba(255,255,255,.82); }
.bo-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.bo-btn-primary{ background:#fff; color:#1e3aa8; border-radius:12px; padding:14px 30px; font-size:14.5px; font-weight:600; text-decoration:none; transition:transform .15s, box-shadow .25s; }
.bo-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.28); }
.bo-btn-ghost{ background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.4); border-radius:12px; padding:13px 24px; font-size:14px; font-weight:500; text-decoration:none; transition:background .2s, transform .15s; }
.bo-btn-ghost:hover{ background:rgba(255,255,255,.22); transform:translateY(-2px); }

.bo-trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:42px; padding-top:28px; border-top:1px solid rgba(255,255,255,.16); }
.bo-trust-item{ display:flex; flex-direction:column; gap:2px; }
.bo-trust-num{ font-size:23px; font-weight:700; letter-spacing:-.4px; }
.bo-trust-label{ font-size:11.5px; font-weight:300; color:rgba(255,255,255,.66); }

/* section heads */
.bo-sec-head{ text-align:center; margin-bottom:30px; }
.bo-sec-title{ margin:0 0 8px; font-size:27px; font-weight:600; letter-spacing:-.5px; color:#161a2b; }
.bo-sec-sub{ margin:0; font-size:14.5px; font-weight:400; color:#5e637a; }

/* use cases — top-accent cards */
.bo-uses{ max-width:1040px; margin:0 auto; padding:54px 20px 16px; }
.bo-uses-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.bo-use{ position:relative; background:#fff; border:1px solid #e8eaf3; border-radius:16px; padding:24px 20px; overflow:hidden; transition:transform .2s, box-shadow .2s; }
.bo-use::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#2f57d8,#5b7df0); }
.bo-use:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(47,87,216,.12); }
.bo-use-ic{ font-size:28px; display:block; margin-bottom:12px; }
.bo-use-title{ margin:0 0 6px; font-size:15.5px; font-weight:600; color:#161a2b; }
.bo-use-desc{ margin:0; font-size:13px; font-weight:400; color:#5e637a; line-height:1.5; }

/* value strip — light tinted band */
.bo-values{ margin-top:18px; }
.bo-values-inner{ max-width:1040px; margin:0 auto; padding:8px 20px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.bo-value{ display:flex; align-items:flex-start; gap:13px; background:#eef2fe; border-radius:14px; padding:18px 18px; }
.bo-value-ic{ flex-shrink:0; width:42px; height:42px; border-radius:11px; background:#fff; display:grid; place-items:center; font-size:21px; box-shadow:0 2px 6px rgba(47,87,216,.1); }
.bo-value-title{ margin:0 0 3px; font-size:14px; font-weight:600; color:#161a2b; }
.bo-value-desc{ margin:0; font-size:12.5px; font-weight:400; color:#5e637a; line-height:1.45; }

/* quote section */
.bo-quote{ padding:52px 20px 68px; }
.bo-quote-inner{ max-width:620px; margin:0 auto; }
/* blue top accent on the shared form card + tinted controls */
.bo-quote .cr-form-card{ border-top:3px solid var(--bo); }
.bo-quote .cr-submit{ background:var(--bo); }
.bo-quote .cr-submit:hover:not(:disabled){ background:var(--bo-dk); box-shadow:0 12px 28px rgba(47,87,216,.3); }
.bo-quote .cr-input:focus{ border-color:var(--bo); }
.bo-quote .cr-success-ic{ background:#eef2fe; }

/* what happens next — 3 inline steps under form */
.bo-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; }
.bo-step{ display:flex; align-items:flex-start; gap:11px; background:#fff; border:1px solid #e8eaf3; border-radius:13px; padding:15px 15px; }
.bo-step-n{ flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--bo); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:600; }
.bo-step-title{ margin:0 0 2px; font-size:13.5px; font-weight:600; color:#161a2b; }
.bo-step-desc{ margin:0; font-size:12px; font-weight:400; color:#5e637a; line-height:1.4; }

@media (max-width:600px){
  .bo-trust{ grid-template-columns:1fr 1fr; gap:18px 14px; }
  .bo-steps{ grid-template-columns:1fr; }
}

/* =========================================================
   CMS CONTENT PAGES (policies, terms, press…) — v=43
   Rendered by the /[slug] catch-all. Content stays in admin.
   ========================================================= */
.legal-page{ font-family:"Outfit",system-ui,sans-serif; background:#f6f7f9; min-height:70vh; }

/* hero */
.legal-hero{ position:relative; overflow:hidden; padding:54px 20px 46px; text-align:center;
  background:linear-gradient(160deg,#15171c 0%,#23262f 60%,#2b2533 100%); color:#fff; }
.legal-hero::before{ content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0); background-size:24px 24px; }
.legal-hero-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; }
.legal-hero-eyebrow{ margin:0 0 10px; font-size:12px; font-weight:500; letter-spacing:1px; color:#ff8a6a; }
.legal-hero-title{ margin:0; font-size:clamp(28px,4.6vw,40px); font-weight:600; letter-spacing:-.7px; color:#fff; }

.legal-banner{ width:100%; line-height:0; }
.legal-banner img{ width:100%; height:auto; display:block; }

/* body — reading column on a white card */
.legal-body{ max-width:800px; margin:-26px auto 0; position:relative; z-index:2;
  background:#fff; border:1px solid #eef0f3; border-radius:18px;
  box-shadow:0 6px 26px rgba(15,18,28,.06); padding:38px 40px 44px; }
.legal-body-title{ margin:0 0 18px; font-size:26px; font-weight:600; color:#15171c; letter-spacing:-.4px; }
.legal-empty{ color:#969ba5; text-align:center; padding:30px 0; font-size:14px; }

/* rendered CMS html */
.cms-content{ color:#3c424c; font-size:15px; line-height:1.8; }
.cms-content > *:first-child{ margin-top:0; }
.cms-content h2{ margin:30px 0 10px; font-size:19px; font-weight:600; color:#15171c; letter-spacing:-.2px;
  padding-top:18px; border-top:1px solid #f0f1f4; }
.cms-content h2:first-of-type{ border-top:none; padding-top:0; margin-top:6px; }
.cms-content h3{ margin:22px 0 8px; font-size:16px; font-weight:600; color:#15171c; }
.cms-content p{ margin:0 0 14px; }
.cms-content em{ color:#969ba5; font-style:italic; font-size:13px; }
.cms-content ul,.cms-content ol{ margin:0 0 14px; padding-left:22px; }
.cms-content li{ margin:0 0 7px; }
.cms-content a{ color:#e8502a; text-decoration:none; font-weight:500; }
.cms-content a:hover{ text-decoration:underline; }
.cms-content strong{ font-weight:600; color:#15171c; }
.cms-content hr{ border:none; border-top:1px solid #f0f1f4; margin:24px 0; }
.cms-content table{ width:100%; border-collapse:collapse; margin:0 0 16px; font-size:14px; }
.cms-content th,.cms-content td{ border:1px solid #eef0f3; padding:9px 12px; text-align:left; }
.cms-content th{ background:#f7f8fa; font-weight:600; color:#15171c; }

@media (max-width:560px){
  .legal-body{ padding:26px 20px 30px; border-radius:14px; margin-top:-20px; }
}

/* =========================================================
   LOGIN / AUTH — premium split-screen (v=45)
   ========================================================= */
.auth2-page{ font-family:"Outfit",system-ui,sans-serif; background:#fff; }
.auth2-grid{ display:grid; grid-template-columns:1.05fr 1fr; min-height:100vh; }

/* ── left showcase ── */
.auth2-hero{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
  padding:46px 52px; color:#fff; background:linear-gradient(155deg,#15171c 0%,#26222f 55%,#3a1f29 100%); }
.auth2-hero::before{ content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0); background-size:24px 24px; }
.auth2-hero::after{ content:""; position:absolute; top:-120px; right:-90px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle,rgba(232,80,42,.4),transparent 65%); filter:blur(10px); }
.auth2-hero > *:not(.auth2-hero-orb){ position:relative; z-index:1; }
.auth2-logo{ font-size:22px; font-weight:700; color:#fff; text-decoration:none; letter-spacing:-.3px; }
.auth2-logo span{ font-weight:300; color:rgba(255,255,255,.7); }
.auth2-hero-body{ max-width:380px; }
.auth2-hero-title{ margin:0 0 14px; font-size:clamp(28px,3vw,38px); font-weight:600; line-height:1.15; letter-spacing:-.8px; }
.auth2-hero-sub{ margin:0 0 28px; font-size:15px; font-weight:300; line-height:1.6; color:rgba(255,255,255,.74); }
.auth2-features{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.auth2-features li{ display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:400; color:rgba(255,255,255,.92); }
.auth2-features svg{ flex-shrink:0; width:18px; height:18px; padding:5px; border-radius:50%; background:rgba(232,80,42,.22); color:#ff9576; box-sizing:content-box; }
.auth2-hero-foot{ margin:0; font-size:12px; font-weight:300; color:rgba(255,255,255,.5); }

/* ── right form ── */
.auth2-main{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; }
.auth2-card{ width:100%; max-width:392px; }
.auth2-logo--mobile{ display:none; color:#15171c; margin-bottom:24px; }
.auth2-logo--mobile span{ color:#969ba5; }
.auth2-head{ margin-bottom:22px; }
.auth2-title{ margin:0 0 5px; font-size:26px; font-weight:600; color:#15171c; letter-spacing:-.5px; }
.auth2-subtitle{ margin:0; font-size:14px; font-weight:400; color:#828893; }

/* tabs */
.auth2-tabs{ position:relative; display:grid; grid-template-columns:1fr 1fr; background:#f1f3f6; border-radius:13px; padding:4px; margin-bottom:22px; }
.auth2-tab{ position:relative; z-index:1; border:none; background:transparent; padding:10px; font-size:14px; font-weight:500; color:#6b7280; cursor:pointer; border-radius:10px; transition:color .2s; }
.auth2-tab.is-active{ color:#15171c; }
.auth2-tab-pill{ position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); background:#fff; border-radius:10px; box-shadow:0 2px 8px rgba(16,24,40,.1); transition:transform .26s cubic-bezier(.4,0,.2,1); }
.auth2-tabs[data-tab="register"] .auth2-tab-pill{ transform:translateX(calc(100% + 0px)); }

/* alerts */
.auth2-alert{ margin:0 0 14px; font-size:13px; font-weight:400; border-radius:10px; padding:10px 13px; }
.auth2-alert--err{ color:#d63232; background:#fdecec; }
.auth2-alert--ok{ color:#0e7a45; background:#e9f8ef; }

/* fields */
.auth2-field{ margin-bottom:15px; }
.auth2-label-row{ display:flex; align-items:center; justify-content:space-between; }
.auth2-label{ display:block; margin-bottom:7px; font-size:12.5px; font-weight:500; color:#4a4f59; }
.auth2-link-sm{ border:none; background:none; font-size:12px; font-weight:500; color:#e8502a; cursor:pointer; padding:0; margin-bottom:7px; }
.auth2-link-sm:hover{ text-decoration:underline; }
.auth2-input-wrap{ position:relative; display:flex; align-items:center; border:1.5px solid #e3e6ea; border-radius:12px; background:#fbfbfc; transition:border-color .2s, background .2s, box-shadow .2s; }
.auth2-input-wrap:focus-within{ border-color:#15171c; background:#fff; box-shadow:0 0 0 3px rgba(21,23,28,.06); }
.auth2-ic{ display:grid; place-items:center; width:44px; color:#9aa0aa; flex-shrink:0; }
.auth2-ic svg{ width:18px; height:18px; }
.auth2-input{ flex:1; min-width:0; border:none; background:transparent; outline:none; padding:13px 12px 13px 0; font-size:14px; color:#15171c; font-family:inherit; }
.auth2-input::placeholder{ color:#aab0b9; }
.auth2-input:disabled{ color:#9aa0aa; }
.auth2-eye{ border:none; background:none; cursor:pointer; padding:0 13px; font-size:15px; line-height:1; }

/* button */
.auth2-btn{ width:100%; border:none; background:#15171c; color:#fff; border-radius:12px; padding:14px; font-size:14.5px; font-weight:500; cursor:pointer; margin-top:6px; transition:background .2s, transform .15s, box-shadow .25s; }
.auth2-btn:hover:not(:disabled){ background:#000; transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,0,0,.22); }
.auth2-btn:disabled{ opacity:.6; cursor:not-allowed; }

/* divider + google + switch */
.auth2-divider{ display:flex; align-items:center; gap:12px; margin:20px 0; color:#aab0b9; font-size:12px; font-weight:400; }
.auth2-divider::before,.auth2-divider::after{ content:""; flex:1; height:1px; background:#eceef1; }
.auth2-google{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px; border:1.5px solid #e3e6ea; background:#fff; color:#2b2f36; border-radius:12px; padding:13px; font-size:14px; font-weight:500; cursor:pointer; transition:border-color .2s, background .2s, transform .15s; }
.auth2-google:hover{ border-color:#c8ccd2; background:#fafbfc; transform:translateY(-1px); }
.auth2-switch{ margin:14px 0 0; text-align:center; font-size:13px; font-weight:400; color:#828893; }
.auth2-switch a{ color:#e8502a; font-weight:500; cursor:pointer; text-decoration:none; }
.auth2-switch a:hover{ text-decoration:underline; }
.auth2-switch--foot{ margin-top:18px; padding-top:16px; border-top:1px solid #f0f1f4; }
.auth2-legal{ margin:22px 0 0; text-align:center; font-size:11.5px; font-weight:400; color:#aab0b9; line-height:1.5; }
.auth2-legal a{ color:#828893; text-decoration:underline; }

/* responsive — hide showcase, single column */
@media (max-width:860px){
  .auth2-grid{ grid-template-columns:1fr; min-height:auto; }
  .auth2-hero{ display:none; }
  .auth2-main{ padding:36px 20px 48px; }
  .auth2-logo--mobile{ display:inline-block; }
}

/* =========================================================
   LOGIN — OTP-first arrow rows (v=46)
   ========================================================= */
.auth2-or-label{ margin:0 0 12px; font-size:12px; font-weight:500; color:#969ba5; letter-spacing:.3px; }

/* input row with trailing arrow submit */
.auth2-otp-row{ position:relative; display:flex; align-items:center; border:1.5px solid #e3e6ea; border-radius:13px; background:#fbfbfc; margin-bottom:12px; padding:4px; transition:border-color .2s, background .2s, box-shadow .2s; }
.auth2-otp-row:focus-within{ border-color:#15171c; background:#fff; box-shadow:0 0 0 3px rgba(21,23,28,.06); }
.auth2-otp-row .auth2-ic{ width:40px; flex-shrink:0; }
.auth2-otp-row input{ flex:1; min-width:0; border:none; background:transparent; outline:none; padding:11px 8px 11px 0; font-size:14px; color:#15171c; font-family:inherit; }
.auth2-otp-row input::placeholder{ color:#aab0b9; }
.auth2-ic--wa{ color:#25d366 !important; }
.auth2-otp-row--wa:focus-within{ border-color:#1aae54; box-shadow:0 0 0 3px rgba(37,211,102,.12); }

.auth2-otp-arrow{ flex-shrink:0; width:42px; height:42px; border:none; border-radius:10px; background:#15171c; color:#fff; display:grid; place-items:center; cursor:pointer; transition:background .2s, transform .15s, box-shadow .25s; }
.auth2-otp-arrow svg{ width:18px; height:18px; }
.auth2-otp-arrow:hover:not(:disabled){ background:#000; transform:translateX(1px); box-shadow:0 6px 16px rgba(0,0,0,.22); }
.auth2-otp-row--wa .auth2-otp-arrow{ background:#1aae54; }
.auth2-otp-row--wa .auth2-otp-arrow:hover:not(:disabled){ background:#159047; box-shadow:0 6px 16px rgba(26,174,84,.3); }
.auth2-otp-arrow:disabled{ opacity:.5; cursor:not-allowed; }

/* OTP code input */
.auth2-input--otp{ letter-spacing:6px; font-size:17px; font-weight:600; }
.auth2-input--otp::placeholder{ letter-spacing:4px; font-weight:400; }

.auth2-switch-sep{ margin:0 8px; color:#d0d4da; }

/* =========================================================
   ACCOUNT DASHBOARD (v=47)
   ========================================================= */
.ac-page{ font-family:"Outfit",system-ui,sans-serif; background:#f6f7f9; min-height:70vh; padding:32px 16px 60px; }
.ac-shell{ max-width:1060px; margin:0 auto; display:grid; grid-template-columns:268px 1fr; gap:22px; align-items:start; }

/* ── sidebar ── */
.ac-side{ position:sticky; top:90px; background:#fff; border:1px solid #eef0f3; border-radius:18px; padding:20px; box-shadow:0 4px 14px rgba(15,18,28,.04); }
.ac-profile{ display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:14px; border-bottom:1px solid #f0f1f4; }
.ac-avatar{ flex-shrink:0; width:46px; height:46px; border-radius:50%; background:linear-gradient(140deg,#15171c,#3a2330); color:#fff; display:grid; place-items:center; font-size:16px; font-weight:600; overflow:hidden; }
.ac-avatar img{ width:100%; height:100%; object-fit:cover; }
.ac-profile-info{ min-width:0; }
.ac-profile-name{ margin:0; font-size:14.5px; font-weight:600; color:#15171c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-profile-contact{ margin:2px 0 0; font-size:12px; font-weight:400; color:#969ba5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-nav{ display:flex; flex-direction:column; gap:3px; }
.ac-nav-btn{ display:flex; align-items:center; gap:11px; width:100%; border:none; background:transparent; text-align:left; padding:11px 12px; border-radius:11px; font-size:14px; font-weight:500; color:#4a4f59; cursor:pointer; text-decoration:none; transition:background .16s, color .16s; }
.ac-nav-btn svg{ color:#9aa0aa; transition:color .16s; flex-shrink:0; }
.ac-nav-btn:hover{ background:#f6f7f9; color:#15171c; }
.ac-nav-btn.is-active{ background:#15171c; color:#fff; }
.ac-nav-btn.is-active svg{ color:#fff; }
.ac-nav-count{ margin-left:auto; font-size:11px; font-weight:600; background:#eef0f3; color:#6b7280; border-radius:99px; padding:1px 8px; }
.ac-nav-btn.is-active .ac-nav-count{ background:rgba(255,255,255,.2); color:#fff; }
.ac-nav-logout{ margin-top:6px; border-top:1px solid #f0f1f4; padding-top:14px; color:#d6453f; }
.ac-nav-logout svg{ color:#e08884; }
.ac-nav-logout:hover{ background:#fdecec; color:#c2362f; }

/* ── main ── */
.ac-main{ min-width:0; }
.ac-welcome{ margin-bottom:20px; }
.ac-welcome-title{ margin:0 0 4px; font-size:27px; font-weight:600; color:#15171c; letter-spacing:-.5px; }
.ac-welcome-sub{ margin:0; font-size:14px; color:#5a5f68; }
.ac-page-title{ margin:0 0 18px; font-size:24px; font-weight:600; color:#15171c; letter-spacing:-.4px; }

/* stat cards */
.ac-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.ac-stat{ background:#fff; border:1px solid #eef0f3; border-radius:15px; padding:18px 16px; text-align:left; box-shadow:0 4px 14px rgba(15,18,28,.04); display:flex; flex-direction:column; gap:4px; cursor:default; transition:transform .18s, box-shadow .18s; }
button.ac-stat{ cursor:pointer; }
button.ac-stat:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(15,18,28,.09); }
.ac-stat-num{ font-size:22px; font-weight:700; color:#15171c; letter-spacing:-.5px; }
.ac-stat-label{ font-size:12px; font-weight:400; color:#969ba5; }

/* cards */
.ac-card{ background:#fff; border:1px solid #eef0f3; border-radius:18px; padding:22px; box-shadow:0 4px 14px rgba(15,18,28,.04); margin-bottom:18px; }
.ac-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ac-card-title{ margin:0; font-size:16px; font-weight:600; color:#15171c; }
.ac-link{ border:none; background:none; font-size:13px; font-weight:500; color:#e8502a; cursor:pointer; padding:0; text-decoration:none; }
.ac-link:hover{ text-decoration:underline; }

/* empty */
.ac-empty{ text-align:center; padding:26px 10px; color:#969ba5; font-size:14px; }
.ac-empty p{ margin:0 0 12px; }
.ac-empty-hint{ font-size:12.5px; }
.ac-btn-dark{ display:inline-block; background:#15171c; color:#fff; border-radius:11px; padding:11px 22px; font-size:13.5px; font-weight:500; text-decoration:none; transition:background .2s, transform .15s; }
.ac-btn-dark:hover{ background:#000; transform:translateY(-1px); }

/* recent orders */
.ac-recent{ display:flex; flex-direction:column; gap:6px; }
.ac-recent-row{ display:flex; align-items:center; gap:14px; padding:10px; border-radius:12px; text-decoration:none; transition:background .16s; }
.ac-recent-row:hover{ background:#f6f7f9; }
.ac-recent-thumbs{ display:flex; flex-shrink:0; }
.ac-recent-thumbs .ac-thumb{ margin-left:-10px; border:2px solid #fff; }
.ac-recent-thumbs .ac-thumb:first-child{ margin-left:0; }
.ac-thumb{ width:42px; height:42px; border-radius:10px; background:#f3f4f6; display:grid; place-items:center; overflow:hidden; font-size:17px; flex-shrink:0; }
.ac-thumb img{ width:100%; height:100%; object-fit:contain; }
.ac-thumb--lg{ width:52px; height:52px; }
.ac-recent-main{ flex:1; min-width:0; }
.ac-recent-no{ margin:0; font-size:13.5px; font-weight:600; color:#15171c; }
.ac-recent-meta{ margin:2px 0 0; font-size:12px; color:#969ba5; }
.ac-recent-right{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.ac-recent-total{ font-size:14px; font-weight:600; color:#15171c; }

/* status badges */
.ac-badge{ font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:99px; text-transform:capitalize; letter-spacing:.2px; white-space:nowrap; }
.ac-badge-pending,.ac-badge-confirmed{ background:#eaf0ff; color:#2f57d8; }
.ac-badge-packed{ background:#fff2e0; color:#c2710a; }
.ac-badge-dispatched{ background:#e6f4ff; color:#0a72c2; }
.ac-badge-delivered{ background:#e6f8ef; color:#0e9b52; }
.ac-badge-cancelled,.ac-badge-returned{ background:#fdecec; color:#d63232; }

/* full orders */
.ac-orders{ display:flex; flex-direction:column; gap:16px; }
.ac-order{ background:#fff; border:1px solid #eef0f3; border-radius:16px; box-shadow:0 4px 14px rgba(15,18,28,.04); overflow:hidden; }
.ac-order-top{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #f4f5f7; background:#fcfcfd; }
.ac-order-no{ margin:0; font-size:14.5px; font-weight:600; color:#15171c; }
.ac-order-date{ margin:2px 0 0; font-size:12px; color:#969ba5; }
.ac-order-items{ padding:14px 18px; display:flex; flex-direction:column; gap:12px; }
.ac-order-item{ display:flex; align-items:center; gap:13px; }
.ac-order-item-main{ flex:1; min-width:0; }
.ac-order-item-name{ margin:0; font-size:13.5px; font-weight:500; color:#15171c; }
.ac-order-item-sub{ margin:2px 0 0; font-size:12px; color:#969ba5; }
.ac-order-item-price{ font-size:13.5px; font-weight:600; color:#15171c; }
.ac-order-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-top:1px solid #f4f5f7; background:#fcfcfd; flex-wrap:wrap; }
.ac-order-pay{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ac-order-pay-method{ font-size:12.5px; font-weight:500; color:#4a4f59; }
.ac-order-coupon{ font-size:11.5px; font-weight:500; color:#0e9b52; background:#e6f8ef; border-radius:7px; padding:2px 8px; }
.ac-order-foot-right{ display:flex; align-items:center; gap:14px; }
.ac-order-total{ font-size:15px; font-weight:700; color:#15171c; }
.ac-order-total i{ font-style:normal; font-size:12px; font-weight:400; color:#969ba5; margin-right:3px; }
.ac-btn-outline{ border:1.4px solid #d8dce1; background:#fff; color:#15171c; border-radius:10px; padding:9px 16px; font-size:13px; font-weight:500; text-decoration:none; cursor:pointer; transition:border-color .2s, background .2s; }
.ac-btn-outline:hover{ border-color:#15171c; background:#fafbfc; }

/* addresses */
.ac-addr-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.ac-addr-card{ position:relative; background:#fff; border:1px solid #eef0f3; border-radius:15px; padding:18px; box-shadow:0 4px 14px rgba(15,18,28,.04); }
.ac-addr-card.is-default{ border-color:#cdd9ff; box-shadow:0 4px 14px rgba(47,87,216,.1); }
.ac-addr-default{ position:absolute; top:14px; right:14px; font-size:10px; font-weight:600; color:#2f57d8; background:#eaf0ff; border-radius:99px; padding:3px 9px; }
.ac-addr-name{ margin:0 0 6px; font-size:14px; font-weight:600; color:#15171c; }
.ac-addr-phone{ font-weight:400; color:#969ba5; font-size:12.5px; }
.ac-addr-text{ margin:0 0 4px; font-size:13px; color:#5a5f68; line-height:1.5; }
.ac-addr-country{ margin:0; font-size:12px; color:#969ba5; }
.ac-note{ margin:16px 0 0; font-size:12.5px; color:#969ba5; }

/* profile */
.ac-profile-big{ display:flex; align-items:center; gap:16px; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid #f0f1f4; }
.ac-avatar--lg{ width:64px; height:64px; font-size:22px; }
.ac-profile-name--lg{ font-size:18px; }
.ac-detail-list{ display:flex; flex-direction:column; }
.ac-detail{ display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid #f4f5f7; font-size:14px; }
.ac-detail:last-child{ border-bottom:none; }
.ac-detail-k{ font-weight:400; color:#828893; }
.ac-detail-v{ font-weight:500; color:#15171c; }
.ac-detail-v em{ font-style:normal; font-weight:400; color:#b3b7be; }
.ac-logout-wide{ width:100%; margin-top:18px; text-align:center; color:#d6453f; border-color:#f1cdcb; }
.ac-logout-wide:hover{ border-color:#d6453f; background:#fdecec; }

@media (max-width:820px){
  .ac-shell{ grid-template-columns:1fr; }
  .ac-side{ position:static; }
  .ac-nav{ flex-direction:row; flex-wrap:wrap; gap:6px; }
  .ac-nav-btn{ flex:1; min-width:120px; justify-content:center; }
  .ac-nav-logout{ border-top:none; padding-top:11px; }
  .ac-stats{ grid-template-columns:1fr 1fr; }
}

/* =========================================================
   PROFILE EDITOR (v=48)
   ========================================================= */
.pe-wrap{ display:flex; flex-direction:column; gap:18px; }
.pe-field{ display:flex; flex-direction:column; gap:7px; }
.pe-label{ font-size:12.5px; font-weight:500; color:#828893; }
.pe-row{ display:flex; align-items:center; gap:10px; }
.pe-row--view{ justify-content:space-between; }
.pe-input{ flex:1; min-width:0; border:1.5px solid #e3e6ea; border-radius:11px; background:#fbfbfc; padding:11px 13px; font-size:14px; color:#15171c; outline:none; font-family:inherit; transition:border-color .2s, background .2s; }
.pe-input:focus{ border-color:#15171c; background:#fff; }
.pe-input--otp{ letter-spacing:4px; font-weight:600; }
.pe-save{ flex-shrink:0; border:none; background:#15171c; color:#fff; border-radius:10px; padding:11px 18px; font-size:13.5px; font-weight:500; cursor:pointer; transition:background .2s, opacity .2s; }
.pe-save:hover:not(:disabled){ background:#000; }
.pe-save:disabled{ opacity:.45; cursor:not-allowed; }

.pe-current{ font-size:14px; font-weight:500; color:#15171c; display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap; }
.pe-none{ font-style:normal; font-weight:400; color:#b3b7be; }
.pe-verified{ font-size:10.5px; font-weight:600; color:#0e9b52; background:#e6f8ef; border-radius:99px; padding:2px 8px; }
.pe-change{ flex-shrink:0; border:1.4px solid #d8dce1; background:#fff; color:#15171c; border-radius:9px; padding:7px 15px; font-size:12.5px; font-weight:500; cursor:pointer; transition:border-color .2s, background .2s; }
.pe-change:hover{ border-color:#15171c; background:#fafbfc; }
.pe-cancel{ align-self:flex-start; border:none; background:none; color:#969ba5; font-size:12.5px; font-weight:500; cursor:pointer; padding:0; }
.pe-cancel:hover{ color:#15171c; text-decoration:underline; }

.pe-otp-actions{ display:flex; align-items:center; gap:8px; font-size:12px; color:#c0c4cb; }
.pe-link{ border:none; background:none; color:#e8502a; font-size:12.5px; font-weight:500; cursor:pointer; padding:0; }
.pe-link:hover{ text-decoration:underline; }

.pe-msg{ margin:2px 0 0; font-size:12.5px; font-weight:400; }
.pe-ok{ color:#0e9b52; }
.pe-err{ color:#d63232; }

/* =========================================================
   ADDRESS MANAGER + orders head (v=49)
   ========================================================= */
.ac-orders-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.ac-orders-head .ac-page-title{ margin:0; }
.ac-continue{ display:inline-flex; align-items:center; gap:8px; }
.ac-continue svg{ flex-shrink:0; }

.am-wrap{ }
.am-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.am-actions{ display:flex; gap:8px; margin-top:13px; padding-top:13px; border-top:1px solid #f4f5f7; }
.am-act{ border:1.3px solid #d8dce1; background:#fff; color:#15171c; border-radius:9px; padding:7px 13px; font-size:12px; font-weight:500; cursor:pointer; transition:border-color .2s, background .2s; }
.am-act:hover:not(:disabled){ border-color:#15171c; background:#fafbfc; }
.am-act:disabled{ opacity:.5; cursor:not-allowed; }
.am-act--del{ color:#d6453f; border-color:#f1cdcb; }
.am-act--del:hover:not(:disabled){ border-color:#d6453f; background:#fdecec; }

/* add card */
.am-add-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:140px; border:1.6px dashed #d3d6dd; border-radius:15px; background:#fbfbfc; color:#6b7280; font-size:13.5px; font-weight:500; cursor:pointer; transition:border-color .2s, background .2s, color .2s; }
.am-add-card svg{ color:#aab0b9; transition:color .2s; }
.am-add-card:hover{ border-color:#15171c; background:#fff; color:#15171c; }
.am-add-card:hover svg{ color:#15171c; }

/* form */
.am-form{ margin-top:16px; background:#fff; border:1px solid #eef0f3; border-radius:16px; padding:20px; box-shadow:0 4px 14px rgba(15,18,28,.04); }
.am-form-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.am-form-head h3{ margin:0; font-size:16px; font-weight:600; color:#15171c; }
.am-close{ border:none; background:#f2f3f5; color:#6b7280; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:14px; transition:background .2s; }
.am-close:hover{ background:#e8eaee; }
.am-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.am-input{ border:1.5px solid #e3e6ea; border-radius:11px; background:#fbfbfc; padding:12px 13px; font-size:14px; color:#15171c; outline:none; font-family:inherit; transition:border-color .2s, background .2s; width:100%; }
.am-input:focus{ border-color:#15171c; background:#fff; }
.am-span2{ grid-column:1 / -1; }
.am-pin{ margin:10px 0 0; font-size:12.5px; font-weight:500; color:#0e9b52; }
.am-err{ margin:10px 0 0; font-size:13px; color:#d63232; background:#fdecec; border-radius:9px; padding:9px 12px; }
.am-form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.am-btn-ghost{ border:1.4px solid #d8dce1; background:#fff; color:#15171c; border-radius:11px; padding:11px 20px; font-size:13.5px; font-weight:500; cursor:pointer; transition:border-color .2s; }
.am-btn-ghost:hover{ border-color:#15171c; }
.am-btn-dark{ border:none; background:#15171c; color:#fff; border-radius:11px; padding:11px 22px; font-size:13.5px; font-weight:500; cursor:pointer; transition:background .2s, transform .15s; }
.am-btn-dark:hover:not(:disabled){ background:#000; transform:translateY(-1px); }
.am-btn-dark:disabled{ opacity:.6; cursor:not-allowed; }

@media (max-width:480px){
  .am-form-grid{ grid-template-columns:1fr; }
  .am-span2{ grid-column:auto; }
}

/* =========================================================
   PROFILE CARD — premium banner (v=50)
   ========================================================= */
.ac-profile-card{ padding:0; overflow:hidden; }

.ac-profile-banner{ position:relative; height:96px; background:linear-gradient(135deg,#15171c 0%,#2a2330 55%,#3a1f29 100%); overflow:hidden; }
.ac-profile-banner::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0); background-size:20px 20px; }
.ac-profile-banner-glow{ position:absolute; top:-60px; right:-30px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, rgba(232,80,42,.4), transparent 65%); filter:blur(8px); }
.ac-profile-banner .ac-avatar--xl{ position:absolute; left:28px; bottom:-34px; z-index:2; width:78px; height:78px; font-size:26px; border:4px solid #fff; box-shadow:0 8px 22px rgba(15,18,28,.18); }

.ac-profile-body{ padding:46px 28px 26px; }
.ac-profile-bigname{ margin:0 0 12px; font-size:21px; font-weight:600; color:#15171c; letter-spacing:-.4px; }
.ac-profile-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.ac-pchip{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; color:#3a3f48; background:#f4f5f7; border:1px solid #edeff2; border-radius:99px; padding:6px 13px; }
.ac-pchip svg{ color:#9aa0aa; flex-shrink:0; }
.ac-pchip--muted{ color:#828893; background:transparent; border-color:transparent; padding-left:4px; }

.ac-profile-edit{ background:#fbfbfc; border:1px solid #f0f1f4; border-radius:15px; padding:20px; }
.ac-profile-edit-title{ margin:0 0 16px; font-size:13px; font-weight:600; color:#828893; text-transform:uppercase; letter-spacing:.6px; }
.ac-logout-wide{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }

@media (max-width:480px){
  .ac-profile-body{ padding:46px 18px 22px; }
  .ac-profile-banner .ac-avatar--xl{ left:18px; }
}

/* =========================================================
   PROFILE EDITOR — consistent view rows + edit icon (v=51)
   ========================================================= */
.pe-view{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:42px; padding:9px 14px; border:1.5px solid #eef0f3; border-radius:11px; background:#fff; }
.pe-edit-ic{ flex-shrink:0; width:32px; height:32px; border:1.4px solid #e3e6ea; background:#fff; color:#6b7280; border-radius:9px; display:grid; place-items:center; cursor:pointer; transition:border-color .2s, color .2s, background .2s; }
.pe-edit-ic:hover{ border-color:#15171c; color:#15171c; background:#fafbfc; }
.pe-edit-ic svg{ width:15px; height:15px; }

/* =========================================================
   LOGIN — clearer OTP buttons + or-lines + channel themes (v=52)
   ========================================================= */
.auth2-hint{ display:flex; align-items:flex-start; gap:9px; background:#f6f7f9; border:1px solid #eef0f3; border-radius:11px; padding:11px 13px; margin-bottom:16px; font-size:12.5px; font-weight:400; color:#5a5f68; line-height:1.5; }
.auth2-hint svg{ color:#15171c; flex-shrink:0; margin-top:1px; }
.auth2-hint b{ color:#15171c; font-weight:600; }

/* rows: no bottom margin (the or-line spaces them) */
.auth2-otp-row{ margin-bottom:0; }

/* email row — blue theme (mirrors the WhatsApp green row) */
.auth2-otp-row--email{ background:#eef3fd; border-color:#cddbf8; }
.auth2-otp-row--email:focus-within{ border-color:#2f57d8; background:#fff; box-shadow:0 0 0 3px rgba(47,87,216,.13); }
.auth2-otp-row--email input::placeholder{ color:#8aa0d8; }
.auth2-otp-row--email .auth2-ic{ color:#2f57d8; }
.auth2-otp-row--email .auth2-otp-btn{ background:#2f57d8; }
.auth2-otp-row--email .auth2-otp-btn:hover:not(:disabled){ background:#1e3aa8; }

/* whatsapp row — WhatsApp-style green */
.auth2-otp-row--wa{ background:#f0faf4; border-color:#c7ebd6; }
.auth2-otp-row--wa:focus-within{ border-color:#1aae54; background:#fff; box-shadow:0 0 0 3px rgba(37,211,102,.14); }
.auth2-otp-row--wa input::placeholder{ color:#7fb499; }

/* "Send OTP" trailing button */
.auth2-otp-btn{ align-self:stretch; flex-shrink:0; border:none; border-radius:10px; background:#15171c; color:#fff; padding:0 16px; font-size:12.5px; font-weight:600; letter-spacing:.2px; cursor:pointer; white-space:nowrap; transition:background .2s, transform .15s; }
.auth2-otp-btn:hover:not(:disabled){ background:#000; }
.auth2-otp-btn:active:not(:disabled){ transform:scale(.97); }
.auth2-otp-btn:disabled{ opacity:.55; cursor:not-allowed; }
.auth2-otp-btn--wa{ background:#1aae54; }
.auth2-otp-btn--wa:hover:not(:disabled){ background:#149247; }

/* or line between the three options */
.auth2-or-line{ display:flex; align-items:center; gap:12px; margin:13px 0; color:#aab0b9; font-size:11.5px; font-weight:500; text-transform:lowercase; }
.auth2-or-line::before,.auth2-or-line::after{ content:""; flex:1; height:1px; background:#eceef1; }

/* =========================================================
   LOGIN — smart single input (auto-detect email/WhatsApp) v=54
   ========================================================= */
.auth2-smart{ display:flex; align-items:center; border:1.5px solid #e3e6ea; border-radius:14px; background:#fbfbfc; padding:5px; transition:border-color .28s ease, background .28s ease, box-shadow .25s ease; }

/* morphing icon (mail ↔ whatsapp) */
.auth2-smart-ic{ position:relative; width:46px; height:46px; flex-shrink:0; }
.auth2-smart-ic > span{ position:absolute; inset:0; display:grid; place-items:center; transition:opacity .28s ease, transform .28s ease; }
.auth2-smart-ic-mail svg{ width:19px; height:19px; }
.auth2-smart-ic-wa svg{ width:21px; height:21px; }
.auth2-smart-ic-mail{ color:#9aa0aa; opacity:1; transform:scale(1); }
.auth2-smart-ic-wa{ color:#25d366; opacity:0; transform:scale(.5) rotate(-12deg); }
.auth2-smart.is-email .auth2-smart-ic-mail{ color:#2f57d8; }
.auth2-smart.is-phone .auth2-smart-ic-mail{ opacity:0; transform:scale(.5) rotate(12deg); }
.auth2-smart.is-phone .auth2-smart-ic-wa{ opacity:1; transform:scale(1) rotate(0); }

.auth2-smart-input{ flex:1; min-width:0; border:none; background:transparent; outline:none; padding:13px 10px 13px 0; font-size:14.5px; color:#15171c; font-family:inherit; }
.auth2-smart-input::placeholder{ color:#aab0b9; }

.auth2-smart-btn{ align-self:stretch; flex-shrink:0; border:none; border-radius:11px; background:#15171c; color:#fff; padding:0 18px; font-size:13px; font-weight:600; letter-spacing:.2px; cursor:pointer; white-space:nowrap; transition:background .28s ease, transform .15s ease; }
.auth2-smart-btn:active:not(:disabled){ transform:scale(.97); }
.auth2-smart-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* email (blue) theme */
.auth2-smart.is-email{ border-color:#cddbf8; background:#eef3fd; }
.auth2-smart.is-email .auth2-smart-btn{ background:#2f57d8; }
/* whatsapp (green) theme */
.auth2-smart.is-phone{ border-color:#c7ebd6; background:#f0faf4; }
.auth2-smart.is-phone .auth2-smart-btn{ background:#1aae54; }

/* focus rings (override tint to white) */
.auth2-smart:focus-within{ border-color:#15171c; background:#fff; box-shadow:0 0 0 3px rgba(21,23,28,.06); }
.auth2-smart.is-email:focus-within{ border-color:#2f57d8; background:#fff; box-shadow:0 0 0 3px rgba(47,87,216,.13); }
.auth2-smart.is-phone:focus-within{ border-color:#1aae54; background:#fff; box-shadow:0 0 0 3px rgba(37,211,102,.14); }

/* live caption */
.auth2-smart-cap{ display:flex; align-items:center; gap:8px; margin:11px 2px 0; font-size:12px; font-weight:400; color:#969ba5; transition:color .28s ease; min-height:16px; }
.auth2-cap-dot{ width:7px; height:7px; border-radius:50%; background:#cbd0d6; flex-shrink:0; transition:background .28s ease, box-shadow .28s ease; }
.auth2-smart-cap.is-email{ color:#2f57d8; font-weight:500; }
.auth2-smart-cap.is-email .auth2-cap-dot{ background:#2f57d8; box-shadow:0 0 0 3px rgba(47,87,216,.16); }
.auth2-smart-cap.is-phone{ color:#159247; font-weight:500; }
.auth2-smart-cap.is-phone .auth2-cap-dot{ background:#25d366; box-shadow:0 0 0 3px rgba(37,211,102,.2); }

/* =========================================================
   LOGIN — full-width themed Continue button (v=55)
   ========================================================= */
.auth2-cont{ width:100%; margin-top:14px; border:none; border-radius:13px; background:#15171c; color:#fff; padding:15px; font-size:14.5px; font-weight:600; letter-spacing:.2px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .25s ease, transform .15s ease, box-shadow .25s ease; }
.auth2-cont svg{ transition:transform .2s ease; }
.auth2-cont:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,0,0,.2); }
.auth2-cont:hover:not(:disabled) svg{ transform:translateX(3px); }
.auth2-cont:active:not(:disabled){ transform:scale(.99); }
.auth2-cont:disabled{ opacity:.5; cursor:not-allowed; }
.auth2-cont.is-email{ background:#2f57d8; }
.auth2-cont.is-email:hover:not(:disabled){ background:#1e3aa8; box-shadow:0 12px 26px rgba(47,87,216,.3); }
.auth2-cont.is-phone{ background:#1aae54; }
.auth2-cont.is-phone:hover:not(:disabled){ background:#149247; box-shadow:0 12px 26px rgba(26,174,84,.3); }

/* =========================================================
   LOGIN — attractive idle/default state (v=56)
   ========================================================= */
/* idle button: blue→green gradient (hints both Email & WhatsApp before the user picks) */
.auth2-cont{ background:linear-gradient(100deg,#2f57d8 0%,#16b15c 100%); }
.auth2-cont:disabled{ opacity:.82; cursor:not-allowed; }
.auth2-cont:disabled:hover{ transform:none; box-shadow:none; }
/* once a channel is detected, solid theme colour takes over */
.auth2-cont.is-email{ background:#2f57d8; }
.auth2-cont.is-email:hover:not(:disabled){ background:#1e3aa8; box-shadow:0 12px 26px rgba(47,87,216,.3); }
.auth2-cont.is-phone{ background:#1aae54; }
.auth2-cont.is-phone:hover:not(:disabled){ background:#149247; box-shadow:0 12px 26px rgba(26,174,84,.3); }

/* idle input: soft gradient + subtle dual-tone hint */
.auth2-smart{ background:linear-gradient(180deg,#ffffff 0%,#f5f6f9 100%); }

/* idle icon: a touch warmer than flat grey */
.auth2-smart .auth2-smart-ic-mail{ color:#8a93b8; }

/* idle caption polish */
.auth2-smart-cap{ color:#9197a3; }

/* =========================================================
   LOGIN — left showcase redesign (v=57)
   ========================================================= */
.auth2-hero{ position:relative; overflow:hidden; padding:42px 48px; }
/* richer background: deep gradient + animated-ish glow orbs */
.auth2-hero{ background:linear-gradient(155deg,#14151b 0%,#221f2c 50%,#3a1f29 100%); }
.auth2-hero::after{ display:none; } /* replaced by orbs */
.auth2-hero-orb{ position:absolute; border-radius:50%; filter:blur(20px); z-index:0; pointer-events:none; }
.auth2-hero-orb--1{ top:-90px; right:-60px; width:300px; height:300px; background:radial-gradient(circle,rgba(232,80,42,.45),transparent 65%); }
.auth2-hero-orb--2{ bottom:-110px; left:-70px; width:300px; height:300px; background:radial-gradient(circle,rgba(47,87,216,.4),transparent 65%); }
.auth2-hero > *:not(.auth2-hero-orb){ position:relative; z-index:1; }

.auth2-hero-body{ display:flex; flex-direction:column; }

/* rating chip */
.auth2-rating{ display:inline-flex; align-items:center; gap:9px; align-self:flex-start; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:99px; padding:6px 14px; margin-bottom:22px; backdrop-filter:blur(6px); }
.auth2-stars{ color:#ffc93c; font-size:13px; letter-spacing:1px; }
.auth2-rating-txt{ font-size:12.5px; font-weight:400; color:rgba(255,255,255,.82); }
.auth2-rating-txt b{ font-weight:700; color:#fff; }

/* headline */
.auth2-hero-title{ margin:0 0 14px; font-size:clamp(27px,2.9vw,37px); font-weight:600; line-height:1.16; letter-spacing:-.8px; color:#fff; }
.auth2-hero-sub{ margin:0 0 28px; max-width:400px; font-size:14.5px; font-weight:300; line-height:1.65; color:rgba(255,255,255,.72); }

/* glass testimonial card */
.auth2-quote{ position:relative; margin:0; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); border-radius:18px; padding:20px 22px; backdrop-filter:blur(10px); box-shadow:0 18px 40px rgba(0,0,0,.22); max-width:380px; }
.auth2-quote-mark{ position:absolute; top:-2px; right:18px; font-size:64px; line-height:1; font-family:Georgia,serif; color:rgba(255,255,255,.13); }
.auth2-quote-stars{ color:#ffc93c; font-size:13px; letter-spacing:1.5px; margin-bottom:9px; }
.auth2-quote-text{ margin:0 0 16px; font-size:14.5px; font-weight:400; line-height:1.55; color:rgba(255,255,255,.92); }
.auth2-quote-by{ display:flex; align-items:center; gap:11px; }
.auth2-quote-by img{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.2); }
.auth2-quote-name{ font-size:12.5px; color:rgba(255,255,255,.6); display:flex; flex-direction:column; line-height:1.4; }
.auth2-quote-name b{ font-weight:600; color:#fff; font-size:13.5px; }

/* trust badges footer */
.auth2-hero-foot{ display:flex; flex-wrap:wrap; gap:9px; }
.auth2-tbadge{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:500; color:rgba(255,255,255,.78); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:99px; padding:6px 12px; }
.auth2-tbadge svg{ color:rgba(255,255,255,.6); }

/* =========================================================
   LOGIN — electronics-blue tech background (v=60)
   ========================================================= */
.auth2-hero{
  background:
    radial-gradient(circle at 16% 20%, rgba(34,211,238,.30), transparent 42%),
    radial-gradient(circle at 86% 82%, rgba(139,92,246,.32), transparent 46%),
    linear-gradient(155deg, #07153c 0%, #0e2e7e 50%, #1b51c4 100%);
}

/* circuit / blueprint grid + glowing nodes (faded for depth) */
.auth2-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(120,205,255,.5) 1.4px, transparent 1.6px),
    linear-gradient(rgba(130,185,255,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130,185,255,.085) 1px, transparent 1px);
  background-size: 76px 76px, 38px 38px, 38px 38px;
  -webkit-mask-image: linear-gradient(155deg, #000 25%, rgba(0,0,0,.25) 75%, transparent 100%);
  mask-image: linear-gradient(155deg, #000 25%, rgba(0,0,0,.25) 75%, transparent 100%);
}

/* colorful glow orbs — cyan + violet, gently floating */
.auth2-hero-orb{ filter:blur(26px); }
.auth2-hero-orb--1{ top:-80px; right:-50px; width:320px; height:320px; background:radial-gradient(circle, rgba(34,211,238,.6), transparent 66%); animation:authOrbFloat 9s ease-in-out infinite; }
.auth2-hero-orb--2{ bottom:-100px; left:-60px; width:320px; height:320px; background:radial-gradient(circle, rgba(139,92,246,.55), transparent 66%); animation:authOrbFloat 12s ease-in-out infinite reverse; }
@keyframes authOrbFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(16px,-20px) scale(1.08); }
}

/* nudge accents to suit the blue theme */
.auth2-logo span{ color:rgba(180,210,255,.78); }
.auth2-quote-by img{ border-color:rgba(120,205,255,.4); }

/* =========================================================
   LOGIN — animated lock + colorful heading (v=61)
   ========================================================= */
/* left hero now has just logo + body → keep logo top, body centered */
.auth2-hero{ justify-content:flex-start; }
.auth2-hero-body{ margin-top:auto; margin-bottom:auto; }

/* heading row: lock + title */
.auth2-title-row{ display:flex; align-items:center; gap:11px; margin-bottom:6px; }

/* animated lock badge */
.auth2-lock{
  flex-shrink:0; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg,#2f57d8 0%,#22d3ee 100%);
  animation:lockPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.auth2-lock svg{ width:20px; height:20px; }
.auth2-lock-shackle{ transform-origin:12px 11px; animation:lockShackle 3s ease-in-out 0.8s infinite; }

@keyframes lockPop{ 0%{ transform:scale(0) rotate(-25deg); opacity:0; } 100%{ transform:scale(1) rotate(0); opacity:1; } }
@keyframes lockGlow{
  0%,100%{ box-shadow:0 6px 16px rgba(47,87,216,.35); }
  50%{ box-shadow:0 6px 22px rgba(34,211,238,.6), 0 0 0 4px rgba(34,211,238,.14); }
}
/* shackle gives a subtle "click to unlock" wiggle */
@keyframes lockShackle{
  0%,86%,100%{ transform:translateY(0); }
  90%{ transform:translateY(-2px); }
  94%{ transform:translateY(0); }
}

/* colorful gradient heading */
.auth2-title--grad{
  background:linear-gradient(95deg,#2f57d8 0%,#22d3ee 42%,#8b5cf6 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  background-size:200% auto; animation:titleShine 5s linear infinite;
}
@keyframes titleShine{ 0%{ background-position:0% center; } 100%{ background-position:200% center; } }

@media (prefers-reduced-motion: reduce){
  .auth2-lock,.auth2-lock-shackle,.auth2-title--grad{ animation:none; }
  .auth2-title--grad{ background-position:0% center; }
}

/* =========================================================
   LOGIN — vertically center left content (match right) v=62
   ========================================================= */
.auth2-hero{ justify-content:center; }
/* logo pinned top-left (out of flow) so the body centers in the full height */
.auth2-hero .auth2-logo{ position:absolute; top:40px; left:48px; z-index:2; margin:0; }
.auth2-hero-body{ margin:0; }

/* logo inside centered body (v=63) */
.auth2-hero .auth2-logo.auth2-logo--hero{ position:static; top:auto; left:auto; margin:0 0 26px; }

/* =========================================================
   MY ORDERS — standalone page (v=65)  reuses .ac-order/.ac-badge
   ========================================================= */
.orders-wrap{ font-family:"Outfit",system-ui,sans-serif; background:#f6f7f9; min-height:70vh; padding:34px 16px 60px; }
.orders-inner{ max-width:760px; margin:0 auto; }
.orders-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.orders-eyebrow{ margin:0 0 4px; font-size:11.5px; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:#e8502a; }
.orders-title{ margin:0; font-size:27px; font-weight:600; color:#15171c; letter-spacing:-.5px; }
.orders-sub{ margin:5px 0 0; font-size:13.5px; font-weight:400; color:#969ba5; }
.orders-empty{ text-align:center; background:#fff; border:1px solid #eef0f3; border-radius:18px; padding:54px 24px; box-shadow:0 4px 14px rgba(15,18,28,.04); }
.orders-empty-ic{ font-size:42px; margin-bottom:8px; }
.orders-empty-title{ margin:0 0 6px; font-size:19px; font-weight:600; color:#15171c; }
.orders-empty-sub{ margin:0 0 18px; font-size:14px; font-weight:400; color:#969ba5; }

/* =========================================================
   MY ORDERS — Pay Again / Invoice / payment pills (v=66)
   ========================================================= */
.ac-pay-pill{ font-size:11.5px; font-weight:500; padding:3px 10px; border-radius:99px; }
.ac-pay-pill.pay-cod{ background:#eef2fe; color:#3f57c2; }
.ac-pay-pill.pay-paid{ background:#e6f8ef; color:#0e9b52; }
.ac-pay-pill.pay-pending{ background:#fff2e0; color:#c2710a; }
.ac-pay-pill.pay-failed{ background:#fdecec; color:#d63232; }

.ac-btn-pay{ display:inline-flex; align-items:center; gap:6px; border:none; background:#e8502a; color:#fff; border-radius:10px; padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; transition:background .2s, transform .15s, box-shadow .25s; }
.ac-btn-pay:hover:not(:disabled){ background:#cf4421; transform:translateY(-1px); box-shadow:0 8px 18px rgba(232,80,42,.3); }
.ac-btn-pay:disabled{ opacity:.6; cursor:not-allowed; }

.ac-btn-invoice{ display:inline-flex; align-items:center; gap:6px; border:1.4px solid #cdd9c9; background:#f1faf4; color:#0e9b52; border-radius:10px; padding:8px 14px; font-size:13px; font-weight:600; text-decoration:none; transition:border-color .2s, background .2s, transform .15s; }
.ac-btn-invoice:hover{ border-color:#0e9b52; background:#e6f8ef; transform:translateY(-1px); }
.ac-btn-invoice svg{ flex-shrink:0; }

.ac-order-err{ font-size:11.5px; color:#d63232; width:100%; text-align:right; }

/* =========================================================
   MY ORDERS — collapsible order cards (v=67)
   ========================================================= */
.ac-order--collapsible{ overflow:hidden; }
.ac-order-bar{ width:100%; display:flex; align-items:center; gap:14px; padding:14px 16px; background:#fff; border:none; cursor:pointer; text-align:left; transition:background .15s; }
.ac-order-bar:hover{ background:#fbfbfc; }
.ac-order--collapsible.is-open .ac-order-bar{ border-bottom:1px solid #f4f5f7; background:#fcfcfd; }
.ac-order-thumbs{ display:flex; flex-shrink:0; }
.ac-order-thumbs .ac-thumb{ width:40px; height:40px; margin-left:-12px; border:2px solid #fff; box-shadow:0 1px 3px rgba(15,18,28,.08); }
.ac-order-thumbs .ac-thumb:first-child{ margin-left:0; }
.ac-order-bar-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ac-order-bar-main .ac-order-no{ margin:0; font-size:14px; font-weight:600; color:#15171c; }
.ac-order-bar-main .ac-order-date{ margin:0; font-size:12px; color:#969ba5; }
.ac-order-bar-right{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.ac-order-bar-total{ font-size:14.5px; font-weight:700; color:#15171c; white-space:nowrap; }
.ac-order-chevron{ color:#c0c4cb; transform:rotate(0deg); transition:transform .25s ease, color .2s; }
.ac-order-bar:hover .ac-order-chevron{ color:#15171c; }
.ac-order--collapsible.is-open .ac-order-chevron{ transform:rotate(90deg); color:#15171c; }
.ac-order-body{ animation:acReveal .22s ease; }
.ac-order--collapsible .ac-order-items{ padding:16px 18px; }
.ac-order--collapsible .ac-order-foot{ border-top:1px solid #f4f5f7; }
@keyframes acReveal{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width:560px){ .ac-order-bar-right{ gap:8px; } .ac-order-bar-total{ font-size:13.5px; } }

/* =========================================================
   PRODUCT DETAIL — premium redesign (v=68)
   ========================================================= */
.pd-wrap{ max-width:1200px; margin:0 auto; padding:22px 20px 8px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; font-family:"Outfit",system-ui,sans-serif; }

/* ── gallery ── */
.pd-gallery{ position:sticky; top:90px; display:flex; gap:14px; }
.pd-thumbs{ display:flex; flex-direction:column; gap:10px; width:70px; flex-shrink:0; max-height:520px; overflow-y:auto; padding-right:2px; }
.pd-thumbs::-webkit-scrollbar{ width:4px; } .pd-thumbs::-webkit-scrollbar-thumb{ background:#dcdfe4; border-radius:99px; }
.pd-thumb{ width:70px; height:70px; border:1.5px solid #eceef1; border-radius:12px; background:#fff; padding:5px; cursor:pointer; overflow:hidden; transition:border-color .18s, transform .18s; flex-shrink:0; }
.pd-thumb img{ width:100%; height:100%; object-fit:contain; }
.pd-thumb:hover{ border-color:#cfd3d9; }
.pd-thumb.is-active{ border-color:#e8502a; box-shadow:0 0 0 2px rgba(232,80,42,.12); }

.pd-stage{ flex:1; position:relative; background:#fff; border:1px solid #eef0f3; border-radius:20px; padding:22px; min-height:420px; display:grid; place-items:center; overflow:hidden; }
.pd-stage-img{ width:100%; max-height:480px; object-fit:contain; cursor:zoom-in; transition:transform .35s ease; }
.pd-stage:hover .pd-stage-img{ transform:scale(1.04); }
.pd-off-tag{ position:absolute; top:16px; left:16px; z-index:2; background:#e8502a; color:#fff; font-size:12px; font-weight:700; padding:5px 11px; border-radius:8px; box-shadow:0 4px 12px rgba(232,80,42,.3); }
.pd-wish-float{ position:absolute; top:14px; right:14px; z-index:2; width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid #eceef1; color:#9aa0aa; display:grid; place-items:center; cursor:pointer; box-shadow:0 4px 12px rgba(15,18,28,.08); transition:color .2s, transform .2s, border-color .2s; }
.pd-wish-float:hover{ color:#e8502a; transform:scale(1.08); }
.pd-wish-float.is-on{ color:#e8502a; border-color:#f6c9bd; }
.pd-zoom-hint{ position:absolute; bottom:14px; right:14px; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:500; color:#969ba5; background:rgba(255,255,255,.85); border:1px solid #eef0f3; border-radius:99px; padding:4px 10px; backdrop-filter:blur(4px); }

/* ── info ── */
.pd-info{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.pd-head{ display:flex; flex-direction:column; gap:7px; }
.pd-brand{ font-size:12.5px; font-weight:600; letter-spacing:.3px; color:#e8502a; }
.pd-title{ margin:0; font-size:27px; font-weight:600; line-height:1.25; color:#15171c; letter-spacing:-.4px; }
.pd-rating{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#5a5f68; text-decoration:none; width:max-content; }
.pd-stars{ color:#ffc93c; font-size:14px; letter-spacing:1px; }
.pd-rating b{ color:#15171c; font-weight:600; }
.pd-rating-sep{ color:#c8ccd2; }
.pd-rating:hover span:last-child{ text-decoration:underline; }

/* price */
.pd-price{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pd-price-now{ font-size:30px; font-weight:700; color:#15171c; letter-spacing:-.8px; }
.pd-price-mrp{ font-size:17px; color:#a2a7b0; text-decoration:line-through; }
.pd-price-off{ font-size:13px; font-weight:700; color:#0e9b52; background:#e6f8ef; border-radius:7px; padding:3px 9px; }
.pd-save{ font-size:13px; font-weight:600; color:#0e9b52; }
.pd-tax{ margin:-8px 0 0; font-size:12.5px; color:#969ba5; }

/* variants */
.pd-variants{ display:flex; flex-direction:column; gap:9px; }
.pd-variants-label{ margin:0; font-size:13.5px; color:#5a5f68; }
.pd-variants-label b{ color:#15171c; font-weight:600; }
.pd-swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.pd-swatch{ width:42px; height:42px; border-radius:50%; border:2px solid #e3e6ea; background:#fff; padding:3px; cursor:pointer; display:grid; place-items:center; transition:border-color .18s, transform .18s; }
.pd-swatch-dot{ width:100%; height:100%; border-radius:50%; border:1px solid rgba(0,0,0,.06); }
.pd-swatch:hover{ transform:scale(1.06); }
.pd-swatch.is-active{ border-color:#e8502a; box-shadow:0 0 0 3px rgba(232,80,42,.14); }
.pd-swatch.is-out{ opacity:.45; }

/* offers */
.pd-offers{ background:#fbfbfc; border:1px solid #eef0f3; border-radius:14px; padding:15px 16px; }
.pd-offers-title{ display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:13.5px; font-weight:600; color:#15171c; }
.pd-offers-title svg{ color:#e8502a; }
.pd-offers-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.pd-offers-list li{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:400; color:#4a4f59; }
.pd-offers-list li span{ flex-shrink:0; }

/* pincode */
.pd-pin{ border:1px solid #eef0f3; border-radius:14px; padding:15px 16px; }
.pd-pin-title{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#15171c; margin-bottom:11px; }
.pd-pin-title svg{ color:#e8502a; }
.pd-pin-row{ display:flex; gap:9px; }
.pd-pin-input{ flex:1; min-width:0; border:1.5px solid #e3e6ea; border-radius:10px; padding:11px 13px; font-size:14px; font-family:inherit; outline:none; letter-spacing:1px; transition:border-color .2s; }
.pd-pin-input:focus{ border-color:#15171c; }
.pd-pin-btn{ flex-shrink:0; border:none; background:#15171c; color:#fff; border-radius:10px; padding:0 20px; font-size:13.5px; font-weight:600; cursor:pointer; transition:background .2s; }
.pd-pin-btn:hover{ background:#000; }
.pd-pin-result{ margin-top:10px; font-size:12.5px; font-weight:500; padding:9px 12px; border-radius:9px; }
.pd-pin-result.ok{ color:#0e7a45; background:#e9f8ef; }
.pd-pin-result.err{ color:#c0392b; background:#fdecec; }

/* qty + stock */
.pd-buy{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.pd-qty{ display:inline-flex; align-items:center; border:1.5px solid #e3e6ea; border-radius:12px; overflow:hidden; }
.pd-qty button{ width:42px; height:44px; border:none; background:#fff; color:#15171c; font-size:19px; cursor:pointer; transition:background .15s; }
.pd-qty button:hover{ background:#f6f7f9; }
.pd-qty span{ min-width:42px; text-align:center; font-size:15px; font-weight:600; }
.pd-stock{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#0e9b52; }
.pd-stock-dot{ width:8px; height:8px; border-radius:50%; background:#19c578; box-shadow:0 0 0 3px rgba(25,197,120,.18); }
.pd-stock.is-low{ color:#c2710a; } .pd-stock.is-low .pd-stock-dot{ background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.2); }
.pd-stock.is-out{ color:#d63232; } .pd-stock.is-out .pd-stock-dot{ background:#d63232; box-shadow:none; }

/* CTAs */
.pd-cta{ display:flex; gap:12px; }
.pd-btn-cart{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1.6px solid #15171c; background:#fff; color:#15171c; border-radius:13px; padding:15px; font-size:15px; font-weight:600; cursor:pointer; transition:background .2s, color .2s, transform .15s; }
.pd-btn-cart:hover:not(:disabled){ background:#15171c; color:#fff; transform:translateY(-1px); }
.pd-btn-cart:disabled{ opacity:.5; cursor:not-allowed; }
.pd-btn-buy{ flex:1; display:inline-flex; align-items:center; justify-content:center; background:#e8502a; color:#fff; border-radius:13px; padding:15px; font-size:15px; font-weight:600; text-decoration:none; transition:background .2s, transform .15s, box-shadow .25s; }
.pd-btn-buy:hover{ background:#cf4421; transform:translateY(-1px); box-shadow:0 12px 26px rgba(232,80,42,.3); }

/* trust */
.pd-trust{ display:grid; grid-template-columns:1fr 1fr; gap:12px; border-top:1px solid #f0f1f4; padding-top:18px; }
.pd-trust-item{ display:flex; align-items:center; gap:11px; }
.pd-trust-ic{ flex-shrink:0; width:40px; height:40px; border-radius:11px; background:#f6f7f9; display:grid; place-items:center; font-size:19px; }
.pd-trust-item strong{ display:block; font-size:13px; font-weight:600; color:#15171c; }
.pd-trust-item span{ font-size:11.5px; color:#969ba5; }

/* highlights */
.pd-highlights{ border-top:1px solid #f0f1f4; padding-top:18px; }
.pd-highlights-title{ margin:0 0 13px; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#969ba5; }
.pd-highlights-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
.pd-hl{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; font-weight:400; color:#4a4f59; line-height:1.5; }
.pd-hl svg{ flex-shrink:0; margin-top:2px; color:#0e9b52; }
.pd-hl b{ font-weight:600; color:#15171c; }

/* soon */
.pd-soon{ background:#fbfbfc; border:1px solid #eef0f3; border-radius:14px; padding:20px; }
.pd-soon-badge{ display:inline-block; font-size:14px; font-weight:600; color:#c2710a; background:#fff2e0; border-radius:8px; padding:6px 14px; margin-bottom:10px; }
.pd-soon p{ margin:0; font-size:13.5px; color:#5a5f68; line-height:1.6; }

/* lightbox */
.pd-lightbox{ position:fixed; inset:0; z-index:4000; background:rgba(10,10,12,.94); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; }
.pd-lb-close{ position:absolute; top:18px; right:22px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; border:none; font-size:18px; cursor:pointer; transition:background .2s; }
.pd-lb-close:hover{ background:rgba(255,255,255,.26); }
.pd-lb-img{ max-width:90%; max-height:80vh; object-fit:contain; }
.pd-lb-thumbs{ display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; justify-content:center; }
.pd-lb-thumb{ width:54px; height:54px; border-radius:9px; overflow:hidden; border:2px solid transparent; background:#fff; padding:3px; cursor:pointer; opacity:.55; transition:opacity .2s, border-color .2s; }
.pd-lb-thumb img{ width:100%; height:100%; object-fit:contain; }
.pd-lb-thumb.is-active{ opacity:1; border-color:#fff; }

/* responsive */
@media (max-width:900px){
  .pd-wrap{ grid-template-columns:1fr; gap:24px; }
  .pd-gallery{ position:static; flex-direction:column-reverse; }
  .pd-thumbs{ flex-direction:row; width:100%; max-height:none; overflow-x:auto; overflow-y:hidden; }
  .pd-trust{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .pd-title{ font-size:22px; }
  .pd-price-now{ font-size:26px; }
  .pd-cta{ flex-direction:column; }
}

/* =========================================================
   PDP — thumbnail up/down nav buttons (v=70)
   ========================================================= */
.pd-thumbs-col{ display:flex; flex-direction:column; gap:8px; width:70px; flex-shrink:0; }
.pd-thumbs-col .pd-thumbs{ max-height:430px; }
.pd-thumb-nav{ flex-shrink:0; width:70px; height:30px; border:1.5px solid #eceef1; border-radius:10px; background:#fff; color:#7a808a; display:grid; place-items:center; cursor:pointer; transition:border-color .18s, color .18s, background .18s; }
.pd-thumb-nav:hover{ border-color:#15171c; color:#15171c; background:#fafbfc; }
.pd-thumb-nav:active{ transform:scale(.96); }
.pd-thumb-nav svg{ width:16px; height:16px; }
@media (max-width:900px){
  .pd-thumbs-col{ width:100%; }
  .pd-thumb-nav{ display:none; }
  .pd-thumbs-col .pd-thumbs{ max-height:none; }
}

/* =========================================================
   PDP — hide thumbnail scrollbars (v=71)
   ========================================================= */
.pd-thumbs{ scrollbar-width:none; -ms-overflow-style:none; }
.pd-thumbs::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none; }

/* =========================================================
   PDP — enhanced pincode/delivery card (v=72)
   ========================================================= */
.pd-pin{ background:linear-gradient(135deg,#fff6f3 0%,#fbfbfc 55%); border:1px solid #f4ddd4; border-radius:16px; padding:16px 17px; }
.pd-pin-head{ display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.pd-pin-ic{ flex-shrink:0; width:42px; height:42px; border-radius:12px; background:#fff; border:1px solid #f4ddd4; color:#e8502a; display:grid; place-items:center; box-shadow:0 3px 9px rgba(232,80,42,.12); }
.pd-pin-title{ display:block; margin:0; font-size:14px; font-weight:600; color:#15171c; }
.pd-pin-sub{ margin:2px 0 0; font-size:12px; font-weight:400; color:#969ba5; }
.pd-pin-row{ display:flex; gap:9px; }
.pd-pin-field{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid #e9ddd8; border-radius:11px; padding:0 13px; transition:border-color .2s, box-shadow .2s; }
.pd-pin-field:focus-within{ border-color:#e8502a; box-shadow:0 0 0 3px rgba(232,80,42,.1); }
.pd-pin-field svg{ color:#c3a99f; flex-shrink:0; }
.pd-pin-field input{ flex:1; min-width:0; border:none; outline:none; background:transparent; padding:12px 0; font-size:14px; font-family:inherit; letter-spacing:1px; color:#15171c; }
.pd-pin-field input::placeholder{ letter-spacing:0; color:#aab0b9; }
.pd-pin-btn{ flex-shrink:0; border:none; background:#15171c; color:#fff; border-radius:11px; padding:0 22px; font-size:13.5px; font-weight:600; cursor:pointer; transition:background .2s, transform .15s, box-shadow .25s; }
.pd-pin-btn:hover{ background:#000; transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.2); }
.pd-pin-result{ display:flex; align-items:center; gap:8px; margin-top:11px; font-size:12.5px; font-weight:500; padding:10px 13px; border-radius:10px; line-height:1.4; }
.pd-pin-result svg{ flex-shrink:0; }
.pd-pin-result.ok{ color:#0e7a45; background:#e9f8ef; }
.pd-pin-result.err{ color:#c0392b; background:#fdecec; }

/* =========================================================
   PDP tabs — sticky tab bar (v=73)
   ========================================================= */
.pdp-tab-btns{
  position:sticky;
  top:var(--nav-h, 68px);
  z-index:50;
  background:#fff;
  padding-top:14px;
  box-shadow:0 12px 16px -14px rgba(0,0,0,.2);
}

/* =========================================================
   ACCOUNT — product reviews (v=74)
   ========================================================= */
.ac-nav-count--accent{ background:#fdeee9 !important; color:#e8502a !important; }
.ac-rev-list{ display:flex; flex-direction:column; gap:12px; }
.ac-rev{ display:flex; gap:14px; background:#fff; border:1px solid #eef0f3; border-radius:16px; padding:16px; box-shadow:0 4px 14px rgba(15,18,28,.04); }
.ac-rev-thumb{ flex-shrink:0; width:64px; height:64px; border-radius:12px; background:#f3f4f6; display:grid; place-items:center; overflow:hidden; font-size:24px; text-decoration:none; }
.ac-rev-thumb img{ width:100%; height:100%; object-fit:contain; }
.ac-rev-main{ flex:1; min-width:0; }
.ac-rev-name{ display:block; font-size:14.5px; font-weight:600; color:#15171c; text-decoration:none; margin-bottom:9px; }
.ac-rev-name:hover{ color:#e8502a; }
.ac-rev-done{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:#0e9b52; background:#e6f8ef; border-radius:99px; padding:5px 12px; }
.ac-rev-btn{ display:inline-flex; align-items:center; gap:7px; border:1.4px solid #d8dce1; background:#fff; color:#15171c; border-radius:10px; padding:8px 16px; font-size:13px; font-weight:500; cursor:pointer; transition:border-color .2s, background .2s; }
.ac-rev-btn svg{ color:#ffc93c; }
.ac-rev-btn:hover{ border-color:#15171c; background:#fafbfc; }
.ac-rev-form{ display:flex; flex-direction:column; gap:10px; }
.ac-rev-stars{ display:flex; gap:3px; }
.ac-rev-star{ border:none; background:none; font-size:26px; line-height:1; color:#dcdfe4; cursor:pointer; padding:0; transition:color .12s, transform .12s; }
.ac-rev-star.is-on{ color:#ffc93c; }
.ac-rev-star:hover{ transform:scale(1.12); }
.ac-rev-text{ border:1.5px solid #e3e6ea; border-radius:11px; padding:11px 13px; font-size:13.5px; font-family:inherit; outline:none; resize:vertical; transition:border-color .2s; }
.ac-rev-text:focus{ border-color:#15171c; }
.ac-rev-err{ margin:0; font-size:12.5px; color:#d63232; }
.ac-rev-actions{ display:flex; gap:9px; justify-content:flex-end; }
.ac-rev-cancel{ border:1.4px solid #d8dce1; background:#fff; color:#5a5f68; border-radius:9px; padding:8px 16px; font-size:13px; font-weight:500; cursor:pointer; }
.ac-rev-cancel:hover{ border-color:#15171c; color:#15171c; }
.ac-rev-submit{ border:none; background:#e8502a; color:#fff; border-radius:9px; padding:8px 18px; font-size:13px; font-weight:600; cursor:pointer; transition:background .2s; }
.ac-rev-submit:hover:not(:disabled){ background:#cf4421; }
.ac-rev-submit:disabled{ opacity:.6; cursor:not-allowed; }

/* =========================================================
   PDP — product video in gallery (v=75)
   ========================================================= */
.pd-stage-video{ width:100%; max-height:480px; object-fit:contain; border-radius:8px; background:#000; }
.pd-thumb--video{ position:relative; }
.pd-thumb--video video{ width:100%; height:100%; object-fit:cover; border-radius:7px; }
.pd-thumb-play{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.pd-thumb-play svg{ color:#fff; background:rgba(0,0,0,.55); border-radius:50%; padding:6px; box-sizing:content-box; }
.pd-lb-thumb video{ width:100%; height:100%; object-fit:cover; }
video.pd-lb-img{ background:#000; }

/* =========================================================
   PDP buy section — qty fix + wishlist button (v=76)
   ========================================================= */
.pd-buy{ align-items:flex-end; }
.pd-qty-wrap{ display:flex; flex-direction:column; gap:7px; }
.pd-qty-label{ font-size:12.5px; font-weight:500; color:#5a5f68; }
.pd-qty-val{ min-width:46px; text-align:center; font-size:16px; font-weight:700; color:#15171c !important; }
.pd-qty button{ font-weight:500; color:#15171c; }
.pd-qty button:disabled{ opacity:.35; cursor:not-allowed; }
.pd-qty button:disabled:hover{ background:#fff; }

/* wishlist button in CTA row */
.pd-btn-wish{ flex-shrink:0; width:56px; border:1.6px solid #e3e6ea; background:#fff; color:#9aa0aa; border-radius:13px; display:grid; place-items:center; cursor:pointer; transition:border-color .2s, color .2s, background .2s, transform .15s; }
.pd-btn-wish:hover{ border-color:#e8502a; color:#e8502a; transform:translateY(-1px); }
.pd-btn-wish.is-on{ border-color:#e8502a; color:#e8502a; background:#fdeee9; }

/* =========================================================
   PDP REVIEWS — premium redesign (v=77)
   ========================================================= */
.pdp-rev-head{ display:flex; gap:36px; flex-wrap:wrap; align-items:center; padding:22px 24px; background:#fbfbfc; border:1px solid #eef0f3; border-radius:16px; margin-bottom:24px; }
.pdp-rev-score{ text-align:center; min-width:118px; }
.pdp-rev-num{ font-size:46px; font-weight:800; color:#15171c; line-height:1; letter-spacing:-1px; }
.pdp-rev-stars{ color:#ffc93c; font-size:18px; letter-spacing:2px; margin-top:5px; }
.pdp-rev-count{ font-size:12.5px; color:#969ba5; margin-top:5px; }
.pdp-rev-dist{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:7px; }
.pdp-rev-bar{ display:flex; align-items:center; gap:10px; font-size:12.5px; }
.pdp-rev-bar-label{ width:34px; color:#5a5f68; font-weight:500; white-space:nowrap; }
.pdp-rev-bar-track{ flex:1; height:8px; background:#eceef1; border-radius:99px; overflow:hidden; }
.pdp-rev-bar-track span{ display:block; height:100%; background:linear-gradient(90deg,#ffd454,#f5a623); border-radius:99px; transition:width .6s ease; }
.pdp-rev-bar-count{ width:24px; text-align:right; color:#969ba5; }

.pdp-rev-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:30px; }
.pdp-rev-empty{ color:#969ba5; font-size:14px; }
.pdp-rev-card{ display:flex; gap:14px; padding:16px 18px; border:1px solid #eef0f3; border-radius:14px; background:#fff; transition:box-shadow .2s; }
.pdp-rev-card:hover{ box-shadow:0 6px 18px rgba(15,18,28,.05); }
.pdp-rev-av{ flex-shrink:0; width:42px; height:42px; border-radius:50%; color:#fff; display:grid; place-items:center; font-size:16px; font-weight:600; }
.pdp-rev-content{ flex:1; min-width:0; }
.pdp-rev-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.pdp-rev-author{ font-size:14px; font-weight:600; color:#15171c; }
.pdp-rev-verified{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:#0e9b52; background:#e6f8ef; border-radius:99px; padding:2px 9px; }
.pdp-rev-cardstars{ color:#ffc93c; font-size:13px; letter-spacing:1px; margin-bottom:7px; }
.pdp-rev-text{ margin:0; font-size:13.5px; color:#4a4f59; line-height:1.65; }

.pdp-rev-thanks{ color:#0e9b52; font-size:14px; font-weight:600; }
.pdp-rev-form{ border-top:1px solid #f0f1f4; padding-top:22px; display:flex; flex-direction:column; gap:11px; max-width:480px; }
.pdp-rev-form h3{ margin:0; font-size:16px; font-weight:600; color:#15171c; }
.pdp-rev-formstars{ display:flex; gap:4px; font-size:28px; cursor:pointer; }
.pdp-rev-formstars span{ color:#dcdfe4; transition:color .12s, transform .12s; }
.pdp-rev-formstars span:hover{ transform:scale(1.12); }
.pdp-rev-formstars span.is-on{ color:#ffc93c; }
.pdp-rev-input, .pdp-rev-textarea{ border:1.5px solid #e3e6ea; border-radius:11px; padding:12px 14px; font-size:14px; font-family:inherit; outline:none; transition:border-color .2s; color:#15171c; }
.pdp-rev-input:focus, .pdp-rev-textarea:focus{ border-color:#15171c; }
.pdp-rev-textarea{ resize:vertical; min-height:90px; }
.pdp-rev-submit{ align-self:flex-start; border:none; background:#e8502a; color:#fff; border-radius:11px; padding:12px 26px; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s; }
.pdp-rev-submit:hover:not(:disabled){ background:#cf4421; }
.pdp-rev-submit:disabled{ opacity:.6; cursor:not-allowed; }
@media (max-width:560px){ .pdp-rev-head{ gap:20px; padding:18px; } }

/* =========================================================
   PDP — stacked sections + sticky scroll-spy nav (v=78)
   ========================================================= */
.pdp-sections{ background:#fff; border-top:1px solid #f0f0f0; }
.pdp-nav-sentinel{ display:block; height:1px; width:100%; }

/* Sticky section nav — full width; takes over the top once the site header hides */
.pdp-secnav{ position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid #ececf0; box-shadow:0 8px 18px -14px rgba(0,0,0,.22); }
.pdp-secnav-inner{ max-width:1200px; margin:0 auto; display:flex; gap:4px; padding:0 var(--pad-x); overflow-x:auto; scrollbar-width:none; }
.pdp-secnav-inner::-webkit-scrollbar{ display:none; }
.pdp-secnav-btn{ position:relative; padding:16px 22px; background:none; border:none; font:600 14px var(--font); color:rgba(0,0,0,.46); cursor:pointer; white-space:nowrap; transition:color .18s; }
.pdp-secnav-btn::after{ content:""; position:absolute; left:22px; right:22px; bottom:0; height:2.5px; background:var(--accent); border-radius:2px 2px 0 0; transform:scaleX(0); transition:transform .2s ease; }
.pdp-secnav-btn:hover{ color:#0a0a0a; }
.pdp-secnav-btn.is-active{ color:var(--accent); }
.pdp-secnav-btn.is-active::after{ transform:scaleX(1); }

/* When the section nav is stuck → hide the site header so the nav owns the top */
body.pdp-nav-stuck #navbar,
body.pdp-nav-stuck #ann-bar{ opacity:0 !important; pointer-events:none !important; visibility:hidden !important; }

/* Stacked content sections */
.pdp-sec-wrap{ max-width:1200px; margin:0 auto; padding:0 var(--pad-x); }
.pdp-sec{ padding:44px 0; border-bottom:1px solid #f1f1f4; scroll-margin-top:84px; }
.pdp-sec:last-child{ border-bottom:none; padding-bottom:64px; }
.pdp-sec-title{ font:800 24px var(--font); color:#15171c; margin:0 0 22px; letter-spacing:-.4px; }
.pdp-sec-desc{ font-size:15px; line-height:1.85; color:#4a4f59; max-width:820px; white-space:pre-line; }

/* Warranty section */
.pdp-warr-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-bottom:18px; }
.pdp-warr-card{ border-radius:14px; padding:20px 22px; border:1px solid #eef0f3; }
.pdp-warr-card--green{ background:#f1faf4; border-color:#d6efdf; }
.pdp-warr-card--orange{ background:#fff5f1; border-color:#fbded2; }
.pdp-warr-head{ margin:0 0 6px; font-size:15.5px; font-weight:700; color:#15171c; }
.pdp-warr-body{ margin:0; font-size:13.5px; line-height:1.6; color:#5a5f68; }
.pdp-warr-note{ font-size:13px; color:#969ba5; }
.pdp-warr-note a{ color:var(--accent); font-weight:600; }

/* =========================================================
   PDP — full-width sticky add-to-cart bar (bottom)
   ========================================================= */
.pd-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:70; background:#fff; border-top:1px solid #e8eaee; box-shadow:0 -10px 30px -18px rgba(0,0,0,.28); transform:translateY(110%); transition:transform .32s cubic-bezier(.4,0,.2,1); }
.pd-sticky.is-show{ transform:translateY(0); }
.pd-sticky-inner{ max-width:1200px; margin:0 auto; padding:11px var(--pad-x); display:flex; align-items:center; gap:16px; }
.pd-sticky-img{ width:50px; height:50px; object-fit:contain; border-radius:10px; background:#f5f6f8; flex-shrink:0; }
.pd-sticky-info{ display:flex; flex-direction:column; gap:2px; min-width:0; margin-right:auto; }
.pd-sticky-name{ font-size:14.5px; font-weight:700; color:#15171c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.pd-sticky-price{ display:flex; align-items:baseline; gap:8px; font-size:16px; font-weight:800; color:#15171c; }
.pd-sticky-price s{ font-size:12.5px; font-weight:500; color:#aab0b8; }
.pd-sticky-qty{ display:flex; align-items:center; border:1.5px solid #e3e6ea; border-radius:10px; overflow:hidden; flex-shrink:0; }
.pd-sticky-qty button{ width:34px; height:38px; border:none; background:#fff; font-size:17px; color:#15171c; cursor:pointer; }
.pd-sticky-qty button:disabled{ color:#cdd2d8; cursor:not-allowed; }
.pd-sticky-qty span{ min-width:30px; text-align:center; font-size:14px; font-weight:600; color:#15171c; }
.pd-sticky-actions{ display:flex; gap:10px; flex-shrink:0; }
.pd-sticky-cart, .pd-sticky-buy{ border:none; border-radius:11px; padding:12px 26px; font-size:14px; font-weight:700; cursor:pointer; transition:filter .18s, background .18s; }
.pd-sticky-cart{ background:#fff; color:var(--accent); border:1.6px solid var(--accent); }
.pd-sticky-cart:hover:not(:disabled){ background:#fff5f1; }
.pd-sticky-buy{ background:var(--accent); color:#fff; }
.pd-sticky-buy:hover:not(:disabled){ filter:brightness(.93); }
.pd-sticky-cart:disabled, .pd-sticky-buy:disabled{ opacity:.5; cursor:not-allowed; }

/* Lift the WhatsApp widget above the sticky bar when it's visible */
body:has(.pd-sticky.is-show) .wa-widget{ bottom:90px; transition:bottom .3s; }

@media (max-width:640px){
  .pd-sticky-info{ display:none; }
  .pd-sticky-inner{ gap:10px; padding:9px 12px; }
  .pd-sticky-img{ display:none; }
  .pd-sticky-actions{ flex:1; }
  .pd-sticky-cart, .pd-sticky-buy{ flex:1; padding:12px 10px; }
  .pdp-sec-title{ font-size:21px; }
  .pdp-secnav-btn{ padding:14px 16px; }
}

/* =========================================================
   MOBILE APP VIEW (v=79)
   Base toggles — these components are mobile-only.
   ========================================================= */
.mbn { display: none; }

@media (max-width: 768px) {
  /* ───────── 1) Hide the top announcement bar ───────── */
  #ann-bar { display: none !important; }
  :root { --ann-h: 0px; --nav-h: 60px; --mbn-h: 62px; }

  /* ───────── 2) Navbar — solid white, big logo (left) + search bar (right) ─────────
     NOTE: must out-specify `.inner-page #navbar.at-top { background: var(--bg) !important }`,
     so we prefix every navbar rule here with `.inner-page` too. */
  .inner-page #navbar,
  .inner-page #navbar.at-top,
  .inner-page #navbar.is-sticky {
    position: fixed; top: 0;
    height: 60px;
    background: #ffffff !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 8px 22px -16px rgba(0,0,0,.4) !important;
  }
  .nav-container { gap: 12px; padding: 0 14px; height: 60px; }
  /* logo bigger + dark (white asset inverted to black) */
  .inner-page #navbar .logo { flex: 0 0 auto; }
  .inner-page #navbar .logo img,
  .inner-page #navbar.at-top .logo img,
  .inner-page #navbar.is-sticky .logo img {
    height: 40px !important; width: auto; filter: invert(1) !important;
  }
  .inner-page #navbar .hamburger span { background: #15171c !important; }
  /* Header = [logo left] · [search center] · [menu toggle right].
     Hide desktop nav links + the wishlist/account/cart icons (those live in the bottom bar),
     but KEEP the hamburger menu toggle. */
  .nav-links { display: none !important; }
  .nav-actions { display: flex !important; align-items: center; gap: 4px; flex: 0 0 auto; }
  .nav-actions .nav-icon-btn { display: none !important; }
  .hamburger { display: flex !important; }
  #navbar .hamburger span { background: #15171c !important; }

  /* search bar sits in the centre — themed light pill on the white bar */
  .nav-right { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
  .search-bar {
    display: flex !important; flex: 1; min-width: 0; margin: 0;
    background: #f3f4f6 !important; border: 1px solid #e6e8ec !important;
    border-radius: 999px; height: 42px; padding: 0 14px; align-items: center; gap: 8px;
  }
  .search-bar .search-icon { color: #8a8f98; }
  .search-input-wrap { flex: 1; min-width: 0; }
  .search-input { color: #15171c !important; font-size: 14px; width: 100%; background: transparent; }
  .search-input::placeholder { color: #9aa0a8; }

  /* ───────── 3) Bottom sticky app nav (with WhatsApp) ───────── */
  .mbn {
    display: flex; align-items: flex-end; justify-content: space-around;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1150;
    height: var(--mbn-h);
    background: #ffffff;
    border-top: 1px solid #eceef2;
    box-shadow: 0 -8px 26px -16px rgba(0,0,0,.4);
    padding: 6px 6px max(6px, env(safe-area-inset-bottom));
  }
  .mbn-item, .mbn-fab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 3px; background: none; border: none; cursor: pointer;
    font: 600 10.5px var(--font); color: #8b9099; text-decoration: none; padding: 6px 0 0;
    -webkit-tap-highlight-color: transparent;
  }
  .mbn-item svg { width: 23px; height: 23px; }
  .mbn-item.is-active { color: var(--accent); }
  .mbn-ic-wrap { position: relative; display: inline-flex; }
  .mbn-badge {
    position: absolute; top: -5px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800;
    display: grid; place-items: center; border: 1.5px solid #fff;
  }
  .mbn-badge--wish { background: #e8502a; }
  /* center raised WhatsApp FAB */
  .mbn-fab { color: #128c4f; }
  .mbn-fab-ring {
    width: 54px; height: 54px; margin-top: -22px; border-radius: 50%;
    background: linear-gradient(145deg, #25d366, #128c4f);
    display: grid; place-items: center; color: #fff;
    box-shadow: 0 8px 18px -4px rgba(18,140,79,.6), 0 0 0 4px #fff;
  }
  .mbn-fab-ring svg { width: 27px; height: 27px; }

  /* lift PDP sticky buy-bar above the app nav; hide the floating WhatsApp widget */
  .wa-widget { display: none !important; }
  .pd-sticky { bottom: var(--mbn-h) !important; }
  /* clear space so the footer is not hidden behind the fixed bottom nav */
  .inner-page { padding-bottom: var(--mbn-h); }

  /* ───────── 4) Hero — 100% width, natural height, swipeable ───────── */
  #hero-section {
    margin-top: 0 !important; height: auto !important; min-height: 0 !important;
    padding: 0 !important; background: none !important;
  }
  .hero-slider {
    display: flex; height: auto; border-radius: 0; box-shadow: none;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero-slider::-webkit-scrollbar { display: none; }
  .slide {
    position: relative; inset: auto; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 100%; scroll-snap-align: center; transition: none;
  }
  .slide-bg { position: relative; inset: auto; display: block; }
  .slide-img { height: auto; object-fit: contain; }
  .slider-arrow, .slider-dots, .slider-progress { display: none !important; }

  /* ───────── 5) Product rail → real 2-column grid (no slider); hide card description ───────── */
  .products-slider-wrap { overflow: visible !important; }
  .products-track {
    transform: none !important; display: grid !important;
    grid-template-columns: 1fr 1fr; gap: 12px; transition: none !important;
  }
  .products-track .product-card { flex: none !important; width: auto !important; min-width: 0; }
  .ps-nav-btns { display: none !important; }
  .product-slogan { display: none !important; }

  /* ───────── 6b) Swipe on the secondary banner slider ───────── */
  .ss-slider {
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ss-slider::-webkit-scrollbar { display: none; }
  .ss-track { transform: none !important; transition: none !important; }
  .ss-slide { scroll-snap-align: center; }
  .ss-dots { display: none; }
  /* fixed banner height (hero excluded) — uniform 200px, cropped */
  .ss-img { height: 200px !important; object-fit: cover; }
  .tdv-banner-img { height: 200px !important; object-fit: cover; }

  /* ───────── 6c) Swipe on the Instagram reels ───────── */
  .insta-viewport {
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .insta-viewport::-webkit-scrollbar { display: none; }
  .insta-reel-track { transform: none !important; transition: none !important; }
  .insta-card { scroll-snap-align: center; }
  .insta-nav-btns { display: none !important; }

  /* ───────── 7) Instagram QR column — clean centered card ───────── */
  .insta-qr-panel {
    flex-direction: column !important; align-items: center !important; text-align: center !important;
    flex-wrap: nowrap; gap: 10px !important; padding: 24px 18px !important; border-radius: 18px !important;
  }
  .insta-qr-ig-icon { display: flex !important; margin-bottom: 2px; }
  .insta-qr-ring { margin-bottom: 0 !important; flex: 0 0 auto !important; }
  .insta-qr-inner { padding: 8px !important; border-radius: 12px !important; }
  .insta-qr-img { width: 132px !important; height: 132px !important; }
  .insta-qr-scan-txt { display: block !important; font-size: 12px; letter-spacing: 1.5px; }
  .insta-qr-divider { display: block !important; }
  .insta-qr-handle { font-size: 16px !important; margin-bottom: 2px !important; }
  .insta-qr-msg { font-size: 12.5px !important; line-height: 1.6 !important; margin-bottom: 4px !important; }
  .insta-follow-btn { width: 100%; justify-content: center; font-size: 13px !important; padding: 12px 18px !important; }
  .insta-qr-panel > *:not(.insta-qr-ring) { flex: 0 0 auto !important; width: 100%; }

  /* ───────── 8) Success Stories — centered card, swipeable ───────── */
  .success-viewport {
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 18px 0 26px;
  }
  .success-viewport::-webkit-scrollbar { display: none; }
  .success-track {
    transform: none !important; transition: none !important;
    padding-inline: 50%;
    gap: 18px;
  }
  .success-cell { scroll-snap-align: center; }
  .success-arrows { display: none !important; }

  /* ───────── Footer — Company + Customer Support side by side (half/half) ───────── */
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 26px 18px !important; }
  /* brand, Our Products and Get In Touch stay full-width; that leaves
     Company (3rd) + Customer Support (4th) sharing one half/half row */
  .footer-inner > div:nth-child(1),
  .footer-inner > div:nth-child(2),
  .footer-inner > div:nth-child(5) { grid-column: 1 / -1; }
}

/* =========================================================
   DESKTOP — align every home section/banner to the HERO width (v=82)
   Hero = full viewport minus clamp(14px,3vw,48px) side padding (no max-width cap).
   We give the same frame to all section wrappers so they line up edge-to-edge
   with the hero on wide screens (e.g. 1900px). Mobile (≤768px) is untouched.
   ========================================================= */
@media (min-width: 769px) {
  /* zero the outer-section horizontal padding (frame moves onto the inner wrap) */
  .products-section,
  .cat-section,
  .ss-section,
  .tdv-section,
  .insta-section,
  .success-section,
  .brand-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* inner wrappers: drop the 1440px cap, span full width with the hero side padding */
  .products-container,
  .cat-wrap,
  .ss-wrap,
  .tdv-wrap,
  .insta-wrap,
  .success-wrap,
  .brand-section .page-wrap {
    max-width: none !important;
    width: auto !important;
    margin-inline: 0 !important;
    padding-inline: clamp(14px, 3vw, 48px) !important;
  }
}

/* =========================================================
   PDP — match the home-page / hero content width (v=83)
   ========================================================= */
.pdp-banners { max-width: var(--max-w); margin: 0 auto; padding: 12px var(--pad-x); display: flex; flex-direction: column; gap: 18px; }

@media (min-width: 769px) {
  /* outer full-width sections: drop their horizontal padding (frame moves to inner wrap) */
  .breadcrumb,
  .pdp-related { padding-left: 0 !important; padding-right: 0 !important; }
  /* every PDP content wrapper gets the hero frame: no cap + hero side padding */
  .breadcrumb-inner,
  .pd-wrap,
  .pdp-banners,
  .pdp-secnav-inner,
  .pdp-sec-wrap,
  .pdp-related-wrap {
    max-width: none !important;
    margin-inline: auto !important;
    padding-left: clamp(14px, 3vw, 48px) !important;
    padding-right: clamp(14px, 3vw, 48px) !important;
  }
}

/* "You may also like" (related products) — description on a single line (desktop) (v=84) */
@media (min-width: 769px) {
  .pdp-related .product-slogan {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* PDP product layout capped at 1600px (centered); other sections stay hero-width (v=85) */
@media (min-width: 769px) {
  .pd-wrap { max-width: 1600px !important; }
}

/* =========================================================
   PDP @ ≥1400px — fixed info column, gallery grows with the screen,
   image fills the viewport height (removes the empty space at 1900px) (v=86)
   ========================================================= */
@media (min-width: 1400px) {
  /* right (info) column fixed; left (gallery) takes all remaining width */
  .pd-wrap {
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) 620px !important;
  }
  /* wider thumbnails — widen the whole column (wrapper + nav buttons) and let the
     strip run the full gallery height so thumbs aren't clipped under the stage */
  .pd-thumbs-col { width: 92px !important; }
  .pd-thumbs-col .pd-thumbs { max-height: 90vh !important; }
  .pd-thumbs { width: 92px; }
  .pd-thumb  { width: 92px; height: 92px; }
  .pd-thumb-nav { width: 92px; }
  /* left column (gallery) height capped at 90vh; image fills it */
  .pd-stage { min-height: 540px; max-height: 90vh; }
  .pd-stage-img,
  .pd-stage-video { max-height: calc(90vh - 44px) !important; }
}