/* ==========================================================================
   LKS Wala — standalone storefront stylesheet
   Tokens measured from Desktop Reference Image.png (1672px) and
   Mobile Reference Image.png (941px).
   ========================================================================== */

:root {
  --orange: #FA8207;
  --orange-600: #E5720A;
  --orange-100: #FFF1E2;
  --ink: #1F2328;
  --ink-2: #3A3F47;
  --muted: #737A85;
  --muted-2: #9AA1AC;
  --line: #ECEDEF;
  --line-2: #E2E4E8;
  --bg: #FFFFFF;
  --bg-soft: #F7F8F9;
  --green: #24A148;
  --red: #E23744;

  --pastel-shoes: #EEE9F4;
  --pastel-mobile-accessories: #EDF4F9;
  --pastel-covers: #FEF3E5;
  --pastel-tshirts: #EBF3ED;
  --pastel-shirts: #FDECED;

  --container: 1332px;   /* section content = 1284px at 1672px, matches reference */
  --container-wide: 1506px; /* header content = 1458px, matches reference */
  --header-h: 82px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 6px 20px rgba(16,24,40,.08);
  --shadow-lg: 0 14px 40px rgba(16,24,40,.12);
  --bottom-nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 6px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 10px; font-weight: 600; font-size: 14px;
  border: 1px solid transparent; white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-600); }
.btn-outline { border-color: var(--line-2); background: #fff; color: var(--ink); }
.btn-outline:hover { border-color: var(--ink-2); }
.btn-block { width: 100%; }
.btn-lg { height: 50px; font-size: 15px; padding: 0 26px; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ------------------------------------------------------------------ header */
.site-header .container { max-width: var(--container-wide); }
.site-header { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--line); }
.header-inner { height: var(--header-h); display: flex; align-items: center; }
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 50px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 38px; margin-left: 58px; }
.main-nav a, .nav-more > button {
  position: relative; font-size: 15px; font-weight: 500; color: var(--ink-2);
  padding: 6px 0; display: inline-flex; align-items: center; gap: 6px; transition: color .16s ease;
}
.main-nav a:hover, .nav-more > button:hover { color: var(--orange); }
.main-nav a.active { color: var(--orange); font-weight: 600; }
.main-nav a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -13px; height: 3px;
  border-radius: 2px; background: var(--orange);
}
.nav-more { position: relative; }
.nav-more-panel {
  position: absolute; top: 38px; left: -14px; min-width: 210px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md);
  padding: 8px; display: none; z-index: 70;
}
.nav-more.open .nav-more-panel { display: block; }
.nav-more-panel a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--ink-2); }
.nav-more-panel a:hover { background: var(--bg-soft); color: var(--orange); }

.header-search { flex: 1 1 auto; max-width: 586px; margin-left: 54px; position: relative; }
.header-search input {
  width: 100%; height: 47px; border: 1px solid var(--line-2); border-radius: 10px;
  padding: 0 44px 0 48px; font-size: 14px; background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.header-search input::placeholder { color: var(--muted-2); }
.header-search input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(250,130,7,.12); outline: none; }
.icon-search { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: flex; }
.search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-2); display: none; }
.header-search.has-value .search-clear { display: flex; }

.header-actions { display: flex; align-items: center; gap: 14px; margin-left: 29px; flex: 0 0 auto; }
.login-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 45px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: 10px; font-size: 14px; font-weight: 500;
}
.login-btn:hover { border-color: var(--ink-2); }
.cart-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 45px; padding: 0 16px;
  background: var(--orange); color: #fff; border-radius: 10px; font-size: 14px; font-weight: 600;
}
.cart-btn:hover { background: var(--orange-600); }
.cart-btn .count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(255,255,255,.28);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}

/* suggestions */
.suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md);
  overflow: hidden; z-index: 80; display: none; max-height: 420px; overflow-y: auto;
}
.suggest.open { display: block; }
.suggest-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.suggest-item:hover, .suggest-item.active { background: var(--bg-soft); }
.suggest-item img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: var(--bg-soft); }
.s-name { font-size: 14px; font-weight: 500; }
.s-cat { font-size: 12px; color: var(--muted); }
.s-price { margin-left: auto; font-size: 14px; font-weight: 600; }
.suggest-empty { padding: 16px; font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------ mobile header */
.mobile-header { display: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--ink); }
.icon-btn:hover { background: var(--bg-soft); }
.cart-icon-wrap { position: relative; }
.cart-icon-wrap .count {
  position: absolute; top: -1px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}

/* drawer */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(15,18,22,.45); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 84vw; background: #fff;
  z-index: 95; transform: translateX(-102%); transition: transform .26s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer-head img { height: 32px; }
.drawer-body { padding: 8px 10px 30px; overflow-y: auto; }
.drawer-body h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); padding: 14px 12px 6px; }
.drawer-body a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; font-size: 15px; font-weight: 500; }
.drawer-body a:hover, .drawer-body a.active { background: var(--orange-100); color: var(--orange); }

/* --------------------------------------------------------------------- hero */
.hero-wrap { padding: 0 48px; }
/* The hero has no .container wrapper, so it spans the full viewport width on
   very wide monitors (2K/4K/ultrawide). The uploaded banner photo itself is
   only ~2400px wide; without a cap the browser stretches it past its native
   resolution on those screens, softening text and product edges. Capping at
   the image's native width stops that upscaling; every narrower viewport
   (the vast majority of visits) is unaffected since width:100% already keeps
   it below this cap. Raise this value if a future banner upload is wider. */
.hero { position: relative; width: 100%; max-width: 2407px; margin-left: auto; margin-right: auto; aspect-ratio: 1573 / 405; border-radius: 14px; overflow: hidden; background: #F3EDE7; }
.hero-track { display: flex; height: 100%; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.hero-slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-copy { position: absolute; left: 23.2%; top: 50%; transform: translateY(-50%); max-width: 42%; z-index: 2; }
.hero-slide.composed .hero-copy { left: 6%; max-width: 46%; }
.hero-eyebrow { font-size: clamp(9px, .78vw, 13px); font-weight: 700; letter-spacing: .16em; color: var(--orange); text-transform: uppercase; margin-bottom: 10px; }
.hero-title { font-size: clamp(20px, 2.72vw, 46px); line-height: 1.14; color: #1B2430; }
.hero-title span { color: var(--orange); }
.hero-sub { margin: 12px 0 20px; font-size: clamp(11px, 1.02vw, 17px); color: #4B5563; line-height: 1.45; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 12px; background: var(--orange); color: #fff;
  border-radius: 999px; padding: 0 9px 0 24px; height: clamp(34px, 3.1vw, 52px);
  font-weight: 600; font-size: clamp(12px, 1vw, 16px); box-shadow: 0 8px 22px rgba(250,130,7,.28);
}
.hero-cta:hover { background: var(--orange-600); }
.hero-cta .circle { width: clamp(22px, 2vw, 34px); height: clamp(22px, 2vw, 34px); border-radius: 50%; border: 1.6px solid rgba(255,255,255,.9); display: grid; place-items: center; }
.hero-trust { display: flex; gap: 26px; margin-top: 24px; }
.hero-trust > div { display: flex; align-items: center; gap: 9px; }
.hero-trust .t-ico { width: 34px; height: 34px; border-radius: 50%; border: 1.4px solid rgba(31,35,40,.18); display: grid; place-items: center; color: var(--ink-2); flex: 0 0 auto; }
.hero-trust b { display: block; font-size: 12px; font-weight: 600; }
.hero-trust small { font-size: 11px; color: var(--muted); }
.hero-slide.composed .hero-art { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); height: 82%; }
.hero-slide.composed .hero-art img { height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(0,0,0,.12)); }

/* The uploaded banner image for the main (baked-mobile) hero slide already
   carries its own "Shop Now" call-to-action baked into the artwork, so the
   separately-rendered .hero-cta button duplicates it on desktop. Hide only
   that duplicate button on desktop; mobile already hides the whole
   .hero-copy block for baked-mobile slides below, and other hero slide
   types (composed) keep their .hero-cta untouched. */
@media (min-width: 769px) {
  .hero-slide.baked-mobile .hero-cta { display: none; }
}

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-md); display: grid; place-items: center; z-index: 3;
  color: var(--ink); transition: transform .16s ease;
}
.hero-arrow:hover { transform: translateY(-50%) scale(1.06); }
.hero-arrow.prev { left: 24px; }
.hero-arrow.next { right: 24px; }
.hero-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px; z-index: 3; }
.hero-dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.05); padding: 0; }
.hero-dots button.active { background: var(--orange); }

/* ----------------------------------------------------------------- sections */
.section { padding: 34px 0 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 16px; }
.section-head h2 { font-size: 21px; }
.section-link { display: inline-flex; align-items: center; gap: 8px; color: var(--orange); font-size: 14px; font-weight: 600; }
.section-link:hover { text-decoration: underline; }

/* ----------------------------------------------------------- category strip */
.category-row {
  display: flex; flex-wrap: nowrap; gap: 18px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 10px;
}
.category-row .category-card { flex: 0 0 calc((100% - 4 * 18px) / 5); scroll-snap-align: start; }
.category-card {
  display: flex; align-items: center; gap: 4px; height: 127px; border-radius: 12px;
  padding: 8px 14px 8px 6px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease;
}
.category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.category-card .c-media { width: 47%; height: 100%; flex: 0 0 auto; display: grid; place-items: center; }
.category-card .c-media img { width: 100%; height: 100%; object-fit: contain; }
.category-card .c-name { font-size: 15px; font-weight: 600; line-height: 1.25; display: block; }
.category-card .c-link { margin-top: 8px; font-size: 12.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; }
.category-card:hover .c-link { color: var(--orange); }
.category-card { background: var(--cat-bg, var(--bg-soft)); }

/* ------------------------------------------------------------ product cards */
.product-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.product-grid.shop { grid-template-columns: repeat(4, 1fr); gap: 18px; }

