/* ═══════════════════════════════════════════════════════════════════
   KDB design system — brand V1.0
   Ink on Paper · Cream blocks · Taupe support · one red dot
   ═══════════════════════════════════════════════════════════════════ */

/* ── self-hosted fonts (latin subsets, variable) ── */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
}
/* Roman (upright) — our display headings are all italic, but a few account
   surfaces use upright Cormorant at ~600 (drawer/login headings, wallet value).
   These leaned on Astra's Google-Fonts pull (Cormorant Garamond:500), which we
   now dequeue for performance — so self-host it too. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat.woff2') format('woff2');
}

:root {
  --kdb-ink: #1C1A17;
  --kdb-paper: #F7F4EC;
  --kdb-cream: #F2EDE1;
  --kdb-taupe: #6D675C;
  --kdb-red: #A4322A;          /* accent ONLY — never text, never backgrounds */
  --kdb-red-dark: #B8433A;     /* red on dark grounds */
  --kdb-line: rgba(109, 103, 92, .22);
  --kdb-ink-soft: rgba(28, 26, 23, .62);
  --kdb-disp: 'Cormorant Garamond', Georgia, serif;
  --kdb-ui: 'Montserrat', system-ui, sans-serif;
  /* card/panel surface — the ONE source for "a box on the page". Defaults
     to the page tone so components blend by default. NEVER hardcode #fff
     on a new component; reach for var(--kdb-surface) so this stays the
     single lever. Set it per-region if a lighter lift is ever wanted. */
  --kdb-surface: var(--kdb-paper);
}

/* ── base refinements over Astra ── */
body {
  -webkit-font-smoothing: antialiased;
}

/* Astra's body face is Lato (pulled from Google Fonts). We dequeue that request
   for performance and self-host our own families — so the brand sans must be the
   base, or raw page/post copy (.entry-content, which the custom templates bypass
   but Pages, policy/About and the Woo shortcodes use) would drop to a system
   font. Our explicit .kdb-* rules and serif heading classes still win over this. */
body,
.entry-content,
.ast-container {
  font-family: var(--kdb-ui);
}

/* page ground — mock parity: Paper, not the Cream Astra has baked in.
   Every wrapper that could paint the ground shares the one variable, so
   nothing (toolbar included) can ever sit on a different tone. */
body, .ast-separate-container, #content, .site-content {
  background-color: var(--kdb-paper);
}

/* spaced-caps utility (brand: labels & navigation) */
.kdb-caps {
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* primary nav — spaced caps with underline-in hover */
.main-header-menu .menu-item > .menu-link {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* buttons — Ink fill, outline on hover (mock parity) */
.kdb-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--kdb-ink);
  color: var(--kdb-cream);
  border: 1px solid var(--kdb-ink);
  border-radius: 2px;
  font-family: var(--kdb-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: all .2s;
}
.kdb-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: transparent;
  color: var(--kdb-ink);
}

/* the red dot — the only accent. Bag count badge etc. */
.kdb-dot-badge {
  background: var(--kdb-red);
  color: #fff;
}
.ast-cart-menu-wrap .count,
.ast-header-woo-cart .ast-cart-menu-wrap .count,
.ast-site-header-cart .count {
  background: var(--kdb-red);
  color: #fff;
  border-radius: 50%;
}

/* display headings — Cormorant italic, used sparingly and large */
.kdb-display {
  font-family: var(--kdb-disp);
  font-style: italic;
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
  letter-spacing: .005em;
}

/* hairlines + focus */
.kdb-hairline { border-color: var(--kdb-line); }
:focus-visible { outline: 2px solid var(--kdb-ink); outline-offset: 2px; }

/* WooCommerce notices, SITE-WIDE — the root cause of the recurring white
   boxes ("Your cart is currently empty.", coupon/login notices, order
   confirmations): Astra's customizer CSS paints them as white cards.
   One quiet cream slab everywhere instead. */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.woocommerce-noreviews, p.no-comments, p.cart-empty {
  background: var(--kdb-cream) !important; color: var(--kdb-ink-soft) !important;
  border: 0 !important; border-radius: 2px; box-shadow: none !important;
  font-family: var(--kdb-ui); font-size: 13px; }
.woocommerce-error { border-left: 3px solid var(--kdb-red) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--kdb-taupe); }
.woocommerce-error::before { color: var(--kdb-red); }

/* cart page: same grounding treatment (full skin can come later —
   the bag drawer is the primary cart UX) */
body.woocommerce-cart #content :is(table.shop_table, thead, tbody, tfoot, tr, th, td,
  .cart_totals, .cart-collaterals, .woocommerce-shipping-destination) {
  background: transparent !important; box-shadow: none !important; }
body.woocommerce-cart #content table.shop_table th,
body.woocommerce-cart #content table.shop_table td {
  border: 0; border-bottom: 1px solid var(--kdb-line); }

/* ── sticky header (replaces the old customizer snippet, theme-scoped) ── */
#masthead { position: sticky; top: 0; z-index: 60; box-shadow: 0 1px 8px rgba(58,53,46,.08); }
body.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) { body.admin-bar #masthead { top: 46px; } }

/* ═══════════════ SHOP PAGE ═══════════════ */

/* Astra's Woo CSS flexes .ast-container to lay out its own primary/sidebar
   pair — with our custom markup that scrambles toolbar + shop into side-by-side
   flex columns. Force normal flow on shop archives. */
body.woocommerce-page #content > .ast-container,
body.post-type-archive-product #content > .ast-container,
body.tax-product_cat #content > .ast-container,
body.single-product #content > .ast-container {
  display: block;
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* full-bleed shop surfaces (Astra container is set full-width/unboxed) */
.kdb-toolbar, .kdb-shop { width: 100%; padding-left: clamp(18px, 4vw, 56px); padding-right: clamp(18px, 4vw, 56px); }

/* toolbar — Myntra sticky layer. --kdb-bar-top is JS-measured from the
   pinned masthead's real bottom (covers admin bar & any header height). */
.kdb-toolbar {
  position: sticky; top: var(--kdb-bar-top, 66px); z-index: 50;
  background: var(--kdb-paper); border-bottom: 1px solid var(--kdb-line);
  min-height: 54px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-top: 8px; padding-bottom: 8px; margin-bottom: 4px;
}
body.admin-bar .kdb-toolbar { top: var(--kdb-bar-top, 98px); }
.kdb-crumb { font-size: 11px; color: var(--kdb-taupe); letter-spacing: .1em; text-transform: uppercase; }
.kdb-crumb b { color: var(--kdb-ink); font-weight: 600; }
.kdb-count { font-size: 11.5px; color: var(--kdb-taupe); }
/* crumb+count group (left) and sort+filter group (right) — filter lives with sort
   so it never shifts with the breadcrumb's length */
.kdb-tb-meta { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.kdb-tb-tools { margin-left: auto; display: flex; align-items: center; gap: 18px; }
/* baseline-align "Sort" with the select's value (center-align never quite
   matched 11px caps against 12px mixed case) */
.kdb-sort { display: flex; align-items: baseline; gap: 8px; font-size: 11px;
  color: var(--kdb-taupe); text-transform: uppercase; letter-spacing: .12em; }
.kdb-sort select { font-family: var(--kdb-ui); font-size: 12px; border: 0; background: none;
  color: var(--kdb-ink); outline: none; cursor: pointer;
  /* neutralize Astra's form sizing so the value baseline-aligns with the label */
  appearance: none; -webkit-appearance: none; background-image: none;
  padding: 0 16px 0 0; margin: 0; height: auto; min-height: 0; line-height: 1.4; }
.kdb-sort::after { content: ""; width: 7px; height: 7px; margin-left: -20px; pointer-events: none;
  align-self: center;
  border-right: 1.5px solid var(--kdb-taupe); border-bottom: 1.5px solid var(--kdb-taupe);
  transform: rotate(45deg) translateY(-2px); }
/* Filters: an icon (funnel-style, distinct from the nav hamburger), same ink as
   the header icons, with a red active-count badge like the bag count. */
.kdb-fbtn { display: none; position: relative; background: none; border: 0; padding: 6px; margin: -6px 0; cursor: pointer;
  color: var(--kdb-ink); align-items: center; }
.kdb-fbtn svg { display: block; }
.kdb-fbtn:hover, .kdb-fbtn:focus { color: var(--kdb-taupe); }
.kdb-fbtn-n { position: absolute; top: -4px; right: -6px; min-width: 15px; height: 15px; border-radius: 50%;
  background: var(--kdb-red); color: #fff; font-size: 9px; font-weight: 600; font-family: var(--kdb-ui);
  display: grid; place-items: center; padding: 0 3px; }
.kdb-fbtn-n[hidden] { display: none; } /* the class's display:grid would otherwise beat the [hidden] UA rule */

/* layout */
.kdb-shop { display: grid; grid-template-columns: 236px 1fr; gap: clamp(28px, 4vw, 64px);
  padding-top: 22px; padding-bottom: 90px; align-items: start; }

/* sidebar — sticky below the toolbar, thin blended scrollbar for overflow.
   --kdb-side-top is JS-measured (masthead bottom + toolbar height + gap) so
   the Clear-all row pins exactly under the toolbar, never beneath it. */
.kdb-filters { position: sticky;
  top: var(--kdb-side-top, 142px);
  max-height: calc(100vh - var(--kdb-side-top, 142px) - 20px);
  /* overflow-x:hidden is deliberate: overflow-y:auto alone coerces overflow-x to
     auto (CSS spec), so the group chevron's ~2px rotated-bbox poke became a real
     horizontal scroll. Pin it hidden to kill that axis outright. */
  overflow-y: auto; overflow-x: hidden; align-self: start; padding-right: 10px;
  scrollbar-width: thin; scrollbar-color: var(--kdb-line) transparent; }
.kdb-filters::-webkit-scrollbar { width: 4px; }
.kdb-filters::-webkit-scrollbar-track { background: transparent; }
.kdb-filters::-webkit-scrollbar-thumb { background: var(--kdb-line); border-radius: 2px; }
.kdb-filters::-webkit-scrollbar-thumb:hover { background: var(--kdb-taupe); }
.kdb-fhead { display: flex; align-items: center; justify-content: space-between;
  padding: 2px 0 12px; border-bottom: 1px solid var(--kdb-line); }
/* toggle-all: single chevron, no state text. Up = will collapse, down = will expand */
.kdb-ftoggle { background: none; border: 0; padding: 4px 4px 4px 14px; display: flex; align-items: center; }
.kdb-ftoggle .kdb-chev { width: 9px; height: 9px; transform: rotate(-135deg); margin-top: 4px; }
.kdb-ftoggle.kdb-will-expand .kdb-chev { transform: rotate(45deg); margin-top: -2px; }
.kdb-ftoggle:hover .kdb-chev, .kdb-ftoggle:focus .kdb-chev { border-color: var(--kdb-ink); }
.kdb-ftoggle:hover, .kdb-ftoggle:focus { background: none; }
.kdb-fgroup { border-bottom: 1px solid var(--kdb-line); }
.kdb-fg-h { width: 100%; background: none; border: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 15px 0; margin: 0; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; font-family: var(--kdb-ui); color: var(--kdb-ink); }
/* match option-hover treatment; kill Astra's grey hover bg AND its
   white-on-accent :focus paint (a clicked button keeps :focus, so without
   this the header text goes white the moment the hover ends) */
.kdb-fg-h:hover, .kdb-fg-h:focus, .kdb-clearall:hover, .kdb-clearall:focus,
.kdb-szchip:focus, .kdb-cdot:focus { background: none; }
.kdb-fg-h:focus { color: var(--kdb-ink); }
.kdb-fg-h:focus .kdb-chev { border-color: var(--kdb-taupe); }
.kdb-clearall:focus { color: var(--kdb-taupe); }
.kdb-szchip:focus { color: var(--kdb-ink-soft); }
.kdb-fg-h:hover { color: var(--kdb-ink-soft); }
.kdb-fg-h:hover .kdb-chev { border-color: var(--kdb-ink); }
.kdb-szchip:hover { background: none; }
.kdb-chev { width: 8px; height: 8px; border-right: 1.5px solid var(--kdb-taupe);
  border-bottom: 1.5px solid var(--kdb-taupe); transform: rotate(45deg); transition: transform .25s; margin-top: -3px; }
.kdb-fgroup.closed .kdb-chev { transform: rotate(-45deg); margin-top: 2px; }
/* per-section active-filter count: a small pill on the group header (e.g. "COLOUR ②"
   when two colours are picked) — the filter count, not a product count */
.kdb-fg-hl { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.kdb-fg-n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px;
  background: var(--kdb-ink); color: var(--kdb-cream);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0; line-height: 1; }
.kdb-fg-n[hidden] { display: none; }  /* inline-flex would beat the UA [hidden] rule */
.kdb-fg-b { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s ease; }
.kdb-fgroup.closed .kdb-fg-b { grid-template-rows: 0fr; }
.kdb-fg-i { overflow: hidden; min-height: 0; padding-bottom: 16px; }   /* min-height:0 lets the 0fr track fully collapse */
.kdb-fgroup.closed .kdb-fg-i { padding-bottom: 0; }
.kdb-fopt { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px;
  color: var(--kdb-ink-soft); cursor: pointer; user-select: none; }
.kdb-fopt:hover { color: var(--kdb-ink); }
.kdb-fopt input { accent-color: var(--kdb-ink); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.kdb-sizes-row { display: flex; flex-wrap: wrap; gap: 8px; }
.kdb-szchip { border: 1px solid var(--kdb-line); background: none; font-size: 11.5px; padding: 7px 0;
  min-width: 44px; text-align: center; border-radius: 2px; color: var(--kdb-ink-soft); transition: all .15s; }
.kdb-szchip:hover { border-color: var(--kdb-ink); color: var(--kdb-ink); }
.kdb-szchip.on, .kdb-szchip.on:focus { background: var(--kdb-ink); border-color: var(--kdb-ink); color: var(--kdb-cream); }
/* padding = headroom inside the group's overflow-hidden body, so the
   top-row dots can scale on hover (and wear the selection ring) unclipped */
.kdb-dots-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 8px 2px; }
.kdb-cdot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(28,26,23,.2);
  padding: 0; position: relative; transition: transform .15s; }
.kdb-cdot:hover { transform: scale(1.15); }
.kdb-cdot.on::after { content: ""; position: absolute; inset: -5px; border: 1.5px solid var(--kdb-ink); border-radius: 50%; }
/* multicolour = spectrum swatch, not a single colour (overrides the inline hex) */
.kdb-cdot[value="multicolour"],
.kdb-cdots button[data-kdb-color="multicolour"],
.kdb-pdots button[data-kdb-color="multicolour"],
.kdb-sbuy-dot[data-kdb-color="multicolour"] {
  background: conic-gradient(from 210deg, #e0503f, #e79a3c, #e6cf4a, #6bbf59, #4a9bd1, #7a5fb0, #e0503f) !important;
}
/* facet values unreachable under the current filters — greyed, not removed */
.kdb-szchip.kdb-off, .kdb-cdot.kdb-off { opacity: .26; pointer-events: none; }
.kdb-fopt.kdb-off { opacity: .4; pointer-events: none; }
.kdb-clearall { background: none; border: 0; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kdb-taupe); padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.kdb-clearall:hover { color: var(--kdb-ink); }

/* grid — Lululemon spacing, 4-up */
.kdb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 20px; transition: opacity .2s; }
.kdb-grid.kdb-loading { opacity: .35; pointer-events: none; }

/* card */
/* min-width:0 lets the card shrink to its grid track: without it a wide child
   (a long name, or a many-colour dot row) sets a min-content floor that blows
   the 2-col grid out to unequal columns (seen on a 13-colour piece). */
.kdb-card { position: relative; min-width: 0; }
.kdb-tile { position: relative; aspect-ratio: 3 / 4; border-radius: 2px; overflow: hidden; background: var(--kdb-cream); }
.kdb-tile-link { display: block; height: 100%; }
.kdb-tile-link { display: block; width: 100%; height: 100%; }
/* .kdb-tile prefix outguns Astra's `.woocommerce img { height: auto }` */
.kdb-tile .kdb-tile-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .5s; }
.kdb-card:hover .kdb-tile-img { transform: scale(1.03); }

