/* ============================================================
   SKINGENIUS — Design System (base)
   Design tokens + every component reused across 2+ pages.
   Page-only styles belong in skingenius-page.css instead.

   Loaded after Bootstrap so it wins on shared selectors.
   Vendor kept alongside: bootstrap (grid/modal/offcanvas),
   fontawesome (icons), swiper (carousel), magnific (lightbox).
   ============================================================ */

/* ============================================================
   DESIGN TOKENS
   Contrast values in comments are measured, not estimated.
   ============================================================ */
:root {
  /* --- ink & paper --- */
  --sg-ink: #241e1c;
  /* 16.44:1 on paper */
  --sg-body: #4a403c;
  /* 10.05:1 on paper, ≥6.3:1 on every tint */
  --sg-muted: #6b5f5a;
  --sg-paper: #ffffff;
  --sg-hairline: #e8e0d9;
  --sg-edge: rgb(36 30 28 / 0.62);
  --sg-bubblegum: #f88ddd;
  --sg-popcorn: #f8de8d;
  /* the brand field — ink sits on it at 12.39:1 */
  --sg-brand: #f8de8d;
  --sg-popcorn-soft: #fbecbd;
  --sg-tosca-slate: #7fcdb8;
  --sg-tosca: #8df8de;
  --sg-tosca-deep: #24604e;
  --sg-tosca-deeper: #1b473a;
  --sg-tosca-soft: #ebfaf6;
  /* ground-tint bank, three more hues at the same recipe (L 76%/S 88%)
     as popcorn/tosca/bubblegum — routine-step colours, ink clears AA
     on all three: matcha 13.05:1, sky 7.63:1, lavender 6.63:1 */
  --sg-matcha: #b1f88d;
  --sg-sky: #8db1f8;
  --sg-lavender: #c28df8;
  /* sky, same hue (220°) pushed to L 42% — dark/saturated enough for white
     text (7.24:1) where sky itself fails badly (2.15:1). "New" badge. */
  --sg-sky-deep: #0c4cca;

  /* --- accent candidates (A/B against tosca) ---
     Rose and Orchid are the site's two previous action-colour systems
     (rose → orchid deep → tosca deep, in that order). Brought back for
     testing alternate combinations now that tosca carries nearly every
     accent role on its own — not applied to any component here, just
     available as tokens. Original contrast figures preserved. */
  --sg-rose: #c42a6b;
  /* 5.40:1 as text on paper; white-on-rose 5.40:1 */
  --sg-rose-deep: #a11f57;
  --sg-rose-soft: #fce7f0;
  --sg-orchid: #de8df8;
  --sg-orchid-deep: #9e0dce;
  /* 6.17:1 as text on paper; white-on-fill 6.17:1; 4.61:1 on popcorn */
  --sg-orchid-deeper: #760a99;
  --sg-orchid-soft: #f6ebfa;

  /* --- state --- */
  --sg-star: #e0a020;
  --sg-warning: #8a5a00;
  --sg-success: #1d7a52;
  --sg-danger: #c0331f;
  --sg-warning-soft: #fbf5ea;
  --sg-warning-soft-border: #ead9b8;
  --sg-danger-soft: #fbecea;
  --sg-danger-soft-border: #eabeb8;

  /* --- type --- */
  --sg-display-face: "Philosopher", Georgia, serif;
  --sg-text-face: "Raleway", system-ui, sans-serif;

  --sg-fs-micro: 0.875rem;
  /* 14px — uppercase micro-labels ONLY */
  --sg-fs-body: 1rem;
  /* 16px — the floor for anything read as a sentence */
  --sg-fs-lead: 1.125rem;
  /* 18px */
  --sg-fs-subtitle: 1.25rem;
  /* 20px */
  --sg-fs-title: 1.5rem;
  /* 24px */
  --sg-fs-title-lg: 1.75rem;
  /* 28px */
  --sg-fs-headline: 2.25rem;
  /* 36px */
  --sg-fs-headline-lg: 3rem;
  /* 48px */
  --sg-fs-display: 4rem;
  /* 64px */

  /* --- shape (chunky by intent) --- */
  --sg-r-xs: 4px;
  --sg-r-sm: 10px;
  --sg-r: 14px;
  --sg-r-lg: 20px;
  --sg-r-xl: 28px;
  --sg-r-pill: 999px;

  /* --- depth --- */
  --sg-lift: 0 6px 18px rgb(36 30 28 / 0.1);
  --sg-lift-lg: 0 14px 36px rgb(36 30 28 / 0.14);
  /* grounded card shadow — negative spread keeps it from bleeding sideways
     into a Swiper's clip box */
  --sg-lift-card: 0 12px 20px -8px rgb(36 30 28 / 0.32);
  --sg-ring: 0 0 0 4px rgb(36 96 78 / 0.18);

  /* --- motion --- */
  --sg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sg-fast: 0.18s;
  --sg-slow: 0.4s;
  /* hover feedback: 400ms reads as lag, 200ms reads as responsive */
  --sg-hover: 0.2s;

  /* --- layout --- */
  --sg-container: 1280px;
  --sg-gutter: clamp(16px, 4vw, 32px);
  --sg-section: clamp(40px, 5.5vw, 72px);
}

/* ============================================================
   BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-body);
  font-weight: 500;
  line-height: 1.65;
  color: var(--sg-ink);
  background: var(--sg-paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--sg-display-face);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--sg-ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 6vw, var(--sg-fs-display));
}

h2 {
  font-size: clamp(1.75rem, 4.5vw, var(--sg-fs-headline-lg));
}

h3 {
  font-size: clamp(1.5rem, 3vw, var(--sg-fs-headline));
}

h4 {
  font-size: var(--sg-fs-title-lg);
}

h5 {
  font-size: var(--sg-fs-title);
}

h6 {
  font-size: var(--sg-fs-subtitle);
}

p {
  font-size: var(--sg-fs-body);
  line-height: 1.7;
  color: var(--sg-body);
  margin: 0 0 1rem;
}

/* Long-form prose gets a real measure. */
p,
li {
  max-width: 75ch;
}

