:root {

  --f_family_1: "Poppins", sans-serif;
  --f_family_2: "Poppins", sans-serif;
  --f_family_3: "Libre Baskerville", serif;
  --f_family_4: "Maison Neue", "Poppins", sans-serif;
  --f_family_5: "Maison Neue Book", "Poppins", sans-serif;

  --font-nav: var(--f_family_1);
  --font-body: var(--f_family_2);
  --font-display: var(--f_family_3);

  --c-black: #121212;
  --c-ink: #1c1c1c;
  --c-grey-900: #2b2b2b;
  --c-grey-700: #4c4c4c;
  --c-grey-600: #6f6f6f;
  --c-grey-400: #9c9a96;
  --c-grey-300: #d4d2ce;
  --c-grey-150: #e8e6e1;
  --c-grey-100: #f2f1ee;
  --c-white: #ffffff;

  --c-accent: #6f6f6f;

  --c-sale: #b23b3b;
  --c-success: #3f6b4f;

  --radius-sm: 2px;
  --radius-md: 4px;

  --container-w: 1440px;

  --transition: 220ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-white);
  font-size: 12px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100vw;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--c-black);
  margin: 0 0 0.4em;
  letter-spacing: 0.01em;
}
:focus-visible { outline: 2px solid var(--c-black); outline-offset: 2px; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-family: var(--font-nav);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-accent);
  margin: 0 0 10px;
}
.eyebrow--light { color: var(--caption-color, rgba(255,255,255,0.8)); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid var(--c-black);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-black);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn--dark { background: var(--c-black); color: var(--c-white); }
.btn--dark:hover { background: var(--c-grey-900); }
.btn--outline:hover { background: var(--c-black); color: var(--c-white); }
.btn--light { background: var(--c-white); color: var(--c-black); border-color: var(--c-white); }
.btn--light:hover { background: transparent; color: var(--c-white); }
.btn--outline-light { background: transparent; color: var(--c-white); border-color: rgba(255,255,255,0.7); }
.btn--outline-light:hover { background: var(--c-white); color: var(--c-black); }
.btn--block { width: 100%; }
.btn--sm { padding: 8px 16px; font-size: 10.5px; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.link-underline {
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-black);
  padding-bottom: 3px;
}
.link-underline--light { color: var(--caption-color, var(--c-white)); border-color: var(--caption-color, var(--c-white)); }

.announcement-bar {
  background: var(--c-black);
  color: var(--c-grey-150);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 9px 16px;
  font-family: var(--font-nav);
  position: relative;
  min-height: 16px;
}
.announcement-bar p { margin: 0; overflow-x: auto; white-space: nowrap; }
.announcement-bar__item {
  display: none;
}
.announcement-bar__item.is-active {
  display: block;
  animation: announcementFade 0.4s ease;
}
@keyframes announcementFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.announcement-bar a { color: inherit; text-decoration: underline; margin-left: 6px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-grey-150);
}
.site-header__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: 74px;
}
.site-header__start { display: flex; align-items: center; gap: 16px; }
.header-social { display: none; align-items: center; gap: 14px; }
.header-social a { color: var(--c-black); display: inline-flex; transition: color var(--transition); }
.header-social a:hover { color: var(--c-grey-600); }
@media (min-width: 960px) { .header-social { display: flex; } }

/* Mobile only: the 1fr/auto/1fr grid centers the logo on the true
   middle of the row — fine on desktop where both side columns are
   comparably wide, but on mobile the left side is just the hamburger
   (no header-social icons yet), so it doesn't fill its half of the
   grid and the logo ends up sitting with a big empty gap after the
   hamburger instead of right beside it. Below 960px (exactly where the
   hamburger itself is shown), switch to a plain left-to-right flex row
   instead: hamburger and logo sit close together on the left, and the
   icon group is pushed to the right edge on its own. */
@media (max-width: 959px) {
  .site-header__row { display: flex; justify-content: flex-start; }
  .site-header__row .header-icons { margin-left: auto; }
}

.site-header__nav-bar {
  display: none;
  background: var(--c-black);
  position: relative;
}
@media (min-width: 960px) {
  .site-header__nav-bar { display: block; }
  .site-header__nav-bar .container { display: flex; justify-content: center; }
}
.logo { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.logo__mark {
  font-family: var(--font-display);
  font-size: 22px;
  border: 1px solid var(--c-black);
  padding: 2px 7px;
  letter-spacing: 0.04em;
}
.logo__word {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.02em;
  display: none;
}
.logo__word--footer { display: inline-block; font-size: 24px; color: var(--c-white); margin-bottom: 14px; }
@media (min-width: 640px) { .logo__word { display: inline-block; } }

.main-nav { display: none; }
.main-nav > ul { display: flex; align-items: center; gap: 38px; }
.main-nav a {
  font-family: var(--font-nav);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 16px 0;
  color: rgba(255,255,255,0.85);
  border-bottom: 2px solid transparent;
}
.main-nav a:hover, .main-nav a.is-active { border-color: var(--c-white); color: var(--c-white); }
.has-mega { position: relative; }

@media (min-width: 960px) { .main-nav { display: block; } }

.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--c-white);
  border-top: 1px solid var(--c-grey-150);
  box-shadow: 0 24px 40px rgba(0,0,0,0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 120;
}
@media (max-width: 959px) { .mega-panel { display: none; } }
.site-header:has(.has-mega:hover) .mega-panel,
.site-header:has(.mega-panel:hover) .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-panel__inner { display: flex; gap: 60px; padding: 40px 20px 44px; }
.mega-panel__categories { flex: 1 1 auto; min-width: 0; }
.mega-panel__categories > ul { columns: 3; column-gap: 40px; }
.mega-panel__categories li { break-inside: avoid; margin-bottom: 14px; }
.mega-panel__categories a {
  font-family: var(--font-nav);
  font-size: 13.5px;
  color: var(--c-ink);
  text-transform: none;
}
.mega-panel__categories a:hover { color: var(--c-grey-600); }
.mega-panel__categories a span { color: var(--c-grey-400); font-size: 12px; margin-left: 4px; }
.mega-panel__categories li.has-children > a { font-weight: 600; }
.mega-panel__subcategories { margin: 6px 0 0 2px; }
.mega-panel__subcategories li { margin-bottom: 8px; break-inside: avoid; }
.mega-panel__subcategories a {
  font-family: var(--font-nav);
  font-size: 12.5px;
  color: var(--c-grey-600);
  text-transform: none;
  padding-left: 14px;
  position: relative;
}
.mega-panel__subcategories a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 7px; height: 1px;
  background: var(--c-grey-400);
}
.mega-panel__promo { display: flex; gap: 20px; flex: 0 0 auto; }
.mega-panel__promo-tile { display: block; width: 150px; }
.mega-panel__promo-tile img {
  width: 150px; height: 190px; object-fit: cover;
  border-radius: var(--radius-md); background: var(--c-grey-100);
  margin-bottom: 10px;
}
.mega-panel__promo-tile span {
  font-family: var(--font-nav);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.header-icons { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--c-black);
}
.icon-btn:hover { background: var(--c-grey-100); }
.cart-count {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--c-black);
  color: var(--c-white);
  font-size: 10px;
  line-height: 1;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-nav);
}

.hamburger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
  background: none;
  border: none;
  padding: 0;
}
.hamburger span { display: block; height: 2px; background: var(--c-black); }
@media (min-width: 960px) { .hamburger { display: none; } }

.search-drawer {
  max-height: 0;
  overflow: hidden;
  background: var(--c-grey-100);
  transition: max-height var(--transition);
}
.search-drawer.is-open { max-height: 90px; overflow: visible; }
.search-drawer .container { display: flex; align-items: center; gap: 12px; padding-top: 18px; padding-bottom: 18px; }
.search-drawer input { flex: 1; border: none; background: transparent; font-size: 18px; font-family: var(--font-display); }
.search-drawer input:focus { outline: none; }
.search-drawer button { background: none; border: none; font-size: 22px; }
#searchClose { flex: 0 0 auto; }