/* card photo flip-through — arrows surface on hover, always-on for touch */
.kdb-tnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  background: rgba(247, 244, 236, .92); border: 1px solid rgba(28, 26, 23, .14); color: var(--kdb-ink);
  cursor: pointer; opacity: 0; transition: opacity .2s, background .2s; }
.kdb-card:hover .kdb-tnav, .kdb-tnav:focus-visible { opacity: 1; }
.kdb-tnav:hover, .kdb-tnav:focus { background: var(--kdb-paper); color: var(--kdb-ink); }
.kdb-tprev { left: 8px; }
.kdb-tnext { right: 8px; }
/* Touch: keep the arrows visible (no hover to surface them) and give each a
   finger-friendly 44px tap target WITHOUT enlarging the subtle 30px circle — the
   visible size stays minimal, an invisible ::before carries the hit area to the
   ~44px minimum (audit item 8: the arrows were tiny to tap on mobile). */
@media (hover: none) {
  .kdb-tnav { opacity: .9; }
  .kdb-tnav::before { content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 44px; height: 44px; }
}
.kdb-weave { position: absolute; inset: 0; transition: background-color .35s;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
                    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px); }
.kdb-ini { position: absolute; right: 14px; bottom: 6px; font-family: var(--kdb-disp); font-style: italic;
  font-weight: 500; font-size: 52px; color: rgba(247,244,236,.55); line-height: 1; pointer-events: none; }
.kdb-tag { position: absolute; left: 12px; top: 12px; font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; background: var(--kdb-paper); padding: 4px 9px; border-radius: 2px;
  color: var(--kdb-ink-soft); font-family: var(--kdb-ui); }

/* quick-add — Gymshark hover strip */
.kdb-qadd { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(247,244,236,.96);
  padding: 11px 12px 13px; transform: translateY(102%); transition: transform .28s cubic-bezier(.22,.72,.28,1); }
.kdb-card:hover .kdb-qadd, .kdb-card:focus-within .kdb-qadd { transform: translateY(0); }
.kdb-ql { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--kdb-taupe);
  margin-bottom: 8px; font-family: var(--kdb-ui); }
.kdb-qs { display: flex; gap: 6px; flex-wrap: wrap; }
.kdb-qs button { border: 1px solid var(--kdb-line); background: var(--kdb-paper); font-size: 11px;
  min-width: 40px; padding: 7px 8px; border-radius: 2px; color: var(--kdb-ink);
  font-family: var(--kdb-ui); letter-spacing: .02em; text-transform: none; transition: all .12s; }
.kdb-qs button:hover { background: var(--kdb-ink); border-color: var(--kdb-ink); color: var(--kdb-cream); }
.kdb-qs button.kdb-added { background: var(--kdb-red); border-color: var(--kdb-red); color: #fff; }
.kdb-qs button:disabled { opacity: .35; text-decoration: line-through; pointer-events: none; }
.kdb-qs .kdb-q1 { flex: 1; }
/* browse-only: sizes shown for reference (not tappable) */
.kdb-qs .kdb-qsize { border: 1px solid var(--kdb-line); background: var(--kdb-paper); font-size: 11px;
  min-width: 40px; padding: 7px 8px; border-radius: 2px; color: var(--kdb-ink); text-align: center;
  font-family: var(--kdb-ui); letter-spacing: .02em; }
/* Touch has no hover: the quick-add strip only surfaced via the first tap's
   sticky-hover/focus, covering more than half the photo and forcing a SECOND tap
   to open the product. Drop it on touch — the card is photo-first and one tap
   goes straight to the PDP, where the sticky Add-to-Bag + size sheet do the
   buying. Also kill the hover zoom so no hover state lingers after a tap. */
@media (hover: none) {
  .kdb-qadd { display: none; }
  .kdb-card:hover .kdb-tile-img { transform: none; }
}

/* card info */
.kdb-cinfo { padding: 12px 2px 0; }
.kdb-cname { font-size: 13px; font-weight: 500; color: var(--kdb-ink); display: block; margin-bottom: 3px; }
.kdb-cname:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--kdb-ink); }
.kdb-cprice { font-size: 13px; margin: 0; font-variant-numeric: tabular-nums; color: var(--kdb-ink); }
.kdb-cprice del { color: var(--kdb-taupe); font-size: 12px; margin-left: 8px; }
.kdb-cprice ins { text-decoration: none; }
.kdb-cdots { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.kdb-cdots button { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(28,26,23,.18);
  padding: 0; transition: transform .15s; }
.kdb-cdots button:hover { transform: scale(1.25); }
.kdb-cdots button.on { outline: 1px solid var(--kdb-ink); outline-offset: 2px; }

/* empty + pagination */
.kdb-empty { grid-column: 1 / -1; text-align: center; padding: 90px 0; color: var(--kdb-taupe); }
.kdb-e1 { font-family: var(--kdb-disp); font-style: italic; font-size: 30px; color: var(--kdb-ink); margin-bottom: 8px; }
.kdb-pagination { margin-top: 44px; }
.kdb-pagination .woocommerce-pagination ul.page-numbers { display: flex; gap: 8px; justify-content: center;
  list-style: none; margin: 0; padding: 0; border: 0; }
.kdb-pagination .page-numbers li { border: 0; }
.kdb-pagination a.page-numbers, .kdb-pagination span.page-numbers { display: grid; place-items: center;
  min-width: 36px; height: 36px; border: 1px solid var(--kdb-line); border-radius: 2px; font-size: 12px;
  color: var(--kdb-ink-soft); background: none; padding: 0 8px; }
.kdb-pagination a.page-numbers:hover { border-color: var(--kdb-ink); color: var(--kdb-ink); }
.kdb-pagination span.page-numbers.current { background: var(--kdb-ink); border-color: var(--kdb-ink); color: var(--kdb-cream); }

/* toast */
.kdb-toast { position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 90px); z-index: 95;
  background: var(--kdb-ink); color: var(--kdb-cream); font-size: 12px; letter-spacing: .06em;
  padding: 12px 22px; border-radius: 2px; transition: transform .35s cubic-bezier(.22,.72,.28,1);
  font-family: var(--kdb-ui); max-width: 90vw; }
.kdb-toast.on { transform: translate(-50%, 0); }
.kdb-toast .kdb-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--kdb-red); margin-right: 9px; }

/* mobile filter drawer */
.kdb-scrim { position: fixed; inset: 0; background: rgba(28,26,23,.45); z-index: 80; opacity: 0;
  pointer-events: none; transition: opacity .25s; }
.kdb-scrim.on { opacity: 1; pointer-events: auto; }
/* Filters slide in from the RIGHT (the left drawer is the nav) as a flex column:
   fixed header, scrolling body, sticky action footer. */
.kdb-drawer { position: fixed; top: 0; bottom: 0; right: 0; width: min(340px, 88vw); z-index: 85;
  background: var(--kdb-paper); transform: translateX(103%); transition: transform .3s cubic-bezier(.22,.72,.28,1);
  display: flex; flex-direction: column; }
.kdb-drawer.on { transform: none; }
.kdb-drawer-h { flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; padding: 20px 22px 8px; }
.kdb-drawer-h-l { display: flex; align-items: baseline; gap: 9px; }
.kdb-drawer-h b { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-family: var(--kdb-ui); }
.kdb-drawer-hcount { font-family: var(--kdb-ui); font-size: 11px; color: var(--kdb-taupe); }
.kdb-drawer-h button { background: none; border: 0; font-size: 20px; line-height: 1; color: var(--kdb-taupe); }
/* overflow-x:hidden kills the hairline horizontal scroll (a rotated group chevron
   pokes ~2px past the content edge); overscroll-behavior stops the drawer's scroll
   from chaining to the page on iOS momentum */
#kdb-drawer-host { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 4px 22px 8px; }
.kdb-drawer .kdb-clearall { display: none; } /* the footer owns Clear all in the drawer */
.kdb-drawer .kdb-fhead { justify-content: flex-end; } /* lone toggle-all stays right */
.kdb-drawer-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--kdb-line); }
.kdb-drawer-clear { flex: 0 0 auto; background: none; border: 0; color: var(--kdb-taupe); cursor: pointer;
  font-family: var(--kdb-ui); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 13px 6px; }
/* background:none on :focus too — touch keeps :focus after a tap and Astra
   paints a grey bg on a focused button, so Clear all "stayed grey" post-click */
.kdb-drawer-clear:hover, .kdb-drawer-clear:focus { color: var(--kdb-ink); background: none; }
.kdb-drawer-apply { flex: 1 1 auto; background: var(--kdb-ink); color: var(--kdb-cream); border: 1px solid var(--kdb-ink);
  cursor: pointer; font-family: var(--kdb-ui); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; padding: 14px 16px; border-radius: 2px; transition: background .2s, color .2s; }
/* reassert the ink fill over Astra's focus paint (kept before :active so the
   pressed look still wins during a tap) */
.kdb-drawer-apply:hover, .kdb-drawer-apply:focus { background: var(--kdb-ink); color: var(--kdb-cream); }
.kdb-drawer-apply:active { background: transparent; color: var(--kdb-ink); }

@media (max-width: 1200px) { .kdb-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) {
  .kdb-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 14px; }
  .kdb-shop { grid-template-columns: 1fr; }
  .kdb-filters { display: none; }
  /* small right buffer so the group chevron's rotated corner never reaches the
     drawer edge (desktop gets this from the 10px scrollbar gutter) */
  .kdb-drawer .kdb-filters { display: block; position: static; max-height: none; padding-right: 4px; }
  .kdb-fbtn { display: inline-flex; }
  /* tools drop to their own full-width row: Sort at the left, Filter at the right */
  .kdb-tb-tools { width: 100%; margin-left: 0; justify-content: space-between; }
}
@media (max-width: 560px) { .kdb-grid { gap: 24px 10px; } .kdb-qadd { padding: 8px 9px 10px; } }

/* ═══════════════ PRODUCT PAGE (Lulu-minimal) ═══════════════ */

.kdb-pdp { max-width: 1240px; margin: 0 auto; padding: 24px clamp(18px, 4vw, 56px) 90px; }
.kdb-pcrumb { font-size: 11px; color: var(--kdb-taupe); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 26px; }
.kdb-pcrumb a { color: var(--kdb-taupe); text-decoration: none; }
.kdb-pcrumb a:hover { color: var(--kdb-ink); text-decoration: underline; text-underline-offset: 3px; }
.kdb-pcrumb b { color: var(--kdb-ink); font-weight: 600; }

.kdb-pgrid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
  gap: clamp(28px, 5vw, 72px); align-items: start; }
.kdb-pgal { position: relative; }
.kdb-ptrack { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: 2px; }
.kdb-ptrack::-webkit-scrollbar { display: none; }
.kdb-ptrack:focus-visible { outline: 1.5px solid var(--kdb-ink); outline-offset: 3px; }
.kdb-pimg { position: relative; flex: 0 0 100%; scroll-snap-align: start;
  aspect-ratio: 3 / 4; background: var(--kdb-cream); border-radius: 2px; overflow: hidden; }
.kdb-pimg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.kdb-pimg .kdb-ini { font-size: 84px; right: 22px; bottom: 10px; }

/* gallery carousel chrome — arrows fade in on hover, always-on for touch */
.kdb-gnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  background: rgba(247, 244, 236, .92); border: 1px solid rgba(28, 26, 23, .14); color: var(--kdb-ink);
  cursor: pointer; opacity: 0; transition: opacity .2s, background .2s; }
.kdb-pgal:hover .kdb-gnav, .kdb-gnav:focus-visible { opacity: 1; }
.kdb-gnav:hover, .kdb-gnav:focus { background: var(--kdb-paper); color: var(--kdb-ink); }
.kdb-gprev { left: 14px; }
.kdb-gnext { right: 14px; }
.kdb-gdots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.kdb-gdots button { width: 7px; height: 7px; border-radius: 50%; padding: 0; border: 0;
  background: rgba(28, 26, 23, .22); transition: background .2s, transform .2s; cursor: pointer; }
.kdb-gdots button:hover { background: var(--kdb-taupe); }
.kdb-gdots button.on { background: var(--kdb-ink); transform: scale(1.15); }
@media (hover: none) { .kdb-gnav { opacity: 1; } }

/* buy column pins below the pinned masthead (measured, admin-bar safe) */
.kdb-pbuy { position: sticky; top: calc(var(--kdb-bar-top, 66px) + 26px); }
.kdb-pname { font-family: var(--kdb-disp); font-style: italic; font-weight: 500;
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; margin: 0 0 12px;
  color: var(--kdb-ink); text-wrap: balance; }
.kdb-pprice { font-size: 15px; margin-bottom: 20px; font-variant-numeric: tabular-nums; color: var(--kdb-ink); }
.kdb-pprice del { color: var(--kdb-taupe); font-size: 13px; margin-left: 8px; }
.kdb-pprice ins { text-decoration: none; }

/* rewards teaser under the price — what this piece gives back in points */
.kdb-ppts { font-size: 11.5px; letter-spacing: .04em; color: var(--kdb-taupe);
  margin: -12px 0 22px; font-family: var(--kdb-ui); }
.kdb-ppts b { color: var(--kdb-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.kdb-ptags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.kdb-ptags span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--kdb-taupe);
  border: 1px solid var(--kdb-line); padding: 6px 13px; border-radius: 999px; font-family: var(--kdb-ui); }

.kdb-plabel { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--kdb-taupe); margin: 0 0 10px; font-family: var(--kdb-ui); }
.kdb-plabel b { color: var(--kdb-ink); font-weight: 600; }
.kdb-pdots { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; padding: 2px; }
.kdb-pdots button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(28,26,23,.2);
  padding: 0; transition: transform .15s; }
.kdb-pdots button:hover { transform: scale(1.12); }
.kdb-pdots button.on { outline: 1.5px solid var(--kdb-ink); outline-offset: 3px; }

.kdb-psizes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.kdb-psizes button { border: 1px solid var(--kdb-line); background: none; font-size: 12px; min-width: 52px;
  padding: 11px 6px; border-radius: 2px; color: var(--kdb-ink-soft); font-family: var(--kdb-ui); transition: all .15s; }
.kdb-psizes button:hover { border-color: var(--kdb-ink); color: var(--kdb-ink); background: none; }
.kdb-psizes button:focus { background: none; color: var(--kdb-ink-soft); }
.kdb-psizes button.on, .kdb-psizes button.on:focus { background: var(--kdb-ink); border-color: var(--kdb-ink); color: var(--kdb-cream); }
.kdb-psizes button:disabled { opacity: .35; text-decoration: line-through; pointer-events: none; }

/* stock-aware quantity stepper — revealed by kdb.js only when >1 is available */
.kdb-pqtywrap { margin-bottom: 26px; }
.kdb-pqty { display: inline-flex; align-items: stretch; border: 1px solid var(--kdb-line); border-radius: 2px; }
.kdb-pqty button { width: 42px; height: 42px; background: none; border: 0; font-size: 17px; line-height: 1;
  color: var(--kdb-ink); cursor: pointer; font-family: var(--kdb-ui); transition: background .15s; }
