/* ============================================================
   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;
  /* 1px soft ink edge — 3.01:1 against the tightest card fill */
  --sg-edge: rgb(36 30 28 / 0.55);

  /* --- action --- */
  --sg-rose: #c42a6b;
  /* 5.40:1 as text; white-on-rose 5.40:1 */
  --sg-rose-deep: #a11f57;
  --sg-rose-soft: #fce7f0;

  /* --- brand grounds (Pantone names are the incumbent brand truth) --- */
  --sg-apricot: #ffc0a0;
  --sg-pink: #ffa0af;
  --sg-swizzle: #f4eee8;
  --sg-buttercream: #f0e3ce;
  --sg-popcorn: #f8de8d;
  /* the brand field — ink sits on it at 12.39:1 */
  --sg-brand: #f8de8d;
  --sg-lilac: #e0c7d7;
  --sg-jade: #bcd9c8;

  /* --- state --- */
  --sg-star: #e0a020;
  --sg-warning: #8a5a00;
  --sg-success: #1d7a52;
  --sg-danger: #c0331f;

  /* --- 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(196 42 107 / 0.18);

  /* --- motion --- */
  --sg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sg-fast: 0.18s;
  --sg-slow: 0.4s;

  /* --- layout --- */
  --sg-container: 1280px;
  --sg-gutter: clamp(16px, 4vw, 32px);
  --sg-section: clamp(56px, 8vw, 104px);
}

/* ============================================================
   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-rose);
  text-decoration: none;
  transition: color var(--sg-fast) var(--sg-ease);
}

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

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-rose);
  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;
}

/* ============================================================
   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-band {
  padding-block: var(--sg-section);
}

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

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

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

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

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

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

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

/* Incumbent brand ground utilities kept — used directly in markup. */
.bg-pantone-sugar-swizzle {
  background: var(--sg-swizzle);
}

.bg-pantone-buttercream {
  background: var(--sg-buttercream);
}

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

.bg-pantone-alluring-apricot {
  background: var(--sg-apricot);
}

.bg-pantone-lilac-snow {
  background: var(--sg-lilac);
}

.bg-pantone-misty-jade {
  background: var(--sg-jade);
}

/* Apricot text on paper is 1.58:1 — remap every legacy use to rose. */
.color-pantone-alluring-apricot,
.furniture-clr-hover:hover {
  color: var(--sg-rose) !important;
}

.p-relative {
  position: relative;
}

.sg-section-head {
  margin-bottom: clamp(28px, 4vw, 48px);
}

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

.sg-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-rose);
  margin-bottom: 8px;
}

/* ============================================================
   PAGE TITLE / BREADCRUMB
   ============================================================ */
.sg-pagehead {
  background: var(--sg-swizzle);
  padding: clamp(32px, 6vw, 64px) 0;
  margin-bottom: clamp(24px, 4vw, 48px);
}

.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);
}

/* ============================================================
   BUTTONS
   Rose fill takes WHITE text (5.40:1). Ink on rose is 3.05:1 and
   is never used.
   ============================================================ */
.sg-btn,
.msglow-button,
.msglow-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,
.msglow-button-solid,
.solid-btn,
.btn-brand-1-border {
  background: var(--sg-rose);
  border-color: var(--sg-rose);
  color: #fff !important;
}

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

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

.sg-btn--outline:hover,
.msglow-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-rose-soft);
  border-color: transparent;
  color: var(--sg-rose-deep) !important;
}

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

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

.sg-btn:disabled,
.sg-btn[disabled],
.msglow-button-solid:disabled,
button:disabled {
  background: var(--sg-swizzle);
  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-rose);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

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

/* ============================================================
   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,
.msglow-label,
label {
  display: block;
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-ink);
  margin-bottom: 6px;
}

.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-rose);
  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. */
.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-rose);
  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) — never overridden here.
   Ink on popcorn is 12.39:1 and on apricot 10.41:1.
   ============================================================ */
.header {
  position: relative;
  z-index: 500;
}

/* Top notice — apricot ground from the markup, 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-rose-deep);
}

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

/* 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-rose-soft);
  color: var(--sg-rose-deep);
}

/* --- 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
   ============================================================ */
.offcanvas__info {
  position: fixed;
  top: 0;
  right: 0;
  width: min(340px, 88vw);
  height: 100%;
  background: var(--sg-paper);
  z-index: 1002;
  transform: translateX(100%);
  transition: transform var(--sg-slow) var(--sg-ease);
  overflow-y: auto;
  box-shadow: -6px 0 30px rgb(36 30 28 / 0.18);
}

.offcanvas__info.info-open,
.offcanvas__info.open {
  transform: translateX(0);
}

.offcanvas__wrapper {
  padding: 24px;
}

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

.offcanvas__close button {
  width: 44px;
  height: 44px;
  border: none;
  background: var(--sg-swizzle);
  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-rose);
}

.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-swizzle);
  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-rose);
  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-rose-soft);
  color: var(--sg-rose-deep);
}

/* 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;
}

.mean-container .mean-nav > ul {
  display: block;
  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 0;
  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-rose-deep);
}

/* 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-swizzle);
}

.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-rose);
  box-shadow: var(--sg-lift-card);
}

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

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sg-slow) 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;
}

.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
}

.product-trending,
.sg-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--sg-r-pill);
  background: var(--sg-rose);
  color: #fff;
  font-size: var(--sg-fs-micro);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

.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-rose);
}

.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;
}

/* Add to cart — persistent, bottom-right of the card.
   Not a hover reveal: on a phone there is no hover, and this is the
   card's primary action. White on rose is 5.40:1. */
.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-rose-deep);
  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-rose-deep);
}

.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;
}

/* 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-rose);
  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-swizzle);
  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: all 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-swizzle);
  font-size: var(--sg-fs-micro);
  font-weight: 700;
  color: var(--sg-body);
}

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

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

.sg-panel {
  background: var(--sg-swizzle);
  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-rose-soft);
  color: var(--sg-rose-deep);
}

.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. Hover uses rose-deep (5.55:1); flat rose is 4.07:1
   here and fails as body text.
   ============================================================ */
.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-rose-deep);
}

/* Contact rows: the icon and its text are one link, so they share
   one colour rather than the icon going rose 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-rose-deep);
}

/* Social — paper tiles on the popcorn ground, rose fill on hover
   (white on rose is 5.40:1). */
.genius-footer .theme-social a {
  background: var(--sg-paper);
  color: var(--sg-ink);
}

.genius-footer .theme-social a:hover {
  background: var(--sg-rose);
  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: rgb(36 30 28 / 0.75);
  margin: 0;
  max-width: none;
}

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

.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-rose);
  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;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@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;
  }
}