.mobile-nav {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(86vw, 340px);
  display: block;
  background: var(--c-white);
  z-index: 200;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform var(--transition);
  box-shadow: 12px 0 30px rgba(0,0,0,0.12);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 14px; }
.mobile-nav__head h4 { font-family: var(--font-display); font-size: 18px; margin: 0; }
.mobile-nav__close { background: none; border: none; font-size: 26px; line-height: 1; color: var(--c-black); padding: 0; }

/* Drill-down panels: each level (root menu, category list, a category's
   sub-list) is its own full-height panel stacked in the same spot;
   sliding the active one in from the right and the previous one out to
   the left is what gives the "drill into a submenu" feel, rather than
   everything just expanding/collapsing in place. */
.mobile-nav__panels {
  position: relative;
  height: calc(100% - 64px);
  overflow: hidden;
}
.mobile-nav__panel {
  position: absolute; inset: 0;
  overflow-y: auto;
  background: var(--c-white);
  transform: translateX(100%);
  transition: transform var(--transition);
  visibility: hidden;
}
.mobile-nav__panel.is-active { transform: translateX(0); visibility: visible; }

.mobile-nav__back {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: none; border: none;
  padding: 16px 24px;
  font-family: var(--font-nav);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--c-grey-600);
  border-bottom: 1px solid var(--c-grey-150);
}
.mobile-nav__back svg { flex-shrink: 0; }

.mobile-nav__list { padding: 0 24px; list-style: none; margin: 0; }
.mobile-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  padding: 15px 0;
  border-bottom: 1px solid var(--c-grey-150);
  font-family: var(--font-nav);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--c-black);
  text-align: left;
}
.mobile-nav__row.is-active { color: var(--c-grey-600); }
.mobile-nav__row--all { font-weight: 600; }
.mobile-nav__chevron { flex-shrink: 0; color: var(--c-grey-400); }

.mobile-nav-overlay {
  display: block;
  position: fixed; inset: 0;
  background: rgba(18,18,18,0.4);
  z-index: 190;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.mobile-nav-overlay.is-open { opacity: 1; visibility: visible; }
@media (min-width: 960px) { .mobile-nav { display: none !important; } .mobile-nav-overlay { display: none !important; } }

.hero { position: relative; color: var(--c-white); }
.hero__media {
    /* Height now comes purely from the image itself (width:100%,
       height:auto on the img below) — no fixed aspect-ratio box, so
       nothing ever gets cropped: whatever the admin uploads is shown at
       its own real proportions, full width, at whatever height that
       naturally works out to. */
    overflow: hidden;
    position: relative;
    background: var(--c-black);
}
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
}
.hero__media img {
  display: block;
  width: 100%;
  height: auto;
  object-position: 62% center;
}

/* Caption overlay: capped at col-4 (a third of the banner's width) so
   the text block can NEVER physically reach into the right two-thirds
   of the image — which is where object-position: 62% keeps the styled
   product/decor content in frame. Before this had a fixed 560px
   max-width, which was wider than a third of the image on smaller
   desktop windows, letting long titles run text on top of the product
   photo instead of the plain background behind it. */
/* Visual-editor banners (Banner.Elements) — each layer positioned by its
   own left/top % (set inline per-element in _BannerCaption.cshtml), all
   relative to .hero__media's own position:relative box. */
.hero__elements { position: absolute; inset: 0; z-index: 2; }
.hero__free-text {
  position: absolute;
  transform: translate(0, 0);
  max-width: 60%;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
  white-space: pre-wrap;
}
@media (max-width: 599px) {
  /* More horizontal room on a narrow phone screen means less
     wrapping by default, even before an explicit per-element mobile
     font-size (below) kicks in. */
  .hero__free-text { max-width: 85%; }
}
.hero__free-btn {
  position: absolute;
  display: inline-block;
  padding: 10px 22px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
  background: var(--c-white);
  color: var(--c-black);
  transition: transform var(--transition), opacity var(--transition);
}
.hero__free-btn:hover { transform: scale(1.04); }

.hero__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  max-width: 33.333%;
  padding: 24px 20px 32px;
}
@media (min-width: 800px) { .hero__caption { padding: 40px 48px 56px; } }
.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--caption-color, rgba(255,255,255,0.8));
  margin-bottom: 10px;
}
.hero__title {
  font-family: var(--caption-font, var(--font-display));
  font-size: clamp(24px, 5.5vw, 42px);
  line-height: 1.16;
  color: var(--caption-color, var(--c-white));
  margin: 0 0 12px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.hero__subtitle {
  color: var(--caption-color, rgba(255,255,255,0.85));
  max-width: 400px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero__actions .btn { border-radius: 999px; padding: 14px 28px; }
@media (max-width: 479px) { .hero__actions .btn { padding: 12px 20px; font-size: 11px; } }

/* Mobile: keep the caption anchored to the left instead of stretching
   across the image, and scale everything down a notch so it doesn't
   overwhelm a small screen. */
@media (max-width: 599px) {
  .hero__caption { max-width: 74%; text-align: left; padding: 16px 16px 22px; }
  .hero__title { font-size: clamp(18px, 6vw, 24px); margin-bottom: 8px; }
  .hero__subtitle { font-size: 12px; line-height: 1.5; max-width: 100%; }
  .hero__actions { margin-top: 14px; gap: 8px; }
  .hero__actions .btn { padding: 9px 16px; font-size: 10px; }
}


.section-heading { margin-bottom: 40px; }
.section-heading--center { text-align: center; max-width: 620px; margin-left: auto; margin-right: auto; }
.section-heading h2 { font-size: clamp(26px, 3vw, 36px); }
.section-heading__subtitle { color: var(--c-grey-600); margin: 0; }
.section-heading__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-family: var(--font-nav);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--c-black); padding-bottom: 2px;
}