.kdb-pqty button:hover:not(:disabled) { background: var(--kdb-cream); }
.kdb-pqty button:disabled { color: var(--kdb-ink-soft); opacity: .4; cursor: not-allowed; }
.kdb-pqty-n { min-width: 48px; display: grid; place-items: center; font-family: var(--kdb-ui); font-size: 14px;
  font-variant-numeric: tabular-nums; color: var(--kdb-ink);
  border-left: 1px solid var(--kdb-line); border-right: 1px solid var(--kdb-line); }
@keyframes kdb-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.kdb-nudge { animation: kdb-nudge .3s ease 2; }

.kdb-addbag { width: 100%; padding: 16px 0; font-size: 11.5px; cursor: pointer; margin-bottom: 24px; }
.kdb-addbag.kdb-added, .kdb-addbag.kdb-added:hover { background: var(--kdb-red); border-color: var(--kdb-red); color: #fff; }
.kdb-addbag:disabled { opacity: .4; }
.kdb-pshort { font-size: 13.5px; line-height: 1.75; color: var(--kdb-ink-soft); margin-bottom: 28px; }

/* + accordions — Material & care, Shipping & returns */
.kdb-acc { border-top: 1px solid var(--kdb-line); }
.kdb-acc:last-child { border-bottom: 1px solid var(--kdb-line); }
.kdb-acc-h { width: 100%; background: none; border: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0; margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
  font-family: var(--kdb-ui); color: var(--kdb-ink); cursor: pointer; }
.kdb-acc-h:hover { background: none; color: var(--kdb-ink-soft); }
.kdb-acc-h:focus { background: none; color: var(--kdb-ink); }
.kdb-plus { position: relative; width: 11px; height: 11px; flex: none; }
.kdb-plus::before, .kdb-plus::after { content: ""; position: absolute; background: var(--kdb-taupe); transition: transform .25s; }
.kdb-plus::before { left: 0; right: 0; top: 5px; height: 1.5px; }
.kdb-plus::after { top: 0; bottom: 0; left: 5px; width: 1.5px; }
.kdb-acc.open .kdb-plus::after { transform: scaleY(0); }
.kdb-acc-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.kdb-acc.open .kdb-acc-b { grid-template-rows: 1fr; }
.kdb-acc-i { overflow: hidden; min-height: 0; font-size: 13px; line-height: 1.75; color: var(--kdb-ink-soft); }
.kdb-acc.open .kdb-acc-i { padding-bottom: 18px; }
.kdb-acc-i p { margin: 0 0 10px; }

.kdb-rel { margin-top: 90px; }
.kdb-rel-t { font-size: clamp(24px, 2.6vw, 34px); margin: 0 0 28px; color: var(--kdb-ink); }

/* checkout suggestions (inc/checkout-suggest.php): wishlist strip + "you may
   also like", reusing the PDP .kdb-rel / .kdb-grid card block, tighter gaps */
.kdb-co-suggest { margin-top: 56px; }
.kdb-co-suggest .kdb-rel { margin-top: 0; }
.kdb-co-suggest .kdb-rel + .kdb-rel { margin-top: 56px; }
.kdb-co-wl .kdb-rel-t { margin-bottom: 6px; }
.kdb-co-suggest-sub { margin: 0 0 24px; font-size: 13px; color: var(--kdb-taupe); font-family: var(--kdb-ui); }
/* a suggestion card whose piece is in the bag hides (reappears when removed) */
.kdb-co-suggest .kdb-card-inbag { display: none; }
/* empty bag on checkout: no payment box, a quiet note in the review panel */
body.kdb-co-empty #payment { display: none; }
.kdb-cs-empty { padding: 20px 4px 8px; text-align: center; font-family: var(--kdb-ui);
  color: var(--kdb-taupe); font-size: 12.5px; }
.kdb-cs-empty .kdb-e1 { display: block; margin-bottom: 5px; color: var(--kdb-ink); font-size: 13px; }
/* Refresh the order review WITHOUT WooCommerce's white block-overlay flash —
   the panel updates in place. (The place-order submit overlay is on
   form.checkout, so it's untouched and still shows its wait state.) */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .blockOverlay,
body.woocommerce-checkout .woocommerce-checkout-payment .blockOverlay { opacity: 0 !important; }

@media (max-width: 900px) {
  .kdb-pgrid { grid-template-columns: 1fr; gap: 26px; }
  .kdb-pbuy { position: static; }
  .kdb-gnav { width: 36px; height: 36px; }
  .kdb-gprev { left: 10px; }
  .kdb-gnext { right: 10px; }
}

/* ═══════════════ BAG DRAWER ═══════════════ */

.kdb-noscroll { overflow: hidden; }
.kdb-bscrim { position: fixed; inset: 0; background: rgba(28,26,23,.45); z-index: 90; opacity: 0;
  pointer-events: none; transition: opacity .25s; }
.kdb-bscrim.on { opacity: 1; pointer-events: auto; }
.kdb-bag { position: fixed; top: 0; bottom: 0; right: 0; width: min(400px, 92vw); z-index: 92;
  background: var(--kdb-paper); transform: translateX(103%);
  transition: transform .3s cubic-bezier(.22,.72,.28,1); display: flex; flex-direction: column; }
.kdb-bag.on { transform: none; box-shadow: -12px 0 40px rgba(28,26,23,.14); }
.kdb-bag-h { display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--kdb-line); }
.kdb-bag-h b { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-family: var(--kdb-ui); }
.kdb-bag-h button { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--kdb-taupe); padding: 0; }
.kdb-bag-h button:hover, .kdb-bag-h button:focus { background: none; color: var(--kdb-ink); }
.kdb-bag-items { flex: 1; overflow-y: auto; padding: 4px 22px 12px;
  scrollbar-width: thin; scrollbar-color: var(--kdb-line) transparent; }
.kdb-bag-items::-webkit-scrollbar { width: 4px; }
.kdb-bag-items::-webkit-scrollbar-thumb { background: var(--kdb-line); border-radius: 2px; }

.kdb-bi { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 16px 0;
  border-bottom: 1px solid var(--kdb-line); }
.kdb-bi-busy { opacity: .45; pointer-events: none; }
.kdb-bi-th { position: relative; display: block; width: 64px; aspect-ratio: 3 / 4;
  background: var(--kdb-cream); border-radius: 2px; overflow: hidden; }
.kdb-bi-th img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.kdb-bi-th .kdb-weave { position: absolute; inset: 0; }
.kdb-bi-in { min-width: 0; }
.kdb-bi-name { font-size: 13px; color: var(--kdb-ink); display: block; margin-bottom: 3px; }
.kdb-bi-name:hover { color: var(--kdb-ink); text-decoration: underline; text-underline-offset: 3px; }
.kdb-bi-meta { display: block; font-size: 11px; color: var(--kdb-taupe); letter-spacing: .06em; margin-bottom: 10px; }
.kdb-bi-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.kdb-bi-qty { display: inline-flex; align-items: center; border: 1px solid var(--kdb-line); border-radius: 2px; }
.kdb-bi-qty button { width: 26px; height: 26px; background: none; border: 0; color: var(--kdb-ink-soft);
  font-size: 14px; line-height: 1; padding: 0; cursor: pointer; }
.kdb-bi-qty button:hover, .kdb-bi-qty button:focus { background: none; color: var(--kdb-ink); }
.kdb-bi-qty b { min-width: 26px; text-align: center; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.kdb-bi-price { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--kdb-ink); margin-left: auto; }
.kdb-bi-rm { background: none; border: 0; color: var(--kdb-taupe); font-size: 16px; line-height: 1;
  padding: 0; height: 18px; cursor: pointer; }
.kdb-bi-rm:hover, .kdb-bi-rm:focus { background: none; color: var(--kdb-ink); }
/* save for later (→ wishlist) sits beside the qty stepper */
.kdb-bi-qtywrap { display: inline-flex; align-items: center; gap: 10px; }
.kdb-bi-save { display: inline-flex; padding: 0; background: none; border: 0;
  cursor: pointer; transition: opacity .15s; }
.kdb-bi-save:hover, .kdb-bi-save:focus { background: none; opacity: .72; }
.kdb-bi-save svg { display: block; }

.kdb-bag-empty { text-align: center; color: var(--kdb-taupe); padding: 70px 0; font-size: 13px; }
.kdb-bag-empty .kdb-e1 { display: block; margin-bottom: 8px; }
.kdb-bag-f { padding: 16px 22px 22px; border-top: 1px solid var(--kdb-line); }
.kdb-bag-sub { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; color: var(--kdb-ink); }
.kdb-bag-sub b { font-variant-numeric: tabular-nums; }
/* what the bag gives back — sits between the subtotal and the delivery note.
   Ink rather than taupe: it's a reward, not fine print, but it must not shout
   over the subtotal, so it stays at note size. */
.kdb-bag-pts { font-size: 11.5px; color: var(--kdb-ink); margin: 0 0 8px; letter-spacing: .01em; }
.kdb-bag-note { font-size: 11px; color: var(--kdb-taupe); margin: 0 0 14px; }
.kdb-bag-co { display: block; text-align: center; padding: 15px 0; text-decoration: none; }

/* ═══════════════ CHECKOUT (mock parity) ═══════════════ */

body.woocommerce-checkout h1 { font-family: var(--kdb-disp); font-style: italic; font-weight: 500;
  font-size: clamp(28px, 3.5vw, 38px); text-align: left !important; max-width: 1160px;
  margin: 30px auto 0; padding: 0 clamp(18px, 4vw, 56px); color: var(--kdb-ink); }
body.woocommerce-checkout #content .woocommerce { max-width: 1160px; margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 56px) 110px; }

.kdb-co-main .kdb-co-saved { max-width: none; }
.kdb-co-main .kdb-ship-open { margin-bottom: 30px; }
/* signed-out band: the sign-in is a quiet inline link-button */
.kdb-auth-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--kdb-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kdb-auth-link:hover { color: var(--kdb-red); }
/* one-off delivery form: the way back to the saved addresses */
.kdb-ship-cancel { display: block; margin: 0 0 14px; padding: 0; background: none; border: 0;
  font-family: inherit; font-size: 12px; color: var(--kdb-taupe); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
.kdb-ship-cancel:hover { color: var(--kdb-ink); }
/* Account details: identity chips — view first, pencil opens the fields */
.kdb-chipset { display: flex; flex-direction: column; gap: 14px; margin: 0 0 20px; max-width: 560px;
  font-family: var(--kdb-ui); color: var(--kdb-ink); }
/* form controls don't inherit — keep every element on the brand face + ink
   (buttons keep their own colors: pencil/star taupe, warn pair, save tick) */
.kdb-chipset input, .kdb-chipset select, .kdb-chipset button { font-family: var(--kdb-ui); }
.kdb-chipset input, .kdb-chipset select { color: var(--kdb-ink); }
.kdb-chip-body label { color: var(--kdb-ink); }
.kdb-chip-card { position: relative; padding: 15px 17px 14px; background: var(--kdb-surface);
  border: 1px solid var(--kdb-line); border-radius: 11px; }
.kdb-chip-h { display: flex; align-items: center; gap: 8px; }
.kdb-chip-lab { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--kdb-taupe); }
.kdb-chip-edit { margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--kdb-taupe); cursor: pointer; transition: color .15s, border-color .15s; }
.kdb-chip-edit:hover { color: var(--kdb-ink); border-color: var(--kdb-line); }
/* the X (discard this chip's edits) appears only while the chip is open,
   left of the save/verify control */
.kdb-chip-x { display: none; margin-left: auto; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--kdb-taupe); cursor: pointer; transition: color .15s, border-color .15s; }
.kdb-chip-x:hover { color: var(--kdb-ink); border-color: var(--kdb-line); }
.kdb-chip-card.is-editing .kdb-chip-x { display: inline-flex; }
.kdb-chip-card.is-editing .kdb-chip-x ~ .kdb-chip-edit { margin-left: 0; }
.kdb-email-otp.kdb-hide { display: none !important; }
/* in-chip Save/Discard prompt (unsaved edits when another chip is opened) */
.kdb-chip-warn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 0;
  padding: 9px 12px; background: var(--kdb-cream); border: 1px solid var(--kdb-line); border-radius: 8px;
  font-size: 12.5px; color: var(--kdb-ink); }
.kdb-chip-warn-t { margin-right: auto; }
.kdb-chip-warn button { padding: 5px 14px; font-family: inherit; font-size: 12px; font-weight: 600;
  border-radius: 6px; cursor: pointer; transition: opacity .15s, border-color .15s; }