a {
  color: var(--sg-tosca-deep);
  text-decoration: none;
  transition: color var(--sg-fast) var(--sg-ease);
}

a:hover {
  color: var(--sg-tosca-deeper);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

strong,
b {
  font-weight: 800;
  color: var(--sg-ink);
}

small {
  font-size: var(--sg-fs-micro);
}

::selection {
  background: var(--sg-tosca-deep);
  color: #fff;
}

/* One focus treatment for the whole site. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sg-ink);
  outline-offset: 2px;
  border-radius: var(--sg-r-xs);
}

.sg-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* bootstrap.min.css's own .modal-dialog-centered rule is minified without
   the space calc() requires around its minus sign — "100%-var(...)" is
   invalid, so the browser drops the whole min-height and every centered
   modal on the site (Checkout, Transaction History, quickview, this popup)
   silently pins to the top instead. Corrected copy, same selector, wins on
   load order (this file loads after Bootstrap) rather than patching the
   vendor file directly. */
.modal-dialog-centered {
  min-height: calc(100% - var(--bs-modal-margin) * 2);
}

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.container,
.container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--sg-gutter);
}

.container {
  max-width: var(--sg-container);
}

.section-space {
  padding-block: var(--sg-section);
}

.sg-color--paper {
  color: var(--sg-paper);
}

.sg-color--hairline {
  color: var(--sg-hairline);
}

.sg-color--popcorn {
  color: var(--sg-popcorn);
}

.sg-color--tosca {
  color: var(--sg-tosca);
}

.sg-color--tosca-slate {
  color: var(--sg-tosca-slate);
}

.sg-color--tosca-soft {
  color: var(--sg-tosca-soft);
}

.sg-color--ink {
  color: var(--sg-ink);
}

.sg-color--body {
  color: var(--sg-body);
}

.sg-color--muted {
  color: var(--sg-muted);
}

.sg-color--edge {
  color: var(--sg-edge);
}

.sg-color--bubblegum {
  color: var(--sg-bubblegum);
}

.sg-color--brand {
  color: var(--sg-brand);
}

.sg-color--popcorn-soft {
  color: var(--sg-popcorn-soft);
}

.sg-color--tosca-deeper {
  color: var(--sg-tosca-deeper);
}

.sg-color--matcha {
  color: var(--sg-matcha);
}

.sg-color--sky {
  color: var(--sg-sky);
}

.sg-color--lavender {
  color: var(--sg-lavender);
}

.sg-color--rose {
  color: var(--sg-rose);
}

.sg-color--rose-deep {
  color: var(--sg-rose-deep);
}

.sg-color--rose-soft {
  color: var(--sg-rose-soft);
}

.sg-color--orchid {
  color: var(--sg-orchid);
}

.sg-color--orchid-deep {
  color: var(--sg-orchid-deep);
}

.sg-color--orchid-deeper {
  color: var(--sg-orchid-deeper);
}

.sg-color--orchid-soft {
  color: var(--sg-orchid-soft);
}

.sg-band {
  padding-block: var(--sg-section);
}

.sg-band--paper {
  background: var(--sg-paper);
}

.sg-band--hairline {
  background: var(--sg-hairline);
}

.sg-band--popcorn {
  background: var(--sg-popcorn);
}

.sg-band--tosca {
  background: var(--sg-tosca);
}

.sg-band--tosca-slate {
  background: var(--sg-tosca-slate);
}

.sg-band--tosca-soft {
  background: var(--sg-tosca-soft);
}

.sg-band--ink {
  background: var(--sg-ink);
}

.sg-band--body {
  background: var(--sg-body);
}

.sg-band--muted {
  background: var(--sg-muted);
}

.sg-band--edge {
  background: var(--sg-edge);
}

.sg-band--bubblegum {
  background: var(--sg-bubblegum);
}

.sg-band--brand {
  background: var(--sg-brand);
}

.sg-band--popcorn-soft {
  background: var(--sg-popcorn-soft);
}

.sg-band--tosca-deeper {
  background: var(--sg-tosca-deeper);
}

.sg-band--matcha {
  background: var(--sg-matcha);
}

.sg-band--sky {
  background: var(--sg-sky);
}

.sg-band--lavender {
  background: var(--sg-lavender);
}

.sg-band--rose {
  background: var(--sg-rose);
}

.sg-band--rose-deep {
  background: var(--sg-rose-deep);
}

.sg-band--rose-soft {
  background: var(--sg-rose-soft);
}

.sg-band--orchid {
  background: var(--sg-orchid);
}

.sg-band--orchid-deep {
  background: var(--sg-orchid-deep);
}

.sg-band--orchid-deeper {
  background: var(--sg-orchid-deeper);
}

.sg-band--orchid-soft {
  background: var(--sg-orchid-soft);
}

.sg-band--tosca-deep,
.furniture-clr-hover:hover {
  color: var(--sg-ink) !important;
}

/* color alone (1.57:1 against the surrounding footer text) isn't enough
   to mark these as links — underline carries it instead */
.furniture-clr-hover {
  text-decoration: underline;
}

.p-relative {
  position: relative;
}

/* HomeView emits .sg-band__* ; both names resolve to one rule so the
   markup and the system cannot drift apart again. */
.sg-section-head,
.sg-band__head {
  margin-bottom: clamp(22px, 3vw, 36px);
}

.sg-band__foot {
  margin-top: clamp(22px, 3vw, 36px);
}

.sg-band__nav {
  display: flex;
  gap: 8px;
}

.sg-section-head--row,
.sg-band__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.sg-standfirst,
.sg-band__standfirst {
  max-width: 62ch;
  font-size: var(--sg-fs-lead);
  color: var(--sg-body);
  margin: 12px 0 0;
}

/* Legacy theme section titles, restyled rather than deleted. */
.section-title-4,
.sg-h {
  font-family: var(--sg-display-face);
  font-size: clamp(1.75rem, 4.5vw, var(--sg-fs-headline-lg));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--sg-ink);
  margin: 0;
}