.category-strip { padding: 56px 0 16px; }
.category-strip .section-heading,
.category-strip__grid { padding-left: 24px; padding-right: 24px; }
.category-strip__grid {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.category-strip__grid::-webkit-scrollbar { display: none; }
.category-strip__grid .category-tile { flex: 0 0 42%; scroll-snap-align: start; }
@media (min-width: 560px) { .category-strip__grid .category-tile { flex-basis: 30%; } }
@media (min-width: 720px) {
  .category-strip__grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}
@media (min-width: 1080px) { .category-strip__grid { grid-template-columns: repeat(6, 1fr); } }
.category-tile { position: relative; display: block; overflow: hidden; border-radius: var(--cat-card-radius, var(--radius-md)); aspect-ratio: 4/5; background: var(--c-grey-100); }
.category-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.category-tile:hover img { transform: scale(1.06); }
.category-tile__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 5px;
    background: linear-gradient(0deg, color-mix(in srgb, var(--cat-card-overlay, #121212) 75%, transparent), color-mix(in srgb, var(--cat-card-overlay, #000000) 90%, transparent));
    color: var(--cat-card-text, var(--c-white));
}
.category-tile__label span { display: block; font-family: var(--font-display); font-size: 12px; }
.category-tile__label small { color: color-mix(in srgb, var(--cat-card-text, #ffffff) 75%, transparent); font-size: 11px; }

.banner-split {
  display: grid;
  grid-template-columns: 1fr;
  margin: 60px auto;
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 800px) { .banner-split { grid-template-columns: 1fr 1fr; min-height: 420px; } }
.banner-split__panel { padding: 56px 44px; display: flex; flex-direction: column; justify-content: center; }
.banner-split__panel--dark { background: var(--c-black); color: var(--caption-color, var(--c-white)); }
.banner-split__panel--dark h3 { color: var(--caption-color, var(--c-white)); font-family: var(--caption-font, var(--font-display)); font-size: clamp(24px, 2.6vw, 32px); }
.banner-split__panel--dark p { color: var(--caption-color, rgba(255,255,255,0.78)); max-width: 380px; margin-bottom: 24px; }
.banner-split__panel--image { padding: 0; min-height: 260px; background: var(--c-black); }
.banner-split__panel--image img { width: 100%; height: 100%; object-fit: cover; }

.product-grid-section { padding: 36px 20px 60px; }
.best-sellers { background: var(--c-grey-100); padding: 64px 0; }
.related-products { padding: 60px 20px; }

.product-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 28px 5px; }
@media (min-width: 720px) { .product-grid--3, .product-grid { --cols: 3; } }
@media (min-width: 720px) { .product-grid--4 { --cols: 4; } }
@media (max-width: 719px) { .product-grid--4 { --cols: 2; } }

.product-grid--adjustable { --cols: 2; }
@media (min-width: 560px) { .product-grid--adjustable { --cols: 3; } }
@media (min-width: 860px) { .product-grid--adjustable { --cols: 3; } }
@media (min-width: 1180px) { .product-grid--adjustable { --cols: 4; } }
@media (min-width: 560px) and (max-width: 719px) { .product-grid--adjustable { gap: 24px 16px; } }

.grid-switcher { display: flex; align-items: center; gap: 6px; }
.grid-switcher__label {
  font-family: var(--font-nav); font-size: 12px; color: var(--c-grey-500);
  margin-right: 4px; text-transform: uppercase; letter-spacing: 0.05em;
  display: none;
}
@media (min-width: 480px) { .grid-switcher__label { display: inline; } }
.grid-switcher__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--c-grey-300);
  background: var(--c-white);
  border-radius: var(--radius-sm);
  color: var(--c-grey-400);
  transition: all var(--transition);
}
.grid-switcher__btn:hover { color: var(--c-black); border-color: var(--c-grey-600); }
.grid-switcher__btn.is-active { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.grid-switcher__btn svg { width: 16px; height: 16px; }

.carousel { position: relative; }
.carousel__viewport { overflow: hidden; }
.carousel__track {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 10px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 auto; width: 68%; scroll-snap-align: start; }
@media (min-width: 480px) { .carousel__slide { width: 46%; } }
@media (min-width: 720px) { .carousel__slide { width: 31.5%; } }
@media (min-width: 1080px) { .carousel__slide { width: 23.5%; } }
.carousel__slide--full { width: 100%; flex-shrink: 0; }
.carousel__slide--wide { width: 88%; }
.hero--carousel { position: relative; }
.hero--carousel .hero { margin: 0; }

.hero-dots {
  position: absolute;
  right: 28px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.hero-dots__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.75);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, width 200ms ease, border-radius 200ms ease;
}
.hero-dots__dot.is-active {
  background: var(--c-white);
  width: 22px;
  border-radius: 5px;
}
@media (max-width: 699px) {
  .hero-dots { right: 16px; bottom: 16px; }
}
.banner-split-carousel { position: relative; }

.split-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.split-dots__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--c-grey-300, rgba(0,0,0,0.28));
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, width 200ms ease, border-radius 200ms ease;
}
.split-dots__dot.is-active {
  background: var(--c-black);
  border-color: var(--c-black);
  width: 22px;
  border-radius: 5px;
}
.hero--carousel .carousel__track,
.banner-split-carousel .carousel__track {
  gap: 0;
  padding: 0;
}
.hero--carousel .carousel__slide--full,
.banner-split-carousel .carousel__slide--full {
  width: 100%;
  scroll-snap-align: start;
}
@media (min-width: 640px) { .carousel__slide--wide { width: 60%; } }
@media (min-width: 1000px) { .carousel__slide--wide { width: 32%; } }

.carousel__arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-black);
  box-shadow: 0 4px 14px rgba(0,0,0,0.14);
  opacity: 0.9;
  z-index: 3;
  transition: opacity var(--transition), background var(--transition), color var(--transition), transform var(--transition);
}
.carousel__arrow svg { width: 17px; height: 17px; }
.carousel__arrow:hover { background: var(--c-black); color: var(--c-white); opacity: 1; transform: translateY(-50%) scale(1.06); }
.carousel__arrow--prev { left: 12px; }
.carousel__arrow--next { right: 12px; }
.carousel__arrows-inline { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 18px; }
.carousel__arrows-inline .carousel__arrow { position: static; transform: none; opacity: 1; }
.carousel__arrows-inline .carousel__arrow:hover { transform: scale(1.06); }
@media (max-width: 639px) { .carousel__arrow--floating { display: none; } }

.product-card { position: relative; }
.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--c-grey-100);
  border-radius: var(--radius-md);
}
.product-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 400ms ease, transform 500ms ease; }
.product-card__img--back { opacity: 0; }
.product-card__media:hover .product-card__img--front { opacity: 0; }
.product-card__media:hover .product-card__img--back { opacity: 1; }
.product-card__media:hover .product-card__img { transform: scale(1.04); }

.product-card__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.badge {
  font-family: var(--font-nav);
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 2px; color: var(--c-white);
}
.badge--new { background: var(--c-black); }
.badge--sale { background: var(--c-sale); }
.badge--soldout { background: var(--c-grey-600); }
.badge--bundle { background: #6366f1; }

.product-card__quickadd {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-black);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--transition), transform var(--transition), color var(--transition);
}
.product-card__media:hover .product-card__quickadd { opacity: 1; transform: translateY(0); }
.product-card--soldout .product-card__media { opacity: 0.55; }

.product-card__body { padding-top: 14px; }
.product-card__category { display:none; font-size: 11px; color: var(--c-grey-400); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; font-family: var(--font-nav); }
.product-card__name { display: block; font-family: var(--font-display); font-size: 11px; color: var(--c-black); margin-bottom: 6px; }
.product-card__rating { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.star { color: var(--c-grey-300); font-size: 13px; }
.star--filled { color: var(--c-black); }
.product-card__reviewcount { color: var(--c-grey-400); font-size: 12px; margin-left: 4px; }
.price { font-weight: 600; }
.price--sale { color: var(--c-sale); margin-right: 8px; }
.price--compare { color: var(--c-grey-400); text-decoration: line-through; font-weight: 400; font-size: 13px; }
.price--lg { font-size: 24px; }

.newsletter { background: var(--c-ink); color: var(--c-white); padding: 46px 0; }
.newsletter__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.newsletter h3 { color: var(--c-white); font-size: 24px; margin: 0; }
.newsletter__form {
    display: inline-grid;
    gap: 10px;
    flex: 1;
    max-width: 440px;
    min-width: 260px;
}
.newsletter__form input { flex: 1; padding: 13px 16px; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: var(--c-white); border-radius: var(--radius-sm); }
.newsletter__form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter__form .btn { white-space: nowrap; }

.site-footer { background: var(--c-black); color: var(--c-grey-300); padding: 54px 0 0; }
.site-footer__grid { display: flex; flex-wrap: wrap; gap: 40px; padding-bottom: 50px; }
.site-footer__brand { flex: 1 1 260px; }
.site-footer__col { flex: 1 1 140px; }
@media (max-width: 719px) {
  .site-footer__brand, .site-footer__col { flex-basis: 100%; }
  /* 40px was sized for full desktop columns sitting side by side — far
     too much empty space between a logo block and a one-line collapsed
     accordion header, or between two collapsed headers stacked on top
     of each other. Each .site-footer__col already gets its own
     border-top divider (below) for separation, so the flex gap itself
     only needs to handle the one gap that has no divider of its own:
     between the brand block and the first accordion column. */
  .site-footer__grid { gap: 0; }
  .site-footer__brand { margin-bottom: 28px; }
}
.site-footer__brand p { max-width: 300px; color: var(--c-grey-400); }
.site-footer__col h4 { color: var(--c-white); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-nav); margin: 0; }
.site-footer__col-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: none; border: none; padding: 0 0 16px;
  cursor: default;
}
.site-footer__col ul li { margin-bottom: 11px; }
.site-footer__col a:hover { color: var(--c-white); }