.kdb-chip-warn-save { background: var(--kdb-ink); color: #fff; border: 1px solid var(--kdb-ink); }
.kdb-chip-warn-save:hover { opacity: .85; }
.kdb-chip-warn-drop { background: none; color: var(--kdb-ink); border: 1px solid var(--kdb-line); }
.kdb-chip-warn-drop:hover { border-color: var(--kdb-taupe); }
.kdb-chip-card.is-editing .kdb-chip-edit { color: var(--kdb-red); border-color: var(--kdb-line); }
/* dirty chip: the pencil has become the save tick */
.kdb-chip-card.is-editing .kdb-chip-edit.is-save { color: var(--kdb-good, #2f7a3f); border-color: var(--kdb-line); }
.kdb-chip-card.is-editing .kdb-chip-edit.is-save:hover { background: rgba(47, 122, 63, .08); }
/* changed email: the header button becomes the Verify link — a change
   only saves through verification, and the label says so up front */
.kdb-chip-card.is-editing .kdb-chip-edit.is-verify { width: auto; height: auto; padding: 2px 4px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--kdb-ink); background: none;
  text-decoration: underline; text-underline-offset: 3px; border-color: transparent; }
.kdb-chip-card.is-editing .kdb-chip-edit.is-verify:hover { color: var(--kdb-taupe); }
/* value lines sit in the brand's warm taupe (the .kdb-sa-card voice) —
   ink is reserved for headings and typed input */
.kdb-chip-val { margin: 7px 0 0; font-size: 15px; color: var(--kdb-taupe); line-height: 1.5; }
.kdb-chip-val em { font-style: normal; font-size: 13px; color: var(--kdb-taupe); }
.kdb-chip-body { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--kdb-line); }
.kdb-chip-card.is-editing .kdb-chip-val { display: none; }
.kdb-chip-card.is-editing .kdb-chip-body { display: block; }
.kdb-chip-body select { width: 100%; padding: 10px 12px; font: inherit; font-size: 15px;
  border: 1px solid var(--kdb-line); border-radius: 2px; background: var(--kdb-cream); color: var(--kdb-ink); }
/* identity rows on Account details: read-only mobile + status chips */
.kdb-idrow .kdb-id-val { display: block; padding: 11px 0 2px; font-size: 15px; color: var(--kdb-ink); }
.kdb-idrow .kdb-id-val em { font-style: normal; font-size: 13px; color: var(--kdb-taupe); }
.kdb-id-chip { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
.kdb-id-chip.is-ok { background: rgba(47, 122, 63, .12); color: var(--kdb-good, #2f7a3f); }
.kdb-id-chip.is-warn { background: rgba(164, 50, 42, .1); color: var(--kdb-red); }
/* verified as an icon seal (chip headers) */
.kdb-id-ic { display: inline-flex; align-items: center; }
.kdb-id-ic svg { display: block; }
.kdb-id-ic.is-ok { color: var(--kdb-good, #2f7a3f); }
/* pending email: the header's Verify link (sends the code on click) */
.kdb-id-verify { padding: 0; background: none; border: 0; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--kdb-ink); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
.kdb-id-verify:hover { color: var(--kdb-taupe); }
.kdb-id-verify:disabled { opacity: .5; cursor: default; }
.kdb-everify-step { margin: 10px 0 0; }
.kdb-id-resend { margin-left: 8px; font-size: 11.5px; color: var(--kdb-taupe); text-decoration: underline; text-underline-offset: 3px; }
.kdb-id-resend:hover { color: var(--kdb-ink); }
/* email OTP step on Account details */
.kdb-email-otp .kdb-email-otp-code { max-width: 140px; letter-spacing: .3em; text-align: center; display: inline-block; margin-right: 8px; }
.kdb-email-otp-msg { display: block; margin-top: 6px; font-size: 11.5px; color: var(--kdb-taupe); }
.kdb-email-otp-msg.is-err { color: var(--kdb-red); font-weight: 600; }

/* two columns: fields left, cream summary panel right (mock 1.25fr/1fr).
   Astra's customizer CSS floats these at fixed widths with high-specificity
   selectors — the !importants are deliberate. */
body.woocommerce-checkout form.woocommerce-checkout { display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr);
  gap: 30px clamp(30px, 5vw, 70px); align-items: start; margin-top: 6px; }
.kdb-co-main { grid-column: 1; min-width: 0; }
.kdb-co-side { grid-column: 2; min-width: 0; background: var(--kdb-cream); border-radius: 2px;
  padding: 24px 22px; position: sticky; top: calc(var(--kdb-bar-top, 66px) + 20px); }
body.woocommerce-checkout form.woocommerce-checkout #customer_details {
  display: block; width: 100% !important; float: none !important; }
body.woocommerce-checkout form.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout form.woocommerce-checkout #customer_details .col-2 {
  float: none !important; width: 100% !important; max-width: none !important; padding: 0 !important; }
body.woocommerce-checkout form.woocommerce-checkout #order_review {
  width: 100% !important; float: none !important; border: 0 !important;
  margin: 0 !important; padding: 0 !important; background: none; position: static; }
/* Astra floats + boxes #order_review_heading at 40% — flatten it back into a label */
body.woocommerce-checkout form.woocommerce-checkout #order_review_heading.kdb-cs-title {
  display: block !important; float: none !important; width: auto !important; border: 0 !important;
  margin: 0 0 8px !important; padding: 0 !important; background: none !important; }

/* headings (hardened — Astra keeps re-sizing checkout h3s) */
body.woocommerce-checkout .woocommerce h3,
#ship-to-different-address { font-family: var(--kdb-ui); font-size: 11px !important; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--kdb-ink); margin: 0 0 16px; }
.kdb-co-h-addr { margin-top: 34px !important; }
#ship-to-different-address { display: flex; gap: 10px; align-items: center; margin-top: 26px; }

/* fields — mock: cream fill, quiet borders, two-up grid */
.kdb-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.kdb-frow .form-row { float: none !important; width: 100% !important; margin: 0 0 12px; padding: 0; }
.kdb-frow .form-row-wide, .kdb-frow .notes { grid-column: 1 / -1; }
.woocommerce form .form-row label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kdb-taupe); font-family: var(--kdb-ui); margin-bottom: 4px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid transparent; background: var(--kdb-cream); border-radius: 2px; padding: 12px 14px;
  font-family: var(--kdb-ui); font-size: 13px; color: var(--kdb-ink); width: 100%; }
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--kdb-taupe); outline: none; box-shadow: none; background: var(--kdb-cream); }
.woocommerce form .form-row input[type="checkbox"], .woocommerce form .form-row input[type="radio"] {
  accent-color: var(--kdb-ink); }
/* dropdowns (state etc.) match the text inputs — cream, on checkout AND
   account forms. WC/Astra ship white selectWoo skins that load after us,
   hence the !importants. */
.woocommerce form .form-row select { background-color: var(--kdb-cream) !important; }
.select2-container--default .select2-selection--single { border: 1px solid transparent !important;
  background: var(--kdb-cream) !important; border-radius: 2px; height: 45px; }
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--kdb-taupe) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 45px; padding-left: 14px; font-size: 13px; color: var(--kdb-ink); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 43px; }
.select2-dropdown { background: var(--kdb-paper); border: 1px solid var(--kdb-line);
  border-radius: 2px; font-family: var(--kdb-ui); font-size: 13px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--kdb-cream); border: 1px solid transparent; border-radius: 2px; padding: 8px 10px; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--kdb-ink); color: var(--kdb-cream); }

/* saved delivery/billing cards under the signed-in band */
.kdb-co-saved { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 640px;
  margin: 14px 0 0; transition: opacity .2s; }
.kdb-co-saved.kdb-sa-dim { opacity: .55; }
.kdb-sa-card { border: 1px solid var(--kdb-line); border-radius: 2px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px; }
.kdb-sa-card b { font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  font-family: var(--kdb-ui); color: var(--kdb-ink); font-weight: 600; }
.kdb-sa-card span { font-size: 12px; color: var(--kdb-taupe); line-height: 1.55; }
.kdb-sa-card a { align-self: flex-start; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--kdb-taupe); text-decoration: underline; text-underline-offset: 3px; margin-top: 2px; }
.kdb-sa-card a:hover { color: var(--kdb-ink); }
/* address-book pickers: default + saved entries stack; selected wears ink */
.kdb-sa-col { display: grid; gap: 10px; align-content: start; }
.kdb-sa-row { display: flex; gap: 16px; align-items: baseline; }
.kdb-sa-pick { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--kdb-ui);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--kdb-taupe);
  text-decoration: underline; text-underline-offset: 3px; }
.kdb-sa-pick:hover, .kdb-sa-pick:focus { color: var(--kdb-ink); background: none; }
.kdb-sa-card.kdb-sa-sel { border-color: var(--kdb-ink); }
.kdb-sa-card.kdb-sa-sel b::after { content: ""; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--kdb-red); margin-left: 8px; }
.kdb-sa-card.kdb-sa-sel .kdb-sa-pick { display: none; }
.kdb-addr-label-row { border-top: 1px solid var(--kdb-line); padding-top: 14px !important; margin-top: 6px !important; }
.kdb-ship-open { background: none; border: 0; padding: 0; margin: 12px 0 0; cursor: pointer;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--kdb-taupe);
  text-decoration: underline; text-underline-offset: 3px; font-family: var(--kdb-ui); }
.kdb-ship-open:hover, .kdb-ship-open:focus { color: var(--kdb-ink); background: none; }
@media (max-width: 560px) { .kdb-co-saved { grid-template-columns: 1fr; } }

/* address-mode helpers (see inc/checkout.php) */
.kdb-rows-hidden { display: none !important; }        /* saved values still POST */
.kdb-ship-h-hidden { display: none !important; }      /* WC's toggle, saved mode */
.shipping_address.kdb-ship-hidden { display: none !important; }

/* summary panel — items with thumbnails (mock .cs-item) */
.kdb-cs-items { margin-bottom: 4px; }
.kdb-cs-item { display: grid; grid-template-columns: 46px 1fr auto auto; gap: 12px; padding: 11px 0;
  font-size: 12px; align-items: center; border-bottom: 1px solid rgba(109,103,92,.14); }
.kdb-cs-thumb { width: 46px; height: 58px; border-radius: 2px; overflow: hidden; position: relative;
  display: block; background: var(--kdb-paper); }
.kdb-cs-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.kdb-cs-thumb .kdb-weave { position: absolute; inset: 0; }
.kdb-cs-item p { margin: 0; color: var(--kdb-ink); }
.kdb-cs-item .kdb-cs-m { color: var(--kdb-taupe); font-size: 11px; }
.kdb-cs-price { font-variant-numeric: tabular-nums; color: var(--kdb-ink); }
/* thumbnail + title link to the product (like the cart/drawer) */
.kdb-cs-name { display: block; color: var(--kdb-ink); text-decoration: none; }
.kdb-cs-name:hover, .kdb-cs-name:focus { text-decoration: underline; text-underline-offset: 2px; }
/* amend the bag from the review: qty stepper + remove × */
.kdb-cs-qtywrap { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; }
.kdb-cs-qty { display: inline-flex; align-items: center; width: max-content;
  border: 1px solid var(--kdb-line); border-radius: 2px; }
.kdb-cs-qty button { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--kdb-ink-soft); font-size: 14px; line-height: 1; cursor: pointer; }
.kdb-cs-qty button:hover, .kdb-cs-qty button:focus { background: none; color: var(--kdb-ink); }
.kdb-cs-qty b { min-width: 22px; text-align: center; font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.kdb-cs-rm { align-self: center; background: none; border: 0; padding: 0; color: var(--kdb-taupe);
  font-size: 15px; line-height: 1; cursor: pointer; }
.kdb-cs-rm:hover, .kdb-cs-rm:focus { background: none; color: var(--kdb-ink); }
/* save for later (→ wishlist) sits beside the qty stepper (see .kdb-cs-qtywrap) */
.kdb-cs-save { display: inline-flex; padding: 0; background: none; border: 0; cursor: pointer; transition: opacity .15s; }
.kdb-cs-save:hover, .kdb-cs-save:focus { background: none; opacity: .72; }
.kdb-cs-save svg { display: block; }

/* coupon inside the panel (mock) */
.kdb-cs-coupon { border-top: 0; border-bottom: 1px solid rgba(109,103,92,.2); }
.kdb-cs-coupon .kdb-acc-h { padding: 13px 0; }
.kdb-cs-couprow { display: flex; gap: 8px; margin: 4px 0 12px; }
.kdb-cs-couprow input { flex: 1; background: var(--kdb-paper); border: 1px solid transparent;
  border-radius: 2px; padding: 10px 12px; font-family: var(--kdb-ui); font-size: 12px; outline: none;
  color: var(--kdb-ink); min-width: 0; }
.kdb-cs-couprow input:focus { border-color: var(--kdb-taupe); }
.kdb-cs-couprow button { background: none; border: 1px solid var(--kdb-ink); border-radius: 2px;
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 0 16px;
  color: var(--kdb-ink); font-family: var(--kdb-ui); cursor: pointer; transition: all .15s; }
.kdb-cs-couprow button:hover, .kdb-cs-couprow button:focus { background: var(--kdb-ink); color: var(--kdb-cream); }
.kdb-coupon-msg { font-size: 11.5px; color: var(--kdb-taupe); }
.kdb-coupon-msg.is-err { color: var(--kdb-red); font-weight: 600; }
.kdb-coupon-msg .woocommerce-error, .kdb-coupon-msg .woocommerce-message,
.kdb-coupon-msg ul { list-style: none; margin: 0 0 10px; padding: 0; color: inherit; background: none; border: 0; }

/* "Offers for you" — the eligible-coupons list above the coupon box. One card
   per offer: the saving + a friendly line on the left, one-tap Apply on the
   right. Mirrors the coupon row's button so the two read as one system. */
.kdb-cs-offers { margin: 4px 0 2px; padding-bottom: 12px; border-bottom: 1px solid rgba(109,103,92,.2); }
.kdb-cs-offers-h { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kdb-taupe); margin-bottom: 9px; }
.kdb-cs-offer { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 11px; margin-bottom: 7px; background: var(--kdb-paper); border-radius: 3px; }
.kdb-cs-offer:last-child { margin-bottom: 0; }
.kdb-cs-offer-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kdb-cs-offer-badge { font-size: 13px; font-weight: 600; color: var(--kdb-ink); }
.kdb-cs-offer-desc { font-size: 11.5px; color: var(--kdb-taupe); }
.kdb-cs-offer-code { font-size: 10.5px; color: var(--kdb-ink-soft); letter-spacing: .04em; }
.kdb-cs-offer-apply { flex: none; background: none; border: 1px solid var(--kdb-ink); border-radius: 2px;
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 8px 14px;
  color: var(--kdb-ink); font-family: var(--kdb-ui); cursor: pointer; transition: all .15s; }
.kdb-cs-offer-apply:hover, .kdb-cs-offer-apply:focus { background: var(--kdb-ink); color: var(--kdb-cream); }
.kdb-cs-offer-apply:disabled { opacity: .5; cursor: default; }
/* a spend & save tier not yet reached: a quiet nudge, dimmed, with a padlock */
.kdb-cs-offer.is-locked { opacity: .72; }
.kdb-cs-offer.is-locked .kdb-cs-offer-badge { color: var(--kdb-taupe); }
.kdb-cs-offer-lock { flex: none; color: var(--kdb-taupe); display: inline-flex; }

/* wallet row rendered as an explanation instead of a checkbox (₹200 points floor) */
.kdb-co-woff { margin: 6px 0; font-size: 12px; color: var(--kdb-taupe); line-height: 1.5; }

/* totals rows (mock .cs-rows) */
.kdb-cs-rows { margin: 14px 0 16px; display: grid; gap: 7px; font-size: 13px; color: var(--kdb-ink); }
.kdb-cs-rows > div { display: flex; justify-content: space-between; gap: 14px; }
.kdb-cs-rows .kdb-cs-total { font-size: 15px; font-weight: 600;
  border-top: 1px solid rgba(109,103,92,.2); padding-top: 12px; margin-top: 5px; }
/* what the order gives back, under the total. `display:block` is load-bearing:
   `.kdb-cs-rows > div` makes every child a space-between flex ROW, which is
   right for "label ... amount" and wrong for a sentence. Matches the bag
   drawer's line (.kdb-bag-pts) — same promise, same voice, same weight. */
.kdb-cs-rows .kdb-cs-earn { display: block; font-size: 11.5px; color: var(--kdb-ink);
  letter-spacing: .01em; margin-top: -2px; }
.kdb-cs-coup .woocommerce-remove-coupon { font-size: 10.5px; margin-left: 8px; color: var(--kdb-taupe); }

/* payment — mock .pay cards */
body.woocommerce-checkout #payment { background: none !important; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 4px 0 6px; margin: 0;
  display: grid; gap: 10px; list-style: none; }
.woocommerce-checkout #payment ul.payment_methods li { border: 1px solid var(--kdb-line); border-radius: 2px;
  padding: 13px 15px; font-size: 12.5px; transition: border-color .15s; }
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) { border-color: var(--kdb-ink); }
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 600; color: var(--kdb-ink);
  font-size: 12.5px; display: inline; }
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box p { background: none !important; box-shadow: none; }
.woocommerce-checkout #payment div.payment_box { font-size: 11.5px;
  color: var(--kdb-taupe); padding: 6px 0 0; margin: 0; }
.woocommerce-checkout #payment div.payment_box p { margin: 0; padding: 0; color: var(--kdb-taupe); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
/* tight up to the privacy text, real breathing room around the button */
.woocommerce-checkout #payment div.form-row.place-order { padding: 4px 0 10px; margin: 0; }
#place_order { width: 100%; padding: 16px 0; font-size: 11.5px; letter-spacing: .18em;
  margin: 16px 0 8px !important;
  background: var(--kdb-ink) !important; color: var(--kdb-cream) !important; border: 1px solid var(--kdb-ink) !important; }
#place_order:hover { background: transparent !important; color: var(--kdb-ink) !important; }
.kdb-co-trust { text-align: center; font-size: 10.5px; color: var(--kdb-taupe); margin: 4px 0 0; }
.woocommerce-privacy-policy-text p { font-size: 10.5px; color: var(--kdb-taupe); line-height: 1.6; margin: 4px 0 0; }
.woocommerce-terms-and-conditions-wrapper { font-size: 11px; }