.section-subtitle-4 {
  display: inline-block;
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-micro);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sg-tosca-deep);
  margin-bottom: 8px;
}

/* ============================================================
   PAGE TITLE / BREADCRUMB
   ============================================================ */
/* No bottom margin: the following band supplies its own top padding, and
   two sources of space between the same two blocks is how gaps double. */
.sg-pagehead {
  background: var(--sg-popcorn-soft);
  padding: clamp(26px, 4vw, 48px) 0;
  margin-bottom: 0;
}

.sg-pagehead h1,
.sg-pagehead .sg-pagehead-title {
  font-size: clamp(1.75rem, 5vw, var(--sg-fs-headline-lg));
  margin: 0 0 10px;
}

.sg-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-body);
  list-style: none;
}

.sg-breadcrumbs a {
  color: var(--sg-rose);
}

.sg-breadcrumbs .sep {
  color: var(--sg-muted) !important;
  height: unset !important;
  background: unset !important;
}

.sg-btn,
.genius-button,
.genius-button-solid,
.furniture-btn,
.join-btn,
.solid-btn,
.btn-brand-1-border {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: var(--sg-r-pill);
  border: 1.5px solid transparent;
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-body);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--sg-fast) var(--sg-ease),
    color var(--sg-fast) var(--sg-ease),
    border-color var(--sg-fast) var(--sg-ease),
    box-shadow var(--sg-fast) var(--sg-ease),
    transform var(--sg-fast) var(--sg-ease);
}

.sg-btn--primary,
.genius-button-solid,
.solid-btn,
.btn-brand-1-border {
  background: var(--sg-rose);
  border-color: var(--sg-rose);
  color: #fff !important;
}

.sg-btn--primary:hover,
.genius-button-solid:hover,
.solid-btn:hover,
.btn-brand-1-border:hover {
  background: var(--sg-tosca-deeper);
  border-color: var(--sg-tosca-deeper);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--sg-lift-lg);
}

.sg-btn--outline,
.genius-button,
.furniture-btn,
.join-btn {
  background: transparent;
  border-color: var(--sg-ink);
  color: var(--sg-ink) !important;
}

.sg-btn--outline:hover,
.genius-button:hover,
.furniture-btn:hover,
.join-btn:hover {
  background: var(--sg-ink);
  border-color: var(--sg-ink);
  color: #fff !important;
  transform: translateY(-2px);
}

.sg-btn--ghost {
  background: var(--sg-tosca-soft);
  border-color: transparent;
  color: var(--sg-tosca-deeper) !important;
}

.sg-btn--ghost:hover {
  background: var(--sg-tosca-deep);
  color: #fff !important;
}

.sg-btn--block {
  width: 100%;
}

.sg-btn:disabled,
.sg-btn[disabled],
.genius-button-solid:disabled,
button:disabled {
  background: var(--sg-hairline);
  border-color: var(--sg-hairline);
  color: var(--sg-muted) !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Text link with a real underline weight. */
.sg-textlink {
  display: inline-block;
  font-size: var(--sg-fs-body);
  font-weight: 800;
  color: var(--sg-tosca-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.sg-textlink:hover {
  color: var(--sg-tosca-deeper);
}

/* ============================================================
   FORMS
   16px minimum on every control — anything smaller triggers
   iOS zoom-on-focus and breaks checkout.
   ============================================================ */
.sg-field {
  display: block;
  margin-bottom: 18px;
}

.sg-label,
.genius-label,
label {
  display: block;
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-ink);
  margin-bottom: 6px;
}

.sg-label--required::after {
  content: "*";
  color: var(--sg-danger);
  margin-left: 3px;
}

.sg-input,
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-body);
  font-weight: 500;
  color: var(--sg-ink);
  background: var(--sg-paper);
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r);
  outline: none;
  transition:
    border-color var(--sg-fast) var(--sg-ease),
    box-shadow var(--sg-fast) var(--sg-ease);
}

textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

.sg-input::placeholder,
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--sg-muted);
  opacity: 1;
}

.sg-input:focus,
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--sg-tosca-deep);
  box-shadow: var(--sg-ring);
}

.sg-input[aria-invalid="true"],
.sg-input.is-error,
.form-control.is-invalid {
  border-color: var(--sg-danger);
}

/* Errors are icon + text, never colour alone. Empty (no JS message set
   yet) collapses to nothing instead of showing a bare "!" badge. */
.sg-error:empty {
  display: none;
}

.sg-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-danger);
  margin-top: 6px;
}

.sg-error::before {
  content: "!";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sg-danger);
  color: #fff;
  font-size: var(--sg-fs-micro);
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}

.sg-help {
  font-size: var(--sg-fs-body);
  color: var(--sg-body);
  margin-top: 6px;
}

input[type="checkbox"],
input[type="radio"],
.checkbox {
  width: 20px;
  height: 20px;
  min-height: 0;
  accent-color: var(--sg-tosca-deep);
  cursor: pointer;
  flex-shrink: 0;
}

/* ============================================================
   HEADER / SITE NAV
   Markup: header > .header > .header-top-area > .header-layout-4
                          > .header-layout-4 > #header-sticky.header-4
                            > .mega-menu-wrapper > .header-main-4
   The ground colours come from the markup's own bg-pantone-*
   classes (popcorn bar, "apricot" notice — legacy class name,
   resolves to Hairline post-palette-swap) — never overridden here.
   Ink on popcorn is 12.39:1 and on Hairline 12.60:1.
   ============================================================ */
.header {
  position: relative;
  z-index: 500;
}

/* Top notice — Hairline ground from the markup's legacy "apricot" class, ink text. */
.header-to-main {
  padding: 10px var(--sg-gutter);
}

.header-top-notice p,
.header-top-notice {
  margin: 0;
  max-width: none;
  font-size: var(--sg-fs-body);
  font-weight: 600;
  color: var(--sg-ink);
  text-align: center;
}