/* Mobile only: each link column collapses behind a "+" toggle — the
   brand/logo column above is a separate element entirely, so it's never
   part of this and always stays fully visible. */
@media (max-width: 719px) {
  .site-footer__col { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 4px; }
  .site-footer__col-toggle { cursor: pointer; padding: 14px 0; }
  .site-footer__col-icon {
    position: relative;
    width: 14px; height: 14px;
    flex-shrink: 0;
  }
  .site-footer__col-icon::before,
  .site-footer__col-icon::after {
    content: "";
    position: absolute; top: 50%; left: 50%;
    background: var(--c-white);
    transform: translate(-50%, -50%);
    transition: transform var(--transition), opacity var(--transition);
  }
  .site-footer__col-icon::before { width: 14px; height: 1.5px; }
  .site-footer__col-icon::after { width: 1.5px; height: 14px; }
  .site-footer__col.is-open .site-footer__col-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

  .site-footer__col-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }
  .site-footer__col.is-open .site-footer__col-list { max-height: 600px; padding-bottom: 14px; }
}
.social-links { display: flex; gap: 10px; margin-top: 18px; }
.social-links a {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-family: var(--font-nav);
  color: rgba(255,255,255,0.75); transition: var(--transition);
}
.social-links a svg { display: block; }
.social-links a:hover { border-color: var(--c-white); color: var(--c-white); transform: translateY(-2px); }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 20px 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--c-grey-600);
}

.breadcrumb { padding: 22px 24px 0; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-grey-400); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-nav); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--c-grey-300); }
.breadcrumb a:hover { color: var(--c-black); }
.breadcrumb span[aria-current] { color: var(--c-black); }

.shop-header { padding: 26px 20px 10px; }
.shop-header h1 { font-size: clamp(28px, 3.5vw, 40px); margin-bottom: 6px; }
.shop-header p { color: var(--c-grey-500); margin: 0; }
.shop-layout { display: grid; grid-template-columns: 1fr; gap: 40px; padding: 22px 20px 70px; }
@media (max-width: 719px) {
  /* Still exactly 2 cards per row on mobile (--cols stays 2, see
     .product-grid--adjustable below) — this just gives each of those 2
     cards more actual width, and since the image itself uses
     aspect-ratio (not a fixed height), a wider card automatically means
     a visibly bigger photo too. Freed up by trimming the page's own
     side padding, not by touching the grid's column count. */
  .shop-layout { padding-left: 12px; padding-right: 12px; }
}
.shop-filters__block { margin-bottom: 34px; }
.shop-filters__block h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-nav); margin-bottom: 14px; }
.shop-filters__block ul li { margin-bottom: 10px; }
.shop-filters__block ul li a { color: var(--c-grey-700); font-size: 14px; }
.shop-filters__block ul li a span { color: var(--c-grey-400); font-size: 12px; }
.shop-filters__block ul li a:hover, .shop-filters__block ul li a.is-active { color: var(--c-black); font-weight: 600; }
.shop-filters__block ul li.shop-filters__child { margin-left: 16px; margin-top: -2px; }
.shop-filters__block ul li.shop-filters__child a { font-size: 13px; color: var(--c-grey-600); }
.checkbox-list label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-grey-700); }
.swatch-list { display: flex; gap: 10px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; display: inline-block; cursor: pointer; }

.shop-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 26px; border-bottom: 1px solid var(--c-grey-150); padding-bottom: 18px; }
.shop-toolbar__count { color: var(--c-grey-500); font-size: 13px; margin: 0; }
.shop-toolbar__controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.shop-toolbar__sort { font-size: 13px; display: flex; align-items: center; gap: 8px; color: var(--c-grey-600); }
.shop-toolbar__sort select { border: 1px solid var(--c-grey-300); padding: 7px 10px; border-radius: var(--radius-sm); background: var(--c-white); }
@media (max-width: 719px) {
  /* On mobile the toolbar wraps to its own line (Filters button above,
     View-switcher + Sort-by below) — that line was left-aligning as one
     tight cluster with a big empty gap after it, since space-between on
     .shop-toolbar has nothing else to distribute against once its
     children wrap onto separate lines. Spreading it within its own row
     puts View on the left and Sort by on the right, as intended. */
  .shop-toolbar__controls { width: 100%; justify-content: space-between; }
}
.empty-state { text-align: center; padding: 60px 0; color: var(--c-grey-500); }

.product-details { display: grid; grid-template-columns: 1fr; gap: 46px; padding: 32px 20px 60px; }
@media (min-width: 900px) { .product-details { grid-template-columns: 1.1fr 1fr; } }
.product-details__main-image { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--radius-md); background: var(--c-grey-100); }
.product-details__main-image img { width: 100%; height: 100%; object-fit: cover; }
.product-details__main-image .badge { position: absolute; top: 14px; left: 14px; }

.product-gallery { position: relative; }
.product-gallery__badges { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; gap: 6px; }
.product-gallery--desktop { display: flex; flex-direction: column; gap: 12px; }
.product-gallery__main { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--radius-md); background: var(--c-grey-100); }
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__main .badge { position: absolute; top: 14px; left: 14px; }
.product-gallery__thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.product-gallery__thumb { width: 72px; height: 88px; padding: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid transparent; cursor: pointer; opacity: 0.6; background: var(--c-grey-100); }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb.is-active { opacity: 1; border-color: var(--c-black); }

.product-gallery__badges--grid { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; gap: 6px; }
.product-gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.product-gallery__grid-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-grey-100);
  aspect-ratio: 3/4;
}
.product-gallery__grid-item img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__grid-item:first-child {
  grid-column: 1 / -1;

  aspect-ratio: auto;
}
.product-gallery__grid-item:first-child img { height: auto; }

.product-gallery--mobile { display: none; }
.product-gallery--mobile .carousel__slide img { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--c-grey-100); border-radius: var(--radius-md); }
.product-gallery__counter { position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; padding: 3px 10px; border-radius: 20px; }
.product-gallery__dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.product-gallery__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); transition: all var(--transition); }
.product-gallery__dots span.is-active { background: #fff; width: 16px; border-radius: 4px; }
@media (max-width: 899px) {
  .product-gallery--desktop { display: none; }
  .product-gallery--mobile { display: block; }
}

.product-details__category { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-grey-400); font-family: var(--font-nav); margin-bottom: 8px; }
.product-details__info h1 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 12px; }
.product-details__price { margin: 16px 0; }
.product-details__desc { color: var(--c-grey-700); max-width: 480px; }

.option-block { margin: 22px 0; }
.option-block h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-nav); margin-bottom: 10px; }
.option-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.option-pill input { position: absolute; opacity: 0; }
.option-pill span {
  display: inline-block; padding: 9px 16px; border: 1px solid var(--c-grey-300); border-radius: 20px;
  font-size: 13px; color: var(--c-grey-700); transition: all var(--transition);
}
.option-pill input:checked + span { border-color: var(--c-black); background: var(--c-black); color: var(--c-white); }