@media (max-width: 980px) {
  body.woocommerce-checkout form.woocommerce-checkout { grid-template-columns: 1fr; }
  .kdb-co-side { grid-column: 1; grid-row: 1; position: static; }
  .kdb-co-main { grid-column: 1; grid-row: 2; }
}

/* ═══════════════ WISHLIST ═══════════════ */

.kdb-wl { position: absolute; top: 10px; right: 10px; z-index: 3; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: rgba(247,244,236,.92); padding: 0;
  display: grid; place-items: center; opacity: 0; transition: opacity .2s, transform .15s; cursor: pointer; }
.kdb-card:hover .kdb-wl, .kdb-wl.on, .kdb-wl:focus-visible { opacity: 1; }
.kdb-wl:hover, .kdb-wl:focus { transform: scale(1.08); background: var(--kdb-paper); }
.kdb-wl svg { width: 16px; height: 16px; fill: none; stroke: var(--kdb-ink); stroke-width: 1.6; }
.kdb-wl.on svg { fill: var(--kdb-ink); }
.kdb-buyrow { display: flex; gap: 10px; margin-bottom: 24px; }
.kdb-buyrow .kdb-addbag { flex: 1; margin-bottom: 0; }

/* sticky Add-to-Bag — kdb.js reveals it once the main buy row scrolls off, so
   the CTA stays reachable on any page length (mobile + desktop) */
.kdb-sbuy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; flex-direction: column;
  background: var(--kdb-paper); border-top: 1px solid var(--kdb-line);
  box-shadow: 0 -2px 16px rgba(58, 53, 46, .1);
  transform: translateY(110%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); pointer-events: none; }
.kdb-sbuy.is-on { transform: translateY(0); pointer-events: auto; }
/* size sheet — opens upward from the bar so a size is pickable in place */
.kdb-sbuy-sizes { background: var(--kdb-cream); border-bottom: 1px solid var(--kdb-line); padding: 14px clamp(16px, 4vw, 56px); }
.kdb-sbuy-sizes-l { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--kdb-taupe); margin-bottom: 10px; font-family: var(--kdb-ui); }
.kdb-sbuy-srow { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1240px; margin: 0 auto; }
.kdb-sbuy-srow button { border: 1px solid var(--kdb-line); background: none; font-size: 12px; min-width: 52px;
  padding: 11px 8px; border-radius: 2px; color: var(--kdb-ink); font-family: var(--kdb-ui); cursor: pointer;
  letter-spacing: .02em; transition: all .12s; }
.kdb-sbuy-srow button:hover:not(:disabled) { border-color: var(--kdb-ink); }
.kdb-sbuy-srow button:disabled { opacity: .35; text-decoration: line-through; pointer-events: none; }
/* width:100% pins the row to the fixed bar — as a column-flex child its
   auto width was resolving to the (nowrap) name's min-content and overshooting
   the viewport, clipping the CTA. min-width:0 lets the name ellipsis engage. */
.kdb-sbuy-in { width: 100%; min-width: 0; max-width: 1240px; margin: 0 auto; padding: 11px clamp(16px, 4vw, 56px);
  display: flex; align-items: center; gap: 16px; }
.kdb-sbuy-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kdb-sbuy-name { font-family: var(--kdb-disp); font-style: italic; font-weight: 500; font-size: 18px;
  color: var(--kdb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kdb-sbuy-price { font-family: var(--kdb-ui); font-size: 13px; color: var(--kdb-ink); font-variant-numeric: tabular-nums; }
.kdb-sbuy-price del { color: var(--kdb-taupe); font-size: 12px; margin-left: 6px; }
.kdb-sbuy-price ins { text-decoration: none; }
.kdb-sbuy-add { flex: 0 0 auto; margin-bottom: 0; min-width: 160px; }
/* the picked colour, carried into the bar as a small swatch (mirrors the main
   selector; multicolour gets the gradient via the shared rule above) */
.kdb-sbuy-dot { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(28,26,23,.25); }
@media (max-width: 560px) {
  .kdb-sbuy-name { font-size: 15px; }
  .kdb-sbuy-add { min-width: 128px; padding-left: 22px; padding-right: 22px; }
  .kdb-sbuy-dot { width: 20px; height: 20px; }
}
.kdb-wl-pdp, .kdb-card:hover .kdb-wl-pdp { position: static; opacity: 1; width: 49px; height: 49px;
  border: 1px solid var(--kdb-line); border-radius: 2px; background: none; flex: none; }
.kdb-wl-pdp:hover, .kdb-wl-pdp:focus { border-color: var(--kdb-ink); transform: none; background: none; }

/* ═══════════════ HEADER (mock parity) ═══════════════ */

.kdb-hdr { position: sticky; top: 0; z-index: 60; background: var(--kdb-paper);
  border-bottom: 1px solid var(--kdb-line); box-shadow: none; min-height: 66px;
  display: flex; align-items: center; gap: 34px; padding: 0 clamp(18px, 4vw, 56px); }
/* monogram mark + live-text wordmark for recall */
.kdb-hdr-logo { display: flex; align-items: center; gap: 12px; flex: none; text-decoration: none; }
.kdb-hdr-logo img { height: 44px; width: auto; display: block; }
.kdb-hdr-name { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
.kdb-hdr-name-1 { font-family: var(--kdb-ui); text-transform: uppercase; font-weight: 600;
  font-size: 15px; letter-spacing: .26em; color: var(--kdb-ink); }
.kdb-hdr-name-2 { font-family: var(--kdb-ui); text-transform: uppercase; font-weight: 500;
  font-size: 8px; letter-spacing: .2em; color: var(--kdb-taupe); margin-top: 6px; }
/* phones: shrink the mark a touch; the name (incl. descriptor) still fits beside
   the icons at typical widths */
@media (max-width: 560px) {
  .kdb-hdr-logo { gap: 9px; }
  .kdb-hdr-logo img { height: 38px; }
  .kdb-hdr-name-1 { font-size: 12.5px; letter-spacing: .2em; }
  .kdb-hdr-name-2 { font-size: 7.5px; letter-spacing: .16em; margin-top: 5px; }
}
.kdb-hdr-mark { font-size: 30px; color: var(--kdb-ink); }
.kdb-rdot { color: var(--kdb-red); }
.kdb-rdot-dark { color: var(--kdb-red-dark); }
.kdb-hdr-nav { display: flex; gap: 26px; align-self: stretch; align-items: stretch; }
.kdb-nav-item { position: relative; display: flex; align-items: center; }
.kdb-hdr-nav .kdb-nav-top { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  position: relative; padding: 6px 0; color: var(--kdb-ink); font-family: var(--kdb-ui); text-decoration: none; }
.kdb-hdr-nav .kdb-nav-top::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--kdb-ink); transition: right .25s; }
.kdb-nav-item:hover .kdb-nav-top::after, .kdb-nav-item:focus-within .kdb-nav-top::after { right: 0; }
/* subcategory dropdown — sits flush under the header hairline */
.kdb-ndrop { position: absolute; top: 100%; left: -20px; min-width: 210px; z-index: 70;
  background: var(--kdb-paper); border: 1px solid var(--kdb-line); border-top: 0;
  border-radius: 0 0 2px 2px; box-shadow: 0 16px 34px rgba(28,26,23,.12); padding: 8px 0 10px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.kdb-nav-item:hover .kdb-ndrop, .kdb-nav-item:focus-within .kdb-ndrop {
  opacity: 1; visibility: visible; transform: none; }
.kdb-ndrop a { display: block; padding: 8px 20px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--kdb-taupe); text-decoration: none; font-family: var(--kdb-ui); font-weight: 500; }
.kdb-ndrop a:hover { color: var(--kdb-ink); background: var(--kdb-cream); }
.kdb-ndrop .kdb-ndrop-all { color: var(--kdb-ink); font-weight: 600;
  border-bottom: 1px solid var(--kdb-line); padding-bottom: 11px; margin-bottom: 6px; }
/* subcategories flow into fresh columns after 5 rows */
.kdb-ndrop-cols { display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column;
  grid-auto-columns: minmax(170px, auto); column-gap: 6px; }
.kdb-hdr-search { margin-left: auto; flex: 0 1 300px; display: flex; align-items: center; gap: 8px;
  background: var(--kdb-cream); border: 1px solid transparent; border-radius: 2px;
  padding: 8px 14px; color: var(--kdb-taupe); }
.kdb-hdr-search:focus-within { border-color: var(--kdb-taupe); }
.kdb-hdr-search input[type="search"] { border: 0; background: none; outline: none; box-shadow: none;
  font-family: var(--kdb-ui); font-size: 12px; width: 100%; color: var(--kdb-ink); padding: 0; min-height: 0; }
.kdb-hdr-sbtn { background: none; border: 0; padding: 0; display: grid; place-items: center;
  color: inherit; cursor: pointer; flex: none; }
.kdb-hdr-sbtn:hover, .kdb-hdr-sbtn:focus { background: none; color: var(--kdb-ink); }
.kdb-hdr-ic { display: flex; gap: 20px; align-items: center; flex: none; }
.kdb-hgreet { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--kdb-taupe); text-decoration: none; font-family: var(--kdb-ui);
  white-space: nowrap; margin-right: -6px; }
.kdb-hgreet:hover { color: var(--kdb-ink); }
.kdb-hicon { position: relative; background: none; border: 0; padding: 2px; display: grid;
  place-items: center; color: var(--kdb-ink); cursor: pointer; }
.kdb-hicon:hover, .kdb-hicon:focus { background: none; color: var(--kdb-taupe); }
.kdb-hicon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.5; }
/* signed in: red head + solid ink body (the footer's theme black) */
.kdb-hacct.in svg circle { fill: var(--kdb-red); stroke: var(--kdb-red); }
.kdb-hacct.in svg path { fill: var(--kdb-ink); stroke: var(--kdb-ink); }
/* anything wishlisted: the heart fills red */
.kdb-hwl.on svg { fill: var(--kdb-red); stroke: var(--kdb-red); }
.kdb-bag-badge, .kdb-wl-badge { position: absolute; top: -5px; right: -7px; min-width: 15px; height: 15px; border-radius: 50%;
  background: var(--kdb-red); color: #fff; font-size: 9px; font-weight: 600;
  display: grid; place-items: center; padding: 0 3px; }
.kdb-hide { display: none; }
.kdb-hmenu { display: none; }

/* mobile nav drawer */
.kdb-mscrim { position: fixed; inset: 0; background: rgba(28,26,23,.45); z-index: 88; opacity: 0;
  pointer-events: none; transition: opacity .25s; }
.kdb-mscrim.on { opacity: 1; pointer-events: auto; }
.kdb-mnav { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); z-index: 89;
  background: var(--kdb-paper); transform: translateX(-103%);
  transition: transform .3s cubic-bezier(.22,.72,.28,1); padding: 20px 24px;
  display: flex; flex-direction: column; overflow-y: auto; }
.kdb-mnav.on { transform: none; }
.kdb-mnav-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.kdb-mnav-h b { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-family: var(--kdb-ui); }
.kdb-mnav-h button { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--kdb-taupe); }
.kdb-mnav a { padding: 13px 0; border-bottom: 1px solid var(--kdb-line); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--kdb-ink); text-decoration: none;
  font-family: var(--kdb-ui); font-weight: 600; }
.kdb-mnav a.kdb-mnav-sub { padding-left: 18px; font-weight: 500; letter-spacing: .08em;
  text-transform: none; font-size: 12.5px; color: var(--kdb-taupe); }

@media (max-width: 1150px) { .kdb-hdr { gap: 22px; } .kdb-hdr-nav { gap: 18px; } .kdb-hdr-search { flex-basis: 190px; } }
@media (max-width: 980px) { .kdb-hdr-nav, .kdb-hdr-search, .kdb-hgreet { display: none; } .kdb-hmenu { display: grid; } }
/* small phones: tighten the header + icon gaps so the full wordmark (with the
   "Designer Boutique" descriptor) fits beside the icons — placed after the base
   rules so it wins the cascade. Very narrow screens drop the descriptor rather
   than clip the menu icon. */
@media (max-width: 560px) { .kdb-hdr { gap: 14px; } .kdb-hdr-ic { gap: 14px; } }
@media (max-width: 340px) { .kdb-hdr-name-2 { display: none; } }

/* ═══════════════ FOOTER (mock parity) ═══════════════ */

.kdb-ftr { background: var(--kdb-ink); color: var(--kdb-cream);
  padding: clamp(50px, 7vw, 80px) clamp(18px, 4vw, 56px) 34px; }
.kdb-ftr-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px;
  max-width: 1280px; margin: 0 auto; }
.kdb-ftr-mark { font-size: 44px; line-height: 1; color: var(--kdb-cream); }
.kdb-ftr-logo { display: block; width: 170px; height: auto; margin: -14px 0 0 -12px; } /* lockup PNG carries its own padding */
.kdb-ftr p { color: rgba(242,237,225,.55); font-size: 12.5px; max-width: 30ch; margin: 16px 0 0; }
.kdb-ftr h5 { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 14px;
  color: rgba(242,237,225,.5); font-family: var(--kdb-ui); font-weight: 600; }
/* lists flow into fresh columns after 6 rows (same rule as nav dropdowns)
   so a growing catalogue widens the footer instead of stretching it */
.kdb-ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px 26px; font-size: 13px;
  grid-template-rows: repeat(6, auto); grid-auto-flow: column; justify-content: start; }
.kdb-ftr ul a { color: var(--kdb-cream); text-decoration: none; }
.kdb-ftr ul a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.kdb-ftr-news p { margin: 0; }
/* light field on the ink ground — same cream as the header search */
.kdb-ftr-news input:not([type="submit"]):not([type="button"]) { width: 100%;
  background: var(--kdb-cream) !important; border: 1px solid transparent !important;
  border-radius: 2px !important; color: var(--kdb-ink) !important; font-family: var(--kdb-ui);
  font-size: 13px; padding: 11px 14px !important; outline: none; }
.kdb-ftr-news input:not([type="submit"]):focus { border-color: var(--kdb-taupe) !important; }
.kdb-ftr-news input::placeholder { color: var(--kdb-taupe); opacity: 1; }
.kdb-ftr-news label { color: rgba(242,237,225,.55) !important; font-size: 11px; }
.kdb-ftr-news button, .kdb-ftr-news input[type="submit"] { margin-top: 14px;
  background: var(--kdb-cream) !important; color: var(--kdb-ink) !important; border: 0 !important;
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: 11px 24px !important; border-radius: 2px !important; }
.kdb-ftr-legal { max-width: 1280px; margin: 46px auto 0; padding-top: 20px;
  border-top: 1px solid rgba(242,237,225,.14); display: flex; flex-wrap: wrap; gap: 10px 24px;
  font-size: 11px; color: rgba(242,237,225,.4); }
.kdb-ftr-legal span:last-child { margin-left: auto; }
/* on narrow screens the row wraps; a hard-right last item then strands the
   domain alone on its own line, so let it sit in the natural stack instead */
@media (max-width: 640px) { .kdb-ftr-legal span:last-child { margin-left: 0; } }
@media (max-width: 820px) { .kdb-ftr-grid { grid-template-columns: 1fr 1fr; } }

/* ═══════════════ HOME (mock parity, boxed) ═══════════════ */

body.home #content > .ast-container { display: block; width: 100%; max-width: none; padding-left: 0; padding-right: 0; }
.kdb-hero { max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); align-items: center;
  gap: clamp(30px, 5vw, 70px);
  padding: clamp(48px, 7vw, 100px) clamp(18px, 4vw, 56px) clamp(48px, 7vw, 90px); }