.product-card {
  position: relative; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Every uploaded product photo (all categories) is a 1000x1000 square. This
   box used to be a landscape rectangle (1/.72, 1/.92 in the shop grid),
   which -- since object-fit:contain never crops -- left a large empty
   margin on the left/right of every card, the dominant cause of products
   looking small on home/shop grids. Matched to the photos' own 1:1 ratio
   instead, which removes that margin with zero cropping risk; the only
   visible trade-off is that cards are now slightly taller/more square. */
.product-card .thumb { position: relative; display: block; background: #F8F8F9; aspect-ratio: 1; overflow: hidden; }
.product-grid.shop .product-card .thumb { aspect-ratio: 1; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.product-card .info { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.p-name {
  font-size: 12.5px; font-weight: 500; color: var(--ink-2); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-grid.shop .p-name { font-size: 14px; }
.price-row { display: flex; align-items: center; gap: 7px; margin-top: auto; }
.price { font-size: 14.5px; font-weight: 700; }
.price-old { font-size: 12px; color: var(--muted-2); text-decoration: line-through; }
.rating { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.rating svg { color: var(--green); }
.badge-off { position: absolute; top: 8px; left: 8px; z-index: 2; background: var(--orange); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 6px; }
.wish-btn {
  position: absolute; top: 8px; right: 8px; z-index: 3; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.94); display: grid; place-items: center; color: #A9AFB8;
  box-shadow: 0 1px 3px rgba(16,24,40,.1); transition: color .16s ease, transform .16s ease;
}
.wish-btn:hover { transform: scale(1.08); color: var(--red); }
.wish-btn.active { color: var(--red); }
.wish-btn.active svg { fill: currentColor; }
/* Same root cause as the PDP wishlist button (see .icon-square[data-wish]
   below): no :focus/:active rule existed here, so mobile/desktop browsers
   fell back to their own default blue tap-highlight/focus/active styling
   on this round white heart. Kill that default, keep the white circle (or
   red icon when wishlisted) on click/press, and preserve keyboard
   accessibility via :focus-visible using the site's existing orange ring. */
.wish-btn { -webkit-tap-highlight-color: transparent; }
.wish-btn:focus:not(:focus-visible),
.wish-btn:active { outline: none; background: rgba(255,255,255,.94); }
.wish-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* Product-card image link and PDP zoom +/- buttons: same missing-default-
   focus-style bug: no border/background of their own, but the browser's
   default blue outline/tap-highlight still shows through on tap/click. */
.thumb { -webkit-tap-highlight-color: transparent; }
.thumb:focus:not(:focus-visible) { outline: none; }
.thumb:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.zoom-controls button { -webkit-tap-highlight-color: transparent; }
.zoom-controls button:focus:not(:focus-visible),
.zoom-controls button:active { outline: none; background: none; }
.zoom-controls button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ------------------------------------------------------------------- footer */
.site-footer { background: #14181D; color: #C9CED6; margin-top: 46px; padding: 46px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 36px; }
.f-logo { height: 40px; margin-bottom: 14px; }
.site-footer p { font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; color: #98A0AB; }
.site-footer h5 { font-size: 14px; font-weight: 600; color: #fff; margin: 0 0 14px; }
.site-footer li { margin-bottom: 9px; }
.site-footer li a { font-size: 13.5px; color: #98A0AB; }
.site-footer li a:hover { color: var(--orange); }
.footer-bottom { margin-top: 34px; border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; color: #7C848F; flex-wrap: wrap; }
.social { display: flex; gap: 10px; }
.social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.07); display: grid; place-items: center; color: #C9CED6; transition: background .16s ease, color .16s ease; }
.social a svg { width: 18px; height: 18px; }
.social a:hover { background: var(--orange); color: #fff; }
.newsletter { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter input { flex: 1; min-width: 160px; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); padding: 0 14px; color: #fff; }
.newsletter input::placeholder { color: #7C848F; }

/* --------------------------------------------------------------- bottom nav */
.bottom-nav { display: none; }

/* -------------------------------------------------------------- page basics */
.page-head { padding: 26px 0 6px; }
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--orange); }
.page-head h1 { font-size: 26px; }
.page-head .count { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.empty-state { padding: 60px 20px; text-align: center; color: var(--muted); }
.empty-state h3 { font-size: 18px; color: var(--ink); margin-bottom: 8px; }

/* -------------------------------------------------------------- shop layout */
.shop-layout { display: grid; grid-template-columns: 248px 1fr; gap: 28px; align-items: start; padding-top: 18px; }
/* background was missing entirely here (and nowhere else set it either),
   so both the desktop sidebar and the mobile drawer below rendered fully
   transparent -- the underlying product grid showed straight through. */
.filters { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; position: sticky; top: calc(var(--header-h) + 16px); }
.filters h3 { font-size: 15px; margin-bottom: 14px; }
.filter-group { border-top: 1px solid var(--line); padding: 14px 0 4px; }
.filter-group:first-of-type { border-top: 0; padding-top: 0; }
.filter-group h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; }
.check { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.check input { accent-color: var(--orange); width: 16px; height: 16px; }
.range-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
input[type="range"] { width: 100%; accent-color: var(--orange); }
/* Root-cause fix: this row used to allow flex-wrap, so on a narrow phone
   viewport the Filter button and the WooCommerce sort <select> (which has
   no width limit of its own and sizes to its widest option, "Sort by
   average rating") didn't reliably fit on one line -- they wrapped or
   crowded together unpredictably depending on which option text was
   selected. Both controls now have fixed, non-wrapping roles instead. */
.shop-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: nowrap; }
.shop-toolbar select {
  height: 40px; border: 1px solid var(--line-2); border-radius: 9px; padding: 0 12px; background: #fff;
  width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Root-cause fix: the <select> is NOT a direct child of .shop-toolbar --
   WooCommerce wraps it in <form class="woocommerce-ordering">, and THAT
   form is the actual flex item next to #filter-toggle. The flex/height
   rules above were being applied to the select, which had no effect on the
   form's own box; with no explicit height, the form fell back to the
   browser's own default form-element box model, landing a few px off from
   the button's explicit 40px -- reading as "not on the same line" even
   though align-items: center was already set on the parent row. The
   remaining mobile-only appearance/overflow fix for this same pair lives
   in the ≤1024px block below, so desktop's dropdown keeps its native
   look untouched. */
.shop-toolbar form.woocommerce-ordering {
  /* The ACTUAL root cause of the alignment bug, confirmed via
     getComputedStyle() on the live page: WooCommerce's own core CSS gives
     .woocommerce-ordering a margin-bottom (~29px at this layout's font
     size) that was never reset. #filter-toggle has margin:0, so with
     align-items:center on .shop-toolbar centering each item's full MARGIN
     box, the row's cross-size was set by this form's taller (40px content
     + 29px margin) box, pushing the zero-margin button down inside it --
     both elements were already exactly 40px tall; only this phantom
     margin was misaligning them. */
  margin: 0;
  display: flex; align-items: center; height: 40px;
  flex: 1 1 auto; min-width: 0; max-width: 220px;
}
/* Root-cause fix: this row also allowed flex-wrap with no scroll fallback,
   so 6 category chips (All + 5 categories) wrapped onto a second line on
   narrow phones -- and since how many wrapped depended on which category
   name was active, the toolbar below it visibly jumped between page loads.
   A single non-wrapping, horizontally-scrollable row removes both the
   wrapping and the resulting layout shift; .container already caps this
   element's own width, so only the row's contents scroll, never the page. */
.chip-row {
  display: flex; gap: 8px; flex-wrap: nowrap; margin-top: 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip { border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 14px; font-size: 13px; background: #fff; flex: 0 0 auto; white-space: nowrap; }
.chip.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.filter-toggle { display: none; flex: 0 0 auto; height: 40px; }

/* Filters drawer chrome (close button, Apply button): hidden by default so
   desktop's existing static sidebar -- and its existing auto-submit-on-
   change behaviour -- is completely unchanged. Both are switched on only
   inside the ≤1024px drawer breakpoint below, alongside .filters.open. */
.filters-head { display: none; }
.apply-filters { display: none; }

/* ------------------------------------------------------------- product page */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; padding-top: 18px; align-items: start; }
.gallery-main { border: 1px solid var(--line); border-radius: 14px; background: #FAFAFB; aspect-ratio: 1; overflow: hidden; }
/* Main PDP image: every product photo across every category is uploaded
   square (1000x1000), matching this box's own 1:1 aspect-ratio exactly, so
   object-fit:contain never needs to letterbox or crop here -- the only
   thing shrinking the product below the box's full size was this element's
   own 22px padding (with the sitewide box-sizing:border-box reset, that ate
   44px off each axis before object-fit ever saw the image). Trimmed to a
   thin edge gutter so the product reads as filling the box on both Desktop
   and Mobile (same rule, no separate mobile override existed). Left as
   object-fit:contain, not cover, so nothing is ever stretched or cropped
   regardless of a future non-square upload. */
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.gallery-thumbs { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.gallery-thumbs button { width: 78px; height: 78px; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #FAFAFB; padding: 0; }
.gallery-thumbs button.active { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(250,130,7,.16); }
/* No :focus/:active rule existed here either, so selecting a thumbnail (tap
   or click) showed the browser's own default blue outline/highlight on top
   of (or instead of) the intended orange "selected" ring above. Remove the
   default, re-assert the correct border/background so it never flashes
   blue, and keep a visible keyboard focus ring (orange, not blue). */
.gallery-thumbs button { -webkit-tap-highlight-color: transparent; outline: none; }
.gallery-thumbs button:focus:not(:focus-visible),
.gallery-thumbs button:active { outline: none; background: #FAFAFB; border-color: var(--line-2); }
.gallery-thumbs button.active:focus:not(:focus-visible),
.gallery-thumbs button.active:active { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(250,130,7,.16); }
.gallery-thumbs button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.pdp h1 { font-size: 26px; line-height: 1.25; }
.pdp-meta { display: flex; align-items: center; gap: 14px; margin: 12px 0 18px; flex-wrap: wrap; }
.rating-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--green); color: #fff; padding: 3px 9px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.review-count { font-size: 13.5px; color: var(--muted); }
.stock { font-size: 13.5px; font-weight: 600; color: var(--green); }
.stock.out { color: var(--red); }
.pdp-price { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 6px; }
.pdp-price .now { font-size: 30px; font-weight: 700; }
.pdp-price .was { font-size: 16px; color: var(--muted-2); text-decoration: line-through; }
.pdp-price .off { font-size: 15px; font-weight: 600; color: var(--green); }
.tax-note { font-size: 12.5px; color: var(--muted); margin-bottom: 20px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; height: 46px; }
.qty button { width: 42px; height: 100%; font-size: 18px; color: var(--ink-2); }
.qty button:hover { background: var(--bg-soft); }
.qty input { width: 46px; height: 100%; text-align: center; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.pdp-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 18px 0 22px; }
.icon-square { width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: 10px; display: grid; place-items: center; color: var(--ink-2); position: static; background: #fff; box-shadow: none; }
.icon-square:hover { border-color: var(--ink-2); transform: none; }
.icon-square.active { color: var(--red); border-color: var(--red); }
.icon-square.active svg { fill: currentColor; }
/* PDP wishlist button (icon-square[data-wish]): mobile browsers have no
   custom :focus/:active rule for this button, so tapping it falls back to
   the browser's own default -- WebKit/Blink's blue tap-highlight overlay
   plus a default blue focus/active outline -- which visibly turns the whole
   46px square blue on tap. That default, not any wishlist plugin (this
   feature is fully custom, no third-party wishlist library is involved),
   is the actual source of the blue state. Kill the tap-highlight and the
   plain :focus/:active outline, but keep :focus-visible (keyboard Tab)
   working with the site's existing orange ring so keyboard accessibility
   is preserved -- only the mouse/touch default is removed. */
.icon-square[data-wish] { -webkit-tap-highlight-color: transparent; }
.icon-square[data-wish]:focus:not(:focus-visible),
.icon-square[data-wish]:active { outline: none; background: #fff; border-color: var(--line-2); }
.icon-square[data-wish].active:focus:not(:focus-visible),
.icon-square[data-wish].active:active { border-color: var(--red); }
.icon-square[data-wish]:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.pdp-usp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.pdp-usp > div { border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 12.5px; color: var(--ink-2); display: flex; gap: 9px; align-items: center; }
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs button { padding: 10px 0; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button.active { color: var(--orange); border-color: var(--orange); }
.tab-panel { display: none; font-size: 14px; color: var(--ink-2); line-height: 1.65; }
.tab-panel.active { display: block; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.spec-table td:first-child { color: var(--muted); width: 42%; }

/* -------------------------------------------------------------------- cart */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; padding-top: 18px; }
.cart-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cart-item { display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; padding: 16px; border-bottom: 1px solid var(--line); align-items: center; }
.cart-item:last-child { border-bottom: 0; }
.ci-img { width: 92px; height: 92px; border-radius: 10px; background: var(--bg-soft); overflow: hidden; }
.ci-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.ci-name { font-size: 15px; font-weight: 600; }
.ci-cat { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ci-price { margin-top: 8px; font-weight: 700; }
.ci-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.link-danger { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap; }
.link-danger:hover { color: var(--red); }
.summary { border: 1px solid var(--line); border-radius: 12px; padding: 20px; position: sticky; top: calc(var(--header-h) + 16px); }
.summary h3 { font-size: 16px; margin-bottom: 16px; }
.sum-row { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0; color: var(--ink-2); }
.sum-row.total { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px; font-size: 17px; font-weight: 700; color: var(--ink); }
.free-ship { font-size: 12.5px; color: var(--green); margin: 6px 0 12px; }

/* ---------------------------------------------------------------- checkout */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; padding-top: 18px; }
.form-card { border: 1px solid var(--line); border-radius: 12px; padding: 22px; margin-bottom: 20px; }
.form-card h3 { font-size: 16px; margin-bottom: 4px; }
.form-card .hint { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field input, .field select, .field textarea { height: 46px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 14px; background: #fff; }
.field textarea { height: auto; padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px rgba(250,130,7,.12); }
.field .err { font-size: 12px; color: var(--red); display: none; }
.field.invalid input, .field.invalid select { border-color: var(--red); }
.field.invalid .err { display: block; }
.pay-option { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-2); border-radius: 10px; padding: 14px; margin-bottom: 10px; cursor: pointer; }
.pay-option input { accent-color: var(--orange); width: 18px; height: 18px; }
.pay-option.selected { border-color: var(--orange); background: var(--orange-100); }
.po-name { font-size: 14px; font-weight: 600; }
.po-desc { font-size: 12.5px; color: var(--muted); }
.mini-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mini-item img { width: 52px; height: 52px; object-fit: contain; background: var(--bg-soft); border-radius: 8px; }
.m-name { font-size: 13.5px; font-weight: 500; }
.m-qty { font-size: 12px; color: var(--muted); }
.m-price { margin-left: auto; font-size: 13.5px; font-weight: 600; }
.mini-item > span { min-width: 0; }
.m-item-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin: 2px 0;
}
.m-view-order {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 10px; border-radius: 7px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  font-size: 11.5px; font-weight: 600; white-space: nowrap; flex: 0 0 auto;
  transition: background .18s ease, border-color .18s ease;
}
.m-view-order:hover { border-color: var(--ink-2); background: var(--bg-soft); }
.demo-note { background: var(--orange-100); border: 1px solid #F7D6AE; color: #8A5216; border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-bottom: 18px; }

/* ----------------------------------------------------------------- account */
.account-layout { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; padding-top: 18px; }
.account-nav { border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.account-nav button, .account-nav .account-nav-link { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.account-nav button:hover, .account-nav .account-nav-link:hover { background: var(--bg-soft); }
.account-nav button.active { background: var(--orange-100); color: var(--orange); }
.auth-card { max-width: 420px; margin: 30px auto 60px; border: 1px solid var(--line); border-radius: 14px; padding: 30px; box-shadow: var(--shadow-sm); }
.auth-card h1 { font-size: 22px; text-align: center; }
.auth-card .sub { text-align: center; color: var(--muted); font-size: 13.5px; margin: 8px 0 22px; }
.auth-switch { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 16px; }
.auth-switch button { color: var(--orange); font-weight: 600; }
.order-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.order-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; }
.o-id { font-weight: 600; font-size: 14px; }
.o-date { font-size: 12.5px; color: var(--muted); }
/* ROOT CAUSE of "Failed shows GREEN": this used to be the only .status-pill
   rule -- one hardcoded green background/colour applied to every order
   status with no conditional logic at all, since orders.php never attached
   a status-specific class. orders.php now attaches one of the four
   modifier classes below based on the order's real WooCommerce status
   (get_status()), so the base rule keeps only shape/sizing and carries no
   colour of its own -- nothing can silently render green again. */
.status-pill { border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; height: fit-content; }
.status-pill--success { background: #E7F6EC; color: var(--green); }
.status-pill--failed { background: #FDECEC; color: var(--red); }
.status-pill--pending { background: var(--orange-100); color: var(--orange); }
.status-pill--neutral { background: var(--bg-soft); color: var(--muted); }
.address-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 12px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.a-tag { display: inline-block; background: var(--bg-soft); border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.success-banner { background: #E7F6EC; border: 1px solid #B9E5C7; color: #16743A; border-radius: 12px; padding: 14px 16px; font-size: 14px; margin: 18px 0; display: flex; gap: 10px; align-items: center; }

/* ------------------------------------------------------------------- toast */
.toast-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; max-width: 320px; transition: opacity .3s ease, transform .3s ease; }
.t-ok { color: #6EE7A0; display: flex; }

/* -------------------------------------------------------------- info pages */
.info-page { padding: 26px 0 20px; max-width: 820px; }
.info-page h2 { font-size: 19px; margin: 26px 0 10px; }
.info-page p { color: var(--ink-2); line-height: 1.7; font-size: 14.5px; margin-bottom: 10px; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.value-grid > div { border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.value-grid h3 { font-size: 15px; margin-bottom: 6px; }
.value-grid p { font-size: 13.5px; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------- policy pages */
.policy-panel { max-width: 820px; }
.policy-panel h2 { font-size: 19px; margin: 26px 0 10px; }
.policy-panel h2:first-child { margin-top: 0; }
.policy-panel p { color: var(--ink-2); line-height: 1.7; font-size: 14.5px; margin-bottom: 10px; }
.policy-panel ul, .policy-panel ol { color: var(--ink-2); line-height: 1.7; font-size: 14.5px; margin: 0 0 14px 22px; }
.policy-panel li { margin-bottom: 6px; }
.policy-panel a { color: var(--orange); }
.policy-section + .policy-section { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line); }


/* ==========================================================================
   PRODUCT DETAIL PAGE
   ========================================================================== */
.pdp { align-items: start; }
.pdp-gallery { position: sticky; top: calc(var(--header-h) + 16px); }
.gallery-main { position: relative; cursor: zoom-in; }
.gallery-main img { transition: transform .25s ease; will-change: transform; }
.gallery-main.hover-zoom { cursor: crosshair; }
.gallery-main.zoomed { cursor: move; }
.zoom-controls {
  position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 2px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.zoom-controls button { width: 34px; height: 34px; font-size: 17px; color: var(--ink-2); }
.zoom-controls button:hover { background: var(--bg-soft); color: var(--orange); }
.zoom-controls span { font-size: 12px; color: var(--muted); min-width: 44px; text-align: center; }
.zoom-hint { position: absolute; left: 14px; bottom: 18px; font-size: 12px; color: var(--muted-2); }

.pdp-brand { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.stock.low { color: #C2620A; }
.pdp-price .off { background: #E7F6EC; padding: 2px 8px; border-radius: 6px; }

/* ------------------------------------------------------------ seller card */
.seller-card {
  display: flex; align-items: center; gap: 14px; border: 1px solid var(--line-2); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 20px; transition: border-color .16s ease, box-shadow .16s ease;
}
.seller-card:hover { border-color: var(--orange); box-shadow: 0 4px 14px rgba(250,130,7,.10); }
.shop-avatar {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto;
  color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .02em;
}
.shop-avatar.lg { width: 62px; height: 62px; border-radius: 16px; font-size: 20px; }
.shop-avatar.xl { width: 78px; height: 78px; border-radius: 18px; font-size: 25px; }
.seller-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seller-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); font-weight: 600; }
.seller-name { font-size: 15.5px; font-weight: 600; }
.seller-sub { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.seller-sub svg { color: var(--green); }
.seller-link { margin-left: auto; color: var(--orange); font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ------------------------------------------------------------ variations */
.variations { margin-bottom: 20px; }
.variation { padding: 14px 0 0; }
.variation.needs-choice .variation-label { color: var(--red); }
.variation-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.variation-label { font-size: 13.5px; font-weight: 600; }
.variation-label em { color: var(--red); font-style: normal; }
.variation-chosen { font-size: 13px; color: var(--muted); }
.variation-hint { font-size: 13px; color: var(--muted-2); }
.option-row { display: flex; flex-wrap: wrap; gap: 8px; }
.option-chip {
  min-width: 46px; height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 9px;
  font-size: 13.5px; font-weight: 500; background: #fff; color: var(--ink-2);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.option-chip:hover { border-color: var(--ink-2); }
.option-chip.selected { border-color: var(--orange); background: var(--orange-100); color: var(--orange); font-weight: 600; }
.variation-error { font-size: 13px; color: var(--red); font-weight: 500; margin-top: 12px; min-height: 18px; }

/* -------------------------------------------------------------- quantity */
.qty-block { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.qty-label { font-size: 13.5px; font-weight: 600; }
.qty input { font-weight: 600; font-size: 15px; color: var(--ink); background: #fff; }

/* ---------------------------------------------------------- shop section */
.shop-panel { border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.shop-panel-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.shop-panel-meta { min-width: 220px; flex: 1; }
.shop-panel-meta h3 { font-size: 19px; margin: 2px 0 6px; }
.shop-panel-meta h3 a:hover { color: var(--orange); }
.shop-facts { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shop-facts svg { color: var(--green); }
.shop-tagline { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; }
.shop-panel-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }

/* ------------------------------------------------------------ shop page */
.shop-banner {
  display: flex; align-items: center; gap: 20px; border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; margin: 6px 0 18px; background: linear-gradient(180deg,#FFF 0%,#FCFCFD 100%);
}
.shop-banner-meta h1 { font-size: 24px; margin-bottom: 8px; }
.shop-banner-meta .shop-facts { margin-bottom: 4px; }

/* --------------------------------------------------- mobile sticky buy bar */
.buy-bar { display: none; }

@media (max-width: 1024px) {
  .pdp-gallery { position: static; }
}

@media (max-width: 768px) {
  .zoom-controls, .zoom-hint { display: none; }
  .gallery-main { cursor: default; }
  .seller-card { padding: 10px 12px; gap: 10px; }
  .seller-link { font-size: 12.5px; }
  .shop-avatar { width: 40px; height: 40px; border-radius: 10px; font-size: 13px; }
  .shop-panel { padding: 16px; }
  .shop-panel-actions { margin-left: 0; width: 100%; }
  .shop-panel-actions .btn { flex: 1; }
  .shop-banner { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
  .shop-banner-meta h1 { font-size: 20px; }
  .option-chip { height: 38px; min-width: 42px; padding: 0 12px; font-size: 13px; }

  /* Mobile sticky purchase bar removed (2026-09-03): it duplicated the
     real [qty][Add to Cart][heart] row + full-width Buy Now that
     .pdp-actions now builds below, so .pdp-actions stays visible on
     mobile and is the only action area. No fixed element remains, so
     the body padding-bottom compensation is gone too. */
  .ci-options { font-size: 12px; }
}

.ci-options { font-size: 12.5px; color: var(--ink-2); background: var(--bg-soft); border-radius: 6px; padding: 3px 8px; display: inline-block; margin-top: 6px; }



/* image counter + delivery list (PDP) */
.img-counter {
  position: absolute; left: 14px; top: 14px; z-index: 3;
  background: rgba(31, 35, 40, .72); color: #fff; font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; letter-spacing: .02em;
}
.delivery-list { display: flex; flex-direction: column; gap: 14px; }
.delivery-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.delivery-list svg { flex: 0 0 auto; margin-top: 2px; color: var(--orange); }
.delivery-list strong { font-size: 14px; }
.gallery-thumbs { scrollbar-width: thin; }

/* the hidden attribute must win over display rules on .btn etc. */
[hidden] { display: none !important; }

/* profile: read-only vs edit state */
.field input[readonly] {
  background: var(--bg-soft);
  border-color: var(--line);
  color: var(--ink);
  cursor: default;
}
.field input[readonly]:focus { box-shadow: none; border-color: var(--line); }
.field.is-locked label { color: var(--muted); }
.form-card.editing .field input { background: #fff; border-color: var(--line-2); }


/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 4px; }
.contact-card {
  display: flex; align-items: center; gap: 14px; padding: 18px;
  border: 1px solid var(--line-2); border-radius: 12px; background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.contact-card:hover { border-color: var(--orange); box-shadow: 0 6px 18px rgba(250, 130, 7, .10); transform: translateY(-2px); }
.contact-icon {
  width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--orange-100); color: var(--orange);
}
.contact-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.contact-value { font-size: 15px; font-weight: 600; color: var(--ink); word-break: break-word; }
.contact-go { margin-left: auto; color: var(--muted-2); flex: 0 0 auto; }
.contact-card:hover .contact-go { color: var(--orange); }

@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; gap: 12px; }
  .contact-card { padding: 14px; gap: 12px; }
  .contact-icon { width: 42px; height: 42px; border-radius: 10px; }
  .contact-value { font-size: 14px; }
}

/* ==========================================================================
   CART DRAWER — slides in from the right on every page
   ========================================================================== */
body.no-scroll { overflow: hidden; }

.cart-backdrop {
  position: fixed; inset: 0; background: rgba(15, 18, 22, .45); z-index: 100;
  opacity: 0; pointer-events: none; transition: opacity .24s ease;
}
.cart-backdrop.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
  background: #fff; z-index: 105; display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -14px 0 40px rgba(16, 24, 40, .16);
}
.cart-drawer.open { transform: none; }

.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.cart-drawer-head h2 { font-size: 17px; display: flex; align-items: baseline; gap: 8px; }
.cart-drawer-count { font-size: 13px; font-weight: 500; color: var(--muted); }

.cart-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 20px; -webkit-overflow-scrolling: touch; }

.cd-item { display: grid; grid-template-columns: 78px 1fr auto; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cd-item:last-child { border-bottom: 0; }
.cd-img { width: 78px; height: 78px; border-radius: 10px; background: var(--bg-soft); overflow: hidden; }
.cd-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cd-info { min-width: 0; }
.cd-name { font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cd-name:hover { color: var(--orange); }
.cd-shop { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cd-opts { font-size: 12px; color: var(--ink-2); background: var(--bg-soft); border-radius: 6px; padding: 2px 7px; display: inline-block; margin-top: 5px; }
.cd-price { font-size: 13.5px; font-weight: 600; margin-top: 6px; }
.cd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; flex-wrap: nowrap; }
.qty.sm { height: 34px; }
.qty.sm button { width: 32px; font-size: 16px; }
.qty.sm .cd-qty {
  min-width: 38px; text-align: center; font-size: 13.5px; font-weight: 600;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  align-self: stretch; display: flex; align-items: center; justify-content: center;
}

/*
 * ROOT CAUSE (mobile cart drawer stepper / Remove misalignment): the
 * quantity stepper's buttons (.qty.sm button) and the drawer's Remove
 * button (.cd-row .link-danger) never contested Astra's global button
 * padding/border/box-shadow/line-height -- the same class of leak fixed
 * elsewhere on this site (see the .login-modal-close comment above).
 * That leftover Astra chrome pushed the +/- glyphs off-center inside
 * their boxes, clipped/shifted the plus button, and gave Remove a
 * different effective height and vertical baseline than the stepper
 * next to it. Resetting padding/border/box-shadow/line-height and
 * flex-centering every control here fixes both, scoped to .cd-row only
 * so the full-page desktop cart (.ci-right .link-danger, base .qty on
 * the PDP) is completely untouched.
 */
.cd-row .qty.sm,
.cd-row .link-danger { box-sizing: border-box; }
.cd-row .qty.sm button {
  padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important;
  line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important;
}
.cd-row .link-danger {
  height: 34px; padding: 0 !important; margin: 0 !important; border: 0 !important;
  background: none !important; box-shadow: none !important; line-height: 1 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
.cd-row .link-danger svg { display: block; flex: 0 0 auto; }

.cd-line-total { font-size: 14px; font-weight: 700; white-space: nowrap; }

.cart-drawer-foot { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 16px 20px calc(18px + env(safe-area-inset-bottom, 0px)); }
.cart-drawer-foot.is-empty { border-top: 0; padding: 0; }
.cd-sum { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; font-weight: 700; }
.cd-sum.small { font-size: 13.5px; font-weight: 500; color: var(--ink-2); margin-top: 6px; }
.cd-note { font-size: 12px; color: var(--muted); margin: 8px 0 14px; }

.cart-empty { text-align: center; padding: 56px 20px; }
.cart-empty-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--bg-soft); color: var(--muted-2); margin-bottom: 16px; }
.cart-empty-icon svg { width: 28px; height: 28px; }
.cart-empty h3 { font-size: 17px; margin-bottom: 8px; }
.cart-empty p { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }

.drawer-cart-btn { width: 100%; text-align: left; }

@media (max-width: 768px) {
  .cart-drawer { width: 100%; max-width: 100%; }
  .cart-drawer-head { padding: 14px 16px; }
  .cart-drawer-body { padding: 4px 16px; }
  .cart-drawer-foot { padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .cd-item { grid-template-columns: 68px 1fr auto; gap: 10px; }
  .cd-img { width: 68px; height: 68px; }
  /* the drawer sits above the bottom navigation and the PDP buy bar */
  .cart-drawer, .cart-backdrop { z-index: 110; }
}

@media (max-width: 480px) {
  .cd-item { grid-template-columns: 60px 1fr auto; gap: 8px; }
  .cd-img { width: 60px; height: 60px; }
  .cd-row { gap: 8px; }
  .qty.sm { height: 32px; }
  .qty.sm button { width: 27px; font-size: 15px; }
  .qty.sm .cd-qty { min-width: 28px; font-size: 12.5px; }
  .link-danger { font-size: 12px; gap: 4px; }
  .link-danger svg { width: 14px; height: 14px; }
  .cd-row .link-danger { height: 32px; }
}

/* ==========================================================================
   LOGIN MODAL — matches "Login Desktop/Mobile Reference Image". Real
   WooCommerce login/register/lost-password + real Nextend Google button,
   loaded and submitted via AJAX (frontend.js initLoginModal()) so a guest
   never leaves the page they were on. Desktop: two-column card (decorative
   illustration | white login card) inside a cream outer shell. Mobile:
   single-column bottom sheet, illustration moved below the form.
   ========================================================================== */
.login-backdrop {
  position: fixed; inset: 0; background: rgba(20, 16, 12, .55); z-index: 120;
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.login-backdrop.open { opacity: 1; pointer-events: auto; }

.login-modal {
  position: fixed; inset: 0; z-index: 121; display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto; opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease; transform: scale(.98);
}
.login-modal.open { opacity: 1; pointer-events: auto; transform: none; }

.login-modal-inner {
  position: relative; width: 100%; max-width: 860px; margin: auto;
  background: #FAF5EE; border-radius: 24px; padding: 30px 36px 36px;
  box-shadow: 0 30px 80px rgba(20, 16, 12, .25);
}

.login-modal-head { display: flex; align-items: flex-start; margin-bottom: 18px; }
.login-modal-brand { display: flex; flex-direction: column; gap: 2px; }
.login-modal-logo { height: 32px; width: auto; object-fit: contain; }
.login-modal-tagline { font-size: 12px; color: var(--muted); letter-spacing: .02em; }

/* --------------------------------------------------------------------
   ROOT CAUSE (close button size/shape/off-center X), same class of bug
   as every other .icon-btn on this site (see .cart-drawer-head .icon-btn,
   .drawer-head .icon-btn, .mobile-bar-inner .icon-btn above): Astra's
   global `button,.ast-button,.button,input[type=submit]{padding:...;
   border:...;box-shadow:...}` rule applies to this <button> too, and
   .login-modal-close never contested padding/border/box-shadow/
   line-height/box-sizing, so Astra's own values were still winning
   underneath the 38px box -- inflating its effective content size and
   nudging the X off-center. Also repositioned to sit at a small fixed
   offset from the modal's own corner (absolute, not a flex sibling of
   the logo) and given the reference's flat neutral-gray fill instead of
   a white-with-border pill, matching Login Desktop/Mobile Reference
   Image exactly.
   -------------------------------------------------------------------- */
.login-modal-close {
  position: absolute; top: 22px; right: 18px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 !important; line-height: 1 !important; box-sizing: border-box !important;
  background: var(--bg-soft, #F1EFEA) !important; border: 0 !important; box-shadow: none !important;
  color: var(--ink, #1F2328) !important; flex: 0 0 auto;
}
.login-modal-close:hover,
.login-modal-close:focus {
  background: var(--line-2, #E3E6EA) !important;
  color: var(--ink, #1F2328) !important;
}
.login-modal-close:focus-visible {
  outline: 2px solid var(--orange, #FA8207) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}
.login-modal-close svg {
  display: block !important; width: 17px !important; height: 17px !important;
  flex-shrink: 0; color: inherit !important; fill: none !important; stroke: currentColor !important;
}

.login-modal-body { display: grid; grid-template-columns: .92fr 1.08fr; gap: 28px; align-items: center; min-height: 60px; }
.login-modal-body > p.hint { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 40px 0; }

.login-illustration { order: 1; display: flex; align-items: flex-end; justify-content: center; padding: 0 8px; align-self: stretch; }
.login-illustration img { width: 100%; max-width: 300px; height: auto; display: block; }

.login-card {
  order: 2; background: #fff; border-radius: 20px; padding: 36px 38px;
  box-shadow: 0 16px 46px rgba(20, 16, 12, .08); max-height: calc(100vh - 150px); overflow-y: auto;
}
.login-card h2 { font-size: 24px; font-weight: 700; margin-bottom: 6px; line-height: 1.25; }
.login-card .login-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 24px; }

/* real WooCommerce/WordPress form fields, restyled to match the reference */
.login-card form { display: flex; flex-direction: column; }
.login-card form > p { position: relative; margin: 0 0 16px; }
.login-card .clear { display: none; }
.login-card form p label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.login-card .woocommerce-form-login__rememberme { display: none; }

.login-card input.input-text,
.login-card input[type="email"],
.login-card input[type="text"],
.login-card input[type="password"] {
  width: 100%; height: 54px; border: 1px solid var(--line-2); border-radius: 12px;
  padding: 0 16px 0 46px; font-size: 14.5px; background: #fff no-repeat 16px center;
}
.login-card input:focus { outline: none; border-color: var(--orange); }
.login-card #username, .login-card #reg_email, .login-card #user_login {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238A93A3' stroke-width='1.8'%3E%3Cpath d='M3 7l9 6 9-6M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}
.login-card #password, .login-card #reg_password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238A93A3' stroke-width='1.8'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
.login-card .pw-toggle-wrap input { padding-right: 66px; }

.login-card form.login .form-row-first { order: 1; }
.login-card form.login .form-row-last { order: 2; }
.login-card form.login .lost_password { order: 3; text-align: right; margin: -6px 0 20px; font-size: 13px; }
.login-card form.login .lost_password a { color: var(--ink-2); font-weight: 500; }
.login-card form.login .lost_password a:hover { color: var(--orange); }
.login-card form.login > .form-row:not(.form-row-first):not(.form-row-last) { order: 4; margin-bottom: 0; }

.login-card form button[type="submit"] {
  width: 100%; height: 54px; border-radius: 12px; background: var(--orange); color: #fff; border: 0;
  font-size: 15.5px; font-weight: 700; cursor: pointer; transition: background .15s ease;
}
.login-card form button[type="submit"]:hover { background: var(--orange-600); }
.login-card form button[type="submit"]:disabled { opacity: .6; cursor: not-allowed; }

.login-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--muted); font-size: 12.5px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.login-google .nsl-container, .login-google .nsl-container-buttons { width: 100%; }
.login-google a { display: block; width: 100%; text-decoration: none; }
.login-google .nsl-button {
  width: 100% !important; height: 54px !important; border: 1px solid var(--line-2) !important; border-radius: 12px !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px;
  background: #fff !important; box-shadow: none !important;
}
.login-google .nsl-button:hover { border-color: var(--ink-2) !important; }
.login-google .nsl-button-svg-container { width: 20px; height: 20px; }
.login-google .nsl-button-label-container { font-size: 14.5px; font-weight: 600; color: var(--ink); }

.login-switch { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 22px; }
.login-switch a { color: var(--orange); font-weight: 600; }

.login-modal-message { border-radius: 8px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px; line-height: 1.5; }
.login-modal-message.is-error { background: #FDECEC; color: #B3261E; border: 1px solid #F6C6C6; }
.login-modal-message.is-success { background: #E7F6EC; color: #1E7B3C; border: 1px solid #BEE6CC; }

.pw-toggle-wrap { position: relative; display: block; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--orange); font-size: 12.5px; font-weight: 600;
  cursor: pointer; padding: 6px 8px;
}

/* mobile: bottom sheet, single column, illustration below the card, per
   Login Mobile Reference Image -- logo/heading centered, close button
   floats top-right independently of the centered brand block. */
@media (max-width: 768px) {
  .login-modal { padding: 0; align-items: flex-end; }
  .login-modal.open .login-modal-inner { animation: lksLoginSheetIn .24s ease; }
  @keyframes lksLoginSheetIn { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .login-modal-inner {
    max-width: 100%; width: 100%; border-radius: 22px 22px 0 0; max-height: 92vh; overflow-y: auto;
    padding: 22px 18px 26px;
  }
  .login-modal-head { justify-content: center; margin-bottom: 10px; }
  .login-modal-brand { align-items: center; text-align: center; }
  .login-modal-close { top: 14px; right: 14px; width: 38px; height: 38px; }
  .login-modal-close svg { width: 15px !important; height: 15px !important; }
  .login-modal-body { display: block; }
  .login-card { padding: 0; box-shadow: none; border-radius: 0; max-height: none; overflow: visible; }
  .login-card h2, .login-card .login-sub { text-align: center; }
  .login-illustration { margin-top: 8px; padding: 0; }
  .login-illustration img { max-width: 240px; }
}
@media (max-width: 430px) {
  .login-modal-inner { padding: 20px 14px 22px; }
  .login-card h2 { font-size: 21px; }
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1520px) {
  /* keep the trust badges inside the empty part of the hero artwork */
  .hero-trust { gap: 14px; margin-top: 18px; }
  .hero-trust .t-ico { width: 28px; height: 28px; }
  .hero-trust b { font-size: 11px; }
  .hero-trust small { font-size: 10px; }
}
@media (max-width: 1240px) {
  .hero-trust { display: none; }
}
@media (max-width: 1400px) {
  .hero-wrap { padding: 0 32px; }
  .main-nav { margin-left: 34px; gap: 30px; }
  .header-search { margin-left: 30px; }
  .header-actions { margin-left: 20px; }
}
@media (max-width: 1200px) {
  .main-nav { gap: 22px; margin-left: 22px; }
  .header-search { margin-left: 18px; }
  .header-actions { margin-left: 14px; }
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .product-grid.shop { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (max-width: 1024px) {
  :root { --header-h: 74px; }
  .hero-wrap { padding: 0 24px; }
  .hero { aspect-ratio: 1573 / 470; }
  .brand img { height: 42px; }
  .main-nav { display: none; }
  .header-search { margin-left: 24px; }
  .category-row .category-card { flex-basis: calc((100% - 2 * 18px) / 3); }
  .pdp { grid-template-columns: 1fr; gap: 28px; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .shop-layout { grid-template-columns: 1fr; }
  .filters { position: static; display: none; }
  /* Upgraded from a plain inline block (which just pushed the rest of the
     page down when opened, with no way to close it again except an instant
     auto-submit) to a real bottom-sheet: fixed, capped height, its own
     scroll, and closeable via #close-filters without submitting anything.
     background/overflow:hidden explicit here too -- .filters had no
     background of its own anywhere, so this panel rendered fully
     transparent, letting the product grid underneath show straight through
     it; clipping (not scrolling) at this level keeps the rounded corners
     clean now that .filters-body is the one real scroll container inside. */
  .filters.open {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0;
    max-height: 82vh; overflow: hidden;
    background: #fff; border: 0; border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(16, 24, 40, .18);
    z-index: 200; padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  /* The <form> is .filters.open's only child; making it a matching flex
     column lets .filters-head/-body/-footer below split fixed-header,
     scrollable-middle, fixed-footer inside one panel. */
  .filters.open form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  /* Small clear gap below the category chip row above, mobile only --
     .shop-toolbar is the single flex parent of both #filter-toggle and
     the Sort form, so this moves them down together as one unit;
     their own alignment/height/gap to each other is untouched. */
  .shop-toolbar { margin-top: 12px; }
  .filter-toggle { display: inline-flex; }
  .filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex: 0 0 auto; }
  /* Root cause of the off-center "x": this button had no flex centering at
     all, so the &times; glyph fell back to the browser's own default
     button text layout -- and that glyph's own font-metric box (ascent/
     descent) isn't symmetric around the line, so default centering reads
     as visibly off. display:flex + align/justify-content:center centers
     the glyph's actual rendered box instead of relying on line-height. */
  .close-filters {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border-radius: 999px; border: 1px solid var(--line-2);
    background: #fff; font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer;
  }
  /* Root cause of the remaining Filter/Sort misalignment: a native
     <select>'s own rendering (most inconsistent on mobile Safari) can
     ignore an explicit CSS height and draw a few px taller than the
     button beside it, even though the box model says 40px. Turning off
     native appearance puts the box fully under CSS control instead; the
     chevron is redrawn here so the control doesn't lose its dropdown
     affordance. Deliberately scoped to this mobile breakpoint only --
     desktop's dropdown (where there's no Filter button to align against
     anyway) keeps its native look, per style.css's matching ≤1024px
     override of its own !important padding for this same selector. */
  .shop-toolbar select {
    padding: 0 28px 0 12px;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23737A85' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
  }
  /* Deliberate backstop: even after the appearance fix above, this
     guarantees the visible box can never exceed the Filter button's
     40px again, whatever a given mobile browser does internally. */
  .shop-toolbar form.woocommerce-ordering { overflow: hidden; }
  /* Scrolls internally so Apply/Clear (in .filters-footer, outside this
     wrapper) always stay on screen without needing to scroll the whole
     sheet to find them -- previously the whole panel scrolled as one
     block, so on a tall filter list Apply could land below the fold and
     read as "not working" when it was really just unreachable. */
  .filters-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
  .filters-footer { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
  .apply-filters { display: flex; }
  /* Locks background scroll while the drawer is open -- it's fixed but
     caps at 82vh, so without this the page behind the remaining strip
     could still be scrolled. Toggled by initShopFilters() in frontend.js. */
  body.filters-open-lock { overflow: hidden; }
  .account-layout { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }

@media (max-width: 768px) {
  :root { --header-h: 60px; }
  body { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
  .container { padding: 0 16px; }

  .site-header { display: none; }
  .mobile-header { display: block; position: sticky; top: 0; z-index: 60; background: #fff; }
  .mobile-bar-inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 60px; }
  .mobile-bar-inner .brand { position: absolute; left: 50%; transform: translateX(-50%); }
  .mobile-bar-inner .brand img { height: 30px; }
  .mobile-search { padding: 0 16px 12px; position: relative; }
  .mobile-search input {
    width: 100%; height: 46px; border: 1px solid var(--line-2); border-radius: 14px;
    padding: 0 16px 0 46px; font-size: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04);
  }
  .mobile-search input:focus { border-color: var(--orange); outline: none; }
  .mobile-search .icon-search { left: 32px; top: 23px; }
  .mobile-search .suggest { left: 16px; right: 16px; top: calc(100% - 4px); }

  .hero-wrap { padding: 0 16px; }
  .hero { aspect-ratio: 867 / 458; border-radius: 12px; }
  .hero-arrow { display: none; }
  .hero-trust { display: none; }
  .hero-slide.baked-mobile .hero-copy { display: none; }
  .hero-copy { left: 6%; max-width: 58%; }
  .hero-dots { bottom: 10px; gap: 7px; }
  .hero-dots button { width: 7px; height: 7px; }
  .hero-slide.composed .hero-art { height: 76%; right: 3%; }

  .section { padding: 22px 0 0; }
  .section-head h2 { font-size: 17px; }
  .section-link { font-size: 12.5px; }

  .category-row { gap: 9px; padding-bottom: 10px; }
  .category-row .category-card { flex-basis: calc((100% - 4 * 9px) / 5); }
  .category-card { flex-direction: column; height: auto; background: none !important; padding: 0; gap: 6px; text-align: center; align-items: stretch; }
  .category-card:hover { transform: none; box-shadow: none; }
  .category-card .c-media { width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; height: auto; }
  .category-card .c-media img { padding: 6px; mix-blend-mode: normal; }
  .category-card .c-name { font-size: 11.5px; font-weight: 600; word-break: break-word; }
  .category-card .c-link { display: none; }
  .category-card .c-media { background: var(--cat-bg, var(--bg-soft)); }

  .product-grid, .product-grid.shop { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .product-card .thumb, .product-grid.shop .product-card .thumb { aspect-ratio: 1; }
  .p-name, .product-grid.shop .p-name { font-size: 11.5px; }
  .price { font-size: 12.5px; }
  .price-old { font-size: 10.5px; }
  .rating { font-size: 10.5px; margin-left: auto; gap: 2px; }
  .rating svg { width: 11px; height: 11px; }
  .price-row { flex-wrap: nowrap; gap: 4px; min-width: 0; }
  .price-row .price-old { overflow: hidden; }
  .badge-off { font-size: 9.5px; padding: 3px 6px; }
  .wish-btn { width: 26px; height: 26px; }

  .page-head h1 { font-size: 21px; }
  .pdp h1 { font-size: 20px; }
  .pdp-price .now { font-size: 24px; }
  .gallery-thumbs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .gallery-thumbs button { width: 62px; height: 62px; flex: 0 0 auto; }
  .img-counter { left: 10px; top: 10px; font-size: 11px; }
  .pdp-usp { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 76px 1fr; }
  .ci-img { width: 76px; height: 76px; }
  .ci-right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .field-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .site-footer { margin-top: 30px; padding-top: 34px; }
  .toast-wrap { right: 12px; left: 12px; bottom: calc(var(--bottom-nav-h) + 12px); }
  .toast { max-width: none; }

  .bottom-nav {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #fff;
    border-top: 1px solid var(--line); box-shadow: 0 -2px 14px rgba(16,24,40,.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottom-nav ul { display: grid; grid-template-columns: repeat(4, 1fr); height: var(--bottom-nav-h); }
  .bottom-nav button { width: 100%; font-family: inherit; }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--muted); font-weight: 500; height: 100%; position: relative; }
  .bottom-nav a.active, .bottom-nav button.active { color: var(--orange); }
  .bottom-nav a.active::after, .bottom-nav button.active::after { content: ''; position: absolute; bottom: 5px; width: 22px; height: 3px; border-radius: 2px; background: var(--orange); }
  .nav-count {
    position: absolute; top: 7px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--orange); color: #fff; border-radius: 9px; font-size: 10px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

@media (max-width: 430px) {
  .category-row { gap: 7px; }
  .category-row .category-card { flex-basis: calc((100% - 4 * 7px) / 5); }
  .category-card .c-name { font-size: 10.5px; line-height: 1.2; }
  .product-grid, .product-grid.shop { gap: 8px; }
  .product-card .info { padding: 7px 8px 9px; }
}
@media (max-width: 360px) {
  .container { padding: 0 12px; }
  .hero-wrap { padding: 0 12px; }
  .price { font-size: 12px; }
  .p-name { font-size: 11px; }
  .bottom-nav a { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   MOBILE CHECKOUT — two-step wizard (Step 1: Address, Step 2: Order Review
   + Coupon + Payment), scoped entirely to body.woocommerce-checkout so
   nothing outside checkout is touched.

   Why a pure CSS/JS wizard instead of a template rewrite: the real
   [woocommerce_checkout] shortcode output (billing fields, coupon form,
   order review table, payment box, #place_order) is left completely
   intact and still submits through WooCommerce's native checkout/AJAX --
   frontend.js only toggles which parts are visible via the
   data-lks-checkout-step attribute it sets on the .woocommerce wrapper,
   and adds .lks-checkout-step1 / .lks-checkout-step2 marker classes to
   the real WC-rendered sections. If JS fails to run for any reason,
   neither the attribute nor the marker classes ever get added, so none
   of the hide rules below match -- checkout falls back to the full
   single-page WooCommerce form, fully functional, never a stuck screen.

   The coupon form (a separate <form class="checkout_coupon">) is a DOM
   sibling of <form class="checkout woocommerce-checkout">, not a
   descendant -- HTML forms cannot nest, so it cannot be relocated to sit
   physically between the order-review table and the payment box without
   breaking its own submit. It is shown in Step 2 positioned directly
   above the main order/payment form instead: still "Step 2 only" and
   still "before payment", just not interleaved inside the order table.
   ========================================================================== */
body.woocommerce-checkout .woocommerce[data-lks-checkout-step="address"] .lks-checkout-step2 { display: none !important; }
body.woocommerce-checkout .woocommerce[data-lks-checkout-step="summary"] .lks-checkout-step1 { display: none !important; }

body.woocommerce-checkout #lks-checkout-continue { display: none; margin-top: 18px; }
body.woocommerce-checkout .woocommerce[data-lks-checkout-step="address"] #lks-checkout-continue { display: flex; }

body.woocommerce-checkout .lks-checkout-edit-address {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600;
  color: var(--ink, #1F2328); margin: 0 0 10px; text-decoration: none;
}
body.woocommerce-checkout .lks-checkout-edit-address:hover { color: var(--orange); }

/* -------------------------------------------------- address-type row fix
   Root cause: WooCommerce renders billing_lks_address_type as flat
   sibling <input type="radio"><label> pairs inside one
   .woocommerce-input-wrapper span (not each radio nested inside its own
   label), so with no layout rule of its own it fell back to the theme's
   general block-ish field styling and stacked vertically with the radio
   circle orphaned above its text. Turning that wrapper into a row and
   sizing/coloring the inputs directly fixes both without touching markup. */
body.woocommerce-checkout #billing_lks_address_type_field .woocommerce-input-wrapper {
  display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px;
}
body.woocommerce-checkout #billing_lks_address_type_field input.input-radio {
  width: 18px; height: 18px; margin: 0 8px 0 0; padding: 0; flex: 0 0 auto;
  accent-color: var(--orange); box-shadow: none !important; border-color: var(--line-2, #E3E6EA);
}
body.woocommerce-checkout #billing_lks_address_type_field label.radio {
  display: inline-flex; align-items: center; margin: 0 28px 0 0; width: auto;
  font-size: 14px; font-weight: 500; color: var(--ink, #1F2328);
}
body.woocommerce-checkout #billing_lks_address_type_field label.radio .optional { display: none; }
body.woocommerce-checkout #billing_lks_address_type_field > label:first-child { display: block; margin-bottom: 8px; font-weight: 600; }

/* -------------------------------------------------- remove Astra/WC blue
   Scoped to the checkout form only -- no global WooCommerce/WP-admin
   recolor. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  border-color: var(--orange) !important; background: #FFF6EC;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { color: var(--orange) !important; }
body.woocommerce-checkout .showcoupon { color: var(--orange) !important; font-weight: 600; text-decoration: underline; }
body.woocommerce-checkout #woocommerce-checkout-form-coupon {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 22px; padding: 0; border: 0;
}
body.woocommerce-checkout #woocommerce-checkout-form-coupon .form-row { margin: 0; flex: 1 1 200px; }
body.woocommerce-checkout #woocommerce-checkout-form-coupon #coupon_code {
  width: 100%; height: 46px; border: 1px solid var(--line-2, #E3E6EA); border-radius: 10px;
  padding: 0 14px; font-size: 14px; box-sizing: border-box;
}
body.woocommerce-checkout #woocommerce-checkout-form-coupon #coupon_code:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 2px rgba(250,130,7,.16);
}
body.woocommerce-checkout #woocommerce-checkout-form-coupon .form-row-last { flex: 0 0 auto; }
body.woocommerce-checkout #woocommerce-checkout-form-coupon button[name="apply_coupon"] {
  height: 46px; padding: 0 22px !important; margin: 0; border: 0 !important; border-radius: 10px;
  background: var(--orange) !important; color: #fff !important; font-weight: 600; font-size: 14px;
  box-shadow: none !important; line-height: 1;
}
body.woocommerce-checkout #woocommerce-checkout-form-coupon button[name="apply_coupon"]:hover { background: var(--orange-600) !important; }

body.woocommerce-checkout input[type="radio"] { accent-color: var(--orange); }
body.woocommerce-checkout .woocommerce-billing-fields input.input-text:focus,
body.woocommerce-checkout .woocommerce-billing-fields select:focus,
body.woocommerce-checkout .woocommerce-additional-fields textarea:focus {
  outline: none; border-color: var(--orange) !important; box-shadow: 0 0 0 2px rgba(250,130,7,.16) !important;
}
body.woocommerce-checkout .wc_payment_method label { color: var(--ink, #1F2328); }
body.woocommerce-checkout .place-order,
body.woocommerce-checkout #payment {
  background: transparent; border: 0; box-shadow: none;
}
body.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--line, #EDEBE6); }
body.woocommerce-checkout #payment div.payment_box {
  background: #FFF6EC; border: 1px solid var(--line-2, #E3E6EA); box-shadow: none;
}
body.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #FFF6EC; }

body.woocommerce-checkout #place_order {
  display: flex !important; align-items: center; justify-content: center;
  width: 100%; height: 50px; margin: 18px 0 0; padding: 0 26px !important;
  background: var(--orange) !important; color: #fff !important; border: 0 !important;
  border-radius: 12px; font-size: 15px; font-weight: 700; box-shadow: none !important; line-height: 1;
}
body.woocommerce-checkout #place_order:hover { background: var(--orange-600) !important; }
body.woocommerce-checkout #place_order[disabled] { opacity: .55; }

/* Defensive: never let a floating scroll-to-top control sit over Continue
   or Place Order on checkout. */
body.woocommerce-checkout #ast-scroll-top { display: none !important; }

@media (max-width: 768px) {
  body.woocommerce-checkout .lks-checkout-panel,
  body.woocommerce-checkout .policy-panel { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
  body.woocommerce-checkout .woocommerce-billing-fields .form-row,
  body.woocommerce-checkout .woocommerce-additional-fields .form-row { width: 100%; }
  body.woocommerce-checkout #woocommerce-checkout-form-coupon .form-row { flex-basis: 100%; }
  body.woocommerce-checkout #woocommerce-checkout-form-coupon .form-row-last,
  body.woocommerce-checkout #woocommerce-checkout-form-coupon button[name="apply_coupon"] { width: 100%; }
  /* the global mobile `body { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom,0px)) }`
     rule already keeps in-flow content (Continue / Place Order included)
     clear of the fixed bottom nav; this just adds a little breathing room
     under the last control on this page specifically. */
  body.woocommerce-checkout .lks-checkout-panel,
  body.woocommerce-checkout .policy-panel { padding-bottom: 24px; }
}

/* ==========================================================================
   MOBILE CHECKOUT STEP 2 — Order Summary rebuild, coupon reposition,
   terms/newsletter checkbox hiding. Scoped to body.woocommerce-checkout.

   Root cause of the "collided" order summary: WooCommerce's own review-order
   table (a real <table>/<td>) wraps each cart line, and this theme's custom
   item markup (.lks-checkout-item, added by a pre-existing legacy filter
   that is NOT touched here) had zero CSS of its own -- every piece
   (image, name, model text, "Qty: N", old/sale price, discount badge) was
   plain unstyled inline content, so it all ran together on one line. This
   block styles the existing real markup; no PHP/template changes.
   ========================================================================== */

/* Turn the classic WC review-order <table> into stacked flex rows so the
   image+copy block and the line price sit cleanly on one row per item,
   instead of squeezing into a two-column table on a narrow screen. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead { display: none; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody { display: block; width: 100%; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--line, #EDEBE6); width: 100%;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item:first-child { padding-top: 0; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table td { display: block; padding: 0; border: 0; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name { flex: 1 1 auto; min-width: 0; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total {
  flex: 0 0 auto; font-weight: 700; font-size: 14px; color: var(--ink, #1F2328);
  white-space: nowrap; padding-top: 3px;
}
/* WC appends its own "× N" quantity marker right after our custom item card
   -- that duplicates the "Qty: N" line already inside the card. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name > strong.product-quantity { display: none; }

/* -------------------------------------------------- the item card itself */
body.woocommerce-checkout .lks-checkout-item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
body.woocommerce-checkout .lks-checkout-item-image {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 8px; object-fit: contain;
  background: var(--bg-soft, #F1EFEA); border: 1px solid var(--line, #EDEBE6); padding: 4px; box-sizing: border-box;
}
body.woocommerce-checkout .lks-checkout-item-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
body.woocommerce-checkout .lks-checkout-item-copy > strong {
  font-size: 13.5px; font-weight: 600; color: var(--ink, #1F2328); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* the muted "compatible with / model" line -- only the plain <span> that
   isn't the qty or price span */
body.woocommerce-checkout .lks-checkout-item-copy > span:not(.lks-checkout-item-meta):not(.lks-checkout-item-prices) {
  font-size: 11.5px; color: var(--muted, #8A8578); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
body.woocommerce-checkout .lks-checkout-item-meta { font-size: 12px; color: var(--muted, #8A8578); }
/* Per-unit old/sale/discount cluster duplicated the real line price shown
   in td.product-total and read as broken concatenated text on mobile --
   the single real line total to the right of the row is the price of
   record; per-item savings are already summarised once in the Savings row
   below, so this cluster is hidden rather than fought into three columns. */
body.woocommerce-checkout .lks-checkout-item-prices { display: none; }

/* -------------------------------------------------- totals footer */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot { display: block; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr {
  display: flex; align-items: baseline; justify-content: space-between; padding: 8px 0;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
  display: block; padding: 0; border: 0; font-size: 13.5px; color: var(--ink-2, #4A4740); font-weight: 500;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
  font-size: 16px; font-weight: 700; color: var(--ink, #1F2328); padding-top: 10px; border-top: 1px solid var(--line, #EDEBE6); margin-top: 4px;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .lks-savings-row th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .lks-savings-row td {
  color: var(--green, #1E8E5A); font-weight: 600; font-size: 13px;
}

/* -------------------------------------------------- coupon, relocated by
   JS to sit just above the payment box / Place Order button. Original
   WooCommerce toggle+form (top of page, blue "info" styling) is hidden;
   this is a fresh, theme-matched control wired to WooCommerce's own
   wc-ajax=apply_coupon endpoint, so the coupon itself is validated and
   applied by WooCommerce exactly as the default UI would. */
body.woocommerce-checkout .lks-checkout-coupon { margin: 4px 0 20px; }
body.woocommerce-checkout .lks-coupon-toggle {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0;
  color: var(--orange); font-size: 13.5px; font-weight: 600; text-decoration: underline;
}
body.woocommerce-checkout .lks-coupon-row { display: flex; gap: 10px; margin-top: 10px; }
body.woocommerce-checkout .lks-coupon-row[hidden] { display: none; }
body.woocommerce-checkout .lks-coupon-input {
  flex: 1 1 auto; min-width: 0; height: 46px; border: 1px solid var(--line-2, #E3E6EA); border-radius: 10px;
  padding: 0 14px; font-size: 14px; box-sizing: border-box;
}
body.woocommerce-checkout .lks-coupon-input:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 2px rgba(250,130,7,.16);
}
body.woocommerce-checkout .lks-coupon-apply {
  flex: 0 0 auto; height: 46px; padding: 0 20px; border: 0; border-radius: 10px;
  background: var(--orange); color: #fff; font-weight: 600; font-size: 14px;
}
body.woocommerce-checkout .lks-coupon-apply:hover { background: var(--orange-600); }
body.woocommerce-checkout .lks-coupon-apply[disabled] { opacity: .6; }
body.woocommerce-checkout .lks-coupon-msg { margin: 8px 0 0; font-size: 12.5px; color: var(--green, #1E8E5A); }
body.woocommerce-checkout .lks-coupon-msg.is-error { color: var(--red, #D14343); }
/* the original coupon UI (kept in the DOM for WooCommerce compatibility,
   only visually hidden) */
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout #woocommerce-checkout-form-coupon { display: none !important; }

/* -------------------------------------------------- terms / newsletter
   The required "terms" checkbox cannot simply be deleted (WooCommerce
   rejects the order without it); it's accepted on the customer's behalf
   in PHP (woocommerce_checkout_posted_data filter) and replaced here with
   a small passive line above Place Order that still links to the real
   Terms & Conditions page, so nothing is asserted without disclosure. */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { display: none !important; }
body.woocommerce-checkout .lks-checkout-terms-note {
  font-size: 11.5px; color: var(--muted, #8A8578); text-align: center; margin: 10px 0 0;
}
body.woocommerce-checkout .lks-checkout-terms-note a { color: var(--ink-2, #4A4740); text-decoration: underline; }
/* Newsletter opt-in (added by the Hostinger Reach plugin) -- optional,
   never required by checkout validation, safe to hide outright. */
body.woocommerce-checkout p:has(> label > input#hostinger_reach_optin) { display: none !important; }

@media (max-width: 768px) {
  body.woocommerce-checkout .lks-checkout-item-image { width: 40px; height: 40px; }
  body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total { font-size: 13px; }
  body.woocommerce-checkout .lks-coupon-row { flex-wrap: wrap; }
  body.woocommerce-checkout .lks-coupon-input { flex-basis: 100%; }
  body.woocommerce-checkout .lks-coupon-apply { width: 100%; }
}

/* ==========================================================================
   MOBILE CHECKOUT — Step 2 spacing + Razorpay payment-section cleanup.
   Scoped to body.woocommerce-checkout, mobile-only where noted.

   Root cause of the large blank gap (confirmed from Astra's own inline
   checkout CSS, unconditional / not inside any media query):
     form h3 (not(...)) { padding: 20px 0 14px; margin: 0 0 20px; ... }
   The "Additional information" heading (form-shipping.php's own
   <h3>Additional information</h3>, which only started rendering once
   "Ship to" was set to Force shipping to billing address in the prior
   task) picks up that generic padding+margin even though its own field
   wrapper is empty -- WooCommerce disables order notes on this store, so
   there was never any content under it. That is roughly 55-70px of
   heading chrome around nothing. frontend.js now hides the whole
   .woocommerce-additional-fields block (heading included) whenever its
   field wrapper is genuinely empty, and re-checks after every
   WooCommerce update_checkout refresh -- if order notes are ever enabled
   later, the real fields reappear and this stops hiding it automatically.
   The second contributor is the always-empty `.col-2` grid column
   (a leftover of Astra's desktop 2-column checkout layout, never used by
   this theme's single-column mobile Step 1/Step 2 flow) still taking a
   28px grid gap on mobile; it's removed from the grid below.
   ========================================================================== */
@media (max-width: 768px) {
  body.woocommerce-checkout .col-2 { display: none !important; }
}

/* -------------------------------------------------- Razorpay payment box */
/* "Pay securely via Razorpay." is the gateway's own configured description
   text, printed by WooCommerce/Razorpay inside .payment_box -- purely
   visual copy, not part of payment processing. Hiding only this <p>
   leaves the radio input, label, icon and Razorpay's own JS untouched. */
/* The whole box (not just its text) is hidden -- confirmed it contains
   nothing but that description <p>: no real Razorpay fields/iframe live
   here (Razorpay is a redirect/hosted checkout gateway), so with the text
   gone the box was just an empty bordered/background rectangle. */
body.woocommerce-checkout .payment_box.payment_method_razorpay { display: none !important; }

/* Compact "Cards ... 100% Secure Payment" heading row. The real payment
   option label ("Cards" + the Razorpay icon) is kept exactly as
   WooCommerce/Razorpay render it; "100% Secure Payment" is added as
   trust-badge copy via ::after (decorative only, not sourced from any
   gateway data) so nothing about the actual selectable option is
   fabricated. */
body.woocommerce-checkout label[for="payment_method_razorpay"] {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; width: 100%;
  font-size: 14px; font-weight: 600; color: var(--ink, #1F2328);
}
body.woocommerce-checkout label[for="payment_method_razorpay"] img { height: 20px; width: auto; }
body.woocommerce-checkout label[for="payment_method_razorpay"]::after {
  content: "100% Secure Payment"; margin-left: auto; font-size: 11.5px; font-weight: 600;
  color: var(--green, #1E8E5A); white-space: nowrap;
}

/* ==========================================================================
   MOBILE CHECKOUT STEP 1 — address validation. Field-level state
   (.woocommerce-invalid etc.) is WooCommerce's own real class, set by its
   own checkout.js field validator; only the message text/notice styling
   is new here.
   ========================================================================== */
body.woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid select {
  border-color: var(--red, #D14343) !important;
}
body.woocommerce-checkout .lks-field-error {
  display: block; margin-top: 5px; font-size: 12px; font-weight: 500; color: var(--red, #D14343);
}
body.woocommerce-checkout .lks-address-validation-notice {
  display: block; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
  background: #FFF1EC; border: 1px solid rgba(209,67,67,.25);
  color: var(--red, #D14343); font-size: 13px; font-weight: 600; line-height: 1.4;
}
body.woocommerce-checkout .lks-address-validation-notice[hidden] { display: none; }

/* ==========================================================================
   ORDER RECEIVED — success / failure result panel. Scoped to
   .woocommerce-order, which WooCommerce's own checkout/thankyou.php only
   ever renders on the real order-received page. Which panel appears is
   driven entirely by which of WooCommerce's own real classes are present
   in the server-rendered markup (.woocommerce-order-overview only when
   $order->has_status('failed') is false; .woocommerce-thankyou-order-failed
   only when it's true) -- never guessed client-side.
   ========================================================================== */
.woocommerce-order .woocommerce-order-overview,
.woocommerce-order .woocommerce-thankyou-order-failed,
.woocommerce-order .woocommerce-thankyou-order-failed-actions {
  display: none;
}
.lks-order-result {
  max-width: 480px; margin: 24px auto; padding: 28px 20px; border-radius: 16px;
  text-align: center; box-sizing: border-box;
}
.lks-order-result-icon {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700;
}
.lks-order-result h2 { font-size: 19px; margin: 0 0 10px; }
.lks-order-result p { font-size: 14px; line-height: 1.5; margin: 0 0 6px; color: var(--ink-2, #4A4740); }

.lks-order-result-success {
  background: #F1FAF4; border: 1px solid rgba(30,142,90,.25);
}
.lks-order-result-success .lks-order-result-icon { background: var(--green, #1E8E5A); color: #fff; }
.lks-order-result-success h2 { color: var(--green, #1E8E5A); }
.lks-order-result-redirect {
  margin-top: 14px !important; font-size: 12.5px !important; color: var(--muted, #8A8578) !important;
}

.lks-order-result-failure {
  background: #FFF1EC; border: 1px solid rgba(209,67,67,.25);
}
.lks-order-result-failure .lks-order-result-icon { background: var(--red, #D14343); color: #fff; }
.lks-order-result-failure h2 { color: var(--red, #D14343); }
.lks-order-retry {
  display: block; width: 100%; margin-top: 16px; text-decoration: none;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .lks-order-result { margin: 16px 12px; padding: 24px 16px; }
}

/* ==========================================================================
   MY ACCOUNT — notice styling (e.g. the social-login password tip). Scoped
   to the account page only; no global WooCommerce/WP-admin recolor.
   ========================================================================== */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info {
  border-top-color: var(--orange) !important; background: #FFF6EC;
  border-radius: 10px; padding: 14px 16px 14px 46px; font-size: 13.5px; color: var(--ink, #1F2328);
}
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-info::before {
  color: var(--orange) !important; top: 14px; left: 16px;
}
body.woocommerce-account .woocommerce-message a,
body.woocommerce-account .woocommerce-info a {
  color: var(--orange); font-weight: 600;
}
body.woocommerce-account .woocommerce-error {
  border-top-color: var(--red, #D14343) !important; background: #FFF1EC;
  border-radius: 10px; padding: 14px 16px 14px 46px; font-size: 13.5px;
}
body.woocommerce-account .woocommerce-error::before { color: var(--red, #D14343) !important; top: 14px; left: 16px; }
@media (max-width: 480px) {
  body.woocommerce-account .woocommerce-message,
  body.woocommerce-account .woocommerce-info,
  body.woocommerce-account .woocommerce-error { padding: 12px 14px 12px 40px; font-size: 13px; }
}

/* ==========================================================================
   DESKTOP PDP action row consistency (>=769px only -- the exact inverse of
   the site's <=768px mobile breakpoint used everywhere else, so this can
   never overlap the approved mobile PDP layout).

   ACTUAL root cause of the persisting mismatch (found by tracing Astra's
   own compiled CSS, not just our own rules): Astra's parent theme ships
     .ast-button,.button,input[type=button],input[type=submit]
       { border-radius:0; padding:18px 30px; border:0; box-shadow:none; }
   WooCommerce's own single_add_to_cart_button markup carries a literal
   class="single_add_to_cart_button button alt" -- that bare .button class
   IS this Astra selector, so its 18px/30px padding was still landing on
   the button (added on top of, not replaced by, our own height), which is
   exactly why a height-only override wasn't enough: with the default
   content-box sizing, height + 36px of vertical padding pushed the real
   rendered button well past 46px while .qty/.icon-square stayed at 46px.
   Every control below now gets box-sizing:border-box plus an explicit,
   !important-backed height/padding/margin reset, so nothing upstream
   (Astra, WooCommerce, or our own .btn/.btn-lg utilities) can reintroduce
   a different rendered height again.
   ========================================================================== */
@media (min-width: 769px) {
  .pdp-actions {
    display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 12px !important;
  }

  /* Wrapper elements WooCommerce/our JS leave around the row (simple
     product form vs. variable product's variation wrapper) must not add
     their own margin above/around it. */
  #lks-add-to-cart-native form.cart,
  #lks-add-to-cart-native .variations_form,
  #lks-add-to-cart-native .woocommerce-variation-add-to-cart,
  #lks-add-to-cart-native .single_variation_wrap {
    margin: 0 !important;
  }

  /* Quantity stepper: one fixed 46px control, border-box, everything
     inside it centered, no leftover margin. The "sits a hair too
     high" symptom this block used to paper over with a 2px margin-top
     nudge was never caused by anything in this file: style.css's
     #lks-add-to-cart-native .quantity carried a leftover
     margin-bottom:16px (from an older two-row layout) that this
     class-only selector could never outrank -- ID beats class in
     specificity regardless of !important or source order. That rule
     is fixed at its source in style.css now, so both quantity margins
     stay a plain, honest zero here instead of guessing an offset. */
  .pdp-actions .quantity { margin: 0 !important; padding: 0 !important; }
  .pdp-actions .qty {
    box-sizing: border-box !important;
    height: 46px !important; min-height: 46px !important;
    display: inline-flex !important; align-items: center !important;
    margin: 0 !important; flex: 0 0 auto;
  }
  .pdp-actions .qty button {
    box-sizing: border-box !important;
    height: 100% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; line-height: 1 !important;
  }
  .pdp-actions .qty input.qty {
    box-sizing: border-box !important;
    height: 100% !important;
    margin: 0 !important; padding: 0 !important; line-height: normal !important;
  }

  /* Add to Cart / Buy Now: kill Astra's .button leak (padding:18px 30px,
     border, box-shadow) and force the same 46px box-sizing:border-box
     height as the stepper/icon squares, disabled state included so it
     never shrinks. */
  .pdp-actions .single_add_to_cart_button,
  .pdp-actions #buy-now {
    box-sizing: border-box !important;
    height: 46px !important; min-height: 46px !important; max-height: 46px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    margin: 0 !important; padding: 0 26px !important; border-width: 1px !important;
    box-shadow: none !important; line-height: 1 !important; text-shadow: none !important;
    border-radius: 10px !important; flex: 0 0 auto;
  }
  .pdp-actions .single_add_to_cart_button[disabled],
  .pdp-actions .single_add_to_cart_button.disabled {
    height: 46px !important; min-height: 46px !important; max-height: 46px !important;
  }

  /* Wishlist / Share: exact squares matching the same 46px, icon dead-
     center regardless of the SVG's own intrinsic baseline. */
  .pdp-actions .icon-square {
    box-sizing: border-box !important;
    width: 46px !important; height: 46px !important; min-height: 46px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    margin: 0 !important; padding: 0 !important; flex: 0 0 auto;
  }
  .pdp-actions .icon-square svg { display: block !important; }
}

/* MOBILE PDP wishlist button: give it a little more visual weight so it
   doesn't read as smaller/weaker than Add to Cart/Buy Now next to it, and
   make the heart icon itself bigger and clearer (its default svg is only
   16x16 with a thin 1.9 stroke). Scoped to .pdp-actions [data-wish] only --
   the share icon-square and the separate product-card .wish-btn heart
   (shop/category grid) are untouched. Desktop is unaffected (min-width:769
   above still forces the shared 46px square). */
@media (max-width: 768px) {
  .pdp-actions .icon-square[data-wish] {
    width: 50px !important; height: 50px !important; min-height: 50px !important;
  }
  .pdp-actions .icon-square[data-wish] svg {
    width: 22px !important; height: 22px !important;
  }
}