.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--c-grey-300); border-radius: var(--radius-sm); width: fit-content; }
.qty-stepper button { background: none; border: none; width: 38px; height: 42px; font-size: 16px; }
.qty-stepper input { width: 46px; border: none; text-align: center; font-size: 14px; -moz-appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper--sm button { width: 30px; height: 32px; }
.qty-stepper--sm input { width: 36px; }

.product-details__actions { display: flex; flex-direction: column; gap: 12px; margin: 26px 0; max-width: 420px; }
.product-details__meta { margin: 20px 0; color: var(--c-grey-600); font-size: 13px; }
.product-details__meta li { padding: 6px 0; border-bottom: 1px dashed var(--c-grey-150); }
/* When this content comes from the admin's rich-text editor (ShippingHighlights)
   instead of the hardcoded 3-line fallback, it might be plain <p> lines
   rather than a <ul><li> list — style those the same dashed-separator way
   so either markup shape looks consistent and intentional. */
.product-details__meta.product-rich-text { margin: 20px 0; }
.product-details__meta.product-rich-text p { padding: 6px 0; margin: 0; border-bottom: 1px dashed var(--c-grey-150); }
.product-details__meta.product-rich-text p:last-child,
.product-details__meta.product-rich-text li:last-child { border-bottom: none; }

.accordion details { border-top: 1px solid var(--c-grey-150); padding: 16px 0; }
.accordion details:last-child { border-bottom: 1px solid var(--c-grey-150); }
.accordion summary { cursor: pointer; font-family: var(--font-nav); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.accordion details p { color: var(--c-grey-700); margin: 12px 0 0; max-width: 560px; }
.product-spec-list { margin: 12px 0 0; max-width: 560px; display: grid; grid-template-columns: 160px 1fr; row-gap: 8px; column-gap: 16px; }
.product-spec-list dt { color: var(--c-grey-500); font-size: 13px; }
.product-spec-list dd { margin: 0; color: var(--c-grey-700); font-size: 13px; }

.product-rich-text { margin-top: 12px; max-width: 640px; color: var(--c-grey-700); line-height: 1.75; font-size: 14px; }
.product-rich-text h2 { margin: 18px 0 8px; font-size: 19px; }
.product-rich-text h3 { margin: 14px 0 6px; font-size: 16px; }
.product-rich-text p { margin: 0 0 12px; }
.product-rich-text ul, .product-rich-text ol { margin: 0 0 12px 20px; }
.product-rich-text li { margin-bottom: 4px; }
.product-rich-text a { color: var(--c-black); text-decoration: underline; }
.product-spec-list--bundle { display: block; list-style: none; padding: 0; margin: 12px 0 0; max-width: 560px; }
.product-spec-list--bundle li { padding: 8px 0; border-bottom: 1px solid var(--c-grey-150); font-size: 13px; color: var(--c-grey-700); }
.product-spec-list--bundle li:last-child { border-bottom: none; }
.product-spec-list--bundle li::before { content: "✓ "; color: #6366f1; font-weight: 700; }

.cart-page { padding: 40px 24px 100px; }
.cart-page h1 { margin-bottom: 30px; }
.cart-layout { display: grid; grid-template-columns: 1fr; gap: 40px; min-width: 0; }
@media (min-width: 900px) { .cart-layout { grid-template-columns: 1fr 340px; } }
@media (max-width: 480px) { .cart-page { padding: 24px 16px 80px; } .cart-page h1 { margin-bottom: 20px; font-size: 24px; } .cart-layout { gap: 28px; } }

.cart-items { min-width: 0; }
.cart-items__head { display: grid; grid-template-columns: 1fr 120px 100px; padding-bottom: 14px; border-bottom: 1px solid var(--c-grey-150); font-family: var(--font-nav); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-grey-400); }
.cart-line { display: grid; grid-template-columns: 1fr 120px 100px; align-items: center; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--c-grey-150); }
.cart-line__product { display: flex; gap: 14px; align-items: center; min-width: 0; }
.cart-line__product img { width: 84px; height: 100px; object-fit: cover; background: var(--c-grey-100); border-radius: var(--radius-sm); flex-shrink: 0; }
.cart-line__product > div { min-width: 0; }
.cart-line__product a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-line__product a { font-family: var(--font-display); font-size: 16px; }
.cart-line__variant { display: flex; gap: 10px; flex-wrap: wrap; color: var(--c-grey-500); font-size: 12px; margin: 6px 0; }
.cart-line__oos { color: var(--c-sale, #c0392b); font-size: 12px; margin: 0 0 6px; font-weight: 600; }
.cart-line__remove { background: none; border: none; padding: 0; font-size: 12px; text-decoration: underline; color: var(--c-grey-500); }
.cart-line__total { font-weight: 600; }

.cart-summary { background: var(--c-grey-100); border-radius: var(--radius-md); padding: 26px; height: fit-content; min-width: 0; }
.cart-summary h3 { font-size: 18px; margin-bottom: 18px; }
.cart-summary__row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; color: var(--c-grey-700); }
.cart-summary__row--total { border-top: 1px solid var(--c-grey-300); padding-top: 14px; margin-top: 14px; font-weight: 700; color: var(--c-black); font-size: 16px; }
.cart-summary__promo { display: flex; gap: 8px; margin: 20px 0; flex-wrap: wrap; }
.cart-summary__promo input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--c-grey-300); border-radius: var(--radius-sm); }
.cart-summary__coupon-applied {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; flex-wrap: wrap;
  font-size: 13px;
}
.cart-summary__coupon-applied span { min-width: 0; overflow-wrap: break-word; }
.cart-summary .btn--block { margin-bottom: 14px; }
.cart-summary .link-underline { display: block; text-align: center; }

@media (max-width: 480px) {
  .cart-summary { padding: 18px; }
  .cart-summary__promo { flex-wrap: nowrap; }
  .cart-summary__promo input { flex: 1 1 auto; }
}
@media (max-width: 360px) {
  .cart-summary__promo { flex-wrap: wrap; }
  .cart-summary__promo input, .cart-summary__promo .btn { flex: 1 1 100%; }
}

.testimonials { padding: 90px 24px; }
.testimonials__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 760px) { .testimonials__grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card { background: var(--c-grey-100); border-radius: var(--radius-md); padding: 30px; margin: 0; }
.testimonial-card__stars { margin-bottom: 12px; }
.testimonial-card p { font-family: var(--font-display); font-style: italic; color: var(--c-ink); }
.testimonial-card footer { margin-top: 16px; font-family: var(--font-nav); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-grey-500); }
.testimonial-card footer span { text-transform: none; letter-spacing: 0; }

.instagram-strip { padding-bottom: 100px; }
.instagram-strip__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (min-width: 760px) { .instagram-strip__grid { grid-template-columns: repeat(6, 1fr); } }
.instagram-tile { display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--c-grey-100); }
.instagram-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.instagram-tile:hover img { transform: scale(1.08); }

.story-hero { position: relative; height: 46vh; min-height: 320px; overflow: hidden; background: var(--c-black); }
.story-hero img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7); }
.story-hero__caption { position: absolute; bottom: 40px; left: 0; right: 0; color: var(--c-white); }
.story-hero__caption h1 { color: var(--c-white); font-size: clamp(30px, 4vw, 48px); }
.story-body { display: grid; grid-template-columns: 1fr; gap: 46px; padding: 80px 24px; align-items: center; }
@media (min-width: 860px) { .story-body { grid-template-columns: 1fr 1fr; } }
.story-body__col p { color: var(--c-grey-700); max-width: 480px; }
.story-body__col img { border-radius: var(--radius-md); }
.story-values { padding: 0 24px 90px; }
.story-values__grid { display: grid; grid-template-columns: 1fr; gap: 30px; border-top: 1px solid var(--c-grey-150); padding-top: 50px; }
@media (min-width: 760px) { .story-values__grid { grid-template-columns: repeat(3, 1fr); } }
.story-value h3 { color: var(--c-grey-300); font-size: 34px; margin-bottom: 6px; }
.story-value h4 { font-size: 17px; margin-bottom: 8px; }
.story-value p { color: var(--c-grey-600); margin: 0; }