/* photo slot — fed by the Home page's featured image, weave until then */
.kdb-hero-ph { position: relative; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden;
  background: var(--kdb-cream); }
.kdb-hero-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kdb-hero-ph .kdb-weave { position: absolute; inset: 0; }
.kdb-hero-ph .kdb-ini { font-size: 72px; right: 20px; bottom: 8px; }
.kdb-hero-hint { position: absolute; left: 14px; right: 14px; bottom: 14px; text-align: center;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(28,26,23,.5);
  font-family: var(--kdb-ui); }
@media (max-width: 900px) {
  .kdb-hero { grid-template-columns: 1fr; gap: 26px; }
  /* Lead with the garment on mobile: the image comes first (the whole fold was
     text otherwise), then the eyebrow/headline/CTAs beneath it. */
  .kdb-hero-ph { order: -1; max-width: 100%; }
  .kdb-hero-sub { margin-bottom: 26px; }
}
.kdb-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--kdb-taupe); margin: 0 0 22px; font-family: var(--kdb-ui); }
.kdb-hero h1 { font-family: var(--kdb-disp); font-style: italic; font-weight: 500;
  font-size: clamp(44px, 7.2vw, 92px); line-height: 1.04; margin: 0 0 26px; max-width: 12ch;
  text-wrap: balance; letter-spacing: .005em; color: var(--kdb-ink); }
.kdb-hero-sub { max-width: 46ch; color: var(--kdb-ink-soft); font-size: 15px; margin: 0 0 36px; }
.kdb-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.kdb-cta { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; padding: 15px 34px; border-radius: 2px; border: 1px solid var(--kdb-ink);
  transition: all .2s; text-decoration: none; font-family: var(--kdb-ui); }
.kdb-cta-solid { background: var(--kdb-ink); color: var(--kdb-cream); }
.kdb-cta-solid:hover { background: transparent; color: var(--kdb-ink); }
.kdb-cta-ghost { color: var(--kdb-ink); }
.kdb-cta-ghost:hover { background: var(--kdb-ink); color: var(--kdb-cream); }

/* category hero — two-column band on a category archive that carries an image */
.kdb-chero { max-width: 1180px; margin: 0 auto 30px; padding: 6px clamp(18px, 4vw, 56px) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  gap: clamp(22px, 5vw, 60px); align-items: center; }
.kdb-chero-h { font-family: var(--kdb-disp); font-style: italic; font-weight: 500;
  font-size: clamp(34px, 5.2vw, 64px); line-height: 1.05; margin: 0 0 16px; color: var(--kdb-ink);
  text-wrap: balance; letter-spacing: .005em; }
.kdb-chero-sub { max-width: 44ch; color: var(--kdb-ink-soft); font-size: 15px; }
.kdb-chero-sub p { margin: 0; }
.kdb-chero-ph { position: relative; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden;
  background: var(--kdb-cream); }
.kdb-chero-ph .kdb-chero-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
@media (max-width: 900px) {
  .kdb-chero { grid-template-columns: 1fr; gap: 18px; margin-bottom: 22px; }
  .kdb-chero-ph { max-width: 380px; }
}

.kdb-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  padding: 0 clamp(18px, 4vw, 56px); max-width: 1280px; margin: 0 auto; }
.kdb-cat { position: relative; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden;
  display: flex; align-items: flex-end; }
.kdb-cat .kdb-weave { position: absolute; inset: 0; transition: transform .5s; }
.kdb-cat:hover .kdb-weave { transform: scale(1.04); }
.kdb-cat .kdb-cat-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; transition: transform .5s; }
.kdb-cat:hover .kdb-cat-img { transform: scale(1.04); }
.kdb-cat-l { position: relative; z-index: 2; margin: 0 0 22px 22px; background: var(--kdb-paper);
  padding: 10px 18px; font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; border-radius: 2px; font-family: var(--kdb-ui); color: var(--kdb-ink); }

.kdb-strip { max-width: 760px; margin: 0 auto; text-align: center; padding: clamp(70px, 9vw, 120px) 24px; }
.kdb-strip h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.2; margin: 0 0 16px; color: var(--kdb-ink); }
.kdb-strip p { color: var(--kdb-ink-soft); max-width: 52ch; margin: 0 auto; }

.kdb-featured { padding: 0 clamp(18px, 4vw, 56px) 30px; max-width: 1280px; margin: 0 auto; }
.kdb-sechead { display: flex; align-items: baseline; gap: 20px; margin-bottom: 26px; }
.kdb-sechead h3, .kdb-sechead h2 { font-size: 30px; margin: 0; color: var(--kdb-ink); }
.kdb-sechead a { margin-left: auto; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--kdb-taupe); text-decoration: underline; text-underline-offset: 3px; }
.kdb-sechead a:hover { color: var(--kdb-ink); }

.kdb-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--kdb-line);
  border-block: 1px solid var(--kdb-line); margin-top: 70px; }
.kdb-svc { background: var(--kdb-paper); padding: 34px 28px; text-align: center; }
.kdb-svc b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: 7px; font-family: var(--kdb-ui); color: var(--kdb-ink); }
.kdb-svc span { font-size: 12.5px; color: var(--kdb-taupe); }

@media (max-width: 820px) {
  .kdb-cats { grid-template-columns: 1fr; }
  .kdb-services { grid-template-columns: 1fr; }
}

/* ═══════════════ MY ACCOUNT ═══════════════
   WooCommerce core floats the nav at 30% / content at 68% with
   .woocommerce-account-prefixed selectors — the !importants below settle
   that (same pattern as the checkout vs Astra fight). */

body.woocommerce-account h1, body.woocommerce-account h1.uagb-heading-text {
  font-family: var(--kdb-disp); font-style: italic; font-weight: 500;
  font-size: clamp(28px, 3.5vw, 38px); text-align: left; max-width: 1100px;
  margin: 30px auto 0; padding: 0 clamp(18px, 4vw, 56px); color: var(--kdb-ink); }
.kdb-acct-name { font-size: .58em; color: var(--kdb-taupe); letter-spacing: .01em; white-space: nowrap; }

/* ── Wallet & rewards (My Account tab) ─────────────────────────────── */
.kdb-wallet-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 6px 0 26px; }
.kdb-wallet-card { border: 1px solid var(--kdb-line); border-radius: 4px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; background: var(--kdb-surface); }
/* The tier card holds the CHIP now (the seal read too gaudy) — so it matches
   the two plain cards beside it, and the chip sits in the value slot where a
   number would. The chip's own height is taller than a line of text, so give
   the value slot room to seat it without nudging the hint. */
.kdb-wallet-card.is-tier .kdb-wallet-v { display: flex; align-items: center; min-height: 34px; }
.kdb-wallet-card.is-tier .kdb-wallet-h { max-width: 24ch; }
.kdb-wallet-k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--kdb-taupe); }
.kdb-wallet-v { font-family: var(--kdb-disp); font-size: 26px; color: var(--kdb-ink); font-variant-numeric: tabular-nums; }
.kdb-wallet-v .woocommerce-Price-amount { font-family: inherit; }
.kdb-wallet-h { font-size: 12px; color: var(--kdb-taupe); line-height: 1.5; }
.kdb-wallet h3 { font-size: 15px; letter-spacing: .04em; margin: 0 0 10px; }
table.kdb-wallet-ledger { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.kdb-wallet-ledger th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--kdb-taupe); padding: 8px 10px; border-bottom: 1px solid var(--kdb-line); }
table.kdb-wallet-ledger td { padding: 9px 10px; border-bottom: 1px solid var(--kdb-line); }
table.kdb-wallet-ledger td.is-in { color: #4f8a5a; font-weight: 600; white-space: nowrap; }
table.kdb-wallet-ledger td.is-out { color: var(--kdb-ink); white-space: nowrap; }
.kdb-wallet-ord { color: var(--kdb-taupe); font-size: 12px; }
.kdb-wallet-terms { margin-top: 18px; font-size: 12.5px; color: var(--kdb-taupe); }

/* tier ladder — one bar, equal-spaced rungs, fill = trailing-window spend */
/* Tier badges (.kdb-tchip / .kdb-tseal) live in assets/css/tier-badge.css —
   a SHARED file: the Store OS bundle (counter.css) shows the same chip and
   never loads this one. Do not re-add them here. */

.kdb-tierladder { margin: -6px 0 30px; padding: 22px 26px 18px; border: 1px solid var(--kdb-line); border-radius: 4px; background: var(--kdb-surface); }
.kdb-tierbar { position: relative; height: 6px; border-radius: 999px; background: var(--kdb-line); margin: 6px 8px 14px; }
.kdb-tierbar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--kdb-ink); }
.kdb-tierbar-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%); background: #fff; border: 2px solid var(--kdb-line); box-sizing: border-box; }
.kdb-tierbar-dot.is-hit { background: var(--kdb-ink); border-color: var(--kdb-ink); }
.kdb-tierbar-dot.is-you { border-color: var(--kdb-red); box-shadow: 0 0 0 3px rgba(164, 50, 42, .18); }
.kdb-tierbar-labs { position: relative; height: 34px; margin: 0 8px; }
.kdb-tierbar-lab { position: absolute; top: 0; transform: translateX(-50%); text-align: center; white-space: nowrap; font-family: var(--kdb-ui); }
.kdb-tierbar-lab.is-first { transform: none; text-align: left; }
.kdb-tierbar-lab.is-last { transform: translateX(-100%); text-align: right; }
.kdb-tierbar-lab b { display: block; font-size: 11px; letter-spacing: .06em; font-weight: 600; color: var(--kdb-ink); }
.kdb-tierbar-lab i { display: block; font-style: normal; font-size: 10.5px; color: var(--kdb-taupe); font-variant-numeric: tabular-nums; }
/* red is an accent, never text — the "you" rung gets an accent underline */
.kdb-tierbar-lab.is-you b { border-bottom: 2px solid var(--kdb-red); padding-bottom: 1px; }
/* the "Last 12 months: ₹X of shopping" line — 22px + the labels' own ~8px slack
   ≈ a clear 30px gap, framed by the card's 18px bottom padding.
   ⚠ MUST be scoped .kdb-tierladder .kdb-tierbar-cap (0,2,0): this is a <p>, and
   `.woocommerce-MyAccount-content p { margin: 0 0 14px }` (0,1,1, line ~1188)
   pins its top margin to 0 on the wallet page. A bare .kdb-tierbar-cap (0,1,0)
   loses to it — which is why 4px, 16px and 22px all rendered identically. Same
   content-scoped trap as the account-page buttons. */
.kdb-tierladder .kdb-tierbar-cap { margin: 22px 0 0; font-size: 12px; color: var(--kdb-taupe); }
@media (max-width: 560px) {
  .kdb-tierbar-lab b { font-size: 9.5px; letter-spacing: .02em; }
  .kdb-tierbar-lab i { font-size: 9px; }
}

/* checkout wallet panel — sits above the payment methods */
.kdb-co-wallet { border: 1px solid var(--kdb-line); border-radius: 4px; padding: 14px 16px; margin: 0 0 16px; background: var(--kdb-paper); }
.kdb-co-wallet h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--kdb-taupe); }
.kdb-co-wrow { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; margin: 6px 0; cursor: pointer; }
.kdb-co-wrow input { margin-top: 3px; accent-color: var(--kdb-ink); }
.kdb-co-wnote { margin: 8px 0 0; font-size: 11.5px; color: var(--kdb-taupe); line-height: 1.5; }
body.woocommerce-account #content .woocommerce { max-width: 1100px; margin: 0 auto;
  padding: 20px clamp(18px, 4vw, 56px) 100px; }

/* logged-out: centred login card */
body.woocommerce-account:not(.logged-in) #content .woocommerce { max-width: 480px; }
body.woocommerce-account:not(.logged-in) h1 { max-width: 480px; }
.woocommerce form.login, .woocommerce form.register { border: 1px solid var(--kdb-line);
  border-radius: 2px; padding: 26px; margin: 0; }
.woocommerce form.login .form-row, .woocommerce form.register .form-row {
  float: none !important; width: 100% !important; margin: 0 0 12px; padding: 0; }

/* logged-in: rail + content.
   WooCommerce clearfixes .woocommerce with ::before/::after — in a grid those
   pseudos become phantom grid ITEMS that steal cell 1 (nav then lands in
   column 2, content wraps to row 2). Kill them and place cells explicitly. */
body.woocommerce-account.logged-in #content .woocommerce { display: grid;
  grid-template-columns: 220px minmax(0, 1fr); gap: 24px clamp(28px, 5vw, 64px); align-items: start; }
body.woocommerce-account.logged-in #content .woocommerce::before,
body.woocommerce-account.logged-in #content .woocommerce::after { content: none; display: none; }
body.woocommerce-account.logged-in #content .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: 1; }
body.woocommerce-account.logged-in #content .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
body.woocommerce-account.logged-in #content .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; grid-row: 2; }
body.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none !important; width: 100% !important; }
body.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important; width: 100% !important; min-width: 0;
  font-size: 13.5px; line-height: 1.75; color: var(--kdb-ink-soft); }

body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0;
  border: 0 !important; border-top: 1px solid var(--kdb-line) !important; }
body.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0;
  border: 0 !important; border-bottom: 1px solid var(--kdb-line) !important; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 13px 2px; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; font-family: var(--kdb-ui); font-weight: 600;
  color: var(--kdb-taupe); text-decoration: none; background: none; }
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation li a:hover { color: var(--kdb-ink); background: none; }

.woocommerce-MyAccount-content a { color: var(--kdb-ink); }
.woocommerce-MyAccount-content p { margin: 0 0 14px; }
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3,
body.woocommerce-account .woocommerce-Address-title h3 { font-family: var(--kdb-ui);
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--kdb-ink); margin: 0 0 14px; }

/* GLOBAL account ground: WooCommerce/Astra keep painting individual
   surfaces white (tables, address boxes, order details, card headers) —
   one rule grounds every structural surface inside the account content.
   Deliberate exceptions: buttons, form fields, notices, kdb components. */
body.woocommerce-account .woocommerce-MyAccount-content :is(
  address, header, section, .woocommerce-column, .woocommerce-columns, .woocommerce-column__title,
  .woocommerce-order-details, .woocommerce-customer-details, .woocommerce-table,
  table, thead, tbody, tfoot, tr, th, td, fieldset,
  .col2-set, .col-1, .col-2, .order_details, .order_details li, mark, h2, h3
) { background: transparent !important; box-shadow: none !important; }
/* view-order address boxes: quiet outline cards */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details address {
  border: 1px solid var(--kdb-line) !important; border-radius: 2px; padding: 16px 18px; font-style: normal; }

/* order-item thumbnails (orders table + view-order) */
.kdb-oth { width: 36px; height: 46px; border-radius: 2px; overflow: hidden; position: relative;
  display: inline-block; background: var(--kdb-cream); flex: none; vertical-align: middle; }
.kdb-oth img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.kdb-oth .kdb-weave { position: absolute; inset: 0; }
.kdb-oth-row { display: inline-flex; gap: 5px; align-items: center; }
.kdb-oth-more { font-size: 10.5px; color: var(--kdb-taupe); }
.kdb-oi { display: inline-flex; gap: 12px; align-items: center; }

/* orders & tables — every surface stays on the page ground (Astra/WC
   paint white cells/tables with late-loading CSS, hence the !importants) */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table { border: 0 !important; width: 100%;
  background: none !important; border-collapse: collapse !important; }
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td { vertical-align: middle; }
/* Astra sets display:block on the order-actions cell — it pops out of table
   layout and its row line lands 20px high. Desktop only (mobile stacks). */