.header-top-notice strong {
  font-weight: 800;
  color: var(--sg-rose-deep);
}

.header-layout-4 {
  width: 100%;
}

.header-4 {
  border-bottom: 1px solid rgb(36 30 28 / 0.1);
}

/* #header-sticky is pinned by main.js on scroll. */
#header-sticky.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  box-shadow: var(--sg-lift);
}

/* No .container exists inside the header — supply the shell here. */
.mega-menu-wrapper {
  width: 100%;
  max-width: var(--sg-container);
  margin-inline: auto;
  padding-inline: var(--sg-gutter);
}

.header-main-4 {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 78px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

/* The logo image carries an inline width:100%, so the box is constrained
   here on the wrapper rather than on the image itself. */
.header-logo {
  flex: 0 0 auto;
  width: clamp(120px, 18vw, 156px);
  display: flex;
  align-items: center;
}

.header-logo a {
  display: block;
  width: 100%;
}

.header-logo img {
  display: block;
  width: 100%;
  max-height: 38px;
  object-fit: contain;
  object-position: left center;
}

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* --- desktop menu --- */
.main-menu > nav > ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-menu nav > ul > li {
  position: relative;
  max-width: none;
}

.main-menu nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--sg-r-pill);
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-ink);
  white-space: nowrap;
  transition:
    background var(--sg-fast) var(--sg-ease),
    color var(--sg-fast) var(--sg-ease);
}

.main-menu nav > ul > li > a:hover,
.main-menu nav > ul > li.active > a {
  background: var(--sg-paper);
  color: var(--sg-tosca-deeper);
}

.main-menu nav > ul > li.active > a {
  font-weight: 800;
  box-shadow: inset 0 -3px 0 var(--sg-tosca-deep);
}

/* Dropdown — .submenu is populated by fetchHeaderCategories(). */
.main-menu .submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: var(--sg-paper);
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r-lg);
  box-shadow: var(--sg-lift-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--sg-fast) var(--sg-ease),
    transform var(--sg-fast) var(--sg-ease),
    visibility var(--sg-fast);
  z-index: 60;
}

/* Empty until the fetch resolves — don't flash an empty white box. */
.main-menu .submenu:empty {
  display: none;
}

.main-menu .has-dropdown:hover > .submenu,
.main-menu .has-dropdown:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-menu .submenu li {
  max-width: none;
}

.main-menu .submenu li a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--sg-r-sm);
  font-size: var(--sg-fs-body);
  font-weight: 600;
  color: var(--sg-body);
  white-space: nowrap;
}

.main-menu .submenu li a:hover {
  background: var(--sg-tosca-soft);
  color: var(--sg-tosca-deeper);
}

/* --- header search (hidden by d-none in markup, styled for when enabled) --- */
.header-search {
  position: relative;
}

.header-search input {
  min-height: 48px;
  padding: 12px 52px 12px 18px;
  border-radius: var(--sg-r-pill);
  border: 1.5px solid var(--sg-ink);
  font-size: var(--sg-fs-body);
}

.header-search button {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* --- actions --- */
.header-action {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 0 !important;
}

.header-action-item {
  position: relative;
  display: flex;
}

.header-action-btn {
  position: relative;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--sg-ink);
  cursor: pointer;
  transition: background var(--sg-fast) var(--sg-ease);
}

.header-action-btn:hover {
  background: var(--sg-paper);
}

/* Icons are inline SVG with hardcoded stroke="black" — retint to ink. */
.header-action-btn svg [stroke="black"],
.header-action-btn svg [stroke="#000000"] {
  stroke: var(--sg-ink);
}

.header-action-btn svg [fill="black"] {
  fill: var(--sg-ink);
}

.header-action-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--sg-r-pill);
  background: var(--sg-rose);
  color: #fff;
  font-size: var(--sg-fs-micro);
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}

.header-action-badge:empty {
  display: none;
}

/* --- hamburger ---
   Markup is <a class="sidebar__toggle"><div class="bar-icon-2"><span>×3.
   It is an anchor, not a button. */
.header-humbager {
  display: none;
  margin-left: 8px !important;
}

.header-humbager .sidebar__toggle {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--sg-ink);
  transition: background var(--sg-fast) var(--sg-ease);
}

.header-humbager .sidebar__toggle:hover {
  background: var(--sg-paper);
}

.bar-icon-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 18px;
}

.bar-icon-2 span {
  display: block;
  width: 100%;
  height: 2.5px;
  border-radius: var(--sg-r-xs);
  background: var(--sg-ink);
  transition: transform var(--sg-fast) var(--sg-ease);
}

.bar-icon-2 span:nth-child(2) {
  width: 70%;
}

.header-humbager .sidebar__toggle:hover .bar-icon-2 span:nth-child(2) {
  width: 100%;
}

/* Theme leftover, hidden by d-none in the markup. */
.header__hamburger {
  display: none !important;
}

@media (max-width: 991px) {
  .header-humbager {
    display: block;
  }

  .header-main-4 {
    min-height: 66px;
    gap: 12px;
  }

  .header-action-btn {
    width: 44px;
    height: 44px;
  }
}

/* ============================================================
   OFFCANVAS (mobile menu) + overlays
   ============================================================ */
/* nav-drawer.js adds this to <body> while the drawer is open, so the
   page behind it can't scroll along with it. */
body.nav-drawer-open {
  overflow: hidden;
}

.offcanvas__info {
  position: fixed;
  top: 0;
  right: 0;
  width: min(340px, 88vw);
  height: 100%;
  background: var(--sg-paper);
  z-index: 1002;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--sg-slow) var(--sg-ease),
    visibility 0s linear var(--sg-slow);
  overflow-y: auto;
  box-shadow: -6px 0 30px rgb(36 30 28 / 0.18);
}

.offcanvas__info.info-open,
.offcanvas__info.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--sg-slow) var(--sg-ease);
}

.offcanvas__wrapper {
  padding: 24px;
}

.offcanvas__logo img {
  height: 30px;
  width: auto;
}