.contact-page { padding: 50px 24px 100px; }
.contact-page__intro { max-width: 560px; margin-bottom: 46px; }
.contact-layout { display: grid; grid-template-columns: 1fr; gap: 50px; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1.4fr 1fr; } }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-row--2col { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .form-row--2col { grid-template-columns: 1fr 1fr; } }
.contact-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--c-grey-700); font-family: var(--font-nav); }
.contact-form input, .contact-form select, .contact-form textarea {
  border: 1px solid var(--c-grey-300); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--c-ink); font-size: 14px;
}
.contact-form .btn { align-self: flex-start; }
.contact-info__block { margin-bottom: 26px; }
.contact-info__block h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-nav); color: var(--c-grey-400); margin-bottom: 6px; }
.contact-info__block p { margin: 0; color: var(--c-ink); }

@media (max-width: 900px) {
  .product-card__quickadd,
  .product-card__wishlist { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; }
  .icon-btn { width: 42px; height: 42px; }
}

@media (max-width: 380px) {
  .site-header__row { gap: 12px; }
  .header-icons { gap: 0; }
}

.product-card__wishlist {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;

    background: rgba(255,255,255,0.92);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-black);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--transition), transform var(--transition), color var(--transition);
}
.product-card__media:hover .product-card__wishlist { opacity: 1; transform: translateY(0); }
.product-card__wishlist.is-active { color: var(--c-sale); }
.product-card__wishlist svg { display: block; }

.product-details__wishlist-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.product-details__wishlist-btn.is-active { border-color: var(--c-sale); color: var(--c-sale); }

.cart-line__remove-form { margin-top: 6px; }
@media (max-width: 640px) {
  .cart-items__head { display: none; }
  .cart-line { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
  .cart-line__qty-form { display: flex; align-items: center; justify-content: space-between; }
  .cart-line__qty-form::before {
    content: "Quantity"; font-family: var(--font-nav); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-grey-400);
  }
  .cart-line__total {
    display: flex; align-items: center; justify-content: space-between; font-size: 15px;
  }
  .cart-line__total::before {
    content: "Total"; font-family: var(--font-nav); font-size: 11px; font-weight: 400;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-grey-400);
  }

  .qty-stepper--sm button { width: 38px; height: 40px; font-size: 18px; }
  .qty-stepper--sm input { width: 40px; }
}

@media (max-width: 640px) {
  .cart-summary__promo input,
  .qty-stepper input,
  .checkout-form input,
  .checkout-form select,
  .checkout-form textarea {
    font-size: 16px;
  }
}

.shop-filters__toggle { display: inline-flex; }

.shop-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.shop-filters__close { background: none; border: none; font-size: 26px; line-height: 1; color: var(--c-black); }

.shop-filters__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }

.shop-filters {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(86vw, 340px);
  background: var(--c-white);
  z-index: 200;
  padding: 24px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--transition);
  box-shadow: 12px 0 30px rgba(0,0,0,0.12);
}
.shop-filters.is-open { transform: translateX(0); }
.filter-overlay {
  display: block;
  position: fixed; inset: 0;
  background: rgba(18,18,18,0.4);
  z-index: 190;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.filter-overlay.is-open { opacity: 1; visibility: visible; }

body.no-scroll { overflow: hidden; }

.swatch-check { position: relative; cursor: pointer; display: inline-block; }
.swatch-check input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; cursor: pointer; }
.swatch-check input:checked + .swatch { outline: 2px solid var(--c-black); outline-offset: 2px; }
.checkbox-list input { margin: 0; }

.search-drawer__inner { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search-drawer__form { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 200px; }
.search-drawer__form input { flex: 1; border: none; background: transparent; font-size: 18px; font-family: var(--font-display); }
.search-drawer__form input:focus { outline: none; }
.search-drawer__submit { background: none; border: none; color: var(--c-grey-600); display: flex; padding: 0; }
.search-results {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--c-white); border: 1px solid var(--c-grey-150);
  box-shadow: 0 16px 30px rgba(0,0,0,0.1);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height var(--transition), opacity var(--transition);
  z-index: 10;
}
.search-results.is-open { max-height: 420px; overflow-y: auto; opacity: 1; }
.search-results__item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--c-grey-150); }
.search-results__item:hover { background: var(--c-grey-100); }
.search-results__item img { width: 42px; height: 52px; object-fit: cover; background: var(--c-grey-100); border-radius: var(--radius-sm); flex-shrink: 0; }
.search-results__item span { display: flex; flex-direction: column; gap: 2px; }
.search-results__item small { color: var(--c-grey-500); font-size: 11px; }
.search-results__empty { padding: 16px 20px; margin: 0; color: var(--c-grey-500); font-size: 13px; }

.toast-container {
  position: fixed; z-index: 500;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 10px;
  width: min(92vw, 360px);
  pointer-events: none;
}
.toast {
  background: var(--c-black); color: var(--c-white);
  font-family: var(--font-nav); font-size: 13px;
  padding: 13px 18px; border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  opacity: 0; transform: translateY(12px);
  transition: opacity 220ms ease, transform 220ms ease;
  text-align: center;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast--error { background: var(--c-sale); }

.back-to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 150;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-black); color: var(--c-white); border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
@media (max-width: 640px) { .back-to-top { right: 14px; bottom: 14px; } }