@media (min-width: 769px) {
  body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td,
  body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th { display: table-cell !important; }
}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td { border: 0;
  border-bottom: 1px solid var(--kdb-line); padding: 11px 8px; font-size: 12.5px; background: none !important; }
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--kdb-taupe); }
.woocommerce-MyAccount-content .woocommerce-orders-table__cell .button { padding: 8px 14px; font-size: 10px; }
body.woocommerce-account .woocommerce-MyAccount-content mark { background: none; color: var(--kdb-ink); font-weight: 600; }
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details address {
  border: 1px solid var(--kdb-line); border-radius: 2px; padding: 16px 18px; background: none; }
/* quiet notices, one tone everywhere in the account area */
body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error { background: var(--kdb-cream) !important;
  color: var(--kdb-ink-soft) !important; border: 0 !important; border-radius: 2px; }

/* addresses page: two outline cards, side by side.
   WC clearfixes .col2-set with ::before/::after — in a grid those pseudos
   become phantom grid items that push the cards diagonal (same gotcha as
   the account wrapper above). */
body.woocommerce-account .woocommerce-MyAccount-content .col2-set { display: grid;
  grid-template-columns: 1fr 1fr; gap: 20px; width: 100% !important; }
body.woocommerce-account .woocommerce-MyAccount-content .col2-set::before,
body.woocommerce-account .woocommerce-MyAccount-content .col2-set::after { content: none !important; display: none !important; }
body.woocommerce-account .woocommerce-MyAccount-content .col2-set .col-1,
body.woocommerce-account .woocommerce-MyAccount-content .col2-set .col-2 {
  float: none !important; width: 100% !important; max-width: none !important;
  border: 1px solid var(--kdb-line); border-radius: 2px; padding: 18px 20px !important;
  background: none !important; }
/* Astra paints the card header band white — flatten it into the card */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
  background: none !important; border: 0 !important; padding: 0 !important;
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0 0 10px; }
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 { margin: 0; }
/* "Add/Edit billing|shipping address" reads as a link, not a white button */
body.woocommerce-account .woocommerce-MyAccount-content .col2-set a.edit,
body.woocommerce-account .woocommerce-MyAccount-content .col2-set a.button,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address a.edit,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address a.button {
  background: none !important; border: 0 !important; border-radius: 0; padding: 0 !important;
  color: var(--kdb-ink) !important; font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; font-family: var(--kdb-ui);
  text-decoration: underline !important; text-underline-offset: 3px; }
body.woocommerce-account .woocommerce-MyAccount-content .col2-set a.edit:hover,
body.woocommerce-account .woocommerce-MyAccount-content .col2-set a.button:hover,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address a.edit:hover,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address a.button:hover {
  color: var(--kdb-taupe) !important; background: none !important; }

/* account forms (edit account / edit address) */
body.woocommerce-account .woocommerce-MyAccount-content .form-row {
  float: none !important; width: 100% !important; margin: 0 0 12px; padding: 0; }
.woocommerce-MyAccount-content fieldset { border: 0; margin: 26px 0 0; padding: 0; }
.woocommerce-MyAccount-content legend { font-family: var(--kdb-ui); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--kdb-ink); margin-bottom: 14px; }

/* Delivery addresses: the chip book (my-address.php) */
.kdb-book-hint { font-size: 12px; color: var(--kdb-taupe); margin-top: 22px; font-family: var(--kdb-ui); }
.kdb-bookset { margin-top: 16px; }
form.kdb-chip-card { margin: 0; }
/* the "also your billing address" remark under the primary chip — "billing
   address" links to Account details (the primary is edited there) */
.kdb-chip-note { margin: 4px 0 0; font-size: 11.5px; color: var(--kdb-taupe); font-family: var(--kdb-ui); }
.kdb-chip-note em { font-style: normal; }
.kdb-chip-editlink { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.kdb-chip-editlink:hover { color: var(--kdb-ink); }
/* the star (default delivery) leads the right-side control group */
.kdb-chip-star { margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--kdb-taupe); transition: color .15s, border-color .15s; }
a.kdb-chip-star:hover { color: var(--kdb-ink); border-color: var(--kdb-line); }
.kdb-chip-star.is-on { color: var(--kdb-ink); }
.kdb-chip-star ~ .kdb-chip-del, .kdb-chip-star ~ .kdb-chip-x, .kdb-chip-star ~ .kdb-chip-edit { margin-left: 0; }
/* trash on book chips */
.kdb-chip-del { margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--kdb-taupe); cursor: pointer; transition: color .15s, border-color .15s; }
.kdb-chip-del:hover { color: var(--kdb-ink); border-color: var(--kdb-line); }
.kdb-book-chip .kdb-chip-del ~ .kdb-chip-x,
.kdb-book-chip .kdb-chip-del ~ .kdb-chip-edit { margin-left: 0; }
/* checkout: "save this address" tickbox */
.kdb-addr-save { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--kdb-ink); cursor: pointer; }
.kdb-addr-save input { width: auto; margin: 0; }

/* ── checkout left column: identity lines under the title + Deliver-to chip.
   Title + lines read as ONE block: the form's top margin shrinks on
   checkout, and the line margins outrank Astra's .entry-content p. ── */
.kdb-co-hdot { color: var(--kdb-red); font-style: normal; }
.kdb-co-head { margin: 0 0 16px; font-family: var(--kdb-ui); }
.kdb-co-head .kdb-co-idline { display: flex; flex-wrap: wrap; gap: 2px 16px;
  margin: 0 0 3px; font-size: 13.5px; color: var(--kdb-taupe); }
.kdb-co-head .kdb-co-billline { margin: 0; font-size: 12.5px; color: var(--kdb-taupe); font-family: var(--kdb-ui); }
.kdb-co-chips { margin: 0 0 16px; }
.kdb-co-id { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kdb-co-id em { font-style: normal; font-size: 12px; color: var(--kdb-taupe); }
/* "Add mobile" / "Add email" links in the identity line — same size as the
   values beside them (font:inherit resets the UA button font first) */
.kdb-co-idline .kdb-co-add { font: inherit; font-size: 13.5px; padding: 0; background: none;
  border: 0; color: var(--kdb-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.kdb-co-idline .kdb-co-add:hover { color: var(--kdb-taupe); }
/* the "(Sign in)" link in the guest checkout heading */
.kdb-co-hsignin { font-family: var(--kdb-ui); font-size: 14px; font-style: normal; color: var(--kdb-taupe); }
.kdb-co-hsignin .kdb-auth-link { font: inherit; padding: 0; background: none; border: 0; color: var(--kdb-red);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.kdb-co-hsignin .kdb-auth-link:hover { color: var(--kdb-ink); }
/* the required-* on "Add mobile": inline-block gives it its OWN decoration box
   so the button's underline (text-decoration on .kdb-co-add) can't run under it
   — text-decoration:none alone can't undo an ancestor's propagated underline. */
.kdb-co-req { display: inline-block; color: var(--kdb-red); font-weight: 700; text-decoration: none; margin-left: 4px; }
/* the points nudge under the identity line — an offer, so ink not taupe.
   Prefixed with .kdb-co-head (0,2,0) and font-family restated: Astra applies
   its body face ('Lato') to .entry-content <p> DIRECTLY (0,1,1), which beats
   the container's inherited var(--kdb-ui) — so both the brand font AND the ink
   colour must be re-asserted here at (0,2,0) or the line falls back. */
.kdb-co-head .kdb-co-gift { margin: 5px 0 0; font-size: 12px; color: var(--kdb-ink); line-height: 1.55; font-family: var(--kdb-ui); }
/* OTP-down fallback: the plain contact field, typed in the identity line.
   Sheds the WC form-row float so it sits inline like the values it replaces. */
.kdb-co-idfield { flex: 1 1 210px; min-width: 190px; max-width: 280px; }
.kdb-co-idfield .form-row { margin: 0; padding: 0; width: 100%; float: none; }
.kdb-co-idfield label { font-size: 11px; color: var(--kdb-taupe); }
/* the fold-out add panels + the checkout code inputs */
.kdb-co-addpanel { margin: 10px 0 2px; max-width: 360px; }
.kdb-co-addpanel.kdb-hide { display: none; }
.kdb-co-addfield { margin-bottom: 8px; }
.kdb-co-addnote { display: block; margin-top: 5px; }
.kdb-co-addnote em { font-style: normal; font-size: 11.5px; color: var(--kdb-taupe); }
.kdb-co-contact-fields { margin-top: 10px; }
/* empty "Deliver to" chip: just the + Add New */
.kdb-co-deliver-empty .kdb-pick-new { margin: 8px 0 0; padding: 0; background: none; border: 0;
  font-family: var(--kdb-ui); font-size: 12.5px; font-weight: 600; color: var(--kdb-ink);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.kdb-co-deliver-empty .kdb-pick-new:hover { color: var(--kdb-taupe); }
.kdb-chip-change { padding: 0; background: none; border: 0; font-family: var(--kdb-ui);
  font-size: 11.5px; color: var(--kdb-taupe); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
.kdb-chip-change:hover { color: var(--kdb-ink); }
.kdb-co-dview .kdb-co-dt { display: block; font-size: 13.5px; font-weight: 600; color: var(--kdb-ink); }
.kdb-co-dview .kdb-co-dl { display: block; font-size: 13px; color: var(--kdb-taupe); }
.kdb-co-oneoff-note { display: none; }
.kdb-co-deliver.is-oneoff .kdb-co-dview { display: none; }
.kdb-co-deliver.is-oneoff .kdb-co-oneoff-note { display: block; }
/* the fold-out chooser: compact rows, not the old card wall */
.kdb-choose { display: flex; flex-direction: column; gap: 10px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--kdb-line); }
.kdb-choose.kdb-hide { display: none; }
.kdb-choose .kdb-pickrow { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px;
  align-items: center; padding: 10px 13px; background: var(--kdb-surface);
  border: 1px solid var(--kdb-line); border-radius: 8px; margin: 0; }
.kdb-choose .kdb-pickrow.kdb-sa-sel { border-color: var(--kdb-ink); }
.kdb-pick-t { font-size: 12.5px; font-weight: 600; color: var(--kdb-ink); }
.kdb-pick-l { grid-column: 1; font-size: 12px; color: var(--kdb-taupe); line-height: 1.45; }
.kdb-choose .kdb-pickrow .kdb-sa-pick { grid-column: 2; grid-row: 1 / span 2; }
.kdb-choose .kdb-pickrow.kdb-sa-sel .kdb-sa-pick { visibility: hidden; }
/* the chooser footer: "+ New address" and "Manage addresses" on one line,
   matched weight/size/colour */
.kdb-choose-foot { display: flex; align-items: center; gap: 18px; margin-top: 2px; }
.kdb-choose .kdb-pick-new, .kdb-choose-foot .kdb-choose-manage { padding: 0; background: none;
  border: 0; font-family: var(--kdb-ui); font-size: 11.5px; font-weight: 500; color: var(--kdb-taupe);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.kdb-choose .kdb-pick-new:hover, .kdb-choose-foot .kdb-choose-manage:hover { color: var(--kdb-ink); }
.kdb-book-add { margin-top: 22px; padding: 12px 26px; }

/* returns — icon actions in the orders table */
.kdb-ract { display: inline-flex; gap: 16px; align-items: center; }
.kdb-ract-i { display: grid; place-items: center; color: var(--kdb-ink); }
.kdb-ract-i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
a.kdb-ract-i:hover { color: var(--kdb-red); }
.kdb-ract-off { color: rgba(109, 103, 92, .38); cursor: not-allowed; }

/* returns — per-item controls inside the view-order items table */
.kdb-ret-act { margin-left: 10px; vertical-align: middle; display: inline-flex; }
button.kdb-ract-i { background: none; border: 0; padding: 2px; cursor: pointer; color: var(--kdb-ink); }
button.kdb-ract-i:hover, button.kdb-ract-i:focus { background: none; color: var(--kdb-red); }
.kdb-ret-status { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  font-family: var(--kdb-ui); font-weight: 600; color: var(--kdb-taupe); white-space: nowrap; }
.kdb-ret-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--kdb-red); flex: none; }
.kdb-ret-status.done { color: var(--kdb-ink); }
.kdb-ret-status.rejected::before { background: var(--kdb-taupe); }
/* a rejection is never silent — the reason + a way to reply sit under the badge */
.kdb-ret-rejreason { display: block; margin-left: 10px; margin-top: 4px; max-width: 320px;
  font-family: var(--kdb-ui); font-size: 11.5px; line-height: 1.5; color: var(--kdb-taupe);
  white-space: normal; letter-spacing: 0; text-transform: none; font-weight: 400; }
.kdb-ret-rejreason a { color: var(--kdb-red); text-decoration: underline; text-underline-offset: 2px; }
/* track-your-pickup link once a reverse pickup is booked */
.kdb-ret-track { display: block; margin-left: 10px; margin-top: 4px; font-family: var(--kdb-ui);
  font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 400; }
.kdb-ret-track a { color: var(--kdb-taupe); text-decoration: underline; text-underline-offset: 3px; }
.kdb-ret-track a:hover { color: var(--kdb-red); }
/* refund-method choice inside the request form */
.kdb-ret-refund { border: 0; padding: 0; margin: 0 0 10px; }
.kdb-ret-refund legend { font-family: var(--kdb-ui); font-size: 12px; color: var(--kdb-ink);
  font-weight: 600; padding: 0; margin: 0 0 8px; }
.kdb-ret-refopt { display: grid; grid-template-columns: auto 1fr; gap: 4px 9px; align-items: start;
  padding: 8px 0; cursor: pointer; }
.kdb-ret-refopt input { margin: 2px 0 0; }
.kdb-ret-refopt > span { font-family: var(--kdb-ui); font-size: 13px; color: var(--kdb-ink); }
.kdb-ret-refnote { grid-column: 2; font-size: 11.5px; line-height: 1.5; color: var(--kdb-taupe); }
.kdb-ret-inline { margin: 12px 0 6px; padding: 14px 16px; border: 1px solid var(--kdb-line);
  border-radius: 2px; max-width: 460px; text-align: left; }
.kdb-ret-inline .form-row { float: none !important; width: 100% !important; margin: 0 0 10px; padding: 0; }
.kdb-ret-inline select { width: 100%; border: 1px solid transparent; background: var(--kdb-cream) !important;
  border-radius: 2px; padding: 11px 13px; font-family: var(--kdb-ui); font-size: 13px; color: var(--kdb-ink); }
.kdb-ret-inline button[type="submit"] { padding: 10px 24px; font-size: 10px; }
.kdb-ret-note { font-size: 11px; color: var(--kdb-taupe); margin-left: 12px; }
/* withdraw a still-'requested' return — quiet text control under the badge */
.kdb-ret-withdraw { display: inline-flex; margin-left: 10px; }
button.kdb-ret-wd { background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--kdb-ui); font-size: 11px; color: var(--kdb-taupe);
  text-decoration: underline; text-underline-offset: 3px; }
button.kdb-ret-wd:hover, button.kdb-ret-wd:focus { background: none; color: var(--kdb-red); }

/* contact form (My Account → Contact us) */
.kdb-contact { max-width: 560px; }
.kdb-contact .form-row { float: none !important; width: 100% !important; margin: 0 0 14px; padding: 0; }
.kdb-contact textarea { min-height: 150px; resize: vertical; }
.kdb-contact button[type="submit"] { padding: 13px 32px; margin-top: 4px; }
.kdb-contact-note { font-size: 11.5px; color: var(--kdb-taupe); margin: 12px 0 0; }
.kdb-contact-note b { color: var(--kdb-ink); font-weight: 600; }

/* wishlist tab grid */
.woocommerce-MyAccount-content .kdb-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 820px) {
  body.woocommerce-account.logged-in #content .woocommerce { grid-template-columns: 1fr; }
  body.woocommerce-account.logged-in #content .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
  body.woocommerce-account.logged-in #content .woocommerce > .woocommerce-MyAccount-content { grid-column: 1; grid-row: 3; }
  .woocommerce-MyAccount-content .kdb-grid { grid-template-columns: repeat(2, 1fr); }
  body.woocommerce-account .woocommerce-MyAccount-content .col2-set { grid-template-columns: 1fr; }
}

/* ═══════════════ ABOUT (page content blocks) ═══════════════ */

/* !importants: Astra/WP block-layout resets outrank the bare class and
   strip the container's width/padding (typography rules survive fine) */
.wp-block-group.kdb-about, .kdb-about { max-width: 680px !important; margin: 0 auto !important;
  padding: clamp(56px, 8vw, 110px) 24px clamp(70px, 9vw, 130px) !important; }
.kdb-about h1 { font-family: var(--kdb-disp); font-style: italic; font-weight: 500;
  font-size: clamp(36px, 5vw, 58px); line-height: 1.08; margin: 0 0 30px; color: var(--kdb-ink);
  text-wrap: balance; }
.kdb-about p { font-size: 15px; line-height: 1.9; color: var(--kdb-ink-soft); margin: 0 0 20px; }
.kdb-about p.kdb-lede { font-size: 17.5px; color: var(--kdb-ink); }
.kdb-about p.kdb-sign { font-family: var(--kdb-disp); font-style: italic; font-size: 21px;
  color: var(--kdb-ink); margin-top: 34px; }

/* ═══════════════ LEGAL PAGES (privacy / terms / returns / shipping) ═══ */

.wp-block-group.kdb-legal, .kdb-legal { max-width: 680px !important; margin: 0 auto !important;
  padding: clamp(56px, 8vw, 110px) 24px clamp(70px, 9vw, 130px) !important; }
.kdb-legal h1 { font-family: var(--kdb-disp); font-style: italic; font-weight: 500;
  font-size: clamp(34px, 4.6vw, 52px); line-height: 1.08; margin: 0 0 10px; color: var(--kdb-ink);
  text-wrap: balance; }
.kdb-legal .kdb-upd { font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--kdb-taupe); margin: 0 0 36px; }
.kdb-legal h2 { font-family: var(--kdb-ui); font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--kdb-ink); margin: 38px 0 12px; }
.kdb-legal p, .kdb-legal li { font-size: 14.5px; line-height: 1.85; color: var(--kdb-ink-soft); }
.kdb-legal p { margin: 0 0 14px; }
.kdb-legal ul { margin: 0 0 14px 18px; padding: 0; display: grid; gap: 8px; }
.kdb-legal a { color: var(--kdb-ink); }
/* bracketed placeholders pop for the CS/legal review pass */
.kdb-legal mark { background: #F3E4C8; color: var(--kdb-ink); padding: 0 4px; }

.kdb-ftr-legal a { color: rgba(242, 237, 225, .55); text-decoration: none; }
.kdb-ftr-legal a:hover { color: var(--kdb-cream); text-decoration: underline; text-underline-offset: 3px; }

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

/* ── order confirmation (thank-you) page — same grounding as the account
   area: Astra paints the details table, overview list and address boxes
   white; ground every structural surface, keep kdb components untouched. */
body.woocommerce-order-received .woocommerce-order :is(
  address, header, section, .woocommerce-column, .woocommerce-columns, .woocommerce-column__title,
  .woocommerce-order-details, .woocommerce-customer-details, .woocommerce-table,
  table, thead, tbody, tfoot, tr, th, td, ul, li,
  .col2-set, .col-1, .col-2, .order_details, .order_details li, mark, h2, h3
) { background: transparent !important; box-shadow: none !important; }
body.woocommerce-order-received .woocommerce-order h2,
body.woocommerce-order-received .woocommerce-order .woocommerce-column__title {
  font-family: var(--kdb-ui); font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--kdb-ink); margin: 0 0 14px; }