.offcanvas__close button {
  width: 44px;
  height: 44px;
  border: none;
  background: var(--sg-hairline);
  border-radius: 50%;
  color: var(--sg-ink);
  font-size: var(--sg-fs-subtitle);
  cursor: pointer;
}

.offcanvas__contact-text,
.offcanvas__contact-text a {
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-ink);
}

.offcanvas__contact-icon {
  color: var(--sg-tosca-deep);
}

.offcanvas__social a,
.theme-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--sg-hairline);
  color: var(--sg-ink);
  font-size: var(--sg-fs-subtitle);
  transition:
    background var(--sg-fast) var(--sg-ease),
    color var(--sg-fast) var(--sg-ease),
    transform var(--sg-fast) var(--sg-ease);
}

.offcanvas__social a:hover,
.theme-social a:hover,
.furniture-bg-hover:hover {
  background: var(--sg-tosca-deep);
  color: #fff;
  transform: translateY(-2px);
}

.theme-social a img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.body-overlay,
.offcanvas__overlay {
  position: fixed;
  inset: 0;
  background: rgb(36 30 28 / 0.45);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--sg-fast) var(--sg-ease),
    visibility var(--sg-fast);
}

/* main.js toggles .opened on .body-overlay (search) and .overlay-open
   on .offcanvas__overlay (mobile menu). Both must be covered. */
.body-overlay.opened,
.offcanvas__overlay.overlay-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu ul {
  list-style: none;
}

.mobile-menu ul li a {
  display: block;
  padding: 13px 12px;
  border-radius: var(--sg-r-sm);
  font-size: var(--sg-fs-lead);
  font-weight: 700;
  color: var(--sg-ink);
}

.mobile-menu ul li a:hover {
  background: var(--sg-tosca-soft);
  color: var(--sg-tosca-deeper);
}

/* meanmenu.min.js (main.js:15) builds this markup inside .mobile-menu.
   Absorbed from meanmenu.min.css and restyled — the offcanvas already
   supplies the drawer and close button, so its own bar stays hidden. */
.mean-container .mean-bar {
  position: relative;
  width: 100%;
  min-height: 0;
  padding: 0;
  background: transparent;
}

.mean-container a.meanmenu-reveal {
  display: none !important;
}

.mean-container .mean-nav {
  float: none;
  width: 100%;
  margin: 0;
  background: transparent;
}

/* meanmenu.js calls .hide() on this list at init, expecting its own
   reveal link (hidden above) to .show() it back — our drawer button
   opens the whole panel instead, so this list must stay visible. */
.mean-container .mean-nav > ul {
  display: block !important;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.mean-container .mean-nav ul li {
  position: relative;
  float: none;
  width: 100%;
  max-width: none;
  border-bottom: 1px solid var(--sg-hairline);
}

.mean-container .mean-nav ul li a {
  display: block;
  width: 100%;
  padding: 14px 10px;
  margin: 0;
  font-size: var(--sg-fs-lead);
  font-weight: 700;
  color: var(--sg-ink);
  text-decoration: none;
  border: none;
}

.mean-container .mean-nav ul li a:hover {
  color: var(--sg-tosca-deeper);
}

/* Nested submenu */
.mean-container .mean-nav ul li li a {
  padding-left: 16px;
  font-size: var(--sg-fs-body);
  font-weight: 600;
  color: var(--sg-body);
  opacity: 1;
}

/* Expand toggle */
.mean-container .mean-nav ul li a.mean-expand {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 52px;
  padding: 0 !important;
  display: grid;
  place-items: center;
  font-size: var(--sg-fs-subtitle);
  font-weight: 800;
  color: var(--sg-body);
  border: none !important;
  background: transparent;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
  background: var(--sg-hairline);
}

.mean-container .mean-push {
  display: none;
}

/* ============================================================
   SEARCH DRAWER
   ============================================================ */
.df-search-area {
  position: fixed;
  inset: 0;
  z-index: 1003;
  background: var(--sg-paper);
  padding-top: 12vh;
  transform: translateY(-100%);
  transition: transform var(--sg-slow) var(--sg-ease);
}

.df-search-area.opened {
  transform: translateY(0);
}

.df-search-input input {
  font-size: var(--sg-fs-title);
  min-height: 64px;
  border-width: 0 0 2px;
  border-radius: 0;
  padding-inline: 0;
}

.df-search-close-btn {
  min-height: 48px;
  padding: 12px 24px;
  border: 1.5px solid var(--sg-ink);
  background: transparent;
  border-radius: var(--sg-r-pill);
  font-size: var(--sg-fs-body);
  font-weight: 800;
  color: var(--sg-ink);
  cursor: pointer;
}

/* ============================================================
   PRODUCT CARD
   Markup emitted by displayTrendingProducts() / product lists.
   ============================================================ */
.product-item,
.furniture__product {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--sg-paper);
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r-lg);
  overflow: hidden;
  transition:
    transform var(--sg-fast) var(--sg-ease),
    box-shadow var(--sg-fast) var(--sg-ease),
    border-color var(--sg-fast) var(--sg-ease);
}

.product-item:hover {
  transform: translateY(-4px);
  border-color: var(--sg-tosca-deep);
  box-shadow: var(--sg-lift-card);
}

.product-thumb {
  position: relative;
  aspect-ratio: 1;
  background: var(--sg-hairline);
  overflow: hidden;
}

/* The anchor must be the full square. Product markup adds Bootstrap's
   .position-relative here, which makes the <a> the containing block for
   .imageHover — and an inline <a> is only line-height tall, so inset: 0
   collapsed the hover image. Forcing block + 100% makes both pages behave
   the same whether or not that class is present. */
.product-thumb > a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sg-hover) var(--sg-ease);
}

.product-thumb .imageHover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--sg-fast) var(--sg-ease);
}

.product-item:hover .imageHover {
  opacity: 1;
}

/* New / Best / Promo can all apply to the same product at once
   (buildProductBadges() in helper.js) — stacked, not just one pill. */