.form-banner {
  padding: 14px 18px; border-radius: var(--radius-sm); font-size: 14px;
  margin-bottom: 24px;
}
.form-banner--success { background: #e9f2ec; color: var(--c-success); border: 1px solid #c7ddcd; }
.form-banner--error { background: #f7e9e9; color: var(--c-sale); border: 1px solid #e6c6c6; }

.checkout-page { padding: 40px 24px 100px; }
.checkout-page h1 { margin-bottom: 30px; }
.checkout-layout { display: grid; grid-template-columns: 1fr; gap: 40px; min-width: 0; }
@media (min-width: 900px) { .checkout-layout { grid-template-columns: 1fr 380px; } }
.checkout-form { min-width: 0; }
.checkout-form h3 { margin-top: 10px; }
.checkout-note { color: var(--c-grey-600); font-size: 13px; background: var(--c-grey-100); padding: 14px; border-radius: var(--radius-sm); }
.checkout-summary__line { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.checkout-summary__line img { width: 52px; height: 64px; object-fit: cover; background: var(--c-grey-100); border-radius: var(--radius-sm); flex-shrink: 0; }
.checkout-summary__line div { flex: 1; min-width: 0; }
.checkout-summary__line p { margin: 0; font-size: 14px; overflow-wrap: break-word; }
.checkout-summary__line p span { color: var(--c-grey-500); font-size: 12px; }
.checkout-summary__line > span { flex-shrink: 0; font-size: 14px; font-weight: 600; }
.checkout-summary__variant { color: var(--c-grey-500); font-size: 12px; margin-top: 2px !important; }

@media (max-width: 480px) {
  .checkout-page { padding: 24px 16px 80px; }
  .checkout-page h1 { margin-bottom: 20px; font-size: 24px; }
  .checkout-layout { gap: 28px; }
  .checkout-form .form-row--2col { gap: 14px; }
  .checkout-form { gap: 14px; }
}

.confirmation-page { padding: 90px 24px; display: flex; justify-content: center; }
.confirmation-card { max-width: 480px; text-align: center; }
.confirmation-card__icon {
  width: 60px; height: 60px; border-radius: 50%; background: var(--c-success); color: var(--c-white);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 26px;
}
.confirmation-card__total { font-weight: 600; margin: 18px 0 26px; }

.whatsapp-widget { position: fixed; bottom: 22px; z-index: 400; }
.whatsapp-widget--right { right: 22px; }
.whatsapp-widget--left { left: 22px; }

/* Stacked directly above the WhatsApp button (same side, same z-index
   layer) rather than a separate corner — two floating widgets on
   opposite corners tend to fight for attention and feel like clutter on
   a small phone screen; stacking reads as one deliberate "help" cluster. */
.reviews-float {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--c-black);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  padding: 9px 18px 9px 9px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  text-decoration: none;
  font-family: var(--font-nav);
  animation: reviews-pop 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease, background 220ms ease;
}
.reviews-float:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 36px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.08);
  background: #ffffff;
}
@keyframes reviews-pop {
  0% { opacity: 0; transform: translateY(14px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.reviews-float__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ffb703, #f77f00);
  box-shadow: 0 3px 8px rgba(247, 127, 0, 0.35);
}
.reviews-float__icon svg { width: 18px; height: 18px; }
.reviews-float__icon svg path { fill: #ffffff; }
.reviews-float__body { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.reviews-float__stars { display: flex; gap: 1px; font-size: 12px; }
.reviews-float__star { color: rgba(0,0,0,0.15); }
.reviews-float__star.is-filled { color: #f5a623; }
.reviews-float__count { font-size: 11.5px; font-weight: 600; color: var(--c-grey-600); white-space: nowrap; }
@media (max-width: 599px) {
  .reviews-float { bottom: 84px; padding: 7px 14px 7px 7px; gap: 8px; }
  .reviews-float__icon { width: 30px; height: 30px; }
  .reviews-float__icon svg { width: 16px; height: 16px; }
  .reviews-float__count { font-size: 10.5px; }
}

.whatsapp-float {
  position: relative;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: none;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: transform var(--transition), box-shadow var(--transition);
  animation: wa-pop 400ms ease;
  cursor: pointer;
}
.whatsapp-float:hover { transform: scale(1.07); box-shadow: 0 10px 28px rgba(0,0,0,0.32); }
.whatsapp-float svg { width: 30px; height: 30px; display: block; }
.whatsapp-float__ping {
  position: absolute; inset: 0; border-radius: 50%;
  background: #25D366; opacity: 0.55;
  animation: wa-ping 2.4s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes wa-ping { 0% { transform: scale(1); opacity: 0.5; } 75%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes wa-pop { from { opacity: 0; transform: translateY(14px) scale(0.8); } to { opacity: 1; transform: translateY(0) scale(1); } }
.whatsapp-float__tooltip {
  position: absolute; right: 72px; bottom: 14px;
  background: var(--c-black); color: var(--c-white);
  font-family: var(--font-nav); font-size: 12.5px; white-space: nowrap;
  padding: 8px 14px; border-radius: var(--radius-sm);
  opacity: 0; visibility: hidden; transform: translateX(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  pointer-events: none;
}
.whatsapp-widget--left .whatsapp-float__tooltip { right: auto; left: 72px; transform: translateX(-6px); }
.whatsapp-float:hover .whatsapp-float__tooltip { opacity: 1; visibility: visible; transform: translateX(0); }

.whatsapp-card {
  position: absolute;
  bottom: 74px;
  right: 0;
  width: 320px;
  max-width: calc(100vw - 44px);
  background: var(--c-white);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.22);
  overflow: hidden;
  animation: wa-card-pop 220ms ease;
}
.whatsapp-widget--left .whatsapp-card { right: auto; left: 0; }
@keyframes wa-card-pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.whatsapp-card__header {
  display: flex; align-items: center; gap: 12px;
  background: #075E54;
  padding: 16px 18px;
  position: relative;
}
.whatsapp-card__header-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.whatsapp-card__header-icon svg { width: 20px; height: 20px; }
.whatsapp-card__title { color: var(--c-white); font-weight: 600; font-size: 14.5px; }
.whatsapp-card__subtitle { color: rgba(255,255,255,0.75); font-size: 12px; margin-top: 1px; }
.whatsapp-card__close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; color: rgba(255,255,255,0.85);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px;
}
.whatsapp-card__close:hover { color: #fff; }

.whatsapp-card__body { padding: 18px; background: #e5ddd5; }
.whatsapp-card__description {
  background: var(--c-white);
  border-radius: var(--radius-md);
  border-top-left-radius: 2px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-ink);
  margin: 0 0 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.whatsapp-card__quick-replies {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
}
.whatsapp-quick-reply {
  display: block;
  background: var(--c-white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #075E54;
  text-align: center;
  transition: var(--transition);
}
.whatsapp-quick-reply:hover { background: #075E54; color: #fff; border-color: #075E54; }
.whatsapp-card__start-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #25D366; color: #fff; font-weight: 600; font-size: 13.5px;
  padding: 11px; border-radius: var(--radius-sm);
  transition: var(--transition);
}
.whatsapp-card__start-btn:hover { background: #1ebc59; }

@media (max-width: 640px) {
  .whatsapp-float { width: 52px; height: 52px; }
  .whatsapp-widget--right { right: 16px; }
  .whatsapp-widget--left { left: 16px; }
  .whatsapp-widget { bottom: 16px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
  .whatsapp-float__tooltip { display: none; }
  .whatsapp-card { width: 300px; bottom: 66px; }
}
.back-to-top { right: 20px; bottom: 92px; }
@media (max-width: 640px) { .back-to-top { right: 14px; bottom: 80px; } }

.btn--whatsapp { background: #25D366; border-color: #25D366; color: #fff; }
.btn--whatsapp:hover { background: #1ebc59; border-color: #1ebc59; }
.btn--whatsapp svg { width: 16px; height: 16px; flex-shrink: 0; }

.cms-page-heading { padding: 56px 24px 0; }
.cms-page-content { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; color: var(--c-grey-700); line-height: 1.75; }
.cms-page-content h2 { margin-top: 36px; margin-bottom: 12px; }
.cms-page-content h3 { margin-top: 28px; margin-bottom: 10px; }
.cms-page-content p { margin-bottom: 16px; }
.cms-page-content ul, .cms-page-content ol { margin: 0 0 16px 22px; }
.cms-page-content li { margin-bottom: 6px; }

.trustpilot-section { padding: 40px 24px 20px; }
.google-reviews { padding: 40px 24px 20px; }
.google-reviews__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 20px; }
.google-review-card { border: 1px solid var(--c-grey-200); border-radius: var(--radius-md); padding: 18px; background: var(--c-white); }
.google-review-card__head { display: flex; align-items: center; gap: 10px; position: relative; margin-bottom: 10px; }
.google-review-card__avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.google-review-card__avatar--placeholder { display: flex; align-items: center; justify-content: center; background: var(--c-grey-100); color: var(--c-grey-500); font-weight: 600; text-transform: uppercase; }
.google-review-card__name { font-weight: 600; font-size: 14px; }
.google-review-card__stars { color: var(--c-grey-300); font-size: 13px; }
.google-review-card__stars .star--filled { color: #f5a623; }
.google-review-card__badge { position: absolute; top: 0; right: 0; }
.google-review-card__text { font-size: 13.5px; line-height: 1.6; color: var(--c-grey-600); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.google-review-card__time { font-size: 11.5px; color: var(--c-grey-400); }
.google-reviews__link { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 600; text-decoration: underline; }

.reviews-section { padding: 20px 24px 70px; }
.reviews-layout { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 20px; }
@media (min-width: 900px) { .reviews-layout { grid-template-columns: 1.4fr 1fr; } }
.reviews-flash { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 18px; }
.reviews-flash--success { background: #eaf3ea; color: #2c6b2f; }
.reviews-flash--error { background: #fbeaea; color: #a12727; }
.reviews-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.reviews-summary__score { font-size: 40px; font-weight: 600; line-height: 1; font-family: var(--font-serif); }
.reviews-summary small { display: block; color: var(--c-grey-600); margin-top: 4px; }
.review-card { border-top: 1px solid var(--c-grey-150); padding: 18px 0; }
.review-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.review-card__date { color: var(--c-grey-500); font-size: 12px; margin-left: auto; }
.review-card p { color: var(--c-grey-700); margin-bottom: 10px; }
.review-card__image { width: 90px; height: 90px; object-fit: cover; background: var(--c-grey-100); border-radius: var(--radius-sm); margin-bottom: 10px; }
.review-card__reply { background: var(--c-grey-100); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13.5px; }
.reviews-empty { color: var(--c-grey-600); }

.review-form { background: var(--c-grey-100); border-radius: var(--radius-md); padding: 26px; align-self: start; }
.review-form h4 { margin-bottom: 16px; }
.review-form label { display: block; font-size: 12.5px; font-weight: 500; margin: 14px 0 6px; color: var(--c-grey-600); }
.review-form label:first-of-type { margin-top: 0; }
.review-form input[type="text"], .review-form textarea, .review-form input[type="file"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--c-grey-200); border-radius: var(--radius-sm); font-size: 14px; background: var(--c-white);
}
.review-form textarea { min-height: 90px; resize: vertical; }
.review-form button { margin-top: 18px; }
.review-form__stars { display: flex; gap: 4px; }
.review-form__stars label { display: inline-flex; margin: 0; cursor: pointer; }
.review-form__stars .star { color: var(--c-grey-200); font-size: 22px; }
.review-form__stars .star--filled { color: var(--c-grey-200); }
.review-form__stars label.is-filled .star,
.review-form__stars input:checked ~ .star { color: #e8a33d; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.account-page { padding: 50px 24px 100px; max-width: 640px; margin: 0 auto; }
.account-page--dashboard { max-width: 900px; }
.account-card { background: var(--c-grey-100); border-radius: var(--radius-md); padding: 34px; margin-bottom: 30px; }
.account-card h1 { margin-bottom: 10px; }
.account-card__lede { color: var(--c-grey-600); margin-bottom: 24px; }
.account-card .contact-form { gap: 16px; }
.account-card__switch { margin: 16px 0 0; font-size: 13.5px; color: var(--c-grey-600); }

.account-dashboard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.account-dashboard__head h1 { margin: 4px 0; }
.account-dashboard__section-title { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-nav); color: var(--c-grey-500); margin-bottom: 16px; }

.account-orders-table { overflow-x: auto; border: 1px solid var(--c-grey-150); border-radius: var(--radius-md); }
.account-orders-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.account-orders-table th, .account-orders-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--c-grey-150); white-space: nowrap; }
.account-orders-table th { font-family: var(--font-nav); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-grey-500); }
.account-orders-table tr:last-child td { border-bottom: none; }

.order-status { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-family: var(--font-nav); font-weight: 500; }
.order-status--paid, .order-status--fulfilled { background: #e9f2ec; color: var(--c-success); }
.order-status--pending { background: #fbf1de; color: #a9761c; }
.order-status--cancelled { background: #f7e9e9; color: var(--c-sale); }

.track-order-result { margin-top: 30px; }

.logo__image { height: 56px; width: auto; max-width: 170px; object-fit: contain; display: block; }
.logo__image--footer { height: 56px; width: auto; margin-bottom: 14px; filter: brightness(0) invert(1); }

/* On small screens the header only has ~150-190px of room for the logo
   between the hamburger/social icons on the left and the search/wishlist/
   account/cart icons on the right — a wide rectangular logo at the full
   34px height could overflow that and push the icons out. Shrinking it
   slightly and capping its width keeps it centered and fully visible
   without squeezing anything else, whatever aspect ratio the uploaded
   logo image happens to be. */
@media (max-width: 639px) {
  .logo__image { height: 39px; max-width: 120px; }
}

.promo-duo { padding: 16px 20px 60px; }
.promo-duo__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 34px;
}

.promo-duo__tile {
  position: relative; display: block; border-radius: var(--radius-lg, 14px); overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--c-grey-100);
  isolation: isolate;
}
.promo-duo__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.promo-duo__tile:hover img { transform: scale(1.045); }

.promo-duo__tile::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: calc(var(--radius-lg, 14px) - 6px);
  opacity: 0; transform: scale(0.97);
  transition: opacity 400ms ease, transform 400ms ease;
  z-index: 2; pointer-events: none;
}
.promo-duo__tile:hover::before { opacity: 1; transform: scale(1); }

.promo-duo__tile-index {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  font-family: var(--font-nav); font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.85);
}
.promo-duo__tile-index::before { content: "0" attr(data-index); }

.promo-duo__tile-caption {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px; background: linear-gradient(0deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100%);
  color: var(--caption-color, var(--c-white));
}
.promo-duo__tile-caption h4 { color: var(--caption-color, var(--c-white)); font-family: var(--caption-font, inherit); margin: 4px 0 6px; font-size: 22px; letter-spacing: 0.01em; }
.promo-duo__tile-caption p {
  color: var(--caption-color, rgba(255,255,255,0.82)); font-size: 13px; margin: 0 0 12px; max-width: 34ch;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 400ms ease, opacity 300ms ease;
}
.promo-duo__tile:hover .promo-duo__tile-caption p { max-height: 60px; opacity: 1; }
.promo-duo__tile-caption .link-underline {
  display: inline-flex; align-items: center; gap: 6px;
}
.promo-duo__tile-caption .link-underline::after {
  content: "→"; display: inline-block; transition: transform 300ms ease;
}
.promo-duo__tile:hover .promo-duo__tile-caption .link-underline::after { transform: translateX(4px); }

@media (min-width: 700px) {

  .promo-duo__grid { grid-template-columns: repeat(var(--promo-cols, 2), 1fr); }

  .promo-duo__grid:has(> .promo-duo__tile:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
  .promo-duo__grid:has(> .promo-duo__tile:nth-child(2):last-child) .promo-duo__tile { aspect-ratio: 5/4; }

  .promo-duo__grid:has(> .promo-duo__tile:nth-child(3):last-child) {
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    height: 560px;
  }
  .promo-duo__grid:has(> .promo-duo__tile:nth-child(3):last-child) .promo-duo__tile {
    aspect-ratio: auto; height: 100%;
  }
  .promo-duo__grid:has(> .promo-duo__tile:nth-child(3):last-child) .promo-duo__tile:first-child {
    grid-row: 1 / 3;
  }
  .promo-duo__grid:has(> .promo-duo__tile:nth-child(3):last-child) .promo-duo__tile:first-child h4 { font-size: 28px; }

  .promo-duo__grid:has(> .promo-duo__tile:nth-child(4):last-child) {
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    height: 560px;
  }
  .promo-duo__grid:has(> .promo-duo__tile:nth-child(4):last-child) .promo-duo__tile {
    aspect-ratio: auto; height: 100%;
  }
  .promo-duo__grid:has(> .promo-duo__tile:nth-child(4):last-child) .promo-duo__tile:first-child {
    grid-row: 1 / 3;
  }
  .promo-duo__grid:has(> .promo-duo__tile:nth-child(4):last-child) .promo-duo__tile:first-child h4 { font-size: 26px; }
}

@media (max-width: 699px) {
  .promo-duo { padding: 8px 0 56px; }
  .promo-duo__grid {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px 4px;

    scrollbar-width: none;
  }
  .promo-duo__grid::-webkit-scrollbar { display: none; }

  .promo-duo__tile {
    flex: 0 0 auto;
    width: 78vw;
    max-width: 300px;
    aspect-ratio: 4/5;
    scroll-snap-align: start;
  }
  .promo-duo__tile-caption { padding: 18px; }
  .promo-duo__tile-caption h4 { font-size: 18px; }

  .promo-duo__tile-caption p { max-height: 60px; opacity: 1; font-size: 12.5px; }
}

.status-page {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px;
}
.status-page__code {
  font-family: var(--font-display);
  font-size: clamp(56px, 12vw, 96px);
  line-height: 1;
  color: var(--c-grey-300);
  margin: 0 0 8px;
}
.status-page h1 { font-size: clamp(24px, 4vw, 34px); margin: 0 0 12px; }
.status-page__text { max-width: 440px; color: var(--c-grey-500, rgba(0,0,0,0.6)); margin: 0 0 28px; }
.status-page__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }