/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--shadow-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--ease-out:cubic-bezier(0, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse\!{visibility:collapse!important}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.isolate{isolation:isolate}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.block{display:block}.block\!{display:block!important}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-grid{display:inline-grid}.table{display:table}.table\!{display:table!important}.border-collapse{border-collapse:collapse}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.transform\!{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)!important}.resize{resize:both}.columns-2{columns:2}.rounded{border-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.overline{text-decoration-line:overline}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.\[decor\:pg_backup\]{decor:pg backup}.\[rdoc-ref\:lib\/racc\/rdoc\/grammar\.en\.rdoc\]{rdoc-ref:lib/racc/rdoc/grammar.en.rdoc}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}/* ============================================================================
   Casa Decor — design tokens (2026)
   Loaded BEFORE decor.css. Everything visual should reference these, so the
   whole site can be retuned from one place instead of 7k lines of literals.
   ========================================================================= */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  /* Espresso + bronze, carried over from the brand but desaturated a step so
     it reads contemporary rather than 2010s-luxury. Admin → Brand can still
     override --primary / --accent at runtime; these are the fallbacks. */
  --espresso: #241f1b;
  --espresso-soft: #3a322b;
  --gold: #a9814b;
  --gold-ink: #7d5c2c; /* gold that passes AA as text on light surfaces */
  --gold-soft: #f6f0e5;
  --gold-line: rgba(169, 129, 75, 0.3);

  /* ---- Ink (text) ------------------------------------------------------- */
  --ink: #171613;
  --ink-2: #46443e;
  /* Was #767267, which measured 4.44:1 on --surface and 4.14:1 on --surface-2
     — under the 4.5 AA threshold on two of the backgrounds it is used against.
     #6f6a5e is the lightest value that clears 4.5 on all four surfaces, so the
     muted feel survives. */
  --ink-3: #6f6a5e;
  --ink-4: #a5a096;
  --ink-inverse: #fdfcfa;

  /* ---- Surfaces --------------------------------------------------------- */
  --surface: #f7f6f3;
  --surface-2: #f0eee9;
  --surface-3: #e6e3dc;
  --footer-surface: #0d0d0c;
  --card: #ffffff;
  --card-muted: #fbfaf8;

  /* ---- Hairlines -------------------------------------------------------- */
  /* 2026 leans on hairline borders for structure instead of drop shadows. */
  --line: rgba(23, 22, 19, 0.08);
  --line-2: rgba(23, 22, 19, 0.13);
  --line-3: rgba(23, 22, 19, 0.2);
  --line-inverse: rgba(255, 255, 255, 0.14);

  /* ---- Status ----------------------------------------------------------- */
  --ok: #17734a;
  --ok-soft: #e7f4ec;
  --warn: #8a6a1f;
  --warn-soft: #fbf3df;
  --danger: #a3261c;
  --danger-soft: #fbeceb;
  --whatsapp: #25d366;
  --whatsapp-dark: #1ebe5d;

  /* ---- Radii ------------------------------------------------------------ */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  /* Wide, faint, warm — a shadow should be felt, not seen. */
  --shadow-sm: 0 1px 2px rgba(23, 22, 19, 0.04);
  --shadow-md: 0 2px 4px rgba(23, 22, 19, 0.03), 0 8px 20px rgba(23, 22, 19, 0.05);
  --shadow-lg: 0 2px 6px rgba(23, 22, 19, 0.04), 0 18px 44px rgba(23, 22, 19, 0.08);
  --shadow-xl: 0 4px 10px rgba(23, 22, 19, 0.05), 0 34px 80px rgba(23, 22, 19, 0.12);

  /* ---- Type ------------------------------------------------------------- */
  /* The system font stack. On an iPhone, iPad or Mac this resolves to San
     Francisco — the actual Apple typeface — with no download at all. Apple
     does not licence SF for serving as a webfont, so this is the only correct
     way to have it, and it is the same stack apple.com itself uses.
     Elsewhere it falls back to that platform's own UI face: Segoe UI on
     Windows, Roboto on Android. All three cover Cyrillic and Albanian.
     -apple-system must come before system-ui: older Safari only knows the
     former, and BlinkMacSystemFont is the Chrome-on-macOS spelling. */
  --font-sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* Apple has no separate display face: SF Pro Display is the same family at
     larger sizes, tighter tracking and a heavier weight. Headings therefore
     use the same stack and earn their hierarchy from size and weight, exactly
     as on apple.com. */
  --font-display: var(--font-sans);

  /* Fluid scale — no media queries needed for headline sizing. */
  --t-display: clamp(2.6rem, 6.4vw, 5.25rem);
  --t-h1: clamp(2.1rem, 4.2vw, 3.4rem);
  --t-h2: clamp(1.7rem, 2.9vw, 2.4rem);
  --t-h3: clamp(1.2rem, 1.7vw, 1.55rem);
  --t-lead: clamp(1rem, 1.25vw, 1.15rem);
  --t-body: 0.975rem;
  --t-sm: 0.875rem;
  --t-xs: 0.78rem;
  --t-eyebrow: 0.6875rem;

  /* Big type wants negative tracking; small caps type wants positive. */
  --track-display: -0.038em;
  --track-h: -0.022em;
  --track-tight: -0.011em;
  --track-eyebrow: 0.15em;

  --lh-display: 0.98;
  --lh-h: 1.1;
  --lh-body: 1.6;

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.75, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* ---- Layout ----------------------------------------------------------- */
  --page-max: 1280px;
  --gutter: clamp(1.15rem, 4vw, 3.25rem);
}
/* Casa Decor — ALL component CSS. Appended after Tailwind build, never purged. */
/* DO NOT put any of this in application.tailwind.css — Tailwind v4 will duplicate/reorder it. */

/* All custom component CSS below — not Tailwind utilities, not purged */

:root {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  letter-spacing: 0;
  /* Optical sizing is the point of shipping the variable opsz axis: small text
     gets sturdier shapes, display text gets tighter, finer ones. */
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--surface);
}

@media (hover: none) and (pointer: coarse) {
  /* The viewport can show behind the footer during a mobile scroll bounce. */
  html:has(.decor-app) {
    background-color: var(--footer-surface);
    overscroll-behavior-y: none;
  }
}

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

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: 0;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Respect the OS "reduce motion" setting — required for accessibility, and
   the site is full of entrance animations. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes soft-scale {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes banner-sheen {
  0%,
  62% {
    opacity: 0;
    transform: translateX(-130%) skewX(-16deg);
  }

  72% {
    opacity: 0.34;
  }

  88%,
  100% {
    opacity: 0;
    transform: translateX(130%) skewX(-16deg);
  }
}

.decor-app,
.admin-app {
  min-height: 100vh;
  color: var(--ink);
}

.decor-app {
  background:
    linear-gradient(180deg, #f7f8f4 0%, #ffffff 44%, #f4f5f1 100%);
}

.shop-header {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 12px clamp(12px, 3vw, 34px);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  padding: 12px clamp(14px, 2.8vw, 28px);
  box-shadow: 0 18px 54px rgba(15, 16, 15, 0.08);
  backdrop-filter: blur(22px);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-lockup span:not(.brand-mark) {
  display: grid;
  min-width: 0;
}

.brand-lockup strong {
  font-size: 1rem;
  line-height: 1.1;
}

.brand-lockup small {
  overflow: hidden;
  max-width: 260px;
  color: var(--ink-3);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-mark {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: var(--primary, var(--ink));
  color: white;
  font-weight: 800;
}

.brand-logo {
  display: block;
  width: auto;
  max-width: 130px;
  height: 48px;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: left center;
  background: transparent;
}

.brand-logo-dark {
  filter: brightness(0) invert(1);
  opacity: 0.94;
}

/* ── Navbar ── */

.shop-nav-center {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.5vw, 28px);
}

.shop-nav-center a {
  padding: 6px 10px;
  color: var(--ink-2);
  font-size: 0.88rem;
  font-weight: 750;
  border-radius: 5px;
  transition: background 140ms ease, color 140ms ease;
  white-space: nowrap;
}

.shop-nav-center a:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.shop-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  background: var(--whatsapp);
  padding: 7px 12px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 750;
  transition: background 140ms ease;
  white-space: nowrap;
}

.nav-whatsapp:hover {
  background: var(--whatsapp-dark);
}

.nav-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}

.mobile-menu-inner {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 90vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  animation: slide-in-left 220ms ease both;
}

@keyframes slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.mobile-menu-header button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  background: var(--surface-2);
  border-radius: 6px;
  color: var(--ink);
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  flex: 1;
  overflow-y: auto;
}

.mobile-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 750;
  border-bottom: 1px solid var(--line);
  transition: background 140ms ease;
}

.mobile-nav a:hover {
  background: var(--card-muted);
}

.mobile-menu-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-phone-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 750;
}

/* Legacy .shop-nav kept for any remaining references */
.shop-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  color: var(--ink-2);
  font-size: 0.93rem;
}

.nav-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 750;
  transition: background 180ms ease;
}

.nav-cart-link:hover {
  background: var(--surface-2);
}

.cart-badge {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: var(--primary, var(--ink));
  color: #fff;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--surface-2);
}

.language-switcher button {
  min-width: 38px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 0.78rem;
  font-weight: 850;
}

.language-switcher button.active {
  background: var(--ink);
  color: #fff;
}

.icon-link,
.primary-button,
.secondary-button,
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  padding: 0 16px;
  font-weight: 750;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.icon-link:hover,
.primary-button:hover,
.secondary-button:hover,
.danger-button:hover {
  transform: translateY(-1px);
}

.primary-button:disabled,
.secondary-button:disabled,
.danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}

.primary-button {
  background: var(--primary, var(--ink));
  color: white;
}



.secondary-button {
  border: 1px solid var(--line-2);
  background: #ffffff;
  color: var(--ink);
}

.secondary-button:hover,
.category-tabs button:hover {
  background: var(--surface-2);
}

.danger-button {
  border: 1px solid var(--line-3);
  background: var(--surface-2);
  color: var(--ink);
}

.full {
  width: 100%;
}

.hero-section {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(520px, calc(100vh - 150px), 760px);
  overflow: hidden;
  align-items: end;
  background: var(--ink);
  color: #fff;
  padding: clamp(30px, 5vw, 70px) clamp(18px, 5vw, 76px);
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(820px, 100%);
  gap: 22px;
  align-content: center;
  animation: fade-up 520ms ease both;
}

.hero-copy > * {
  animation: fade-up 520ms ease both;
}

.hero-copy .hero-badge,
.hero-copy .announcement,
.hero-copy .discount-code {
  animation-delay: 40ms;
}

.hero-copy h1 {
  animation-delay: 110ms;
}

.hero-copy p {
  animation-delay: 180ms;
}

.hero-copy .hero-actions {
  animation-delay: 250ms;
}

.hero-section:not(.product-hero) .hero-copy {
  max-width: min(820px, calc(100vw - 520px));
}

.announcement,
.discount-code {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.74);
  padding: 8px 11px;
  color: #4d4d4f;
  font-size: 0.9rem;
  font-weight: 700;
}

.discount-code {
  background: var(--surface-2);
  color: var(--primary, var(--ink));
}

.hero-section .announcement,
.hero-section .discount-code {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
}

.hero-copy h1 {
  max-width: 900px;
  margin: 0;
  color: #fff;
  font-size: clamp(3.25rem, 8vw, 7.8rem);
  letter-spacing: 0;
  line-height: 0.88;
  text-wrap: balance;
}

.hero-copy p {
  max-width: 660px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.16rem;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-section .primary-button {
  background: #fff;
  color: var(--ink);
}

.hero-section .secondary-button {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  backdrop-filter: blur(16px);
}

.hero-media {
  position: absolute;
  z-index: -2;
  inset: 0;
  min-height: 100%;
  overflow: hidden;
  border-radius: 0;
  background: var(--ink);
  box-shadow: none;
  animation: soft-scale 620ms ease both;
}

.hero-scrim {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9, 10, 9, 0.82), rgba(9, 10, 9, 0.4) 44%, rgba(9, 10, 9, 0.16)),
    linear-gradient(180deg, rgba(9, 10, 9, 0.2), rgba(9, 10, 9, 0.72));
}

.product-hero {
  min-height: clamp(560px, calc(100vh - 150px), 760px);
}

.product-hero .hero-media {
  min-height: 100%;
  background: var(--ink);
}

.product-hero .hero-copy h1 {
  font-size: clamp(3rem, 6.6vw, 6.2rem);
}

.product-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.product-hero-meta strong {
  font-size: 1.6rem;
}

.product-hero-meta span {
  color: rgba(255, 255, 255, 0.76);
  font-weight: 700;
}

.hero-product-rail {
  position: absolute;
  right: clamp(18px, 4vw, 58px);
  bottom: clamp(18px, 4vw, 52px);
  z-index: 3;
  display: grid;
  width: min(410px, 36vw);
  gap: 10px;
}

.hero-product-rail a {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  padding: 8px;
  color: var(--ink);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(18px);
  animation: fade-up 480ms ease both;
  transition: transform 180ms ease, background 180ms ease;
}

.hero-product-rail a:nth-child(1) {
  animation-delay: 290ms;
}

.hero-product-rail a:nth-child(2) {
  animation-delay: 360ms;
}

.hero-product-rail a:nth-child(3) {
  animation-delay: 430ms;
}

.hero-product-rail a:hover {
  background: #fff;
  transform: translateY(-2px);
}

.hero-product-rail img,
.rail-fallback {
  display: grid;
  width: 74px;
  height: 64px;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: #ededeb;
  object-fit: cover;
  color: var(--ink-3);
}

.hero-product-rail span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.hero-product-rail small,
.hero-product-rail em {
  overflow: hidden;
  color: #73736d;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-product-rail strong {
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.image-fallback {
  display: grid;
  height: 100%;
  min-height: 320px;
  place-items: center;
  color: var(--ink-3);
}

/* .signature-strip replaced by .trust-bar — kept for backward compat */
.signature-strip {
  display: none;
}

.signature-strip div {
  display: grid;
  gap: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 18px clamp(10px, 2vw, 22px) 0;
  animation: fade-up 520ms ease both;
}

.signature-strip div:nth-child(1) {
  animation-delay: 120ms;
}

.signature-strip div:nth-child(2) {
  animation-delay: 190ms;
}

.signature-strip div:nth-child(3) {
  animation-delay: 260ms;
}

.signature-strip span {
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.72rem;
  font-weight: 850;
}

.signature-strip strong {
  font-size: 1rem;
}

.signature-strip small {
  color: rgba(255, 255, 255, 0.64);
  font-weight: 700;
}

.shop-section,
.lookbook-section,
.style-board,
.site-footer {
  padding: clamp(26px, 5vw, 68px) clamp(18px, 4vw, 56px);
}

.section-heading span,
.style-board > div:first-child span,
.admin-topbar span,
.order-card .order-id {
  color: var(--accent, var(--ink-4));
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}
/* Item names, totals, delivery values must stay normal case (not the eyebrow style). */
.order-item-name,
.order-total-row span,
.order-delivery-item dd,
.order-head .field span {
  text-transform: none;
}
/* Keep the status dropdown compact so it doesn't stretch the order header. */
.order-head .field {
  width: clamp(150px, 32%, 200px);
  flex: 0 0 auto;
}

/* ── Product badge slots — no overlap ──────────────────────────
   featured = top-left, discount = top-right, sold-out = centered ribbon. */
.discount-badge {
  left: auto !important;
  right: 10px !important;
  top: 10px !important;
}
.soldout-badge {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  padding: 6px 16px !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em;
}

.section-heading h2,
.style-board h2,
.resource-title h2,
.admin-panel h2,
.admin-topbar h1 {
  margin: 4px 0 0;
  color: var(--ink);
}

.section-heading h2,
.style-board h2 {
  font-size: 2.7rem;
}

.section-count {
  display: inline-flex;
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 0.9rem;
  font-weight: 800;
}

/* product-finder replaced by category-showcase */
.product-finder { display: none; }

.finder-copy {
  display: grid;
  gap: 8px;
}

.finder-copy span {
  color: var(--accent, var(--ink-4));
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.finder-copy h2 {
  max-width: 560px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 4vw, 4.6rem);
  line-height: 0.98;
  text-wrap: balance;
}

.finder-copy p {
  max-width: 520px;
  margin: 0;
  color: var(--ink-3);
  line-height: 1.55;
}

.finder-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  padding: clamp(14px, 2vw, 20px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(18px);
}

.finder-search {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 36px;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  padding: 0 10px 0 16px;
}

.finder-search input {
  width: 100%;
  border: 0;
  outline: 0;
  font-size: 1.02rem;
}

.finder-search button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink);
}

.finder-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-3);
  font-size: 0.88rem;
  font-weight: 800;
}

.finder-meta button {
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 850;
}

.finder-categories {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.finder-categories button {
  min-height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  padding: 0 14px;
  color: var(--ink-2);
  font-weight: 800;
}

.finder-categories button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.lookbook-section {
  background: #ffffff;
}

.lookbook-grid {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: 18px;
  margin-top: 24px;
}

.lookbook-tile {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 268px;
  overflow: hidden;
  align-content: end;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  padding: clamp(18px, 3vw, 30px);
  animation: fade-up 540ms ease both;
}

.lookbook-tile:first-child {
  grid-row: span 2;
  min-height: 556px;
}

.lookbook-tile:nth-child(2) {
  animation-delay: 90ms;
}

.lookbook-tile:nth-child(3) {
  animation-delay: 160ms;
}

.lookbook-tile::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 8, 0.02), rgba(8, 8, 8, 0.78));
  content: "";
}

.lookbook-tile img {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms ease;
}

.lookbook-tile:hover img {
  transform: scale(1.04);
}

.lookbook-tile span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.lookbook-tile h3 {
  max-width: 420px;
  margin: 6px 0;
  font-size: clamp(1.55rem, 3vw, 3.2rem);
  line-height: 1;
}

.lookbook-tile p {
  max-width: 480px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.55;
}

.shop-controls {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: 14px;
  align-items: center;
  margin: 24px 0;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: #fff;
  padding: 0 13px;
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
}

.category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.category-tabs button {
  min-height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: #fff;
  padding: 0 14px;
  color: var(--ink-2);
  font-weight: 750;
}

.category-tabs button.active {
  border-color: var(--primary, var(--ink));
  background: var(--primary, var(--ink));
  color: #fff;
}



.product-empty {
  display: grid;
  min-height: 300px;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  padding: 28px;
  color: var(--ink-3);
  text-align: center;
}

.product-empty h3 {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 1.4rem;
}

.product-empty p {
  max-width: 420px;
  margin: 4px 0 12px;
  line-height: 1.55;
}

















/* uniform grid — no alternating sizes */



















/* all cards use the same aspect ratio now */





/* featured-badge is now rendered as .featured-badge inside .product-image */



.product-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.product-cat {
  color: var(--accent, var(--gold));
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.product-name {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.product-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: 0.78rem;
  font-weight: 700;
}

.color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent, var(--gold));
  flex: 0 0 10px;
  border: 1px solid rgba(0,0,0,0.1);
}

.product-dim-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.product-dim-row span {
  display: inline-block;
  background: #f5f4f1;
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--ink-3);
  font-size: 0.72rem;
  font-weight: 750;
}

.product-code-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  border-radius: 4px;
  background: rgba(0,0,0,0.7);
  padding: 3px 8px;
  color: rgba(255,255,255,0.9);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
}

.search-box-lg {
  min-width: 260px;
  height: 44px;
}

.product-desc-plain {
  min-height: 48px;
  margin: 0;
  color: var(--ink-3);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Spec table — matches the product sheet layout */
.product-specs {
  display: grid;
  gap: 0;
  margin: 2px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.product-spec-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}

.product-spec-row:last-child {
  border-bottom: 0;
}

.product-specs dt {
  color: var(--ink-4);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding-top: 1px;
}

.product-specs dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
}

.price-on-request {
  display: inline-block;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid rgba(176, 141, 87, 0.2);
  padding: 3px 9px;
  color: var(--accent, var(--gold));
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.product-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary, var(--espresso));
}

.featured-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  padding: 5px 9px;
  color: var(--accent, var(--gold));
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.view-link {
  color: var(--ink-2);
  font-size: 0.86rem;
  font-weight: 750;
}









.style-board {
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) minmax(320px, 1.25fr);
  gap: clamp(20px, 4vw, 54px);
  align-items: start;
  background: #151515;
  color: #fff;
}

.style-board-copy {
  display: grid;
  gap: 20px;
}

.bag-browse-link {
  margin-top: 8px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.bag-browse-link:hover {
  background: rgba(255, 255, 255, 0.18);
}

.style-board p {
  color: rgba(255, 255, 255, 0.68);
}

.style-board h2,
.style-board .section-heading h2 {
  color: #fff;
}

.order-steps {
  display: grid;
  gap: 12px;
}

.order-step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.order-step-number {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.order-step-number strong {
  color: #fff;
  font-size: 0.9rem;
}

.order-step-text {
  display: grid;
  gap: 1px;
}

.order-step-text strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
}

.order-step-text small {
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.76rem;
  font-weight: 700;
}

.cart-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
}

.cart-items {
  display: grid;
  gap: 0;
}

.cart-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto 32px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.cart-line:first-child {
  padding-top: 4px;
}

.cart-line-image {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-3);
  flex: 0 0 auto;
}

.cart-line-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-image-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--ink-3);
}

.cart-line-info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cart-line-info strong {
  font-size: 0.92rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-line-info small {
  color: var(--ink-3);
  font-size: 0.83rem;
}

.cart-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}

.stepper-btn {
  display: inline-grid;
  width: 32px;
  height: 34px;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  transition: background 140ms ease;
}

.stepper-btn:hover {
  background: #ededeb;
}

.stepper-count {
  min-width: 28px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink);
}

.cart-remove-btn {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  transition: background 140ms ease, color 140ms ease;
}

.cart-remove-btn:hover {
  background: #f2eeee;
  color: var(--danger);
}

.checkout-cta {
  display: flex;
  justify-content: space-between;
  padding: 0 18px;
  font-size: 1rem;
}

.checkout-total {
  font-size: 0.9rem;
  opacity: 0.82;
  font-weight: 700;
}

.empty-cart,
.empty-state {
  display: grid;
  min-height: 220px;
  place-items: center;
  color: var(--ink-3);
  text-align: center;
  gap: 8px;
}

.empty-cart h3 {
  margin: 0;
  color: var(--ink-2);
  font-size: 1.1rem;
}

.empty-cart p {
  margin: 0;
  font-size: 0.9rem;
  max-width: 240px;
  line-height: 1.5;
}

.product-price-block {
  display: grid;
  gap: 4px;
}

.out-of-stock-badge {
  display: inline-block;
  border-radius: 4px;
  background: var(--surface-2);
  padding: 2px 7px;
  color: var(--ink-3);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}



.cart-total {
  border-top: 1px solid var(--line-2);
  padding-top: 14px;
  font-size: 1.1rem;
}

.payment-note {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  padding: 11px 12px;
  color: var(--ink-2);
  font-weight: 750;
}

.payment-note.compact {
  padding: 8px 10px;
  font-size: 0.9rem;
}

.site-footer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    var(--footer-surface);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(38px, 5vw, 64px) clamp(18px, 4vw, 56px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand {
  display: grid;
  gap: 16px;
  align-content: start;
}

.footer-brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-brand-lockup span {
  display: grid;
  gap: 2px;
}

.footer-brand-lockup strong {
  font-size: 1rem;
  color: #fff;
}

.footer-brand-lockup small {
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.76rem;
}

.footer-brand-lockup .brand-logo {
  max-width: 140px;
  height: 56px;
  background: transparent;
  padding: 0;
}

.footer-brand-lockup .brand-mark {
  background: rgba(255, 255, 255, 0.12);
}

.footer-desc {
  max-width: 300px;
  margin: 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.88rem;
  line-height: 1.65;
}

.footer-socials {
  display: flex;
  gap: 10px;
}

.footer-social-link {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.footer-social-link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.footer-col {
  display: grid;
  gap: 12px;
  align-content: start;
}

.footer-col h4 {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  font-weight: 700;
  transition: color 140ms ease;
}

.footer-col a:hover {
  color: #fff;
}

.footer-feature {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.84rem;
  line-height: 1.5;
}

.footer-feature svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.36);
}

.footer-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.88rem;
  font-weight: 700;
  transition: color 140ms ease;
}

.footer-contact-row:hover {
  color: #fff;
}

.footer-contact-row svg {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.4);
}

.footer-languages {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-self: start;
  margin-top: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
}

.footer-languages button {
  min-width: 38px;
  height: 32px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.76rem;
  font-weight: 850;
  transition: background 140ms ease, color 140ms ease;
}

.footer-languages button.active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px clamp(18px, 4vw, 56px);
  color: rgba(255, 255, 255, 0.34);
  font-size: 0.82rem;
}

.footer-bottom-links {
  display: flex;
  gap: 18px;
  color: rgba(255, 255, 255, 0.34);
  font-size: 0.82rem;
  font-weight: 750;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(17, 17, 17, 0.42);
  overflow-y: auto;
  padding: clamp(16px, 4vh, 38px) 18px;
}

.checkout-modal {
  position: relative;
  display: grid;
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  gap: 14px;
  overflow: auto;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  padding: 24px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  scrollbar-gutter: stable;
  animation: soft-scale 180ms ease both;
}

.checkout-modal h2,
.checkout-modal p {
  margin: 0;
}

.checkout-order-summary {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--card-muted) 0%, #f4f3f0 100%);
  padding: 14px 16px;
}

.checkout-summary-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--ink-2);
}

.checkout-summary-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line-2);
  padding-top: 8px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

.checkout-modal .payment-note {
  border-radius: 12px;
  background: var(--surface-2);
}

.checkout-modal .field {
  min-width: 0;
}

.checkout-modal .field input,
.checkout-modal .field textarea,
.checkout-modal .field select {
  min-height: 50px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  font-size: 0.98rem;
}

.checkout-modal .field textarea {
  min-height: 116px;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #f2f2ef;
  color: var(--ink);
  box-shadow: 0 8px 24px var(--line);
}

.admin-app {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  background: var(--surface);
}

.admin-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  gap: 22px;
  border-right: 1px solid var(--line);
  background: #fff;
  padding: 22px;
}

.admin-tabs {
  display: grid;
  gap: 8px;
}

.admin-tabs button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 0 12px;
  color: #4d4d4f;
  font-weight: 750;
  text-align: left;
}

.admin-tabs button.active {
  background: var(--surface-2);
  color: var(--primary, var(--ink));
}

.admin-main {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 28px;
}

.dashboard-stack {
  display: grid;
  gap: 16px;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.metric-card {
  display: grid;
  gap: 8px;
  justify-items: start;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  text-align: left;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.metric-card:hover,
.dashboard-list-row:hover {
  border-color: var(--line-3);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.metric-card span {
  color: var(--ink-2);
  font-weight: 800;
}

.metric-card strong {
  font-size: 2.1rem;
}

.metric-card small,
.muted-text {
  color: var(--ink-3);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 14px;
  align-items: start;       /* columns top-aligned, not stretched */
}
/* All three dashboard column headings share one baseline + height. */
.dashboard-grid > .admin-panel > .panel-heading {
  min-height: 28px;
  margin-bottom: 4px;
}
@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

.quick-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.quick-actions button,
.dashboard-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: #fff;
  padding: 0 12px;
  color: var(--ink);
  font-weight: 800;
  text-align: left;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.quick-actions button {
  justify-content: flex-start;
}

.dashboard-list {
  align-content: start;
}

.dashboard-list-row span {
  display: grid;
  gap: 2px;
}

.dashboard-list-row small {
  color: var(--ink-3);
  font-weight: 700;
}

.dashboard-list-row em {
  color: var(--ink-2);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-topbar,
.resource-title,
.panel-heading,
.row-actions,
.toggle-row,
.order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-topbar h1 {
  font-size: 2.4rem;
}

.editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
@media (max-width: 760px) {
  .editor-grid { grid-template-columns: 1fr; }
}

.admin-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  animation: fade-up 320ms ease both;
}

.panel-heading {
  justify-content: flex-start;
}

.panel-heading h2,
.resource-title h2,
.order-card h2 {
  font-size: 1.08rem;
}

.field {
  display: grid;
  gap: 7px;
}

.field span,
.toggle span {
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 800;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: #fff;
  padding: 9px 11px;
  color: var(--ink);
  outline: none;
}

.field textarea {
  min-height: 92px;
  resize: vertical;
}

.field input[type="color"] {
  padding: 4px;
}

.split-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.split-fields:has(.field:nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
}

.toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary, var(--ink));
}

.resource-panel {
  display: grid;
  gap: 16px;
}

.resource-title div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.resource-list {
  display: grid;
  gap: 14px;
}

.banner-studio {
  display: grid;
  gap: 16px;
}

.banner-studio-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.08fr) minmax(360px, 0.92fr);
  gap: 16px;
  align-items: start;
}

.banner-preview-panel,
.banner-edit-panel {
  align-content: start;
}

.banner-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.banner-preview-head span {
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: uppercase;
}

.banner-preview-head em {
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 850;
}

.banner-canvas {
  position: relative;
  isolation: isolate;
  min-height: 420px;
  overflow: hidden;
  border-radius: 8px;
  background: #e9e9e6;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.1);
}

.banner-canvas::before {
  position: absolute;
  z-index: 3;
  inset: -25% 72% -25% -35%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  content: "";
  pointer-events: none;
  animation: banner-sheen 5.2s ease-in-out infinite;
}

.banner-canvas.muted {
  opacity: 0.68;
}

.banner-canvas img,
.banner-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-canvas img {
  position: absolute;
  inset: 0;
  transition: transform 520ms ease;
}

.banner-canvas:hover img {
  transform: scale(1.035);
}

.banner-canvas-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 8, 8, 0.74), rgba(8, 8, 8, 0.25), rgba(8, 8, 8, 0.06));
}

.banner-canvas-fallback {
  display: grid;
  height: 100%;
  min-height: 420px;
  place-items: center;
  color: var(--ink-3);
}

.banner-preview-copy {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 5vw, 48px);
  bottom: clamp(20px, 5vw, 44px);
  display: grid;
  max-width: 520px;
  gap: 12px;
  color: #fff;
}

.banner-preview-copy small {
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.banner-preview-copy h3 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 0.98;
}

.banner-preview-copy p {
  max-width: 460px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
}

.banner-preview-copy span {
  width: fit-content;
  border-radius: 6px;
  background: #fff;
  padding: 10px 13px;
  color: var(--ink);
  font-weight: 850;
}

.banner-library {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.banner-library button {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 76px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  color: var(--ink);
  text-align: left;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.banner-library button:hover,
.banner-library button.active {
  border-color: rgba(29, 29, 31, 0.36);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
  transform: translateY(-1px);
}

.banner-thumb {
  display: grid;
  width: 64px;
  height: 56px;
  overflow: hidden;
  place-items: center;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--ink-3);
}

.banner-library strong,
.banner-library small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.banner-library strong {
  font-size: 0.88rem;
}

.banner-library small {
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 0.76rem;
  font-weight: 750;
}

.admin-list-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: 12px;
  align-items: center;
}

.product-admin-toolbar {
  grid-template-columns: minmax(220px, 340px) minmax(280px, 1fr) auto;
}

.admin-list-toolbar > span {
  justify-self: end;
  color: var(--ink-3);
  font-weight: 800;
}

.admin-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: #fff;
  padding: 0 12px;
}

.admin-search input {
  width: 100%;
  border: 0;
  outline: 0;
}

.admin-filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.admin-filter-row button {
  min-height: 36px;
  flex: 0 0 auto;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  padding: 0 13px;
  color: var(--ink-2);
  font-size: 0.86rem;
  font-weight: 800;
}

.admin-filter-row button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.status-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.status-tabs button {
  min-height: 38px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: #fff;
  padding: 0 12px;
  color: var(--ink-2);
  font-weight: 800;
  text-transform: capitalize;
}

.status-tabs button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.resource-row {
  grid-template-columns: 220px minmax(0, 1fr);
}

.product-admin-card {
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 250, 248, 0.96)),
    #fff;
  box-shadow: 0 18px 55px rgba(20, 18, 15, 0.06);
}

.resource-fields {
  display: grid;
  gap: 12px;
}

.product-editor-fields {
  gap: 14px;
}

.product-media-panel {
  display: grid;
  gap: 12px;
  align-content: start;
}

.product-media-main .admin-image-preview {
  min-height: 260px;
}

.admin-image-preview {
  display: grid;
  min-height: 220px;
  overflow: hidden;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--ink-3);
}

.admin-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-editor-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.product-title-stack {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.product-title-stack > span,
.section-kicker {
  color: var(--accent, var(--ink-4));
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-title-stack h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.35rem;
  letter-spacing: 0;
  line-height: 1.12;
}

.product-title-stack a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 800;
}

.product-title-stack a:hover {
  color: var(--ink);
}

.product-field-section {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
}

.product-field-section.compact {
  gap: 10px;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0.03em;
}

.product-toggle-row {
  align-items: center;
  justify-content: flex-start;
}

.gallery-manager {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.gallery-thumb-card {
  position: relative;
  min-height: 82px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-3);
}

.gallery-thumb-image,
.gallery-thumb-image img {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery-thumb-image {
  min-height: 82px;
}

.gallery-thumb-image img {
  object-fit: cover;
}

.gallery-thumb-card button {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--danger);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.gallery-empty {
  margin: 0;
  font-size: 0.86rem;
}

.row-actions {
  justify-content: flex-start;
}

.copy-field > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
}

.copy-field button {
  background: #f2f2ef;
  color: var(--primary, var(--ink));
}

.translation-fields {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.translation-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.translation-heading span,
.translation-language strong {
  color: var(--ink-2);
  font-size: 0.88rem;
  font-weight: 850;
}

.translation-heading small {
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 700;
}

.translation-language {
  display: grid;
  gap: 10px;
}

.translation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.translation-grid .field:has(textarea) {
  grid-column: 1 / -1;
}

.admin-advanced {
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
}

.admin-advanced summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 850;
  list-style: none;
}

.admin-advanced summary::-webkit-details-marker {
  display: none;
}

.admin-advanced summary::after {
  margin-left: 12px;
  color: var(--ink-3);
  content: "+";
  font-weight: 850;
}

.admin-advanced[open] summary::after {
  content: "-";
}

.admin-advanced > div {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}

.admin-advanced .translation-fields {
  border-top: 0;
  padding-top: 0;
}

.upload-field {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 2px 9px;
  min-height: 58px;
  overflow: hidden;
  border: 1px dashed var(--line-3);
  border-radius: 6px;
  background: var(--card-muted);
  padding: 9px 12px;
  color: var(--ink-2);
  font-weight: 800;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.upload-field svg {
  grid-row: 1 / span 2;
}

.upload-field span,
.upload-field small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-field small {
  color: var(--ink-3);
  font-size: 0.74rem;
  font-weight: 750;
}

.upload-field:not(.disabled):hover,
.upload-field.dragging {
  border-color: rgba(29, 29, 31, 0.42);
  background: var(--surface-2);
  transform: translateY(-1px);
}

.upload-field.dragging {
  border-style: solid;
  box-shadow: inset 0 0 0 1px var(--line-3);
}

.upload-field.disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.upload-field input {
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
}

.upload-field.disabled input {
  cursor: not-allowed;
}

.orders-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.orders-panel {
  display: grid;
  gap: 14px;
}

.order-head {
  align-items: start;
}

.order-head p,
.order-notes {
  margin: 4px 0 0;
  color: var(--ink-3);
}

.order-items {
  display: grid;
  gap: 9px;
  border-block: 1px solid var(--line-2);
  padding-block: 12px;
}

.success-note,
.error-note {
  border-radius: 6px;
  padding: 11px 13px;
  font-weight: 750;
}

.success-note {
  background: var(--surface-2);
  color: var(--ink);
}

.error-note {
  background: #f6eeee;
  color: var(--danger);
}

.screen-message {
  display: grid;
  min-height: 100vh;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}

.screen-message h1,
.screen-message p {
  margin: 0;
}

.screen-message p {
  max-width: 560px;
  color: var(--ink-3);
}

.login-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(245, 245, 243, 0.92)),
    var(--surface);
  padding: 24px;
}

.login-card {
  display: grid;
  width: min(420px, 100%);
  gap: 14px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.08);
  padding: 24px;
  backdrop-filter: blur(18px);
  animation: soft-scale 220ms ease both;
}

.login-card h1,
.login-card p {
  margin: 0;
}

.login-card h1 {
  font-size: 1.5rem;
  line-height: 1.15;
}

.login-card p {
  color: var(--ink-3);
  line-height: 1.55;
}

.login-form {
  display: grid;
  gap: 14px;
}

@media (min-width: 761px) and (max-width: 1040px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1040px) {
  .product-finder,
  .style-board,
  .shop-controls,
  .product-admin-toolbar,
  .product-admin-card,
  .admin-app,
  .editor-grid,
  .orders-grid,
  .dashboard-grid,
  .banner-studio-grid {
    grid-template-columns: 1fr;
  }

  .hero-section:not(.product-hero) .hero-copy,
  .product-hero .hero-copy {
    max-width: 100%;
  }

  .hero-product-rail {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 620px;
    margin-top: 24px;
  }

  .signature-strip,
  .lookbook-grid {
    grid-template-columns: 1fr;
  }

  .lookbook-tile:first-child {
    grid-row: auto;
    min-height: 420px;
  }

  .dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-sidebar {
    position: static;
    height: auto;
  }

  .admin-tabs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .banner-canvas,
  .banner-canvas-fallback {
    min-height: 340px;
  }

  .hero-copy h1 {
    font-size: clamp(3rem, 6.3vw, 3.5rem);
  }
}

@media (max-width: 760px) {
  .shop-header {
    top: 0;
    margin: 0;
    border-inline: 0;
    border-radius: 0;
    padding: 9px 12px;
  }

  .brand-lockup {
    flex: 1 1 auto;
    gap: 8px;
    overflow: hidden;
  }

  .brand-logo {
    max-width: 68px;
    height: 38px;
  }

  .brand-lockup strong {
    overflow: hidden;
    max-width: 86px;
    font-size: 0.92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand-lockup small {
    display: none;
  }

  .shop-nav-right {
    flex: 0 0 auto;
    gap: 6px;
  }

  .nav-cart-link,
  .nav-hamburger {
    width: 38px;
    height: 38px;
  }

  .shop-nav-center {
    display: none;
  }

  .nav-whatsapp span {
    display: none;
  }

  .nav-hamburger {
    display: grid;
  }

  .admin-topbar,
  .resource-title,
  .order-head,
  .admin-list-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions a,
  .hero-actions button {
    flex: 1 1 auto;
  }

  .language-switcher {
    align-self: flex-start;
    width: auto;
    flex: 0 0 auto;
  }

  .language-switcher button {
    flex: 0 0 auto;
  }

  .hero-section {
    min-height: auto;
    padding: 34px 18px;
  }

  .hero-media {
    min-height: 100%;
  }

  .hero-product-rail {
    max-width: none;
  }

  .hero-product-rail a {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .hero-product-rail img,
  .rail-fallback {
    width: 64px;
    height: 58px;
  }

  .signature-strip {
    gap: 0;
    padding: 0 18px 18px;
  }

  .lookbook-tile,
  .lookbook-tile:first-child {
    min-height: 360px;
  }

  .banner-canvas,
  .banner-canvas-fallback {
    min-height: 280px;
  }

  .resource-row,
  .split-fields,
  .split-fields:has(.field:nth-child(3)),
  .translation-grid,
  .admin-list-toolbar,
  .dashboard-metrics,
  .quick-actions,
  .banner-library {
    grid-template-columns: 1fr;
  }

  .admin-list-toolbar > span {
    justify-self: start;
  }

  .status-tabs {
    justify-content: flex-start;
  }

  .admin-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cart-line {
    grid-template-columns: 52px minmax(0, 1fr) auto 32px;
  }

  .cart-line-image {
    width: 52px;
    height: 52px;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .hero-copy h1 {
    font-size: 2.5rem;
  }

  .hero-copy p {
    font-size: 1rem;
  }

  .section-heading h2,
  .style-board h2,
  .admin-topbar h1 {
    font-size: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* ── Contact CTA strip ── */

.contact-strip {
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(135deg, #28211d 0%, #171616 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: clamp(28px, 4vw, 46px) clamp(18px, 4vw, 56px);
}

.contact-strip-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 4vw, 42px);
  max-width: 1480px;
  margin: 0 auto;
}

.contact-strip h2 {
  margin: 0 0 8px;
  font-size: clamp(1.65rem, 2.2vw, 2.45rem);
  letter-spacing: 0;
  line-height: 1.08;
  color: #fff;
}

.contact-strip p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  max-width: 620px;
  line-height: 1.6;
}

.contact-strip-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.contact-strip-btn {
  min-height: 48px;
  border-radius: 14px;
  padding-inline: 18px;
  white-space: nowrap;
}

.contact-strip .secondary-button {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.78);
  color: var(--ink);
}

.whatsapp-cta-btn {
  background: var(--whatsapp) !important;
}

.whatsapp-cta-btn:hover {
  background: var(--whatsapp-dark) !important;
}

.hero-wa-btn {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.12);
  color: #fff;
  backdrop-filter: blur(16px);
}

/* ── Catalogue page ── */

.catalogue-page {
  min-height: 60vh;
}











/* ── Category tabs row — used on catalogue page and product grid ── */










.catalogue-empty {
  margin: 40px clamp(18px, 4vw, 56px);
}

/* ═══════════════════════════════════════════════════════
   HOME PAGE — Reference design rebuild
═══════════════════════════════════════════════════════ */

/* 1. Hero */
.home-hero {
  position: relative;
  min-height: clamp(520px, 68vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #f5f2ed;
}

.home-hero-media {
  position: absolute;
  inset: 0;
}

.home-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.home-hero-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #444;
}

.home-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 15, 12, 0.72) 0%, rgba(18, 15, 12, 0.42) 34%, rgba(18, 15, 12, 0.08) 72%),
    linear-gradient(180deg, rgba(18, 15, 12, 0.08) 0%, rgba(18, 15, 12, 0.14) 100%);
}

.home-hero-body {
  position: relative;
  z-index: 2;
  padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 72px);
  max-width: 720px;
  display: grid;
  gap: 20px;
}

.home-hero-eyebrow {
  margin: 0;
  max-width: 620px;
  color: rgba(255,255,255,0.78);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-hero-title {
  margin: 0;
  color: #fff;
  font-size: clamp(3.2rem, 6.1vw, 6.4rem);
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

.home-hero-subtitle {
  max-width: 610px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  line-height: 1.62;
}

.home-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 52px;
  border: 1px solid rgba(255,255,255,0.78);
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  padding: 0 30px;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.home-hero-cta:hover {
  border-color: var(--accent, var(--gold));
  background: var(--accent, var(--gold));
  color: #fff;
  transform: translateY(-1px);
}

/* 2. Trust icons */
.home-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fbfaf7;
  border-block: 1px solid var(--line);
}

.home-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: clamp(18px, 3vw, 28px) 16px;
  text-align: center;
  border-right: 1px solid var(--line);
  transition: background 180ms ease;
}

.home-trust-item:last-child {
  border-right: 0;
}

.home-trust-item svg {
  color: var(--accent, var(--gold));
  opacity: 0.9;
}

.home-trust-item strong {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--ink);
}

.home-trust-item small {
  font-size: 0.74rem;
  color: var(--ink-3);
  line-height: 1.4;
}

/* 3 & 7. Product sections */
.home-section {
  padding: clamp(36px, 5vw, 60px) clamp(20px, 5vw, 72px);
  background: #fff;
}



.home-section + .home-section {
  border-top: 1px solid var(--line);
}

.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.home-section-head h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  letter-spacing: -0.02em;
}

.home-section-link {
  color: var(--accent, var(--gold));
  font-size: 0.88rem;
  font-weight: 750;
  white-space: nowrap;
}

.home-section-link:hover {
  text-decoration: underline;
}



/* 4. Dark CTA banner */
.home-dark-banner {
  background: var(--primary, var(--espresso));
  padding: clamp(28px, 4vw, 48px) clamp(20px, 5vw, 72px);
}

.home-dark-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

.home-dark-banner h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
}

.home-dark-banner p {
  margin: 0;
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
}

.home-dark-banner-btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 6px;
  padding: 0 24px;
  color: #fff;
  font-weight: 750;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background 180ms ease, border-color 180ms ease;
}

.home-dark-banner-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
}

/* 5. Category pills */






/* 6. Feature box */
.home-feature-box {
  background: var(--card-muted);
  padding: clamp(36px, 5vw, 64px) clamp(20px, 5vw, 72px);
}

.home-feature-box-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.home-feature-text {
  display: grid;
  gap: 16px;
}

.home-feature-text h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.home-feature-text p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 440px;
}

.home-feature-stats {
  display: flex;
  gap: 28px;
  margin-top: 4px;
}

.home-feature-stats > div {
  display: grid;
  gap: 2px;
}

.home-feature-stats strong {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary, var(--espresso));
}

.home-feature-stats small {
  font-size: 0.76rem;
  color: var(--ink-3);
  font-weight: 700;
}

.home-feature-img {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #e8e6e2;
}

.home-feature-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-feature-img-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--ink-4);
}

/* ── Home page legacy ── */


.home-view-all {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding-bottom: 8px;
}

/* Responsive home */
@media (max-width: 900px) {
  .home-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-trust-item:nth-child(2) { border-right: 0; }
  .home-trust-item:nth-child(1),
  .home-trust-item:nth-child(2) {
    border-bottom: 1px solid var(--line);
  }
  .home-feature-box-inner {
    grid-template-columns: 1fr;
  }
  .home-feature-img {
    max-height: 280px;
  }
}

@media (max-width: 600px) {
  .home-hero {
    min-height: 430px;
    align-items: flex-end;
  }

  .home-hero-media img {
    object-position: center center;
  }

  .home-hero-scrim {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.6) 42%, rgba(0,0,0,0.84) 100%),
      linear-gradient(90deg, rgba(0,0,0,0.44) 0%, rgba(0,0,0,0.14) 72%);
  }

  .home-hero-body {
    width: 100%;
    max-width: none;
    gap: 12px;
    padding: 120px 20px 34px;
  }

  .home-hero-eyebrow {
    max-width: 300px;
    font-size: 0.72rem;
    line-height: 1.45;
  }

  .home-hero-title {
    max-width: 330px;
    font-size: 2.45rem;
    line-height: 1.04;
  }

  .home-hero-subtitle {
    max-width: 315px;
    font-size: 0.96rem;
    line-height: 1.45;
  }

  .home-hero-cta {
    min-height: 48px;
    padding: 0 22px;
  }

  .home-trust {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 390px) {
  .brand-lockup strong {
    max-width: 72px;
  }

  .language-switcher button {
    min-width: 34px;
    padding-inline: 8px;
  }

  .home-hero-title {
    max-width: 300px;
    font-size: 2.18rem;
  }

  .home-hero-subtitle {
    max-width: 290px;
  }
}

/* ── Cart FAB ── */
.cart-fab {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: var(--primary, var(--espresso));
  padding: 13px 22px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 750;
  box-shadow: 0 8px 28px rgba(0,0,0,0.22);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
  border: 0;
}

.cart-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(0,0,0,0.28);
}

/* ── Product page qty stepper ── */
.pdp-qty-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pdp-qty-label {
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--ink-2);
  min-width: 60px;
}

.pdp-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line-3);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.pdp-stepper-btn {
  width: 40px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  transition: background 140ms;
}

.pdp-stepper-btn:hover {
  background: var(--surface-2);
}

.pdp-qty-value {
  min-width: 44px;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  border-left: 1.5px solid var(--line-2);
  border-right: 1.5px solid var(--line-2);
  line-height: 44px;
}

.pdp-in-cart {
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--accent, var(--gold));
  background: #faf7f0;
  border-radius: 4px;
  padding: 3px 9px;
}

.pdp-order-now-btn {
  flex: 1 1 auto;
  min-height: 52px;
  border: 1.5px solid var(--primary, var(--espresso));
  border-radius: 6px;
  background: transparent;
  color: var(--primary, var(--espresso));
  font-size: 0.96rem;
  font-weight: 750;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.pdp-order-now-btn:hover {
  background: var(--primary, var(--espresso));
  color: #fff;
}

/* nav active */
.shop-nav-center a.nav-active {
  background: var(--surface-2);
  color: var(--ink);
}

/* ── Cart drawer ── */

@keyframes drawer-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cart-drawer {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  width: min(380px, calc(100vw - 32px));
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(0,0,0,0.16);
  animation: drawer-in 240ms ease both;
  overflow: hidden;
}

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--primary, var(--espresso));
  color: #fff;
  font-size: 0.88rem;
  font-weight: 750;
}

.cart-success {
  color: #7defa7;
  font-size: 0.78rem;
}

.cart-drawer-items {
  max-height: 280px;
  overflow-y: auto;
  padding: 8px 12px;
}

.cart-drawer-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
═══════════════════════════════════════════════════════ */

.pdp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px clamp(18px, 4vw, 56px);
  color: var(--ink-3);
  font-size: 0.82rem;
}

.pdp-breadcrumb a {
  color: var(--ink-3);
  transition: color 140ms ease;
}

.pdp-breadcrumb a:hover {
  color: var(--ink);
}

.pdp-breadcrumb span:last-child {
  color: var(--ink);
  font-weight: 700;
}

.pdp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding: 0 clamp(18px, 4vw, 56px) clamp(40px, 6vw, 72px);
  align-items: start;
}

/* ── Gallery ── */

.pdp-gallery {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 80px;
}

.pdp-main-image {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface-3);
  cursor: zoom-in;
}

.pdp-main-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
}

.pdp-main-image:hover img {
  transform: scale(1.03);
}

.pdp-image-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--ink-4);
}

.pdp-zoom-hint {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.88);
  padding: 6px 11px;
  color: var(--ink-2);
  font-size: 0.76rem;
  font-weight: 800;
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.pdp-thumbnails {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.pdp-thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 6px;
  background: var(--surface-3);
  transition: border-color 140ms ease;
  padding: 0;
}

.pdp-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-thumb.active {
  border-color: var(--primary, var(--espresso));
}

/* ── Info panel ── */

.pdp-info {
  display: grid;
  gap: 20px;
  align-content: start;
  padding-top: 8px;
}

.pdp-category {
  color: var(--accent, var(--gold));
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pdp-title {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.pdp-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary, var(--espresso));
}

.pdp-price-request {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pdp-price-request span {
  display: inline-block;
  border: 1px solid rgba(176, 141, 87, 0.28);
  border-radius: 5px;
  background: #faf7f2;
  padding: 5px 12px;
  color: var(--accent, var(--gold));
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: fit-content;
}

.pdp-price-request small {
  color: var(--ink-3);
  font-size: 0.84rem;
}

/* ── Full spec table ── */

.pdp-specs h3 {
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pdp-spec-table {
  display: grid;
  gap: 0;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
}

.pdp-spec-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.pdp-spec-row:last-child {
  border-bottom: 0;
}

.pdp-spec-row dt {
  padding: 11px 14px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-right: 1px solid var(--line);
}

.pdp-spec-row dd {
  margin: 0;
  padding: 11px 14px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
}

.pdp-description {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.65;
}

/* ── CTA buttons ── */

.pdp-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.pdp-enquire-btn {
  flex: 1 1 auto;
  min-height: 52px;
  font-size: 1rem;
}

.pdp-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  border: 0;
  border-radius: 6px;
  background: var(--whatsapp);
  padding: 0 20px;
  color: #fff;
  font-weight: 750;
  font-size: 0.96rem;
  transition: background 180ms ease, transform 180ms ease;
}

.pdp-whatsapp-btn:hover {
  background: var(--whatsapp-dark);
  transform: translateY(-1px);
}

.pdp-trust {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.pdp-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-3);
  font-size: 0.84rem;
  font-weight: 700;
}

.pdp-trust-item svg {
  color: var(--accent, var(--gold));
}

/* ── Related products ── */

.pdp-related {
  padding: clamp(32px, 5vw, 64px) clamp(18px, 4vw, 56px);
  background: var(--card-muted);
  border-top: 1px solid var(--line);
}

.pdp-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.pdp-related-card {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.pdp-related-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
}

.pdp-related-image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface-3);
  display: grid;
  place-items: center;
  color: var(--ink-4);
}

.pdp-related-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
}

.pdp-related-card:hover .pdp-related-image img {
  transform: scale(1.04);
}

.pdp-related-info {
  display: grid;
  gap: 4px;
  padding: 12px 14px 14px;
}

.pdp-related-info small {
  color: var(--accent, var(--gold));
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pdp-related-info strong {
  font-size: 0.9rem;
  line-height: 1.2;
}

.pdp-related-info span {
  color: var(--ink-3);
  font-size: 0.8rem;
}

/* ── Lightbox ── */

@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

.lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: rgba(8, 8, 8, 0.92);
  padding: 20px;
  backdrop-filter: blur(6px);
}

.lightbox-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: min(1100px, 100%);
  width: 100%;
  animation: lightbox-in 200ms ease both;
}

.lightbox-img {
  display: block;
  max-height: calc(100vh - 120px);
  max-width: 100%;
  width: auto;
  margin: 0 auto;
  border-radius: 6px;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: -48px;
  right: 0;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: transparent;
  color: #fff;
  transition: background 140ms ease;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.lightbox-nav {
  flex: 0 0 auto;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  transition: background 140ms ease;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.14);
}

.lightbox-dots {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.lightbox-dots button {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  padding: 0;
  transition: background 140ms ease;
}

.lightbox-dots button.active {
  background: #fff;
}

/* ── Sticky CTA bar ── */

@keyframes slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.pdp-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-top: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08);
  animation: slide-up 240ms ease both;
}

.pdp-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px clamp(18px, 4vw, 48px);
}

.pdp-sticky-product {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pdp-sticky-product img {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--surface-3);
}

.pdp-sticky-product span {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdp-sticky-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.pdp-sticky-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  background: var(--whatsapp);
  padding: 0 16px;
  color: #fff;
  font-weight: 750;
  font-size: 0.9rem;
  transition: background 180ms ease;
}

.pdp-sticky-whatsapp:hover {
  background: var(--whatsapp-dark);
}

/* ── WhatsApp FAB ── */

.whatsapp-fab {
  position: fixed;
  right: 24px;
  bottom: 86px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: var(--whatsapp);
  padding: 12px 20px 12px 16px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 750;
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.42);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.whatsapp-fab:hover {
  background: var(--whatsapp-dark);
  box-shadow: 0 12px 34px rgba(37, 211, 102, 0.52);
  transform: translateY(-2px);
}

/* Push FAB up when sticky bar is visible (product page) */
.pdp-sticky-bar ~ .whatsapp-fab {
  bottom: 106px;
}

/* ── Responsive PDP ── */

@media (max-width: 900px) {
  .pdp-grid {
    grid-template-columns: 1fr;
  }

  .pdp-gallery {
    position: static;
  }

  .pdp-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pdp-spec-row {
    grid-template-columns: 110px 1fr;
  }
}

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

  .pdp-actions {
    flex-direction: column;
  }

  .pdp-whatsapp-btn {
    justify-content: center;
  }

  .pdp-sticky-inner {
    padding: 10px 16px;
  }

  .pdp-sticky-product span {
    display: none;
  }

  .lightbox-nav {
    display: none;
  }

  .whatsapp-fab span {
    display: none;
  }

  .whatsapp-fab {
    padding: 14px;
    border-radius: 50%;
  }
}

/* end custom CSS */

/* ================================================================
   GRID OVERRIDES — these MUST come last and override everything
   ================================================================ */

/* ── CANONICAL GRID / CARD / ENQUIRE (single source of truth) ── */
/* Casa Decor — appended after Tailwind build, never purged */

/* ── GRID: 4 columns, always ─────────────────────────────── */
.home-products-grid,
.home-featured-grid,
.catalogue-grid,
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
}
@media (max-width: 1100px) {
  .home-products-grid,
  .home-featured-grid,
  .catalogue-grid,
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .home-products-grid,
  .home-featured-grid,
  .catalogue-grid,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* ── PRODUCT CARD ─────────────────────────────────────────── */
.product-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 10px !important;
  background: #fff !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}
.product-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.08) !important;
}
.product-image {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 200px !important;
  background: #eeede9 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}
.product-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 400ms ease !important;
}
.product-card:hover .product-image img {
  transform: scale(1.04) !important;
}
.product-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 12px 14px 14px !important;
  flex: 1 !important;
}
.product-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 8px !important;
}

/* ── ENQUIRE BUTTON ───────────────────────────────────────── */
.enquire-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border: 1.5px solid var(--line-3) !important;
  border-radius: 6px !important;
  background: transparent !important;
  padding: 7px 14px !important;
  color: var(--ink) !important;
  font-size: .82rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  transition: background 140ms, color 140ms, border-color 140ms !important;
}
.enquire-btn:hover {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}

/* ── PRODUCT IMAGE OVERLAY ────────────────────────────────── */
.product-image-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.35) !important;
  opacity: 0 !important;
  transition: opacity 200ms !important;
  text-decoration: none !important;
}
.product-card:hover .product-image-overlay {
  opacity: 1 !important;
}
.product-image-overlay span {
  border: 1px solid rgba(255,255,255,.7) !important;
  border-radius: 4px !important;
  padding: 7px 18px !important;
  color: #fff !important;
  font-size: .78rem !important;
  font-weight: 750 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* ── CATEGORY TABS ROW ────────────────────────────────────── */
.category-tabs-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding-bottom: 16px !important;
}
.category-tabs-row button {
  min-height: 36px !important;
  flex-shrink: 0 !important;
  border: 1.5px solid var(--line-2) !important;
  border-radius: 999px !important;
  background: #fff !important;
  padding: 0 16px !important;
  color: var(--ink-2) !important;
  font-size: .84rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.category-tabs-row button.active {
  background: var(--espresso) !important;
  border-color: var(--espresso) !important;
  color: #fff !important;
}
.results-count {
  margin-left: auto !important;
  color: var(--ink-3) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* ── CATALOGUE PAGE ───────────────────────────────────────── */
.catalogue-hero {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  padding: 32px 4vw 20px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
}
.catalogue-hero h1 {
  margin: 0 0 4px !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
}
.catalogue-hero p { margin: 0 !important; color: var(--ink-3) !important; }
.catalogue-filters {
  padding: 16px 4vw 0 !important;
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
}
.catalogue-grid {
  padding: 20px 4vw 60px !important;
}
.search-box-xl {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: min(320px,100%) !important;
  height: 46px !important;
  border: 1.5px solid var(--line-2) !important;
  border-radius: 8px !important;
  background: #fff !important;
  padding: 0 14px !important;
}
.search-box-xl input {
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  font-size: .92rem !important;
  background: transparent !important;
}
.search-box-xl button {
  border: 0 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  cursor: pointer !important;
}

/* ════════════════════════════════════════════════════════════════
   PREMIUM MOTION & POLISH  (Apple-style, tasteful)
   Appended last. Respects prefers-reduced-motion at the bottom.
   ════════════════════════════════════════════════════════════════ */

/* ── Scroll reveal: elements fade + rise as they enter the viewport ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal.reveal-left  { transform: translateX(-32px); }
.reveal.reveal-right { transform: translateX(32px); }
.reveal.reveal-left.is-visible,
.reveal.reveal-right.is-visible { transform: none; }

/* ── Hero: cinematic slow zoom on the background + staggered text rise ── */
.home-hero-media img {
  animation: heroKenBurns 14s ease-out forwards;
  transform-origin: center;
}
@keyframes heroKenBurns {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

.hero-rise {
  opacity: 0;
  transform: translateY(20px);
  animation: heroRise 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes heroRise {
  to { opacity: 1; transform: none; }
}

/* CTA gets a subtle shine + lift; arrow nudges on hover */
.home-hero-cta {
  position: relative;
  overflow: hidden;
}
.home-hero-cta::after {
  content: "→";
  display: inline-block;
  margin-left: 8px;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.home-hero-cta:hover::after {
  transform: translateX(4px);
}
.home-hero-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg);
  transition: left 650ms ease;
}
.home-hero-cta:hover::before {
  left: 140%;
}

/* ── Trust bar: icon lifts gently, accent glows ── */
.home-trust-item {
  transition: background 240ms ease;
}
.home-trust-item svg {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.home-trust-item:hover {
  background: var(--surface);
}
.home-trust-item:hover svg {
  transform: translateY(-3px) scale(1.08);
}

/* ── Product cards: deeper, softer Apple-style hover lift ── */
.product-card {
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 320ms ease !important;
}
.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 44px -12px rgba(20, 18, 15, 0.22) !important;
  border-color: rgba(29,29,31,0.04) !important;
}
.product-image img {
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.product-card:hover .product-image img {
  transform: scale(1.06) !important;
}
/* Name shifts to accent on hover for a refined touch */
.product-name {
  transition: color 220ms ease;
}
.product-card:hover .product-name {
  color: var(--accent, var(--gold));
}

/* ── Enquire / add-to-cart button micro-interaction ── */
.enquire-btn {
  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.enquire-btn:hover {
  transform: translateY(-1px) !important;
}
.enquire-btn:active {
  transform: translateY(0) scale(0.97) !important;
}

/* ── Category pills: lift on hover ── */

/* ── Feature image: slow zoom on hover ── */
.home-feature-img img {
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.home-feature-img:hover img {
  transform: scale(1.05);
}

/* ── Section headings: thin animated accent underline ── */
.home-section-head h2 {
  position: relative;
  padding-bottom: 10px;
}
.home-section-head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--accent, var(--gold));
  transition: width 720ms cubic-bezier(0.16, 1, 0.3, 1) 200ms;
}
.reveal.is-visible .home-section-head h2::after,
.home-section-head.reveal.is-visible h2::after {
  width: 48px;
}

/* ── Dark banner button shine ── */
.home-dark-banner-btn {
  transition:
    background 200ms ease,
    border-color 200ms ease,
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.home-dark-banner-btn:hover {
  transform: translateY(-2px);
}

/* ── Respect users who prefer no motion: disable all of the above ── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.reveal-left,
  .reveal.reveal-right,
  .hero-rise {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .home-hero-media img { animation: none !important; }
  .product-card:hover,
  .product-card:hover .product-image img,
  .home-feature-img:hover img,
  .enquire-btn:hover,
  .home-trust-item:hover svg,
  .home-dark-banner-btn:hover {
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   NAVBAR DROPDOWN  (Products ▾)
   ════════════════════════════════════════════════════════════════ */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-dropdown-caret {
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown:focus-within .nav-dropdown-caret {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px;
  display: grid;
  gap: 2px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 44px -12px rgba(20, 18, 15, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1), visibility 200ms;
  z-index: 40;
}
/* small hover bridge so the menu doesn't close in the gap */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--ink-2);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease, padding-left 160ms ease;
}
.nav-dropdown-menu a:hover {
  background: #f6f5f1;
  color: var(--accent, var(--gold));
  padding-left: 16px;
}
.nav-dropdown-all {
  font-weight: 800 !important;
  color: var(--ink) !important;
}
.nav-dropdown-divider {
  height: 1px;
  margin: 4px 2px;
  background: var(--line);
}

/* Mobile nav: Products group toggle + sublist */
.mobile-nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
}
.mobile-nav-group-toggle svg {
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--ink-4);
}
.mobile-nav-group-toggle svg.is-open {
  transform: rotate(180deg);
}
.mobile-nav-sublist {
  display: grid;
  gap: 2px;
  margin: 4px 0 4px 4px;
  padding-left: 12px;
  border-left: 2px solid var(--line-2);
  animation: subOpen 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes subOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.mobile-nav-sublist a {
  font-size: 0.92rem !important;
  color: var(--ink-2) !important;
  font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════════════════
   SHARED PAGE PRIMITIVES  (About / Contact)
   ════════════════════════════════════════════════════════════════ */
.page {
  background: #fff;
}
.page-hero {
  background: linear-gradient(180deg, var(--surface) 0%, #fff 100%);
  border-bottom: 1px solid var(--line);
  padding: clamp(48px, 8vw, 110px) clamp(20px, 5vw, 72px) clamp(40px, 6vw, 80px);
}
.page-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: grid;
  gap: 16px;
}
.page-eyebrow {
  margin: 0;
  color: var(--accent, var(--gold));
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.page-title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.page-lead {
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.6;
  max-width: 620px;
  justify-self: center;
}
.page-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 7px;
  background: var(--primary, var(--espresso));
  padding: 0 28px;
  color: #fff;
  font-weight: 800;
  font-size: 0.92rem;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms ease;
}
.page-btn-primary:hover {
  transform: translateY(-2px);
  background: #1d1813;
}
.page-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 7px;
  border: 1.5px solid var(--line-3);
  padding: 0 26px;
  color: var(--ink);
  font-weight: 800;
  font-size: 0.92rem;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease, background 200ms ease;
}
.page-btn-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
  background: var(--surface);
}

/* ── About: story ── */
.about-story {
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 72px);
}
.about-story-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.about-story-text { display: grid; gap: 16px; }
.about-story-text .overline {
  color: var(--accent, var(--gold));
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.about-story-text p {
  margin: 0;
  color: #444448;
  font-size: 1.04rem;
  line-height: 1.75;
}
.about-stats {
  display: flex;
  gap: 32px;
  margin-top: 8px;
}
.about-stats strong {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--primary, var(--espresso));
}
.about-stats small { color: var(--ink-3); font-size: 0.78rem; font-weight: 700; }
.about-story-img {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #e8e6e2;
}
.about-story-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-story-img-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ink-4); }

.about-section-title {
  margin: 0 0 28px;
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ── About: offerings ── */
.about-offerings {
  background: var(--surface);
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 72px);
  border-top: 1px solid var(--line);
}
.about-offerings-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.about-offering-card {
  display: grid;
  gap: 8px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms ease, border-color 280ms ease;
}
.about-offering-card svg { color: var(--accent, var(--gold)); }
.about-offering-card strong { font-size: 1.02rem; }
.about-offering-link { color: var(--accent, var(--gold)); font-size: 0.82rem; font-weight: 800; }
.about-offering-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px -14px rgba(20, 18, 15, 0.2);
  border-color: rgba(29, 29, 31, 0.04);
}

/* ── About: why ── */
.about-why {
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 72px);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.about-why-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.about-why-card {
  display: grid;
  gap: 10px;
  align-content: start;
  height: 100%;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: transform 260ms cubic-bezier(0.16,1,0.3,1), box-shadow 260ms ease;
}
.about-why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px -14px rgba(20,18,15,0.18);
}
.about-why-icon {
  display: inline-grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: #f3efe7;
  color: var(--accent, var(--gold));
}
.about-why-card strong { font-size: 1.04rem; }
.about-why-card p { margin: 0; color: var(--ink-2); line-height: 1.6; font-size: 0.92rem; }

/* ── About: CTA ── */
.about-cta {
  background: var(--primary, var(--espresso));
  padding: clamp(36px, 5vw, 64px) clamp(20px, 5vw, 72px);
}
.about-cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.about-cta-inner h2 { margin: 0 0 6px; color: #fff; font-size: clamp(1.4rem, 2.5vw, 2rem); }
.about-cta-inner p { margin: 0; color: rgba(255,255,255,0.6); }
.about-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.about-cta .page-btn-primary { background: #fff; color: var(--ink); }
.about-cta .page-btn-primary:hover { background: #f0ede6; }
.about-cta .page-btn-ghost { border-color: rgba(255,255,255,0.4); color: #fff; }
.about-cta .page-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

/* ── Contact ── */
.contact-cards-section {
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 72px) clamp(48px, 7vw, 90px);
}
.contact-cards {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  justify-content: center;
}
/* When only 2 cards exist, keep them centered and not stretched too wide. */
.contact-cards:has(.contact-card:nth-child(2):last-child) {
  max-width: 680px;
}
.contact-cards:has(.contact-card:nth-child(1):last-child) {
  max-width: 380px;
}
.contact-card {
  display: grid;
  gap: 8px;
  padding: 26px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms ease, border-color 280ms ease;
}
.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px -14px rgba(20, 18, 15, 0.2);
}
.contact-card-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: #f3efe7;
  color: var(--accent, var(--gold));
}
.contact-card strong { font-size: 1.04rem; }
.contact-card-value { color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; word-break: break-word; }
.contact-card-accent {
  background: var(--primary, var(--espresso));
  border-color: var(--primary, var(--espresso));
}
.contact-card-accent strong,
.contact-card-accent .contact-card-value { color: #fff; }
.contact-card-accent .contact-card-value { color: rgba(255,255,255,0.7); }
.contact-card-accent .contact-card-icon { background: rgba(255,255,255,0.14); color: #fff; }

.contact-meta {
  max-width: 980px;
  margin: 28px auto 0;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
}
.contact-meta-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.contact-meta-item svg { color: var(--accent, var(--gold)); flex-shrink: 0; }
.contact-meta-item strong { display: block; font-size: 0.92rem; }
.contact-meta-item span { color: var(--ink-3); font-size: 0.86rem; }

.contact-browse {
  text-align: center;
  margin-top: 36px;
}

/* ── Page responsive ── */
@media (max-width: 900px) {
  .about-story-inner { grid-template-columns: 1fr; }
  .about-story-img { max-height: 320px; }
  .about-offerings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-cards { grid-template-columns: 1fr; max-width: 480px; }
  .about-cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .about-offerings-grid { grid-template-columns: 1fr; }
  .about-why-grid { grid-template-columns: 1fr; }
  .about-stats { gap: 22px; }
}

/* Reduced motion for new components */
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-menu,
  .mobile-nav-sublist,
  .nav-dropdown-caret,
  .mobile-nav-group-toggle svg {
    transition: none !important;
    animation: none !important;
  }
  .about-offering-card:hover,
  .contact-card:hover,
  .page-btn-primary:hover,
  .page-btn-ghost:hover { transform: none !important; }
}

/* ── Admin: product share bar (Facebook / copy link) ── */
.product-share-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding: 10px 12px;
  background: #f6f5f1;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.product-share-bar--draft {
  color: var(--ink-3);
  font-size: 0.84rem;
}
.product-share-bar--draft svg { color: var(--ink-4); flex-shrink: 0; }
.product-share-url {
  flex: 1;
  min-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
}
.product-share-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.product-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-3);
  border-radius: 6px;
  background: #fff;
  padding: 7px 12px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, transform 160ms ease;
}
.product-share-btn:hover { background: #f0ede6; transform: translateY(-1px); }
.product-share-btn--fb {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff;
}
.product-share-btn--fb:hover { background: #1567d8; border-color: #1567d8; }

@media (prefers-reduced-motion: reduce) {
  .product-share-btn:hover { transform: none !important; }
}

/* ── Admin: friendly field hints ── */
.field-hint {
  color: var(--ink-4);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.45;
  margin-top: -1px;
}

/* ── Admin: save confirmation toast (more prominent + animated) ── */
.success-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ok-soft);
  border: 1px solid #b6e2c8;
  color: var(--ok);
  border-radius: 8px;
  padding: 11px 15px;
  font-weight: 750;
  box-shadow: 0 8px 24px -10px rgba(28, 122, 71, 0.4);
  animation: noteIn 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.success-note svg { flex-shrink: 0; }
.error-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fdecea;
  border: 1px solid #f5c2bd;
  color: var(--danger);
  border-radius: 8px;
  padding: 11px 15px;
  font-weight: 750;
  animation: noteIn 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes noteIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .success-note, .error-note { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   ADMIN DESIGN SYSTEM — clean & calm
   ════════════════════════════════════════════════════════════════ */

/* Shared status badges (orders + products) */
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-transform: capitalize;
}
.badge-on     { background: var(--ok-soft); color: var(--ok); }
.badge-off    { background: #f1f0ee; color: #7a756c; }
.badge-feature{ background: var(--gold-soft); color: var(--gold-ink); }
.badge-warn   { background: var(--gold-soft); color: #b45f17; }

.resource-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}

/* ── Orders ── */
.order-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20, 18, 15, 0.04);
}
.order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.order-head-info { display: grid; gap: 3px; }
.order-id {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent, var(--ink-4));
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.order-head-info h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.order-email {
  color: var(--ink-3);
  font-size: 0.88rem;
}
.order-email:hover { color: var(--accent, var(--gold)); text-decoration: underline; }

.order-created {
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 750;
}

/* Status badge inside the order id line */
.order-status-badge {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: capitalize;
}
.status-new       { background: #e6f0fb; color: #1f5fa8; }
.status-confirmed { background: var(--gold-soft); color: var(--gold-ink); }
.status-fulfilled { background: var(--ok-soft); color: var(--ok); }
.status-cancelled { background: #f7e9e7; color: var(--danger); }

.order-items {
  display: grid;
  gap: 10px;
  border-block: 1px solid var(--line);
  padding-block: 14px;
}

.order-admin-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
  font-size: 0.82rem;
  font-weight: 750;
}

.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-item-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;            /* fixes the glued name+price */
}
.order-item-name {
  color: var(--ink-2);
  font-size: 0.92rem;
  font-weight: 700;
}
.order-item-qty {
  color: var(--accent, var(--gold));
  font-weight: 850;
}
.order-item-price {
  flex-shrink: 0;
  font-size: 0.95rem;
  white-space: nowrap;
}
.order-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.05rem;
}
.order-total-row strong { font-size: 1.2rem; }

/* Labeled delivery details (replaces the raw "075 / sadasd / asd" line) */
.order-delivery {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.order-delivery-title {
  margin: 0 0 10px;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.order-delivery-list { margin: 0; display: grid; gap: 9px; }
.order-delivery-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: start;
}
.order-delivery-item dt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-3);
  font-size: 0.82rem;
  font-weight: 750;
}
.order-delivery-item dt svg { color: var(--accent, var(--gold)); flex-shrink: 0; }
.order-delivery-item dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 650;
  word-break: break-word;
}
.order-delivery-item dd a:hover { color: var(--accent, var(--gold)); text-decoration: underline; }

@media (max-width: 560px) {
  .order-delivery-item { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Printable invoice / fatura ── */
.invoice-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: start center;
  overflow-y: auto;
  background: rgba(17, 17, 17, 0.54);
  padding: clamp(18px, 4vh, 42px) 18px;
}

.invoice-sheet {
  display: grid;
  width: min(920px, 100%);
  gap: 12px;
}

.invoice-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.invoice-paper {
  display: grid;
  gap: 22px;
  min-height: 1120px;
  border-radius: 10px;
  background: #fff;
  padding: clamp(24px, 5vw, 54px);
  color: var(--ink);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
}

.invoice-header,
.invoice-status-line,
.invoice-total,
.invoice-footer-note {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.invoice-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.invoice-brand img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.invoice-brand div,
.invoice-title-block {
  display: grid;
  gap: 4px;
}

.invoice-brand strong {
  font-size: 1.18rem;
}

.invoice-brand span,
.invoice-title-block span,
.invoice-status-line span,
.invoice-footer-note span {
  color: var(--ink-3);
  font-size: 0.9rem;
}

.invoice-title-block {
  justify-items: end;
  text-align: right;
}

.invoice-title-block h1 {
  margin: 0;
  font-size: 2rem;
}

.invoice-status-line {
  border-block: 1px solid var(--line-2);
  padding-block: 14px;
}

.invoice-info-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px;
}

.invoice-info-grid > div {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 14px;
}

.invoice-info-grid h2,
.invoice-products h2 {
  margin: 0;
  color: var(--gold-ink);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.invoice-info-grid dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.invoice-info-grid dl div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
}

.invoice-info-grid dt {
  color: var(--ink-3);
  font-size: 0.82rem;
  font-weight: 750;
}

.invoice-info-grid dd {
  margin: 0;
  font-weight: 700;
  word-break: break-word;
}

.invoice-products {
  display: grid;
  gap: 12px;
}

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

.invoice-products th,
.invoice-products td {
  border-bottom: 1px solid var(--line-2);
  padding: 12px 8px;
  text-align: left;
  vertical-align: top;
}

.invoice-products th {
  color: var(--ink-3);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.invoice-products th:not(:first-child),
.invoice-products td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}

.invoice-total {
  justify-self: end;
  min-width: 280px;
  border-radius: 10px;
  background: var(--ink);
  padding: 15px 18px;
  color: #fff;
}

.invoice-total span {
  font-weight: 850;
}

.invoice-total strong {
  font-size: 1.2rem;
}

.invoice-footer-note {
  align-self: end;
  border-top: 1px solid var(--line-2);
  padding-top: 16px;
}

/* Printing an invoice prints the invoice and nothing else, on one A4 page.
   It is mounted straight under <body>, so everything else can be removed
   from the layout (display: none). The old rule only made the admin
   invisible: it still took up room, and one invoice came out as four mostly
   blank pages — and any other page printed blank. */
@media print {
  @page {
    size: A4;
    margin: 14mm 14mm 16mm;
  }

  body:has(> .invoice-backdrop) > *:not(.invoice-backdrop) {
    display: none !important;
  }

  html:has(.invoice-backdrop),
  body:has(> .invoice-backdrop) {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  .no-print {
    display: none !important;
  }

  .invoice-backdrop {
    position: static !important;
    inset: auto !important;
    display: block !important;
    overflow: visible !important;
    background: none !important;
    padding: 0 !important;
  }

  .invoice-sheet {
    display: block !important;
    width: 100% !important;
  }

  .invoice-paper {
    min-height: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .invoice-products tr,
  .invoice-total,
  .invoice-footer-note {
    break-inside: avoid;
  }

  .invoice-paper * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@media (max-width: 720px) {
  .invoice-header,
  .invoice-status-line,
  .invoice-footer-note {
    flex-direction: column;
  }

  .invoice-title-block {
    justify-items: start;
    text-align: left;
  }

  .invoice-info-grid {
    grid-template-columns: 1fr;
  }

  .invoice-products {
    overflow-x: auto;
  }
}

/* ── Brand: logo preview ── */
.brand-logo-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.brand-logo-preview img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 4px;
}
.brand-logo-preview span { color: var(--ink-3); font-size: 0.84rem; font-weight: 700; }

/* ── Helpful note inside advanced sections ── */
.admin-help-note {
  margin: 0 0 4px;
  padding: 9px 12px;
  background: var(--gold-soft);
  border-radius: 8px;
  color: #7a6326;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.45;
}

/* Slightly calmer panels overall */
.resource-row {
  border-radius: 14px;
}

/* ── Storefront: out-of-stock state ── */
.soldout-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 4px 11px;
  border-radius: 6px;
  background: rgba(29, 29, 31, 0.86);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.product-card:has(.soldout-badge) .product-image img {
  filter: grayscale(0.4) brightness(0.97);
}
.enquire-btn--soldout,
.pdp-enquire-btn:disabled {
  background: #ececea !important;
  color: var(--ink-4) !important;
  border-color: #e2e1de !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ── Legal pages (Privacy / Terms) ── */
.legal-body {
  padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 72px) clamp(48px, 7vw, 90px);
}
.legal-body-inner {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
}
.legal-section h2 {
  margin: 0 0 8px;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.legal-section p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.7;
}
.legal-updated {
  margin: 8px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink-4);
  font-size: 0.82rem;
}

/* Footer legal links */
.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom-links a {
  color: inherit;
  font-weight: 700;
  opacity: 0.85;
}
.footer-bottom-links a:hover { opacity: 1; text-decoration: underline; }

/* ── Premium nav/footer/bag polish ── */
/* ════════════════════════════════════════════════════════════════
   NAVBAR — premium redesign (flush, full-width, refined)
   Overrides the older floating-pill header above.
   ════════════════════════════════════════════════════════════════ */
.shop-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;                         /* full width, no floating pill */
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 14px clamp(18px, 4vw, 56px);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: none;
  transition: box-shadow 240ms ease, background 240ms ease, border-color 240ms ease;
}
/* Subtle elevation once the user scrolls (added via JS) */
.shop-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(29, 29, 31, 0.04);
  box-shadow: 0 8px 30px rgba(20, 18, 15, 0.07);
}

/* Brand lockup */
.brand-lockup strong {
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.brand-lockup small {
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}

/* Center nav — clean text links with an animated underline (no pill chrome) */
.shop-nav-center {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  gap: clamp(6px, 1.6vw, 14px);
}
.shop-nav-center a,
.nav-dropdown-trigger {
  position: relative;
  min-height: 0;
  border-radius: 0;
  padding: 8px 6px;
  background: transparent !important;
  color: #2b2724;
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0;
}
/* Animated underline that grows from the centre on hover/active */
.shop-nav-center > a::after,
.nav-dropdown-trigger::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent, var(--gold));
  transform: translateX(-50%);
  transition: width 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.shop-nav-center > a:hover::after,
.nav-dropdown:hover .nav-dropdown-trigger::after,
.shop-nav-center > a.nav-active::after,
.nav-dropdown-trigger.nav-active::after {
  width: calc(100% - 12px);
}
.shop-nav-center > a:hover,
.nav-dropdown-trigger:hover {
  color: var(--ink);
}
.shop-nav-center a.nav-active,
.nav-dropdown-trigger.nav-active {
  background: transparent;
  color: var(--ink);
  font-weight: 800;
}

/* Cart button — outlined, refined, fills on hover (not a heavy black blob) */
.nav-cart-link {
  width: auto;
  height: 42px;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-3);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 0 16px;
  font-size: 0.86rem;
  box-shadow: none;
  transition: border-color 160ms ease, background 160ms ease, transform 180ms cubic-bezier(0.16,1,0.3,1);
}
.nav-cart-link:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-1px);
}
.nav-cart-link .cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  border: 2px solid #fff;
  background: var(--accent, var(--gold));
}

/* WhatsApp button — quieter, matches the refined look */
.nav-whatsapp {
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
}

/* Hamburger — circular to match */
.nav-hamburger {
  border-radius: 999px;
  transition: background 160ms ease;
}
.nav-hamburger:hover { background: var(--surface-2); }

@media (prefers-reduced-motion: reduce) {
  .shop-header, .nav-cart-link, .shop-nav-center > a::after, .nav-dropdown-trigger::after {
    transition: none !important;
  }
}

.nav-cart-link .cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  border: 2px solid #fff;
  background: var(--accent, var(--gold));
}

.bag-modal {
  width: min(680px, 100%);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px);
}

.bag-heading {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding-right: 48px;
}

.bag-heading-icon,
.bag-empty-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
}

.bag-heading span {
  color: var(--accent, var(--gold));
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.bag-heading h2 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 1.55rem;
}

.bag-heading p {
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 0.9rem;
}

.bag-items {
  display: grid;
  gap: 10px;
  max-height: min(42vh, 380px);
  overflow: auto;
  padding-right: 2px;
}

.bag-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-muted);
  padding: 10px;
}

.bag-item-image {
  display: grid;
  width: 74px;
  height: 74px;
  overflow: hidden;
  place-items: center;
  border-radius: 8px;
  background: #ecebe7;
  color: var(--ink-3);
}

.bag-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bag-item-info {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.bag-item-info strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bag-item-info small {
  color: var(--ink-3);
  font-weight: 750;
}

.bag-qty {
  display: inline-grid;
  width: fit-content;
  grid-template-columns: 32px 38px 32px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
}

.bag-qty button {
  display: grid;
  height: 32px;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.bag-qty button:disabled {
  color: #b8b6b0;
  cursor: not-allowed;
}

.bag-qty span {
  display: grid;
  height: 32px;
  place-items: center;
  color: var(--ink);
  font-weight: 850;
}

.bag-item-side {
  display: grid;
  justify-items: end;
  gap: 9px;
  min-width: 94px;
}

.bag-item-side strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.bag-item-side button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
}

.bag-total {
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  padding: 14px 16px;
  color: #fff;
}

.bag-total strong,
.bag-total span {
  color: #fff;
}

.bag-empty-modal {
  justify-items: center;
  text-align: center;
}

.bag-empty-modal p {
  max-width: 420px;
  color: var(--ink-3);
  line-height: 1.55;
}

@media (max-width: 760px) {
  .shop-header {
    gap: 10px;
    padding: 10px 12px;
  }

  .brand-lockup small,
  .nav-whatsapp {
    display: none;
  }

  .shop-nav-right {
    gap: 6px;
  }

  .nav-cart-link {
    width: 40px;
    height: 40px;
  }

  .footer-inner {
    gap: 28px;
  }

  .contact-strip-inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .contact-strip-actions,
  .contact-strip-btn {
    width: 100%;
  }

  .bag-modal {
    width: min(100%, 560px);
    max-height: calc(100vh - 20px);
    padding: 18px;
  }

  .bag-heading {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
  }

  .bag-heading-icon,
  .bag-empty-icon {
    width: 44px;
    height: 44px;
  }

  .bag-item {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .bag-item-image {
    width: 62px;
    height: 62px;
  }

  .bag-item-side {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    justify-items: stretch;
    min-width: 0;
  }

  .bag-item-side strong {
    justify-self: start;
  }
}

/* ── Checkout success confirmation ── */
.checkout-done {
  text-align: center;
  display: grid;
  gap: 12px;
  justify-items: center;
  padding-top: 36px;
}
.checkout-done-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  animation: noteIn 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.checkout-done h2 { margin: 4px 0 0; font-size: 1.4rem; }
.checkout-done-order {
  margin: 0;
  color: var(--accent, var(--gold));
  font-weight: 800;
  font-size: 0.9rem;
}
.checkout-done-body {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 380px;
}
.checkout-done .payment-note { width: 100%; justify-content: center; }
.primary-button.full { width: 100%; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .checkout-done-icon { animation: none !important; }
}

/* ── Discounts / sale pricing ── */
.price-sale-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.price-original {
  color: var(--ink-4);
  text-decoration: line-through;
  font-weight: 650;
  font-size: 0.92em;
}
.price-sale {
  color: var(--danger);
  font-weight: 850;
}

/* Discount badge on product card image */
.discount-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--danger);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}
/* If both featured + discount, nudge discount below so they don't overlap */
.featured-badge + .discount-badge { top: 44px; }

/* PDP sale price */
.pdp-price-sale {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.pdp-price-sale .price-original {
  font-size: 1.1rem;
}
.pdp-price-sale .price-sale {
  font-size: 1.8rem;
}
.pdp-discount-badge {
  align-self: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fbeae8;
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 850;
}

/* ── Design-QA polish (final pass) ───────────────────────────── */

/* Footer bottom: distinguish the language note from the Privacy/Terms links */
.footer-bottom-note {
  opacity: 0.6;
  font-weight: 600 !important;
  cursor: default;
}
.footer-bottom-note::before {
  content: "·";
  margin-right: 14px;
  opacity: 0.5;
}

/* Footer: give the language switcher breathing room from the contact rows */
.footer-col .footer-languages,
.footer-languages {
  margin-top: 14px;
}

/* Product card image: consistent aspect ratio instead of a hard 200px,
   so grid cards frame like the product page and scale with column width. */
.product-image {
  height: auto !important;
  aspect-ratio: 4 / 3;
}

/* About story: weight columns toward text + stretch image to match height */
.about-story-inner {
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
}
.about-story-img {
  aspect-ratio: auto;
  min-height: 100%;
}
/* Loading screen logo (replaces the old "D" mark) */
.screen-message-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 16px;
  animation: screenLogoPulse 1.4s ease-in-out infinite;
}
@keyframes screenLogoPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .screen-message-logo { animation: none; }
}

/* ── Products: WordPress-style list + edit screen ── */
.admin-editscreen-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.admin-editscreen-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--espresso);
}
.row-delete-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(159, 58, 47, 0.16);
  border-radius: 10px;
  background: #fff7f4;
  padding: 6px;
  color: #7e2f27;
  font-weight: 850;
}
.row-delete-confirm span {
  padding: 0 6px;
  white-space: nowrap;
}
.row-delete-confirm .danger-button {
  background: var(--danger);
  color: #fff;
}
.product-list {
  display: grid;
  gap: 8px;
}
.product-list-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms cubic-bezier(0.16,1,0.3,1);
}
.product-list-row:hover {
  border-color: var(--line-3);
  box-shadow: 0 8px 24px -14px rgba(20, 18, 15, 0.25);
  transform: translateY(-1px);
}
.product-list-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #b4b0a6;
}
.product-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-list-main { display: grid; gap: 2px; min-width: 0; }
.product-list-main strong { font-size: 0.96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-list-main small { color: var(--ink-4); font-size: 0.8rem; }
.product-list-price { font-weight: 800; font-size: 0.92rem; white-space: nowrap; }
.product-list-price s { color: #b4b0a6; font-weight: 600; margin-right: 4px; }
.product-list-price em { color: var(--ink-4); font-weight: 600; font-style: normal; font-size: 0.85rem; }
.product-list-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.product-list-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.product-list-edit,
.product-list-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0 10px;
  font-weight: 800;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
}
.product-list-edit {
  color: var(--accent, var(--gold));
}
.product-list-delete {
  color: var(--danger);
}
.product-list-delete:hover {
  background: var(--danger-soft);
}
.delete-confirm-inline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: #fff4f1;
  padding: 5px 6px 5px 12px;
  color: #7e2f27;
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}
.delete-confirm-inline button {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  font-weight: 850;
  cursor: pointer;
}
.delete-confirm-inline .confirm-yes {
  background: var(--danger);
  color: #fff;
}
.delete-confirm-inline .confirm-no {
  background: #fff;
  color: var(--ink);
}
.product-list-row.is-confirming-delete {
  border-color: rgba(159, 58, 47, 0.24);
  background: #fffdfc;
}

@media (max-width: 760px) {
  .product-list-row { grid-template-columns: 48px 1fr auto; }
  .product-list-thumb { width: 48px; height: 48px; }
  .product-list-price, .product-list-badges { display: none; }
  .product-list-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .product-list-delete {
    padding-inline: 8px;
  }
  .delete-confirm-inline {
    align-items: stretch;
    flex-direction: column;
    border-radius: 10px;
    padding: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-list-row:hover { transform: none; }
}

/* ── Content tab: language switcher ── */
.content-lang-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 999px;
}
.content-lang-tabs button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink-3);
  cursor: pointer;
}
.content-lang-tabs button.active { background: var(--espresso); color: #fff; }
.content-editor .admin-panel { align-content: start; }

/* ── Categories manager ── */
.category-list { display: grid; gap: 8px; }
.category-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.category-add-input {
  flex: 1 1 280px;
  min-width: min(100%, 260px);
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
}
.category-add-input svg {
  color: #8b8074;
}
.category-add-input input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.92rem;
  font-weight: 750;
}
.category-add-input:focus-within {
  border-color: rgba(176, 141, 87, 0.5);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.12);
}
.category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
}
.category-info { display: flex; align-items: center; gap: 10px; }
.category-info strong { font-size: 0.98rem; }
.category-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.category-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  border: 1px solid rgba(159, 58, 47, 0.14);
  border-radius: 8px;
  background: #fff8f6;
  padding: 0 12px;
  color: var(--danger);
  font-size: 0.86rem;
  font-weight: 850;
  cursor: pointer;
}
.category-delete:hover:not(:disabled) {
  border-color: rgba(159, 58, 47, 0.28);
  background: var(--danger-soft);
}
.category-delete:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.category-delete-confirm {
  min-height: 38px;
}
.category-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.category-edit input {
  flex: 1;
  min-width: 200px;
  height: 40px;
  border: 1.5px solid var(--line-3);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 0.92rem;
}
.category-edit input:focus { outline: none; border-color: var(--accent, var(--gold)); }

/* ── Admin: tab intros + brand colour preview ── */
.admin-tab-intro {
  margin: 0 0 14px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.banner-studio > .admin-tab-intro,
.resource-list > .admin-tab-intro { max-width: 680px; }
.brand-color-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 4px 0 4px;
}
.brand-color-preview > span:first-child { font-weight: 800; font-size: 1rem; }
.brand-color-preview-btn {
  padding: 6px 14px;
  border-radius: 6px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}

/* ── Testimonials (homepage) ── */
.home-testimonials {
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 72px);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.home-testimonials-head {
  max-width: 1100px;
  margin: 0 auto 28px;
  text-align: center;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.home-testimonials-head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.testimonials-rating { display: inline-flex; align-items: center; gap: 8px; }
.testimonials-rating .stars { color: #e0a93b; font-size: 1.1rem; letter-spacing: 2px; }
.testimonials-rating strong { font-size: 1.1rem; }
.testimonials-count { color: var(--ink-3); font-size: 0.9rem; }
.testimonials-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.testimonial-card {
  margin: 0;
  display: grid;
  gap: 12px;
  align-content: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
}
.testimonial-stars { display: inline-flex; gap: 2px; color: #e0a93b; }
.testimonial-card blockquote {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.6;
}
.testimonial-card figcaption { display: grid; gap: 1px; }
.testimonial-card figcaption strong { font-size: 0.92rem; }
.testimonial-card figcaption span { color: var(--ink-4); font-size: 0.82rem; }

/* Admin: testimonial edit rows */
.testimonial-edit-row {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.testimonial-edit-row .danger-button { justify-self: start; }

/* ── Catalogue: sort + price filter bar ── */
.catalogue-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 14px;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,249,246,0.92));
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 55px var(--line);
}
.catalogue-sort {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 0 auto;
}
.catalogue-sort > span:first-child,
.catalogue-price-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #77716a;
  letter-spacing: 0;
  white-space: nowrap;
}
.catalogue-select-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: clamp(220px, 24vw, 320px);
  min-width: 0;
  flex: 0 0 auto;
}
.catalogue-sort select {
  width: 100%;
  height: 44px;
  appearance: none;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 0 42px 0 14px;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
  cursor: pointer;
}
.catalogue-select-shell svg {
  position: absolute;
  right: 14px;
  color: #7a736b;
  pointer-events: none;
}
.catalogue-price-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 5px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: #fff;
}
.catalogue-price-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  background: #211916;
  color: #fff;
}
.catalogue-price-box {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  min-width: 96px;
  padding: 0 10px;
  border-radius: 10px;
  background: #f7f5f1;
  border: 1px solid var(--line);
}
.catalogue-price-box span {
  font-size: 0.68rem;
  font-weight: 900;
  color: #9a9186;
  text-transform: uppercase;
}
.catalogue-price-box input {
  width: 52px;
  height: 30px;
  border: 0;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
  background: transparent;
}
.catalogue-sort select:focus,
.catalogue-price-filter input:focus { outline: none; }
.catalogue-select-shell:focus-within select,
.catalogue-price-box:focus-within {
  border-color: rgba(176, 141, 87, 0.55);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.12);
}
.catalogue-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  border: 1px solid rgba(176, 141, 87, 0.22);
  border-radius: 999px;
  padding: 0 15px;
  background: rgba(176, 141, 87, 0.08);
  color: #8f7044;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.catalogue-clear:hover {
  background: rgba(176, 141, 87, 0.13);
  border-color: rgba(176, 141, 87, 0.34);
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .catalogue-tools {
    padding: 12px;
    border-radius: 14px;
  }
  .catalogue-sort,
  .catalogue-price-filter,
  .catalogue-clear {
    width: 100%;
  }
  .catalogue-sort {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .catalogue-select-shell {
    width: 100%;
  }
  .catalogue-price-filter {
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .catalogue-price-title {
    width: 100%;
    padding: 2px 4px 0;
  }
  .catalogue-price-box {
    flex: 1 1 120px;
    min-width: 0;
  }
  .catalogue-price-box input {
    width: 100%;
  }
}

/* ── Professional loading screen ── */
.screen-message {
  background: radial-gradient(120% 120% at 50% 0%, var(--surface) 0%, var(--surface) 60%, #efedea 100%);
}
.loader-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 6px;
}
.loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(176, 141, 87, 0.18);
  border-top-color: var(--accent, var(--gold));
  animation: loaderSpin 0.9s linear infinite;
}
.loader-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 16px;
  background: #fff;
  padding: 8px;
  box-shadow: 0 10px 30px -8px rgba(43, 36, 32, 0.25);
  animation: loaderBreathe 2.2s ease-in-out infinite;
}
.loader-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--espresso);
  background: linear-gradient(90deg, var(--espresso) 25%, var(--gold) 50%, var(--espresso) 75%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: loaderShimmer 2.4s linear infinite;
}
.loader-body { margin: 4px 0 0; color: #8a857c; font-size: 0.9rem; }

@keyframes loaderSpin { to { transform: rotate(360deg); } }
@keyframes loaderBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.93); }
}
@keyframes loaderShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-ring { animation: none; border-top-color: rgba(176,141,87,0.18); }
  .loader-logo, .loader-title { animation: none; }
  .loader-title { -webkit-text-fill-color: var(--espresso); }
}

/* ── PDP stock urgency + delivery hint ── */
.pdp-stock-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0 8px;
}
.pdp-stock-low {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: #b45f17;
  font-size: 0.82rem;
  font-weight: 800;
}
.pdp-delivery-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-3);
  font-size: 0.86rem;
  font-weight: 650;
}
.pdp-delivery-hint svg { color: var(--accent, var(--gold)); }

/* ── FAQ + Wishlist pages ───────────────────────────────────── */
.faq-list-section,
.wishlist-section {
  padding: clamp(34px, 5vw, 72px) clamp(18px, 5vw, 72px);
  background: var(--surface-2);
}

.faq-list {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px var(--line);
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  padding: 18px 20px;
  color: var(--ink);
  font-weight: 850;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary svg {
  flex: 0 0 auto;
  color: var(--accent, var(--gold));
  transition: transform 180ms ease;
}

.faq-item[open] summary svg {
  transform: rotate(180deg);
}

.faq-item p {
  margin: 0;
  border-top: 1px solid var(--line);
  padding: 0 20px 20px;
  color: var(--ink-2);
  line-height: 1.7;
}

.wishlist-summary {
  max-width: 1180px;
  margin: 0 auto 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  padding: 8px 14px;
  color: var(--ink-2);
  font-weight: 750;
}

.wishlist-summary strong {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
}

.wishlist-grid {
  max-width: 1180px;
  margin: 0 auto;
}

.wishlist-empty {
  max-width: 540px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  justify-items: center;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
  padding: clamp(30px, 6vw, 54px);
  text-align: center;
  box-shadow: 0 22px 60px var(--line);
}

.wishlist-empty svg {
  color: var(--accent, var(--gold));
}

.wishlist-empty h2,
.wishlist-empty p {
  margin: 0;
}

.wishlist-empty p {
  color: var(--ink-3);
  line-height: 1.6;
}

/* ── Wishlist controls ─────────────────────────────────────── */
.nav-wishlist-link,
.nav-cart-link {
  position: relative;
}

.nav-wishlist-link {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  transition: transform 160ms ease, background 160ms ease;
}

.nav-wishlist-link:hover {
  transform: translateY(-1px);
}

.nav-wishlist-link.nav-active {
  background: var(--accent, var(--gold));
}

.wishlist-button {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.wishlist-button:hover {
  transform: translateY(-1px);
}

.wishlist-button.active {
  background: var(--ink);
  color: #fff;
}

.wishlist-card-button {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
}

.product-card {
  position: relative !important;
}

.pdp-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.pdp-title-row .pdp-title {
  margin: 0;
}

.pdp-wishlist-btn {
  width: 46px;
  height: 46px;
  margin-top: 2px;
}

@media (max-width: 760px) {
  .reveal.reveal-left,
  .reveal.reveal-right {
    transform: translateY(18px);
  }

  .product-footer {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .enquire-btn {
    width: 100% !important;
    white-space: normal !important;
  }

  .pdp-title-row {
    grid-template-columns: 1fr;
  }

  .pdp-wishlist-btn {
    width: 100%;
    height: 48px;
  }
}

/* ── Product variants (type / colour) ── */
.pdp-variants { margin: 4px 0 10px; display: grid; gap: 8px; }
.pdp-variants-label { font-size: 0.84rem; font-weight: 800; color: var(--ink-3); }
.pdp-variant-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-variant-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid var(--line-3);
  border-radius: 999px;
  background: #fff;
  padding: 7px 14px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #2b2724;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 160ms cubic-bezier(0.16,1,0.3,1);
}
.pdp-variant-chip:hover { transform: translateY(-1px); border-color: rgba(29,29,31,0.3); }
.pdp-variant-chip.active { border-color: var(--primary, var(--espresso)); background: var(--primary, var(--espresso)); color: #fff; }
.pdp-variant-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0;
}
/* Admin variant edit rows */
.variant-edit-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 10px;
}
.variant-edit-row .danger-button { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .pdp-variant-chip:hover { transform: none; } }

/* ── Dashboard recent-order rows: clean status pill, aligned ── */
.dashboard-row-main { display: grid; gap: 2px; min-width: 0; }
.dashboard-row-main strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-row-status {
  flex-shrink: 0;
  align-self: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem !important;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: capitalize !important;
}
.dashboard-row-qty {
  flex-shrink: 0;
  align-self: center;
  font-size: 1rem !important;
  font-weight: 800;
  font-style: normal;
  color: var(--ink);
}
.dashboard-row-status.status-new       { background: #e6f0fb; color: #1f5fa8; }
.dashboard-row-status.status-confirmed { background: var(--gold-soft); color: var(--gold-ink); }
.dashboard-row-status.status-fulfilled { background: var(--ok-soft); color: var(--ok); }
.dashboard-row-status.status-cancelled { background: #f7e9e7; color: var(--danger); }

/* ── Admin: structured product detail (spec) fields ── */
.spec-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 600px) { .spec-fields-grid { grid-template-columns: 1fr; } }

/* ── Fix: align fields in a row so inputs share one baseline regardless of
   label/hint length (e.g. the Admin password row). ── */
.split-fields { align-items: start; }
.split-fields > .field {
  display: grid;
  grid-template-rows: 20px auto 1fr;  /* label / input / hint — labels & inputs share baselines */
  align-content: start;
  gap: 7px;
}
.split-fields > .field > span {
  grid-row: 1;
  align-self: end;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.split-fields > .field > input,
.split-fields > .field > textarea,
.split-fields > .field > select { grid-row: 2; }
.split-fields > .field > .field-hint { grid-row: 3; align-self: start; }

/* ── Brand editor: clean grouped layout ── */
.brand-editor .admin-panel { align-content: start; }
.brand-subgroup {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.brand-subgroup-label {
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.brand-logo-block {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.brand-logo-chip {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
}
.brand-logo-chip img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.brand-logo-placeholder { font-weight: 850; font-size: 1.3rem; color: var(--espresso); }
.brand-logo-actions { flex: 1; min-width: 0; display: grid; gap: 8px; }
.brand-save-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.brand-save-bar .primary-button { flex-shrink: 0; }

/* ── Content editor: clean single-column flow ── */
.content-editor-flow {
  display: grid;
  gap: 16px;
  max-width: 880px;
}
.content-editor-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.content-editor-headline { display: grid; gap: 6px; min-width: 0; }
.content-card { align-content: start; }
.content-save-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.banner-live-tag { color: var(--ok); font-style: normal; font-weight: 700; font-size: 0.72em; letter-spacing: 0.04em; margin-left: 4px; }

/* ── Banner editor: card + live radio ───────────────────────────────── */
.banner-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 76px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.banner-card:hover { border-color: rgba(29,29,31,0.3); transform: translateY(-1px); }
.banner-card.selected { border-color: var(--primary, var(--ink)); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.banner-card.live { border-color: var(--ok); background: #f3fbf5; }
.banner-card-body { min-width: 0; }
.banner-card-body strong { display: block; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banner-state-pill {
  display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
}
.banner-state-pill.is-live { background: #e7f7ed; color: #15803d; }
.banner-state-pill.is-draft { background: #f1f0ee; color: var(--ink-3); }
.banner-live-radio {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  border-radius: 8px; font-size: 0.76rem; font-weight: 700; color: #44443f;
  background: #f3f2f0; cursor: pointer; white-space: nowrap;
}
.banner-live-radio input { accent-color: var(--ok); cursor: pointer; }
.banner-card.live .banner-live-radio { background: #dcf3e3; color: #15803d; }

/* ── Banner editor: status strip ────────────────────────────────────── */
.banner-status-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px; margin-bottom: 14px;
  border: 1px solid transparent;
}
.banner-status-strip.is-live { background: #f3fbf5; border-color: #bfe6cb; }
.banner-status-strip.is-draft { background: #fbf6ef; border-color: #f0dcc3; }
.banner-status-strip > div { flex: 1; min-width: 0; }
.banner-status-strip strong { display: block; font-size: 0.92rem; }
.banner-status-strip small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 0.8rem; }
.banner-status-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.banner-status-strip.is-live .banner-status-dot { background: var(--ok); box-shadow: 0 0 0 4px rgba(22,163,74,0.16); }
.banner-status-strip.is-draft .banner-status-dot { background: #c98a3a; box-shadow: 0 0 0 4px rgba(201,138,58,0.16); }

/* ── Categories: locked note ────────────────────────────────────────── */
/* ── Admin "edit on live page" bar (WordPress-style) ────────────────── */
.admin-edit-bar {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 1200; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 14px; border-radius: 999px;
  background: var(--ink); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  font-size: 0.85rem;
}
.admin-edit-bar-tag { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; opacity: 0.7; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.7rem; }
.admin-edit-bar-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700;
  text-decoration: none;
}
.admin-edit-bar-btn:hover { background: #f0efed; }
.admin-edit-bar-link { color: #cfcfcf; text-decoration: none; font-weight: 600; padding-right: 6px; }
.admin-edit-bar-link:hover { color: #fff; }

/* ── Inline edit pencils (WordPress-style, admins only) ─────────────── */
.has-edit { position: relative; }
.edit-pencil {
  position: absolute; top: 10px; right: 10px; z-index: 50;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(29, 29, 31, 0.85); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  text-decoration: none; backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  opacity: 0; transform: translateY(-2px); pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
}
/* Reveal on hovering the section it belongs to, and keep it usable. */
.has-edit:hover > .edit-pencil { opacity: 1; transform: translateY(0); pointer-events: auto; }
.edit-pencil:hover { background: var(--ok); }
/* On touch devices (no hover), keep pencils faintly visible so they're reachable. */
@media (hover: none) {
  .edit-pencil { opacity: 0.55; pointer-events: auto; transform: none; }
}
/* Product cards: smaller pencil tucked top-left so it doesn't clash with the wishlist heart. */
.product-card .edit-pencil { top: 8px; left: 8px; right: auto; padding: 4px 8px; font-size: 0.68rem; }
/* ============================================================================
   Casa Decor — 2026 refresh layer
   Appended LAST in the CSS build so it wins. Deliberately narrow: it retunes
   type, weight, tracking, radii, elevation and motion on the components that
   actually carry the look. Structure stays in decor.css.

   On !important: many rules in decor.css use it (product cards, buttons,
   grids), so overriding them requires matching it. A specificity requirement,
   not a preference.

   The core moves, and why:
   1. Display weights drop from 760-800 to ~580-620. Very heavy large type is
      the strongest "2010s" tell; current design sets weight low and tracking
      tight instead.
   2. Large text gets negative letter-spacing. .home-hero-title was 6.4rem at
      letter-spacing 0, which reads loose and dated at that size.
   3. Hairline borders + very soft, wide shadows replace tight dark shadows.
   4. One easing curve and one duration scale everywhere.
   ========================================================================= */

/* ── Display type ────────────────────────────────────────────────────────── */

.home-hero-title {
  font-size: clamp(2.9rem, 5.9vw, 5.9rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.038em;
}

.page-title {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.032em;
}

.pdp-title {
  font-size: clamp(1.75rem, 2.9vw, 2.6rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.028em;
}

.home-section-head h2,
.about-section-title,
.home-testimonials-head h2,
.wishlist-section h2,
.faq-list-section h2,
.contact-cards-section h2 {
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.1;
}

.admin-topbar h1 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.1;
}

.home-feature-text h2,
.home-dark-banner-inner h2,
.about-cta-inner h2 {
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.06;
}

/* Lead / subtitle copy: slightly larger, looser leading, balanced wrapping. */
.home-hero-subtitle,
.page-lead {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.62;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}

/* Long-form body copy wants a readable measure, not full-width lines. */
.legal-body-inner p,
.about-story-text p,
.faq-item p {
  max-width: 68ch;
  line-height: 1.68;
  text-wrap: pretty;
}

/* ── Eyebrow / overline micro-type ───────────────────────────────────────── */
.home-hero-eyebrow,
.admin-topbar span,
.order-id,
.pdp-category,
.product-cat,
.about-story span,
.field-hint {
  letter-spacing: 0.15em;
  font-weight: 620;
}

/* ── Numerals ────────────────────────────────────────────────────────────── */
/* Aligned digits stop price lists and metric rows looking ragged. */
.product-price,
.pdp-price,
.metric-card strong,
.about-stats strong,
.home-feature-stats strong,
.order-total-row,
.catalogue-price-filter input,
.pdp-qty-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
}

.metric-card strong,
.about-stats strong,
.home-feature-stats strong {
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.shop-header {
  top: 10px;
  border-radius: var(--r-lg);
  border-color: var(--line);
  background: color-mix(in srgb, var(--card) 74%, transparent);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  transition:
    box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.shop-header.is-scrolled {
  background: color-mix(in srgb, var(--card) 88%, transparent);
  box-shadow: var(--shadow-lg);
}

.shop-nav-center a,
.nav-dropdown-trigger {
  letter-spacing: -0.008em;
  font-weight: 550;
  transition: color var(--dur-fast) var(--ease);
}

.nav-dropdown-menu {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: color-mix(in srgb, var(--card) 96%, transparent);
  backdrop-filter: blur(20px);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.primary-button,
.secondary-button,
.danger-button {
  min-height: 46px;
  border-radius: var(--r-pill);
  padding: 0 22px;
  font-weight: 580;
  letter-spacing: -0.008em;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.primary-button {
  box-shadow: var(--shadow-sm);
}

.primary-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.primary-button:active,
.secondary-button:active,
.danger-button:active {
  transform: translateY(0) scale(0.985);
  transition-duration: var(--dur-fast);
}

.secondary-button {
  background: color-mix(in srgb, var(--card) 84%, transparent);
  backdrop-filter: blur(8px);
}

/* Card / PDP action buttons — pill shape, matching motion. */
.enquire-btn,
.pdp-enquire-btn,
.pdp-order-now-btn,
.pdp-whatsapp-btn,
.home-dark-banner-btn,
.contact-strip-btn,
.whatsapp-cta-btn,
.about-offering-link,
.home-section-link,
.catalogue-clear {
  border-radius: var(--r-pill) !important;
  font-weight: 580 !important;
  letter-spacing: -0.008em !important;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease) !important;
}

.enquire-btn {
  border-width: 1px !important;
  padding: 8px 16px !important;
}

.pdp-enquire-btn:active,
.pdp-order-now-btn:active,
.enquire-btn:active {
  transform: scale(0.98) !important;
}

/* ── Product cards ───────────────────────────────────────────────────────── */
/* Hairline + generous radius. The fixed 200px image height distorted product
   photos on narrow columns; a fixed ratio crops predictably instead. */
.product-card,
.pdp-related-card {
  border-radius: var(--r-md) !important;
  border-color: var(--line) !important;
  background: var(--card) !important;
  box-shadow: var(--shadow-sm) !important;
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    border-color var(--dur) var(--ease) !important;
}

.product-card:hover,
.pdp-related-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--line-2) !important;
  box-shadow: var(--shadow-lg) !important;
}

.product-image {
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  background: var(--surface-2) !important;
}

.product-image img {
  transition: transform 900ms var(--ease-out) !important;
}

.product-card:hover .product-image img {
  transform: scale(1.045) !important;
}

.product-body {
  gap: 7px !important;
  padding: 15px 16px 17px !important;
}

.product-name {
  letter-spacing: -0.014em;
  font-weight: 550;
  transition: color var(--dur) var(--ease);
}

/* ── Pills, chips, badges ────────────────────────────────────────────────── */
.pdp-variant-chip,
.language-switcher button,
.status-tabs button,
.catalogue-sort select,
.featured-badge,
.order-status-badge,
.admin-badge {
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
  font-weight: 580;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}


.pdp-variant-chip:active {
  transform: scale(0.97);
}

.featured-badge,
.order-status-badge,
.admin-badge {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

/* ── Content cards ───────────────────────────────────────────────────────── */
.about-why-card,
.about-offering-card,
.contact-card,
.faq-item,
.home-trust-item,
.pdp-trust-item {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--card);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur-slow) var(--ease-out);
}

.about-why-card:hover,
.about-offering-card:hover,
.contact-card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.contact-strip,
.home-feature-box-inner,
.about-cta-inner,
.home-dark-banner-inner,
.legal-body-inner {
  border-radius: var(--r-lg);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.home-hero {
  border-radius: var(--r-xl);
  overflow: hidden;
}

/* Faint grain over the hero photo: stops big gradients banding, and reads as
   depth rather than as an effect. */
.home-hero-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Product detail page ─────────────────────────────────────────────────── */
.pdp-main-image,
.pdp-gallery,
.pdp-thumb,
.pdp-spec-table,
.pdp-related-image {
  border-radius: var(--r-md);
  overflow: hidden;
}

.pdp-thumb {
  border-radius: var(--r-sm);
  transition:
    border-color var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.pdp-qty-stepper {
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  overflow: hidden;
}

.pdp-sticky-bar {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink);
  letter-spacing: -0.008em;
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--ink-3);
  /* A soft ring reads current; a hard 2px outline reads 2015. */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent);
}

::placeholder {
  color: var(--ink-4);
}

/* ── Modals ──────────────────────────────────────────────────────────────── */
.checkout-modal,
.quick-panel,
.invoice-modal {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--line);
}

.checkout-done-icon {
  border-radius: var(--r-pill);
}

/* ── Admin shell ─────────────────────────────────────────────────────────── */
/* Guarded by min-width on purpose: decor.css collapses .admin-app to a single
   column at <=1040px, and this layer loads after it, so an unguarded rule here
   would re-impose the desktop sidebar on phones. */
@media (min-width: 1041px) {
  .admin-app {
    grid-template-columns: 264px minmax(0, 1fr);
  }

  .admin-sidebar {
    border-right: 1px solid var(--line);
  }
}

.admin-sidebar {
  gap: 18px;
  padding: 20px 15px;
  background: var(--card);
}

.admin-tabs {
  gap: 3px;
}

.admin-tabs button {
  min-height: 42px;
  border-radius: var(--r-sm);
  padding: 0 13px;
  color: var(--ink-2);
  font-weight: 550;
  font-size: var(--t-sm);
  letter-spacing: -0.008em;
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.admin-tabs button:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* Solid ink for the active tab — unmistakable, and no dependence on the
   admin-set brand colour being dark enough to read against. */
.admin-tabs button.active {
  background: var(--ink);
  color: var(--ink-inverse);
}

.admin-main {
  gap: 20px;
  padding: 26px clamp(18px, 2.4vw, 34px) 56px;
}

.admin-password-form {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.admin-password-form .split-fields {
  width: 100%;
}

/* On phones the 8 admin tabs were wrapping into a ragged 6-column grid.
   A single scrolling strip is predictable at any tab count. */
@media (max-width: 1040px) {
  .admin-sidebar {
    border-bottom: 1px solid var(--line);
  }

  .admin-tabs {
    display: flex;
    grid-template-columns: none;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    /* Without min-width:0 a scrolling flex row inside a flex column keeps its
       full content width (min-width defaults to auto) and stretches the whole
       sidebar past the viewport instead of scrolling inside it. */
    min-width: 0;
    max-width: 100%;
  }

  /* Same reason: let the grid/flex children actually shrink. */
  .admin-app,
  .admin-sidebar,
  .admin-main {
    min-width: 0;
    max-width: 100%;
  }

  .admin-sidebar > * {
    min-width: 0;
  }

  .admin-tabs button {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .admin-main {
    padding: 18px 16px 48px;
  }
}

@media (max-width: 640px) {
  .admin-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }

  .admin-tabs button {
    min-height: 44px;
    padding: 8px 10px;
    text-align: left;
    white-space: normal;
  }

  .admin-tabs button svg {
    flex-shrink: 0;
  }
}

.metric-card,
.admin-panel,
.order-card,
.resource-panel,
.orders-panel,
.dashboard-list,
.admin-list-toolbar {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.metric-card {
  padding: 18px;
  transition:
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.metric-card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-md);
}

.resource-row,
.dashboard-list-row {
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease);
}

.resource-row:hover,
.dashboard-list-row:hover {
  background: var(--surface-2);
}

/* ── Toasts ──────────────────────────────────────────────────────────────── */
.success-note,
.error-note {
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  letter-spacing: -0.008em;
  animation: fade-up var(--dur-slow) var(--ease-out);
}

.success-note {
  border-color: color-mix(in srgb, var(--ok) 26%, transparent);
}

.error-note {
  border-color: color-mix(in srgb, var(--danger) 26%, transparent);
}

/* ── Scroll reveals ──────────────────────────────────────────────────────── */
/* Retime the existing reveal classes onto the shared easing curve. */
.reveal,
.reveal-left,
.reveal-right,
.hero-rise {
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

/* ── Chrome ──────────────────────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}

::selection {
  background: color-mix(in srgb, var(--gold) 30%, transparent);
  color: var(--ink);
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
/* decor.css already neutralises hover transforms for this preference, but a
   few rules in this layer use !important (to beat the older card rules) and
   would otherwise win. Re-assert the preference last so it always holds. */
@media (prefers-reduced-motion: reduce) {
  .product-card:hover,
  .pdp-related-card:hover,
  .about-why-card:hover,
  .about-offering-card:hover,
  .contact-card:hover,
  .primary-button:hover,
  .primary-button:active,
  .secondary-button:active,
  .danger-button:active,
  .enquire-btn:active,
  .pdp-enquire-btn:active,
  .pdp-order-now-btn:active,
  .pdp-variant-chip:active {
    transform: none !important;
  }

  .product-card:hover .product-image img {
    transform: none !important;
  }

  .success-note,
  .error-note {
    animation: none !important;
  }
}

/* ── Mid-width fixes ─────────────────────────────────────────────────────── */

/* The brand name was capped at 86px below 760px and truncated to "Casa De…"
   even at ~700px, where the header has room to spare. Let it use the space it
   actually has and only ellipsise when it genuinely runs out. */
@media (max-width: 760px) {
  .brand-lockup strong {
    max-width: min(46vw, 190px);
    font-size: 0.95rem;
  }
}

@media (max-width: 420px) {
  .brand-lockup strong {
    max-width: 38vw;
  }
}

/* The featured row shows 4 products. Between 641px and 820px the grid was 3
   columns, which left a single card alone on a second row; 2x2 fills. */
@media (min-width: 641px) and (max-width: 820px) {
  .home-products-grid,
  .home-featured-grid,
  .catalogue-grid,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* The floating WhatsApp button sat on top of card text. Keep the last section
   clear of it so nothing important hides underneath. */
@media (max-width: 900px) {
  .site-footer {
    padding-bottom: 88px;
  }
}

/* ============================================================================
   Mobile pass
   Measured on a 375px viewport. Each fix below is a specific defect, not a
   preference.
   ========================================================================= */

@media (max-width: 760px) {
  /* ── Header ────────────────────────────────────────────────────────────
     The language switcher was taking 107px of a 375px header — more than the
     brand, the cart and the menu button put together — which squeezed the shop
     name down to "Cas…". The mobile menu already contains a language switcher,
     so the header copy is pure redundancy on a phone. */
  .shop-header .language-switcher {
    display: none;
  }

  /* With that space back, the name fits. */
  .brand-lockup strong {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }

  .brand-lockup {
    min-width: 0;
    gap: 9px;
  }

  /* One size and one shape for every header control. They were 44px filled
     black, 40px outlined and 38px outlined — three different treatments in a
     row of three buttons. */
  .nav-wishlist-link,
  .nav-cart-link,
  .nav-hamburger {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--ink);
    box-shadow: none;
    gap: 0;
  }

  /* The shopping bag icon was rendering 6px wide instead of 18px: it's a flex
     item sharing .nav-cart-link with the count badge, and with no
     flex-shrink:0 it collapsed. This is the "icon looks broken" bug. */
  .nav-wishlist-link svg,
  .nav-cart-link svg,
  .nav-hamburger svg {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
  }

  /* Count badges overlap the corner of their button rather than sitting inside
     it and stealing width from the icon. */
  .nav-wishlist-link .cart-badge,
  .nav-cart-link .cart-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--card);
    font-size: 0.62rem;
  }

  .nav-wishlist-link,
  .nav-cart-link {
    position: relative;
    overflow: visible;
  }

  .shop-nav-right {
    gap: 7px;
  }

  /* The eyebrow's wide tracking pushed it onto two lines. */
  .home-hero-eyebrow {
    letter-spacing: 0.1em;
    font-size: 0.63rem;
  }

  /* ── Product cards ─────────────────────────────────────────────────────
     Keep the action on one line. "Enquire for price" wrapped into a 57px-tall
     pill, so one card in every row stood taller than its neighbour. The label
     is now the short verb, and this stops any translation re-wrapping it. */
  .enquire-btn {
    width: 100% !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding: 10px 12px !important;
    font-size: 0.82rem !important;
    min-height: 40px !important;
  }

  .product-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  /* Give the price row a consistent height so the buttons below it line up
     across a row whether the card shows a price or an "On request" chip. */
  .product-price,
  .price-on-request {
    display: flex !important;
    align-items: center;
    min-height: 26px;
    font-size: 1.05rem;
  }

  .price-on-request {
    font-size: 0.7rem;
  }

  /* Long product names were breaking mid-token after the hyphen
     ("Fluted Strip – F-" / "2315 Obsidian Gold"). */
  .product-name {
    overflow-wrap: break-word;
    hyphens: manual;
    font-size: 0.95rem;
    line-height: 1.32;
  }

  .product-body {
    padding: 13px 13px 15px !important;
    gap: 6px !important;
  }

  /* ── Floating WhatsApp button ──────────────────────────────────────────
     It sat mid-screen over card text. Tuck it into the corner, respect the
     phone's home-bar inset, and shrink it to an icon so it covers as little as
     possible. */
  .whatsapp-fab {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
    justify-content: center;
    padding: 0;
    gap: 0;
  }

  .whatsapp-fab span {
    display: none;
  }

  /* Nothing important should end up underneath it. */
  .site-footer {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Touch targets ────────────────────────────────────────────────────── */
  .pdp-variant-chip,
  .mobile-nav a,
  .mobile-nav button {
    min-height: 44px;
  }
}

/* The trust row was two columns, so "WPC, 3D fluted & stone" wrapped and ran
   under the floating button. One per row on a narrow phone. */
@media (max-width: 460px) {
  .home-trust {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile menu ─────────────────────────────────────────────────────────── */
/* "Products" is a <button> (it expands a sublist) while its siblings are <a>.
   It inherited none of the link padding or the divider, so it sat flush
   against the drawer edge at a different row height — the one row in the menu
   that looked misplaced. Match it to the links exactly. */
.mobile-nav .mobile-nav-group-toggle {
  gap: 10px;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 750;
  border-bottom: 1px solid var(--line);
  min-height: 53px;
  text-align: left;
  transition: background 140ms ease;
}

.mobile-nav .mobile-nav-group-toggle:hover {
  background: var(--card-muted);
}

.mobile-nav .mobile-nav-group-toggle svg {
  flex: 0 0 auto;
}

/* Sub-categories line up under the Products label rather than under the
   drawer edge. */
.mobile-nav-sublist {
  margin: 0;
  padding: 4px 0 6px 32px;
  border-left: 0;
  border-bottom: 1px solid var(--line);
}

.mobile-nav-sublist a {
  padding: 11px 20px 11px 0;
  font-weight: 550;
  font-size: 0.94rem;
  border-bottom: 0;
  min-height: 44px;
}

/* Consistent row rhythm and comfortable touch targets throughout. */
.mobile-nav a {
  min-height: 53px;
  letter-spacing: -0.012em;
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
}

/* Push the language/contact block to the bottom of the drawer instead of
   leaving it floating after the nav. */
.mobile-nav {
  flex: 1 1 auto;
  align-content: start;
  overflow-y: auto;
}

.mobile-menu-footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* WhatsApp action in the mobile drawer. Uses the brand green so it reads as
   the messaging channel, not as a generic nav row. */
.mobile-menu-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  border-radius: var(--r-pill);
  background: var(--whatsapp);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.008em;
  transition: background var(--dur) var(--ease);
}

.mobile-menu-whatsapp:hover,
.mobile-menu-whatsapp:focus-visible {
  background: var(--whatsapp-dark);
  color: #fff;
}

.mobile-menu-whatsapp svg {
  flex: 0 0 auto;
}

/* ── Catalogue price filter ──────────────────────────────────────────────── */
/* The "Price" label was a solid dark filled chip. As an inline chip on a wide
   screen that read as decoration; stretched full-width by the flex column on a
   phone it read as the page's primary button, which is the one thing a label
   must not do. Make it what it is: a label. */
.catalogue-price-title {
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-3);
  font-size: var(--t-eyebrow);
  font-weight: 620;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  justify-content: flex-start;
}

@media (max-width: 760px) {
  .catalogue-price-filter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
  }

  /* Label spans the row, the two inputs sit side by side beneath it. */
  .catalogue-price-title {
    grid-column: 1 / -1;
  }

  .catalogue-price-box {
    min-width: 0;
    width: 100%;
    height: 42px;
  }

  .catalogue-price-box input {
    min-width: 0;
    width: 100%;
  }

  /* Match the sort control to the same touch height. */
  .catalogue-select-shell {
    width: 100%;
  }

  .catalogue-sort select {
    width: 100%;
    min-height: 44px;
  }
}

/* ── Product page: wishlist button ───────────────────────────────────────── */
/* At <=760px this was stretched to width:100% while containing only a heart
   icon and no label — a full-bleed pill with nothing in it, which reads as a
   broken or unlabelled control. It also competed with Enquire and WhatsApp,
   the page's actual primary actions. Keep it a compact icon button beside the
   title, which is the pattern people already recognise from the cards. */
@media (max-width: 760px) {
  .pdp-title-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
  }

  .pdp-wishlist-btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    flex: 0 0 auto;
    border-radius: var(--r-pill);
  }

  .pdp-wishlist-btn svg {
    flex: 0 0 auto;
  }
}

/* ============================================================================
   Admin dashboard
   The old dashboard counted banners and repeated the sidebar nav in a "Control
   panel" box. These styles support a set of tiles that answer what the owner
   actually needs each morning, and two lists they can act from.
   ========================================================================= */

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.metric-card {
  text-align: left;
  cursor: pointer;
  gap: 6px;
}

.metric-card span {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-weight: 620;
  color: var(--ink-3);
}

.metric-card small {
  color: var(--ink-3);
  font-size: var(--t-xs);
}

/* A tile only earns colour when it needs the owner to do something. */
.metric-card.is-urgent {
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: linear-gradient(var(--gold-soft), var(--card));
}

.metric-card.is-urgent strong {
  color: var(--gold-ink);
}

/* The money figure is longer than a count, so let it take the room it needs. */
.metric-card.is-wide strong {
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
}

.dashboard-grid--two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.panel-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* "Open orders" / "Open products" — the list is a summary, this is the way in. */
.panel-heading-link {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-weight: 580;
  letter-spacing: -0.006em;
  padding: 4px 2px;
  transition: color var(--dur-fast) var(--ease);
}

.panel-heading-link:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dashboard-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
}

.dashboard-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dashboard-row-main strong {
  font-weight: 580;
  letter-spacing: -0.012em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-row-main small {
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

.dashboard-row-status,
.dashboard-row-qty {
  flex: 0 0 auto;
  font-style: normal;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-weight: 620;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  white-space: nowrap;
}

.dashboard-row-status.status-new {
  background: var(--gold-soft);
  color: var(--gold-ink);
}

.dashboard-row-status.status-fulfilled {
  background: var(--ok-soft);
  color: var(--ok);
}

.dashboard-row-status.status-cancelled {
  background: var(--danger-soft);
  color: var(--danger);
}

.dashboard-row-qty.is-zero {
  background: var(--danger-soft);
  color: var(--danger);
}

.muted-text {
  color: var(--ink-3);
  font-size: var(--t-sm);
  padding: 6px 12px 10px;
  margin: 0;
}

/* Admin language switcher in the sidebar. */
.admin-lang {
  display: grid;
  gap: 7px;
  padding: 12px 2px 2px;
  border-top: 1px solid var(--line);
}

.admin-lang > span {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-weight: 620;
  color: var(--ink-3);
}

/* ── Floating overlays vs modals ─────────────────────────────────────────── */
/* The WhatsApp bubble (z-index 90) and the admin edit bar (z-index 1200) are
   position:fixed, so they sat on top of the checkout sheet and the mobile
   drawer — the edit bar covered the address field mid-checkout. Nothing should
   float above a dialog the customer is filling in. */
body:has(.modal-backdrop) .whatsapp-fab,
body:has(.modal-backdrop) .admin-edit-bar,
body:has(.mobile-menu) .whatsapp-fab,
body:has(.mobile-menu) .admin-edit-bar,
body:has(.pdp-lightbox) .whatsapp-fab,
body:has(.pdp-lightbox) .admin-edit-bar,
/* The product page's bottom bar has its own WhatsApp button. */
body:has(.pdp-sticky-bar) .whatsapp-fab {
  display: none !important;
}

/* While a dialog is open the page behind it should not scroll. */
body:has(.modal-backdrop) {
  overflow: hidden;
}

/* ── Category removal: choose where the products go ─────────────────── */
/* The confirm row now holds a destination picker, so it has to wrap on a
   phone instead of pushing the Remove button off the edge. */
.category-delete-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.category-move-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.category-move-field > span {
  font-size: 0.85rem;
  color: var(--ink-2, #4a4540);
}

.category-move-field select {
  height: 38px;
  min-width: 0;
  max-width: 100%;
  padding: 0 30px 0 10px;
  border: 1.5px solid var(--line-3, #ded8d1);
  border-radius: 8px;
  background-color: #fff;
  font-size: 0.9rem;
  font-family: inherit;
  color: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b6560' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.category-move-field select:focus-visible {
  outline: 2px solid var(--gold, #b08a54);
  outline-offset: 1px;
}

@media (max-width: 640px) {
  .category-move-field {
    width: 100%;
  }
  .category-move-field select {
    flex: 1;
  }
}

/* This row is now a real mobile interaction (pick a destination, then remove),
   so its buttons need a thumb-sized target instead of the 28px they inherit. */
@media (max-width: 640px) {
  .category-delete-confirm .confirm-yes,
  .category-delete-confirm .confirm-no {
    min-height: 40px;
    padding-inline: 16px;
  }
}

/* ============================================================================
   Material-first home page — hero and collections
   The shop sells surfaces, so the surface is the hero: the copy sits on the
   page background beside the material instead of on top of it behind a scrim,
   and the collections are shown as their own material rather than named in a
   text pill. Everything below 900px keeps the old overlay hero, which reads
   better on a phone than a two-column split.
   ========================================================================= */

.home-hero.home-hero-split {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: stretch;
  min-height: clamp(560px, 72vh, 780px);
  background: var(--surface);
}

.home-hero-split .home-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  padding:
    clamp(44px, 5.4vw, 84px)
    clamp(28px, 3.4vw, 56px)
    clamp(44px, 5.4vw, 84px)
    clamp(24px, 4.6vw, 76px);
}

/* The media stops being a backdrop and becomes the right-hand column. */
.home-hero-split .home-hero-media {
  position: relative;
  inset: auto;
  overflow: hidden;
}

.home-hero-split .home-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Softens the cut between the copy column and the material. */
.home-hero-split .home-hero-scrim {
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    rgba(247, 246, 243, 0.55) 9%,
    rgba(247, 246, 243, 0) 26%
  );
}

/* On light ground the hero type has to invert from the old white-on-photo. */
.home-hero-split .home-hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.9rem, 5.6vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.home-hero-split .home-hero-eyebrow {
  display: flex;
  /* Aligned to the first line, not the block: the announcement wraps to three
     lines on a phone and a centred rule struck straight through it. */
  align-items: flex-start;
  gap: 12px;
  color: var(--gold-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.home-hero-rule {
  display: inline-block;
  flex: 0 0 auto;
  width: 34px;
  height: 1px;
  margin-top: 0.62em;
  background: var(--gold);
}

.home-hero-split .home-hero-subtitle {
  max-width: 30em;
  color: var(--ink-2);
}

.home-hero-split .home-hero-cta {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ink-inverse);
}

.home-hero-split .home-hero-cta:hover {
  background: var(--espresso-soft);
  border-color: var(--espresso-soft);
  color: var(--ink-inverse);
}

/* Every collection visible before the first scroll. */
.home-hero-swatches {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.home-hero-swatches-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.home-hero-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.home-hero-swatch {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  text-decoration: none;
}

.home-hero-swatch-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  color: var(--ink-4);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) ease;
}

.home-hero-swatch-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero-swatch:hover .home-hero-swatch-chip {
  transform: translateY(-2px);
  border-color: var(--gold-line);
}

.home-hero-swatch-name {
  max-width: 72px;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-3);
}

/* ── Collections as material tiles ──────────────────────────────────── */

.home-cat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
}

.home-cat-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  text-decoration: none;
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) ease;
}

.home-cat-tile:hover {
  transform: translateY(-3px);
  border-color: var(--gold-line);
  box-shadow: var(--shadow-md);
}

.home-cat-tile-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-2);
  color: var(--ink-4);
}

.home-cat-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-cat-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 18px;
}

.home-cat-tile-foot strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.home-cat-tile-foot span {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold-ink);
}

/* Display face on the home page headings, so the hero serif is not orphaned. */
.home-section-head h2,
.home-dark-banner h2,
.home-feature-text h2,
.home-testimonials h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.018em;
}

/* ── Phone: back to the overlay hero ────────────────────────────────── */
@media (max-width: 900px) {
  .home-hero.home-hero-split {
    display: block;
    position: relative;
    min-height: clamp(480px, 76vh, 620px);
  }

  .home-hero-split .home-hero-media {
    position: absolute;
    inset: 0;
  }

  .home-hero-split .home-hero-scrim {
    background:
      linear-gradient(180deg, rgba(18, 15, 12, 0.18) 0%, rgba(18, 15, 12, 0.34) 44%, rgba(18, 15, 12, 0.88) 100%);
  }

  .home-hero-split .home-hero-copy {
    position: absolute;
    inset: auto 0 0 0;
    justify-content: flex-end;
    gap: 16px;
    padding: 0 var(--gutter) clamp(26px, 6vw, 40px);
  }

  .home-hero-split .home-hero-title { color: #fff; }
  .home-hero-split .home-hero-eyebrow { color: #e0c79c; }
  .home-hero-split .home-hero-subtitle { color: rgba(255, 255, 255, 0.82); }
  .home-hero-rule { background: #e0c79c; }

  .home-hero-split .home-hero-cta {
    width: 100%;
    border-color: var(--ink-inverse);
    background: var(--ink-inverse);
    color: var(--ink);
  }

  .home-hero-swatches {
    border-top-color: rgba(255, 255, 255, 0.22);
    padding-top: 16px;
  }

  .home-hero-swatches-label { color: rgba(255, 255, 255, 0.7); }
  .home-hero-swatch-name { color: rgba(255, 255, 255, 0.78); }

  .home-hero-swatch-row {
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .home-hero-swatch-row::-webkit-scrollbar { display: none; }

  .home-hero-swatch { flex: 0 0 auto; }

  .home-hero-swatch-chip {
    width: 50px;
    height: 50px;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
  }

  .home-cat-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* ============================================================================
   Home page rhythm
   The page read as dated mostly because everything was the same distance
   apart and the same size. Sections breathe more, headings carry more weight
   against the body text, and the reassurance strip stops shouting now that it
   sits near the end rather than directly under the hero.
   ========================================================================= */

.home-section {
  padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 72px);
}

.home-section-head {
  align-items: flex-end;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.home-section-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.04;
}

.home-section-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* Two full rows of four rather than one row twice on the page. */
.home-products-grid {
  row-gap: clamp(22px, 3vw, 36px);
}

/* ── Reassurance strip, quieted ─────────────────────────────────────── */

.home-trust {
  background: var(--surface);
  border-block: 0;
  border-top: 1px solid var(--line);
  padding: clamp(20px, 3vw, 34px) clamp(20px, 5vw, 72px);
  gap: clamp(16px, 3vw, 40px);
}

.home-trust-item {
  /* Boxes here contradicted the rest of the page, and laying the icon, label
     and sub-line in one row made every second item wrap raggedly. A two-column
     grid keeps the icon beside a stacked label and sub, so nothing wraps. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 3px;
  align-items: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.home-trust-item svg {
  grid-row: span 2;
}

.home-trust-item:hover {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.home-trust-item svg {
  flex: 0 0 auto;
  margin-top: 2px;
  width: 19px;
  height: 19px;
  color: var(--gold);
}

.home-trust-item strong {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
}

.home-trust-item small {
  font-size: 0.78rem;
  color: var(--ink-3);
}

@media (max-width: 760px) {
  .home-trust {
    grid-template-columns: 1fr 1fr;
    row-gap: 20px;
  }
}

/* Six tiles in a row of five leaves one stranded on its own line. Three
   columns gives 3+3 now and 3+2 once the empty category is gone, and the
   bigger tiles show the material far better than six small ones. */
@media (min-width: 1000px) {
  .home-cat-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 26px);
  }
}

/* Alternating tone so the sections read as separate bands instead of one
   continuous white scroll. */
.home-section:has(.home-cat-tiles) {
  background: var(--surface);
}

/* ============================================================================
   Home page, quieted — the Apple/Zara discipline
   That look is not a style you add, it is everything you take away: no card
   borders, no shadows, no badges, no chips. One big image, a name, a price.
   The image does the selling and the whitespace does the rest.
   Scoped to .home-section so the catalogue page keeps its denser cards, where
   a shopper genuinely is comparing dimensions and colours.
   ========================================================================= */

.home-section .product-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.home-section .product-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* A taller frame reads as editorial rather than as a catalogue thumbnail. */
.home-section .product-image {
  display: block;
  /* !important only to beat the blanket 4/3 rule earlier in this file. */
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--r-xs);
}

.home-section .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

/* The only motion on a card: the image breathes. No lift, no shadow. */
.home-section .product-card:hover .product-image img {
  transform: scale(1.04);
}

/* Everything that was competing with the photograph. */
.home-section .featured-badge,
.home-section .product-color-chip,
.home-section .product-dim-row,
.home-section .product-image-overlay {
  display: none !important;
}

.home-section .product-body {
  padding: 14px 2px 0 !important;
  gap: 6px;
}

.home-section .product-cat {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}

.home-section .product-name {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

.home-section .product-price {
  font-size: 0.95rem;
  font-weight: 600;
}

.home-section .product-footer {
  padding: 6px 2px 0 !important;
  border-top: 0 !important;
}

/* The button stops being a button until you are interested in the card. */
.home-section .enquire-btn {
  border-color: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--ink-3) !important;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease), color 160ms;
}

.home-section .product-card:hover .enquire-btn,
.home-section .enquire-btn:focus-visible {
  opacity: 1;
  transform: none;
  color: var(--ink) !important;
}

/* Touch has no hover, so never hide the action there. */
@media (hover: none) {
  .home-section .enquire-btn {
    opacity: 1;
    transform: none;
    color: var(--ink) !important;
  }
}

/* Collections lose their boxes too: image, name, count. */
.home-cat-tile {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.home-cat-tile:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

.home-cat-tile-media {
  border-radius: var(--r-xs);
}

.home-cat-tile-media img {
  transition: transform 900ms var(--ease-out);
}

.home-cat-tile:hover .home-cat-tile-media img {
  transform: scale(1.04);
}

.home-cat-tile-foot {
  padding: 13px 2px 0;
}

/* ── Narrow screens: the grid becomes a swipe rail ──────────────────── */
/* What Zara actually does — a grid on a wide screen, a carousel on a phone,
   because a mouse cannot swipe and a thumb cannot see four columns. */
@media (max-width: 999px) {
  .home-section .home-products-grid,
  .home-cat-tiles {
    /* !important only to beat the canonical "display: grid !important" grid
       rule in decor.css, which is deliberately hard to override. */
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Bleed to the screen edge so the next card is visibly cut off — that is
       the affordance telling a thumb there is more. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 4px;
  }

  .home-section .home-products-grid::-webkit-scrollbar,
  .home-cat-tiles::-webkit-scrollbar { display: none; }

  .home-section .home-products-grid > *,
  .home-cat-tiles > * {
    flex: 0 0 66vw;
    max-width: 280px;
    scroll-snap-align: start;
  }
}

/* The announcement is three clauses long and wrapped to three ragged lines on
   a phone, which is the opposite of the calm this page is going for. Tighter
   tracking and a slightly smaller size fit it to two even lines without
   shortening anyone's copy. */
@media (max-width: 560px) {
  .home-hero-split .home-hero-eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.11em;
    line-height: 1.55;
  }

  .home-hero-rule {
    width: 22px;
    margin-top: 0.7em;
  }
}

/* ============================================================================
   Apple discipline, applied to the whole page
   Four rules carry that look, and they apply everywhere, not just to cards:
     1. one idea per section, centred, with far more air than feels comfortable
     2. a large type jump — the headline is big, everything else is small
     3. no borders, no boxes; media is a rounded panel, nothing else is
     4. the chrome recedes: a thin translucent bar, quiet links with a chevron
   ========================================================================= */

/* ── 1. The bar recedes ─────────────────────────────────────────────── */

.shop-nav-center a {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-2);
}

.shop-nav-center a:hover { color: var(--ink); }

.language-switcher {
  font-size: 0.72rem;
}

/* ── 2. The hero: one idea, centred ─────────────────────────────────── */

@media (min-width: 901px) {
  .home-hero.home-hero-split {
    display: block;
    min-height: 0;
    padding: clamp(64px, 9vh, 120px) var(--gutter) 0;
    background: var(--surface);
  }

  .home-hero-split .home-hero-copy {
    align-items: center;
    max-width: 20em;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    gap: 20px;
  }

  .home-hero-split .home-hero-eyebrow {
    justify-content: center;
  }

  .home-hero-split .home-hero-title {
    font-size: clamp(3rem, 5.6vw, 5.6rem);
    letter-spacing: -0.028em;
  }

  .home-hero-split .home-hero-subtitle {
    max-width: 34em;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  }

  /* The picture becomes a wide rounded panel under the words, not a column
     beside them. */
  .home-hero-split .home-hero-media {
    position: relative;
    inset: auto;
    max-width: var(--page-max);
    margin: clamp(36px, 5vh, 68px) auto 0;
    aspect-ratio: 21 / 9;
    border-radius: clamp(18px, 2vw, 30px);
    overflow: hidden;
  }

  .home-hero-split .home-hero-scrim { display: none; }

  /* The collection swatches sit under the headline, centred, before the image. */
  .home-hero-swatches {
    align-items: center;
    max-width: var(--page-max);
    margin: 8px auto 0;
    border-top: 0;
    padding-top: 0;
  }

  .home-hero-swatch-row { justify-content: center; }
  .home-hero-swatches-label { text-align: center; }
}

/* ── 3. Section headings: centred, large, with the link beneath ─────── */

.home-section-head {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.home-section-head h2 {
  max-width: 16em;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  letter-spacing: -0.024em;
}

/* Apple's quiet call to action: a text link with a chevron, never a button. */
.home-section-link,
.home-dark-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gold-ink);
}

.home-section-link::after,
.home-dark-banner-btn::after {
  content: "›";
  font-size: 1.15em;
  line-height: 1;
  transition: transform var(--dur) var(--ease);
}

.home-section-link:hover::after,
.home-dark-banner-btn:hover::after {
  transform: translateX(3px);
}

.home-dark-banner-btn { color: #d8b884; }

/* ── 4. The band: one sentence, centred, enormous ───────────────────── */

.home-dark-banner {
  padding: clamp(72px, 10vw, 140px) var(--gutter);
}

.home-dark-banner-inner {
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 22em;
  margin: 0 auto;
  text-align: center;
}

.home-dark-banner h2 {
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.024em;
}

.home-dark-banner p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.62);
}

/* ── 5. Why / feature: same air, same restraint ─────────────────────── */

.home-feature-box {
  padding: clamp(72px, 9vw, 130px) var(--gutter);
}

.home-feature-text h2 {
  font-size: clamp(2.1rem, 3.8vw, 3.4rem);
  letter-spacing: -0.024em;
}

.home-feature-img,
.home-feature-img img {
  border-radius: clamp(16px, 1.8vw, 26px);
  overflow: hidden;
}

/* ── 6. The footer recedes furthest ─────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
}

.footer-col a,
.footer-desc,
.footer-bottom-note {
  font-size: 0.8rem;
  color: var(--ink-3);
}

.footer-col a:hover { color: var(--ink); }

.footer-bottom {
  border-top: 1px solid var(--line);
}

/* Media everywhere gets the same soft corner, and nothing else does. */
.home-cat-tile-media,
.home-section .product-image {
  border-radius: clamp(10px, 1vw, 16px) !important;
}

/* Fixes from looking at the centred hero on a real screen. */
@media (min-width: 901px) {
  /* The copy column was capped at 20em, which also squeezed the swatch row
     into two ragged lines. Cap the text itself instead, and let the row use
     the full width. */
  .home-hero-split .home-hero-copy {
    max-width: none;
  }

  .home-hero-split .home-hero-title {
    max-width: 15em;
    margin-inline: auto;
  }

  .home-hero-split .home-hero-subtitle {
    margin-inline: auto;
  }

  /* A rule leading into centred text points at nothing. */
  .home-hero-split .home-hero-rule {
    display: none;
  }

  .home-hero-swatch-row {
    flex-wrap: nowrap;
  }
}

/* The viewAll string already ends in an arrow in all three languages, so the
   chevron was doubling it. The band's button has no arrow of its own. */
.home-section-link::after {
  content: none;
}

/* ============================================================================
   Product page: pick the finish by looking at it
   The type selector was a row of text chips. For a shop with 27 wood finishes
   that is the wrong shape — a code like "F-2315 Obsidian Gold" tells a buyer
   nothing, while the grain tells them everything. Circular swatches showing
   the finish, with the chosen one ringed, and the name spelled out in the
   label above so nothing is lost for a screen reader or a colour-blind
   visitor.
   ========================================================================= */

.pdp-variant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pdp-variant-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px of tappable area with the visible swatch inside it. */
  width: 46px;
  height: 46px;
  padding: 3px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--card);
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease-out);
}

.pdp-variant-swatch img,
.pdp-variant-fill {
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  object-fit: cover;
  background: var(--surface-3);
}

.pdp-variant-swatch:hover {
  border-color: var(--gold-line);
  transform: translateY(-1px);
}

.pdp-variant-swatch.active {
  border-color: var(--gold);
  border-width: 2px;
  padding: 2px;
}

.pdp-variant-swatch:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.pdp-variants-label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
}

/* ── Stock reassurance ──────────────────────────────────────────────── */

.pdp-stock-ready {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ok);
}

.pdp-stock-ready svg {
  flex: 0 0 auto;
  color: var(--ok);
}

/* The unit that makes a price mean something. Quiet and small: it qualifies
   the number, it does not compete with it. */
.price-unit {
  font-size: 0.78em;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
}

.pdp-price .price-unit {
  font-size: 0.44em;
  letter-spacing: 0;
}

/* ============================================================================
   Coverage calculator
   ========================================================================= */

.pdp-coverage {
  margin: 0;
}

.pdp-coverage-toggle {
  /* One line: ruler, title, arrow on the right (they were stacked). */
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  cursor: pointer;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-sm);
  background: var(--gold-soft);
  color: var(--ink);
  font-weight: 650;
  text-align: start;
  text-decoration: none;
}

.pdp-coverage-toggle span { flex: 1; }
.pdp-coverage-toggle svg { color: var(--gold-ink); flex-shrink: 0; }
.pdp-coverage-toggle[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }

.pdp-coverage-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.pdp-coverage-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
  padding: 18px;
  border-radius: var(--r-sm);
  background: var(--surface);
}

.pdp-coverage-body[hidden] { display: none; }
.pdp-coverage-numbers { display: grid; gap: 5px; }

.pdp-coverage-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pdp-coverage-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pdp-coverage-field > span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
}

.pdp-coverage-field input {
  height: 46px;
  min-width: 0;
  padding: 0 12px;
  border: 1.5px solid var(--line-3);
  border-radius: var(--r-xs);
  background: var(--card);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
}

.pdp-coverage-field input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}

.pdp-coverage-result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.pdp-coverage-area {
  font-size: 0.8rem;
  color: var(--ink-3);
}

.pdp-coverage-count {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.pdp-coverage-spare {
  margin: 4px 0 0;
  line-height: 1.45;
  font-size: 0.78rem;
  color: var(--ink-3);
}

.pdp-coverage-total {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.pdp-coverage-total strong { color: var(--ink); }

.pdp-coverage-add {
  align-self: flex-start;
  margin-top: 10px;
  min-height: 46px;
}

@media (max-width: 420px) {
  .pdp-coverage-add { align-self: stretch; }
}

/* ============================================================================
   Navigation, rebuilt
   What dated the bar was not its colour, it was how much was in it: a name
   plus a tagline, four links, three language chips, a green pill with a word
   on it, and two icons in circles — eleven things competing above the fold.
   This removes rather than restyles.
   ========================================================================= */

/* Transparent over the hero, materialising only once you scroll. The class is
   already toggled in JS; it was previously used for a shadow. */
.shop-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  /* Only the hairline animates. Transitioning the background from the
     transparent keyword interpolates through transparent black, which washes
     the warm bar grey on the way in; swapping it instantly is imperceptible. */
  transition: border-color var(--dur) var(--ease);
}

.shop-header.is-scrolled {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: none;
}

/* The wordmark alone. A strapline belongs on the page or in the footer, not
   as a second line of type in a navigation bar. */
.shop-header .brand-lockup small {
  display: none;
}

.shop-header .brand-lockup strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: -0.01em;
}

/* Links: an underline that draws itself, rather than a permanent one. */
.shop-nav-center {
  gap: 30px;
}

.shop-nav-center > a,
.shop-nav-center .nav-dropdown-trigger {
  position: relative;
  padding: 4px 0;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink-2);
}

.shop-nav-center > a::after,
.shop-nav-center .nav-dropdown-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 340ms var(--ease-out);
}

.shop-nav-center > a:hover,
.shop-nav-center .nav-dropdown-trigger:hover,
.shop-nav-center > a.nav-active,
.shop-nav-center .nav-dropdown-trigger.nav-active {
  color: var(--ink);
}

.shop-nav-center > a:hover::after,
.shop-nav-center .nav-dropdown-trigger:hover::after,
.shop-nav-center > a.nav-active::after,
.shop-nav-center .nav-dropdown-trigger.nav-active::after {
  transform: scaleX(1);
}

/* Language: three letters, not three buttons. */
.shop-header .language-switcher {
  gap: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.shop-header .language-switcher button {
  min-width: 30px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  /* ink-4 measured under 2:1 on the cream header, so MK and AL were barely
     there for the two thirds of customers who need them. */
  color: var(--ink-3);
}

.shop-header .language-switcher button:hover { color: var(--ink); }

.shop-header .language-switcher button.active {
  color: var(--ink);
  font-weight: 700;
  background: none;
}

/* One WhatsApp, not two. The floating button is already the most visible
   thing on the page; a green pill in the bar as well was the loudest, least
   2026 element on the site. Remove this rule to bring it back. */
.shop-header .nav-whatsapp {
  display: none;
}

/* Icons without the circles. */
.shop-header .nav-wishlist-link,
.shop-header .nav-cart-link,
.shop-header .nav-hamburger {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  box-shadow: none;
  color: var(--ink);
  transition: background var(--dur) var(--ease);
}

.shop-header .nav-wishlist-link:hover,
.shop-header .nav-cart-link:hover,
.shop-header .nav-hamburger:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

/* A smaller, gold count. It is information, not an alarm. */
.shop-header .cart-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 0;
  background: var(--gold);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
}

/* ── The catalogue gets the same restraint as the home page ─────────── */

.catalogue-page .product-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.catalogue-page .product-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

.catalogue-page .product-image {
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  overflow: hidden;
  border-radius: clamp(10px, 1vw, 16px);
  background: var(--surface-2);
}

.catalogue-page .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

.catalogue-page .product-card:hover .product-image img {
  transform: scale(1.04);
}

.catalogue-page .featured-badge,
.catalogue-page .product-image-overlay {
  display: none !important;
}

.catalogue-page .product-body {
  padding: 14px 2px 0 !important;
}

.catalogue-page .product-footer {
  padding: 6px 2px 0 !important;
  border-top: 0 !important;
}

.catalogue-page .catalogue-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  letter-spacing: -0.024em;
  line-height: 1.03;
}

/* ============================================================================
   Audit fixes — measured, not guessed
   Findings from walking every element on the page at 375px: contrast ratios
   against the actual painted background, computed tap-target sizes, and text
   under 11.5px.
   ========================================================================= */

/* Gold on the muted surface measured 2.67:1 at 11.2px. --gold-ink is the token
   that exists precisely for gold as text on a light ground. */
.price-on-request {
  color: var(--gold-ink) !important;
  font-size: 0.78rem;
}

/* 9.92px uppercase is too small to read comfortably at arm's length. */
.product-cat {
  font-size: 0.7rem;
}

.home-hero-swatch-name,
.home-hero-swatches-label {
  font-size: 0.69rem;
}

/* ── Tap targets that measured under 40px ───────────────────────────── */

/* Was 38x38. Sitting on top of a photograph makes it harder to hit, not
   easier, so it gets the full 44. */
.wishlist-card-button {
  width: 44px !important;
  height: 44px !important;
}

.footer-social-link {
  width: 44px !important;
  height: 44px !important;
}

/* Footer links were 19px tall with 18px between them — a mis-tap every time
   on a phone. Padding rather than height, so the column rhythm survives. */
.footer-col a,
.footer-contact-row {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer-col {
  gap: 0;
}

/* "View all" was 73x23. */
.home-section-link {
  min-height: 44px;
}

@media (max-width: 760px) {
  /* On a phone the footer columns stack, so the taller rows would double the
     footer's height for no benefit; keep them tappable but tighter. */
  .footer-col a,
  .footer-contact-row {
    min-height: 40px;
  }
}

/* The last three the sweep found: footer language buttons at 38x32 and the
   bottom-row links at 20px tall. Both are in the part of the page a thumb
   reaches for last and least accurately. */
.footer-languages button {
  min-width: 44px;
  min-height: 44px;
}

.footer-bottom-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer-bottom-links {
  gap: 4px 18px;
}

/* ============================================================================
   One system, every page
   The secondary pages were never brought across: Inter headings instead of the
   display face, 48px section rhythm instead of the home page's, and bordered
   16px cards from the old vocabulary. That is why they felt like a different
   site. This is the whole visual system stated once and applied to all of them.
   ========================================================================= */

.page h1,
.page-hero h1,
.catalogue-hero h1,
.page h2,
.page-hero h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.04;
}

.page h1,
.page-hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
}

.page h2 {
  font-size: clamp(1.7rem, 2.9vw, 2.6rem);
}

.page h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  letter-spacing: -0.014em;
}

/* The home page's rhythm, so scrolling between pages feels continuous. */
.page > section,
.page-hero {
  padding-block: clamp(48px, 6.5vw, 96px);
}

.page-hero {
  padding-bottom: clamp(28px, 3.5vw, 48px);
}

/* Information cards keep their grouping but lose the boxes: a tinted panel and
   air, matching how media is treated everywhere else. */
.about-why-card,
.about-offering-card,
.contact-card:not(.contact-card-accent) {
  border: 0;
  border-radius: clamp(12px, 1.4vw, 20px);
  background: var(--surface);
  box-shadow: none;
}

.about-why-card:hover,
.about-offering-card:hover,
.contact-card:not(.contact-card-accent):hover {
  border-color: transparent;
  box-shadow: none;
  transform: none;
  background: var(--surface-2);
}

/* The highlighted contact card is deliberately dark with white text. The rule
   above used to match it too, replacing its background but not its text
   colour — which left white on near-white: an invisible card. It keeps its
   emphasis, moved onto the ink token and the shared radius. */
.contact-card.contact-card-accent {
  border: 0;
  border-radius: clamp(12px, 1.4vw, 20px);
  background: var(--ink);
  box-shadow: none;
}

.contact-card.contact-card-accent:hover {
  background: var(--espresso-soft);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

/* A question list reads better as rules than as a stack of boxes. */
.faq-item {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.faq-item:hover {
  border-color: transparent;
  border-bottom-color: var(--line-2);
  box-shadow: none;
  transform: none;
  background: transparent;
}

/* Media on these pages gets the same corner as the product images. */
.about-image,
.about-image img,
.page-hero-media,
.page-hero-media img {
  border-radius: clamp(12px, 1.6vw, 24px);
  overflow: hidden;
}

/* ============================================================================
   Mobile menu, rebuilt
   It was a 320px white drawer with 16px body type and a 36px close button —
   the page still visible behind it, everything small. On a phone the menu is
   the whole interface for a moment, so it should behave like it: a full-screen
   takeover, editorial type you can hit without aiming, and items that arrive
   in sequence rather than all at once.
   ========================================================================= */

.mobile-menu {
  background: color-mix(in srgb, var(--ink) 30%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.mobile-menu-inner {
  width: 100% !important;
  max-width: none !important;
  background: var(--surface);
  /* Replaces the slide-in-from-the-left drawer. */
  animation: menu-rise 380ms var(--ease-out) both;
}

@keyframes menu-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.mobile-menu-header {
  padding: 14px 20px;
  border-bottom: 0;
}

.mobile-menu-header .brand-lockup strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.32rem;
}

/* Was 36x36. */
.mobile-menu-header button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink);
}

.mobile-menu-header button:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

/* ── The list ───────────────────────────────────────────────────────── */

.mobile-nav {
  padding: 8px 20px 20px;
}

.mobile-nav > a,
.mobile-nav > .mobile-nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.45rem, 6.4vw, 1.9rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  /* Each row arrives just after the one above it. */
  animation: menu-item 420ms var(--ease-out) both;
}

.mobile-nav > *:nth-child(1) { animation-delay: 40ms; }
.mobile-nav > *:nth-child(2) { animation-delay: 80ms; }
.mobile-nav > *:nth-child(3) { animation-delay: 120ms; }
.mobile-nav > *:nth-child(4) { animation-delay: 160ms; }
.mobile-nav > *:nth-child(5) { animation-delay: 200ms; }
.mobile-nav > *:nth-child(6) { animation-delay: 240ms; }
.mobile-nav > *:nth-child(7) { animation-delay: 280ms; }
.mobile-nav > *:nth-child(8) { animation-delay: 320ms; }

@keyframes menu-item {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.mobile-nav > .mobile-nav-group-toggle {
  justify-content: space-between;
}

.mobile-nav > a svg,
.mobile-nav > .mobile-nav-group-toggle svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--ink-3);
  transition: transform var(--dur) var(--ease);
}

.mobile-nav-group-toggle svg.is-open {
  transform: rotate(180deg);
}

/* Categories, subordinate to the row that opened them. */
.mobile-nav-sublist {
  display: flex;
  flex-direction: column;
  padding: 4px 0 12px 2px;
  animation: menu-item 320ms var(--ease-out) both;
}

.mobile-nav-sublist a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-2);
}

.mobile-nav-sublist a:hover { color: var(--ink); }

.mobile-nav .cart-badge {
  min-width: 22px;
  height: 22px;
  margin-left: auto;
  background: var(--gold);
  color: #fff;
  font-size: 0.72rem;
  line-height: 22px;
}

/* ── The foot of the menu ───────────────────────────────────────────── */

.mobile-menu-footer {
  padding: 16px 20px 24px;
  border-top: 1px solid var(--line);
  background: transparent;
}

.mobile-menu-footer .language-switcher {
  gap: 4px;
  border: 0;
  background: none;
}

.mobile-menu-footer .language-switcher button {
  min-width: 52px;
  min-height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
}

.mobile-menu-footer .language-switcher button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ink-inverse);
}

.mobile-menu-whatsapp,
.mobile-phone-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-inner,
  .mobile-nav > a,
  .mobile-nav > .mobile-nav-group-toggle,
  .mobile-nav-sublist {
    animation: none !important;
  }
}

/* ============================================================================
   Checkout, and the 16px rule
   Measured: every field in the bag was 15.68px. iOS Safari zooms the whole
   page when a focused input is under 16px, so tapping "Name" during checkout
   jerked the layout and zoomed in — on the one screen where that costs an
   order. It missed by a third of a pixel.
   ========================================================================= */

.checkout-modal input,
.checkout-modal textarea,
.checkout-modal select,
.page input,
.page textarea,
.page select {
  font-size: max(16px, 1rem) !important;
}

/* ── The modal itself ───────────────────────────────────────────────── */

.modal-backdrop {
  background: color-mix(in srgb, var(--ink) 46%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.checkout-modal {
  border: 0;
  border-radius: clamp(18px, 2vw, 28px);
  background: var(--card);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 40px 120px rgba(23, 22, 19, 0.26);
}

.bag-heading h2,
.bag-heading h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

/* Bag rows: a list, not a stack of cards. The photograph gets bigger, because
   it is how someone checks they picked the right finish. */
.bag-item {
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.bag-items > .bag-item:last-child {
  border-bottom: 0;
}

.bag-item-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-xs);
  background: var(--surface-2);
}

.bag-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The total is the one figure that should be unmissable. */
.checkout-summary-total,
.bag-total {
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  font-size: 1.05rem;
}

.bag-total strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

.checkout-modal .primary-button.full {
  min-height: 52px;
  border-radius: var(--r-pill);
  font-size: 1rem;
}

.checkout-modal .modal-close {
  /* min-* rather than width/height: an inherited box-sizing was landing it on
     43px, which is exactly the kind of near-miss that never gets noticed. */
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
}

.checkout-modal .modal-close:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.payment-note {
  font-size: 0.85rem;
  color: var(--ink-3);
}

/* ============================================================================
   The floating button and the contact band
   The floating button was a green pill with a word on it and a green glow —
   the house style of 2016 chat widgets. And the contact band put brand-green
   next to an outlined pill on an espresso panel, which is three visual
   languages in one strip.
   Both are now monochrome: the brand's ink and gold carry it, and WhatsApp is
   identified by its glyph, which is the recognisable part anyway.
   ========================================================================= */

.whatsapp-fab {
  right: clamp(16px, 3vw, 26px);
  bottom: clamp(18px, 3vh, 26px);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ink-inverse);
  /* A neutral shadow, not a coloured halo. */
  box-shadow: 0 10px 30px rgba(23, 22, 19, 0.24);
  transition:
    transform var(--dur) var(--ease-out),
    background var(--dur) var(--ease);
}

.whatsapp-fab:hover {
  transform: translateY(-2px);
  background: var(--espresso-soft);
  box-shadow: 0 14px 36px rgba(23, 22, 19, 0.28);
}

/* Icon only, at every width — the label was the least 2026 thing about it. */
.whatsapp-fab span {
  display: none !important;
}

.whatsapp-fab svg {
  width: 24px;
  height: 24px;
}

/* Clear the cart button when both are on screen, and the sticky product bar.
   The cart button is rendered AFTER the floating button, so "~" never matched
   it — measured: both sat at bottom 26px and overlapped. :has() looks forward
   instead. */
.whatsapp-fab:has(~ .cart-fab),
.pdp-sticky-bar ~ .whatsapp-fab {
  bottom: clamp(84px, 12vh, 100px);
}

/* ── Contact band ───────────────────────────────────────────────────── */

.contact-strip-inner h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  letter-spacing: -0.022em;
  line-height: 1.05;
}

.contact-strip-inner p {
  max-width: 34em;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.66);
}

.contact-strip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The phone number outlined, the message filled: one clear primary, no green. */
.contact-strip .contact-strip-btn {
  min-height: 50px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  font-weight: 600;
}

.contact-strip .secondary-button.contact-strip-btn {
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: transparent;
  color: var(--ink-inverse);
}

.contact-strip .secondary-button.contact-strip-btn:hover {
  border-color: rgba(255, 255, 255, 0.66);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-inverse);
}

.contact-strip .whatsapp-cta-btn,
.contact-strip .primary-button.contact-strip-btn {
  border: 1px solid var(--ink-inverse);
  background: var(--ink-inverse) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.contact-strip .whatsapp-cta-btn:hover,
.contact-strip .primary-button.contact-strip-btn:hover {
  background: #fff !important;
  color: var(--ink) !important;
  transform: translateY(-1px);
}

/* The menu's WhatsApp row is the one place the green still earns its keep:
   it is a deliberate, chosen action rather than something floating over the
   page. Toned to match the rest. */
.mobile-menu-whatsapp {
  border: 0;
  background: var(--ink);
  color: var(--ink-inverse);
}

.mobile-menu-whatsapp:hover {
  background: var(--espresso-soft);
  color: var(--ink-inverse);
}

/* ============================================================================
   Focus, visible on every ground
   The browser's default ring is rgb(23,22,19) — near-black. Measured against
   the footer's rgb(13,13,12) that is 1.07:1: a keyboard user simply loses
   their place the moment they tab into the footer, the contact band or the
   dark banner. Nobody sees this bug by looking at the site with a mouse.

   --gold is the only brand colour that clears WCAG 1.4.11's 3:1 on all four
   grounds this site uses — 5.11 on ink, 5.49 on the footer, 3.28 on surface,
   3.54 on card — so one ring works everywhere.
   ========================================================================= */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  /* Some of these sit on the ink bands where an offset ring can touch the
     element's own edge; a hairline keeps it legible either way. */
  border-radius: inherit;
}

/* Inputs that hide their own outline because the wrapper is the visible field:
   ring the wrapper instead, or focus is invisible inside it. */
.finder-search:focus-within,
.search-box:focus-within,
.search-box-xl:focus-within,
.admin-search:focus-within,
.category-add-input:focus-within,
.catalogue-price-filter:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Never suppress it. */
:where(a, button, input, select, textarea):focus-visible {
  outline-style: solid !important;
}

/* ============================================================================
   The story section with no photograph yet
   With no about image it rendered an empty grey box with a picture icon beside
   the text — which reads as broken rather than as "not set". A section should
   look finished at every stage of a shop's life, so when the image is absent
   the text takes the width and centres, and the empty frame is not drawn at
   all. The moment a photo is uploaded in the admin, the two-column layout
   returns on its own.
   ========================================================================= */

.about-story-inner:has(.about-story-img-fallback) {
  display: block;
  max-width: 44em;
  margin-inline: auto;
  text-align: center;
}

.about-story-inner:has(.about-story-img-fallback) .about-story-img {
  display: none;
}

.about-story-inner:has(.about-story-img-fallback) .about-stats {
  justify-content: center;
}

/* reveal-left slides in from the side, which looks wrong once the text is
   centred rather than sitting in a column. */
.about-story-inner:has(.about-story-img-fallback) .about-story-text.reveal-left {
  transform: translateY(24px);
}

.about-story-inner:has(.about-story-img-fallback) .about-story-text.reveal-left.is-visible {
  transform: none;
}

/* The stats are the strongest thing in this section when there is no picture,
   so they carry the display face like every other figure on the site. */
.about-stats strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.about-stats small {
  font-size: 0.82rem;
  color: var(--ink-3);
}

/* ============================================================================
   The finish wall
   Someone buying wall panels is choosing a FINISH, not a product. The useful
   view is therefore all of them at once, dense enough that the eye can compare
   two woods side by side — which a four-column card grid with names and prices
   cannot do.
   Names stay out of the way until hover or keyboard focus, so the section
   reads as a wall of material rather than as another list. It arrives in a
   diagonal sweep as it scrolls into view: one gesture, not thirty-two.
   ========================================================================= */

.home-finish-wall-section {
  background: var(--surface);
}

.home-section-lead {
  max-width: 34em;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.home-finish-wall {
  display: grid;
  /* Explicit column counts rather than auto-fill: with ten materials, auto-fill
     gave nine across and one orphan on a second row, which reads as a mistake.
     Five columns balance ten into two clean rows and make each swatch about
     220px — big enough to actually judge a wood grain. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 641px) {
  .home-finish-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .home-finish-wall {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(10px, 1vw, 14px);
  }
}

.finish-swatch {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  text-decoration: none;
}

.finish-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

.finish-swatch-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--ink-4);
}

/* The name arrives on demand, over a scrim dark enough to read on any photo. */
.finish-swatch-label {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 10px 9px;
  background: linear-gradient(180deg, rgba(13, 11, 9, 0), rgba(13, 11, 9, 0.86));
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease-out);
}

.finish-swatch-label strong {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}

.finish-swatch-label small {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.finish-swatch:hover img {
  transform: scale(1.06);
}

.finish-swatch:hover .finish-swatch-label,
.finish-swatch:focus-visible .finish-swatch-label {
  opacity: 1;
  transform: none;
}

/* Touch has no hover: show every name, quietly, rather than hiding them all. */
@media (hover: none) {
  .finish-swatch-label {
    opacity: 1;
    transform: none;
    padding: 8px;
  }

  .finish-swatch-label small { display: none; }
}

.finish-wall-more {
  justify-self: center;
  margin-top: clamp(18px, 2vw, 28px);
}



/* ============================================================================
   Tuned for San Francisco
   The heading sizes and weights on this site were chosen for Cormorant, a
   serif with a small x-height that needs to be set large to read. San
   Francisco has a much larger x-height and a heavier stem at the same pixel
   size, so a straight swap leaves every heading looking oversized and shouty.
   These are the adjustments Apple's own type ramp implies: a little smaller,
   tracking tightened as size grows, and weights pulled back — SF was drawn to
   carry hierarchy at 400-600, not at 750-800.
   ========================================================================= */

body {
  /* How SF is meant to be rasterised on macOS; without it the stems thicken
     and it stops looking like the system. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.home-hero-split .home-hero-title {
  font-size: clamp(2.6rem, 4.7vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.05;
}

.home-section-head h2,
.page h1,
.page-hero h1,
.catalogue-hero h1,
.home-dark-banner h2,
.contact-strip-inner h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
}

.page h2,
.home-feature-text h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.018em;
}

.page h3,
.bag-heading h2,
.bag-heading h3 {
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Figures read as display type, so they keep the tighter tracking. */
.about-stats strong,
.home-feature-stats strong,
.pdp-coverage-count,
.bag-total strong {
  font-weight: 600;
  letter-spacing: -0.022em;
}

/* SF carries emphasis at 500-600. The old weights were picked to make Inter
   feel solid and now read as heavy. */
.shop-nav-center > a,
.shop-nav-center .nav-dropdown-trigger {
  font-weight: 500;
}

.shop-header .brand-lockup strong {
  font-weight: 600;
  letter-spacing: -0.015em;
}

.mobile-nav > a,
.mobile-nav > .mobile-nav-group-toggle {
  font-size: clamp(1.32rem, 5.4vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Small uppercase labels need the opposite treatment: SF is tight by default,
   so the eyebrows keep their generous tracking to stay legible. */
.home-hero-eyebrow,
.overline,
.section-kicker span,
.product-cat {
  font-weight: 600;
}

/* The active nav link was 800 — chosen to make Inter feel emphatic. In SF that
   is a black weight next to 500 siblings, which is why the current page shouted
   in the bar. The underline already marks it; 600 is enough. */
.shop-nav-center a.nav-active,
.shop-nav-center .nav-dropdown-trigger.nav-active {
  font-weight: 600;
}

/* ============================================================================
   Variant colours: pick them, don't type them
   The colour field was a bare text box expecting a hex code from memory. It is
   a square you click — the native colour picker — with the hex beside it, and
   a live preview of the finished swatch above the row.
   Square, not round: a wood grain or a stone texture shows more of itself in a
   square, which is why the materials wall uses squares too.
   ========================================================================= */

.colour-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.colour-field-swatch {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1.5px solid var(--line-3);
  border-radius: var(--r-xs);
  /* The chequerboard shows through when no colour is set, so "empty" is
     obviously empty rather than looking like white. */
  background:
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(-45deg, var(--surface-2) 25%, transparent 25%) 0 6px / 12px 12px,
    linear-gradient(45deg, transparent 75%, var(--surface-2) 75%) 6px -6px / 12px 12px,
    linear-gradient(-45deg, transparent 75%, var(--surface-2) 75%) -6px 0 / 12px 12px,
    var(--card);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}

.colour-field-swatch:hover {
  border-color: var(--gold);
}

/* The real input fills the square and is invisible: the square IS the control,
   so the whole 46px is clickable rather than a small browser chip. */
.colour-field-swatch input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
}

.colour-field-swatch:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.colour-field-text {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  border: 1.5px solid var(--line-3);
  border-radius: var(--r-xs);
  background: var(--card);
  font-family: inherit;
  font-size: max(16px, 1rem);
  color: var(--ink);
}

/* ── The live preview above each row ────────────────────────────────── */

.variant-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.variant-preview-swatch {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  background: var(--surface-2);
}

.variant-preview-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.variant-preview-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

/* ── The storefront swatches become squares to match ────────────────── */

.pdp-variant-swatch {
  width: 52px;
  height: 52px;
  border-radius: var(--r-xs);
}

.pdp-variant-swatch img,
.pdp-variant-fill {
  border-radius: calc(var(--r-xs) - 3px);
}

/* A refused upload says which file and why, under the field it came from. */
.upload-problem {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.45;
  color: var(--danger);
}

/* Upload and paste-a-link side by side: the upload is the main path, the
   link stays for a photo that already lives somewhere else. */
.variant-photo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 12px;
  align-items: end;
}

@media (max-width: 640px) {
  .variant-photo-row { grid-template-columns: 1fr; }
}

/* ── Gallery arrangement ────────────────────────────────────────────── */
.gallery-hint { margin: 8px 0 10px; }

.gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery-thumb-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gallery-thumb-image {
  position: relative;
}

.gallery-thumb-position {
  position: absolute;
  top: 6px;
  left: 6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: rgba(23, 22, 19, 0.72);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
}

.gallery-thumb-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.gallery-thumb-btn {
  display: grid;
  place-items: center;
  min-height: 36px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
}

.gallery-thumb-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--ink);
}

.gallery-thumb-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.gallery-thumb-remove:hover:not(:disabled) {
  border-color: var(--danger);
  color: var(--danger);
}

/* ChevronDown turned sideways, so no new icon has to be imported. */
.gallery-arrow-prev { transform: rotate(90deg); }
.gallery-arrow-next { transform: rotate(-90deg); }

/* The finish on a bag line and on an order line. */
.bag-item-finish {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-3);
}

.order-item-finish,
.invoice-item-finish {
  color: var(--ink-3);
  font-weight: 500;
}

/* ── Prices ──────────────────────────────────────────────────────────────── */
/* The unit sat flush against the number inside flex rows ("250 МКД/ panel"),
   where the leading space in the markup collapses. */
.price-unit {
  margin-left: 0.3em;
}

/* "From" in front of a product whose finishes cost different amounts. */
.price-from {
  margin-right: 0.3em;
  font-size: 0.78em;
  font-weight: 500;
  color: var(--ink-3);
}

/* ── Categories: name in each language ───────────────────────────────────── */
.category-info {
  flex-wrap: wrap;
}

.category-names {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 4px;
}

.category-name-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--line-2, #e6e1d6);
  border-radius: var(--r-pill);
  background: var(--card, #fff);
}

.category-name-field:focus-within {
  border-color: var(--accent, #c9a978);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #c9a978) 22%, transparent);
}

.category-name-field > span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.category-name-field input {
  width: 150px;
  min-width: 0;
  height: 30px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.86rem;
  color: var(--ink);
  outline: none;
}

.category-name-field input::placeholder {
  color: var(--ink-4, #b3ad9f);
}

@media (max-width: 640px) {
  .category-names { width: 100%; margin-left: 0; }
  .category-name-field { flex: 1 1 140px; }
  .category-name-field input { width: 100%; }
}

/* ── Shop details: Brand and Settings as one page ────────────────────────── */
.shop-details {
  display: grid;
  gap: 20px;
}

.shop-details .brand-save-bar {
  justify-content: flex-end;
}

/* ── Campaigns ───────────────────────────────────────────────────────────── */
/* A grid column sizes to its longest line by default, and an ad link is one
   very long line; let the fields column shrink so the link truncates. */
.campaign-card .resource-fields {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

/* ── Product rail: one row that moves sideways ───────────────────────────── */
.product-rail-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.product-rail-arrows {
  display: inline-flex;
  gap: 8px;
}

.product-rail-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2, #e2ddd2);
  border-radius: 50%;
  background: var(--card, #fff);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.product-rail-btn:hover:not(:disabled) {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.product-rail-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.product-rail-btn:disabled {
  opacity: 0.32;
  cursor: default;
}

.product-rail-track {
  --rail-gap: 20px;
  --rail-cards: 4;
  display: flex;
  gap: var(--rail-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Room for the card shadow and the focus ring, which overflow would clip. */
  padding: 6px 2px 10px;
  margin: -6px -2px -10px;
}

.product-rail-track::-webkit-scrollbar {
  display: none;
}

.product-rail-track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 12px;
}

.product-rail-track > * {
  flex: 0 0 calc((100% - (var(--rail-cards) - 1) * var(--rail-gap)) / var(--rail-cards));
  min-width: 0;
  scroll-snap-align: start;
}

@media (max-width: 1100px) {
  .product-rail-track { --rail-cards: 3; }
}

/* A part of the next card stays in view, which is what tells a thumb there
   is more to swipe. */
@media (max-width: 820px) {
  .product-rail-track { --rail-cards: 2.3; --rail-gap: 14px; }
}

@media (max-width: 640px) {
  .product-rail-arrows { display: none; }

  .product-rail-track {
    --rail-cards: 1.55;
    --rail-gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Homepage, 2026. One idea per section, photos at one shape, few words —
   the way Apple and Zara Home build a front page. Everything here is new
   (hx-*), so none of it has to fight the older home rules.
   ════════════════════════════════════════════════════════════════════════════ */

.hx-section {
  position: relative;
  width: min(100% - 2 * var(--gutter, 24px), 1320px);
  margin-inline: auto;
}

.hx-section {
  padding-block: clamp(56px, 8vw, 112px) 0;
}

.hx-section:last-of-type {
  padding-bottom: clamp(56px, 8vw, 112px);
}

.hx-eyebrow {
  margin: 0 0 14px;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

/* Section heading: left, with its one link on the right, no ornaments. */
.hx-head,
.product-rail-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px 24px;
  margin: 0 0 clamp(20px, 2.6vw, 32px) !important;
  text-align: left !important;
}

.hx-head h2,
.product-rail-head h2 {
  max-width: none !important;
  margin: 0;
  font-size: var(--t-h2) !important;
  font-weight: 650;
  line-height: var(--lh-h);
  letter-spacing: var(--track-h) !important;
  color: var(--ink);
}

.hx-head h2::after,
.product-rail-head h2::after {
  display: none !important;
}

.hx-link {
  flex: 0 0 auto;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-3);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease);
}

.hx-link:hover {
  border-color: var(--ink);
}

/* Buttons: pills, three weights. */
.hx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.hx-btn:active { transform: scale(0.98); }
.hx-btn-light { background: #fff; color: var(--ink); }
.hx-btn-light:hover { background: rgba(255, 255, 255, 0.86); }
.hx-btn-glass {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hx-btn-glass:hover { background: rgba(255, 255, 255, 0.24); }
.hx-btn-dark { background: var(--ink); color: #fff; }
.hx-btn-dark:hover { background: var(--espresso-soft); }

/* ── 1. Hero ───────────────────────────────────────────────────────────── */
.hx-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: min(100% - 2 * var(--gutter, 24px), 1440px);
  min-height: clamp(520px, 82vh, 860px);
  margin: 12px auto 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--espresso);
  isolation: isolate;
}

.hx-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hx-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  .hx-hero-image[data-loaded="true"] { animation: hx-settle 1350ms var(--ease-out); }
  .hx-hero-actions .hx-btn svg { transition: transform var(--dur) var(--ease-out); }
  .hx-hero-actions .hx-btn:focus-visible svg { transform: translateX(3px); }

  @media (hover: hover) {
    .hx-hero-actions .hx-btn:hover svg { transform: translateX(3px); }
  }

  @supports (animation-timeline: view()) and (animation-range: exit 0% exit 100%) {
    @media (min-width: 901px) {
      .hx-hero { view-timeline: --hero-scroll block; }
      .hx-hero-media {
        animation: hx-hero-drift linear both;
        animation-timeline: --hero-scroll;
        animation-range: exit 0% exit 100%;
      }
    }
  }
}

@keyframes hx-settle { from { transform: scale(1.04); } }
@keyframes hx-hero-drift { to { transform: translateY(5%) scale(1.12); } }

/* Dark only where the words sit, so the photo stays a photo. */
.hx-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 60%);
}

.hx-hero-copy {
  width: 100%;
  max-width: 760px;
  padding: clamp(28px, 5vw, 72px);
  color: #fff;
}

.hx-hero .hx-eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.hx-hero-title {
  margin: 0;
  font-size: var(--t-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: #fff;
  text-wrap: balance;
}

.hx-hero-lead {
  max-width: 34em;
  margin: 18px 0 0;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  text-wrap: pretty;
}

.hx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* No photo yet: a calm dark panel still reads as intentional. */
.hx-hero.is-plain {
  min-height: clamp(420px, 60vh, 620px);
  background: linear-gradient(135deg, var(--espresso), var(--espresso-soft));
}

/* ── 3. Product cards on the homepage: photo, name, price. ─────────────── */
.hx-card {
  display: grid;
  gap: 14px;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* !important only to beat the site-wide 4:3 rule for product photos. */
.hx-card .product-image {
  display: block;
  position: relative;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.hx-card .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

.hx-card .product-image-fallback {
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--ink-3);
}
.hx-card:hover .product-image img {
  transform: scale(1.04);
}

.hx-card-body {
  display: grid;
  gap: 4px;
  padding-inline: 2px;
  color: var(--ink);
  text-decoration: none;
}

.hx-card-body .product-cat {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}

.hx-card-body .product-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.hx-card-body .product-price {
  margin-top: 4px;
  font-size: 0.95rem;
  font-weight: 600;
}

.hx-card-finishes {
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* ── 2. Assurances: one quiet row right under the banner ──────────────── */
.hx-assure {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100% - 2 * var(--gutter, 24px), 1320px);
  margin: clamp(18px, 2.4vw, 28px) auto 0;
  border-block: 1px solid var(--line);
}

.hx-assure-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 18px clamp(10px, 1.6vw, 22px);
  color: var(--ink);
}

.hx-assure-item + .hx-assure-item {
  border-left: 1px solid var(--line);
}

.hx-assure-item svg {
  flex: 0 0 auto;
  color: var(--gold-ink);
}

.hx-assure-item span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.hx-assure-item strong {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
}

.hx-assure-item small {
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* ── 3. Shop by type: a numbered index of names ──────────────────────────── */
.hx-cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 64px);
  border-top: 1px solid var(--line);
}

.hx-cat {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: clamp(18px, 2vw, 24px) 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.hx-cat em {
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
}

.hx-cat strong {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.hx-cat span {
  font-size: var(--t-sm);
  color: var(--ink-3);
  white-space: nowrap;
}

.hx-cat svg {
  color: var(--ink-4);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.hx-cat:hover strong {
  color: var(--gold-ink);
}

.hx-cat:hover svg,
.hx-cat:focus-visible svg {
  color: var(--ink);
  transform: translateX(4px);
}

/* ── 5. Story: one photo, one idea ───────────────────────────────────────── */
.hx-story {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 88px);
  width: min(100% - 2 * var(--gutter, 24px), 1320px);
  margin: clamp(64px, 9vw, 128px) auto 0;
}

.hx-story.is-plain {
  grid-template-columns: minmax(0, 720px);
}

.hx-story-media {
  position: relative;
  display: block;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.hx-story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hx-story-tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 32px);
  padding: 8px 12px 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
}

.hx-story-copy .hx-eyebrow {
  color: var(--gold-ink);
}

.hx-story-copy h2 {
  margin: 0;
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: var(--track-display, -0.03em);
  color: var(--ink);
}

.hx-story-copy > p:not(.hx-eyebrow) {
  max-width: 46ch;
  margin: 20px 0 0;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-2);
}

.hx-story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.hx-btn-line {
  border: 1px solid var(--line-3);
  background: transparent;
  color: var(--ink);
}

.hx-btn-line:hover {
  border-color: var(--ink);
}

/* ── 6. Why the material: four facts ─────────────────────────────────────── */
.hx-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.hx-benefit {
  padding-top: 22px;
  border-top: 1px solid var(--ink);
}

.hx-benefit svg {
  color: var(--ink);
}

.hx-benefit h3 {
  margin: 18px 0 8px;
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.hx-benefit p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-3);
}

/* ── 7. How ordering works: three numbered steps ─────────────────────────── */
.hx-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hx-step {
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.hx-step-num {
  display: block;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-ink);
}

.hx-step h3 {
  margin: 26px 0 8px;
  font-size: 1.12rem;
  font-weight: 650;
  color: var(--ink);
}

.hx-step p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-2);
}

/* ── 9. Questions: four, opened one at a time ───────────────────────────── */
.hx-faq-wrap {
  max-width: 880px;
}

.hx-faq {
  border-top: 1px solid var(--line);
}

.hx-faq-item {
  border-bottom: 1px solid var(--line);
}

.hx-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 2px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.hx-faq-item summary::-webkit-details-marker {
  display: none;
}

.hx-faq-item summary svg {
  flex: 0 0 auto;
  color: var(--ink-3);
  transition: transform var(--dur) var(--ease);
}

.hx-faq-item[open] summary svg {
  transform: rotate(45deg);
}

.hx-faq-item p {
  max-width: 64ch;
  margin: -6px 0 0;
  padding: 0 2px 24px;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-2);
}

/* ── 10. A person to ask ─────────────────────────────────────────────────── */
.hx-consult {
  width: min(100% - 2 * var(--gutter, 24px), 1320px);
  margin: clamp(64px, 9vw, 128px) auto clamp(48px, 6vw, 80px);
  border-radius: var(--r-xl);
  background: var(--gold-soft);
  color: var(--ink);
}

.hx-consult-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 28px 48px;
  padding: clamp(32px, 5vw, 64px);
}

.hx-consult h2 {
  margin: 0;
  font-size: var(--t-h2);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: var(--track-h, -0.02em);
  color: var(--ink);
}

.hx-consult p {
  max-width: 56ch;
  margin: 14px 0 0;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-2);
}

.hx-consult-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hx-consult-actions .hx-btn {
  gap: 8px;
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hx-assure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-assure-item:nth-child(odd) { border-left: 0; }
  .hx-assure-item:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .hx-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .hx-story { grid-template-columns: 1fr; }
  .hx-consult-inner { grid-template-columns: 1fr; }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hx-hero {
    width: 100%;
    min-height: min(78vh, 640px);
    min-height: min(78svh, 640px);
    margin-top: 0;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
  }

  .hx-hero-copy {
    padding: 28px var(--gutter, 20px) 32px;
  }

  .hx-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hx-hero-actions .hx-btn {
    width: 100%;
  }

  .hx-head h2,
  .product-rail-head h2 {
    font-size: 1.6rem !important;
  }

  .hx-cats { grid-template-columns: 1fr; }
  .hx-steps { grid-template-columns: 1fr; }
  .hx-benefits { grid-template-columns: 1fr; }
  .hx-assure-item { padding: 14px 10px; }
  .hx-assure-item small { display: none; }
  .hx-consult { width: 100%; border-radius: 0; margin-bottom: 0; }
  .hx-consult-inner { padding: 40px var(--gutter, 20px) 44px; }
  .hx-consult-actions .hx-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-card .product-image img { transition: none; }
}

/* ── Checkout: first and last name side by side ──────────────────────────── */
.checkout-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 420px) {
  .checkout-split { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Orders: an inbox. One short row per order, the chosen order beside it.
   ════════════════════════════════════════════════════════════════════════════ */
.oc {
  display: grid;
  gap: 14px;
}

.oc-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
}

.oc-search {
  flex: 1 1 auto;
}

.oc-export {
  flex: 0 0 auto;
}

.oc-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.oc-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.oc-tabs button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.oc-tab-count {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 0.74rem;
  text-align: center;
}

.oc-tabs button.active .oc-tab-count {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.oc-layout {
  display: grid;
  gap: 16px;
  align-items: start;
}

@media (min-width: 1100px) {
  .oc-layout.has-detail {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.9fr);
  }
}

/* The list */
.oc-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}

.oc-list li + li {
  border-top: 1px solid var(--line);
}

.oc-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1.2fr) minmax(0, 1fr) auto 104px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 10px 16px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.oc-row:hover {
  background: var(--card-muted);
}

.oc-row.is-selected {
  background: var(--gold-soft);
  box-shadow: inset 3px 0 0 var(--gold);
}

.oc-row-id {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.oc-row-main {
  display: grid;
  min-width: 0;
}

.oc-row-main strong,
.oc-row-items {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-row-main strong {
  font-size: 0.95rem;
  font-weight: 600;
}

/* New orders read as unread. */
.oc-row.status-new .oc-row-main strong {
  font-weight: 750;
}

.oc-row-main small {
  font-size: 0.78rem;
  color: var(--ink-3);
}

.oc-row-items {
  min-width: 0;
  font-size: 0.86rem;
  color: var(--ink-2);
}

.oc-row-total {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.oc-pill {
  justify-self: end;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.oc-pill.status-new { background: #e8f0fe; color: #1a56c4; }
.oc-pill.status-confirmed { background: var(--warn-soft); color: var(--warn); }
.oc-pill.status-fulfilled { background: var(--ok-soft); color: var(--ok); }
.oc-pill.status-cancelled { background: var(--surface-2); color: var(--ink-3); }

/* With the detail open, the list keeps only what tells orders apart. */
@media (min-width: 1100px) {
  .oc-layout.has-detail .oc-row {
    grid-template-columns: 46px minmax(0, 1fr) auto 96px;
  }

  .oc-layout.has-detail .oc-row-items {
    display: none;
  }
}

/* The chosen order */
.oc-detail {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-md);
}

@media (min-width: 1100px) {
  .oc-detail {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}

.oc-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.oc-detail-id {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-3);
}

.oc-detail-head h2 {
  margin: 2px 0 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.oc-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
}

@media (min-width: 1100px) {
  .oc-close { display: none; }
}

.oc-status-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface-2);
}

.oc-status-btn {
  min-height: 36px;
  padding: 0 6px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.oc-status-btn.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line-2);
}

.oc-status-btn.active.status-new { color: #1a56c4; }
.oc-status-btn.active.status-confirmed { color: var(--warn); }
.oc-status-btn.active.status-fulfilled { color: var(--ok); }

.oc-block {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: var(--card-muted);
  border: 1px solid var(--line);
}

.oc-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.oc-contact-link,
.oc-address,
.oc-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.oc-contact-link {
  font-weight: 600;
}

.oc-contact-link svg,
.oc-address svg,
.oc-note svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--ink-3);
}

.oc-note {
  color: var(--ink-2);
  font-style: italic;
}

.oc-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.92rem;
}

.oc-item em {
  font-style: normal;
  color: var(--ink-3);
}

.oc-item strong {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.oc-item-total {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-weight: 700;
}

.oc-item-total span {
  font-size: 0.84rem;
  color: var(--ink-2);
  font-weight: 600;
}

.oc-item-total strong {
  font-size: 1.1rem;
}

.oc-detail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.oc-meta {
  font-size: 0.78rem;
  color: var(--ink-3);
}

/* Courier: tap a field to copy it. */
.courier-box {
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed var(--line-3);
}

.courier-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.courier-box-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.courier-copy-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.courier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.courier-chip {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: copy;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.courier-chip:hover:not(:disabled) {
  border-color: var(--ink);
}

.courier-chip.is-copied {
  border-color: var(--ok);
  background: var(--ok-soft);
}

.courier-chip-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-3);
}

.courier-chip.is-copied .courier-chip-label {
  color: var(--ok);
}

.courier-chip-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 600;
}

/* Top to bottom in the order of B Post's form; only the two short ones at
   the end share a row. */
.courier-chip {
  grid-column: 1 / -1;
}

.courier-chip.courier-reference,
.courier-chip.courier-cod {
  grid-column: auto;
}

.courier-chip.courier-address .courier-chip-value,
.courier-chip.courier-packageName .courier-chip-value,
.courier-chip.courier-description .courier-chip-value {
  white-space: normal;
}

/* A town B Post does not list: its import would refuse the order. */
.courier-chip.is-warning {
  border-color: var(--warn);
  background: var(--warn-soft);
}

.courier-chip-note {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--warn);
  white-space: normal;
}

.courier-size {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-3);
}

.courier-size-options {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
}

.courier-size-options button {
  min-width: 38px;
  padding: 5px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2, var(--ink));
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.courier-size-options button.active {
  background: var(--ink);
  color: var(--card);
}

/* The description is optional and only filled when a finish was chosen. */
.courier-chip.courier-description.is-empty {
  display: none;
}

.courier-chip.is-empty {
  cursor: default;
  border-style: dashed;
}

.courier-chip.is-empty .courier-chip-value {
  color: var(--ink-4);
  font-weight: 400;
}

/* Phone and tablet: the order opens over the list. */
@media (max-width: 1099px) {
  .oc-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main total" "items pill";
    row-gap: 4px;
  }

  .oc-row-id { display: none; }
  .oc-row-main { grid-area: main; }
  .oc-row-total { grid-area: total; justify-self: end; }
  .oc-row-items { grid-area: items; }
  .oc-pill { grid-area: pill; }

  .oc-detail {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 70;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
  }
}

@media (max-width: 520px) {
  .oc-toolbar { flex-wrap: wrap; }
  .oc-export { width: 100%; justify-content: center; }
  .courier-grid { grid-template-columns: 1fr; }
}

/* Bag: products and delivery above the total, so the total is plainly what
   the customer pays the courier. */
.bag-subtotals {
  display: grid;
  gap: 6px;
  margin: 4px 0 8px;
  font-size: 0.92rem;
  color: var(--ink-2, var(--ink));
}

.bag-subtotals > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.bag-subtotals > div > span:last-child {
  font-weight: 600;
  color: var(--ink);
}

.oc-item.oc-item-delivery {
  color: var(--ink-3);
}

/* Invoice: products and delivery, then the total. */
.invoice-subtotals {
  display: grid;
  gap: 4px;
  margin: 14px 0 0 auto;
  width: min(320px, 100%);
}

.invoice-subtotals > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.invoice-subtotals dt,
.invoice-subtotals dd {
  margin: 0;
}

/* ── Smooth scrolling ────────────────────────────────────────────────────
   On a laptop trackpad a sideways row of products caught any slightly
   diagonal swipe, so the page stopped scrolling while the pointer was over
   it. With a mouse or trackpad the row now moves only with its arrows;
   phones still swipe it. Live blur behind the header and the buttons over
   photos was redrawn on every frame of a scroll; solid colour looks the same
   and costs nothing. */
@media (hover: hover) and (pointer: fine) {
  .product-rail-track {
    overflow-x: hidden;
    overscroll-behavior-x: auto;
  }
}

.shop-header.is-scrolled {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.wishlist-button,
.hx-btn-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.wishlist-card-button {
  background: rgba(255, 255, 255, 0.92);
}

.hx-btn-glass {
  background: rgba(23, 22, 19, 0.28);
}

/* ════════════════════════════════════════════════════════════════════════════
   Product page, 2026 (pd-*). Photo on the left that stays in view, the buy
   box on the right in reading order, details folded underneath. New class
   names, so nothing here fights the older pdp rules.
   ════════════════════════════════════════════════════════════════════════════ */
.pd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  width: min(100% - 2 * var(--gutter, 24px), 1320px);
  margin: 8px auto 0;
  align-items: start;
}

/* The column runs the full height of the grid, so the photo inside it can
   stay in view while the details scroll past. */
.pd-gallery {
  align-self: stretch;
}

.pd-gallery-sticky {
  position: sticky;
  top: 92px;
}

.pd-main-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  cursor: zoom-in;
}

.pd-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-image-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--ink-4);
}

.pd-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: var(--t-xs);
  font-weight: 600;
}

.pd-sale {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
}

.pd-photo-note {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font-size: var(--t-xs);
  font-weight: 600;
}

.pd-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.pd-thumbs::-webkit-scrollbar { display: none; }

.pd-thumb {
  flex: 0 0 72px;
  height: 72px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-thumb:hover { opacity: 1; }

.pd-thumb.active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--ink);
}

/* ── Buy box ─────────────────────────────────────────────────────────────── */
.pd-info {
  max-width: 520px;
  padding-top: 6px;
}

.pd-category {
  margin: 0 0 12px;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold-ink);
}

.pd-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pd-title {
  margin: 0;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--ink);
}

.pd-wishlist {
  position: static !important;
  flex: 0 0 auto;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid var(--line) !important;
  background: var(--card) !important;
  box-shadow: none !important;
}

.pd-price {
  display: flex;
  align-items: baseline;
  gap: 4px 10px;
  margin: 16px 0 0;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.pd-price .price-unit,
.pd-price small {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-3);
}

.pd-price-was {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-4);
  text-decoration: line-through;
}

.pd-price-request {
  display: grid;
  gap: 2px;
  margin-top: 16px;
}

.pd-price-request strong { font-size: 1.15rem; color: var(--ink); }
.pd-price-request span { font-size: var(--t-sm); color: var(--ink-3); }

.pd-lead {
  margin: 18px 0 0;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-2);
}

/* Finish picker */
.pd-finishes {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.pd-finishes-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0 0 12px;
  font-size: var(--t-sm);
  color: var(--ink-3);
}

.pd-finishes-label strong {
  font-weight: 600;
  color: var(--ink);
}

.pd-finish-count {
  margin-inline-start: auto;
  font-size: var(--t-xs);
  white-space: nowrap;
}

.pd-swatches {
  --swatch-size: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--swatch-size));
  gap: 8px;
  max-width: 440px;
}

.pd-swatch {
  position: relative;
  width: var(--swatch-size);
  height: var(--swatch-size);
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  cursor: pointer;
}

.pd-swatch img,
.pd-swatch-fill {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-swatch.active::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--card);
  content: "";
  pointer-events: none;
}

.pd-swatches.has-named-finishes {
  display: flex;
  flex-wrap: wrap;
}

.pd-swatch.pd-swatch-name {
  aspect-ratio: auto;
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: var(--swatch-size);
  padding: 8px 12px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--t-xs);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pd-finish-note {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: var(--t-sm);
}

.pd-text-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* One row: how many, and one button. */
.pd-buy {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}

.pd-qty {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 54px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-pill);
}

.pd-qty button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.pd-qty span {
  min-width: 28px;
  text-align: center;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.pd-add {
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.pd-add:hover { background: var(--espresso-soft); }
.pd-add:active { transform: scale(0.99); }
.pd-add:disabled { background: var(--ink-4); cursor: not-allowed; }

.pd-buy-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.pd-in-bag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ok);
}

/* Stock, delivery, a person to ask: one line each. */
.pd-facts {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.pd-facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink-2);
}

.pd-facts svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--ink-3);
}

.pd-facts li.is-ok,
.pd-facts li.is-ok svg { color: var(--ok); }

.pd-facts li.is-low,
.pd-facts li.is-low svg { color: var(--warn); }

.pd-facts a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Details, folded. */
.pd-details {
  margin-top: 26px;
  border-top: 1px solid var(--line);
}

.pd-detail {
  border-bottom: 1px solid var(--line);
}

.pd-detail summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.pd-detail summary::-webkit-details-marker { display: none; }

.pd-detail summary svg {
  color: var(--ink-3);
  transition: transform var(--dur) var(--ease);
}

.pd-detail[open] summary svg { transform: rotate(45deg); }

.pd-detail > p {
  margin: -4px 0 0;
  padding: 0 2px 20px;
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--ink-2);
}

.pd-specs {
  margin: -4px 0 0;
  padding: 0 2px 16px;
}

.pd-specs div {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  padding: 10px 0;
  border-top: 1px dashed var(--line);
}

.pd-specs div:first-child { border-top: 0; }

.pd-specs dt {
  font-size: var(--t-sm);
  color: var(--ink-3);
}

.pd-specs dd {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.pd-related {
  margin-bottom: clamp(48px, 7vw, 96px);
}

@media (max-width: 900px) {
  .pd-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pd-gallery-sticky { position: static; }
  .pd-main-image { aspect-ratio: 1 / 1; }
  .pd-info { max-width: none; }
}

@media (max-width: 640px) {
  .pd-grid { width: 100%; }
  .pd-main-image { border-radius: 0; }
  .pd-thumbs { padding-inline: var(--gutter, 20px); }
  .pd-info { padding-inline: var(--gutter, 20px); }
  .pd-qty button { width: 40px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Products page, 2026 (cg-*): a title, one toolbar, an even grid of the
   homepage's cards. One product no longer fills half the screen.
   ════════════════════════════════════════════════════════════════════════════ */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cg-page {
  width: min(100% - 2 * var(--gutter, 24px), 1320px);
  margin: 0 auto clamp(56px, 8vw, 112px);
}

.cg-head {
  padding: 8px 0 clamp(20px, 3vw, 32px);
}

.cg-crumbs {
  padding: 0 0 14px !important;
}

.cg-head h1 {
  margin: 0;
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: var(--track-display, -0.03em);
  color: var(--ink);
}

.cg-head p {
  margin: 10px 0 0;
  font-size: var(--t-sm);
  color: var(--ink-3);
}

/* It scrolls with the page: kept stuck under the floating header, the two
   see-through bars overlapped and photos showed through the gap. */
.cg-toolbar {
  display: grid;
  gap: 12px;
  margin-bottom: clamp(20px, 2.6vw, 32px);
  padding: 12px 0;
  border-block: 1px solid var(--line);
}

.cg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.cg-category { display: none !important; }

.cg-chips button {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.cg-chips button:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.cg-chips button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.cg-tools {
  display: flex;
  gap: 8px;
}

.cg-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 240px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink-3);
}

.cg-search:focus-within {
  border-color: var(--ink);
}

.cg-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
}

.cg-search input::-webkit-search-cancel-button { display: none; }

.cg-search button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}

.cg-sort {
  position: relative;
  display: flex;
  align-items: center;
}

.cg-sort select {
  height: 38px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  appearance: none;
  cursor: pointer;
}

.cg-sort svg {
  position: absolute;
  right: 12px;
  pointer-events: none;
  color: var(--ink-3);
}

.cg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: clamp(28px, 3vw, 44px) clamp(14px, 1.6vw, 22px);
}

.cg-grid .hx-card .product-image {
  aspect-ratio: 1 !important;
}

.cg-head h1 { scroll-margin-top: 96px; }

.cg-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: clamp(28px, 5vw, 56px);
}

.cg-pagination :is(a, .cg-current-page) {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 8px;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}

.cg-pagination a:hover { background: var(--surface-2); }

.cg-pagination .cg-current-page {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--card);
}

.cg-page-gap {
  padding-inline: 2px;
  color: var(--ink-3);
}

.cg-card-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 2px 0;
}

.cg-card-swatches a {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink-2);
}

.cg-card-swatches img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.cg-more-finishes {
  font-size: 0.67rem;
  font-weight: 700;
}

.cg-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: clamp(48px, 8vw, 96px) 16px;
  text-align: center;
  color: var(--ink-3);
}

.cg-empty h2 {
  margin: 8px 0 0;
  font-size: 1.3rem;
  color: var(--ink);
}

.cg-empty p { margin: 0 0 12px; }

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

@media (max-width: 860px) {
  .cg-tools { width: 100%; min-width: 0; }
  .cg-search { flex: 1 1 auto; width: auto; min-width: 0; }
  .cg-sort { flex: 0 1 auto; min-width: 0; max-width: 46%; }
  .cg-sort select { width: 100%; text-overflow: ellipsis; }
}

@media (max-width: 640px) {
  .cg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-pagination :is(a, .cg-current-page) { min-width: 32px; padding-inline: 5px; }
  .cg-chips { display: none; }
  .cg-category { display: flex !important; max-width: none; }
  .cg-category select { min-height: 44px; }
  .cg-search, .cg-sort select { min-height: 44px; }
}

.pd-price .price-unit {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* ── Product cards: no box, no shadow, no lift ───────────────────────────
   The older site-wide card rules lifted the card on hover, gave it a white
   box and a shadow, and turned the name gold. A shop of this kind lets the
   photograph do the work: the image eases in a little inside its frame and
   the name is underlined. Nothing else moves. */
.hx-card,
.hx-card:hover,
.hx-card:focus-within {
  transform: none !important;
  border-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
}

.hx-card .product-image {
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}

.hx-card .product-image img {
  transition: transform 1200ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}

.hx-card .product-image img,
.cg-card-swatches img,
.pd-swatch img,
.pd-thumb img,
.pd-main-image img {
  transform: scale(var(--finish-detail-scale, 1));
}

.hx-card:hover .product-image img {
  transform: scale(var(--finish-detail-scale, 1.03)) !important;
}

.hx-card .product-name,
.hx-card:hover .product-name,
.hx-card-body:hover .product-name {
  color: var(--ink) !important;
}

.hx-card .product-name {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur) var(--ease);
}

.hx-card:hover .product-name {
  text-decoration-color: currentColor;
}

/* The heart sits quietly on the photo until it is wanted. */
.hx-card .wishlist-card-button {
  box-shadow: none !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .hx-card:hover .product-image img { transform: scale(var(--finish-detail-scale, 1)) !important; }
}

/* ── Search boxes: one ring, on the box ──────────────────────────────────
   The site-wide focus ring (kept on purpose, so keyboard users never lose
   their place) also drew on the text field inside a rounded search box: a
   hard rectangle inside the pill. The field inside is invisible by design,
   so the box it sits in shows focus instead, with the same soft ring the
   other fields use. */
.cg-search input,
.admin-search input,
.cg-search input:focus,
.admin-search input:focus,
.cg-search input:focus-visible,
.admin-search input:focus-visible {
  outline-width: 0 !important;
  outline-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.cg-search:focus-within,
.admin-search:focus-within {
  outline: none !important;
  border-color: var(--ink-3) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent);
}

/* The sort menu and the buttons beside it: the soft ring, not a hard one. */
.cg-sort select:focus,
.cg-sort select:focus-visible {
  outline-width: 0 !important;
  outline-color: transparent !important;
  border-color: var(--ink-3);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent);
}

/* Field hints are sentences ("Live in a village? Choose the nearest
   town…"), not labels: they were set with the wide letter-spacing meant for
   short uppercase eyebrows, which spread every word apart. */
.field-hint,
.checkout-modal .field-hint {
  letter-spacing: normal !important;
  text-transform: none !important;
  font-size: 0.8rem;
  font-weight: 500 !important;
  line-height: 1.45;
  color: var(--ink-3);
}

/* ── Text fields: a calm focus, everywhere ───────────────────────────────
   Clicking into any field drew a heavy 3px black outline around it (fields
   always count as keyboard-focused, so the keyboard ring showed on every
   click). A field shows focus by its own border instead: it darkens and a
   soft halo appears, which is just as clear and does not look like an
   error. Buttons and links keep the gold keyboard ring. */
/* :where() keeps this rule at the lowest priority, so a field that sits
   inside a box of its own (the search boxes below) is never given a halo. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), textarea, select):focus {
  outline-width: 0 !important;
  outline-color: transparent !important;
  border-color: var(--ink-2, var(--ink)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent) !important;
}

/* Fields drawn without a border of their own (inside a search box, the
   quantity stepper) leave focus to the box around them. */
.cg-search input:focus,
.cg-search input:focus-visible,
.admin-search input:focus,
.admin-search input:focus-visible {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Fields with a border of their own: the border darkens as well, so the
   focused field is plain to see, not just a faint halo. */
.field :is(input, select, textarea):focus,
.checkout-modal :is(input, select, textarea):focus,
.pdp-coverage-field input:focus {
  border-color: var(--ink-2, var(--ink)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent) !important;
}

/* ── Header: a flush bar, not a floating pill ────────────────────────────
   An older rule still floated the header 10px below the top with rounded
   corners, so photos scrolled into view above it and around its corners.
   It sits on the very top edge now, full width, square; on scroll it turns
   an almost solid surface with one hairline underneath. */
.shop-header,
.shop-header.is-scrolled {
  top: 0 !important;
  margin-top: 0 !important;
  margin-inline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.shop-header.is-scrolled {
  background: color-mix(in srgb, var(--surface) 97%, transparent) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* ── Product photo: smaller, with thumbnails beside it ──────────────────
   A 4:5 photo at more than half the page width stood about 1000px tall and
   pushed everything else below the fold. It is square now and never taller
   than the screen, with a slim column of thumbnails on its left, arrows to
   flip through, and a quiet counter. */
@media (min-width: 901px) {
  .pd-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

.pd-gallery-sticky.has-thumbs {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.pd-gallery-sticky .pd-main-image {
  aspect-ratio: 1 / 1;
  max-height: calc(100vh - 132px);
  max-height: calc(100svh - 132px);
  width: 100%;
  margin-inline: auto;
}

.pd-gallery-sticky.has-thumbs .pd-thumbs {
  flex-direction: column;
  max-height: calc(100vh - 132px);
  max-height: calc(100svh - 132px);
  margin-top: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.pd-gallery-sticky.has-thumbs .pd-thumb {
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
}

@media (prefers-reduced-motion: no-preference) {
  .pd-main-image img[data-loaded="true"] { animation: pd-fade 360ms var(--ease-out); }

  @keyframes pd-fade {
    from { opacity: 0.68; scale: 1.02; }
  }
}

.pd-nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.pd-nav-prev { left: 14px; }
.pd-nav-next { right: 14px; }

.pd-main-image:hover .pd-nav,
.pd-nav:focus-visible {
  opacity: 1;
}

.pd-nav:hover { transform: scale(1.06); }

.pd-count {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: rgba(23, 22, 19, 0.6);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (hover: none) {
  .pd-nav { display: none; }
}

@media (max-width: 900px) {
  .pd-gallery-sticky.has-thumbs {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
  }

  .pd-gallery-sticky .pd-main-image {
    max-height: none;
  }

  .pd-gallery-sticky.has-thumbs .pd-thumbs {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .pd-gallery-sticky.has-thumbs .pd-thumb {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
  }
}

/* The thumbnail column is exactly as tall as the photo and scrolls inside
   when there are more thumbnails than fit. */
@media (min-width: 901px) {
  .pd-gallery-sticky.has-thumbs {
    align-items: stretch;
  }

  .pd-gallery-sticky.has-thumbs .pd-thumbs {
    height: 0;
    min-height: 100%;
    max-height: none;
    scrollbar-width: none;
  }

  .pd-gallery-sticky.has-thumbs .pd-thumbs::-webkit-scrollbar { display: none; }
}

/* Phone: the thumbnail strip is the width of the screen and scrolls
   sideways inside it, rather than growing to fit every thumbnail. */
@media (max-width: 900px) {
  .pd-gallery-sticky.has-thumbs {
    align-items: stretch;
  }

  .pd-gallery-sticky.has-thumbs .pd-thumbs {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* ── Product page bottom bar ─────────────────────────────────────────────
   Shown only once the Add button has scrolled out of view. The same Add as
   the page; WhatsApp is a calm round icon, not a bright green block. */
.pdp-sticky-bar.pd-sticky {
  border-top: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--surface) 97%, transparent) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 -10px 30px rgba(23, 22, 19, 0.06) !important;
  padding-bottom: env(safe-area-inset-bottom);
}

.pd-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: min(100% - 2 * var(--gutter, 24px), 1320px);
  margin: 0 auto;
  padding: 10px 0;
}

.pd-sticky-product {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pd-sticky-product img {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--surface-2);
}

.pd-sticky-product span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.pd-sticky-product strong,
.pd-sticky-product small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-sticky-product strong {
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ink);
}

.pd-sticky-product small {
  font-size: var(--t-xs);
  color: var(--ink-3);
}

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

.pd-sticky-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pd-sticky-add:hover { background: var(--espresso-soft); }

.pd-sticky-wa {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-3);
  border-radius: 50%;
  background: var(--card);
  color: #1fa855;
  transition: border-color var(--dur) var(--ease);
}

.pd-sticky-wa:hover { border-color: #1fa855; }

/* The page ends above the bar, so the footer's last line is not hidden. */
body:has(.pd-sticky) .site-footer {
  padding-bottom: 84px;
}

@media (max-width: 520px) {
  .pd-sticky-product img { display: none; }
  .pd-sticky-add { padding: 0 16px; }
}

@media (max-width: 360px) {
  .pd-sticky-add span { display: none; }
  .pd-sticky-add { width: 46px; padding: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Checkout on one screen (co-*). Details on the left, the order and its
   button on the right, nothing to scroll on a computer. On a phone it is a
   full-height sheet with the button kept at the bottom.
   ════════════════════════════════════════════════════════════════════════════ */
.checkout-modal.co-modal {
  display: block;
  width: min(1000px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  padding: 0 !important;
  overflow: hidden;
  scrollbar-gutter: auto;
}

.co-modal .modal-close {
  z-index: 3;
}

.co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
}

.co-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ── Left: details ── */
.co-details {
  min-height: 0;
  padding: clamp(24px, 3vw, 36px);
  overflow-y: auto;
}

.co-details .co-title {
  margin-bottom: 20px;
}

.co-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 14px;
}

.co-modal .field {
  gap: 6px;
}

.co-modal .field > span {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ink-2) !important;
}

.co-modal .field input,
.co-modal .field select {
  height: 46px;
  min-height: 46px;
  padding: 0 14px;
}

.co-modal .field textarea {
  min-height: 72px;
  max-height: 120px;
  padding: 10px 14px;
}

.co-hint {
  margin: 8px 0 0 !important;
}

.co-note-btn {
  margin-top: 10px;
}

.co-details > .field {
  margin-top: 14px;
}

/* ── Right: the order ── */
.co-summary {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(24px, 3vw, 36px);
  background: var(--surface-2);
}

.co-summary-head {
  display: grid;
  gap: 2px;
  padding-right: 44px; /* room for the close button */
  margin-bottom: 16px;
}

.co-summary-head span {
  font-size: var(--t-sm);
  color: var(--ink-3);
}

.co-items {
  flex: 1 1 auto;
  min-height: 64px;
  /* As tall as the screen allows after the heading, totals and button. */
  max-height: max(140px, calc(100vh - 420px));
  max-height: max(140px, calc(100svh - 420px));
  margin: 0 -6px;
  padding: 0 6px;
  overflow-y: auto;
}

.co-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.co-item:first-child {
  padding-top: 2px;
}

.co-item-image {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--card);
  color: var(--ink-4);
}

.co-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.co-item-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.co-item-info strong {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.co-item-info small {
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.co-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.co-qty {
  height: 30px;
}

.co-qty button {
  width: 28px;
  height: 28px;
}

.co-remove {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}

.co-remove:hover {
  background: var(--card);
  color: var(--ink);
}

.co-item-total {
  font-size: 0.9rem;
  font-weight: 650;
  white-space: nowrap;
  color: var(--ink);
}

.co-totals {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
}

.co-totals div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.co-totals dt,
.co-totals dd {
  margin: 0;
}

.co-totals dd {
  font-weight: 600;
  color: var(--ink);
}

.co-totals .co-grand {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  font-size: 1.05rem;
  color: var(--ink);
}

.co-totals .co-grand dt {
  font-weight: 650;
}

.co-totals .co-grand dd {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.co-submit-wrap {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.co-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.co-submit:hover { background: var(--espresso-soft); }
.co-submit:disabled { opacity: 0.6; cursor: wait; }

/* The truck starts the sentence and wraps with it, rather than standing
   apart, centred on two lines. */
.co-pay {
  display: block;
  margin: 0;
  padding-inline: 8px;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
  text-wrap: balance;
}

.co-pay svg {
  display: inline-block;
  margin-right: 6px;
  vertical-align: -3px;
}

/* ── Phone: one column, a full-height sheet, the button always in reach ── */
@media (max-width: 760px) {
  .checkout-modal.co-modal {
    width: 100vw;
    max-height: 100vh;
    max-height: 100svh;
    height: 100vh;
    height: 100svh;
    border-radius: 0 !important;
    overflow-y: auto;
  }

  .co-grid {
    display: block;
    max-height: none;
  }

  .co-details {
    overflow: visible;
    padding: 24px var(--gutter, 20px) 8px;
  }

  .co-details .co-title {
    padding-right: 44px;
  }

  .co-summary {
    padding: 20px var(--gutter, 20px) 0;
  }

  .co-items {
    max-height: none;
  }

  .co-submit-wrap {
    position: sticky;
    bottom: 0;
    margin: 18px calc(var(--gutter, 20px) * -1) 0;
    padding: 12px var(--gutter, 20px) calc(12px + env(safe-area-inset-bottom));
    background: var(--surface-2);
    border-top: 1px solid var(--line);
  }
}

/* The total rides on the button only on a phone, where the summary is
   further down the sheet. */
.co-submit-total {
  display: none;
  font-weight: 500;
  opacity: 0.85;
}

@media (max-width: 760px) {
  .modal-backdrop:has(.co-modal) {
    padding: 0 !important;
    place-items: stretch !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .checkout-modal.co-modal {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .co-submit-total {
    display: inline;
  }
}

@media (max-width: 420px) {
  /* First and last name stay side by side; the rest take the full width. */
  .co-fields > :nth-child(n + 3) {
    grid-column: 1 / -1;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Easy for everyone, including older customers arriving from Facebook on a
   phone: text that is large enough and dark enough to read without glasses,
   buttons big enough to hit, and a phone number to call instead of typing.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  /* The palest grey (placeholders, small labels) was 2.4:1 on the page;
     this is 3.6:1. */
  --ink-4: #868174;
}

@media (max-width: 760px) {
  :root {
    --t-body: 1rem;       /* 16px */
    --t-sm: 0.9375rem;    /* 15px, was 14 */
    --t-xs: 0.8125rem;    /* 13px, was 12.5 */
    --t-eyebrow: 0.72rem;
  }

  /* Labels above the checkout fields. */
  .co-modal .field > span {
    font-size: 0.95rem !important;
  }

  /* Quantity buttons in the bag: at least 40px to press. */
  .co-qty {
    height: 40px;
  }

  .co-qty button {
    width: 40px;
    height: 38px;
  }

  .co-remove {
    width: 40px;
    height: 40px;
  }

  .co-item-info strong {
    white-space: normal;
  }

  .cg-chips button {
    height: 44px;
    padding: 0 18px;
  }

}

/* "Prefer to order by phone? Call +389 70 000 000" — one tap dials. */
.co-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink-2);
  font-size: var(--t-sm);
  text-align: center;
  text-decoration: none;
}

.co-call strong {
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}

.co-call:hover {
  border-color: var(--ink-3);
}

.pd-facts a[href^="tel:"] {
  font-weight: 700;
  white-space: nowrap;
}

/* After "Add to bag": the next step, plainly, under the button. */
.pd-added {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ok) 7%, var(--card));
  animation: pd-fade 260ms ease-out;
}

.pd-added p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ok);
}

.pd-added p span {
  font-weight: 500;
  color: var(--ink-3);
}

.pd-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ok);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  cursor: pointer;
}

.pd-checkout:hover {
  background: color-mix(in srgb, var(--ok) 85%, black);
}

/* Narrow phones: "Додај во кошничка" stays on one line beside the quantity. */
@media (max-width: 480px) {
  .pd-qty button { width: 38px; }
  .pd-qty span { min-width: 24px; }
  .pd-add {
    padding: 0 14px;
    gap: 8px;
    white-space: nowrap;
  }
}

@media (max-width: 350px) {
  .pd-buy { flex-wrap: wrap; }
  .pd-qty { width: 100%; justify-content: space-between; }
}

/* A field still missing after pressing the button: outlined in red, its
   label red too, so it is found at a glance. */
.field.is-invalid > span {
  color: #b42318 !important;
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: #d92d20 !important;
  background: #fff7f6 !important;
}

.co-modal .error-note {
  font-size: var(--t-sm);
  font-weight: 600;
}

.checkout-done-pay {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--t-sm);
  color: var(--ink-2);
}

/* Five ways to reach the shop (call, WhatsApp, email, Facebook, Instagram)
   in centred rows, so the last row never leaves one card stranded on the
   left. */
.contact-cards {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1040px !important;
}

.contact-cards .contact-card {
  flex: 1 1 280px;
  max-width: 320px;
}

@media (max-width: 640px) {
  .contact-cards .contact-card { max-width: none; }
}

/* ── Footer links on the dark footer ─────────────────────────────────────
   Hovering a link turned it the page's near-black text colour, on a
   near-black footer, so it vanished. Links rest in a light grey and turn
   white, underlined, on hover or keyboard focus. */
.site-footer .footer-col a,
.site-footer .footer-contact-row,
.site-footer .footer-bottom-links a {
  color: rgba(255, 255, 255, 0.72) !important;
  transition: color var(--dur) var(--ease);
}

.site-footer .footer-col a:hover,
.site-footer .footer-col a:focus-visible,
.site-footer .footer-contact-row:hover,
.site-footer .footer-contact-row:focus-visible,
.site-footer .footer-bottom-links a:hover,
.site-footer .footer-bottom-links a:focus-visible {
  color: #fff !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  opacity: 1;
}

.site-footer .footer-social-link {
  color: rgba(255, 255, 255, 0.8) !important;
}

.site-footer .footer-social-link:hover,
.site-footer .footer-social-link:focus-visible {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Phones: the banner opens with the title, one sentence and the buttons.
   The announcement line above the title ran to three lines of small
   spaced capitals, and the row of promises right under the banner says
   the same things. */
@media (max-width: 640px) {
  .hx-hero-copy > .hx-eyebrow {
    display: none;
  }
}


/* ── iPhone: text at the size it was designed, not "boosted" ──────────────
   Without this, Safari and Facebook's in-app browser on iPhone enlarge some
   blocks of text on their own, so the page looked bigger and busier on a
   phone than anywhere else. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* On phones, keep the homepage text on a solid panel below the photo. */
@media (max-width: 640px) {
  .hx-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0 !important;
  }

  .hx-hero-media {
    position: relative;
    height: clamp(150px, 32vh, 244px);
    height: clamp(150px, 32svh, 244px);
    z-index: auto;
  }

  .hx-hero-image { object-position: center 58%; }

  .hx-hero-shade {
    display: none;
  }

  .hx-hero .hero-rise {
    animation: none;
  }

  .hx-hero .hero-rise {
    opacity: 1;
    transform: none;
  }

  .hx-hero-copy {
    padding: 20px var(--gutter, 20px) 16px !important;
    border-top: 1px solid var(--line-inverse);
    background: linear-gradient(135deg, var(--espresso), var(--espresso-soft));
  }

  .hx-hero-title {
    font-size: clamp(1.625rem, 7.4vw, 2.05rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .hx-hero-lead {
    margin-top: 8px;
    font-size: 0.9375rem;
    line-height: 1.42;
    color: #e4d9cc;
  }

  .hx-hero-actions {
    gap: 2px !important;
    margin-top: 14px !important;
  }

  .hx-hero-actions .hx-btn {
    min-height: 48px;
    font-size: 0.98rem;
  }

  .hx-hero-actions .hx-btn-glass {
    justify-self: center;
    width: auto;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* Section headings a size calmer on a phone. */
  .hx-head h2,
  .product-rail-head h2 {
    font-size: 1.5rem !important;
  }

  .hx-story-copy h2 {
    font-size: 1.9rem;
  }
}

/* Phones: the benefits and the steps were long stacks of full-width blocks.
   Benefits become a 2x2 grid; steps become compact rows with the number
   beside the text. Less scrolling, the same words. */
@media (max-width: 640px) {
  .hx-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 16px !important;
  }

  .hx-benefit {
    padding-top: 14px;
  }

  .hx-benefit svg {
    width: 22px;
    height: 22px;
  }

  .hx-benefit h3 {
    margin: 10px 0 4px;
    font-size: 0.98rem;
  }

  .hx-benefit p {
    font-size: 0.85rem;
    line-height: 1.45;
  }

  .hx-steps {
    gap: 0 !important;
    border-top: 1px solid var(--line);
  }

  .hx-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 12px;
    padding: 16px 0;
    border-radius: 0;
    background: none;
    border-bottom: 1px solid var(--line);
  }

  .hx-step-num {
    grid-row: span 2;
    font-size: 1.6rem;
    line-height: 1.1;
  }

  .hx-step h3 {
    margin: 0 0 4px;
    font-size: 1rem;
  }

  .hx-step p {
    font-size: 0.9rem;
  }
}

/* Admin login: Macedonian first, Albanian beside it in a quieter voice. */
.login-card .login-alt { color: var(--ink-3, #6b675f); font-weight: 400; }
.login-card h1 .login-alt { font-size: .62em; margin-left: .35em; letter-spacing: 0; }
.login-card p .login-alt { font-size: .92em; }

/* Dashboard: the steps a new shop still needs, until they are all done. */
.setup-checklist { display: grid; gap: 14px; }
.setup-checklist .setup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.setup-checklist .setup-head h2 { margin: 0; font-size: 1.15rem; }
.setup-checklist .setup-head span { color: var(--ink-3, #6b675f); font-size: .9rem; }
.setup-checklist ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.setup-checklist li button {
  width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line, #e6e1d8); border-radius: 14px; background: transparent;
  text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.setup-checklist li button:hover { border-color: var(--ink-4, #868174); }
.setup-checklist .setup-mark {
  width: 24px; height: 24px; border-radius: 999px; border: 1.5px solid var(--ink-4, #868174);
  display: inline-grid; place-items: center;
}
.setup-checklist li.is-done .setup-mark { background: #2f6b4f; border-color: #2f6b4f; color: #fff; }
.setup-checklist li.is-done strong { color: var(--ink-3, #6b675f); text-decoration: line-through; text-decoration-thickness: 1px; }
.setup-checklist .setup-copy { display: grid; gap: 2px; min-width: 0; }
.setup-checklist .setup-copy strong { font-weight: 600; }
.setup-checklist .setup-copy em { font-style: normal; font-weight: 400; font-size: .8rem; color: var(--ink-3, #6b675f); margin-left: 8px; }
.setup-checklist .setup-copy small { color: var(--ink-3, #6b675f); }

/* Long editors (a product, a banner, the shop details): Save stays in reach at
   the bottom of the screen instead of being a long scroll away, which on a
   phone meant typing a price and then hunting for the button. */
.resource-panel .row-actions,
.banner-studio .row-actions,
.shop-details .brand-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--paper, #fbf9f5);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line, #e6e1d8);
}
.shop-details .brand-save-bar { padding-left: 16px; padding-right: 16px; background: #fff; }

/* Where a dashboard step lands: a short outline so the eye finds it. */
.is-jump-target { outline: 2px solid #2f6b4f; outline-offset: 4px; border-radius: 16px; transition: outline-color .6s ease; }

/* ── Invoice: plain black and white, one A4 page ─────────────────────────
   No colour, no tinted boxes: it is printed on an office printer, often in
   grey, and gold headings and shaded cards came out faint. */
.invoice-paper.inv {
  display: flex; flex-direction: column; gap: 28px;
  min-height: 0; color: #111; background: #fff;
  font-size: 14px; line-height: 1.45; letter-spacing: 0;
  border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.inv h1, .inv h2, .inv p, .inv dl, .inv dd { margin: 0; }
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 20px; border-bottom: 2px solid #111; }
.inv-shop { display: flex; align-items: center; gap: 16px; min-width: 0; }
.inv-logo { height: 56px; width: auto; filter: grayscale(1) contrast(1.15); }
.inv-shop strong { display: block; font-size: 19px; font-weight: 700; }
.inv-shop span { display: block; color: #333; font-size: 13px; }
.inv-meta { text-align: right; }
.inv-meta h1 { font-size: 26px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #111; }
.inv-meta dl { margin-top: 8px; display: grid; gap: 2px; }
.inv-meta dl div { display: flex; justify-content: flex-end; gap: 10px; }
.inv-meta dt { color: #555; }
.inv-meta dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-parties { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; }
.inv-parties h2, .inv-items th {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #555;
}
.inv-parties h2 { margin-bottom: 6px; }
.inv-parties p + p { margin-top: 2px; }
.inv-parties strong { font-size: 15px; }
.inv-items { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.inv-items th { text-align: left; padding: 0 0 8px; border-bottom: 1.5px solid #111; }
.inv-items td { padding: 11px 0; border-bottom: 1px solid #d6d6d6; vertical-align: top; }
.inv-items th:not(:first-child), .inv-items td:not(:first-child) { text-align: right; padding-left: 16px; white-space: nowrap; }
.inv-finish { display: block; color: #444; font-size: 13px; }
.inv-sums { margin-left: auto; width: min(300px, 100%); display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.inv-sums div { display: flex; justify-content: space-between; gap: 16px; }
.inv-sums dt { color: #333; }
.inv-sums .inv-grand { margin-top: 6px; padding-top: 10px; border-top: 2px solid #111; font-size: 18px; font-weight: 700; }
.inv-sums .inv-grand dt { color: #111; }
.inv-notes { font-size: 13px; color: #222; padding: 10px 12px; border: 1px solid #bbb; border-radius: 4px; }
.inv-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid #d6d6d6; color: #444; font-size: 13px; text-align: center; }

@media (max-width: 600px) {
  .inv-head { flex-direction: column; }
  .inv-meta { text-align: left; }
  .inv-meta dl div { justify-content: flex-start; }
  .inv-parties { grid-template-columns: minmax(0, 1fr); }
  .inv-items { font-size: 13px; }
}

@media print {
  .invoice-paper.inv { box-shadow: none !important; border-radius: 0 !important; font-size: 12pt; }
  .inv-head, .inv-sums, .inv-parties { break-inside: avoid; }
  .inv-items tr { break-inside: avoid; }
}
.inv .inv-sums { margin: 0 0 0 auto; }
/* "320 МКД / панел", not "320 МКД/ панел". */
.pd-price .price-unit { margin-left: .28em !important; }

/* "New order" note at the top of the admin, while the owner is elsewhere. */
.new-order-note {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; margin: 0 0 16px; border-radius: 14px;
  background: #eaf3ee; border: 1px solid #b9d7c5; color: #1f4a36;
}
.new-order-note > span { flex: 1 1 220px; min-width: 0; }
.new-order-note .primary-button { padding: 8px 14px; }

/* ── Admin lists: products and categories ────────────────────────────────
   One white card with room around everything: the toolbar used to run into
   the card's edges, the filters wrapped onto a second line, the title said
   "Products" twice and every row carried a red Delete. */
.admin-list-panel {
  display: grid; gap: 18px;
  background: #fff; border: 1px solid var(--line, rgba(23,22,19,.08)); border-radius: 20px;
  padding: clamp(16px, 2.4vw, 28px);
}
.admin-list-panel .admin-search, .alp-search {
  flex: 1 1 320px; display: flex; align-items: center; gap: 10px; min-width: 0;
  height: 48px; padding: 0 16px; border: 1px solid var(--line-2, #e4e0d8); border-radius: 14px; background: var(--surface, #f7f6f3);
}
.alp-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; outline: none; }
.alp-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.alp-toolbar .primary-button { height: 48px; white-space: nowrap; }
.alp-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.alp-segments {
  display: inline-flex; gap: 2px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--surface, #f7f6f3); border-radius: 999px;
}
.alp-segments::-webkit-scrollbar { display: none; }
.alp-segments button {
  flex: 0 0 auto; border: 0; background: transparent; color: var(--ink-3, #6b675f);
  padding: 8px 14px; border-radius: 999px; font: inherit; font-size: .9rem; font-weight: 500;
  text-transform: none; white-space: nowrap; cursor: pointer;
}
.alp-segments button.active { background: #fff; color: var(--ink, #171613); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.alp-count { color: var(--ink-3, #6b675f); font-size: .88rem; white-space: nowrap; }
.alp-categories { display: flex; gap: 8px; flex-wrap: wrap; }
.alp-categories button {
  border: 1px solid var(--line-2, #e4e0d8); background: #fff; color: var(--ink-2, #3b3833);
  padding: 7px 14px; border-radius: 999px; font: inherit; font-size: .86rem; text-transform: none; cursor: pointer;
}
.alp-categories button.active { background: var(--ink, #171613); border-color: var(--ink, #171613); color: #fff; }
.alp-list { display: grid; border-top: 1px solid var(--line, rgba(23,22,19,.08)); }
.alp-row {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto auto 18px; align-items: center; gap: 16px;
  width: 100%; padding: 14px 10px; border: 0; border-bottom: 1px solid var(--line, rgba(23,22,19,.08));
  background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 0;
}
.alp-row:hover { background: var(--surface, #f7f6f3); }
.alp-thumb { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; background: var(--surface-2, #f0eee9); display: grid; place-items: center; color: var(--ink-4, #868174); }
.alp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.alp-main { display: grid; gap: 3px; min-width: 0; }
.alp-main strong { font-size: .98rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alp-main small { color: var(--ink-3, #6b675f); font-size: .84rem; }
.alp-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.alp-price s { color: var(--ink-4, #868174); font-weight: 400; margin-right: 4px; }
.alp-price em { font-style: normal; font-weight: 400; color: var(--ink-3, #6b675f); }
.alp-badges { display: flex; gap: 6px; justify-content: flex-end; min-width: 150px; }
.alp-chevron { color: var(--ink-4, #868174); }
@media (max-width: 760px) {
  .alp-row { grid-template-columns: 52px minmax(0, 1fr) 16px; grid-template-areas: "thumb main chev" "thumb meta chev"; row-gap: 6px; padding: 12px 4px; }
  .alp-thumb { grid-area: thumb; width: 52px; height: 52px; }
  .alp-main { grid-area: main; }
  .alp-price { grid-area: meta; font-size: .9rem; }
  .alp-badges { grid-area: meta; justify-self: end; min-width: 0; }
  .alp-chevron { grid-area: chev; }
  .alp-toolbar .primary-button { flex: 1 1 100%; justify-content: center; }
}

/* Categories */
.category-panel .category-lead { margin: 0; }
.category-panel .category-add-row { display: flex; gap: 12px; flex-wrap: wrap; }
.category-panel .category-add-input {
  flex: 1 1 320px; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px;
  border: 1px solid var(--line-2, #e4e0d8); border-radius: 14px; background: var(--surface, #f7f6f3);
}
.category-panel .category-add-input input { flex: 1; border: 0; background: transparent; font: inherit; outline: none; min-width: 0; }
.category-panel .category-add-row .primary-button { height: 48px; }
.category-panel .category-list { display: grid; border-top: 1px solid var(--line, rgba(23,22,19,.08)); gap: 0; }
.category-panel .category-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 16px 6px; border: 0; border-bottom: 1px solid var(--line, rgba(23,22,19,.08)); border-radius: 0; background: transparent; box-shadow: none;
}
.category-panel .category-info { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); align-items: center; gap: 16px; min-width: 0; }
.category-panel .category-title { display: grid; gap: 3px; min-width: 0; }
.category-panel .category-title strong { font-size: 1rem; font-weight: 600; }
.category-panel .category-title small { color: var(--ink-3, #6b675f); font-size: .82rem; }
.category-panel .category-names { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 10px; }
.category-panel .category-name-field {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px;
  border: 1px solid var(--line-2, #e4e0d8); border-radius: 12px; background: #fff;
}
.category-panel .category-name-field span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-4, #868174); }
.category-panel .category-name-field input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; outline: none; }
.category-panel .category-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.category-panel .category-actions .secondary-button { height: 40px; padding: 0 14px; }
.category-panel .category-delete {
  height: 40px; padding: 0 12px; border: 0; background: transparent; color: #a33b2f;
  border-radius: 10px; font: inherit; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.category-panel .category-delete:hover { background: #fbeceb; }
@media (max-width: 900px) {
  .category-panel .category-row { grid-template-columns: minmax(0, 1fr); }
  .category-panel .category-info { grid-template-columns: minmax(0, 1fr); }
  .category-panel .category-names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-panel .category-actions { justify-content: flex-start; }
}

/* ── Homepage: category tiles with a photo, and a price in the banner ── */
.hx-hero-price {
  display: inline-flex; align-self: flex-start; margin: 0 0 18px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px);
  color: #fff; font-size: .95rem; font-weight: 600; letter-spacing: 0;
}
@media (min-width: 900px) {
  .hx-hero-title { font-size: clamp(2.6rem, 4.6vw, 4.4rem); max-width: 14ch; }
}
/* Product rows: a quiet bin, and "Delete? Yes / No" in place. */
.alp-row { grid-template-columns: 60px minmax(0, 1fr) auto auto auto 18px; }
.alp-actions { display: flex; align-items: center; justify-content: flex-end; }
.alp-delete {
  width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink-4, #868174); cursor: pointer;
}
.alp-delete:hover { background: #fbeceb; color: #a33b2f; }
.alp-confirm { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; white-space: nowrap; }
.alp-confirm button { height: 32px; padding: 0 12px; border-radius: 9px; font: inherit; font-size: .85rem; cursor: pointer; }
.alp-yes { border: 0; background: #a33b2f; color: #fff; }
.alp-no { border: 1px solid var(--line-2, #e4e0d8); background: #fff; color: inherit; }
.alp-row.is-confirming { background: #fdf4f3; }
@media (max-width: 760px) {
  .alp-row { grid-template-columns: 52px minmax(0, 1fr) auto 16px; grid-template-areas: "thumb main actions chev" "thumb meta meta chev"; }
  .alp-actions { grid-area: actions; }
  .alp-badges { justify-self: end; }
}

/* ── Homepage, from the approved mockups: a warm gold accent, names on the
   category photos, boxed facts, numbered steps and a photo banner. ── */
:root { --gold: #d4b06f; --gold-deep: #9a7340; --gold-soft: #f6efe2; }
.hx-btn-gold { background: var(--gold); color: #1c1a16; display: inline-flex; align-items: center; gap: 8px; }
.hx-btn-gold:hover { background: #c79f5e; color: #1c1a16; }

/* Collection photography and captions */
.hx-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr));
  gap: clamp(10px, 1.5vw, 20px);
}

.hx-tile {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  color: inherit;
  text-decoration: none;
}

.hx-tile:only-child { width: min(100%, 320px); }
.hx-tile.reveal { opacity: 1; transform: none; }

.hx-tile:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
}

.hx-tile-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--espresso-soft);
}

.hx-tile-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hx-tile-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 34%, rgba(22, 16, 12, 0.16) 51%, rgba(22, 16, 12, 0.88) 100%);
  pointer-events: none;
}

.hx-tile-copy {
  position: absolute;
  inset: auto 58px 17px 18px;
  display: grid;
  gap: 3px;
  color: #fff;
}

.hx-tile-copy strong {
  color: inherit;
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  font-weight: 650;
  line-height: 1.15;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.hx-tile-copy small { color: rgba(255, 255, 255, 0.93); font-size: var(--t-xs); }

.hx-tile-arrow {
  position: absolute;
  right: 15px;
  bottom: 15px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line-inverse);
  border-radius: 50%;
  background: var(--card-muted);
  color: var(--espresso);
}

@media (min-width: 1000px) {
  .hx-tiles:has(> :nth-child(7):last-child) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hx-tiles:has(> :nth-child(7):last-child) > .hx-tile { grid-column: span 3; }
  .hx-tiles:has(> :nth-child(7):last-child) > .hx-tile:nth-child(n + 5) { grid-column: span 4; }
  .hx-tiles:has(> :nth-child(7):last-child) .hx-tile-media { aspect-ratio: auto; height: clamp(180px, 18vw, 245px); }
  .hx-tiles:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .hx-collections { padding-block-start: clamp(32px, 9vw, 54px); }
  .hx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hx-tile { border: 1px solid var(--line-2); background: var(--card-muted); }
  .hx-tile-media { aspect-ratio: 1.65; background: var(--surface-2); }
  .hx-tile:last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; }
  .hx-tile:last-child:nth-child(odd):not(:only-child) .hx-tile-media { aspect-ratio: 3.3; }
  .hx-tile-media::after { content: none; }
  .hx-tile-copy {
    position: static;
    align-content: center;
    gap: 4px;
    min-height: 57px;
    padding: 9px 35px 9px 10px;
    color: var(--ink);
  }
  .hx-tile-copy strong { font-size: 0.875rem; line-height: 1.15; text-shadow: none; }
  .hx-tile-copy small { color: var(--ink-3); font-size: 0.72rem; line-height: 1.25; }
  .hx-tile-arrow {
    right: 8px;
    bottom: 13px;
    width: 23px;
    height: 23px;
    border-color: var(--line);
    background: var(--surface-2);
  }
  .hx-tile-arrow svg { width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hx-tile-media img {
    transition: transform 720ms var(--ease-out), opacity 480ms var(--ease-out);
  }

  .hx-tile.reveal:not(.is-visible):not(:focus-visible) img { opacity: 0.82; transform: scale(1.055); }
  .hx-tile-arrow { transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
  .hx-tile:focus-visible .hx-tile-arrow { transform: translateX(2px); background: var(--gold-soft); }

  @media (hover: hover) {
    .hx-tile:hover img { transform: scale(1.035); }
    .hx-tile:hover .hx-tile-arrow { transform: translateX(2px); background: var(--gold-soft); }
  }
}

/* Product cards: the kind of panel in the accent colour. */
.hx-card .product-cat { color: var(--gold-deep); letter-spacing: .08em; }

/* Story: three short reasons with checks. */
.hx-checks { list-style: none; margin: 4px 0 22px; padding: 0; display: grid; gap: 10px; }
.hx-checks li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.hx-checks svg { flex: 0 0 auto; width: 24px; height: 24px; padding: 4px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-deep); }

/* Why WPC: each fact in its own box. */
.hx-section .hx-benefits { gap: 14px; }
.hx-section .hx-benefit {
  background: #fff; border: 1px solid var(--line, rgba(23,22,19,.08)); border-radius: 18px;
  padding: 22px 20px; border-top-width: 1px;
}
.hx-section .hx-benefit svg { color: var(--gold-deep); }

/* How to order: numbered cards with an icon, arrows between on wide screens. */
.hx-section .hx-steps { gap: 14px; }
.hx-section .hx-step {
  position: relative; background: #fff; border: 1px solid var(--line, rgba(23,22,19,.08)); border-radius: 18px; padding: 22px 20px;
}
.hx-section .hx-step-num {
  display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-deep); font-size: .82rem; font-weight: 700;
}
.hx-step-icon { display: block; margin: 14px 0 8px; color: var(--ink, #171613); }
@media (min-width: 900px) {
  .hx-section .hx-step:not(:last-child)::after {
    content: "→"; position: absolute; right: -12px; top: 50%; transform: translate(50%, -50%);
    color: var(--ink-4, #868174); font-size: 1.1rem; z-index: 1;
  }
}
@media (max-width: 640px) {
  .hx-section .hx-step { padding: 16px; }
  .hx-step-icon { display: none; }
}

/* "Not sure what fits?" as a dark banner over a photo. */
.hx-consult .hx-consult-inner.has-photo {
  background: linear-gradient(90deg, rgba(22,19,15,.94) 0%, rgba(22,19,15,.82) 45%, rgba(22,19,15,.35) 100%), var(--consult-photo) center / cover no-repeat;
  color: #fff; border: 0;
}
.hx-consult .hx-consult-inner.has-photo h2, .hx-consult .hx-consult-inner.has-photo p { color: #fff; }
.hx-consult .hx-consult-inner.has-photo p { opacity: .86; }
.hx-consult .hx-consult-inner.has-photo .hx-btn-line { color: #fff; border-color: rgba(255,255,255,.55); background: transparent; }

/* Badges under the banner: each icon in a soft round. */
.hx-assure svg { box-sizing: content-box; padding: 8px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-deep); }

/* Questions: title on the left, the questions across the rest, instead of
   a narrow column stuck to the left with empty space beside it. */
@media (min-width: 900px) {
  .hx-faq-section .hx-faq-wrap {
    max-width: none; display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: 48px; align-items: start;
  }
  .hx-faq-section .hx-faq-wrap .hx-head { display: grid; gap: 14px; justify-items: start; margin: 0; }
}
.hx-consult .hx-consult-inner.has-photo { border-radius: 24px; overflow: hidden; }
@media (min-width: 900px) {
  .hx-faq-section .hx-faq-wrap > .hx-head { display: flex !important; flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (min-width: 900px) {
  .hx-faq-section .hx-faq-wrap { max-width: none !important; width: 100%; }
  .hx-faq-section .hx-faq-wrap > .hx-head { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; }
}
.hx-consult .hx-consult-inner { max-width: none; }

/* How to order, as in the mockup: centred cards, the number on top, and
   each arrow in the middle of a real gap. The arrow was wider than the
   14 px gap and touched the next card. */
@media (min-width: 900px) {
  .hx-section .hx-steps { gap: 44px; }
  .hx-section .hx-step { text-align: center; padding: 34px 26px 28px; }
  .hx-section .hx-step .hx-step-num { position: absolute; top: 16px; left: 16px; }
  .hx-section .hx-step .hx-step-icon { margin: 6px auto 12px; }
  .hx-section .hx-step:not(:last-child)::after {
    content: ""; right: -22px; top: 50%; width: 30px; height: 30px; transform: translate(50%, -50%);
    border-radius: 999px; background: #fff; border: 1px solid var(--line-2, #e4e0d8);
    background-image: 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='%239a7340' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
  }
}

/* Categories: the tile photo, changeable from the row. */
.category-panel .category-info { grid-template-columns: auto minmax(140px, 220px) minmax(0, 1fr); }
.category-photo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.category-photo-thumb {
  position: relative; width: 76px; height: 57px; border-radius: 10px; overflow: hidden; flex: 0 0 auto;
  background: var(--surface-2, #f0eee9); display: grid; place-items: center; color: var(--ink-4, #868174);
}
.category-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.category-photo-thumb em {
  position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff; font-style: normal; font-size: .62rem; letter-spacing: .02em;
}
.category-photo-actions { display: grid; gap: 4px; }
.category-photo-change { position: relative; cursor: pointer; color: var(--gold-deep, #9a7340); font-weight: 600; font-size: .86rem; }
.category-photo-change input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.category-photo-reset { border: 0; background: transparent; padding: 0; text-align: left; color: var(--ink-3, #6b675f); font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline; }
.category-photo .upload-problem { flex-basis: 100%; }
@media (max-width: 900px) { .category-panel .category-info { grid-template-columns: minmax(0, 1fr); } }
/* Photo on the left; name and its two language boxes stacked beside it. */
.category-panel .category-info {
  grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "photo title" "photo names";
  column-gap: 18px; row-gap: 10px; align-items: start;
}
.category-panel .category-info .category-photo { grid-area: photo; flex-direction: column; align-items: flex-start; gap: 6px; }
.category-panel .category-info .category-title { grid-area: title; }
.category-panel .category-info .category-names { grid-area: names; grid-template-columns: repeat(2, minmax(0, 240px)); }
.category-panel .category-photo-thumb { width: 104px; height: 78px; }
@media (max-width: 900px) {
  .category-panel .category-info { grid-template-columns: auto minmax(0, 1fr); }
  .category-panel .category-info .category-names { grid-template-columns: minmax(0, 1fr); }
}
.category-panel .category-info .category-photo { width: 104px; }
.category-panel .category-photo-actions { width: 104px; }
.category-panel .category-photo-reset { line-height: 1.25; }

/* Phones whose browsers predate :has() (iOS 15.0-15.3, Chrome before 105,
   common inside the Facebook app on older Android): the checkout opens above
   the WhatsApp button and fills the phone screen, with or without :has(). */
.modal-backdrop { z-index: 150; }
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .modal-backdrop { background: rgba(23, 22, 19, .46); }
}
@media (max-width: 760px) {
  .modal-backdrop.is-checkout { padding: 0 !important; place-items: stretch !important; align-items: stretch !important; justify-content: stretch !important; }
}
/* The same lift, set from the page instead of :has(), for older phones. */
.whatsapp-fab.is-lifted { bottom: clamp(84px, 12vh, 100px); }
.copy-link-row { display: flex; gap: 8px; }
.copy-link-row input { flex: 1; min-width: 0; font-size: .85rem; color: var(--ink-3, #6b675f); }

/* Orders: which ad brought the order */
.oc-source {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.oc-source svg { flex: 0 0 auto; margin-top: 3px; color: var(--ink-3); }
.oc-by-ad.is-active { border-color: var(--ink); }
.oc-by-ad-panel {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--line, #e6e1d8);
  border-radius: 12px;
  background: var(--surface, #fff);
  overflow-x: auto;
}
.oc-by-ad-hint { margin: 0 0 10px; font-size: 0.85rem; color: var(--ink-3); }
.oc-by-ad-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.oc-by-ad-table th { text-align: left; font-weight: 600; color: var(--ink-3); font-size: 0.78rem; padding: 0 8px 6px 0; }
.oc-by-ad-table td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line, #e6e1d8); vertical-align: top; }
.oc-by-ad-table td:not(:first-child), .oc-by-ad-table th:not(:first-child) { white-space: nowrap; text-align: right; }
.oc-by-ad-table small { color: var(--ink-3); }

/* Checkout on a phone, Nov 2026: the bar that stays at the bottom held the
   button, the cash note and the phone pill, 209px of an 812px screen over the
   fields being typed in. Now only the button stays; the notes sit below it.
   A short "what you are ordering, and the total" leads the form, since the
   bag itself is below it. */
.co-after {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.co-recap { display: none; }

@media (max-width: 760px) {
  .co-submit-wrap {
    gap: 8px;
    padding-top: 10px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
  .co-after {
    padding: 4px 0 calc(24px + env(safe-area-inset-bottom));
  }
  .co-recap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -6px 0 18px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
  }
  .co-recap-thumbs { display: flex; flex: 0 0 auto; }
  .co-recap-thumbs span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border: 2px solid var(--surface-2);
    border-radius: 8px;
    background: var(--card);
  }
  .co-recap-thumbs span + span { margin-left: -14px; }
  .co-recap-thumbs img { width: 100%; height: 100%; object-fit: cover; }
  .co-recap-text { display: grid; gap: 2px; min-width: 0; }
  .co-recap-text strong {
    overflow: hidden;
    font-size: 0.95rem;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .co-recap-text small { font-size: 0.88rem; color: var(--ink-2); }
}

/* Admin on a phone: the language switch and three full-width buttons (view
   shop, password, log out) took ~300px under the menu, so the owner saw no
   order without scrolling. They now share two short rows. */
@media (max-width: 640px) {
  .admin-sidebar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 16px !important;
  }
  .admin-sidebar > .brand-lockup,
  .admin-sidebar > .admin-tabs { flex: 1 1 100%; }
  .admin-sidebar > .admin-lang {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0 0;
  }
  .admin-sidebar > .secondary-button.full {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 6px;
    gap: 5px;
    font-size: 0.8rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }
  .admin-sidebar > .secondary-button.full svg { display: none; }
  .oc-toolbar .oc-by-ad { width: 100%; justify-content: center; }
}

/* The page's heading, text and links for crawlers (storefront/index.html.erb).
   The shop's script replaces it on load; until then it takes no space, so a
   visitor never sees plain text flash before the shop. */
.seo-outline {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Footer with a column of categories: five columns on a wide screen. */
@media (min-width: 1041px) {
  .footer-inner:has(> .footer-col:nth-of-type(5)),
  .footer-inner:has(> :nth-child(5)) {
    grid-template-columns: 1.5fr 1fr 1fr 1.15fr 1fr;
  }
}

@media (max-width: 640px) {
  .site-footer { padding-bottom: 0; }
  .site-footer .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
    padding: 26px var(--gutter, 20px) 20px;
  }
  .site-footer .footer-brand { gap: 10px; }
  .site-footer .footer-desc { color: rgba(255, 255, 255, 0.68); }
  .site-footer .footer-col h4 { color: rgba(255, 255, 255, 0.7); }
  .site-footer .footer-col a { line-height: 1.3; }
  .site-footer .footer-payment,
  .site-footer .footer-contact {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 16px;
  }
  .site-footer .footer-payment { gap: 6px; }
  .site-footer .footer-feature { color: rgba(255, 255, 255, 0.7); }
  .site-footer .footer-bottom {
    gap: 4px;
    padding: 14px var(--gutter, 20px) calc(48px + env(safe-area-inset-bottom, 0px));
    color: rgba(255, 255, 255, 0.65);
  }
  .site-footer .footer-bottom-links { flex-wrap: wrap; }
  .pd-title-row { gap: 8px; }
  .pd-title {
    font-size: clamp(1.45rem, 6.2vw, 1.95rem);
    line-height: 1.12;
    text-wrap: balance;
  }
  .pd-specs div { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 10px; }
  .pd-title, .pd-specs dd, .pd-facts li {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
}

/* Order detail: the delivery price, typed in after the call. */
.oc-delivery-edit { align-items: center; }
.oc-delivery-edit label { color: var(--ink-2); }
.oc-delivery-input { display: inline-flex; align-items: center; gap: 6px; }
.oc-delivery-input input {
  width: 88px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line-2, #ddd6ca);
  border-radius: 8px;
  background: var(--card, #fff);
  font: inherit;
  text-align: right;
}
.oc-delivery-input .secondary-button { min-height: 34px; padding: 0 12px; }

/* ── Contact: where the shop is ──────────────────────────────────────────
   A dark card in the shop's espresso and gold, the address and one tap to
   directions on the left, Google's map on the right, tinted warm grey so it
   belongs to the page, with the brand's own pin pulsing at the spot. */
.loc-section {
  max-width: 1080px;
  margin: clamp(36px, 5vw, 64px) auto 0;
}
.loc-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  overflow: hidden;
  border-radius: var(--r-lg, 22px);
  background: var(--espresso, #241f1b);
  color: #f5efe6;
  box-shadow: 0 30px 60px -30px rgba(23, 22, 19, 0.45);
}
.loc-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(28px, 4vw, 48px);
}
.loc-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold, #d4b06f);
}
.loc-title {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
}
.loc-body {
  margin: 0;
  color: rgba(245, 239, 230, 0.75);
  line-height: 1.6;
}
.loc-facts {
  display: grid;
  gap: 12px;
  margin: 6px 0 4px;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  list-style: none;
}
.loc-facts li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.98rem;
  color: #fff;
}
.loc-facts svg { flex: 0 0 auto; margin-top: 2px; color: var(--gold, #d4b06f); }
.loc-facts a { color: inherit; text-decoration: none; font-weight: 600; }
.loc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.loc-btn { display: inline-flex; align-items: center; gap: 8px; }
.loc-card .page-btn-primary { background: var(--gold, #d4b06f); color: var(--ink, #171613); }
.loc-card .page-btn-ghost { border-color: rgba(255, 255, 255, 0.35); color: #fff; background: transparent; }

.loc-map {
  position: relative;
  display: block;
  min-height: 420px;
  overflow: hidden;
  background: #d9d3c9;
}
.loc-map iframe {
  /* Not cropped: Google's logo and terms at the bottom must stay visible. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Warm grey, so the map sits in the page instead of shouting Google's colours. */
  filter: grayscale(1) sepia(0.18) contrast(1.04) brightness(0.98);
  pointer-events: none; /* the whole map is one link to directions */
}
.loc-map::after {
  /* A soft fade from the card into the map on wide screens. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(36, 31, 27, 0.35), transparent 22%);
  pointer-events: none;
}
.loc-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 0;
  height: 0;
}
.loc-pin-dot {
  position: absolute;
  left: -27px;
  top: -64px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 3px solid var(--gold, #d4b06f);
  border-radius: 50% 50% 50% 0;
  background: #fff;
  box-shadow: 0 10px 24px rgba(23, 22, 19, 0.35);
  transform: rotate(-45deg);
}
.loc-pin-dot > * { transform: rotate(45deg); }
.loc-pin-dot img, .loc-pin-dot svg { width: 30px; height: 30px; object-fit: contain; }
.loc-pin-pulse {
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(212, 176, 111, 0.55);
  animation: loc-pulse 2.2s ease-out infinite;
}
@keyframes loc-pulse {
  0% { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .loc-pin-pulse { animation: none; opacity: 0.5; } }
.loc-map-chip {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill, 999px);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink, #171613);
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(23, 22, 19, 0.18);
}
.loc-map:hover .loc-map-chip { background: #fff; }

@media (max-width: 760px) {
  .loc-card { grid-template-columns: 1fr; }
  .loc-map { min-height: 300px; order: -1; }
  .loc-map::after { background: linear-gradient(0deg, rgba(36, 31, 27, 0.35), transparent 30%); }
  .loc-actions .loc-btn { flex: 1 1 auto; justify-content: center; }
}

/* A link to a colour that was removed. */
.pd-finish-gone {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7e6;
  color: #7a5200;
  font-size: 0.9rem;
}
.checkout-done-total { margin: 4px 0 0; color: var(--ink-2); }
.checkout-done-total strong { color: var(--ink); }

/* Product editor: a visible product nobody can order. */
.admin-stock-warning {
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff4e5;
  color: #8a4b00;
  font-size: 0.88rem;
  line-height: 1.4;
}

/* iPhones zoom into any field under 16px: the catalogue's search and
   sort boxes were 15px on phones. */
@media (max-width: 760px) {
  .cg-page input,
  .cg-page select,
  .cg-search input,
  .cg-sort select,
  .pdp-coverage input { font-size: max(16px, 1rem) !important; }
}
.loader-retry { margin-top: 16px; }

/* Wall planning and finish comparison */
.pd-project-tools {
  display: grid;
  gap: 2px;
  margin-top: 18px;
}

.pdp-coverage-enquiry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--gold-ink);
  font-size: var(--t-sm);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pd-related .pd-photo-note { inset: auto 8px 8px auto; font-size: var(--t-xs); }

@media (min-width: 1101px) {
  .pd-related[data-count="3"] .product-rail-track { --rail-cards: 3; }
  .pd-related[data-count="3"] .product-image { aspect-ratio: 1 !important; }
}

.finish-match {
  width: fit-content;
  margin-top: 4px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: var(--t-xs);
  line-height: 1.35;
  font-weight: 650;
}

.finish-compare-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: fit-content;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 650;
  text-align: start;
  cursor: pointer;
}

.finish-compare-toggle svg { flex-shrink: 0; }
.finish-compare-toggle:hover,
.finish-compare-toggle[aria-pressed="true"] { color: var(--gold-ink); }
.hx-card > .finish-compare-toggle { margin-top: auto; padding-inline: 2px; }
.pd-project-tools > .finish-compare-toggle { padding-inline: 2px; font-size: var(--t-sm); }

.finish-compare-tray {
  position: fixed;
  z-index: 95;
  inset-inline-start: max(12px, var(--gutter));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-pill);
  background: var(--espresso);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-lg);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 650;
  cursor: pointer;
}

body:has(.pd-sticky) .finish-compare-tray { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
body:has(.mobile-menu, .lightbox-backdrop) .finish-compare-tray { visibility: hidden; }
body:has(.finish-compare-dialog[open]) { overflow: hidden; }

.finish-compare-dialog {
  position: fixed;
  inset: 0;
  width: min(940px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100% - 24px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--card-muted);
  color: var(--ink);
  box-shadow: var(--shadow-xl);
  overflow: auto;
  overscroll-behavior: contain;
}

.finish-compare-dialog::backdrop { background: rgba(25, 21, 18, 0.64); }

.finish-compare-fallback {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(25, 21, 18, 0.64);
}

.finish-compare-content { padding: clamp(14px, 3vw, 32px); }

.finish-compare-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.finish-compare-head h2 {
  margin: 0;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: var(--track-h);
}

.finish-compare-head p,
.finish-compare-foot,
.finish-compare-scroll-note {
  margin: 6px 0 0;
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.45;
}

.finish-compare-close,
.finish-compare-remove {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

.finish-compare-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.finish-compare-tools .pdp-coverage-inputs { flex: 1 1 225px; max-width: 320px; }

.finish-compare-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.finish-compare-modes button {
  min-height: 44px;
  padding: 4px 11px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 650;
  cursor: pointer;
}

.finish-compare-modes button[aria-pressed="true"] {
  border-color: var(--line-2);
  background: var(--card);
  color: var(--ink);
}

.finish-compare-table-wrap { margin-top: 14px; overflow: auto; }
.finish-compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.finish-compare-table[data-count="1"] { max-width: 480px; }
.finish-compare-table :is(th, td) {
  padding: 10px 8px;
  vertical-align: top;
  text-align: start;
  overflow-wrap: anywhere;
}

.finish-compare-table thead th { position: relative; padding-top: 0; }
.finish-compare-table thead td { width: clamp(82px, 21vw, 142px); }
.finish-compare-table thead small { display: block; margin: 8px 0 3px; color: var(--ink-3); font-size: var(--t-xs); }
.finish-compare-table thead a { display: inline-block; margin-top: 4px; color: var(--ink); font-weight: 700; line-height: 1.3; }
.finish-compare-table thead a:hover { text-decoration: underline; }
.finish-compare-table tbody tr { border-top: 1px solid var(--line-2); }
.finish-compare-table tbody { font-size: var(--t-sm); }
.finish-compare-table tbody th { padding-inline-start: 0; color: var(--ink-2); font-weight: 650; hyphens: auto; }
.finish-compare-estimate td { color: var(--gold-ink); font-weight: 750; }
.finish-compare-table tfoot td { padding-block: 0; }
.finish-compare-table tfoot .pdp-coverage-enquiry { font-size: var(--t-xs); }

.finish-compare-remove {
  position: absolute;
  inset-inline-end: 12px;
  top: 4px;
  width: 36px;
  height: 36px;
}

.finish-compare-image {
  display: grid;
  position: relative;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-xs);
  background: var(--surface-2);
}

.finish-compare-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--finish-detail-scale, 1));
}

.finish-compare-image > span:not(.pd-photo-note) {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 8px;
  color: var(--ink-3);
  font-size: var(--t-xs);
  text-align: center;
}

.finish-compare-image .pd-photo-note { inset: auto auto 4px 4px; max-width: calc(100% - 8px); font-size: 0.63rem; }
.finish-compare-scroll-note { display: none; }
.finish-compare-foot { margin-top: 12px; }

@media (max-width: 590px) {
  .finish-compare-table[data-count="3"] { min-width: 510px; }
  .finish-compare-table[data-count="3"] tr > :first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--card-muted);
  }
  .finish-compare-table :is(th, td) { padding-inline: 5px; }
  .finish-compare-table tbody { font-size: var(--t-xs); }
  .finish-compare-table thead a { font-size: var(--t-sm); }
  .finish-compare-scroll-note { display: block; font-size: var(--t-xs); }
  .finish-compare-tools .pdp-coverage-inputs { max-width: none; }
}

/* Casa Decor homepage */
.decor-home {
  --home-width: min(calc(100% - 2 * var(--gutter)), 1320px);
  --home-space: clamp(46px, 7vw, 100px);
  --home-paper: #faf7f1;
  --home-stone: #eee8de;
  --home-brass: #e2c498;
  background: var(--home-paper);
}

.decor-home .hx-section {
  width: var(--home-width);
  padding-block: var(--home-space) 0;
}

.decor-home :is(#home-content, #materials, #finish-gallery, #project-help) {
  scroll-margin-top: 84px;
}

.home-skip-link {
  position: fixed;
  z-index: 1000;
  inset: 8px auto auto var(--gutter);
  padding: 12px 18px;
  border-radius: var(--r-xs);
  background: var(--espresso);
  color: var(--ink-inverse);
}

.home-skip-link:not(:focus) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.decor-home .hx-hero {
  width: 100%;
  min-height: clamp(530px, 74vh, 780px);
  min-height: clamp(530px, 74svh, 780px);
  margin: 0;
  border-radius: 0;
}

.decor-home .hx-hero.is-plain { min-height: clamp(340px, 56svh, 570px); }
.decor-home .hx-hero-shade {
  background:
    linear-gradient(90deg, rgba(25, 17, 12, .76), rgba(25, 17, 12, .53) 31%, transparent 74%),
    linear-gradient(0deg, rgba(23, 15, 10, .72), transparent 47%);
}

.decor-home .hx-hero-copy {
  max-width: min(860px, 100%);
  padding: clamp(32px, 5.5vw, 88px) max(var(--gutter), calc((100vw - 1320px) / 2));
}

.decor-home .hx-hero-title {
  max-width: 16ch;
  font-size: clamp(2.9rem, 5.8vw, 5.4rem);
  font-weight: 620;
  line-height: .99;
  letter-spacing: -.047em;
  overflow-wrap: break-word;
}

.decor-home .hx-hero-lead { max-width: 46ch; color: #f4ece3; }
.decor-home .hx-hero-actions { margin-top: 25px; }
.decor-home .hx-hero-actions .hx-btn { min-height: 48px; }

.home-hero-scroll {
  position: absolute;
  inset: auto max(var(--gutter), calc((100vw - 1320px) / 2)) clamp(32px, 5.5vw, 88px) auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 0;
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.decor-home .hx-assure {
  width: var(--home-width);
  margin-top: 0;
  border-top: 0;
  border-color: rgba(67, 49, 33, .16);
}

.decor-home .hx-assure-item {
  gap: clamp(9px, 1.1vw, 18px);
  padding: clamp(13px, 1.8vw, 24px);
}

.decor-home .hx-assure-item:first-of-type { padding-inline-start: 0; }
.decor-home .hx-assure > a.hx-assure-item { text-decoration: none; }
.decor-home .hx-assure > a.hx-assure-item strong { text-decoration: underline; text-underline-offset: 3px; }
.decor-home .hx-assure-item svg { background: transparent; color: var(--gold-ink); padding: 0; }
.decor-home .hx-assure-item strong { font-size: clamp(.84rem, 1vw, 1rem); }
.decor-home .hx-assure-item small { color: var(--ink-3); }

.decor-home .hx-head {
  align-items: end;
  gap: 12px 20px;
  margin-bottom: clamp(18px, 3vw, 34px);
}

.decor-home :is(.hx-head h2, .home-guide h2, .home-consultation h2, .home-testimonials h2) {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 3.45rem) !important;
  font-weight: 620;
  line-height: 1.04;
  letter-spacing: -.042em;
  text-wrap: balance;
}

.decor-home .hx-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.decor-home .hx-tile-copy strong { overflow-wrap: anywhere; }
.decor-home .hx-tile-media img[hidden],
.home-consultation img[hidden] { display: none; }

.decor-home .hx-collections { padding-bottom: var(--home-space); }

@media (min-width: 641px) and (max-width: 820px) {
  .decor-home .hx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decor-home .hx-tile-media { aspect-ratio: 1.6; }
  .decor-home .hx-tile:last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; }
  .decor-home .hx-tile:last-child:nth-child(odd):not(:only-child) .hx-tile-media { aspect-ratio: 3.2; }
}

@media (min-width: 821px) and (max-width: 999px) {
  .decor-home .hx-tiles:has(> :nth-child(7):last-child) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .decor-home .hx-tiles:has(> :nth-child(7):last-child) > .hx-tile { grid-column: span 3; }
  .decor-home .hx-tiles:has(> :nth-child(7):last-child) > .hx-tile:nth-child(-n + 3) { grid-column: span 4; }
  .decor-home .hx-tiles:has(> :nth-child(7):last-child) .hx-tile-media { height: 176px; aspect-ratio: auto; }
}

.home-finish-band {
  padding-block: var(--home-space);
  background: #28211b;
  color: var(--ink-inverse);
}

.decor-home .home-finish-gallery { padding: 0; }
.decor-home .home-finish-gallery h2 { color: var(--ink-inverse); }
.home-finish-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid rgba(226, 196, 152, .26);
  border-radius: var(--r-lg);
  overflow: hidden; /* iOS 15 has no clip */
  overflow: clip;
  background: #312820;
}

.home-finish-photo {
  position: relative;
  min-width: 0;
  min-height: 420px;
  margin: 0;
  overflow: hidden;
  background: #483d32;
}

.home-finish-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.home-finish-photo figcaption {
  position: absolute;
  inset: 14px auto auto 14px;
  max-width: calc(100% - 28px);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(250, 247, 241, .96);
  color: var(--ink);
  font-size: var(--t-xs);
  font-weight: 650;
}

.home-finish-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: #f2e9db;
}

.home-finish-views {
  position: absolute;
  inset: auto auto 14px 14px;
  display: flex;
  flex-wrap: wrap;
  max-width: calc(100% - 28px);
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-sm);
  background: rgba(38, 30, 24, .93);
}

.home-finish-views button {
  min-height: 44px;
  padding: 5px 12px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
}

.home-finish-views button[aria-pressed="true"] { background: var(--home-paper); color: var(--ink); }
.home-finish-views button:focus-visible,
.home-finish-choice:focus-visible,
.home-finish-link:focus-visible,
.home-hero-scroll:focus-visible { outline: 2px solid var(--home-brass); outline-offset: 3px; }

.home-finish-panel {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: clamp(20px, 2.6vw, 32px);
  min-width: 0;
  padding: clamp(20px, 3.6vw, 52px);
}

.home-finish-heading > p { margin: 0; color: #e2d6c8; font-size: var(--t-sm); line-height: 1.4; }
.home-finish-heading > p:first-child { color: var(--home-brass); }
.home-finish-heading h3 {
  margin: 6px 0 8px;
  color: var(--ink-inverse);
  font-size: clamp(1.8rem, 3.1vw, 3.4rem);
  font-weight: 620;
  line-height: 1.04;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}

.home-finish-heading dl { margin: 14px 0 0; }
.home-finish-heading dl > div { display: flex; flex-wrap: wrap; gap: 2px 9px; }
.home-finish-heading :is(dt, dd) { margin: 0; color: #efe2d3; font-size: var(--t-xs); }
.home-finish-heading dt { color: #d2c4b3; }
.home-finish-heading dd { font-weight: 650; }

.home-finish-choices {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.home-finish-choice {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  color: #f0e5d7;
  text-align: start;
  font: inherit;
  cursor: pointer;
}

.home-finish-choice:is(:hover, [aria-pressed="true"]) {
  border-color: var(--home-brass);
  background: rgba(255, 255, 255, .06);
}

.home-finish-choice > span {
  display: block;
  aspect-ratio: 1.4;
  border-radius: 5px;
  overflow: hidden;
  background: #5c4d3b;
}

.home-finish-choice img { width: 100%; height: 100%; object-fit: cover; }
.home-finish-choice small { padding-inline: 2px; font-size: .73rem; line-height: 1.2; overflow-wrap: anywhere; }
.home-finish-link { white-space: normal; text-align: start; }

.home-selection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: clamp(14px, 2vw, 26px);
}

.home-selection-grid .hx-card .product-image { aspect-ratio: 1 / 1.03 !important; }
.home-selection-grid .product-name { overflow-wrap: anywhere; }
.decor-home .home-selection { padding-bottom: var(--home-space); }

.decor-home .home-testimonials {
  padding-block: 0 var(--home-space);
  margin-block: 0;
  background: transparent;
}

.home-guide-band { padding-block: var(--home-space); background: var(--home-stone); }
.decor-home .home-guide { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 6vw, 100px); padding: 0; }
.home-guide h2 { max-width: 15ch; }
.home-order-steps { margin: clamp(18px, 3vw, 32px) 0 0; padding: 0; list-style: none; }
.home-order-steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 15px 0;
  border-top: 1px solid rgba(67, 49, 33, .16);
}

.home-order-steps li > svg { margin-top: 1px; color: var(--gold-ink); }
.home-order-steps h3 { margin: 0 0 3px; font-size: 1rem; font-weight: 680; }
.home-order-steps p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; }
.home-questions .hx-faq { margin-top: clamp(18px, 3vw, 32px); border-top: 1px solid rgba(67, 49, 33, .16); }
.home-questions .hx-faq-item { border-color: rgba(67, 49, 33, .16); }
.home-questions .hx-faq-item summary { min-height: 52px; }
.home-questions .hx-faq-item p { color: var(--ink-2); }
.home-questions > .hx-link { margin-top: 12px; }

.decor-home .home-consultation {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 300px;
  margin-block: var(--home-space);
  padding: 0;
  overflow: hidden; /* iOS 15 has no clip */
  overflow: clip;
  border-radius: var(--r-lg);
  background: #312820;
  color: var(--ink-inverse);
}

.decor-home .home-consultation.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.home-consultation > img { grid-area: 1 / 2; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.home-consultation-copy { grid-area: 1 / 1; align-self: center; min-width: 0; padding: clamp(24px, 4.5vw, 64px); }
.decor-home .home-consultation h2 { color: var(--ink-inverse); max-width: 18ch; }
.home-consultation-copy p { max-width: 42ch; margin: 16px 0 20px; color: #ede1d3; line-height: 1.6; }
.home-consultation-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.home-consultation-actions .hx-btn { min-height: 46px; white-space: normal; text-align: start; }

@media (max-width: 960px) {
  .home-hero-scroll { display: none; }
  .home-finish-photo { min-height: 360px; }
  .home-finish-layout { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
  .home-finish-choice small { font-size: .7rem; }
  .home-guide h2 { max-width: none; }
}

@media (max-width: 700px) {
  .home-finish-layout,
  .decor-home .home-guide,
  .decor-home .home-consultation.has-photo { grid-template-columns: minmax(0, 1fr); }
  .home-finish-photo { min-height: 0; aspect-ratio: 1.25; }
  .home-finish-panel { gap: 18px; }
  .home-finish-choices { gap: 5px; }
  .home-selection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .home-consultation > img { grid-area: auto; height: auto; aspect-ratio: 2 / 1; }
  .home-consultation-copy { grid-area: auto; }
}

@media (max-width: 640px) {
  /* The WhatsApp button stays on the homepage on phones: it was the only one above the fold. */
  .decor-home .hx-hero-media { height: clamp(180px, 33svh, 272px); }
  .decor-home .hx-hero-copy { padding-block: 22px 24px !important; }
  .decor-home .hx-hero-title { max-width: none; font-size: clamp(1.95rem, 7.5vw, 2.9rem); line-height: 1.04; }
  .decor-home .hx-hero-lead { margin-top: 10px; }
  .decor-home .hx-hero-actions { display: flex; gap: 8px !important; margin-top: 17px !important; }
  .decor-home .hx-hero-actions .hx-btn { flex: 1 1 auto; width: auto; padding-inline: 13px; white-space: normal; text-align: center; }
  .decor-home .hx-hero-actions .hx-btn-glass { border: 1px solid rgba(255, 255, 255, .28); text-decoration: none; }
  .decor-home .hx-assure-item:nth-child(odd) { padding-inline-start: 0; }
  .decor-home .hx-head { align-items: center; }
  .decor-home .hx-head h2 { font-size: clamp(1.5rem, 6.3vw, 2rem) !important; }
  .home-finish-views { inset: auto auto 8px 8px; }
  .home-finish-photo figcaption { inset: 8px auto auto 8px; }
  .home-finish-link { width: 100%; }
  .decor-home .home-consultation { min-height: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .home-finish-photo > img[data-loaded="true"] { animation: home-finish-arrive 420ms var(--ease-out); }
  @keyframes home-finish-arrive { from { opacity: .67; transform: scale(1.018); } }
}

/* Homepage navigation */
.decor-home .shop-header {
  gap: clamp(12px, 2vw, 28px);
  padding: 12px var(--gutter, 24px);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.decor-home .shop-nav-center {
  gap: clamp(14px, 2.2vw, 34px);
}

.decor-home .shop-nav-center > a,
.decor-home .nav-dropdown-trigger {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.decor-home .shop-nav-center > a::after,
.decor-home .nav-dropdown-trigger::after {
  bottom: 6px;
}

.decor-home .nav-dropdown-menu {
  top: calc(100% + 5px);
  border-radius: 14px;
  background: var(--card-muted);
}

.decor-home .nav-dropdown-menu a {
  display: flex;
  align-items: center;
  min-height: 42px;
}

.decor-home .nav-dropdown-menu a:is(:hover, :focus-visible) {
  background: var(--surface-2) !important;
  color: var(--ink);
}

.decor-home .nav-dropdown.is-dismissed .nav-dropdown-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

.decor-home .nav-dropdown.is-dismissed .nav-dropdown-caret { transform: none; }

.decor-home .shop-nav-right { gap: 3px; }

.decor-home .home-nav-search { position: relative; }

.decor-home .home-nav-search-toggle {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.decor-home .home-nav-search-toggle:is(:hover, [aria-expanded="true"]) {
  background: var(--surface-2);
}

.decor-home .home-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: min(26rem, calc(100vw - 2 * var(--gutter, 24px)));
  padding: 10px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--card-muted);
  box-shadow: 0 18px 44px -14px rgba(20, 18, 15, 0.25);
  z-index: 40;
}

.decor-home .home-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 50px;
  gap: 4px;
  padding: 3px 4px 3px 14px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: var(--card);
}

.decor-home .home-search-form:focus-within { border-color: var(--gold-ink); }

.decor-home .home-search-form input[type="search"] {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
}

.decor-home .home-search-form input[type="search"]::placeholder { color: var(--ink-3); }
.decor-home .home-search-form input[type="search"]:focus { outline: none; }

.decor-home .home-search-form button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--espresso);
  color: white;
  cursor: pointer;
}

.decor-home .home-search-form button:hover { background: var(--espresso-soft); }

.decor-home .shop-header :focus-visible,
.decor-home .mobile-menu-inner :focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
}

.decor-home .home-search-form input[type="search"]:focus-visible { outline: none; }

@media (max-width: 960px) {
  .decor-home .shop-header {
    gap: 8px;
    padding: 8px clamp(10px, 3.6vw, 24px);
  }

  .decor-home .shop-header .brand-lockup { flex: 1 1 auto; gap: 7px; }
  .decor-home .shop-header .brand-lockup strong { font-size: clamp(1rem, 4.5vw, 1.25rem); white-space: nowrap; }
  .decor-home .shop-header .brand-logo { width: auto; max-width: 58px; height: 38px; }

  .decor-home .shop-nav-center,
  .decor-home .shop-header .language-switcher,
  .decor-home .home-nav-search { display: none; }

  .decor-home .shop-nav-right { flex: 0 0 auto; gap: 2px; }
  .decor-home .shop-header .nav-hamburger { display: grid; }

  .decor-home .mobile-menu-inner { overflow-y: auto; overscroll-behavior: contain; }
  .decor-home .mobile-menu-header {
    position: sticky;
    top: 0;
    z-index: 2;
    flex: 0 0 auto;
    padding: 10px var(--gutter, 20px);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .decor-home .home-menu-search { padding: 14px var(--gutter, 20px) 2px; }
  .decor-home .mobile-nav {
    flex: 0 0 auto;
    overflow: visible;
    padding: 6px var(--gutter, 20px) 16px;
  }
  .decor-home .mobile-nav > a,
  .decor-home .mobile-nav > .mobile-nav-group-toggle { min-height: 49px; font-size: clamp(1.15rem, 4.8vw, 1.38rem); }
  .decor-home .mobile-menu-footer { margin-top: auto; flex: 0 0 auto; }
}
/* Homepage footer */
.decor-home .site-footer {
  --home-footer-rule: rgba(255, 249, 238, 0.16);
  --home-footer-copy: #d4c9bd;
  --home-footer-brass: #e3c498;
  background: var(--espresso);
  color: var(--ink-inverse);
  padding: 0;
  border-top: 1px solid var(--home-footer-rule);
}

.decor-home .site-footer :is(.footer-inner, .footer-bottom) {
  width: min(calc(100% - 2 * var(--gutter)), var(--page-max));
  margin-inline: auto;
  min-width: 0;
}

.decor-home .site-footer .footer-inner {
  grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr);
  gap: clamp(18px, 2.4vw, 40px);
  align-items: start;
  padding: clamp(38px, 5vw, 72px) 0 clamp(30px, 4vw, 54px);
  border-bottom: 0;
}

.decor-home .site-footer .footer-inner:has(> :nth-child(5)) {
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
}

.decor-home .site-footer :is(.footer-brand, .footer-col) {
  min-width: 0;
  grid-column: auto;
}

.decor-home .site-footer .footer-brand {
  gap: 12px;
}

.decor-home .site-footer .footer-brand-lockup {
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  gap: 10px;
  overflow-wrap: anywhere;
}

.decor-home .site-footer .footer-brand-lockup .brand-logo {
  max-width: min(72px, 35%);
  height: 44px;
}

.decor-home .site-footer .footer-brand-lockup strong {
  font-size: 1.2rem;
  letter-spacing: var(--track-h);
}

.decor-home .site-footer :is(.footer-desc, .footer-brand-lockup small, .footer-feature) {
  color: var(--home-footer-copy);
}

.decor-home .site-footer .footer-desc {
  font-size: var(--t-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.decor-home .site-footer .footer-col h4 {
  margin: 0 0 8px;
  color: var(--home-footer-brass);
  font-size: var(--t-xs);
  font-weight: 650;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0.015em;
}

.decor-home .site-footer .footer-col a {
  min-height: 38px;
  width: fit-content;
  max-width: 100%;
  font-size: var(--t-sm);
  line-height: 1.35;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.decor-home .site-footer .footer-payment {
  gap: 8px;
}

.decor-home .site-footer .footer-payment h4 {
  margin-bottom: 4px;
}

.decor-home .site-footer :is(.footer-feature, .footer-contact-row) svg {
  color: var(--home-footer-brass);
}

.decor-home .site-footer .footer-socials {
  flex-wrap: wrap;
  gap: 6px;
}

.decor-home .site-footer :is(.footer-languages, .footer-social-link) {
  border-color: var(--home-footer-rule);
}

.decor-home .site-footer .footer-languages {
  margin-top: 10px;
  border-radius: var(--r-xs);
}

.decor-home .site-footer .footer-languages button {
  color: var(--home-footer-copy);
  cursor: pointer;
}

.decor-home .site-footer .footer-languages button.active {
  color: var(--ink-inverse);
  background: rgba(255, 249, 238, 0.13);
}

.decor-home .site-footer :is(a, button):focus-visible {
  outline: 2px solid var(--home-footer-brass);
  outline-offset: 2px;
}

.decor-home .site-footer .footer-languages button:focus-visible {
  outline-offset: -3px;
}

.decor-home .site-footer .footer-bottom {
  gap: 4px 20px;
  padding: 12px 0 18px;
  border-top: 1px solid var(--home-footer-rule);
  color: var(--home-footer-copy);
  font-size: var(--t-xs);
}

.decor-home .site-footer .footer-bottom-links {
  gap: 0 20px;
}

.decor-home .site-footer .footer-bottom-links a {
  font-weight: 500;
  opacity: 1;
}

@media (max-width: 1000px) {
  .decor-home .site-footer .footer-inner,
  .decor-home .site-footer .footer-inner:has(> :nth-child(5)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .decor-home .site-footer .footer-brand {
    grid-column: 1 / -1;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--home-footer-rule);
  }

  .decor-home .site-footer :is(.footer-payment, .footer-contact) {
    padding-top: 16px;
    border-top: 1px solid var(--home-footer-rule);
  }

  .decor-home .site-footer .footer-bottom {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 640px) {
  .decor-home .site-footer .footer-inner {
    gap: 20px 16px;
  }

  .decor-home .site-footer .footer-col a {
    min-height: 44px;
  }

  .decor-home .site-footer :is(.footer-payment, .footer-contact) {
    grid-column: 1 / -1;
  }

  .decor-home .site-footer .footer-bottom {
    align-items: start;
    flex-direction: column;
  }

  .decor-home .site-footer .footer-bottom-links {
    gap: 0 14px;
  }
}

/* Clear the fixed shop actions when the bottom links reach the viewport edge. */
@media (min-width: 1001px) {
  .decor-home:has(> .whatsapp-fab) .site-footer .footer-bottom {
    padding-inline-end: max(0px, 86px - max(var(--gutter), (100% - var(--page-max)) / 2));
  }
}

.decor-home:has(> .cart-fab) .site-footer .footer-bottom {
  padding-bottom: calc(158px + env(safe-area-inset-bottom, 0px));
}
.split-fields > .admin-stock-warning { grid-column: 1 / -1; }
/* Row labels in the compare table break between words, never inside one
   ("Достапнос / т" on a phone). */
.finish-compare-table tbody th { overflow-wrap: normal; word-break: normal; hyphens: manual; min-width: 7.5em; }

/* Homepage colour choices: long names stop at two lines. */
.home-finish-choice small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}
/* "Контакт →": room between the word and the arrow. */
.home-consultation-actions .hx-btn { display: inline-flex; align-items: center; gap: 8px; }