.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.product-trending,
.sg-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--sg-r-pill);
  background: var(--sg-tosca-deep);
  color: #fff;
  font-size: 0.6875rem;
  /* 11px — smaller than --sg-fs-micro, this badge is compact by design */
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sg-badge--soft {
  background: var(--sg-popcorn);
  color: var(--sg-ink);
}

/* Bold, high-contrast trio instead of the soft/pastel default — meant to
   read as an urgent call-out, not blend with the rest of the card. */
.sg-badge--new {
  background: var(--sg-sky-deep);
  color: #fff;
}

/* ink, not white — white-on-popcorn fails badly, ink clears 12.39:1
   (the same brand-field pairing documented on --sg-brand above). */
.sg-badge--best {
  background: var(--sg-popcorn);
  color: var(--sg-ink);
}

.sg-badge--promo {
  background: var(--sg-danger);
  color: #fff;
}

.product-action-item {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
}

.product-action-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--sg-ink);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--sg-fast) var(--sg-ease),
    transform var(--sg-fast) var(--sg-ease),
    background var(--sg-fast) var(--sg-ease);
}

.product-item:hover .product-action-btn,
.product-action-btn:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.product-action-btn:hover {
  background: var(--sg-tosca-deep);
}

.product-action-btn svg path {
  stroke: currentColor;
}

.product-tooltip {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--sg-ink);
  color: #fff;
  font-size: var(--sg-fs-micro);
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--sg-r-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sg-fast) var(--sg-ease);
}

.product-action-btn:hover .product-tooltip {
  opacity: 1;
}

.product-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  /* room for the add-to-cart button pinned bottom-right */
  padding-right: 74px;
}

.product-cart-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--sg-rose);
  color: #fff;
  cursor: pointer;
  transition:
    background var(--sg-fast) var(--sg-ease),
    transform var(--sg-fast) var(--sg-ease),
    box-shadow var(--sg-fast) var(--sg-ease);
}

.product-cart-btn:hover {
  background: var(--sg-tosca-deeper);
  transform: translateY(-2px);
  box-shadow: var(--sg-lift);
}

.product-cart-btn:active {
  transform: translateY(0);
}

.product-cart-btn:focus-visible {
  outline: 2px solid var(--sg-ink);
  outline-offset: 2px;
}

.product-cart-btn:disabled {
  background: var(--sg-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.product-title,
.genius-product-title {
  font-family: var(--sg-display-face);
  font-size: var(--sg-fs-subtitle);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  height: 50px;
}

.product-title a {
  color: var(--sg-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.product-title a:hover {
  color: var(--sg-tosca-deeper);
}

.product-content p {
  font-size: var(--sg-fs-body);
  margin: 0;
}

.product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.product-new-price,
.bd-product__new-price {
  font-size: var(--sg-fs-subtitle);
  font-weight: 800;
  color: var(--sg-rose-deep);
}

.product-old-price,
.bd-product__old-price {
  font-size: var(--sg-fs-body);
  font-weight: 600;
  color: var(--sg-muted);
}

.product-old-price del {
  text-decoration: line-through;
}

/* Phone-width cards run 2-up (col-6) at ~180px wide — the desktop-scale
   title/price/button (20px text, 48px circle) leaves almost no room and
   forces the price onto two lines. Scaled down for this width only; at
   tablet widths col-6 cards are wide enough that the desktop sizing fits. */
@media (max-width: 575px) {
  .product-content {
    padding: 12px;
    padding-right: 54px;
  }

  .product-title,
  .genius-product-title {
    font-size: var(--sg-fs-body);
    height: 40px;
  }

  .product-new-price,
  .bd-product__new-price {
    font-size: var(--sg-fs-body);
  }

  .product-old-price,
  .bd-product__old-price {
    font-size: var(--sg-fs-micro);
  }

  .product-cart-btn {
    width: 36px;
    height: 36px;
    right: 10px;
    bottom: 10px;
  }

  .product-cart-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* Product detail reviews only — the product card no longer shows a rating. */
.user-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--sg-fs-body);
  color: var(--sg-star);
}

.user-rating a {
  color: inherit;
}

/* Swiper clips at its own box, so a card that lifts on hover gets its top
   edge and shadow cut off. The room has to come from inside the clip box:
   vertical padding on the wrapper. Horizontal padding is deliberately NOT
   used — it would change the width Swiper measures for slidesPerView — so
   the card shadow carries a negative spread instead of widening.
   ============================================================ */
.furuniture-active .swiper-wrapper,
.swiper-testimonial-products .swiper-wrapper {
  padding-top: 8px;
  padding-bottom: 26px;
}

/* ============================================================
   SWIPER NAV
   ============================================================ */
.sg-navbtn,
.discount-slider-button-prev,
.discount-slider-button-next,
.swiper-button-prev,
.swiper-button-next {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--sg-ink);
  background: var(--sg-paper);
  color: var(--sg-ink);
  font-size: var(--sg-fs-body);
  cursor: pointer;
  transition:
    background var(--sg-fast) var(--sg-ease),
    color var(--sg-fast) var(--sg-ease);
}

.sg-navbtn:hover,
.discount-slider-button-prev:hover,
.discount-slider-button-next:hover,
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: var(--sg-ink);
  color: #fff;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 16px;
  font-weight: 800;
}

.discount-slider-navigation,
.furniture__navigation,
.sg-swiper-nav {
  display: flex;
  gap: 8px;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--sg-hairline);
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: var(--sg-tosca-deep);
  width: 28px;
  border-radius: var(--sg-r-pill);
}

/* ============================================================
   SKELETONS
   Pulse, never a sweeping shimmer — the system is flat.
   ============================================================ */
.sg-skeleton {
  display: block;
  background: var(--sg-hairline);
  border-radius: var(--sg-r-sm);
  animation: sg-pulse 1.6s ease-in-out infinite alternate;
}

.sg-skeleton--media {
  aspect-ratio: 1;
  border-radius: var(--sg-r);
  margin-bottom: 14px;
}

.sg-skeleton--line {
  height: 14px;
  margin-bottom: 10px;
}

.sg-skeleton--title {
  height: 24px;
  width: 65%;
  margin-bottom: 14px;
}

@keyframes sg-pulse {
  to {
    opacity: 0.55;
  }
}

/* ============================================================
   CHIPS / TAGS / PILLS
   ============================================================ */
.sg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: var(--sg-r-pill);
  border: 1.5px solid var(--sg-hairline);
  background: var(--sg-paper);
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-ink);
  cursor: pointer;
  transition:
    background var(--sg-fast) var(--sg-ease),
    color var(--sg-fast) var(--sg-ease),
    border-color var(--sg-fast) var(--sg-ease);
}

.sg-chip:hover {
  border-color: var(--sg-ink);
}

/* Selected inverts to ink — a luminance flip, legible without colour. */
.sg-chip.is-selected {
  background: var(--sg-ink);
  border-color: var(--sg-ink);
  color: #fff;
  font-weight: 800;
}

.sg-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--sg-r-pill);
  background: var(--sg-hairline);
  font-size: var(--sg-fs-micro);
  font-weight: 700;
  color: var(--sg-body);
}

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.sg-card,
.genius-card {
  background: var(--sg-paper);
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r-lg);
  padding: 20px;
}

.sg-card > *,
.genius-card > * {
  color: inherit;
}

.sg-panel {
  background: var(--sg-hairline);
  border-radius: var(--sg-r-lg);
  padding: clamp(20px, 4vw, 32px);
}

/* ============================================================
   MODALS / OFFCANVAS CART (Bootstrap shells, themed)
   ============================================================ */
.modal-content {
  border: none;
  border-radius: var(--sg-r-xl);
  overflow: hidden;
}

.modal-header,
.offcanvas-header {
  border-bottom: 1px solid var(--sg-hairline);
  padding: 20px 24px;
}

.modal-title,
.offcanvas-title {
  font-family: var(--sg-display-face);
  font-size: var(--sg-fs-title);
  font-weight: 700;
  margin: 0;
}

.offcanvas-body {
  padding: 24px;
}

.btn-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  opacity: 1;
}

.dropdown-cart-total,
.sg-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--sg-fs-lead);
  font-weight: 800;
  color: var(--sg-ink);
}

/* ============================================================
   ACCORDION (FAQ, shipping)
   ============================================================ */
.accordion-item {
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r-lg) !important;
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--sg-paper);
}

.accordion-button {
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-lead);
  font-weight: 800;
  color: var(--sg-ink);
  background: var(--sg-paper);
  padding: 20px 22px;
  min-height: 56px;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  background: var(--sg-tosca-soft);
  color: var(--sg-tosca-deeper);
}

.accordion-button::after {
  width: 20px;
  height: 20px;
  background-size: 20px;
}

.accordion-body {
  padding: 6px 22px 22px;
  font-size: var(--sg-fs-body);
  color: var(--sg-body);
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin-top: 40px;
}

.pagination a,
.pagination .page-link,
.pagination strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 14px;
  border-radius: var(--sg-r-sm);
  border: 1.5px solid var(--sg-hairline);
  font-size: var(--sg-fs-body);
  font-weight: 800;
  color: var(--sg-ink);
  background: var(--sg-paper);
}

.pagination a:hover {
  border-color: var(--sg-ink);
}

.pagination strong,
.pagination .active a,
.pagination .page-item.active .page-link {
  background: var(--sg-ink);
  border-color: var(--sg-ink);
  color: #fff;
}

/* ============================================================
   FOOTER
   Popcorn, matching the header — the brand field bookends the page
   top and bottom. Ink sits on it at 12.39:1.
   Popcorn is only 1.33:1 against the white section above, so the
   1px ink edge (3.46:1) is what actually marks the boundary in
   grayscale.
   ============================================================ */
.genius-footer {
  background: var(--sg-brand);
  color: var(--sg-ink);
  border-top: 1px solid var(--sg-edge);
}

.footer-area {
  padding: clamp(48px, 7vw, 88px) 0 24px;
}

.footer-logo {
  max-width: 190px;
}

.footer-logo img {
  height: 30px !important;
  width: 100% !important;
  object-fit: contain;
  object-position: left;
}

/* Prose at 0.75 ink (6.15:1); anything interactive is full ink. */
.genius-footer p {
  max-width: 42ch;
  font-size: var(--sg-fs-body);
  color: rgb(36 30 28 / 0.75);
}

.footer-widget-title h4 {
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-micro);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sg-ink);
  margin: 0 0 18px;
}

.footer-link ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-link li {
  max-width: none;
}

.footer-link a {
  font-size: var(--sg-fs-body);
  font-weight: 600;
  color: rgb(36 30 28 / 0.8);
}

.footer-link a:hover {
  color: var(--sg-tosca-deeper);
}

/* Contact rows: the icon and its text are one link, so they share
   one colour rather than the icon going blue and the text staying grey.
   :not(.furniture-bg-hover) excludes the social tiles — the WhatsApp
   tile also matches a[href^="https://wa.me"], and at higher specificity
   than .theme-social a it was overriding that tile's hover colour. */
.genius-footer .footer-area a[href^="https://wa.me"]:not(.furniture-bg-hover),
.genius-footer .footer-area a[href^="mailto:"]:not(.furniture-bg-hover),
.genius-footer .footer-area a[href^="tel:"]:not(.furniture-bg-hover) {
  color: var(--sg-ink);
  font-weight: 600;
}

.genius-footer .footer-area a[href^="https://wa.me"]:not(.furniture-bg-hover) p,
.genius-footer .footer-area a[href^="mailto:"]:not(.furniture-bg-hover) p,
.genius-footer .footer-area a[href^="tel:"]:not(.furniture-bg-hover) p {
  color: inherit;
  max-width: none;
}

.genius-footer .footer-area a[href^="https://wa.me"]:not(.furniture-bg-hover):hover,
.genius-footer .footer-area a[href^="mailto:"]:not(.furniture-bg-hover):hover,
.genius-footer .footer-area a[href^="tel:"]:not(.furniture-bg-hover):hover {
  color: var(--sg-tosca-deeper);
}