body.woocommerce-order-received .woocommerce-order table.shop_table { border: 0 !important;
  width: 100%; background: none !important; border-collapse: collapse !important; }
body.woocommerce-order-received .woocommerce-order table.shop_table :is(thead, tbody, tfoot, tr, th, td) {
  border: 0; border-bottom: 1px solid var(--kdb-line); padding: 11px 8px; font-size: 12.5px;
  background: none !important; vertical-align: middle; }
body.woocommerce-order-received .woocommerce-order table.shop_table thead th {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--kdb-taupe); }
body.woocommerce-order-received .woocommerce-order .woocommerce-customer-details address {
  border: 1px solid var(--kdb-line) !important; border-radius: 2px; padding: 16px 18px;
  font-style: normal; background: none !important; }
/* addresses side by side — kill WC's clearfix phantoms (grid-item gotcha) */
body.woocommerce-order-received .woocommerce-order .col2-set { display: grid;
  grid-template-columns: 1fr 1fr; gap: 20px; width: 100% !important; }
body.woocommerce-order-received .woocommerce-order .col2-set::before,
body.woocommerce-order-received .woocommerce-order .col2-set::after { content: none !important; }
body.woocommerce-order-received .woocommerce-order .col2-set :is(.col-1, .col-2) {
  float: none !important; width: 100% !important; max-width: none !important; }
@media (max-width: 640px) {
  body.woocommerce-order-received .woocommerce-order .col2-set { grid-template-columns: 1fr; }
}

/* prepaid-only note above the gateways (MF made-to-order lines in bag) */
.kdb-co-nocod { font-size: 12px; line-height: 1.6; color: var(--kdb-taupe); margin: 0 0 12px; }

/* order-received: the brand heading replaces the page title */
body.woocommerce-order-received .entry-title { display: none; }
.kdb-ty { font-family: var(--kdb-disp); font-style: italic; font-weight: 500;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.1; color: var(--kdb-ink); margin: 6px 0 24px; }
.kdb-ty-dot { color: var(--kdb-red); }

/* my-account order documents: print summary / tax invoice / email-me */
.kdb-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 6px; }
.kdb-docs .kdb-btn-ghost,
.kdb-docs a.kdb-btn-ghost {
  background: transparent; color: var(--kdb-ink); border: 1px solid var(--kdb-ink);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 16px; cursor: pointer; text-decoration: none; line-height: 1;
}
.kdb-docs .kdb-btn-ghost:hover,
.kdb-docs a.kdb-btn-ghost:hover { background: var(--kdb-ink); color: var(--kdb-cream); }
.kdb-docs-mail { display: inline; margin: 0; }
.kdb-docs-note { font-size: 12px; color: var(--kdb-taupe); margin: 0; }

/* printable order summary: strip the site chrome, keep the order details */
@media print {
  body.woocommerce-view-order .site-header,
  body.woocommerce-view-order .kdb-hdr,
  body.woocommerce-view-order .kdb-ftr,
  body.woocommerce-view-order .site-footer,
  body.woocommerce-view-order footer,
  body.woocommerce-view-order .woocommerce-MyAccount-navigation,
  body.woocommerce-view-order .kdb-docs,
  body.woocommerce-view-order .woocommerce-notices-wrapper,
  body.woocommerce-view-order #wpadminbar { display: none !important; }
  body.woocommerce-view-order .woocommerce-MyAccount-content {
    width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important;
  }
}

/* ── colour-filtered PDP gallery ─────────────────────────────────────
   Slides/dots tagged with a colour are pulled from the flow while another
   colour is selected (kdb.js toggles [hidden]). */
.kdb-ptrack .kdb-pimg[hidden],
.kdb-gdots button[hidden],
.kdb-gnav[hidden] { display: none !important; }

/* ── order progress tracker (My Account order page + thank-you) ──────
   Ordered → Shipped → Out for delivery → Delivered. Steps reached are
   green; the current one carries the bold label. Rendered by
   kdb_tracker_web_html() in inc/fulfilment.php. */
.kdb-track {
  display: flex;
  align-items: flex-start;
  margin: 4px 0 34px;
}
.kdb-track-step {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.kdb-track-step::before {           /* connecting bar, sits behind the dots */
  content: "";
  position: absolute;
  top: 12px;
  left: -50%;
  width: 100%;
  height: 4px;
  background: #E3DED2;
  z-index: 0;
}
.kdb-track-step:first-child::before { display: none; }
.kdb-track-step.is-done::before { background: #5C6247; }
.kdb-track-dot {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #E3DED2;
  color: #fff;
  font: 700 15px/28px Arial, sans-serif;
  text-align: center;
}
.kdb-track-step.is-done .kdb-track-dot { background: #5C6247; }
.kdb-track-lbl {
  font-size: 12px;
  color: #6D675C;
  overflow-wrap: anywhere;
}
.kdb-track-step.is-now .kdb-track-lbl { font-weight: 700; color: #1C1A17; }
@media (max-width: 480px) {
  .kdb-track-lbl { font-size: 10.5px; }
}

/* ── garment care pills (PDP, Material & care accordion) ─────────── */
.kdb-care-fab { font-family: var(--kdb-ui); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--kdb-ink); margin: 0 0 10px; font-weight: 600; }
.kdb-care-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.kdb-care-pill { display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--kdb-line); border-radius: 999px; padding: 5px 13px 5px 10px;
  font-family: var(--kdb-ui); font-size: 12px; color: var(--kdb-ink); background: var(--kdb-cream); }
.kdb-care-pill svg { flex: none; opacity: .85; }

/* Size chart accordion — a compact table, only filled rows/columns rendered */
.kdb-sizechart { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 0 0 8px; }
.kdb-sizechart th, .kdb-sizechart td { padding: 8px 10px; text-align: center; border: 1px solid var(--kdb-line); }
.kdb-sizechart thead th { font-family: var(--kdb-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--kdb-ink); background: var(--kdb-cream); }
.kdb-sizechart tbody th { font-family: var(--kdb-ui); font-weight: 700; color: var(--kdb-ink); background: var(--kdb-paper); }
.kdb-sizechart tbody td { color: var(--kdb-ink-soft); }
.kdb-sizechart-note { font-size: 11.5px; color: var(--kdb-ink-soft); margin: 0; font-style: italic; }

/* Tracking line under the order tracker (My Account + thank-you page) */
.kdb-track-line { margin: -14px 0 26px; font-size: 13px; color: #6D675C; }
.kdb-track-line a { color: #A4322A; font-weight: 600; }

/* PDP delivery estimate + PIN checker */
.kdb-edd { margin: 14px 0 4px; font-size: 13.5px; color: #1C1A17; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kdb-edd-where, .kdb-edd-note { color: #6D675C; }
.kdb-edd-toggle { background: none; border: none; padding: 0; font-size: 12.5px; font-weight: 600; color: #A4322A; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.kdb-edd-form { display: inline-flex; gap: 6px; align-items: center; }
.kdb-edd-pin { width: 110px; padding: 6px 10px; border: 1px solid #D8D2C4; border-radius: 3px; font-size: 16px; }
.kdb-edd-pin.is-bad { border-color: #A4322A; }
.kdb-edd-check { padding: 6px 14px; background: #1C1A17; color: #F2EDE1; border: none; border-radius: 3px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.kdb-edd-check[disabled] { opacity: .5; }
/* Serviceability + COD state under the PDP delivery estimate (3-state). */
.kdb-edd-serv { flex-basis: 100%; margin-top: -2px; font-size: 12.5px; font-weight: 600; }
.kdb-edd-serv.is-ok { color: #2F7A34; }
.kdb-edd-serv.is-no { color: #A4322A; }
/* Checkout serviceability notice (follows the typed PIN). */
.kdb-cs-serv { margin: 0 0 12px; padding: 9px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; line-height: 1.4; }
.kdb-cs-serv.is-no { background: #F7E7E4; color: #8F2A22; border: 1px solid #E4C2BC; }
.kdb-cs-serv.is-warn { background: #F8F1E0; color: #7A5A12; border: 1px solid #E7D8AF; }
/* Same notice inside the slide-in bag drawer footer. */
.kdb-bag-serv:empty { display: none; }
.kdb-bag-serv .kdb-cs-serv { margin: 6px 0 10px; font-size: 12.5px; }

/* Checkout: the bag grouped into packages + the header PIN chip */
.kdb-cs-title-pin { font-size: 12.5px; font-weight: 400; letter-spacing: .01em; text-transform: none; color: #6D675C; margin-left: 4px; }
.kdb-cs-pkg-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 16px 0 9px; padding-bottom: 5px; border-bottom: 1px solid rgba(109,103,92,.18); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6D675C; }
.kdb-cs-items .kdb-cs-pkg-h:first-child { margin-top: 0; }
.kdb-cs-pkg-d { font-weight: 600; letter-spacing: .02em; text-transform: none; font-size: 12px; color: #1C1A17; }
.kdb-edd-form[hidden] { display: none; }

/* Multi-package: list under the tracker + checkout note */
.kdb-track-pkgs { margin: -14px 0 26px; }
.kdb-track-pkgs .kdb-track-line { margin: 0 0 5px; }
.kdb-track-pkghead { font-weight: 600; color: #1C1A17; }
.kdb-track-done { color: #5C6247; font-weight: 600; }
.kdb-cs-edd-multi { font-weight: 600; color: #1C1A17; }

/* Order page: one card per package (progress bar + products + updates) */
.kdb-pkgs { margin: 0 0 30px; }
.kdb-pkg { border: 1px solid rgba(109,103,92,.2); border-radius: 6px; padding: 16px 18px 13px; margin: 0 0 16px; background: var(--kdb-surface); }
.kdb-pkg .kdb-track { margin: 12px 0 18px; }
.kdb-pkg-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kdb-pkg-title { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #1C1A17; }
.kdb-pkg-date { font-size: 12.5px; color: #6D675C; }
.kdb-pkg-items { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.kdb-pkg-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #1C1A17; }
.kdb-pkg-item .kdb-oth { flex: 0 0 36px; }
.kdb-pkg-qty { color: #6D675C; }
.kdb-pkg-track { margin: 0; font-size: 12.5px; color: #6D675C; }
.kdb-pkg-track a { color: #A4322A; font-weight: 600; }
.kdb-pkg-notes { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed rgba(109,103,92,.25); font-size: 12.5px; color: #6D675C; }
.kdb-pkg-notes li { margin: 0 0 8px; }
.kdb-pkg-note-d { display: block; font-size: 10.5px; letter-spacing: .03em; color: #9A938A; }

/* Order details table: keep the product cell's pieces on their own lines */
.kdb-oi > .kdb-oi-n { flex: 1; min-width: 0; }
.kdb-oi-qty { color: #6D675C; font-weight: 400; white-space: nowrap; }
.kdb-oi-qty del { color: #9A938A; margin-right: 3px; }
.woocommerce-table--order-details td.product-name .wc-item-meta { margin: 4px 0 0 56px; padding: 0; list-style: none; font-size: 12.5px; color: #6D675C; }
.woocommerce-table--order-details td.product-name .wc-item-meta li { margin: 0 0 2px; }
.woocommerce-table--order-details td.product-name .wc-item-meta p { display: inline; margin: 0; }
/* Return control rides in its own slim column (view-order only) */
.kdb-ret-th, .kdb-ret-td { width: 72px; text-align: center; }
.kdb-ret-td { vertical-align: middle; }
.kdb-ret-td .kdb-ret-act { margin: 0; }
.kdb-ret-td .kdb-ret-status { margin: 0; white-space: normal; line-height: 1.35; font-size: 10.5px; justify-content: center; }