/* ==========================================================================
   OPENWOOD — Redesigned Theme (Minimal)
   Palette: black / gray / white · thin hairline borders · round edges
   Thick borders reserved for configurator options only.
   Fonts: Plus Jakarta Sans (headings) · Outfit (body)  — same as openwood.pk
   ========================================================================== */

:root {
  --ink: #111111;
  --ink-soft: #2b2b2b;
  --gray-900: #1c1c1c;
  --gray-700: #4a4a4a;
  --gray-500: #767676;
  --gray-300: #d6d6d6;
  --gray-200: #e7e7e7;
  --gray-100: #f2f2f2;
  --gray-50: #f8f8f8;
  --paper: #ffffff;

  --bw: 1px;             /* hairline border for structure   */
  --bw-opt: 2px;         /* thick border — options only     */
  --line: var(--gray-200);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-soft: 0 6px 24px rgba(17, 17, 17, 0.07);
  --shadow-hover: 0 10px 30px rgba(17, 17, 17, 0.1);

  --font-head: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
  --font-body: "Outfit", Arial, Helvetica, sans-serif;

  --maxw: 1700px; /* wide layout, capped + centered; side spacing from .wrap padding */

  /* Text color used on every ink-background surface (buttons, active nav
     states, badges, checkmarks…) — kept as one token so it can be swapped
     from Openwood Settings without hunting down 30+ individual rules. */
  --btn-text: #ffffff;

  /* Form-specific tokens — independent from the general palette/radius
     above so the Openwood Settings → Forms tab can style inputs without
     affecting every other bordered element on the site. */
  --form-border: var(--line);
  --form-focus: var(--ink);
  --form-bg: var(--paper);
  --form-radius: var(--r-md);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Kill the grey/blue tap-highlight box mobile browsers paint over tapped
   links, buttons and other interactive elements. */
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
a, button, input, select, textarea, label, summary, [role="button"], [tabindex] { -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3, h4, h5 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(24px, 2.5vw, 56px); }

/* ---------- utility chips / badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 600; font-size: 12px;
  padding: 4px 12px; border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  background: var(--paper);
}
.badge--ink { background: var(--ink); color: var(--btn-text, #fff); border-color: var(--ink); }
.badge--gray { background: var(--gray-100); border-color: transparent; }

/* ==========================================================================
   TOP BAR (left: made-in-PK tagline + Google rating · right: WhatsApp + tracking)
   ========================================================================== */
.topbar { background: var(--ink); color: var(--btn-text, #fff); font-size: 12px; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding-block: 7px; }
.topbar__left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.topbar__tagline { display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: 0.01em; white-space: nowrap; }
/* Pakistan flag (after "Pakistan") flows inline with the text. A subtle light
   ring defines the flag's rounded-rect edge against the dark bar. */
.topbar__flag { display: inline-block; vertical-align: middle; position: relative; top: -1px; width: 20px; height: 14px; margin: 0 0 0 6px; border-radius: 2.5px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); }
.topbar__google { display: inline-flex; align-items: center; gap: 6px; color: inherit; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.18); white-space: nowrap; }
.topbar__google:hover { opacity: 0.85; }
.topbar__google svg { width: 14px; height: 14px; flex: none; }
.topbar__stars { color: currentColor; letter-spacing: 1px; font-size: 11px; }
.topbar__google b { font-weight: 700; }
.topbar__right { display: flex; align-items: center; gap: 22px; }
.topbar__link { display: inline-flex; align-items: center; gap: 7px; color: inherit; font-weight: 500; white-space: nowrap; }
.topbar__link:hover { opacity: 0.85; }
.topbar__link svg, .topbar__link i[data-lucide] { width: 15px; height: 15px; flex: none; }
@media (max-width: 860px) {
  .topbar__inner { justify-content: center; }
  .topbar__google, .topbar__right { display: none; }
  .topbar__tagline { font-size: 11.5px; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px);
  border-bottom: var(--bw) solid var(--line);
}
.header__inner { display: flex; align-items: center; gap: 24px; height: 72px; }

.logo { display: flex; flex-direction: column; line-height: 1; }
.logo b { font-family: var(--font-head); font-weight: 800; font-size: 20px; letter-spacing: 0.12em; }
.logo span { font-size: 10px; letter-spacing: 0.42em; font-weight: 500; color: var(--gray-500); text-transform: uppercase; }
.logo__img { max-height: 40px; width: auto; display: block; }
/* Inline SVG logo (pasted markup): scale by height, width follows. Header size
   is set per-setting in the dynamic style; this is the base. */
.logo__svg { display: inline-flex; align-items: center; line-height: 0; }
.logo__svg svg { height: 40px; width: auto; display: block; }
/* The brand column is block-width, so the flex-column logo would stretch the
   wordmark full-width; pin it to its natural size and invert the dark mark so
   it reads on the near-black footer. */
.footer .logo__img { max-height: 46px; width: auto; align-self: flex-start; filter: brightness(0) invert(1); }
.footer .logo__svg { align-self: flex-start; height: 46px; }
.footer .logo__svg svg { height: 100%; width: auto; filter: brightness(0) invert(1); }
/* Custom code/shortcode blocks injected into product-page sections. */
.ow-code-zone { margin: 44px 0; }
.buy .ow-code-zone { margin: 16px 0 0; }
.ow-code-zone:empty { display: none; margin: 0; }

.nav { display: flex; gap: 4px; margin-inline: auto; }
.nav a {
  font-family: var(--font-head); font-weight: 600; font-size: 14px;
  padding: 8px 15px; border-radius: var(--r-pill);
  color: var(--gray-700); transition: 0.15s;
}
.nav a:hover { background: var(--gray-100); color: var(--ink); }
.nav a.is-active { background: var(--ink); color: var(--btn-text, #fff); }
/* Icon + label alignment for header menu items. */
.nav a { display: inline-flex; align-items: center; gap: 7px; }
.nav a svg { width: 16px; height: 16px; flex: none; }
.nav a i[data-lucide] { width: 16px; height: 16px; flex: none; }

.header__actions { display: flex; gap: 4px; align-items: center; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: var(--bw) solid var(--line); border-radius: 50%; background: var(--paper);
  transition: 0.15s; position: relative; color: var(--ink);
}
.icon-btn:hover { border-color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn .dot {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px;
  border-radius: var(--r-pill); background: var(--ink); color: var(--btn-text, #fff);
  border: 2px solid var(--paper);
  font-size: 10px; font-weight: 700; display: grid; place-items: center; padding-inline: 4px;
}
.icon-btn .dot.is-hidden { display: none; }

/* Header actions: drop the dated bordered-circle look for flat icon buttons
   separated by slim hairline dividers. Scoped so the footer/drawer/modal
   .icon-btn (still circular) are untouched. */
.header__actions > * { position: relative; }
.header__actions > * + *::before {
  content: ""; position: absolute; left: -3px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: var(--line);
}
.header__actions .icon-btn {
  border: none; background: transparent; border-radius: var(--r-sm);
  width: 42px; height: 42px;
}
.header__actions .icon-btn:hover { background: var(--gray-100); }
.header__actions .icon-btn .dot { top: 2px; right: 2px; }

/* mobile menu */
.menu-btn { display: none; }
.menu-btn .ico-close { display: none; }
.menu-btn[aria-expanded="true"] .ico-burger { display: none; }
.menu-btn[aria-expanded="true"] .ico-close { display: block; }

/* Shared compact product-search form (header search popup + mobile tray). */
.ow-searchform { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.ow-searchform i, .ow-searchform svg { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--gray-500); pointer-events: none; }
.ow-searchform input {
  width: 100%; height: 52px; padding: 0 18px 0 46px;
  border: var(--bw) solid var(--form-border); border-radius: var(--r-pill);
  background: var(--form-bg); color: var(--ink); font-family: var(--font-body); font-size: 15px;
}
.ow-searchform input:focus { outline: none; border-color: var(--form-focus); box-shadow: 0 0 0 3px rgba(17,17,17,0.06); }

/* Header search popup — drops down from the top over the shared backdrop. */
.searchpop {
  position: fixed; left: 0; right: 0; top: 0; z-index: 210;
  transform: translateY(-100%); transition: transform 0.3s ease; visibility: hidden;
}
.searchpop.open { transform: translateY(0); visibility: visible; }
.searchpop__panel {
  background: var(--paper); border-bottom: var(--bw) solid var(--line);
  box-shadow: 0 16px 44px rgba(17,17,17,0.13); padding: 22px 0 28px;
}
.searchpop__bar { display: flex; align-items: center; gap: 12px; }
.searchpop__close {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  border: var(--bw) solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); transition: 0.15s;
}
.searchpop__close:hover { border-color: var(--ink); }
.searchpop__close svg { width: 18px; height: 18px; }
.searchpop__body { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 36px; margin-top: 24px; }
.searchpop__label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 14px;
}
.searchpop__label svg { width: 15px; height: 15px; }
.searchpop__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.searchpop__chips a {
  padding: 8px 15px; border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--gray-700); transition: 0.15s;
}
.searchpop__chips a:hover { background: var(--ink); color: var(--btn-text, #fff); border-color: var(--ink); }
.searchpop__trending { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.searchpop__product { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-md); transition: 0.15s; }
.searchpop__product:hover { background: var(--gray-100); }
.searchpop__thumb { flex: none; width: 54px; height: 54px; border-radius: var(--r-sm); overflow: hidden; background: var(--gray-100); }
.searchpop__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.searchpop__info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.searchpop__info b { font-family: var(--font-head); font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.searchpop__price { font-size: 13px; color: var(--gray-700); }
.searchpop__price .amount { font-weight: 700; color: var(--ink); }
.searchpop__price del { color: var(--gray-500); font-weight: 400; margin-right: 4px; }

/* Mobile navigation tray — slides in from the right over the backdrop. */
.mtray {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 370px); z-index: 210;
  background: var(--paper); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.3s ease; visibility: hidden;
  box-shadow: -14px 0 44px rgba(17,17,17,0.16);
}
.mtray.open { transform: translateX(0); visibility: visible; }
.mtray__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: var(--bw) solid var(--line); flex: none;
}
.mtray__title { font-family: var(--font-head); font-weight: 800; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; }
.mtray__close {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: var(--bw) solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); transition: 0.15s;
}
.mtray__close:hover { border-color: var(--ink); }
.mtray__close svg { width: 18px; height: 18px; }
.mtray__scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px; }
.mtray__search { margin-bottom: 18px; }
.mtray__search input { height: 48px; }
.mtray__nav { display: flex; flex-direction: column; gap: 2px; }
.mtray__nav a {
  font-family: var(--font-head); font-weight: 600; font-size: 16px;
  padding: 13px 14px; border-radius: var(--r-sm); color: var(--gray-700);
}
.mtray__nav a:active, .mtray__nav a:hover { background: var(--gray-100); color: var(--ink); }
.mtray__nav a.is-active { background: var(--ink); color: var(--btn-text, #fff); }
.mtray__nav a { display: inline-flex; align-items: center; gap: 11px; }
.mtray__nav a svg, .mtray__nav a i[data-lucide] { width: 18px; height: 18px; flex: none; }
.mtray__section { margin-top: 20px; padding-top: 18px; border-top: var(--bw) solid var(--line); }
.mtray__label {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 10px;
}
.mtray__cats { display: flex; flex-direction: column; }
.mtray__cats a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-radius: var(--r-sm); font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--gray-700);
}
.mtray__cats a:hover { background: var(--gray-100); color: var(--ink); }
.mtray__cats a span { font-size: 12px; font-weight: 600; color: var(--gray-500); background: var(--gray-100); border-radius: var(--r-pill); padding: 1px 9px; }
.mtray__quick a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-sm); font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--ink);
}
.mtray__quick a:hover { background: var(--gray-100); }
.mtray__quick a > span { flex: 1; }
.mtray__quick a svg { width: 19px; height: 19px; }
.mtray__quick a svg:last-child { width: 16px; height: 16px; color: var(--gray-500); }
.mtray__badge { background: var(--ink); color: var(--btn-text, #fff); border-radius: var(--r-pill); min-width: 20px; height: 20px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; padding: 0 6px; }
.mtray__badge.is-hidden { display: none; }
.mtray__foot { flex: none; padding: 16px 20px; border-top: var(--bw) solid var(--line); }
.mtray__wa {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 13px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--btn-text, #fff);
  font-family: var(--font-head); font-weight: 700; font-size: 14.5px;
}
.mtray__wa:hover { background: var(--ink-soft); }
.mtray__wa svg { width: 18px; height: 18px; }
.mtray__social { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.mtray__social .icon-btn { width: 40px; height: 40px; }

@media (max-width: 720px) {
  .searchpop__body { grid-template-columns: 1fr; gap: 20px; margin-top: 18px; }
  .searchpop__trending { grid-template-columns: 1fr 1fr; }
  .searchpop__panel { padding: 16px 0 20px; }
  .searchpop__close { width: 44px; height: 44px; }
  .searchpop__bar { gap: 8px; }
}
@media (max-width: 460px) {
  .searchpop__trending { grid-template-columns: 1fr; }
}

/* Keep the top-anchored overlays clear of the WP admin bar (logged-in only). */
.admin-bar .searchpop { top: 32px; }
.admin-bar .mtray { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .searchpop { top: 46px; }
  .admin-bar .mtray { top: 46px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding: 32px 0 16px; }
.hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 16px; }

.hero__main {
  position: relative; border-radius: var(--r-lg);
  background: var(--ink); color: var(--btn-text, #fff); overflow: hidden; min-height: 440px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.hero__content { position: relative; padding: 32px; background: linear-gradient(transparent, rgba(0,0,0,0.75) 55%); }
.hero__kicker { display: inline-flex; margin-bottom: 14px; background: #fff; color: var(--ink); border-color: transparent; }
.hero__content h1 { font-size: clamp(30px, 4.2vw, 50px); color: var(--btn-text, #fff); max-width: 14ch; font-weight: 800; }
.hero__content p { margin-top: 10px; color: var(--gray-300); max-width: 46ch; font-size: 15px; }
.hero__cta { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

.hero__side { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.hero__card {
  position: relative; border-radius: var(--r-lg);
  overflow: hidden; background: var(--gray-100); display: flex; align-items: flex-end;
  min-height: 200px; transition: 0.2s;
}
.hero__card:hover { box-shadow: var(--shadow-hover); }
.hero__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.hero__card:hover img { transform: scale(1.03); }
.hero__card-label {
  position: relative; margin: 14px; padding: 9px 16px;
  background: rgba(255, 255, 255, 0.95); border-radius: var(--r-pill);
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; gap: 10px;
}
.hero__card-label small { font-weight: 500; color: var(--gray-500); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  padding: 12px 26px; border-radius: var(--r-pill);
  border: var(--bw) solid transparent;
  transition: 0.15s;
}
.btn--ink { background: var(--ink); color: var(--btn-text, #fff); }
.btn--ink:hover { background: var(--ink-soft); }
.btn--paper { background: var(--paper); color: var(--ink); border-color: var(--gray-300); }
.btn--paper:hover { border-color: var(--ink); }
.btn--ghost { background: transparent; border-color: currentColor; }
.btn--lg { padding: 15px 32px; font-size: 15px; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ==========================================================================
   CATEGORY RAIL
   ========================================================================== */
.cats { padding: 24px 0 8px; }
.cats__rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cat-chip {
  display: flex; align-items: center; gap: 14px;
  border: var(--bw) solid var(--line); border-radius: var(--r-md);
  background: var(--paper); padding: 13px 16px; transition: 0.15s;
}
.cat-chip:hover { border-color: var(--ink); }
.cat-chip img { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--gray-100); object-fit: cover; }
.cat-chip__name { font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.cat-chip__count { font-size: 13px; color: var(--gray-500); }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { padding: 44px 0; }
.section--paper { background: var(--gray-50); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
.section__head h2 { font-size: clamp(23px, 3vw, 32px); font-weight: 800; }
.section__head p { color: var(--gray-500); margin-top: 4px; }

/* Shop Size/Color pill filter bar (rendered by Openwood Core, see
   ow_render_shop_filters()). Sits between the shop heading and the grid. */
/* Shop toolbar: filters (left) + sort (right) ----------------------------- */
.ow-shop-toolbar {
  display: flex; align-items: flex-start; gap: 16px;
  margin: -6px 0 26px; padding-bottom: 18px; border-bottom: var(--bw) solid var(--line);
}
.ow-shop-filters { flex: 1 1 auto; min-width: 0; }
.ow-shop-sort { flex: none; margin-left: auto; }

.ow-filter-toggle { display: none; }
.ow-filter-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.ow-filter-panel__head { display: none; }

.ow-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ow-filter-group__label { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--gray-700); margin-right: 2px; }
.ow-filter-group__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ow-filter-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--r-pill);
  border: var(--bw) solid var(--line); background: var(--paper); color: var(--ink);
  font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; transition: 0.15s;
}
.ow-filter-pill:hover { border-color: var(--gray-500); }
.ow-filter-pill.is-active { background: var(--ink); border-color: var(--ink); color: var(--btn-text, #fff); }
.ow-filter-pill em { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--gray-500); }
.ow-filter-pill.is-active em { color: rgba(255,255,255,.65); }
.ow-swatch-dot { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,.14); box-shadow: inset 0 0 0 1.5px #fff; flex: none; }
.ow-filter-pill--swatch.is-active .ow-swatch-dot { box-shadow: inset 0 0 0 1.5px var(--ink); }

.ow-filter-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.ow-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--btn-text, #fff); font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.ow-chip span { opacity: .7; font-size: 14px; line-height: 1; }
.ow-chip:hover span { opacity: 1; }
.ow-filter-clear { font-size: 13px; font-weight: 600; color: var(--gray-500); text-decoration: underline; }
.ow-filter-clear:hover { color: var(--ink); }

/* Sort dropdown styled as a pill */
.ow-shop-sort select, .woocommerce-ordering select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  padding: 9px 38px 9px 16px; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.ow-shop-sort select:hover, .woocommerce-ordering select:hover { border-color: var(--gray-500); }

/* Mobile: filters collapse into a bottom sheet ---------------------------- */
.ow-filter-backdrop {
  position: fixed; inset: 0; background: rgba(17,17,17,.4); z-index: 998; opacity: 0; visibility: hidden;
  transition: opacity .2s; backdrop-filter: blur(1px);
}
.ow-filter-backdrop.is-open { opacity: 1; visibility: visible; }

@media (max-width: 780px) {
  .ow-shop-toolbar { align-items: center; }
  .ow-filter-toggle {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill);
    border: var(--bw) solid var(--line); background: var(--paper); color: var(--ink);
    font-family: var(--font-body); font-size: 13.5px; font-weight: 600; cursor: pointer;
  }
  .ow-filter-toggle__n {
    display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px;
    background: var(--ink); color: var(--btn-text, #fff); border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700;
  }
  .ow-filter-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    display: block; max-height: 82vh; overflow-y: auto; padding: 4px 20px 24px;
    background: var(--paper); border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%); transition: transform .28s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 -10px 40px rgba(17,17,17,.18);
  }
  .ow-filter-panel.is-open { transform: translateY(0); }
  .ow-filter-panel__head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; background: var(--paper); padding: 16px 0 12px; margin-bottom: 4px;
    border-bottom: var(--bw) solid var(--line);
    font-family: var(--font-head); font-weight: 800; font-size: 17px;
  }
  .ow-filter-close { background: none; border: none; font-size: 20px; line-height: 1; color: var(--gray-500); cursor: pointer; padding: 4px; }
  .ow-filter-active { padding: 14px 0; }
  .ow-filter-group { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 0; border-top: var(--bw) solid var(--line); }
  .ow-filter-group__label { font-size: 14px; }
  .ow-filter-pill { padding: 9px 16px; font-size: 14px; }
}

/* ==========================================================================
   PRODUCT CARD
   ========================================================================== */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* On wide screens the capped-width container is roomy enough for a 5th column,
   so cards keep a sensible size. Shop, category + homepage grids all use .grid;
   related/upsells (ul.products) stay at 4 since they show 4 items. */
@media (min-width: 1500px) { .grid { grid-template-columns: repeat(5, 1fr); } }

.pcard {
  display: flex; flex-direction: column;
  border: var(--bw) solid var(--line); border-radius: var(--r-md);
  background: var(--paper); overflow: hidden; position: relative;
  transition: 0.2s;
}
.pcard:hover { border-color: var(--gray-300); box-shadow: var(--shadow-hover); }
.pcard__media { position: relative; aspect-ratio: 1; background: var(--gray-100); overflow: hidden; }
.pcard__media > a:first-child { display: block; width: 100%; height: 100%; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.pcard:hover .pcard__media img { transform: scale(1.04); }
/* Match the compact New/Trending badge size (.pcard__badge) instead of the
   larger default .badge sizing. */
/* z-index is REQUIRED: on the product page this badge is an absolutely-positioned
   sibling that comes BEFORE .woocommerce-product-gallery in the DOM, and the
   gallery's slides are themselves positioned — so with z-index:auto the product
   image painted straight over the badge. 3 matches .pcard__badges. */
.pcard__off { position: absolute; top: 10px; left: 10px; z-index: 3; font-size: 11px; font-weight: 700; padding: 4px 10px; letter-spacing: .02em; line-height: 1; border: none; }
.pcard__quick {
  position: absolute; right: 10px; bottom: 10px;
  background: var(--ink); color: var(--btn-text, #fff);
  border-radius: var(--r-pill); padding: 8px 16px;
  font-family: var(--font-head); font-weight: 600; font-size: 12.5px;
  opacity: 0; transform: translateY(6px); transition: 0.18s;
}
.pcard:hover .pcard__quick { opacity: 1; transform: translateY(0); }
.pcard__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.pcard__cat { font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); }
.pcard__name { font-family: var(--font-head); font-weight: 700; font-size: 15.5px; }
.pcard__price { margin-top: auto; display: flex; align-items: baseline; gap: 8px; font-family: var(--font-head); font-weight: 800; font-size: 16.5px; color: var(--ink); }
.pcard__price .amount { font-weight: 800; }
.pcard__price b { font-family: var(--font-head); font-size: 16px; }
.pcard__price s { color: var(--gray-500); font-size: 13px; font-weight: 400; }

/* ==========================================================================
   FEATURE BANNER — "Ink Showcase"
   An inverted ink panel that pops against the page, with the product lifted
   onto a white tile that tilts and breaks the frame. Content is editable from
   Appearance -> Openwood Settings -> Home Page -> Feature Banner.
   ========================================================================== */
.ow-showcase {
  position: relative; z-index: 0; isolation: isolate;
  display: grid; grid-template-columns: 1.04fr 0.96fr; align-items: center;
  background: var(--ink); border-radius: var(--r-lg); overflow: hidden;
}
.ow-showcase::before {
  content: ""; position: absolute; z-index: 0; top: -25%; right: -10%;
  width: 66%; height: 150%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(224, 168, 90, 0.16), rgba(224, 168, 90, 0) 72%);
}
.ow-showcase__copy {
  position: relative; z-index: 2; min-width: 0; padding: 48px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.ow-showcase__badge {
  display: inline-flex; align-items: center; margin-bottom: 18px;
  font-family: var(--font-head); font-weight: 600; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; padding: 6px 14px;
  border: var(--bw) solid rgba(255, 255, 255, 0.3); border-radius: var(--r-pill);
}
.ow-showcase__title {
  font-family: var(--font-head); font-weight: 800; letter-spacing: -0.02em; color: #fff;
  line-height: 1.05; margin: 0 0 13px; font-size: clamp(28px, 3.6vw, 43px); text-wrap: balance;
}
.ow-showcase__text { color: #b7b0a5; font-size: 16px; line-height: 1.6; margin: 0 0 24px; max-width: 42ch; }
.ow-showcase__specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bw);
  width: 100%; max-width: 420px; margin-bottom: 28px; overflow: hidden;
  background: rgba(255, 255, 255, 0.1); border: var(--bw) solid rgba(255, 255, 255, 0.1); border-radius: var(--r-md);
}
.ow-showcase__spec { background: var(--ink); padding: 15px 16px; display: flex; flex-direction: column; gap: 3px; }
.ow-showcase__spec b { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: #fff; letter-spacing: -0.01em; }
.ow-showcase__spec span { font-size: 11.5px; color: #8f887d; line-height: 1.3; }
.ow-showcase__cta.btn { background: #fff; color: var(--ink); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.6); }
.ow-showcase__cta.btn:hover { background: var(--gray-100); transform: translateY(-1px); }
.ow-showcase__arrow { flex: none; }
.ow-showcase__media { position: relative; z-index: 1; min-width: 0; display: grid; place-items: center; padding: 40px 48px 40px 12px; }
.ow-showcase__tile {
  position: relative; width: 100%; max-width: 360px; background: #fff; border-radius: var(--r-lg);
  padding: 16px; transform: rotate(-1.4deg);
  box-shadow: 0 44px 80px -34px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.ow-showcase__tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-sm); background: #fff; }
.ow-showcase__chip {
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--ink); color: #fff; border-radius: var(--r-pill); padding: 8px 15px;
  font-family: var(--font-head); font-weight: 700; font-size: 12.5px;
  box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.7);
}
.ow-showcase__chip svg { color: #e9b64a; flex: none; }
@media (max-width: 767px) {
  .ow-showcase { grid-template-columns: 1fr; }
  .ow-showcase__media { order: -1; padding: 34px 22px 30px; }
  .ow-showcase__tile { transform: none; max-width: 300px; }
  .ow-showcase__copy { padding: 30px 22px 34px; }
  .ow-showcase__specs { max-width: none; }
  .ow-showcase__title { font-size: clamp(26px, 7vw, 34px); }
}
@media (max-width: 420px) {
  .ow-showcase__specs { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.trust__item {
  border: var(--bw) solid var(--line); border-radius: var(--r-md);
  background: var(--paper); padding: 18px; display: flex; gap: 14px; align-items: center;
}
.trust__icon {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--gray-100);
}
.trust__icon svg { width: 21px; height: 21px; }
.trust__item b { font-family: var(--font-head); font-size: 14.5px; display: block; }
.trust__item span { font-size: 13px; color: var(--gray-500); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--ink); color: var(--btn-text, #fff); margin-top: 44px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding: 52px clamp(28px, 3vw, 64px) 40px; }
.footer h4 { font-size: 14px; margin-bottom: 16px; color: var(--btn-text, #fff); }
.footer a { display: block; color: var(--gray-300); font-size: 14px; padding: 5px 0; }
/* The Company column comes from wp_nav_menu() with items_wrap '%3$s', which
   emits bare <li>s with no <ul>. They would render as list-items with bullets,
   unlike the plain <a>s in the Categories column - flatten them so both
   columns read identically. */
.footer__grid li { list-style: none; display: block; margin: 0; padding: 0; }
.footer a:hover { color: var(--btn-text, #fff); }
.footer__brand p { color: var(--gray-300); font-size: 14px; max-width: 30ch; margin-top: 12px; }
.footer__social { display: flex; gap: 14px; margin-top: 16px; }
/* Standalone WHITE glyphs — no chip/background — left-aligned on the dark footer. */
.footer__social .icon-btn { width: auto; height: auto; padding: 2px; background: transparent; border: none; border-radius: 0; color: var(--btn-text, #fff); }
.footer__social .icon-btn:hover { color: var(--gray-300); background: transparent; border: none; }
.footer__social .icon-btn svg, .footer__social .icon-btn i { width: 21px; height: 21px; }
.footer .logo b, .footer .logo span { color: var(--btn-text, #fff); }
.footer__rating {
  border: var(--bw) solid var(--gray-700); border-radius: var(--r-md); padding: 18px; background: var(--gray-900);
}
.footer__rating b { font-family: var(--font-head); font-size: 30px; }
.footer__rating small { color: var(--gray-300); display: block; margin-top: 4px; }
.footer__bottom {
  border-top: 1px solid var(--gray-700); padding: 18px clamp(28px, 3vw, 64px);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 13px; color: var(--gray-300);
}
.stars { color: var(--btn-text, #fff); letter-spacing: 3px; }

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.crumbs { padding: 18px 0 4px; font-size: 13px; color: var(--gray-500); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs b { color: var(--ink); font-weight: 600; }
/* Breadcrumb links are hidden site-wide (shop, product, cart, checkout, my-account,
   auth pages). The BreadcrumbList JSON-LD is emitted separately, so SEO is unaffected. */
.crumbs, .ow-crumbs-row { display: none; }

.pdp { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: 40px; padding: 20px 0 44px; align-items: start; }

/* ---------- gallery ---------- */
.gallery { position: sticky; top: 96px; }
.gallery__main {
  border-radius: var(--r-lg);
  background: var(--gray-100); overflow: hidden; aspect-ratio: 1; position: relative;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__sale { position: absolute; top: 14px; left: 14px; }
.gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 6px; }
.gallery__thumbs button {
  flex: none; width: 72px; height: 72px; padding: 0; overflow: hidden;
  border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  transition: 0.15s;
}
.gallery__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs button:hover { border-color: var(--gray-500); }
.gallery__thumbs button.is-active { border: var(--bw-opt) solid var(--ink); }

/* ---------- buy column ---------- */
.buy__title { font-size: clamp(26px, 3vw, 34px); font-weight: 800; }
.buy__meta { display: flex; align-items: center; gap: 14px; margin: 12px 0 16px; flex-wrap: wrap; }
.buy__meta .stars { color: var(--ink); font-size: 14px; }
.buy__meta span { font-size: 13px; color: var(--gray-500); }
/* Clickable Google-rating row under the title (scrolls to the reviews). */
.buy__rating { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; }
.buy__rating .ow-gbar__stars { font-size: 16px; }
.buy__rating .buy__rating-num { font-weight: 800; color: var(--ink); font-size: 14px; }
.buy__rating .buy__rating-count { color: var(--gray-500); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s; }
.buy__rating:hover .buy__rating-count { color: var(--ink); }

.buy__price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.buy__price b { font-family: var(--font-head); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; }
.buy__price s { font-size: 17px; color: var(--gray-500); font-weight: 400; }

/* Compact "configured price" reference pill shown just under the product
   title. It carries the [data-ow-live-price] hook, so ow-product-options.js
   keeps it in sync with the live selected-options total (the same value as
   the "Your Setup" total in the buy bar) — giving customers an at-a-glance
   price the moment they land, before scrolling to the buy bar. */
.buy__pricepill {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 0 4px; padding: 6px 12px;
  background: var(--gray-100); border-radius: var(--r-pill);
  font-size: 13px; line-height: 1.2;
}
.buy__pricepill-amount { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.01em; }
.buy__pricepill-amount .woocommerce-Price-amount, .buy__pricepill-amount .amount { font-size: 13px; }
.buy__pricepill-amount del { font-weight: 400; color: var(--gray-500); margin-right: 4px; text-decoration: line-through; }
.buy__pricepill-amount ins { text-decoration: none; }
.buy__pricepill-save {
  font-family: var(--font-head); font-weight: 700; font-size: 11px; white-space: nowrap;
  background: var(--ink); color: var(--btn-text, #fff);
  padding: 2px 8px; border-radius: var(--r-pill);
}
/* The same pill, reused inside the sticky mobile buy bar (replaces the plain
   price there). Sits flush — no outer margin, tighter background. */
/* Full width inside the sticky bar. Reads "Your Setup" + the live total grouped
   on the left, with the saving chip pushed out to the right edge. margin-left:auto
   sits on the CHIP (not space-between) so the label+price stay together when the
   chip is hidden on a non-discounted product. */
.stickybar__pricepill {
  margin: 0; padding: 7px 14px; width: 100%; box-sizing: border-box;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
}
.stickybar__setup {
  font-family: var(--font-head); font-weight: 700; font-size: 12px;
  color: var(--gray-500); white-space: nowrap; flex: none;
}
/* Shrink priority matters here: the label and the chip were both flex:none, so
   the PRICE was the only shrinkable child and collapsed to a 4px ellipsis on a
   narrow phone. The price must never be what gives way — pin it, and let the
   saving chip truncate instead (it's the least important of the three). */
.stickybar__pricepill .buy__pricepill-amount { flex: 0 0 auto; white-space: nowrap; }
.stickybar__pricepill .buy__pricepill-save {
  flex: 0 1 auto; min-width: 0; margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- configurator ---------- */
.config {
  border: var(--bw) solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); overflow: hidden; box-shadow: var(--shadow-soft);
}
.config__step { padding: 20px; border-bottom: var(--bw) solid var(--line); }
.config__step:last-child { border-bottom: none; }
.config__label { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.config__num {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  background: var(--ink); color: var(--btn-text, #fff); border-radius: 50%;
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
}
.config__label h3 { font-size: 15px; }
.config__label .picked { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--gray-500); }

/* size cards — thick borders live here */
.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.size-opt {
  border: var(--bw-opt) solid var(--line); border-radius: var(--r-md);
  background: var(--paper); padding: 14px 12px; text-align: center; transition: 0.15s;
}
.size-opt:hover { border-color: var(--gray-500); }
.size-opt.is-active { border-color: var(--ink); background: var(--gray-50); }
.size-opt b { font-family: var(--font-head); font-size: 16px; display: block; }
.size-opt small { font-size: 12px; color: var(--gray-500); }
.size-opt .size-price { display: block; margin-top: 6px; font-weight: 600; font-size: 13px; }

/* finish swatches — thick borders */
.finishes { display: flex; gap: 12px; flex-wrap: wrap; }
.finish-opt {
  display: flex; align-items: center; gap: 10px;
  border: var(--bw-opt) solid var(--line); border-radius: var(--r-pill);
  background: var(--paper); padding: 7px 15px 7px 7px; transition: 0.15s;
}
.finish-opt:hover { border-color: var(--gray-500); }
.finish-opt.is-active { border-color: var(--ink); background: var(--gray-50); }
.finish-opt .swatch { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(17,17,17,0.25); }
.finish-opt span { font-weight: 500; font-size: 14px; }

.swatch--wooden-black { background: linear-gradient(135deg, #7a5c40 50%, #161616 50%); }
.swatch--wooden-white { background: linear-gradient(135deg, #7a5c40 50%, #f5f5f5 50%); }
.swatch--black { background: #161616; }
.swatch--white { background: #f5f5f5; }

/* add-on cards — thick borders */
.addons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.addon {
  display: flex; gap: 12px; align-items: center;
  border: var(--bw-opt) solid var(--line); border-radius: var(--r-md);
  background: var(--paper); padding: 10px; transition: 0.15s; cursor: pointer;
  position: relative;
}
.addon:hover { border-color: var(--gray-500); }
.addon.is-active { border-color: var(--ink); background: var(--gray-50); }
.addon__img { width: 54px; height: 54px; flex: none; border-radius: var(--r-sm); background: var(--gray-100); overflow: hidden; }
.addon__img img { width: 100%; height: 100%; object-fit: cover; }
.addon__info { min-width: 0; flex: 1; }
.addon__info b { font-family: var(--font-head); font-size: 13.5px; display: block; line-height: 1.25; }
.addon__info span { font-size: 13px; font-weight: 600; color: var(--gray-700); }
.addon__check {
  width: 22px; height: 22px; flex: none; border: var(--bw-opt) solid var(--gray-300); border-radius: 7px;
  background: var(--paper); display: grid; place-items: center; color: transparent; transition: 0.15s;
}
.addon.is-active .addon__check { background: var(--ink); border-color: var(--ink); color: var(--btn-text, #fff); }
.addon__check svg, .addon__check i { width: 12px; height: 12px; display: block; }
.addon__qty {
  display: none; align-items: center; gap: 2px;
  border: var(--bw) solid var(--gray-300); border-radius: var(--r-pill); background: var(--paper);
}
.addon.is-active .addon__qty { display: inline-flex; }
.addon.is-active .addon__check { display: none; }
.addon__qty button {
  width: 26px; height: 26px; border: none; background: none;
  font-weight: 700; font-size: 15px; display: grid; place-items: center; border-radius: 50%;
}
.addon__qty button:hover { background: var(--gray-100); }
.addon__qty button svg, .addon__qty button i { width: 12px; height: 12px; }
.addon__qty output { font-family: var(--font-head); font-weight: 700; font-size: 13px; min-width: 16px; text-align: center; }

/* summary */
.config__summary { background: var(--gray-900); color: var(--btn-text, #fff); padding: 20px; }
.summary__rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.summary__row { display: flex; justify-content: space-between; font-size: 14px; color: var(--gray-300); }
.summary__row.total { border-top: 1px solid var(--gray-700); margin-top: 8px; padding-top: 12px; color: var(--btn-text, #fff); }
.summary__row.total b { font-family: var(--font-head); font-size: 22px; }
.summary__row.total span { font-family: var(--font-head); font-weight: 700; font-size: 15px; align-self: center; }
.summary__save { font-size: 12px; font-weight: 600; background: #fff; color: var(--ink); border-radius: var(--r-pill); padding: 2px 10px; }

/* perks under configurator */
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.perk {
  border: var(--bw) solid var(--line); border-radius: var(--r-md); background: var(--paper);
  padding: 12px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--gray-700);
}
.perk svg { width: 19px; height: 19px; margin: 0 auto 6px; display: block; }

/* accordions */
.acc { margin-top: 20px; border: var(--bw) solid var(--line); border-radius: var(--r-md); background: var(--paper); overflow: hidden; }
.acc + .acc { margin-top: 10px; }
.acc summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: 15px 20px; font-family: var(--font-head); font-weight: 700; font-size: 14.5px; cursor: pointer;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 20px; font-weight: 300; color: var(--gray-500); }
.acc[open] summary::after { content: "–"; }
.acc[open] summary { border-bottom: var(--bw) solid var(--line); }
.acc__body { padding: 16px 20px 20px; font-size: 14.5px; color: var(--gray-700); }
.acc__body ul { padding-left: 18px; margin-top: 8px; }
.acc__body li { margin-bottom: 4px; }

/* reviews */
.review-card {
  border: var(--bw) solid var(--line); border-radius: var(--r-md); background: var(--paper);
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
.review-card p { font-size: 14px; color: var(--gray-700); }
.review-card footer { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13.5px; }
.review-card footer .avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--btn-text, #fff);
  display: grid; place-items: center; font-family: var(--font-head); font-size: 12px;
}
.review-card .stars { color: var(--ink); font-size: 13px; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* sticky mobile buy bar */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--paper); border-top: var(--bw) solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -10px 40px rgba(17,17,17,0.18);
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); display: none;
  /* Stacked: full-width price pill on row 1, then product data + add button. */
  flex-direction: column; align-items: stretch; gap: 10px;
  transform: translateY(115%); transition: transform 0.28s cubic-bezier(.22,1,.36,1); will-change: transform;
}
/* Row 2 - product data on the left, Add To Cart pinned right. */
.stickybar__row { display: flex; align-items: center; gap: 14px; }
/* Only lifts into view once the real add-to-cart row has scrolled off screen
   (toggled from product.js via an IntersectionObserver on .buy__ctas). */
.stickybar.is-visible { transform: translateY(0); }
.stickybar__info { min-width: 0; flex: 1 1 auto; }
.stickybar b { font-family: var(--font-head); font-size: 17px; display: block; line-height: 1.2; }
.stickybar small { display: block; color: var(--gray-500); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickybar__config { color: var(--gray-700); font-weight: 600; }
.stickybar__config:empty { display: none; }
/* Selected options render as a stacked LIST (one per line). They used to be a
   single "Color: X · Size: Y" string, but .stickybar small is nowrap+ellipsis,
   so on mobile everything after the first option was truncated out of sight.
   The parent must therefore drop its own nowrap/ellipsis and let each <li>
   truncate individually. */
.stickybar__config { white-space: normal; overflow: visible; text-overflow: clip; }
.stickybar__configlist { list-style: none; margin: 1px 0 0; padding: 0; }
.stickybar__configlist li {
  display: block; font-size: 11.5px; line-height: 1.45; font-weight: 600; color: var(--gray-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stickybar__config-k { color: var(--gray-500); font-weight: 600; }
.stickybar .btn { margin-left: auto; flex: none; padding: 12px 20px; }

/* ---- Checkout quick-summary sticky tray (mirrors the product buy bar) ---- */
.checkout-stickybar {
  /* Above WooCommerce's blockUI fade (z-index 1000) so the checkout loading
     overlay never paints on top of the sticky bar. */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000;
  background: var(--paper); border-top: var(--bw) solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -10px 40px rgba(17,17,17,0.18);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  display: none; align-items: center; gap: 14px;
  transform: translateY(115%); transition: transform 0.28s cubic-bezier(.22,1,.36,1); will-change: transform;
}
.checkout-stickybar.is-visible { transform: translateY(0); }
/* When a drawer/modal/tray is open (body.no-scroll), tuck the high-z tray away
   so it never sits above the overlay. */
body.no-scroll .checkout-stickybar { transform: translateY(115%) !important; }
/* Full-screen "placing your order" overlay (shown on Place Order submit). */
body.ow-placing-lock { overflow: hidden; }
.ow-placing {
  position: fixed; inset: 0; z-index: 200000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17,17,17,0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
}
.ow-placing.is-on { opacity: 1; visibility: visible; }
.ow-placing__box {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
  background: var(--paper); color: var(--ink);
  padding: 34px 40px; border-radius: var(--r-lg); box-shadow: 0 24px 70px rgba(0,0,0,0.35);
  max-width: 84vw; transform: translateY(8px) scale(0.98); transition: transform 0.3s cubic-bezier(.22,1,.36,1);
}
.ow-placing.is-on .ow-placing__box { transform: translateY(0) scale(1); }
.ow-placing__spin {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--gray-200); border-right-color: var(--ink);
  animation: ow-bspin 0.7s linear infinite;
}
.ow-placing__text { font-family: var(--font-head); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; transition: opacity 0.2s ease; min-height: 1.3em; }
.ow-placing__hint { font-size: 12.5px; color: var(--gray-500); }

/* Skeleton the tray total while the summary recalculates (mirrors #order_review). */
.checkout-stickybar.ow-sum-busy .checkout-stickybar__total {
  color: transparent !important; border-radius: 6px; min-width: 92px; height: 1.1em; display: inline-block;
  background: linear-gradient( 90deg, var(--gray-100) 25%, var(--gray-200, #e6e6e6) 37%, var(--gray-100) 63% );
  background-size: 400% 100%; animation: ow-skeleton 1.15s ease infinite;
}
.checkout-stickybar__info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.checkout-stickybar__label { font-size: 11px; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.checkout-stickybar__total { font-family: var(--font-head); font-size: 19px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.checkout-stickybar__total .amount { font-weight: 800; }
.checkout-stickybar__btn { margin-left: auto; flex: none; padding: 12px 22px; white-space: nowrap; }
/* Only needed once the Order Summary card drops below the form (≤1024px). */
@media (max-width: 1024px) { .checkout-stickybar { display: flex; } }

/* ---- Trending shelf: horizontal card scroller shared across surfaces ---- */
.ow-trend { margin: 0; }
.ow-trend__head { margin-bottom: 14px; }
.ow-trend__title { display: flex; align-items: center; gap: 8px; font-size: 20px; font-family: var(--font-head); font-weight: 800; letter-spacing: -0.01em; }
.ow-trend__title svg { color: var(--ink); flex: none; }
.ow-trend__sub { font-size: 13px; color: var(--gray-500); margin-top: 5px; }
.ow-trend__grid {
  display: flex !important; grid-template-columns: none !important; gap: 16px;
  overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; margin: 0;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.ow-trend__grid::-webkit-scrollbar { height: 6px; }
.ow-trend__grid::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; }
.ow-trend__grid > .pcard { flex: 0 0 210px; width: 210px; scroll-snap-align: start; margin: 0; }

/* Compact horizontal cards (rank + thumb + name/price) rendered alongside the
   pcard grid by ow_trending_shelf(). Hidden on desktop; swapped in on mobile
   (see the ≤640px block) so trending shows as horizontal cards on phones.
   Two-class selector so this beats the later single-class `.ow-trend-track`
   `display:grid` rule and stays hidden on desktop. */
.ow-trend .ow-trend__compact { display: none; }

/* Match the standard .section rhythm (44px desktop; the ≤720px .section rule
   drops it to 32px on mobile) so trending isn't cramped vs its neighbours. */
.ow-trend-section { padding-top: 44px; padding-bottom: 44px; }
.ow-trend--cart { margin-top: 36px; }
.ow-trend--checkout { margin-top: 30px; }

/* Cart-drawer trending: a horizontal SLIDER showing one full-width product card
   per view (scroll-snap), styled after the design's cross-sell strip — a small
   uppercase label above a clean bordered card carousel, sitting just above the
   subtotal (cart items → trending slider → subtotal → checkout). cart-drawer.js
   adds the pager dots. */
.drawer__trend { padding: 16px 20px; border-top: var(--bw) solid var(--line); }
.drawer__trend .ow-trend { margin: 0; padding: 0; border: none; }
.ow-trend--drawer .ow-trend__head { margin-bottom: 12px; }
.ow-trend--drawer .ow-trend__title {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700; color: var(--gray-500); gap: 8px;
}
.ow-trend--drawer .ow-trend__title svg { width: 14px; height: 14px; }

/* Slider track — one card per row, snapping horizontally; scrollbar hidden. */
.ow-trend--drawer .ow-trend__grid {
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: 12px; overflow-x: auto;
  overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ow-trend--drawer .ow-trend__grid::-webkit-scrollbar { display: none; }

/* One full-width horizontal card per slide: thumbnail + name/price + quick-add. */
.ow-trend--drawer .ow-trend__grid > .pcard {
  flex: 0 0 100%; width: 100%; scroll-snap-align: center; position: relative;
  flex-direction: row; align-items: center; gap: 12px; padding: 10px;
}
.ow-trend--drawer .pcard__media { flex: none; width: 60px; height: 60px; aspect-ratio: 1; border-radius: var(--r-sm); }
.ow-trend--drawer .pcard__body-link { flex: 1 1 auto; min-width: 0; }
.ow-trend--drawer .pcard__body { padding: 0 42px 0 0; gap: 3px; justify-content: center; }
.ow-trend--drawer .pcard__name {
  font-size: 13.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ow-trend--drawer .pcard__price { margin-top: 0; font-size: 14px; }
.ow-trend--drawer .pcard__badges,
.ow-trend--drawer .pcard__cat,
.ow-trend--drawer .pcard__hook,
.ow-trend--drawer .pcard__swatches { display: none; }

/* Quick-add "+" pill (design's xsell-card__add) — the real ajax add-to-cart
   button for simple products; the "Configure →" link variant stays hidden. */
.ow-trend--drawer .pcard__quick { display: none; }
.ow-trend--drawer .pcard__quick.add_to_cart_button {
  display: grid; place-items: center; position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%); opacity: 1; width: 30px; height: 30px; padding: 0;
  border-radius: 50%; background: var(--ink); color: transparent; font-size: 0;
}
.ow-trend--drawer .pcard__quick.add_to_cart_button::before {
  content: "+"; color: var(--btn-text, #fff); font-size: 20px; line-height: 1; font-family: var(--font-head);
}
.ow-trend--drawer .pcard__quick.add_to_cart_button.loading::before { content: none; }
.ow-trend--drawer .pcard__quick.add_to_cart_button:hover { background: var(--gray-700); }

/* Pager dots under the slider (built by cart-drawer.js). */
.ow-trend-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.ow-trend-dot {
  width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: var(--gray-300); transition: background .15s ease, width .15s ease;
}
.ow-trend-dot.is-active { background: var(--ink); width: 18px; border-radius: 3px; }

@media (max-width: 720px) {
  .ow-trend__title { font-size: 17px; }
  /* 80% card + 20% peek of the next on mobile (the cart drawer keeps its own
     100%-wide one-per-view rule via the more specific .ow-trend--drawer selector). */
  .ow-trend__grid > .pcard { flex: 0 0 80%; width: 80%; }
}

/* toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--btn-text, #fff); border-radius: var(--r-pill);
  box-shadow: var(--shadow-hover);
  padding: 12px 24px; font-family: var(--font-head); font-weight: 600; font-size: 14px;
  opacity: 0; pointer-events: none; transition: 0.25s; z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__main { min-height: 380px; }
  .hero__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .pdp { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* relative (not static) so the absolutely-positioned sale badge (.onsale /
     .pcard__off) stays pinned to the gallery's top-left corner instead of
     escaping to the page. top:auto is REQUIRED: the desktop rule is
     `.gallery{position:sticky;top:96px}`, and `position:static` silently
     ignored that 96px — switching to relative re-activated it and pushed the
     whole gallery down 96px, leaving an empty band above it on mobile. */
  .gallery { position: relative; top: auto; min-width: 0; overflow: hidden; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .trust { grid-template-columns: 1fr 1fr; }
  .feature__copy { padding: 32px; }
}

@media (max-width: 860px) {
  /* hamburger takes over */
  .nav { display: none; }
  .menu-btn { display: grid; }
  /* with the centered nav gone, push the icon cluster to the right edge */
  .header__actions { margin-left: auto; }
}

@media (max-width: 720px) {
  .wrap { padding-inline: 16px; }
  .section { padding: 32px 0; }
  /* Uniform vertical rhythm on mobile: the product block's bottom and the
     standalone code zones (e.g. the Google reviews bar) match the 32px section
     spacing, so every block is evenly spaced. (.buy .ow-code-zone keeps its own
     tighter margin via higher specificity.) */
  .pdp { padding-bottom: 32px; }
  .ow-code-zone { margin: 32px 0; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
  .section__head .btn { padding: 9px 18px; font-size: 13px; }

  .header__inner { height: 62px; gap: 12px; }
  .icon-btn { width: 38px; height: 38px; }
  .header__actions { gap: 6px; }
  .header__actions .icon-btn[aria-label="Account"] { display: none; }

  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pcard__body { padding: 10px 12px 12px; }
  .pcard__name { font-size: 14px; }
  .pcard__cat { font-size: 10.5px; }
  .pcard__quick { display: none; }

  /* categories become a swipeable rail */
  .cats__rail {
    display: flex; overflow-x: auto; gap: 10px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 8px; margin-inline: -16px; padding-inline: 16px;
    scrollbar-width: none;
  }
  .cats__rail::-webkit-scrollbar { display: none; }
  .cat-chip { flex: none; scroll-snap-align: start; min-width: 180px; }

  .hero { padding: 16px 0 8px; }
  .hero__main { min-height: 340px; border-radius: var(--r-md); }
  .hero__content { padding: 20px; }
  .hero__cta { gap: 8px; }
  .hero__cta .btn { flex: 1; padding: 13px 16px; font-size: 14px; white-space: nowrap; }
  .hero__side { grid-template-columns: 1fr; }
  .hero__card { min-height: 160px; border-radius: var(--r-md); }

  .feature { grid-template-columns: 1fr; }
  .feature__copy { padding: 24px 20px; }
  .feature__media { min-height: 220px; }

  .trust { grid-template-columns: 1fr; gap: 10px; }
  .trust__item { padding: 14px; }

  /* Brand + rating span the full width; the two link columns pair up so the
     mobile footer stays compact instead of one very tall stack. */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; padding: 36px 24px 28px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__grid > div:has(.footer__rating) { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 6px; padding-inline: 24px; }

  /* product page */
  .buy__price b { font-size: 27px; }
  .buy__price s { font-size: 15px; }
  /* On mobile the under-title price pill is redundant — the same pill now
     rides along in the sticky buy bar (.stickybar__pricepill). */
  .buy__pricepill:not(.stickybar__pricepill) { display: none; }
  .config__step { padding: 16px 14px; }
  .config__summary { padding: 16px 14px; }
  .sizes { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .size-opt { padding: 12px 6px; }
  .size-opt b { font-size: 14px; }
  .size-opt small { font-size: 11px; }
  .finishes { gap: 8px; }
  .finish-opt { padding: 6px 12px 6px 6px; }
  .finish-opt span { font-size: 13px; }
  .addons { grid-template-columns: 1fr; gap: 8px; }
  .gallery__thumbs button { width: 62px; height: 62px; }
  .perks { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .perk { padding: 10px 6px; font-size: 11.5px; }
  .reviews-grid { grid-template-columns: 1fr; }

  .stickybar { display: flex; }
  body.pdp-page { padding-bottom: 78px; }
}

@media (max-width: 400px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sizes { grid-template-columns: 1fr; }
  .size-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; text-align: left; padding: 12px 14px; }
  .size-opt b { font-size: 15px; }
  .size-opt .size-price { margin-top: 0; }
  .logo span { display: none; }
}

/* ==========================================================================
   ICONS (Lucide) — sizing inside our buttons/components
   ========================================================================== */
.icon-btn svg, .icon-btn i { width: 17px; height: 17px; display: block; }
.icon-btn { color: var(--ink); }
.perk svg, .perk i { width: 19px; height: 19px; margin: 0 auto 6px; display: block; }
.trust__icon svg, .trust__icon i { width: 21px; height: 21px; display: block; }
[data-lucide] { display: block; }

/* ==========================================================================
   OVERLAY SYSTEM — shared backdrop for drawer + modals
   ========================================================================== */
html.no-scroll, body.no-scroll { overflow: hidden; }

.overlay-backdrop {
  position: fixed; inset: 0; z-index: 199;
  background: rgba(17, 17, 17, 0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.overlay-backdrop.show { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   CART SIDE-SLIDE DRAWER
   ========================================================================== */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 210;
  width: 420px; max-width: 92vw; background: var(--paper);
  border-left: var(--bw) solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}
.drawer.open { transform: translateX(0); }

.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: var(--bw) solid var(--line); }
.drawer__head h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.drawer__head h3 svg, .drawer__head h3 i { width: 19px; height: 19px; }
.drawer__head #drawerCount { color: var(--gray-500); font-weight: 500; font-family: var(--font-body); font-size: 14px; }

.drawer__ship { padding: 14px 20px; border-bottom: var(--bw) solid var(--line); }
.ship-progress { height: 6px; border-radius: var(--r-pill); background: var(--gray-200); overflow: hidden; margin-bottom: 8px; }
.ship-progress__bar { height: 100%; background: var(--ink); border-radius: var(--r-pill); transition: width 0.3s; }
.drawer__ship p { font-size: 12.5px; color: var(--gray-700); }
.drawer__ship p b { color: var(--ink); }
/* Free-shipping-unlocked message: a gold "winner" trophy beside the text. */
.drawer__ship-won { display: inline-flex; align-items: center; gap: 7px; }
.drawer__ship-won svg, .drawer__ship-won i { width: 16px; height: 16px; flex: none; color: #c8931f; }

.drawer__body { flex: 1; overflow-y: auto; padding: 14px 20px; display: flex; flex-direction: column; gap: 16px; }

.drawer-item { display: flex; gap: 12px; padding-bottom: 16px; border-bottom: var(--bw) solid var(--line); }
.drawer-item:last-child { border-bottom: none; padding-bottom: 0; }
.drawer-item__img { width: 64px; height: 64px; flex: none; border-radius: var(--r-sm); background: var(--gray-100); overflow: hidden; border: var(--bw) solid var(--line); }
.drawer-item__img img { width: 100%; height: 100%; object-fit: cover; }
.drawer-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* Title row: product name with its line price sitting right beside it. */
.drawer-item__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.drawer-item__name, .drawer-item__info b { font-family: var(--font-head); font-size: 14px; line-height: 1.3; }
.drawer-item__price { font-family: var(--font-head); font-weight: 700; font-size: 13.5px; white-space: nowrap; flex: none; }
.drawer-item__variant { font-size: 12.5px; color: var(--gray-500); }
/* Bottom row: quantity stepper on the left, trash bin on the right. */
.drawer-item__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.drawer-item__remove { background: none; border: none; color: var(--gray-500); padding: 2px; display: inline-flex; cursor: pointer; transition: color .15s ease; }
.drawer-item__remove:hover { color: var(--ink); }
.drawer-item__remove svg, .drawer-item__remove i { width: 18px; height: 18px; }

.qty-stepper { display: inline-flex; align-items: center; gap: 2px; border: var(--bw) solid var(--gray-300); border-radius: var(--r-pill); }
.qty-stepper button { width: 24px; height: 24px; border: none; background: none; display: grid; place-items: center; border-radius: 50%; color: var(--ink); }
.qty-stepper button:hover { background: var(--gray-100); }
.qty-stepper button svg, .qty-stepper button i { width: 12px; height: 12px; }
.qty-stepper output { font-family: var(--font-head); font-weight: 700; font-size: 12.5px; min-width: 16px; text-align: center; }

.drawer-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; color: var(--gray-500); padding: 40px 20px; }
.drawer-empty svg, .drawer-empty i { width: 46px; height: 46px; color: var(--gray-300); }
.drawer-empty p { font-size: 14.5px; font-weight: 600; color: var(--gray-700); }

.drawer__foot { padding: 18px 20px 22px; border-top: var(--bw) solid var(--line); }
.drawer__subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.drawer__subtotal span { font-size: 14px; color: var(--gray-700); }
.drawer__subtotal b { font-family: var(--font-head); font-size: 19px; }
.drawer__note { font-size: 12px; color: var(--gray-500); margin-bottom: 14px; }
.drawer__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.btn--disabled { opacity: 0.4; pointer-events: none; }

/* ==========================================================================
   MODALS (auth, add-to-cart popup, generic)
   ========================================================================== */
.modal {
  position: fixed; inset: 0; z-index: 211;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.modal.open { opacity: 1; pointer-events: auto; }
.modal__box {
  position: relative; width: 100%; background: var(--paper);
  border-radius: var(--r-lg); padding: 28px; box-shadow: 0 24px 60px rgba(17,17,17,0.18);
  transform: scale(0.96) translateY(8px); transition: transform 0.25s;
  max-height: 88vh; overflow-y: auto;
}
.modal.open .modal__box { transform: scale(1) translateY(0); }
.modal__close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px;
  border-radius: 50%; border: var(--bw) solid var(--line); background: var(--paper);
  display: grid; place-items: center; color: var(--ink);
}
.modal__close:hover { border-color: var(--ink); }
.modal__close svg, .modal__close i { width: 15px; height: 15px; }

/* ---------- auth modal ---------- */
.modal__box--auth { max-width: 420px; }
.auth-tabs { display: flex; border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: 4px; margin-bottom: 24px; }
.auth-tab { flex: 1; padding: 10px; border: none; background: transparent; border-radius: var(--r-pill); font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: var(--gray-700); }
.auth-tab.is-active { background: var(--ink); color: var(--btn-text, #fff); }
.auth-panel { display: none; }
.auth-panel.is-active { display: block; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--gray-700); }
.field__control {
  display: flex; align-items: center; gap: 10px;
  border: var(--bw) solid var(--form-border); border-radius: var(--form-radius);
  padding: 0 14px; background: var(--form-bg); transition: 0.15s;
}
.field__control:focus-within { border-color: var(--form-focus); box-shadow: 0 0 0 3px rgba(17,17,17,0.06); }
.field__control svg, .field__control > i { width: 16px; height: 16px; color: var(--gray-500); flex: none; }
.field__control input, .field__control select, .field__control textarea {
  border: none; outline: none; flex: 1; width: 100%;
  padding: 12px 0; font-family: var(--font-body); font-size: 14.5px; background: transparent; color: var(--ink);
}
.field__control textarea { padding-block: 12px; resize: vertical; min-height: 80px; }
.field__toggle { background: none; border: none; color: var(--gray-500); padding: 4px; flex: none; }
.field__toggle:hover { color: var(--ink); }
.field__toggle svg, .field__toggle i { width: 16px; height: 16px; }
.field--plain { border: var(--bw) solid var(--form-border); border-radius: var(--form-radius); padding: 11px 14px; font-family: var(--font-body); font-size: 14.5px; width: 100%; background: var(--form-bg); }
.field--plain:focus { outline: none; border-color: var(--form-focus); box-shadow: 0 0 0 3px rgba(17,17,17,0.06); }
.field-hint { font-size: 12px; color: var(--gray-500); }
/* WooCommerce's frontend JS wraps account/reset password inputs in a
   <span class="password-input"> and appends an (unstyled) show/hide <button>.
   This custom theme doesn't load WC's form CSS, so the wrapper otherwise
   inflates the field to ~69px and leaves an invisible 4px toggle stub. Unwrap
   the span for layout (display:contents) so password fields match every other
   input, and drop the stray toggle. */
.password-input { display: contents; }
.show-password-input { display: none !important; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .field { margin-bottom: 0; }
.form-grid .field--full { grid-column: 1 / -1; }

.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--gray-700); cursor: pointer; margin-bottom: 16px; user-select: none; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  border: var(--bw-opt) solid var(--gray-300); border-radius: 6px;
  display: grid; place-items: center; color: transparent; transition: 0.15s;
}
.check input:checked + .check__box { background: var(--ink); border-color: var(--ink); color: var(--btn-text, #fff); }
.check__box svg, .check__box i { width: 12px; height: 12px; }

.btn--block { width: 100%; }
.auth-forgot { display: block; text-align: right; font-size: 12.5px; font-weight: 600; margin: -6px 0 16px; color: var(--gray-700); }
.auth-forgot:hover { color: var(--ink); text-decoration: underline; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--gray-500); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-social .btn { gap: 8px; }
.auth-social svg, .auth-social i { width: 16px; height: 16px; }
.auth-switch { text-align: center; font-size: 13.5px; color: var(--gray-700); margin-top: 20px; }
.auth-switch button { background: none; border: none; font-weight: 700; color: var(--ink); text-decoration: underline; cursor: pointer; font-size: inherit; }

/* ---------- social login (Google / Facebook) ---------- */
.ow-social-login { margin-top: 18px; }
.ow-social-login__sep { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; color: var(--gray-500); font-size: 12.5px; }
.ow-social-login__sep::before, .ow-social-login__sep::after { content: ""; flex: 1; height: var(--bw); background: var(--line); }
.ow-social-login__btns { display: grid; gap: 10px; }
.ow-social-btn {
	display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px;
	border: var(--bw) solid var(--line); border-radius: var(--r-pill); background: var(--paper);
	color: var(--ink); font-family: var(--font-head); font-weight: 600; font-size: 14px;
	text-decoration: none; transition: border-color .15s ease, background .15s ease;
}
.ow-social-btn:hover { border-color: var(--ink); background: var(--gray-100); }
.ow-social-btn svg { flex: none; }
/* Account gate: centre the buttons under the CTA at a readable width. */
.account-gate .ow-social-login { max-width: 340px; margin-left: auto; margin-right: auto; }

/* ---------- add-to-cart popup ---------- */
.modal__box--added { max-width: 400px; text-align: center; }
.added-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px; }
.added-check { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--btn-text, #fff); display: grid; place-items: center; }
.added-check svg, .added-check i { width: 24px; height: 24px; }
.added-item { display: flex; gap: 12px; text-align: left; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 12px; margin-bottom: 20px; }
.added-item img { width: 64px; height: 64px; border-radius: var(--r-sm); object-fit: cover; flex: none; background: var(--gray-100); }
.added-item b { font-family: var(--font-head); font-size: 14.5px; display: block; }
.added-item span { font-size: 13px; color: var(--gray-500); }
.added-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.added-continue { background: none; border: none; font-weight: 600; font-size: 13.5px; color: var(--gray-700); text-decoration: underline; cursor: pointer; width: 100%; padding: 6px; }
.added-continue:hover { color: var(--ink); }

/* ==========================================================================
   CROSS-SELL — mini product cards used in drawer, popup, cart page
   ========================================================================== */
.xsell-strip { padding: 16px 20px; border-top: var(--bw) solid var(--line); }
.xsell-strip h4 {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700; color: var(--gray-500); margin-bottom: 12px;
}
.xsell-strip h4 svg, .xsell-strip h4 i { width: 14px; height: 14px; color: var(--gray-400, var(--gray-500)); }
.xsell-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.xsell-card {
  flex: 0 0 auto; width: 128px; border: var(--bw) solid var(--line); border-radius: var(--r-md);
  padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--paper);
}
.xsell-card__img { width: 100%; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--gray-100); overflow: hidden; }
.xsell-card__img img { width: 100%; height: 100%; object-fit: cover; }
.xsell-card__info b { font-size: 12px; font-family: var(--font-head); display: block; line-height: 1.3; margin-bottom: 3px; }
.xsell-card__info span { font-size: 11px; color: var(--gray-500); font-weight: 600; }
.xsell-card__info span s { margin-left: 4px; font-weight: 400; }
.xsell-card__add {
  align-self: flex-end; width: 26px; height: 26px; border-radius: 50%;
  border: none; background: var(--ink); color: var(--btn-text, #fff); display: grid; place-items: center;
}
.xsell-card__add:hover { background: var(--gray-700); }
.xsell-card__add svg, .xsell-card__add i { width: 13px; height: 13px; }

/* full-page variant, e.g. cart.html */
.xsell-strip--page { border: var(--bw) solid var(--line); border-radius: var(--r-lg); background: var(--paper); padding: 22px; margin-bottom: 28px; grid-column: 1 / -1; }
.xsell-strip--page h4 { font-size: 13px; margin-bottom: 16px; }
.xsell-strip--page .xsell-card { width: 160px; }
.xsell-strip--page .xsell-card__info b { font-size: 13.5px; }
.xsell-strip--page .xsell-card__info span { font-size: 12px; }

/* ==========================================================================
   FREQUENTLY BOUGHT TOGETHER (product page bundle)
   ========================================================================== */
.fbt { border: var(--bw) solid var(--line); border-radius: var(--r-lg); padding: 22px; margin: 24px 0; background: var(--paper); }
.fbt h3 { font-size: 16px; margin-bottom: 18px; display: flex; align-items: center; gap: 9px; }
.fbt h3 svg, .fbt h3 i { width: 18px; height: 18px; }
.fbt__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.fbt__item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; width: 104px; cursor: pointer; position: relative; }
.fbt__item input { position: absolute; top: -4px; right: -2px; width: 18px; height: 18px; accent-color: var(--ink); cursor: pointer; }
.fbt__thumb { width: 84px; height: 84px; border-radius: var(--r-md); border: var(--bw-opt) solid var(--gray-300); overflow: hidden; background: var(--gray-100); transition: 0.15s; }
.fbt__item.is-locked .fbt__thumb { border-color: var(--ink); }
.fbt__item.is-off .fbt__thumb { opacity: 0.4; border-color: var(--gray-200); }
.fbt__item.is-off b, .fbt__item.is-off span { opacity: 0.4; }
.fbt__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fbt__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); font-weight: 700; }
.fbt__item b { font-size: 12px; font-family: var(--font-head); line-height: 1.25; }
.fbt__item span { font-size: 11.5px; color: var(--gray-500); }
.fbt__plus { font-size: 20px; color: var(--gray-300); font-weight: 300; }
.fbt__summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 16px; border-top: var(--bw) solid var(--line); }
.fbt__summary > span { font-size: 14px; color: var(--gray-700); }
.fbt__summary b { font-family: var(--font-head); }
.fbt__save { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   UPSELL NUDGE (product configurator)
   ========================================================================== */
.upsell-nudge {
  display: flex; align-items: center; gap: 10px; background: var(--gray-50);
  border: var(--bw) dashed var(--gray-300); border-radius: var(--r-md);
  padding: 12px 14px; margin-top: 12px; font-size: 13px; color: var(--gray-700);
}
.upsell-nudge svg, .upsell-nudge i { width: 18px; height: 18px; color: var(--ink); flex: none; }
.upsell-nudge b { color: var(--ink); }
.upsell-nudge button {
  margin-left: auto; flex: none; background: var(--ink); color: var(--btn-text, #fff); border: none;
  border-radius: var(--r-pill); padding: 8px 15px; font-weight: 700; font-size: 12.5px;
  white-space: nowrap; font-family: var(--font-head);
}
.upsell-nudge button:hover { background: var(--gray-700); }

/* ==========================================================================
   ORDER BUMP (checkout cross-sell)
   ========================================================================== */
.order-bump {
  display: flex; align-items: center; gap: 12px; border: var(--bw-opt) dashed var(--gray-300);
  border-radius: var(--r-md); padding: 12px; margin: 16px 0; background: var(--gray-50); cursor: pointer;
}
.order-bump.is-active { border-color: var(--ink); border-style: solid; background: var(--paper); }
.order-bump input { position: absolute; opacity: 0; width: 0; height: 0; }
.order-bump input:checked + .check__box { background: var(--ink); border-color: var(--ink); color: var(--btn-text, #fff); }
.order-bump__img { width: 44px; height: 44px; border-radius: var(--r-sm); overflow: hidden; background: var(--gray-100); flex: none; }
.order-bump__img img { width: 100%; height: 100%; object-fit: cover; }
.order-bump__info { flex: 1; min-width: 0; }
.order-bump__info b { font-family: var(--font-head); font-size: 13px; display: block; }
.order-bump__info span { font-size: 11.5px; color: var(--gray-500); }
.order-bump__price { font-family: var(--font-head); font-weight: 700; font-size: 13px; white-space: nowrap; }

/* ==========================================================================
   OPTION CARDS (radio-style) — thick borders, used site-wide for choices
   ========================================================================== */
.opt-card {
  display: flex; align-items: center; gap: 14px;
  border: var(--bw-opt) solid var(--gray-300); border-radius: var(--r-md);
  padding: 14px 16px; cursor: pointer; transition: 0.15s; margin-bottom: 10px; background: var(--paper);
}
.opt-card:last-child { margin-bottom: 0; }
.opt-card:hover { border-color: var(--gray-500); }
.opt-card.is-active { border-color: var(--ink); background: var(--gray-50); }
.opt-card__radio {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: var(--bw-opt) solid var(--gray-300); display: grid; place-items: center; transition: 0.15s;
}
.opt-card.is-active .opt-card__radio { border-color: var(--ink); }
.opt-card.is-active .opt-card__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.opt-card__icon { width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); background: var(--gray-100); display: grid; place-items: center; }
.opt-card__icon svg, .opt-card__icon i { width: 19px; height: 19px; }
.opt-card__body { flex: 1; min-width: 0; }
.opt-card__body b { font-family: var(--font-head); font-size: 14.5px; display: block; }
.opt-card__body span { font-size: 12.5px; color: var(--gray-500); }
.opt-card__price { font-family: var(--font-head); font-weight: 700; font-size: 14px; white-space: nowrap; }
.opt-card .card-fields { display: none; width: 100%; margin-top: 14px; padding-top: 14px; border-top: var(--bw) solid var(--line); }
.opt-card.is-active .card-fields { display: grid; }

/* ==========================================================================
   CART PAGE
   ========================================================================== */
/* padding-block only — .cart-page is itself a .wrap, so a `padding` shorthand
   would zero the wrap's horizontal padding and let content hit the edges. */
.cart-page { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; padding-block: 22px 52px; align-items: start; }
.cart-page h1 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 18px; grid-column: 1 / -1; }

.cart-list { border: var(--bw) solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.cart-row { display: flex; gap: 16px; padding: 18px; border-bottom: var(--bw) solid var(--line); }
.cart-row:last-child { border-bottom: none; }
.cart-row__img { width: 88px; height: 88px; flex: none; border-radius: var(--r-md); background: var(--gray-100); overflow: hidden; border: var(--bw) solid var(--line); }
.cart-row__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cart-row__info b { font-family: var(--font-head); font-size: 15.5px; }
.cart-row__variant { font-size: 13px; color: var(--gray-500); }
.cart-row__actions { display: flex; align-items: center; gap: 18px; margin-top: auto; flex-wrap: wrap; }
.cart-row__remove { display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--gray-500); font-size: 12.5px; font-weight: 600; }
.cart-row__remove:hover { color: var(--ink); }
.cart-row__remove svg, .cart-row__remove i { width: 14px; height: 14px; }
.cart-row__price { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; text-align: right; }
.cart-row__price b { font-family: var(--font-head); font-size: 16px; }
.cart-row__price s { font-size: 12.5px; color: var(--gray-500); }

.cart-empty { border: var(--bw) solid var(--line); border-radius: var(--r-lg); background: var(--paper); padding: 70px 20px; text-align: center; grid-column: 1 / -1; }
/* Empty-cart page: single column + a centred, comfortably-sized card. */
.cart-page--empty { grid-template-columns: 1fr; }
.cart-page--empty .cart-empty { max-width: 620px; margin-inline: auto; }
/* Suppress WooCommerce's default full-width empty-cart notice (do_action
   'woocommerce_cart_is_empty') — our styled card replaces it. */
.wc-empty-cart-message { display: none; }
.cart-empty i, .cart-empty svg { width: 52px; height: 52px; color: var(--gray-300); margin: 0 auto 18px; }
.cart-empty h3 { font-size: 19px; margin-bottom: 8px; }
.cart-empty p { color: var(--gray-500); margin-bottom: 22px; }

/* 404 — page not found */
.ow-404 { text-align: center; max-width: 640px; margin-inline: auto; padding-top: 70px; padding-bottom: 90px; }
.ow-404__code { display: block; font-family: var(--font-head); font-weight: 800; line-height: 1; font-size: clamp(96px, 22vw, 190px); letter-spacing: -0.04em; color: var(--ink); }
.ow-404__title { font-size: clamp(22px, 4vw, 30px); margin: 8px 0 12px; }
.ow-404__text { color: var(--gray-500); font-size: 15px; line-height: 1.6; margin-bottom: 28px; }
.ow-404__search { display: flex; align-items: center; gap: 8px; max-width: 460px; margin: 0 auto 26px; border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: 6px 6px 6px 16px; background: var(--paper); }
.ow-404__search svg, .ow-404__search i { width: 18px; height: 18px; color: var(--gray-500); flex: none; }
.ow-404__search input[type="search"] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-body); font-size: 14.5px; color: var(--ink); }
.ow-404__search .btn { flex: none; padding: 10px 20px; }
.ow-404__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ow-404__cta .btn svg, .ow-404__cta .btn i { width: 17px; height: 17px; }
@media (max-width: 520px) { .ow-404__search .btn { display: none; } .ow-404__cta { flex-direction: column; } .ow-404__cta .btn { width: 100%; } }

.summary-card { border: var(--bw) solid var(--line); border-radius: var(--r-lg); background: var(--paper); padding: 22px; position: sticky; top: 96px; }
.summary-card h3 { font-size: 17px; margin-bottom: 16px; }
.summary-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; color: var(--gray-700); margin-bottom: 10px; }
/* Prices are shown tax-inclusive without WooCommerce's tax annotations — the
   "(incl. tax)" price label AND the "(includes X Tax)" note on the order total
   (the label is also emptied server-side). */
.tax_label, small.tax_label, .woocommerce-Price-taxLabel,
.includes_tax, small.includes_tax { display: none !important; }
.summary-row.total { border-top: var(--bw) solid var(--line); margin-top: 12px; padding-top: 14px; font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--ink); }
.summary-row.total span:last-child { font-family: var(--font-head); }
.coupon { display: flex; gap: 8px; margin: 18px 0; }
.coupon input { flex: 1; }
.coupon button { border: var(--bw) solid var(--ink); border-radius: var(--r-md); padding: 0 16px; font-weight: 700; font-size: 13px; background: var(--paper); font-family: var(--font-head); }
.coupon button:hover { background: var(--ink); color: var(--btn-text, #fff); }
.coupon-applied { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--gray-100); border-radius: var(--r-md); padding: 10px 12px; margin: 14px 0; }
.coupon-applied svg, .coupon-applied i { width: 15px; height: 15px; }
.summary-perks { margin-top: 18px; padding-top: 16px; border-top: var(--bw) solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.summary-perks div { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--gray-700); }
.summary-perks svg, .summary-perks i { width: 16px; height: 16px; flex: none; }

/* ==========================================================================
   CHECKOUT PAGE
   ========================================================================== */
.checkout-steps { display: flex; align-items: center; gap: 10px; margin: 22px 0 30px; }
.c-step { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--gray-400, var(--gray-500)); }
.c-step__num { width: 26px; height: 26px; flex: none; border-radius: 50%; border: var(--bw-opt) solid var(--gray-300); display: grid; place-items: center; font-size: 12px; color: var(--gray-500); }
.c-step.is-done { color: var(--ink); }
.c-step.is-done .c-step__num { background: var(--ink); border-color: var(--ink); color: var(--btn-text, #fff); }
.c-step.is-active { color: var(--ink); }
.c-step.is-active .c-step__num { border-color: var(--ink); color: var(--ink); }
.c-step__num svg, .c-step__num i { width: 13px; height: 13px; }
.c-step-line { flex: 1 1 24px; max-width: 60px; height: 1px; background: var(--gray-200); }
.c-step-line.is-done { background: var(--ink); }

.checkout-page { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; padding: 0 0 52px; align-items: start; }
.checkout-card { border: var(--bw) solid var(--line); border-radius: var(--r-lg); background: var(--paper); padding: 24px; margin-bottom: 20px; }
.checkout-card h3 { font-size: 16px; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.checkout-card h3 svg, .checkout-card h3 i { width: 18px; height: 18px; }

.summary-mini-item { display: flex; gap: 10px; margin-bottom: 14px; font-size: 13px; align-items: center; }
.summary-mini-item img { width: 50px; height: 50px; border-radius: var(--r-sm); object-fit: cover; background: var(--gray-100); border: var(--bw) solid var(--line); flex: none; }
.summary-mini-item b { display: block; font-family: var(--font-head); font-size: 13.5px; }
.summary-mini-item span { color: var(--gray-500); font-size: 12px; }
.summary-mini-item .qty-badge { margin-left: auto; font-size: 12px; color: var(--gray-500); }
.summary-mini-item__delivery { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; color: var(--gray-500); }
.summary-mini-item__delivery svg { width: 13px; height: 13px; flex: none; }
.cart-row__variant svg { width: 14px; height: 14px; vertical-align: -2px; }

.confirm { text-align: center; padding: 64px 20px; max-width: 520px; margin: 0 auto; }
.confirm__check { width: 72px; height: 72px; border-radius: 50%; background: var(--ink); color: var(--btn-text, #fff); display: grid; place-items: center; margin: 0 auto 22px; }
.confirm__check svg, .confirm__check i { width: 32px; height: 32px; }
.confirm h1 { font-size: 26px; margin-bottom: 10px; }
.confirm p { color: var(--gray-500); margin-bottom: 6px; }
.confirm__order { display: inline-flex; gap: 11px; align-items: center; border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: 8px 18px; font-family: var(--font-head); font-weight: 700; margin: 18px 0 26px; }
.confirm__order-num { color: var(--ink); }
.confirm__order-total { color: var(--ink); padding-left: 11px; border-left: var(--bw) solid var(--line); }
.confirm__ship { color: var(--gray-500); font-size: 14px; margin: -18px 0 28px; }
.confirm__ship b { color: var(--ink); font-weight: 700; }
.confirm__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   ACCOUNT PAGE
   ========================================================================== */
.account-page { display: grid; grid-template-columns: 260px 1fr; gap: 28px; padding: 22px 0 56px; align-items: start; }
.account-side { border: var(--bw) solid var(--line); border-radius: var(--r-lg); background: var(--paper); padding: 10px; position: sticky; top: 96px; }
.account-side__user { display: flex; align-items: center; gap: 12px; padding: 12px 10px 16px; border-bottom: var(--bw) solid var(--line); margin-bottom: 8px; }
.account-side__avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--ink); color: var(--btn-text, #fff); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; }
.account-side__user b { display: block; font-family: var(--font-head); font-size: 14.5px; }
.account-side__user span { font-size: 12.5px; color: var(--gray-500); }
.account-nav { display: flex; flex-direction: column; gap: 2px; }
.account-nav a, .account-nav button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px;
  border-radius: var(--r-md); font-family: var(--font-head); font-weight: 600; font-size: 14px;
  color: var(--gray-700); background: none; border: none; text-align: left; cursor: pointer;
}
.account-nav a:hover, .account-nav button:hover { background: var(--gray-100); color: var(--ink); }
.account-nav a.is-active { background: var(--ink); color: var(--btn-text, #fff); }
.account-nav svg, .account-nav i { width: 18px; height: 18px; flex: none; }

.account-panel { display: none; }
.account-panel.is-active { display: block; }
.account-card { border: var(--bw) solid var(--line); border-radius: var(--r-lg); background: var(--paper); padding: 24px; margin-bottom: 20px; }
.account-card h2 { font-size: 20px; margin-bottom: 4px; }
.account-card > p.hint { color: var(--gray-500); margin-bottom: 20px; font-size: 14px; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; }
.stat-card { border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 18px; display: flex; align-items: center; gap: 14px; }
.stat-card__icon { width: 42px; height: 42px; flex: none; border-radius: var(--r-sm); background: var(--gray-100); display: grid; place-items: center; }
.stat-card__icon svg, .stat-card__icon i { width: 19px; height: 19px; }
.stat-card b { font-family: var(--font-head); font-size: 22px; display: block; }
.stat-card span { font-size: 12.5px; color: var(--gray-500); }

.order-row { display: flex; align-items: center; gap: 16px; padding: 16px; border: var(--bw) solid var(--line); border-radius: var(--r-md); margin-bottom: 12px; color: inherit; text-decoration: none; transition: border-color 0.15s; }
a.order-row:hover { border-color: var(--ink); }
.order-row:last-child { margin-bottom: 0; }
.account-pagination { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.account-empty { text-align: center; padding: 40px 20px; color: var(--gray-500); }
.account-empty svg, .account-empty i { width: 32px; height: 32px; margin-bottom: 12px; color: var(--gray-400, var(--gray-500)); }
.account-empty p { margin-bottom: 16px; }
.order-row__icon { width: 44px; height: 44px; flex: none; border-radius: var(--r-sm); background: var(--gray-100); display: grid; place-items: center; }
.order-row__icon svg, .order-row__icon i { width: 19px; height: 19px; }
.order-row__info { flex: 1; min-width: 0; }
.order-row__info b { font-family: var(--font-head); font-size: 14.5px; display: block; }
.order-row__info span { font-size: 12.5px; color: var(--gray-500); }
.order-row__status { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 6px 12px; border: var(--bw) solid var(--gray-300); border-radius: var(--r-pill); white-space: nowrap; }
.order-row__status svg, .order-row__status i { width: 13px; height: 13px; }
.order-row__status.is-done { background: var(--ink); color: var(--btn-text, #fff); border-color: var(--ink); }
.order-row__total { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; min-width: 76px; text-align: right; }

.address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.address-card { border: var(--bw-opt) solid var(--gray-300); border-radius: var(--r-md); padding: 16px; position: relative; }
.address-card.is-default { border-color: var(--ink); }
.address-card__badge { position: absolute; top: 14px; right: 14px; }
.address-card b { font-family: var(--font-head); font-size: 14.5px; display: block; margin-bottom: 6px; }
.address-card p { font-size: 13px; color: var(--gray-700); line-height: 1.5; }
.address-card__actions { display: flex; gap: 16px; margin-top: 14px; font-size: 12.5px; font-weight: 600; }
.address-card__actions button { background: none; border: none; color: var(--gray-700); padding: 0; }
.address-card__actions button:hover { color: var(--ink); text-decoration: underline; }
.address-card--add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-style: dashed; color: var(--gray-500); cursor: pointer; min-height: 138px; background: var(--gray-50);
}
.address-card--add:hover { border-color: var(--ink); color: var(--ink); }
.address-card--add svg, .address-card--add i { width: 22px; height: 22px; }

.account-gate { text-align: center; padding: 70px 20px; max-width: 420px; margin: 0 auto; }
.account-gate__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--gray-100); display: grid; place-items: center; margin: 0 auto 20px; }
.account-gate__icon svg, .account-gate__icon i { width: 28px; height: 28px; color: var(--gray-500); }
.account-gate h2 { font-size: 22px; margin-bottom: 8px; }
.account-gate p { color: var(--gray-500); margin-bottom: 24px; }

/* ---------- Lost / reset password (WooCommerce auth pages) ---------- */
.ow-auth-page { padding-bottom: 64px; }
.ow-auth-card {
	max-width: 440px; margin: 26px auto 0; text-align: center;
	background: var(--paper); border: var(--bw) solid var(--line);
	border-radius: var(--r-lg); padding: 40px 34px;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
}
.ow-auth-card__icon {
	width: 60px; height: 60px; border-radius: 50%; background: var(--gray-100);
	display: grid; place-items: center; margin: 0 auto 18px;
}
.ow-auth-card__icon svg, .ow-auth-card__icon i { width: 26px; height: 26px; color: var(--gray-500); }
.ow-auth-card h1 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.ow-auth-card > p { color: var(--gray-500); font-size: 14.5px; line-height: 1.5; margin-bottom: 26px; }
.ow-auth-form { text-align: left; }
.ow-auth-form .field { margin-bottom: 16px; }
.ow-auth-form .field label { font-size: 12.5px; font-weight: 700; color: var(--gray-700); }
/* Match the tall CTA button (.btn--lg, 50px) so the reset/lost-password inputs
   don't read as cramped. Scoped to the auth card so the cart coupon field
   (also .field--plain, paired with a shorter Apply button) is unaffected. */
.ow-auth-form .field--plain { padding: 15px 16px; }
.ow-auth-form .required { color: #c0392b; }
.ow-auth-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.ow-auth-card__foot { margin-top: 22px; font-size: 13.5px; }
.ow-auth-card__foot a { color: var(--gray-600, var(--gray-500)); text-decoration: underline; text-underline-offset: 2px; }
.ow-auth-card__foot a:hover { color: var(--ink); }
@media (max-width: 560px) {
	.ow-auth-card { padding: 32px 22px; margin-top: 18px; }
	.ow-auth-card h1 { font-size: 21px; }
}

/* ==========================================================================
   RESPONSIVE — new pages
   ========================================================================== */
@media (max-width: 1024px) {
  /* minmax(0,…) lets the single column shrink below its content's intrinsic
     width so wide children (tables, stat grids) can't force overflow. */
  .cart-page { grid-template-columns: minmax(0, 1fr); }
  .checkout-page { grid-template-columns: minmax(0, 1fr); }
  .account-page { grid-template-columns: minmax(0, 1fr); }
  .account-side, .woocommerce-MyAccount-content, .cart-page__main, .summary-card { min-width: 0; }
  .account-side { position: static; }
  .summary-card { position: static; }
}

@media (max-width: 720px) {
  .drawer { width: 100%; max-width: 100%; }
  .modal__box { padding: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  /* Keep long stat values (e.g. the account-type word) inside the card on
     narrow screens instead of pushing the grid off-screen. */
  .stat-card { min-width: 0; padding: 15px; gap: 12px; }
  .stat-card > span:last-child { min-width: 0; }
  .stat-card b { font-size: 18px; overflow-wrap: anywhere; }
  .stat-card__icon { width: 38px; height: 38px; }
  .address-grid { grid-template-columns: 1fr; }
  .cart-row { flex-wrap: wrap; }
  .cart-row__price { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; }
  .checkout-steps { overflow-x: auto; }
  .order-row { flex-wrap: wrap; }
  .order-row__info { flex-basis: calc(100% - 60px); }
  .order-row__status { margin-left: 60px; }
  .order-row__total { width: 100%; text-align: left; margin-top: 4px; }
  .added-ctas, .auth-social { grid-template-columns: 1fr; }
}

/* ==========================================================================
   WOOCOMMERCE — default notices / forms / star ratings
   (our templates render most markup ourselves, but WooCommerce core still
   prints these elements: validation notices, coupon errors, review stars)
   ========================================================================== */
/* Generic fallback for any un-restyled WooCommerce ".button" element
   (coupon apply, pagination, gateway "pay" links, etc.) */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
a.button, button.button, input.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 13.5px; line-height: 1;
  padding: 12px 20px; border-radius: var(--r-pill); border: var(--bw) solid var(--ink);
  background: var(--ink); color: var(--btn-text, #fff); cursor: pointer; text-decoration: none; transition: opacity 0.15s;
}
a.button:hover, button.button:hover, input.button:hover { opacity: 0.85; }
.button.loading { opacity: 0.6; pointer-events: none; }

.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-notice,
ul.woocommerce-error, ul.woocommerce-message, ul.woocommerce-info {
  list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: var(--bw) solid var(--line); border-radius: var(--r-md);
  background: var(--paper); padding: 14px 18px; margin: 0 0 20px; font-size: 14px; color: var(--ink);
}
.woocommerce-error, ul.woocommerce-error { border-color: var(--ink); background: var(--gray-50); }
.woocommerce-message a.button, .woocommerce-error a.button {
  margin-left: auto; display: inline-flex; align-items: center; font-family: var(--font-head);
  font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--btn-text, #fff);
}

.star-rating { color: var(--ink); font-size: 14px; letter-spacing: 2px; overflow: hidden; position: relative; height: 1.2em; line-height: 1.2em; width: 5.4em; }
.star-rating::before { content: "\2605\2605\2605\2605\2605"; color: var(--gray-300); float: left; top: 0; left: 0; position: absolute; }
.star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.4em; }
.star-rating span::before { content: "\2605\2605\2605\2605\2605"; top: 0; position: absolute; left: 0; color: var(--ink); }

.woocommerce-Price-amount { font-family: inherit; }
.buy__price ins, .pcard__price ins, .summary-mini-item ins, .fbt__item ins, .cart-row__price ins, .summary-row ins, .added-item ins, .xsell-card__info ins { text-decoration: none; }
.buy__price del, .pcard__price del, .summary-mini-item del, .fbt__item del, .cart-row__price del, .summary-row del, .added-item del, .xsell-card__info del { text-decoration: line-through; opacity: 0.7; }
.buy__price ins { font-family: var(--font-head); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; }
.buy__price del { font-size: 17px; color: var(--gray-500); font-weight: 400; margin-right: 4px; }
/* Products with no active sale render a bare .woocommerce-Price-amount
   (no <ins>/<del> wrapper) — give it the same bold headline treatment. */
.buy__price > span > .woocommerce-Price-amount, .buy__price > span > .amount { font-family: var(--font-head); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; }
.buy__price { flex-wrap: wrap; }
.buy__save { font-size: 12px; }
.pcard__price ins { font-family: var(--font-head); font-size: 16px; }
.pcard__price del { color: var(--gray-500); font-size: 13px; font-weight: 400; }
.buy__excerpt { color: var(--gray-700); font-size: 14.5px; margin: 4px 0 6px; }
.crumbs span { opacity: 0.5; }
.auth-form-msg { font-size: 12.5px; color: #b42318; margin: -8px 0 12px; min-height: 1em; }
.grid, ul.grid, ul.products { list-style: none; }
ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* The "Complete your setup" section already provides the .section + .wrap
   frame (heading, max-width, gutter). These nested WooCommerce blocks must NOT
   re-add their own padding / max-width / gutter, or the related grid ends up
   double-inset and pushed down vs the heading above it. Reset to a plain block;
   the small top margin just separates the cards from the heading. */
.related.products, .upsells.products { padding: 0; max-width: none; margin: 8px 0 0; padding-inline: 0; }
.related.products > h2, .upsells.products > h2 { font-size: clamp(23px, 3vw, 32px); font-weight: 800; margin-bottom: 26px; font-family: var(--font-head); }
@media (max-width: 1024px) { ul.products { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (max-width: 720px) { ul.products { grid-template-columns: repeat(2, 1fr); gap: 10px; } .related.products, .upsells.products { padding: 0; padding-inline: 0; } }
.woocommerce-ordering select { border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: 9px 16px; font-family: var(--font-body); font-size: 13.5px; background: var(--paper); }
.woocommerce-no-products-found { grid-column: 1 / -1; padding: 60px 20px; text-align: center; color: var(--gray-500); border: var(--bw) solid var(--line); border-radius: var(--r-lg); }
.pcard[disabled], .pcard .add_to_cart_button.loading { opacity: 0.6; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); word-wrap: normal !important; height: 1px; width: 1px; overflow: hidden; }

table.shop_table { width: 100%; border-collapse: collapse; }

.select2-container .select2-selection--single { height: 46px !important; border: var(--bw) solid var(--line) !important; border-radius: var(--r-md) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px !important; padding-left: 14px !important; padding-right: 52px !important; color: var(--ink); }

/* M&P city dropdown (Select2) — Openwood skin: matches .form-row inputs above,
   restyles the open panel, search box and option hover/selected states. */
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--gray-500); }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--form-focus) !important; box-shadow: 0 0 0 3px rgba(17,17,17,0.06); }

/* Dropdown chevron — swap Select2's default caret for an Openwood chevron,
   vertically centred in the 46px control. */
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 0 !important; right: 12px !important; height: 46px !important; width: 14px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none !important; }

/* Selected-value clear (×) — align it to the control and use Openwood colours. */
.select2-container--default .select2-selection--single .select2-selection__clear { position: absolute; right: 32px; top: 0; height: 46px; width: 22px; margin: 0; padding: 0; float: none; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--gray-500); font-size: 18px; line-height: 1; font-weight: 400; }
.select2-container--default .select2-selection--single .select2-selection__clear span { display: block; }
.select2-container--default .select2-selection--single .select2-selection__clear:hover { color: var(--ink); }
.select2-dropdown { border: var(--bw) solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-soft); overflow: hidden; background: var(--paper); }
.select2-dropdown--above { border-radius: var(--r-md); }
.select2-container--default .select2-search--dropdown { padding: 10px; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; font-family: var(--font-body); font-size: 13.5px; outline: none; color: var(--ink); }
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--form-focus); box-shadow: 0 0 0 3px rgba(17,17,17,0.06); }
/* Options list mirrors the OMS order-status dropdown (.ow-dd__menu / .ow-dd__opt):
   inset padding, rounded option pills, gray hover, ink for the selected value. */
.select2-container--default .select2-results > .select2-results__options { max-height: 280px; padding: 5px; }
.select2-container--default .select2-results__option { font-family: var(--font-body); font-size: 13.5px; padding: 9px 11px; color: var(--ink); border-radius: 8px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--gray-50) !important; color: var(--ink) !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--ink) !important; color: #fff !important; font-weight: 600; }
.select2-container--default .select2-results__message { color: var(--gray-500); font-family: var(--font-body); font-size: 13px; }

/* ==========================================================================
   PLUGIN OPTION WIDGET SKIN (Openwood Core) — same visual language as
   .size-opt / .finish-opt / .addon above, retargeted at the plugin's
   generic .ow-* class names so any option type looks native here.
   ========================================================================== */
.ow-options {
  margin: 22px 0; display: flex; flex-direction: column; gap: 0;
  border: var(--bw) solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); overflow: hidden; box-shadow: var(--shadow-soft);
}
.ow-group { padding: 20px; border-bottom: var(--bw) solid var(--line); }
.ow-group:last-child { border-bottom: none; }
.ow-group.is-hidden { display: none !important; }
.ow-group__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ow-group__head h3 { font-size: 15px; display: flex; align-items: center; gap: 12px; }
.ow-group__num { width: 26px; height: 26px; flex: none; display: grid; place-items: center; background: var(--ink); color: var(--btn-text, #fff); border-radius: 50%; font-family: var(--font-head); font-weight: 700; font-size: 13px; }
.ow-group__hint { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--gray-500); }

.ow-badge-popular {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--btn-text, #fff); font-family: var(--font-body);
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; vertical-align: middle;
}
/* Inside an add-on the badge sits in .ow-addon__info, whose `span` rule
   (below) would otherwise repaint the "Popular" text gray — keep it white. */
.ow-addon__info .ow-badge-popular { color: var(--btn-text, #fff); }

.ow-choices { display: flex; flex-wrap: wrap; gap: 12px; }
.ow-choices--buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.ow-choice {
  border: var(--bw-opt) solid var(--line); border-radius: var(--r-md);
  background: var(--gray-50); padding: 14px 12px; text-align: center; transition: 0.15s;
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.ow-choice:hover { border-color: var(--gray-500); }
.ow-choice.is-active { border-color: var(--ink); background: var(--paper); box-shadow: var(--shadow-soft); }
.ow-choice__label { font-family: var(--font-head); font-size: 15px; }
.ow-choice__sub { font-size: 12px; color: var(--gray-500); }
.ow-choice__price { display: block; margin-top: 4px; font-weight: 600; font-size: 13px; }

/* Out-of-stock option state (choices + add-ons). Marked live by
   ow-product-options.js as the customer changes related options. */
.ow-oos-badge { display: none; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-500); }
.ow-choice.is-oos, .ow-addon.is-oos { opacity: 0.55; cursor: not-allowed; }
.ow-choice.is-oos { background: var(--gray-100); border-color: var(--line) !important; box-shadow: none; }
.ow-choice.is-oos .ow-choice__label { text-decoration: line-through; text-decoration-color: var(--gray-300); }
.ow-choice.is-oos .ow-choice__price { display: none; }
.ow-choice.is-oos .ow-oos-badge { display: block; margin-top: 4px; }
.ow-choices--swatch .ow-choice.is-oos .ow-oos-badge { margin: 0 0 0 4px; }
.ow-addon .ow-oos-badge { position: absolute; top: 10px; right: 10px; }
.ow-addon.is-oos .ow-addon__check, .ow-addon.is-oos .ow-addon__qty { display: none; }
.ow-addon.is-oos .ow-oos-badge { display: block; }
.ow-buybar__oos { padding: 11px 20px; background: rgba(255, 90, 90, 0.14); color: var(--btn-text, #fff); font-size: 12.5px; font-weight: 600; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.buy__ctas .btn:disabled, #stickyAdd:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.ow-choices--swatch { justify-content: flex-start; }
.ow-choices--swatch .ow-choice { flex-direction: row; gap: 6px; border-radius: var(--r-pill); padding: 7px 15px 7px 7px; }
/* Colour labels: slightly smaller with a touch of breathing room after the swatch. */
.ow-choices--swatch .ow-choice__label { font-size: 13.5px; margin-left: 2px; }
.ow-choice__swatch { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(17,17,17,0.15); }
.ow-choice__swatch--color { display: block; }
.ow-choice__price del { font-size: 0.85em; color: var(--gray-500); font-weight: 400; margin-right: 4px; text-decoration: line-through; }
.ow-addon__info del { color: var(--gray-500); font-weight: 400; margin-right: 3px; text-decoration: line-through; }

.ow-nudge {
  display: none; align-items: center; gap: 10px; background: var(--gray-50);
  border: var(--bw) dashed var(--gray-300); border-radius: var(--r-md);
  padding: 12px 14px; margin-top: 14px; font-size: 13px; color: var(--gray-700);
}
.ow-nudge.is-visible { display: flex; }
.ow-nudge svg, .ow-nudge i { width: 18px; height: 18px; color: var(--ink); flex: none; }
.ow-nudge b { color: var(--ink); }
.ow-nudge button {
  margin-left: auto; flex: none; background: var(--ink); color: var(--btn-text, #fff); border: none;
  border-radius: var(--r-pill); padding: 8px 15px; font-weight: 700; font-size: 12.5px;
  white-space: nowrap; font-family: var(--font-head); cursor: pointer;
}
.ow-nudge button:hover { background: var(--gray-700); }

/* Add-on cards: compact two-per-row — thumbnail + title/price on top, a short
   description across the bottom, and Popular/Staff-pick pills in the corner. */
.ow-addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ow-addon {
  display: grid; position: relative;
  grid-template-columns: 76px 1fr;
  grid-template-areas: "media info";
  column-gap: 12px; align-items: center;
  border: var(--bw-opt) solid var(--line); border-radius: var(--r-md);
  background: var(--gray-50); padding: 10px; transition: 0.15s; cursor: pointer;
}
.ow-addon:hover { border-color: var(--gray-500); }
.ow-addon.is-active { border-color: var(--ink); background: var(--paper); box-shadow: var(--shadow-soft); }
.ow-addon__media { grid-area: media; width: 76px; aspect-ratio: 1 / 1; border-radius: var(--r-sm); background: var(--gray-100); overflow: hidden; }
.ow-addon__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ow-addon__media-ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--gray-300); }
.ow-addon__media-ph svg, .ow-addon__media-ph i { width: 26px; height: 26px; }
.ow-addon__info { grid-area: info; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 76px; padding-right: 30px; }
.ow-addon__info b { font-family: var(--font-head); font-size: 13.5px; line-height: 1.3; }
.ow-addon__info > span { font-size: 13px; font-weight: 700; color: var(--ink); }
.ow-addon__info > span del { color: var(--gray-500); font-weight: 400; margin-right: 4px; }
/* Short description spans the full card width at the bottom. */
.ow-addon__desc.ow-addon__desc { grid-area: desc; margin: 0; padding: 8px 30px 0 0; border-top: var(--bw) solid var(--line); font-size: 11.5px; font-weight: 400; line-height: 1.4; color: var(--gray-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ow-addon__check { position: absolute; top: 11px; right: 11px; z-index: 2; width: 22px; height: 22px; border: var(--bw-opt) solid var(--gray-300); border-radius: 6px; background: var(--paper); display: grid; place-items: center; color: transparent; transition: 0.15s; }
.ow-addon.is-active .ow-addon__check { background: var(--ink); border-color: var(--ink); color: var(--btn-text, #fff); }
.ow-addon__check svg, .ow-addon__check i { width: 12px; height: 12px; }
/* Chosen-options + quantity summary line under the add-on title, set by the
   quick-view popup on "Add to order". :not([hidden]) so the hidden attribute
   still hides it (an author `display` would otherwise beat [hidden]'s UA rule). */
.ow-addon__info > .ow-addon__config:not([hidden]) { display: block; font-size: 11.5px; font-weight: 400; color: var(--gray-600); line-height: 1.35; margin: 1px 0; }
.ow-addon__price { font-size: 13px; font-weight: 700; color: var(--ink); }
/* Popular + Staff-pick pills sit inline above the add-on title. */
.ow-addon__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 3px; }
.ow-addon__badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: var(--r-pill); font-family: var(--font-head); font-weight: 700; font-size: 9px; letter-spacing: 0.03em; line-height: 1.7; text-transform: uppercase; white-space: nowrap; }
.ow-addon__badge svg, .ow-addon__badge i { width: 10px; height: 10px; }
.ow-addon__badge--staff { background: var(--ink); color: var(--btn-text, #fff); }
.ow-addon__badge--pop { background: var(--paper); color: var(--ink); border: var(--bw) solid var(--ink); }

.ow-addon__expand {
  position: absolute; bottom: 8px; right: 8px; z-index: 3;
  width: 26px; height: 26px; flex: none; border: none; border-radius: 50%;
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-soft);
  display: grid; place-items: center; cursor: pointer; transition: 0.15s;
}
.ow-addon__expand:hover { background: var(--gray-100); }
.ow-addon__expand svg, .ow-addon__expand i { width: 13px; height: 13px; }

/* ---------- add-on detail popup (shares .modal / .modal__box) ---------- */
.modal__box--addon-detail { max-width: 460px; }
.addon-detail__media { border-radius: var(--r-md); overflow: hidden; background: var(--gray-100); margin-bottom: 16px; }
/* Show the add-on image at full size in a clean 1:1 frame (contain, so the
   whole product is visible rather than cropped). */
.addon-detail__media img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: contain; display: block; }
.addon-detail__title { font-size: 19px; margin-bottom: 6px; }
.addon-detail__price { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--gray-700); margin-bottom: 12px; }
/* Add-on description hidden on the storefront by request (kept in the DOM for
   admin/search use — the detail popup shows the image, name and price only). */
.addon-detail__description { display: none; font-size: 13.5px; line-height: 1.55; color: var(--gray-700); }

/* Buy bar — detached from the options card above (.ow-options): a small
   dark panel of its own holding the live "what you've configured" summary
   line and the running total, which then flows straight into the Buy Now /
   Add to Cart row below via the adjacent-sibling rule further down, so all
   three rows read as one seamless panel. */
.ow-buybar {
  margin: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden;
  background: var(--gray-900); color: var(--btn-text, #fff); box-shadow: var(--shadow-soft);
}
.ow-buybar__summary {
  padding: 14px 20px; font-size: 13.5px; color: var(--gray-300);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ow-buybar__total {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 20px; font-family: var(--font-head); font-weight: 700; font-size: 15px;
}
.ow-buybar__total-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Direct child only, so the running total stays large while the nested
   savings pill inside the label keeps its own small type. */
.ow-buybar__total > b { font-size: 22px; letter-spacing: -0.01em; }
.ow-buybar__save {
  order: 1; /* render the pill after the "Your Setup" label text */
  background: var(--btn-text, #fff); color: var(--ink); border-radius: var(--r-pill);
  padding: 2px 9px; font-size: 11px; font-weight: 700; line-height: 1.45;
  letter-spacing: 0.01em; white-space: nowrap;
}

/* The buy buttons (.buy__ctas, rendered right after .ow-buybar inside the
   same add-to-cart form) visually continue the dark panel into one
   seamless card, without needing to touch WooCommerce's form markup. */
.ow-buybar + .buy__ctas {
  background: var(--gray-900); margin-top: 0; padding: 0 20px 20px;
  border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: none;
}

/* Quantity sits beside Buy Now / Add to Cart instead of stacked above them. */
/* Row 1: quantity stepper + Add to Cart. Row 2: Buy Now, full width.
   The row is its own dark panel so simple products (no options → no .ow-buybar
   above it) still frame the white Add to Cart button on a background; when a
   buy bar IS present the higher-specificity rule above merges them into one
   seamless card. */
.buy__ctas {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-bottom: 22px;
  background: var(--gray-900); padding: 20px; border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.buy__ctas .btn { min-height: 50px; }
.buy__ctas .btn--ink { background: #fff; color: var(--ink); flex: 1 1 auto; }
.buy__ctas .btn--ink:hover { background: var(--gray-200); }
.buy__ctas .btn--paper { background: transparent; color: var(--btn-text, #fff); border-color: var(--gray-700); flex: 1 0 100%; }
.buy__ctas .btn--paper:hover { border-color: var(--btn-text, #fff); }
/* Stepper stretches to the full CTA-row height so it reads as a peer of the
   Buy Now / Add to Cart buttons rather than a smaller control beside them. */
.ow-qty-wrap { flex: none; display: flex; }
.ow-qty-stepper { display: inline-flex; align-self: stretch; align-items: center; gap: 2px; padding: 0 4px; border: var(--bw) solid var(--gray-300); border-radius: var(--r-pill); background: var(--paper); }
.ow-qty-stepper button { width: 34px; height: 34px; border: none; background: none; font-weight: 700; display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.ow-qty-stepper button:hover { background: var(--gray-100); }
.ow-qty-stepper button:disabled { opacity: 0.35; pointer-events: none; }
.ow-qty-stepper button svg, .ow-qty-stepper button i { width: 12px; height: 12px; }
.ow-qty-stepper output { font-family: var(--font-head); font-weight: 700; font-size: 13px; min-width: 16px; text-align: center; padding: 0 8px; }
.ow-qty-wrap .qty, .ow-qty-wrap input.ow-qty-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.ow-delivery-estimate { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--gray-700); margin: 14px 0; }
.ow-delivery-estimate i, .ow-delivery-estimate svg { width: 17px; height: 17px; color: var(--ink); }
.ow-delivery-estimate b { color: var(--ink); }

@media (max-width: 720px) {
  .ow-choices--buttons { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  /* Full-width add-on cards on mobile — the horizontal layout is too tight at
     two-per-row on a phone (title collides with the select box). */
  .ow-addons { grid-template-columns: 1fr; }
  .ow-group { padding: 16px 14px; }
  .ow-buybar__summary, .ow-buybar__total, .ow-buybar + .buy__ctas { padding-left: 14px; padding-right: 14px; }
}

/* On phones the qty stepper becomes a full-width row above the two CTAs,
   which then share the row below at a comfortable tap height. */
@media (max-width: 560px) {
  .buy__ctas .btn { min-height: 52px; font-size: 15px; white-space: nowrap; }
}

/* ==========================================================================
   WOOCOMMERCE — native product gallery (zoom/lightbox/slider JS preserved,
   only visual skin is remapped onto our design tokens)
   ========================================================================== */
.woocommerce-product-gallery { position: sticky; top: 96px; }

/* Loading skeleton: shimmer the gallery frame's own background while WooCommerce's
   flexslider builds and the main image loads, then the image paints over it. Pure
   CSS — no JS file, no network request, no image — so it adds essentially no page
   weight. product.js adds .ow-gallery-ready once the gallery is up (or on window
   load), which restores the normal background. */
/* The gallery is a GRID of images, so each image cell shimmers until its OWN
   image paints (product.js adds .is-loaded on load). The image starts transparent
   and fades in over the shimmer, so the gray shows even for images that report
   "complete" early, and every below-the-fold cell keeps its skeleton until it
   actually loads. Reuses the ow-skeleton-shimmer keyframes below. */
.woocommerce-product-gallery__image:not(.is-loaded) {
  background-color: var(--gray-200);
  background-image: linear-gradient( 100deg, transparent 20%, rgba(255,255,255,0.9) 50%, transparent 80% );
  background-repeat: no-repeat;
  background-size: 200% 100%;
  animation: ow-skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: inherit;
}
.woocommerce-product-gallery__image img { transition: opacity .3s ease; }
.woocommerce-product-gallery__image:not(.is-loaded) img { opacity: 0; }
@keyframes ow-skeleton-shimmer { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
/* Reduced-motion-safe fallback: a gentle opacity pulse (no sliding motion) so the
   skeleton still reads as "loading" for users who turn animations off — which is
   why a plain static gray box looked broken. */
@keyframes ow-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media ( prefers-reduced-motion: reduce ) {
  .woocommerce-product-gallery__image:not(.is-loaded) {
    background-image: none;
    animation: ow-skeleton-pulse 1.4s ease-in-out infinite;
  }
}

/* Product-card image skeleton — the grid thumbnails are lazy-loaded, so the
   square media box shimmers until each image actually paints (covers cards
   revealed on scroll and freshly appended by "Load more"). shop.js adds
   .is-loaded on the image's load event to stop it. Same shimmer as the gallery,
   so it reuses ow-skeleton-shimmer above. */
.pcard__media:not(.is-loaded) {
  /* A darker base than the box's own --gray-100 (#f2f2f2), so the white sweep
     actually reads — a 70%-white highlight over near-white was invisible. */
  background-color: var(--gray-200);
  background-image: linear-gradient( 100deg, transparent 20%, rgba(255,255,255,0.9) 50%, transparent 80% );
  background-repeat: no-repeat;
  background-size: 200% 100%;
  animation: ow-skeleton-shimmer 1.2s ease-in-out infinite;
}
@media ( prefers-reduced-motion: reduce ) {
  .pcard__media:not(.is-loaded) {
    background-image: none;
    animation: ow-skeleton-pulse 1.4s ease-in-out infinite;
  }
}

/* Fallback frame for the pre-flexslider state (or single-image products
   where WC skips the slider): the wrapper is the only box there. */
.woocommerce-product-gallery__wrapper {
  border: var(--bw) solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--gray-100); position: relative;
}
/* Once WC's gallery JS runs, it wraps the slides in .flex-viewport (the
   fixed clipping box) and the __wrapper becomes flexslider's SLIDING
   STRIP — all slides laid side by side, thousands of px wide, translated
   on each slide change. The frame must therefore live on .flex-viewport:
   on the strip, the rounded corners clipped every individual slide and
   let the neighboring slide show through at the corners. */
.woocommerce-product-gallery .flex-viewport {
  border: var(--bw) solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; position: relative;
  /* No background: a square image inside this rounded, overflow-hidden box
     would otherwise let the background colour show as a thin sliver in the
     rounded corners (the "gray around the corner" artifact). With the
     background transparent and the active slide's own corners rounded to
     match (below), the corners are clean. */
  background: transparent;
}
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper {
  border: none; border-radius: 0; background: transparent; overflow: visible;
}
/* WordPress prints fixed width/height attributes on the <img> itself,
   which otherwise stops it from filling a responsive container — it was
   rendering at its native pixel size (e.g. 600×600) inside a wider box,
   leaving a visible gray gap on the right where the wrapper's own
   background showed through. */
.woocommerce-product-gallery__image { display: block; width: 100%; height: 100%; }
.woocommerce-product-gallery__image, .woocommerce-product-gallery__image img { border-radius: var(--r-lg); }
/* Round the CURRENTLY VISIBLE slide (and its zoom overlay img) to match
   the frame so the corners are clean. Only the active slide is on screen,
   so rounding just it avoids the see-through notches that rounding every
   slide would create between them mid-transition. */
.woocommerce-product-gallery .flex-viewport .flex-active-slide,
.woocommerce-product-gallery .flex-viewport .flex-active-slide img { border-radius: var(--r-lg); }
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image:not(.flex-active-slide),
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image:not(.flex-active-slide) img { border-radius: 0; }
.woocommerce-product-gallery__image img {
  display: block; width: 100% !important; height: 100% !important; object-fit: cover;
}
.woocommerce-product-gallery .flex-control-thumbs { display: flex; gap: 10px; margin-top: 12px; list-style: none; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }
/* Thumbnails carry a transparent border by default (border-box keeps the
   layout stable) so they read as clean images, not framed tiles; the selected
   one gets a solid 1.5px dark-grey border. */
.woocommerce-product-gallery .flex-control-thumbs { gap: 12px; margin-top: 14px; }
.woocommerce-product-gallery .flex-control-thumbs li { flex: none; width: 116px; height: 116px; box-sizing: border-box; border-radius: var(--r-sm); overflow: hidden; border: 1.5px solid transparent; cursor: pointer; transition: border-color 0.15s; }
.woocommerce-product-gallery .flex-control-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.woocommerce-product-gallery .flex-control-thumbs li:hover { border-color: var(--gray-300); }
.woocommerce-product-gallery .flex-control-thumbs li:has(img.flex-active) {
  border-color: var(--gray-700); box-shadow: none;
}

/* Ultra-wide / big screens: the gallery column is very wide, so lay the product
   photos out as a 2-column grid instead of the single-image slider. We override
   flexslider's inline slide positioning with !important (CSS-important beats an
   element's non-important inline style), unstick the column, and hide the slider
   chrome (nav arrows/dots + thumb strip). Below this width the slider is untouched. */
/* 1800px so only genuinely wide desktop monitors get the 2-col grid — laptops
   (incl. 1440–1728px screens) keep the single-image slider. */
@media (min-width: 1800px) {
  .woocommerce-product-gallery { position: static; }
  .woocommerce-product-gallery .flex-viewport { height: auto !important; overflow: visible !important; border: none; border-radius: 0; }
  .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper {
    width: 100% !important; transform: none !important; transition: none !important;
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; height: auto !important;
  }
  .woocommerce-product-gallery .woocommerce-product-gallery__image {
    width: auto !important; height: auto !important; float: none !important; position: static !important;
    margin: 0 !important; border: var(--bw) solid var(--line); border-radius: var(--r-lg) !important; overflow: hidden;
  }
  .woocommerce-product-gallery .woocommerce-product-gallery__image img { border-radius: var(--r-lg) !important; aspect-ratio: 1; object-fit: cover; }
  /* flexslider may clone the first/last slide for looping — hide the duplicates in grid mode. */
  .woocommerce-product-gallery .flex-viewport .clone { display: none !important; }
  /* slider chrome is meaningless in a static grid. */
  .woocommerce-product-gallery .gallery-nav,
  .woocommerce-product-gallery .flex-control-thumbs { display: none !important; }
}

/* Picking an option that carries a gallery image flashes the matching grid
   cell (see switchGalleryToImage() in product.js). In slider mode the gallery
   simply jumps to that slide, but in the grid every image is already on
   screen, so the selection needs to point at one. Box-shadow only, so it is
   safe under reduced motion — the scroll itself is what we soften there. */
.woocommerce-product-gallery__image.is-optionmatch {
  animation: ow-gallery-match 1.6s ease-out 1;
}
@keyframes ow-gallery-match {
  0%   { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0.5); }
  20%  { box-shadow: 0 0 0 5px rgba(17, 17, 17, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); }
}

/* Sale badge overlaid on the gallery. WC core CSS is dequeued, so it ships
   unstyled (plain black text) — skin it as a compact dark pill matching the
   product-card badges (.pcard__badge). */
/* Product-page gallery badge stack: discount %, Trending, Staff pick / New all
   share ONE absolutely-positioned column at the top-left, so they can never
   overlap each other (the top-right corner belongs to the lightbox trigger).
   .pcard__off is absolute for the shop card, so reset it to static in here.
   See ow_single_product_badges() in inc/woocommerce.php. */
.gallery__badges {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.gallery__badges .pcard__off { position: static; top: auto; left: auto; }

.onsale {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--btn-text, #fff);
  font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(17,17,17,.14);
}

/* Zoom trigger — WC renders this as a bare, unstyled <a> (we intentionally
   dequeue WC's core CSS), which is why it used to show up as a stray icon
   above the gallery instead of sitting on the image. Reposition it as a
   small round button in the corner and swap its default icon for a Lucide
   one (see product.js) so it matches the rest of the icon set on the site. */
.woocommerce-product-gallery__trigger {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--paper); box-shadow: var(--shadow-soft);
  color: var(--ink); transition: 0.15s;
}
.woocommerce-product-gallery__trigger:hover { background: var(--gray-100); }
.woocommerce-product-gallery__trigger img { display: none; } /* WC's default sprite icon */
.woocommerce-product-gallery__trigger svg, .woocommerce-product-gallery__trigger i { width: 17px; height: 17px; display: block; }

/* Slide nav overlay (arrows + dots) — additive UI on top of WC's own
   flexslider gallery; see product.js for the wiring. Only injected when a
   product has more than one image. */
.gallery-nav {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
/* Arrows removed by request — navigation is via the dots (and swipe) only. */
.gallery-nav__arrow { display: none; }
.gallery-nav__arrow svg, .gallery-nav__arrow i { width: 16px; height: 16px; display: block; }
.gallery-nav__dots {
  display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.85); box-shadow: var(--shadow-soft);
}
.gallery-nav__dot {
  flex: none; width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
  background: var(--gray-300); cursor: pointer; transition: 0.15s;
}
.gallery-nav__dot:hover { background: var(--gray-500); }
.gallery-nav__dot.is-active { background: var(--ink); width: 9px; height: 9px; }
/* Only a sliding window of 5 dots is shown (see MAX_DOTS in product.js) so a
   25-image gallery can't overflow the pill; the rest stay in the DOM. */
.gallery-nav__dot.is-hidden { display: none; }

/* ---- Product gallery videos (YouTube) ----------------------------------
   A video is a real gallery slide (see inc/product-video.php); these rules
   layer our own play button, a corner "video" badge on the main stage, and
   the in-place (no-popup) player. Wiring lives in product.js. */
/* Give the video slide a definite square size (matching the product photos)
   instead of deriving height from the poster image — the poster loads late, so
   letting flexslider measure it collapses the stage to ~1px when you switch to
   the video. */
.woocommerce-product-gallery__image.ow-video-slide { height: auto !important; }
.ow-video-slide__link { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; cursor: pointer; }
.ow-video-slide.is-playing .ow-video-slide__link { background: #000; }
.ow-video-poster { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
.ow-video-slide.is-playing .ow-video-poster { visibility: hidden; }

/* Our own centred play button — the only affordance shown before playback. */
.ow-video-play {
  position: absolute; inset: 0; margin: auto; z-index: 3;
  width: 76px; height: 76px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(17,17,17,0.82); color: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,0.30); pointer-events: none;
  transition: transform .18s ease, background .18s ease;
}
.ow-video-play svg { width: 30px; height: 30px; margin-left: 4px; } /* nudge triangle to optical centre */
.ow-video-slide__link:hover .ow-video-play { transform: scale(1.07); background: var(--ink); }
.ow-video-slide.is-playing .ow-video-play { display: none; }

/* In-place player: a 1:1 square window filling the stage that clips its overflow
   (no lightbox, ever). */
.ow-video-clip {
  position: absolute; inset: 0; overflow: hidden; z-index: 4; background: #000;
  border-radius: var(--r-lg);
}
/* The 16:9 iframe COVERS the square — scaled by height so it fills top-to-bottom
   with the sides cropped, and overscanned vertically so YouTube's title (top)
   and watermark logo + "Watch on YouTube" link (bottom-right) fall outside the
   square and are clipped. The iframe keeps a 16:9 ratio (width = height·16/9) so
   YouTube fills it with no letterbox of its own. */
.ow-video-frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  height: 146%; width: 259.6%; border: 0;
  /* Override the theme's global media max-width:100%, which would otherwise cap
     the iframe at the square's width and break the cover scaling. */
  max-width: none !important; max-height: none !important;
}
/* Transparent guard over the iframe so the YouTube player never receives the
   pointer — none of its hover chrome (title, share, "Watch on YouTube", pause
   overlay) can appear. Clicking it stops playback. A subtle pause glyph fades
   in on hover so it's clear the surface is interactive. */
.ow-video-guard {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: block;
}
.ow-video-guard__btn {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(17,17,17,0.55); color: #fff; opacity: 0; transition: opacity .18s ease;
}
.ow-video-guard:hover .ow-video-guard__btn,
.ow-video-guard:focus-visible .ow-video-guard__btn { opacity: 1; }
.ow-video-guard__btn svg { width: 18px; height: 18px; display: block; }

/* Persistent corner "video available" badge on the main stage. Bottom-left
   keeps it clear of the sale badge (top-left), zoom trigger (top-right) and
   the dot nav (bottom-centre). */
.ow-video-corner {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px 7px 11px;
  border: none; border-radius: var(--r-pill); background: rgba(17,17,17,0.82); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 12px; cursor: pointer;
  box-shadow: var(--shadow-soft); transition: background .15s ease, opacity .2s ease, transform .2s ease;
}
.ow-video-corner:hover { background: var(--ink); transform: translateY(-1px); }
.ow-video-corner svg { width: 16px; height: 16px; }
.ow-video-corner.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* Zooming a video poster is meaningless — hide WC's magnifier on video slides. */
.woocommerce-product-gallery.ow-on-video .woocommerce-product-gallery__trigger { display: none; }

/* Mark a video's thumbnail in the rail with a small play glyph. */
.woocommerce-product-gallery .flex-control-thumbs li.ow-thumb-video { position: relative; }
.woocommerce-product-gallery .flex-control-thumbs li.ow-thumb-video::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(17,17,17,0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 11px 11px;
  pointer-events: none;
}

.quantity { display: inline-flex; }
.quantity .qty, input.ow-qty-input {
  width: 90px; padding: 12px 14px; border: var(--bw) solid var(--line); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 14.5px; background: var(--paper); color: var(--ink);
}
.stock { font-size: 13px; margin: 8px 0; color: var(--gray-500); }
.stock.out-of-stock { color: #b42318; font-weight: 600; }
.single_add_to_cart_button.is-loading, [data-buy-now].is-loading { opacity: 0.6; pointer-events: none; }

/* ── Inline button feedback: loading orbit → success check ─────────────────
   Used by Add to Cart, Buy Now and Place Order (JS swaps the button content
   to .ow-bspin then .ow-bcheck). Colours inherit from the button. */
   Overlaid as a centered ::after so the button's box/flow never changes — its
   original label stays in place (hidden), so the button can't resize, wrap or
   shift. --ow-fg (set in JS) carries the button's text colour to the mark. */
.ow-btn-busy, .ow-btn-done { position: relative; pointer-events: none; }
/* The label is wrapped in .ow-btn-hold and hidden — keeps the button's box so it
   never resizes/shifts; visibility can't be defeated by -webkit-text-fill-color. */
.ow-btn-busy .ow-btn-hold, .ow-btn-done .ow-btn-hold { visibility: hidden; }
.ow-btn-busy::after, .ow-btn-done::after { content: ""; position: absolute; top: 50%; left: 50%; box-sizing: border-box; }
.ow-btn-busy::after { width: 1.05em; height: 1.05em; margin: -0.525em 0 0 -0.525em; border: 2px solid var(--ow-fg, currentColor); border-right-color: transparent; border-radius: 50%; animation: ow-bspin 0.6s linear infinite; }
@keyframes ow-bspin { to { transform: rotate(360deg); } }
.ow-btn-done::after { width: 0.42em; height: 0.72em; margin: -0.46em 0 0 -0.2em; border: solid var(--ow-fg, currentColor); border-width: 0 0.16em 0.16em 0; transform: rotate(45deg); animation: ow-qa-pop 0.28s ease; }

/* Shop-loop quick-add "+" button — transient loading orbit then check flash
   (classes are added/removed by cart-drawer.js; WooCommerce also toggles its
   own .loading/.added which we leave alone). */
.ow-qa-loading, .ow-qa-done { position: relative; color: transparent !important; pointer-events: none; }
.ow-qa-loading > *, .ow-qa-done > * { visibility: hidden; }
.ow-qa-loading::after, .ow-qa-done::after { content: ""; position: absolute; top: 50%; left: 50%; box-sizing: border-box; }
.ow-qa-loading::after { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: var(--ink); animation: ow-bspin 0.6s linear infinite; }
.pcard .ow-qa-loading::after, .add_to_cart_button.ow-qa-loading::after { color: var(--btn-text, #fff); }
.ow-qa-done::after { width: 6px; height: 11px; margin: -7px 0 0 -3px; border: solid var(--btn-text, #fff); border-width: 0 2.5px 2.5px 0; border-radius: 1px; transform: rotate(45deg); animation: ow-qa-pop 0.28s ease; }
@keyframes ow-qa-pop { from { transform: rotate(45deg) scale(0.3); opacity: 0; } to { transform: rotate(45deg) scale(1); opacity: 1; } }

/* Order-summary skeleton while totals recalculate (payment / shipping change).
   The amount cells shimmer; WooCommerce's grey block overlay is suppressed. */
#order_review.ow-sum-busy .summary-row > span:last-child { color: transparent !important; border-radius: 6px; min-width: 58px; display: inline-block; background: linear-gradient( 90deg, var(--gray-100) 25%, var(--gray-200, #e6e6e6) 37%, var(--gray-100) 63% ); background-size: 400% 100%; animation: ow-skeleton 1.15s ease infinite; }
#order_review.ow-sum-busy .summary-row.total > span:last-child { min-width: 84px; height: 1.15em; }
#order_review.ow-sum-busy .blockUI.blockOverlay { opacity: 0 !important; }
@keyframes ow-skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ==========================================================================
   WOOCOMMERCE — checkout form rows, shipping list, payment methods
   ========================================================================== */
.woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce-additional-fields .form-row,
.woocommerce-address-fields__field-wrapper .form-row,
.woocommerce-EditAccountForm .form-row,
.account-card .form-row { margin-bottom: 0; }
.form-row label { display: block; font-size: 12.5px; font-weight: 700; color: var(--gray-700); margin-bottom: 6px; }
.form-row .required { color: var(--ink); text-decoration: none; }
.form-row input.input-text, .form-row select, .form-row textarea {
  width: 100%; border: var(--bw) solid var(--form-border); border-radius: var(--form-radius);
  padding: 12px 14px; font-family: var(--font-body); font-size: 14.5px; background: var(--form-bg); color: var(--ink);
}
.form-row input.input-text:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--form-focus); box-shadow: 0 0 0 3px rgba(17,17,17,0.06); }
.form-row.woocommerce-invalid input.input-text { border-color: #b42318; }
.form-row-first, .form-row-last { width: 100%; }
.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; }
.checkout-card .woocommerce-billing-fields > h3 { display: none; }
.woocommerce-shipping-fields > h3 { font-size: 13.5px; font-weight: 700; margin-bottom: 14px; }
.woocommerce-shipping-fields > h3 label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.woocommerce-shipping-fields > h3 input[type="checkbox"] { accent-color: var(--ink); width: 16px; height: 16px; }
.woocommerce-additional-fields { margin-top: 14px; }
.woocommerce-additional-fields > h3 { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.form-row-wide { grid-column: 1 / -1; }
.form-row .description { font-size: 11.5px; color: var(--gray-500); margin-top: 4px; }

#shipping_method { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
#shipping_method li {
  display: flex; align-items: center; gap: 10px; border: var(--bw-opt) solid var(--gray-300); border-radius: var(--r-md);
  padding: 12px 14px; font-size: 14px;
}
#shipping_method li:has(input:checked) { border-color: var(--ink); background: var(--gray-50); }
#shipping_method input[type="radio"] { accent-color: var(--ink); width: 18px; height: 18px; }

ul.wc_payment_methods { list-style: none; display: flex; flex-direction: column; gap: 10px; }
ul.wc_payment_methods > li.wc_payment_method {
  border: var(--bw-opt) solid var(--gray-300); border-radius: var(--r-md); padding: 14px 16px;
}
ul.wc_payment_methods > li.wc_payment_method:has(input:checked) { border-color: var(--ink); background: var(--gray-50); }
ul.wc_payment_methods input[type="radio"] { accent-color: var(--ink); width: 18px; height: 18px; margin-right: 10px; }
ul.wc_payment_methods label { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; cursor: pointer; }
ul.wc_payment_methods .payment_box { margin-top: 14px; padding-top: 14px; border-top: var(--bw) solid var(--line); font-size: 13.5px; color: var(--gray-700); }
ul.wc_payment_methods img { display: inline-block; height: 20px; vertical-align: middle; margin-left: 6px; }
.about_payment_methods { display: none; }

.place-order { margin-top: 16px; }
.woocommerce-terms-and-conditions-wrapper { margin: 14px 0; font-size: 13px; color: var(--gray-700); }
#place_order svg, #place_order i { width: 15px; height: 15px; }
.woocommerce-checkout #payment { background: transparent; }
.checkout_coupon.woocommerce-form-coupon {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border: var(--bw) solid var(--line);
  border-radius: var(--r-lg); padding: 16px; margin: 20px 0; background: var(--gray-50);
}
.checkout_coupon.woocommerce-form-coupon p { margin: 0; flex: 1 1 auto; display: flex; gap: 10px; }
.checkout_coupon.woocommerce-form-coupon input[type="text"] {
  flex: 1; min-width: 160px; border: var(--bw) solid var(--form-border); border-radius: var(--form-radius); padding: 10px 14px; font-family: var(--font-body); background: var(--form-bg);
}
.checkout_coupon.woocommerce-form-coupon .button { flex: none; }

/* ==========================================================================
   WOOCOMMERCE — order details table (My Account > view order, thank-you)
   ========================================================================== */
.order-details-table table.shop_table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13.5px; }
.order-details-table table.shop_table th, .order-details-table table.shop_table td { padding: 12px 10px; border-bottom: var(--bw) solid var(--line); text-align: left; }
.order-details-table table.shop_table tfoot th { font-weight: 600; }
.order-details-table table.shop_table tfoot tr:last-child th, .order-details-table table.shop_table tfoot tr:last-child td { font-family: var(--font-head); font-weight: 800; font-size: 15px; border-bottom: none; }
.order-details-table .product-quantity { color: var(--gray-500); }

/* ==========================================================================
   MY ACCOUNT — order details (header + status pill, progress timeline,
   combined address), all monochrome / on the Openwood design language.
   ========================================================================== */
.ow-order__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 2px; }
.ow-order__headmain h2 { margin-bottom: 2px; }
.ow-order__status {
  display: inline-flex; align-items: center; gap: 6px; flex: none; margin-top: 4px;
  font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.02em;
  padding: 6px 14px; border-radius: var(--r-pill);
  border: var(--bw) solid var(--gray-300); color: var(--gray-700); background: var(--paper); text-transform: capitalize;
}
.ow-order__status--processing, .ow-order__status--completed, .ow-order__status--delivered,
.ow-order__status--shipped, .ow-order__status--booked, .ow-order__status--packed {
  background: var(--ink); color: var(--btn-text, #fff); border-color: var(--ink);
}
.ow-order__status--cancelled, .ow-order__status--failed, .ow-order__status--refunded {
  color: #b3261e; border-color: #f1c9c6; background: #fdeceb;
}

/* Progress timeline */
.ow-otl { border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 18px 20px; margin: 18px 0 22px; }
.ow-otl__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.ow-otl__title { font-family: var(--font-head); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); }
.ow-otl__current { font-family: var(--font-head); font-weight: 700; font-size: 12.5px; background: var(--gray-100); color: var(--ink); padding: 5px 12px; border-radius: var(--r-pill); }
.ow-otl__track { position: relative; }
.ow-otl__bar { position: absolute; left: 16.66%; right: 16.66%; top: 17px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.ow-otl__fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--ink); border-radius: 2px; transition: width 0.5s ease; max-width: 100%; }
.ow-otl__steps { position: relative; display: flex; justify-content: space-between; }
.ow-otl__step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.ow-otl__dot { width: 36px; height: 36px; border-radius: 50%; background: var(--paper); border: 2px solid var(--gray-300); display: grid; place-items: center; color: var(--gray-500); position: relative; z-index: 1; transition: 0.2s; }
.ow-otl__dot svg, .ow-otl__dot i { width: 16px; height: 16px; }
.ow-otl__label { font-family: var(--font-head); font-weight: 600; font-size: 12.5px; color: var(--gray-500); margin-top: 8px; }
.ow-otl__days { font-size: 11px; color: var(--gray-500); opacity: 0.8; margin-top: 1px; }
.ow-otl__step.is-active .ow-otl__dot { border-color: var(--ink); background: var(--ink); color: var(--btn-text, #fff); box-shadow: 0 0 0 4px var(--gray-100); }
.ow-otl__step.is-active .ow-otl__label { color: var(--ink); }
.ow-otl__step.is-done .ow-otl__dot { border-color: var(--ink); background: var(--ink); color: var(--btn-text, #fff); }
.ow-otl__step.is-done .ow-otl__label { color: var(--ink); }
.ow-otl__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 13px; border-top: var(--bw) solid var(--line); font-size: 12.5px; color: var(--gray-700); }
.ow-otl__foot em { color: var(--gray-500); font-style: normal; font-weight: 500; margin-right: 4px; }
.ow-otl--term { opacity: 0.9; }
.ow-otl--term .ow-otl__fill { background: var(--gray-300); }

/* Combined shipping + billing (Delivery & contact) */
.ow-order-addr { margin-top: 22px; padding-top: 20px; border-top: var(--bw) solid var(--line); }
.ow-order-addr__title { font-family: var(--font-head); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); margin: 0 0 14px; }
.ow-order-addr__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ow-order-addr__label { display: block; font-family: var(--font-head); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); margin-bottom: 7px; }
.ow-order-addr__label--sub { margin-top: 14px; }
.ow-order-addr address { font-style: normal; font-size: 14px; line-height: 1.65; color: var(--ink); }
.ow-order-addr__phone { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--gray-700); font-size: 13.5px; }
.ow-order-addr__phone svg, .ow-order-addr__phone i { width: 14px; height: 14px; }
.ow-order-addr__contact { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.ow-order-addr__contact span { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); min-width: 0; }
.ow-order-addr__contact a { color: inherit; text-decoration: none; word-break: break-word; }
.ow-order-addr__contact a:hover { text-decoration: underline; }
.ow-order-addr__contact svg, .ow-order-addr__contact i { width: 15px; height: 15px; flex: none; color: var(--gray-500); }
.ow-order-addr__note { margin-top: 18px; }
.ow-order-addr__note p { font-size: 14px; color: var(--gray-700); line-height: 1.6; margin: 6px 0 0; }

/* Tidy the WC order-details table + its section headings to match. */
.order-details-table .woocommerce-order-details__title,
.order-details-table .woocommerce-customer-details h2 { font-family: var(--font-head); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); margin: 4px 0 6px; }
.order-details-table table.shop_table td.product-name a { color: var(--ink); font-weight: 600; }
.order-details-table table.shop_table .wc-item-meta { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--gray-500); }
.order-details-table table.shop_table .wc-item-meta li { margin: 0; }
.order-details-table table.shop_table .wc-item-meta p { margin: 0; }

@media (max-width: 560px) {
  .ow-order-addr__grid { grid-template-columns: 1fr; gap: 16px; }
  .ow-otl { padding: 16px 14px; }
  .ow-otl__label { font-size: 11.5px; }
  .ow-otl__days { font-size: 10px; }
  .ow-otl__dot { width: 32px; height: 32px; }
  .ow-otl__bar { top: 15px; }
}
.woocommerce-customer-details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.woocommerce-customer-details address { border: var(--bw-opt) solid var(--gray-300); border-radius: var(--r-md); padding: 16px; font-style: normal; font-size: 13.5px; line-height: 1.6; }
.woocommerce-customer-details h2 { font-size: 14px; margin-bottom: 10px; }
.woocommerce-OrderUpdates { list-style: none; margin: 0 0 16px; padding: 0; }
.woocommerce-OrderUpdate { border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 8px; font-size: 13px; }
.woocommerce-OrderUpdate-meta { color: var(--gray-500); font-size: 11.5px; margin-bottom: 4px; }
@media (max-width: 720px) { .woocommerce-customer-details { grid-template-columns: 1fr; } }

/* Baseline styling for any native WooCommerce account tabs we don't fully
   restyle (payment methods, downloads) so they still fit the design. */
.woocommerce-MyAccount-content > table.shop_table,
.woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods {
  width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 16px;
  border: var(--bw) solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.woocommerce-MyAccount-content table.shop_table th, .woocommerce-MyAccount-content table.shop_table td { padding: 14px 16px; border-bottom: var(--bw) solid var(--line); text-align: left; }
.woocommerce-MyAccount-content table.shop_table tr:last-child td { border-bottom: none; }
.woocommerce-MyAccount-content mark.default { background: var(--ink); color: var(--btn-text, #fff); font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); }
.woocommerce-Message, .woocommerce-notices-wrapper .woocommerce-message { margin-bottom: 16px; }

@media (max-width: 1024px) {
  /* Drop the sticky behaviour on tablet/mobile but keep a positioning context
     (relative, not static) so the absolutely-positioned zoom trigger stays
     pinned to the gallery corner instead of escaping to the viewport. */
  .woocommerce-product-gallery { position: relative; top: auto; }
}

/* ---- "As Seen on Instagram" video slider (product page + shortcode) ----
   A horizontal scroll-snap carousel: five reels per row on desktop, one per row
   on mobile. Each card is a lazy-loaded, chrome-less Instagram /embed/ iframe
   (see assets/js/instagram.js) rendered at Instagram's 326px base width and
   CSS-scaled to the column. */
/* Google reviews summary bar ([ow_google_bar]) — the pill that sits above the
   Google reviews widget. Rating + count are editable in Openwood Settings. */
.ow-gbar {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	background: var(--gray-50); border-radius: var(--r-md); padding: 15px 22px; margin: 0 0 22px;
}
.ow-gbar__main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ow-gbar__logo { font-family: "Product Sans", var(--font-head), Arial, sans-serif; font-weight: 700; font-size: 23px; letter-spacing: -0.5px; }
.ow-gbar__label { font-weight: 700; font-size: 16px; color: var(--ink); }
.ow-gbar__score { font-weight: 800; font-size: 16px; color: var(--ink); }
.ow-gbar__sep { color: var(--gray-300); font-weight: 400; }
.ow-gbar__count { font-weight: 700; font-size: 16px; color: var(--ink); }
.ow-gbar__stars { position: relative; display: inline-block; font-size: 19px; line-height: 1; white-space: nowrap; font-family: Arial, sans-serif; }
.ow-gbar__stars::before { content: "★★★★★"; color: #dadce0; letter-spacing: 2px; }
.ow-gbar__stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; }
.ow-gbar__stars-fill::before { content: "★★★★★"; color: #fbbc05; letter-spacing: 2px; }
/* The gold overlay must match the gray base size exactly — otherwise leaked
   font-size rules (e.g. .buy__meta span{font-size:13px}) shrink the fill stars
   and they drift out of alignment with the base stars. */
.ow-gbar__stars .ow-gbar__stars-fill { font-size: inherit; line-height: inherit; }
.ow-gbar__btn {
	flex: none; border: var(--bw) solid var(--line); border-radius: var(--r-sm);
	padding: 10px 20px; font-family: var(--font-head); font-weight: 700; font-size: 14px;
	color: var(--ink); background: var(--paper); transition: 0.15s; text-decoration: none;
}
.ow-gbar__btn:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
@media (max-width: 560px) {
	.ow-gbar { padding: 14px 16px; gap: 12px; }
	.ow-gbar__main { gap: 8px 10px; }
	/* Logo takes the full first line; "Excellent · ★ · 4.7 | N reviews" wraps onto the next. */
	.ow-gbar__logo { flex-basis: 100%; }
	.ow-gbar__btn { width: 100%; text-align: center; }
}

/* Presented as a rounded, inset "card" (matching the theme's rounded surfaces)
   with a soft colour-wash backdrop and a faded colour dot texture — the warmer
   Instagram feel, but sitting on the theme's rounded-corner language rather than
   a sharp full-bleed band. All pure CSS, no image assets. */
.ow-influencers { background: transparent; border-top: 0; }
/* On the product page every section sits inside <main class="site-main wrap">,
   yet the section templates add their OWN inner `.wrap` — that doubled the
   horizontal padding (24+24=48px on desktop), so the reviews/Instagram/trending/
   related/recent blocks were more inset left-and-right than the product + Google
   bar above them. Zero the redundant inner-wrap padding so all sections share the
   single site-main gutter and line up. */
.pdp-page .wrap .wrap { padding-inline: 0; }
.ow-influencers .ow-ig-slider {
	position: relative;
	overflow: hidden;
	padding: 34px 26px;
	border-radius: var(--r-lg);
	border: var(--bw) solid var(--line);
	background:
		radial-gradient(72% 60% at 6% -8%, rgba(214, 41, 118, 0.15), transparent 55%),
		radial-gradient(66% 66% at 103% 112%, rgba(252, 176, 69, 0.20), transparent 55%),
		radial-gradient(52% 56% at 82% -10%, rgba(131, 58, 180, 0.14), transparent 52%),
		linear-gradient(180deg, #fbf8fb 0%, var(--paper) 60%);
}
/* Faded, coloured dot texture, masked so it eases in from the top. */
.ow-influencers .ow-ig-slider::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(150, 47, 191, 0.20) 1.1px, transparent 1.7px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(120% 95% at 50% 0%, #000 0%, transparent 68%);
	mask-image: radial-gradient(120% 95% at 50% 0%, #000 0%, transparent 68%);
}
/* Keep the heading + reels above the decorative dot layer. */
.ow-influencers .section__head,
.ow-influencers .ow-ig-track { position: relative; z-index: 1; }
@media (max-width: 560px) {
	.ow-influencers .ow-ig-slider { padding: 22px 16px; border-radius: var(--r-md); }
}

/* ===================================================================
   Shop / category page-title section (.ow-shophero)
   Two looks: solid + dotted shades (default) or an ultrawide bg image.
=================================================================== */
.ow-shophero { margin: 32px 0 26px; }
.ow-shophero__inner {
	position: relative; overflow: hidden;
	border-radius: var(--r-lg);
	border: var(--bw) solid var(--line);
	padding: 40px 34px;
}
.ow-shophero__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.02em; line-height: 1.04; margin: 0; }
.ow-shophero__count { color: var(--gray-500); font-weight: 600; font-size: 14px; margin: 9px 0 0; }
.ow-shophero__text { color: var(--gray-500); font-size: 15px; line-height: 1.5; margin: 10px 0 0; max-width: 62ch; }

/* Dotted-shades: soft MONOCHROME ink blooms over paper + a masked dot grid (like the IG panel). */
.ow-shophero--dotted .ow-shophero__inner {
	background:
		radial-gradient(70% 60% at 3% -16%, rgba(17, 17, 17, 0.05), transparent 55%),
		radial-gradient(64% 64% at 104% 120%, rgba(17, 17, 17, 0.045), transparent 55%),
		linear-gradient(180deg, var(--gray-100) 0%, var(--paper) 60%);
}
.ow-shophero--dotted .ow-shophero__inner::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image: radial-gradient(rgba(17, 17, 17, 0.09) 1.1px, transparent 1.7px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(120% 95% at 50% 0%, #000 0%, transparent 70%);
	mask-image: radial-gradient(120% 95% at 50% 0%, #000 0%, transparent 70%);
}
.ow-shophero--dotted .ow-shophero__title,
.ow-shophero--dotted .ow-shophero__count,
.ow-shophero--dotted .ow-shophero__text,
.ow-shophero--dotted .ow-explore { position: relative; z-index: 1; }

/* Background-image mode: ultrawide image + dark overlay, white text. */
.ow-shophero--image .ow-shophero__inner {
	border-color: transparent; color: var(--paper);
	background-image: linear-gradient(rgba(12, 12, 12, 0.52), rgba(12, 12, 12, 0.52)), var(--ow-shophero-img);
	background-size: cover; background-position: center; background-repeat: no-repeat;
	padding: 62px 40px;
}
.ow-shophero--image .ow-shophero__title { color: #fff; }
.ow-shophero--image .ow-shophero__count,
.ow-shophero--image .ow-shophero__text { color: rgba(255, 255, 255, 0.82); }

/* Full-bleed (ultrawide) — edge-to-edge; relies on html,body { overflow-x: clip }. */
.ow-shophero--bleed .ow-shophero__inner {
	border-radius: 0; border-left: 0; border-right: 0;
	width: 100vw; margin-inline: calc(50% - 50vw);
	padding-inline: clamp(24px, 4vw, 80px);
}

/* Explore-more categories row */
.ow-explore { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin-top: 20px; }
.ow-explore__label { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--gray-500); }
.ow-shophero--image .ow-explore__label { color: rgba(255, 255, 255, 0.75); }
.ow-explore__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ow-explore__chip {
	font-family: var(--font-head); font-weight: 600; font-size: 13px;
	padding: 7px 14px; border-radius: var(--r-pill);
	border: var(--bw) solid var(--line); background: var(--paper); color: var(--gray-700);
	transition: 0.15s;
}
.ow-explore__chip:hover { background: var(--ink); border-color: var(--ink); color: var(--btn-text, #fff); }
.ow-shophero--image .ow-explore__chip { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.30); color: #fff; }
.ow-shophero--image .ow-explore__chip:hover { background: #fff; border-color: #fff; color: var(--ink); }

@media (max-width: 700px) {
	.ow-shophero { margin: 22px 0 18px; }
	.ow-shophero__inner { padding: 26px 20px; }
	.ow-shophero--image .ow-shophero__inner { padding: 40px 22px; }
	/* Keep the explore-more row compact on mobile: show only the first 4 pills. */
	.ow-explore__chips .ow-explore__chip:nth-child(n+5) { display: none; }
}
/* Pager dots under the reels — shown on mobile (one reel per row) only. */
.ow-ig-dots { display: none; justify-content: center; gap: 6px; margin-top: 16px; position: relative; z-index: 1; }
.ow-ig-dot {
	width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
	background: var(--gray-300); transition: background 0.15s ease, width 0.15s ease;
}
.ow-ig-dot.is-active { background: var(--ink); width: 18px; border-radius: 3px; }
@media (max-width: 560px) { .ow-ig-dots { display: flex; } }
.ow-ig-slider { position: relative; }
.ow-ig-slider .section__head { margin-bottom: 22px; }
.ow-ig-nav { display: inline-flex; gap: 8px; flex: none; }
.ow-ig-nav button {
	width: 40px; height: 40px; border-radius: 50%; border: var(--bw) solid var(--line);
	background: var(--paper); color: var(--ink); display: grid; place-items: center;
	cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.ow-ig-nav button:hover { border-color: var(--ink); }
.ow-ig-nav svg { width: 18px; height: 18px; }

.ow-ig-track {
	display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
}
.ow-ig-track::-webkit-scrollbar { display: none; }

/* Five per row (four 16px gaps), snapping to card starts. */
.ow-ig-card {
	flex: 0 0 calc((100% - 4 * 16px) / 5); scroll-snap-align: start;
	display: block; text-decoration: none; color: inherit;
}
.ow-ig-card__frame {
	position: relative; display: block; aspect-ratio: 9 / 16; border-radius: var(--r-md);
	overflow: hidden; background: var(--gray-100); border: var(--bw) solid var(--line);
}
.ow-ig-card__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Base 326×800 (IG's min embed width) — the transform in instagram.js scales it
   to the column. The theme's global `iframe{max-width:100%}` would otherwise cap
   it to the ~224px card and the video would render tiny, so override the cap. */
.ow-ig-card__iframe {
	position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #000;
	width: 326px !important; height: 800px !important; max-width: none !important; max-height: none !important;
}
.ow-ig-card.is-loaded .ow-ig-card__poster,
.ow-ig-card.is-loaded .ow-ig-card__play { display: none; }
.ow-ig-card__play {
	position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border: none;
	border-radius: 50%; background: rgba(17,17,17,.55); color: #fff; display: grid;
	place-items: center; cursor: pointer; backdrop-filter: blur(4px);
	transition: background .15s ease, transform .15s ease;
}
.ow-ig-card__play:hover { background: rgba(17,17,17,.78); transform: scale(1.06); }
.ow-ig-card__play svg { width: 22px; height: 22px; margin-left: 2px; }
.ow-ig-card__frame .ow-influencer__badge {
	position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
	background: rgba(17,17,17,.72); color: #fff; backdrop-filter: blur(4px); z-index: 2;
}
.ow-ig-card__frame .ow-influencer__badge svg { width: 16px; height: 16px; }
.ow-ig-card.is-loaded .ow-influencer__badge { display: none; }
.ow-influencer__name {
	display: block; margin-top: 10px; font-family: var(--font-head);
	font-weight: 600; font-size: 14px; text-align: center;
}
a.ow-ig-card:hover .ow-influencer__name { text-decoration: underline; }
a.ow-ig-card--image:hover .ow-ig-card__poster { transform: scale(1.05); transition: transform .4s ease; }

@media (max-width: 1024px) { .ow-ig-card { flex-basis: calc((100% - 3 * 16px) / 4); } }
@media (max-width: 820px)  { .ow-ig-card { flex-basis: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 560px) {
	.ow-ig-card { flex-basis: 100%; }
	.ow-ig-nav { display: none; }
}

/* ---- Mobile: the reels wrap into a full 2-column grid showing ALL videos —
   no horizontal slider; the page just scrolls down through the rows. Each tile
   lazy-loads the real Instagram embed, so it shows the reel's thumbnail and a
   tap plays it inline via Instagram's own player. ---- */
@media (max-width: 640px) {
	.ow-ig-track {
		display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
		overflow: visible;
	}
	.ow-ig-track .ow-ig-card { flex: none; width: auto; }
	.ow-ig-nav, .ow-ig-dots { display: none !important; }
	.ow-influencer__name { margin-top: 7px; font-size: 12.5px; }
}

/* ---- Cart page: two-column (items left, sticky summary right) ----- */
.cart-page__main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cart-page > .cart-empty { grid-column: 1 / -1; }
/* Delivery estimate line on cart rows: keep the truck icon inline with text */
.cart-row__delivery { display: inline-flex; align-items: center; gap: 6px; }
.cart-row__delivery svg, .cart-row__delivery i { width: 14px; height: 14px; flex: none; }
/* Cart drawer: quantity stepper stays a compact pill on the left of the item's
   bottom row (trash bin sits on the right). */
.drawer-item__foot .qty-stepper { flex: none; }

/* ---- Checkout redesign: card sections + choice cards -------------- */
.checkout-card > .form-row,
.checkout-card > .ow-co-grid2,
.checkout-card > .ow-picks,
.checkout-card > .ow-payment { margin-bottom: 16px; }
.checkout-card > .form-row:last-child,
.checkout-card > .ow-co-grid2:last-child,
.checkout-card > .ow-payment:last-child { margin-bottom: 0; }
.ow-co-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ow-co-grid2 > .form-row { margin-bottom: 0; }
@media (max-width: 560px) { .ow-co-grid2 { grid-template-columns: 1fr; gap: 16px; } }

/* Icon inside checkout inputs (background-image rules appended below) */
#billing_email, #billing_first_name, #billing_phone,
#billing_address_1, #billing_city, #billing_postcode, #order_comments {
	padding-left: 44px;
	background-repeat: no-repeat;
	background-position: 15px center;
	background-size: 18px 18px;
}
#order_comments { background-position: 15px 15px; }

/* Selectable shipping / payment cards */
.ow-picks { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.ow-picks li { margin: 0; list-style: none; }
.ow-pick {
	display: flex; align-items: center; gap: 14px;
	padding: 15px 18px; margin: 0;
	border: var(--bw-opt) solid var(--line); border-radius: var(--r-md);
	background: var(--paper); cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ow-pick:hover { border-color: var(--gray-300); }
.ow-pick.is-selected { border-color: var(--ink); }
.ow-pick input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.ow-pick__radio { width: 20px; height: 20px; flex: none; border-radius: 50%; border: var(--bw-opt) solid var(--gray-300); position: relative; }
.ow-pick.is-selected .ow-pick__radio { border-color: var(--ink); }
.ow-pick.is-selected .ow-pick__radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink); }
.ow-pick__icon { width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); background: var(--gray-100); display: grid; place-items: center; color: var(--ink); }
.ow-pick__icon svg, .ow-pick__icon i { width: 18px; height: 18px; }
.ow-pick__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ow-pick__body b { font-family: var(--font-head); font-size: 14.5px; line-height: 1.25; }
.ow-pick__body span { font-size: 12.5px; color: var(--gray-500); }
.ow-pick__price { font-family: var(--font-head); font-weight: 700; font-size: 14px; white-space: nowrap; }
.ow-pick-empty { font-size: 13px; color: var(--gray-500); margin: 0; }
.ow-payment { margin: 0; }
.ow-payment .payment_box { font-size: 12.5px; color: var(--gray-700); line-height: 1.5; padding: 6px 4px 2px 54px; }
.ow-payment .payment_box p { margin: 0 0 6px; }
.ow-payment .payment_box p:last-child { margin-bottom: 0; }
.checkout-card .place-order, .place-order { margin: 0; }

/* Checkout input icons (generated) */
#billing_email { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23767676%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22%2F%3E%3C%2Fsvg%3E"); }
#billing_first_name { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23767676%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"); }
#billing_phone { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23767676%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E"); }
#billing_address_1 { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23767676%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%209%209-7%209%207v11a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3Cpolyline%20points%3D%229%2022%209%2012%2015%2012%2015%2022%22%2F%3E%3C%2Fsvg%3E"); }
#billing_city { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23767676%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%2216%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2022v-4h6v4%22%2F%3E%3Cpath%20d%3D%22M8%206h.01M12%206h.01M16%206h.01M8%2010h.01M12%2010h.01M16%2010h.01M8%2014h.01M12%2014h.01M16%2014h.01%22%2F%3E%3C%2Fsvg%3E"); }
#billing_postcode { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23767676%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%224%22%20y1%3D%229%22%20x2%3D%2220%22%20y2%3D%229%22%2F%3E%3Cline%20x1%3D%224%22%20y1%3D%2215%22%20x2%3D%2220%22%20y2%3D%2215%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%223%22%20x2%3D%228%22%20y2%3D%2221%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%223%22%20x2%3D%2214%22%20y2%3D%2221%22%2F%3E%3C%2Fsvg%3E"); }
#order_comments { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23767676%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22%2F%3E%3C%2Fsvg%3E"); }

/* Neutralize legacy WC payment-list borders inside the new Payment Method card
   (the .ow-pick label already provides the card styling). */
.ow-payment ul.wc_payment_methods { margin: 0; padding: 0; }
.ow-payment ul.wc_payment_methods > li.wc_payment_method { border: none; padding: 0; background: none; border-radius: 0; }
.ow-payment ul.wc_payment_methods > li.wc_payment_method:has(input:checked) { background: none; }
.ow-payment ul.wc_payment_methods label { font-weight: 400; font-family: var(--font-body); cursor: pointer; }

/* Cart drawer: pin the subtotal + CTA footer to the bottom of the drawer.
   #cartDrawerFootWrap holds [ship progress | scrollable body | foot]; making
   it a flex column with the body growing keeps the foot at the bottom even
   when the cart has only a couple of items. */
#cartDrawerFootWrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#cartDrawerFootWrap .drawer__body { flex: 1 1 auto; }
#cartDrawerFootWrap .drawer__ship, #cartDrawerFootWrap .drawer__foot, #cartDrawerFootWrap .drawer__trend { flex: none; }

/* Payment method card: keep the title bold + fully interactive (was reading
   as a muted/disabled card). */
.ow-payment .ow-pick { pointer-events: auto; opacity: 1; }
.ow-payment .ow-pick__body b { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: var(--ink); }

/* =====================================================================
 * Checkout: payment method details attached to the selected option
 * (was a plain line on white) + tip under the Place Order button.
 * ===================================================================== */
.ow-payment .wc_payment_method .payment_box {
  margin: 0 0 2px;
  padding: 13px 16px;
  background: #f8f8f8;
  border: var(--bw) solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: 12.5px; color: var(--gray-700); line-height: 1.55;
}
.ow-payment .wc_payment_method .payment_box p { margin: 0 0 6px; }
.ow-payment .wc_payment_method .payment_box p:last-child { margin: 0; }
/* flatten the selected option's bottom so the details box reads as attached */
.ow-payment .wc_payment_method:has(.payment_box) .ow-pick.is-selected {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.ow-checkout-tip { margin-top: 16px; }

/* =====================================================================
 * Order confirmation: quick order details + instructions/WhatsApp panel
 * ===================================================================== */
.confirm__panel {
  text-align: left; max-width: 460px; margin: 22px auto 0;
  border: var(--bw) solid var(--line); border-radius: var(--r-md);
  background: var(--paper); padding: 18px 20px;
}
.confirm__panel-title {
  font-family: var(--font-head); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); margin-bottom: 12px;
}
.confirm__items { display: flex; flex-direction: column; gap: 12px; }
.confirm__item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font-size: 14px; }
.confirm__item-thumb { flex: none; width: 46px; height: 46px; border-radius: var(--r-sm); overflow: hidden; background: #f2f2f2; }
.confirm__item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.confirm__item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.confirm__item-name { color: var(--ink); }
.confirm__item-name em { color: var(--gray-500); font-style: normal; }
.confirm__item-opts { list-style: none; margin: 1px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.confirm__item-opts li { font-size: 12.5px; color: var(--gray-700); line-height: 1.45; }
.confirm__opt-k { color: var(--gray-500); font-weight: 600; }
.confirm__item-price { font-weight: 700; white-space: nowrap; }
.confirm__item--total { align-items: baseline; margin-top: 10px; padding-top: 12px; border-top: var(--bw) solid var(--line); font-weight: 800; font-size: 15px; }
.confirm__metarow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: var(--bw) solid var(--line); font-size: 13px; color: var(--gray-700); }
.confirm__metarow a { color: var(--ink); font-weight: 600; text-decoration: none; }
.confirm__metarow a:hover { text-decoration: underline; }
.confirm__panel--action { background: #f6f6f6; border-color: transparent; }
.confirm__panel .confirm__instr { font-size: 14px; color: var(--gray-700); line-height: 1.6; margin: 0 0 16px; }

/* "Our Bank Details" block (thank-you page) — bank-transfer / advance orders,
   with copy buttons for the account number + IBAN. */
.ow-bank { max-width: 460px; margin: 22px auto; border: 1px solid var(--line, #e7e7e7); border-radius: var(--r-md, 14px); overflow: hidden; background: #fff; }
.ow-bank__title { font-family: var(--font-head); font-weight: 800; font-size: 14.5px; letter-spacing: 0.01em; padding: 13px 18px; background: var(--ink); color: var(--btn-text, #fff); }
.ow-bank__list { margin: 0; padding: 4px 18px 10px; }
.ow-bank__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--gray-100); }
.ow-bank__row:last-child { border-bottom: 0; }
.ow-bank__k { margin: 0; font-size: 12px; color: var(--gray-500, #767676); font-weight: 600; flex: 0 0 auto; }
.ow-bank__v { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-align: right; min-width: 0; }
.ow-bank__val { letter-spacing: 0.3px; font-variant-numeric: tabular-nums; word-break: break-all; }
.ow-bankcopy { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; border: 1px solid var(--line, #e7e7e7); background: var(--gray-50, #fafafa); color: var(--ink); border-radius: var(--r-pill, 999px); padding: 5px 11px; font-size: 11.5px; font-weight: 700; line-height: 1; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.ow-bankcopy:hover { background: var(--ink); color: var(--btn-text, #fff); border-color: var(--ink); }
.ow-bankcopy__ok { display: none; }
.ow-bankcopy.is-copied { background: #1a7f37; border-color: #1a7f37; color: #fff; }
.ow-bankcopy.is-copied .ow-bankcopy__i { display: none; }
.ow-bankcopy.is-copied .ow-bankcopy__ok { display: inline; }
.ow-bankcopy.is-copied .ow-bankcopy__t { display: none; }
.ow-bankcopy.is-copied::after { content: "Copied"; }
/* Processing-time note — big cat on top, then a full-width stack: title,
   prep-time badge, reassuring copy. */
.confirm__prep { text-align: left; }
.confirm__prep-cat { display: block; font-size: 44px; line-height: 1; margin-bottom: 8px; }
.confirm__prep-head { font-family: var(--font-head); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 9px; }
.confirm__prep-badge { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 11px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--ink); color: var(--btn-text, #fff); font-family: var(--font-head); font-size: 12.5px; font-weight: 600; }
.confirm__prep-badge svg { width: 15px; height: 15px; flex: none; }
.confirm__prep-badge b { font-weight: 800; }
.confirm__prep-text { font-size: 13.5px; color: var(--gray-700); line-height: 1.6; margin: 0; }
.confirm__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.confirm__actions .btn { flex: 1; min-width: 160px; }
.btn--wa { background: #25d366; color: #fff; border-color: #25d366; }
.btn--wa:hover { background: #1da851; border-color: #1da851; }
.btn--wa svg { flex: none; }

@media (max-width: 520px) {
  .confirm__actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   SHOP REDESIGN — trending shelf, card badges, hooks, swatches, hover image
   ========================================================================== */

/* Trending shelf ---------------------------------------------------------- */
.ow-trend-shelf { margin: 0 0 26px; }
.ow-trend-shelf__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.ow-trend-shelf__head h3 {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 800; font-size: 19px; margin: 0;
}
.ow-trend-shelf__spark {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  background: var(--ink); color: var(--btn-text, #fff); border-radius: 50%;
}
.ow-trend-shelf__sub { font-size: 13px; color: var(--gray-500); }
.ow-trend-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.ow-trend-card {
  display: flex; align-items: center; gap: 12px; scroll-snap-align: start;
  border: var(--bw) solid var(--line); border-radius: var(--r-md); background: var(--paper);
  padding: 10px; text-decoration: none; color: var(--ink); transition: 0.15s; position: relative;
}
.ow-trend-card:hover { border-color: var(--gray-300); box-shadow: var(--shadow-soft); }
.ow-trend-card__rank {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  background: var(--ink); color: var(--btn-text, #fff); border-radius: 50%;
  font-family: var(--font-head); font-weight: 800; font-size: 12px;
}
.ow-trend-card__media { flex: none; width: 74px; height: 74px; border-radius: var(--r-sm); overflow: hidden; background: var(--gray-100); }
.ow-trend-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ow-trend-card__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ow-trend-card__name { font-family: var(--font-head); font-weight: 700; font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ow-trend-card__price { font-size: 13.5px; font-weight: 600; }
.ow-trend-card__price .amount { font-weight: 700; }
.ow-trend-card__sold { font-size: 11.5px; color: var(--gray-500); }

/* Card badges (trending / staff pick / new) ------------------------------- */
.pcard__badges { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pcard__badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(17,17,17,.14);
}
.pcard__badge svg { flex: none; }
.pcard__badge--trend { background: var(--ink); color: var(--btn-text, #fff); }
.pcard__badge--pick { background: #fff; color: var(--ink); border: var(--bw) solid var(--ink); }
.pcard__badge--new { background: #fff; color: var(--ink); border: var(--bw) solid var(--line); }

/* Hover image swap -------------------------------------------------------- */
.pcard__media--hasalt .pcard__img2 {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s ease;
}
.pcard:hover .pcard__media--hasalt .pcard__img2 { opacity: 1; }

/* Recommendation hook + swatch dots on the card --------------------------- */
.pcard__hook { font-size: 12.5px; font-style: italic; color: var(--gray-500); line-height: 1.35; }
.pcard__swatches { display: inline-flex; align-items: center; gap: 5px; margin-top: 1px; }
.pcard__dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.14); box-shadow: inset 0 0 0 1px #fff; }
.pcard__dot-more { font-size: 11px; font-weight: 600; color: var(--gray-500); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ow-trend-shelf__head h3 { font-size: 17px; }
  /* Show the current card at ~80% with a 20% peek of the next (mobile). */
  .ow-trend-track { grid-auto-columns: 80%; }
  /* Trending reads as compact horizontal cards on mobile: hide the pcard grid,
     show the .ow-trend__compact track — everywhere except the cart drawer,
     which keeps its own tailored one-card-per-view slider. */
  .ow-trend:not(.ow-trend--drawer) .ow-trend__grid { display: none !important; }
  .ow-trend:not(.ow-trend--drawer) .ow-trend__compact { display: grid; }
  .pcard__badge, .pcard__off { font-size: 10px; padding: 3px 8px; }
}

/* AJAX shop: subtle loading state while the grid swaps */
.ow-shop-results { transition: opacity .15s ease; }
.ow-shop-results.is-loading { opacity: .45; pointer-events: none; }

/* Shop pagination — WooCommerce prints <nav class="woocommerce-pagination"> with
   a bare <ul class="page-numbers">; style it as monochrome pill buttons to match
   the rest of the UI (without this it renders as a plain bulleted list). */
.woocommerce-pagination { margin: 34px 0 8px; display: flex; justify-content: center; }
.woocommerce-pagination ul.page-numbers,
.woocommerce-pagination ul {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin: 0; padding: 0;
}
.woocommerce-pagination ul li { margin: 0; }
.woocommerce-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 13px; box-sizing: border-box;
  border: var(--bw) solid var(--line); border-radius: var(--r-md);
  background: var(--paper); color: var(--ink);
  font-family: var(--font-head); font-weight: 600; font-size: 14px; line-height: 1;
  text-decoration: none; transition: border-color .15s, background .15s, color .15s;
}
.woocommerce-pagination a.page-numbers:hover { border-color: var(--ink); }
.woocommerce-pagination .page-numbers.current {
  background: var(--ink); color: var(--btn-text, #fff); border-color: var(--ink);
}
.woocommerce-pagination .page-numbers.dots {
  border-color: transparent; background: transparent; min-width: 0; padding: 0 4px;
}
.woocommerce-pagination .page-numbers.prev,
.woocommerce-pagination .page-numbers.next { font-size: 17px; }

/* "Load more" button (shop.js hides the numbered pagination above and drives
   paging from this instead, appending each page's cards to the grid). */
.ow-load-more-wrap { display: flex; justify-content: center; margin: 36px 0 8px; }
.ow-load-more { min-width: 220px; }
.ow-load-more.is-loading { opacity: .7; pointer-events: none; }

/* ==========================================================================
   PHASE 2 — mid-grid promo band + recently-viewed strip
   ========================================================================== */

/* "Complete your setup" promo card — spans the full grid width */
.ow-promo { grid-column: 1 / -1; list-style: none; }
.ow-promo__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  background: var(--ink); color: var(--btn-text, #fff);
  border-radius: var(--r-md); padding: 26px 30px;
}
.ow-promo__copy { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.ow-promo__title { font-family: var(--font-head); font-weight: 800; font-size: 21px; letter-spacing: -.01em; }
.ow-promo__text { font-size: 14px; line-height: 1.55; opacity: .82; }
.ow-promo__btn { flex: none; }

/* ==========================================================================
   INJECTED GRID CARDS — category recommendations + per-category custom cards.
   Built on the .pcard frame so they size exactly like product cards and flow
   as normal cells in the shop / category grid.
   ========================================================================== */
.pcard--inject .pcard__body { gap: 6px; }
.pcard--inject .pcard__name { font-size: 16px; line-height: 1.25; }

/* Category recommendation card — a full-bleed IMAGE tile with a dark gradient
   overlay and white text at the bottom, so it reads clearly as a category and
   never gets mistaken for a product card. The link fills the grid cell, so its
   height matches the surrounding product cards. */
.pcard--cat { background: var(--ink); border-color: var(--ink); }
.pcard--cat:hover { border-color: var(--ink); box-shadow: var(--shadow-hover); }
.pcard--cat__link {
  position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 264px; padding: 16px; overflow: hidden; color: #fff;
}
.pcard--cat__bg { position: absolute; inset: 0; z-index: 0; }
.pcard--cat__bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s; }
.pcard--cat:hover .pcard--cat__bg img { transform: scale(1.05); }
.pcard--cat__ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 88px; color: rgba(255, 255, 255, 0.22);
  background: radial-gradient(rgba(255, 255, 255, 0.08) 1.1px, transparent 1.7px) 0 0 / 20px 20px, var(--ink-soft, #2b2b2b);
}
.pcard--cat__link::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 8, 8, 0.04) 0%, rgba(8, 8, 8, 0.30) 46%, rgba(8, 8, 8, 0.86) 100%);
}
.pcard--cat__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.16); color: #fff; border: var(--bw) solid rgba(255, 255, 255, 0.32);
  padding: 4px 9px; border-radius: var(--r-pill); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pcard--cat__content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.pcard--cat__name { font-family: var(--font-head); font-weight: 800; font-size: 21px; letter-spacing: -0.01em; line-height: 1.1; color: #fff; }
.pcard--cat__sub { font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.82); }
.pcard--cat__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.pcard--cat__cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: #fff; }
.pcard--cat__cta svg { width: 15px; height: 15px; transition: transform 0.18s; }
.pcard--cat:hover .pcard--cat__cta svg { transform: translateX(3px); }
.pcard--cat__count { font-size: 11.5px; color: rgba(255, 255, 255, 0.7); white-space: nowrap; }

/* Custom (admin-authored) card — image on top + white body (like a product). */
.pcard--custom__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.pcard--custom__media { display: flex; align-items: center; justify-content: center; }
.pcard--custom__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.pcard--custom:hover .pcard--custom__media img { transform: scale(1.04); }
.pcard--custom__tag {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--paper); color: var(--ink); border: var(--bw) solid var(--line);
  padding: 4px 9px; border-radius: var(--r-pill);
}
.pcard--custom--plain .pcard--custom__media {
  background: radial-gradient(rgba(17, 17, 17, 0.07) 1.1px, transparent 1.7px) 0 0 / 18px 18px, var(--gray-100);
}
.pcard--custom__text { font-size: 13px; line-height: 1.5; color: var(--gray-500); }
.pcard--custom__cta {
  margin-top: auto; align-self: flex-start;
  background: var(--ink); color: var(--btn-text, #fff); border-radius: var(--r-pill);
  padding: 8px 16px; font-family: var(--font-head); font-weight: 600; font-size: 12.5px;
  transition: 0.18s;
}
.pcard--custom:hover .pcard--custom__cta { transform: translateY(-1px); }

/* Recently viewed — reuses the trending-shelf card styles */
.ow-recent-host:empty { display: none; }
.ow-recent-section:has(.ow-recent-host:empty) { display: none; }
.ow-recent { margin: 0; }
.ow-recent-host .ow-trend-shelf { margin-top: 10px; }
.ow-recent-card { cursor: pointer; }

@media (max-width: 640px) {
  .ow-promo__inner { padding: 20px 22px; }
  .ow-promo__title { font-size: 18px; }
  .ow-promo__btn { width: 100%; text-align: center; }
}

/* Recently-viewed spacing refinements (override) */
.ow-recent-host:not(:empty) { margin-top: 40px; padding-top: 32px; border-top: var(--bw) solid var(--line); }
.ow-recent-section .ow-recent-host:not(:empty) { margin-top: 0; padding-top: 0; border-top: none; }

/* ==========================================================================
   RESPONSIVE HARDENING
   Kill stray horizontal scroll on small screens and let grid/flex children
   shrink below their content width (the #1 cause of mobile side-scroll).
   ========================================================================== */
html, body { overflow-x: clip; }

/* Media never wider than its container */
img, video, iframe, canvas { max-width: 100%; }

/* Grid/flex items default to min-width:min-content, which forces overflow
   when a child (a slider, a long word, a table) is wider than its track. */
.pdp > *, .cart-page > *, .checkout-page > *, .grid > *,
.hero__grid > *, .hero__side > *, .footer__grid > *, .trust > *,
.feature > *, .ow-co-grid2 > *, .buy > *, .summary > *,
.ow-shop-toolbar > *, .woocommerce-customer-details > * { min-width: 0; }

/* Long unbroken strings (URLs, SKUs) shouldn't push the layout wide. */
.buy__title, .pcard__name, .cart-row__title, .ow-order-title,
.woocommerce-error, .woocommerce-message, .woocommerce-info { overflow-wrap: break-word; }

/* Full-bleed category rail: clamp to the viewport so it never adds page scroll. */
@media (max-width: 720px) {
  .cats__rail { width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 16px; }
}

/* WooCommerce data tables scroll inside their own box on phones rather than
   stretching the page or getting clipped by the overflow guard. */
@media (max-width: 600px) {
  .woocommerce-MyAccount-content table.shop_table,
  .my_account_orders, table.woocommerce-orders-table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
}

/* ==========================================================================
   PRODUCT GUIDES (Size / Assembly slide-in drawers) + PRODUCT HERO
   ========================================================================== */

/* Buy-box guide buttons (under Add to Cart / Buy Now) */
.ow-guide-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.ow-guide-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--paper); color: var(--ink);
  border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  font-family: var(--font-head); font-weight: 600; font-size: 13.5px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.ow-guide-btn:hover { border-color: var(--ink); background: var(--gray-100); }
.ow-guide-btn:active { transform: translateY(1px); }
.ow-guide-btn svg, .ow-guide-btn i { width: 17px; height: 17px; flex: none; color: var(--gray-700); }

/* Guide drawer: reuses the cart-drawer slide-in; only the body differs */
.ow-guide-drawer { width: 480px; }
.ow-guide-body { display: block; padding: 20px; }
.ow-guide-body > *:first-child { margin-top: 0; }
.ow-guide-body > *:last-child { margin-bottom: 0; }
.ow-guide-body h2, .ow-guide-body h3, .ow-guide-body h4 { font-family: var(--font-head); margin: 20px 0 8px; line-height: 1.25; }
.ow-guide-body h2 { font-size: 19px; }
.ow-guide-body h3 { font-size: 16.5px; }
.ow-guide-body h4 { font-size: 15px; }
.ow-guide-body p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.65; color: var(--gray-700); }
.ow-guide-body ul, .ow-guide-body ol { margin: 0 0 14px; padding-left: 20px; }
.ow-guide-body li { margin-bottom: 6px; font-size: 14.5px; line-height: 1.6; color: var(--gray-700); }
.ow-guide-body a { color: var(--ink); text-decoration: underline; }
.ow-guide-body img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin: 4px 0 12px; }
.ow-guide-body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 13.5px; }
.ow-guide-body th, .ow-guide-body td { border: var(--bw) solid var(--line); padding: 8px 10px; text-align: left; }
.ow-guide-body th { background: var(--gray-100); font-family: var(--font-head); font-weight: 600; }

/* Assembly "Tools included" checklist — top of the Assembly Guide drawer */
.ow-guide-body .ow-tools { margin: 0 0 18px; padding: 0 0 16px; border-bottom: var(--bw) solid var(--line); }
.ow-guide-body .ow-tools__head { margin: 0 0 12px; font-family: var(--font-head); font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gray-700); }
.ow-guide-body .ow-tools__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ow-guide-body .ow-tools__item { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; border: var(--bw) solid var(--line); border-radius: var(--r-md); background: var(--gray-100); }
.ow-guide-body .ow-tools__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none; border-radius: var(--r-sm); background: var(--paper); border: var(--bw) solid var(--line); color: var(--ink); }
.ow-guide-body .ow-tools__icon svg { width: 32px; height: 32px; display: block; }
.ow-guide-body .ow-tools__name { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--ink); }

/* Responsive video embed (used in guide drawers + rich content) */
.ow-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 16px; border-radius: var(--r-md); overflow: hidden; background: #000; }
.ow-video iframe, .ow-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Universal product-page hero (above the footer) */
.ow-phero { margin-top: 8px; }
.ow-phero__inner {
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--paper);
  padding: 48px 40px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.ow-phero__title { font-family: var(--font-head); font-size: clamp(24px, 3.4vw, 38px); line-height: 1.12; color: var(--paper); max-width: 22ch; margin: 0; }
.ow-phero__text { font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); max-width: 62ch; }
.ow-phero__text p { margin: 0 0 10px; }
.ow-phero__text p:last-child { margin-bottom: 0; }
.ow-phero__btn { margin-top: 4px; }
.ow-phero--image .ow-phero__inner {
  background-image: linear-gradient(rgba(12, 12, 12, 0.58), rgba(12, 12, 12, 0.58)), var(--ow-phero-img);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  padding: 76px 40px;
}

@media (max-width: 600px) {
  .ow-guide-drawer { width: 100%; max-width: 100vw; }
  .ow-phero__inner { padding: 36px 22px; }
  .ow-phero--image .ow-phero__inner { padding: 56px 22px; }
}

/* Category / tag description — rendered at the bottom of the archive */
.ow-cat-desc { padding-top: 4px; }
.ow-cat-desc__body { max-width: 860px; color: var(--gray-700); line-height: 1.75; font-size: 15px; }
.ow-cat-desc__body > *:first-child { margin-top: 0; }
.ow-cat-desc__body > *:last-child { margin-bottom: 0; }
.ow-cat-desc__body h2, .ow-cat-desc__body h3, .ow-cat-desc__body h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.25; margin: 26px 0 10px; }
.ow-cat-desc__body h2 { font-size: 22px; }
.ow-cat-desc__body h3 { font-size: 18px; }
.ow-cat-desc__body h4 { font-size: 15.5px; }
.ow-cat-desc__body p { margin: 0 0 14px; }
.ow-cat-desc__body ul, .ow-cat-desc__body ol { margin: 0 0 16px; padding-left: 22px; }
.ow-cat-desc__body li { margin-bottom: 6px; }
.ow-cat-desc__body a { color: var(--ink); text-decoration: underline; }
.ow-cat-desc__body img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: 6px 0 14px; }
.ow-cat-desc__body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.ow-cat-desc__body th, .ow-cat-desc__body td { border: var(--bw) solid var(--line); padding: 8px 10px; text-align: left; }

/* Cart-drawer trending: hide the "-X%" discount flash above the card image
   (keeps the drawer's recommendation cards clean). */
.ow-trend--drawer .pcard__off,
.drawer__trend .pcard__off { display: none; }

/* ---- Selected add-ons shown as their own titled list (under title + options) ----
   The buy bar + mobile sticky share the .ow-buybar__addons-* classes (the sticky
   mirrors the buy bar's markup). Lists keep default block display so [hidden]
   still hides an empty one (an author `display` would beat [hidden]'s UA rule). */
.ow-buybar__addons-h,
.cart-row__addons-title,
.drawer-item__addons-title,
.summary-mini-item__addons-title {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; margin: 5px 0 2px; color: var(--gray-500);
}
.ow-buybar__addons { margin: 8px 0 0; }
.ow-buybar__addons-h { color: var(--gray-400, #9ca3af); margin: 0 0 3px; }
.ow-buybar__addons-list { list-style: none; margin: 0; padding: 0; }
.ow-buybar__addons-list li { font-size: 12.5px; line-height: 1.5; color: var(--gray-200, #e5e7eb); display: flex; align-items: baseline; gap: 6px; }
.ow-buybar__addons-list li::before { content: "+"; color: var(--gray-400, #9ca3af); font-weight: 700; flex: none; }

.cart-row__addons, .drawer-item__addons, .summary-mini-item__addons { list-style: none; margin: 0; padding: 0; }
.cart-row__addons li, .drawer-item__addons li, .summary-mini-item__addons li { font-size: 12.5px; line-height: 1.5; color: var(--gray-600); display: flex; align-items: baseline; gap: 6px; }
.cart-row__addons li::before, .drawer-item__addons li::before, .summary-mini-item__addons li::before { content: "+"; color: var(--gray-400); font-weight: 700; flex: none; }

/* Mobile sticky tray: same mirrored buy-bar markup, more compact. */
.stickybar__addons { margin: 2px 0 0; }
.stickybar__addons .ow-buybar__addons-h { font-size: 9px; letter-spacing: .04em; margin: 0 0 1px; color: var(--gray-500, #9ca3af); }
.stickybar__addons .ow-buybar__addons-list li { font-size: 11px; line-height: 1.4; color: var(--gray-300, #d1d5db); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   STATIC + POLICY PAGES  (About, Contact, Tracking, Terms, Returns,
   Shipping, Privacy). The hero reuses .ow-shophero--dotted so these pages
   share one title system with shop/category; everything below is the
   reading layer. See inc/site-pages.php + template-parts/pages/.
   ========================================================================== */
.ow-pagehero__eyebrow {
  position: relative; z-index: 1;
  font-family: var(--font-head); font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500);
  margin: 0 0 10px;
}
.ow-page { padding-top: 34px; }

/* --- Long-form prose ------------------------------------------------------ */
.ow-prose { max-width: 78ch; color: var(--gray-700); font-size: 16px; line-height: 1.72; }
.ow-prose > *:first-child { margin-top: 0; }
.ow-prose > *:last-child { margin-bottom: 0; }
.ow-prose h2 {
  font-family: var(--font-head); font-weight: 800; color: var(--ink);
  font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.015em; line-height: 1.2;
  margin: 46px 0 14px;
  scroll-margin-top: 108px; /* sticky header clearance for TOC jumps */
}
.ow-prose h3 { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: 17px; margin: 28px 0 8px; }
.ow-prose p { margin: 0 0 16px; }
.ow-prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ow-prose a:hover { color: var(--gray-700); }
.ow-prose strong { color: var(--ink); font-weight: 700; }
.ow-prose ul, .ow-prose ol { margin: 0 0 18px; padding-left: 20px; }
.ow-prose li { margin: 0 0 8px; }
.ow-prose ul li::marker { color: var(--gray-300); }
.ow-prose hr { border: 0; border-top: var(--bw) solid var(--line); margin: 36px 0; }
.ow-prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.ow-prose th, .ow-prose td { text-align: left; padding: 11px 14px; border-bottom: var(--bw) solid var(--line); }
.ow-prose th { font-family: var(--font-head); font-weight: 700; color: var(--ink); background: var(--gray-50); }
.ow-prose blockquote {
  margin: 0 0 20px; padding: 16px 20px; border-left: 3px solid var(--ink);
  background: var(--gray-50); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--gray-700);
}

/* --- Policy layout: sticky contents rail + body --------------------------- */
.ow-legal { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 48px; align-items: start; }
.ow-legal--nonav { grid-template-columns: minmax(0, 1fr); }
.ow-legal__nav { position: sticky; top: 104px; }
.ow-legal__navinner {
  border: var(--bw) solid var(--line); border-radius: var(--r-md);
  padding: 18px 16px 14px; background: var(--paper);
  max-height: calc(100vh - 148px); overflow-y: auto;
}
.ow-legal__navtitle {
  font-family: var(--font-head); font-weight: 700; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); margin: 0 0 10px;
}
.ow-legal__nav ul { list-style: none; margin: 0; padding: 0; }
.ow-legal__nav li { margin: 0 0 2px; }
.ow-legal__nav a { display: block; font-size: 13.5px; line-height: 1.45; padding: 6px 10px; border-radius: var(--r-sm); color: var(--gray-700); }
.ow-legal__nav a:hover { background: var(--gray-100); color: var(--ink); }
.ow-legal__body { min-width: 0; }
.ow-legal__updated {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--gray-500);
  background: var(--gray-100); border-radius: var(--r-pill); padding: 6px 14px; margin: 0 0 26px;
}
.ow-legal__updated svg { width: 14px; height: 14px; stroke: var(--gray-500); }
.ow-legal__help {
  margin-top: 54px; padding: 26px 28px;
  border: var(--bw) solid var(--line); border-radius: var(--r-lg); background: var(--gray-50);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
}
.ow-legal__help h2 { font-family: var(--font-head); font-weight: 800; font-size: 19px; margin: 0 0 4px; color: var(--ink); }
.ow-legal__help p { margin: 0; color: var(--gray-500); font-size: 14.5px; }
.ow-legal__helpactions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Contact channels ----------------------------------------------------- */
.ow-channels { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ow-channel {
  border: var(--bw) solid var(--line); border-radius: var(--r-lg); padding: 26px 24px;
  background: var(--paper); display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  transition: box-shadow .18s, border-color .18s;
}
.ow-channel:hover { box-shadow: var(--shadow-soft); border-color: var(--gray-300); }
.ow-channel__icon {
  width: 42px; height: 42px; border-radius: var(--r-pill); background: var(--gray-100);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.ow-channel__icon svg { width: 19px; height: 19px; stroke: var(--ink); }
.ow-channel h2 { font-family: var(--font-head); font-weight: 800; font-size: 18px; margin: 0; color: var(--ink); }
.ow-channel p { margin: 0; color: var(--gray-500); font-size: 14.5px; line-height: 1.55; }
.ow-channel__link { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ow-channel__link:hover { color: var(--gray-700); }
.ow-channel .btn, .ow-channel > .ow-channel__link { margin-top: auto; padding-top: 4px; }
.ow-channel--wa .ow-channel__icon { background: rgba(37, 211, 102, .14); }
.ow-channel--wa .ow-channel__icon svg { stroke: #128c4a; }

.ow-contact__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ow-infocard { border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 22px; background: var(--gray-50); }
.ow-infocard h2 { display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 700; font-size: 15px; margin: 0 0 8px; color: var(--ink); }
.ow-infocard h2 svg { width: 17px; height: 17px; stroke: var(--gray-500); flex: none; }
.ow-infocard p { margin: 0; color: var(--gray-700); font-size: 14.5px; line-height: 1.6; }
.ow-infocard__muted { color: var(--gray-500); }
.ow-contact__extra { margin-top: 36px; }

/* --- About: stat strip, value cards, pull quote --------------------------- */
/* Classes are used by the page CONTENT so the copy stays editable in wp-admin
   while the design stays here in the theme. */
.ow-stats { list-style: none; margin: 34px 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ow-stats li { border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 22px 20px; background: var(--gray-50); }
.ow-stats b { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(24px, 3vw, 32px); color: var(--ink); letter-spacing: -.02em; line-height: 1; margin-bottom: 7px; }
.ow-stats span { color: var(--gray-500); font-size: 14px; line-height: 1.5; }

.ow-values { list-style: none; margin: 30px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ow-values li { border: var(--bw) solid var(--line); border-radius: var(--r-lg); padding: 24px 22px; background: var(--paper); }
.ow-values b { display: block; font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.ow-values span { color: var(--gray-500); font-size: 14.5px; line-height: 1.6; }

.ow-quote { margin: 36px 0; padding: 28px 30px; border: var(--bw) solid var(--line); border-radius: var(--r-lg); background: var(--gray-50); }
.ow-quote p { font-size: 17px; line-height: 1.65; color: var(--ink); margin: 0 0 12px; }
.ow-quote cite { font-style: normal; font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--gray-500); }

/* About runs edge-to-edge so the stat/value grids line up with the hero,
   but the running text stays capped at a readable measure. */
.ow-about .ow-prose { max-width: none; }
.ow-about .ow-prose > p,
.ow-about .ow-prose > h2,
.ow-about .ow-prose > h3,
.ow-about .ow-prose > ul:not([class]),
.ow-about .ow-prose > ol:not([class]) { max-width: 78ch; }
.ow-about .ow-prose > .ow-quote { max-width: 920px; }

.ow-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.ow-cta h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(22px, 3vw, 30px); margin: 0 0 6px; color: var(--ink); letter-spacing: -.02em; }
.ow-cta p { margin: 0; color: var(--gray-500); font-size: 15.5px; }

/* --- Tracking ------------------------------------------------------------- */
.ow-tracking__widget { margin-bottom: 42px; }
.ow-tracking__help { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ow-tracking__help li { border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 22px; background: var(--gray-50); }
.ow-tracking__help h2 { font-family: var(--font-head); font-weight: 700; font-size: 15.5px; margin: 10px 0 6px; color: var(--ink); }
.ow-tracking__help p { margin: 0; color: var(--gray-500); font-size: 14.5px; line-height: 1.6; }
.ow-tracking__help .ow-channel__link { font-size: 14px; display: inline-block; margin-top: 4px; }

@media (max-width: 1100px) {
  /* Contents rail becomes a pill row above the text. */
  .ow-legal { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ow-legal__nav { position: static; }
  .ow-legal__navinner { max-height: none; overflow: visible; }
  .ow-legal__nav ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .ow-legal__nav li { margin: 0; }
  .ow-legal__nav a { border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: 6px 13px; font-size: 13px; }
  .ow-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ow-channels, .ow-contact__grid, .ow-values, .ow-tracking__help { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .ow-page { padding-top: 22px; }
  .ow-prose { font-size: 15.5px; }
  .ow-prose h2 { margin-top: 36px; }
  .ow-stats { gap: 10px; }
  .ow-legal__help, .ow-quote { padding: 22px; }
}