.genius-footer .theme-social a {
  background: var(--sg-paper);
  color: var(--sg-ink);
}

.genius-footer .theme-social a:hover {
  background: var(--sg-tosca-deep);
  color: var(--sg-paper);
}

.genius-footer .theme-social a:hover img {
  filter: invert(1);
}

.footer-copyright-area {
  border-top: 1px solid rgb(36 30 28 / 0.18);
  padding: 22px 0;
}

.footer-copyright-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.footer-copyright-text p,
.footer-conditions a {
  font-size: var(--sg-fs-body);
  color: var(--sg-ink);
  margin: 0;
  max-width: none;
}

.footer-copyright-text a,
.footer-conditions a:hover {
  color: var(--sg-tosca-deeper);
}

.footer-conditions ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
}

.footer-conditions li {
  max-width: none;
}

.genius-footer a:focus-visible {
  outline: 2px solid var(--sg-ink);
  outline-offset: 3px;
}

/* ============================================================
   LOADER / BACK TO TOP
   ============================================================ */
.bd-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sg-paper);
}

.bd-loader-item {
  width: 10px;
  height: 10px;
  margin: 0 3px;
  border-radius: 50%;
  background: var(--sg-tosca-deep);
  animation: sg-fade 1s var(--sg-ease) infinite alternate;
}

.bd-loader-item:nth-child(2n) {
  animation-delay: 0.12s;
}

.bd-loader-item:nth-child(3n) {
  animation-delay: 0.24s;
}

@keyframes sg-fade {
  to {
    opacity: 0.25;
  }
}

.backtotop-wrap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sg-ink);
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 900;
  box-shadow: var(--sg-lift);
}

.cursor-pointer {
  cursor: pointer;
}

/* ============================================================
   SPACING UTILITIES
   Absorbed from spacing.css — these px-scale classes are used
   directly in the views, so they stay part of the system.
   ============================================================ */
.mt-0 {
  margin-top: 0;
}
.mb-0 {
  margin-bottom: 0;
}
.mt-10 {
  margin-top: 10px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mt-15 {
  margin-top: 15px;
}
.mb-15 {
  margin-bottom: 15px;
}
.mt-20 {
  margin-top: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mt-25 {
  margin-top: 25px;
}
.mb-25 {
  margin-bottom: 25px;
}
.mt-30 {
  margin-top: 30px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mt-35 {
  margin-top: 35px;
}
.mb-35 {
  margin-bottom: 35px;
}
.mt-40 {
  margin-top: 40px;
}
.mb-40 {
  margin-bottom: 40px;
}
.mt-50 {
  margin-top: 50px;
}
.mb-50 {
  margin-bottom: 50px;
}
.mb-60 {
  margin-bottom: 60px;
}
.mb-100 {
  margin-bottom: 100px;
}
.ml-30 {
  margin-left: 30px;
}
.ml-50 {
  margin-left: 50px;
}
.mr-10 {
  margin-right: 10px;
}
.mr-15 {
  margin-right: 15px;
}
.mr-20 {
  margin-right: 20px;
}
.mr-50 {
  margin-right: 50px;
}
.pt-0 {
  padding-top: 0;
}
.pb-0 {
  padding-bottom: 0;
}
.pt-20 {
  padding-top: 20px;
}
.pb-20 {
  padding-bottom: 20px;
}
.pt-40 {
  padding-top: 40px;
}
.pb-35 {
  padding-bottom: 35px;
}
.pt-50 {
  padding-top: 50px;
}
.pb-40 {
  padding-bottom: 40px;
}
.pt-80 {
  padding-top: 80px;
}
.pl-50 {
  padding-left: 50px;
}
.pt-95 {
  padding-top: 95px;
}
.pb-95 {
  padding-bottom: 95px;
}
.pt-100 {
  padding-top: 100px;
}
.pr-80 {
  padding-right: 80px;
}
.pt-120 {
  padding-top: 120px;
}
.pb-120 {
  padding-bottom: 120px;
}

@media (max-width: 767px) {
  .pt-100,
  .pt-120,
  .pt-95 {
    padding-top: 56px;
  }
  .pb-120,
  .pb-95 {
    padding-bottom: 56px;
  }
  .pt-80 {
    padding-top: 48px;
  }
  .ml-50,
  .pl-50,
  .mr-50,
  .pr-80 {
    margin-left: 0;
    padding-left: 0;
    margin-right: 0;
    padding-right: 0;
  }
  .mb-100 {
    margin-bottom: 48px;
  }
}

/* ============================================================
   POINTER GATING
   Touch fires a false :hover on tap and the state sticks until
   the next tap elsewhere. Every decorative hover transform in the
   system is reverted where hover is not a real capability; colour
   and shadow feedback stay, because only movement misleads.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  .sg-btn--primary:hover,
  .genius-button-solid:hover,
  .solid-btn:hover,
  .btn-brand-1-border:hover,
  .sg-btn--outline:hover,
  .genius-button:hover,
  .furniture-btn:hover,
  .join-btn:hover,
  .product-item:hover,
  .product-cart-btn:hover,
  .offcanvas__social a:hover,
  .theme-social a:hover,
  .furniture-bg-hover:hover,
  .product-thumb img,
  .product-item:hover .product-thumb img,
  .product-item:hover .product-action-btn {
    transform: none;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    /* Gentler, not zero: colour and opacity still transition briskly
       because they aid comprehension. Movement is what gets removed,
       via the transform: none list below. */
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    scroll-behavior: auto !important;
  }

  /* Movement removed; colour, opacity and shadow still transition. */
  .sg-btn:hover,
  .sg-btn--primary:hover,
  .sg-btn--outline:hover,
  .product-item:hover,
  .product-cart-btn:hover,
  .theme-social a:hover,
  .furniture-bg-hover:hover,
  .product-item:hover .product-thumb img {
    transform: none;
  }
}