/* styles.css - Maren & Co.
   Order: reset → base → layout → components → sections → shop → utilities */
@import "tokens.css";

/* ============================================================= RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
img { background: var(--color-surface-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
::selection { background: var(--color-accent); color: #fff; }

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

/* ============================================================= BASE */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }
.section--surface { background: var(--color-surface); }
.section--ink { background: var(--color-primary); color: var(--color-on-primary); }

.eyebrow {
  font-size: var(--fs-200); letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--color-accent-strong); font-weight: 700; margin-bottom: var(--space-3);
}
.eyebrow--light { color: var(--color-accent); }
.section__head { max-width: 60ch; margin-bottom: var(--space-7); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; justify-content: space-between; max-width: none; }
.section__title { font-size: var(--fs-800); letter-spacing: -.01em; }
.section__lead { color: var(--color-muted); font-size: var(--fs-500); margin-top: var(--space-3); max-width: 56ch; }

.link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700;
  font-size: var(--fs-300); letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary);
  border-bottom: 1px solid var(--color-border); padding-bottom: 2px; transition: gap var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.link-arrow:hover { gap: var(--space-3); border-color: var(--color-primary); }
.link-arrow svg { width: 1em; height: 1em; }

.skip-link { position: absolute; left: var(--space-4); top: -120%; z-index: 200; background: var(--color-primary);
  color: var(--color-on-primary); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.skip-link:focus { top: var(--space-3); }

/* ============================================================= BUTTONS */
.btn {
  --btn-bg: var(--color-primary); --btn-fg: var(--color-on-primary); --btn-bd: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-6);
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-300);
  letter-spacing: .1em; text-transform: uppercase; border-radius: var(--radius-md);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--color-primary-strong); border-color: var(--color-primary-strong); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--color-primary); --btn-bd: var(--color-primary); }
.btn--ghost:hover { --btn-bg: var(--color-primary); --btn-fg: var(--color-on-primary); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--color-primary); --btn-bd: #fff; }
.btn--light:hover { background: var(--color-surface-2); border-color: var(--color-surface-2); color: var(--color-primary); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.6); }
.btn--outline-light:hover { --btn-bg: #fff; --btn-fg: var(--color-primary); border-color: #fff; }
.btn--lg { min-height: 54px; padding-inline: var(--space-7); }
.btn--sm { min-height: 40px; padding: var(--space-2) var(--space-4); letter-spacing: .06em; }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

/* ============================================================= HEADER / NAV */
.announce { background: var(--color-primary); color: var(--color-on-primary); font-size: var(--fs-200); }
.announce__inner { display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  min-height: 38px; text-align: center; letter-spacing: .08em; text-transform: uppercase; }
.announce__text { margin: 0; }

.header { position: sticky; top: 0; z-index: 100; background: var(--color-bg);
  border-bottom: 1px solid var(--color-border); transition: box-shadow var(--dur) var(--ease); }
.header.is-scrolled { box-shadow: var(--shadow-sm); }
.header__inner { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-h); }

.header__logo { display: inline-flex; align-items: center; gap: .3em; font-family: var(--font-display);
  font-size: 1.5rem; letter-spacing: .02em; color: var(--color-primary); white-space: nowrap; }
.header__logo b { font-weight: 400; }
.header__logo .dot { color: var(--color-accent); }

.nav { display: contents; }
.nav__list { display: flex; align-items: center; gap: clamp(var(--space-3), 2vw, var(--space-6)); margin-inline: auto; }
.nav__link { font-size: var(--fs-300); letter-spacing: .04em; color: var(--color-text); position: relative; padding-block: var(--space-2); white-space: nowrap; }
.nav__link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: var(--color-primary); transition: width var(--dur) var(--ease); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }
.nav__link[aria-current="page"] { font-weight: 700; }

/* Language selector (EN | HR) - must never wrap, ≥44px tap targets on mobile */
.lang-switch { display: inline-flex; align-items: stretch; white-space: nowrap; flex: none;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); overflow: hidden; }
.lang-switch__btn { min-width: 38px; min-height: 38px; padding: 0 var(--space-3); display: inline-flex;
  align-items: center; justify-content: center; font-family: var(--font-body); font-size: var(--fs-200);
  font-weight: 700; letter-spacing: .06em; white-space: nowrap; color: var(--color-muted); background: var(--color-bg);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.lang-switch__btn + .lang-switch__btn { border-left: 1px solid var(--color-border); }
.lang-switch__btn:hover { color: var(--color-text); background: var(--color-surface); }
.lang-switch__btn[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.lang-switch__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.header__actions .lang-switch { display: none; }
.nav .lang-switch { margin-block: var(--space-2) 0; align-self: flex-start; }
.nav .lang-switch .lang-switch__btn { min-width: 44px; min-height: 44px; }

.header__actions { display: flex; align-items: center; gap: var(--space-1); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--radius-pill); color: var(--color-primary); position: relative;
  transition: background var(--dur) var(--ease); }
.icon-btn:hover { background: var(--color-surface-2); }
.icon-btn svg { width: 21px; height: 21px; }
.cart-count { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center; background: var(--color-accent-strong); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1; border-radius: var(--radius-pill); }
.cart-count[data-empty="true"] { display: none; }

/* Search (role=search, NOT a form) */
.search { display: flex; align-items: center; }
.search__panel { display: flex; align-items: center; gap: var(--space-2); }
.search__input { width: clamp(140px, 16vw, 220px); min-height: 40px; padding: var(--space-2) var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  font-size: var(--fs-300); }
.search__input::placeholder { color: var(--color-muted); }
.search__go { width: 40px; height: 40px; }

.nav__toggle { display: none; width: 44px; height: 44px; flex-direction: column; gap: 5px;
  align-items: center; justify-content: center; color: var(--color-primary); }
.nav__toggle-bar { width: 22px; height: 2px; background: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }

/* ============================================================= OVERLAY (shared by drawers) */
.overlay { position: fixed; inset: 0; z-index: 110; background: rgba(28, 26, 23, .42);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); }
body.is-nav-open .overlay, body.is-drawer-open .overlay { opacity: 1; visibility: visible; }
body.is-nav-open, body.is-drawer-open { overflow: hidden; }
/* While the nav drawer is open, keep the header (and its toggle) above the overlay
   so the hamburger stays clickable to close. Scoped to nav-open only, so it never
   covers the cart / size-guide drawer close buttons. */
body.is-nav-open .header { z-index: 130; }

/* ============================================================= MINI-CART DRAWER */
.drawer { position: fixed; top: 0; right: 0; z-index: 120; height: 100dvh; width: min(92vw, 420px);
  background: var(--color-bg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--dur) var(--ease); }
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-5); border-bottom: 1px solid var(--color-border); }
.drawer__title { font-size: var(--fs-600); }
.drawer__close { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); }
.drawer__close:hover { background: var(--color-surface-2); }
.drawer__progress { padding: var(--space-4) var(--space-5); background: var(--color-surface); border-bottom: 1px solid var(--color-border); font-size: var(--fs-300); }
.drawer__progress p { margin: 0 0 var(--space-2); color: var(--color-muted); }
.drawer__progress b { color: var(--color-text); }
.progress { height: 6px; border-radius: var(--radius-pill); background: var(--color-surface-2); overflow: hidden; }
.progress__bar { height: 100%; width: 0; background: var(--color-accent); border-radius: var(--radius-pill); transition: width var(--dur) var(--ease); }
.drawer__items { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-4); align-content: start; }
.drawer__empty { color: var(--color-muted); text-align: center; padding-block: var(--space-8) var(--space-6); }
.drawer__empty svg { width: 40px; height: 40px; margin: 0 auto var(--space-4); color: var(--color-border); }
.drawer__foot { border-top: 1px solid var(--color-border); padding: var(--space-5); display: grid; gap: var(--space-4); }
.drawer__row { display: flex; align-items: baseline; justify-content: space-between; }
.drawer__subtotal { font-size: var(--fs-600); font-family: var(--font-display); }
.drawer__note { font-size: var(--fs-200); color: var(--color-muted); text-align: center; margin: 0; }

.line { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-4); align-items: start; }
.line__media { aspect-ratio: var(--ratio-product); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface-2); }
.line__media img { width: 100%; height: 100%; object-fit: cover; }
.line__title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-300); line-height: var(--lh-snug); }
.line__opt { font-size: var(--fs-200); color: var(--color-muted); margin: 2px 0 var(--space-3); }
.line__price { font-size: var(--fs-300); font-weight: 700; white-space: nowrap; }
.line__price s { color: var(--color-muted); font-weight: 400; margin-right: 4px; }
.line__remove { font-size: var(--fs-200); color: var(--color-muted); text-decoration: underline; text-underline-offset: 2px; margin-top: var(--space-2); }
.line__remove:hover { color: var(--color-price-sale); }

/* ============================================================= QTY STEPPER */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-bg); }
.qty__btn { width: 38px; height: 38px; display: inline-grid; place-items: center; color: var(--color-primary); border-radius: var(--radius-pill); }
.qty__btn:hover { background: var(--color-surface-2); }
.qty__btn svg { width: 15px; height: 15px; }
.qty__input { width: 34px; text-align: center; border: none; background: none; font-weight: 700; font-size: var(--fs-300);
  -moz-appearance: textfield; }
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--lg .qty__btn { width: 48px; height: 48px; }

/* ============================================================= PRICE / BADGES / RATING / STOCK */
.price { font-weight: 700; color: var(--color-price); }
.price--sale { color: var(--color-price-sale); }
.price--was { color: var(--color-muted); font-weight: 400; margin-left: var(--space-2); }

.badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-200); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-sm); }
.badge--sale { background: var(--color-badge-sale-bg); color: var(--color-badge-sale-fg); }
.badge--new { background: var(--color-badge-new-bg); color: var(--color-badge-new-fg); }
.badge--bestseller { background: #fff; color: var(--color-primary); border: 1px solid var(--color-border); }
.badge--limited { background: var(--color-accent); color: #fff; }

.rating { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-300); color: var(--color-muted); }
.rating__stars { color: var(--color-rating); letter-spacing: .05em; }

.stock { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-300); font-weight: 700; }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stock--in { color: var(--color-instock); }
.stock--low { color: var(--color-lowstock); }
.stock--out { color: var(--color-oostock); }

/* ============================================================= SWATCHES / PILLS */
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.swatch { width: 34px; height: 34px; border-radius: var(--radius-pill); position: relative; cursor: pointer;
  border: 1px solid rgba(28,26,23,.18); box-shadow: inset 0 0 0 2px #fff; transition: transform var(--dur) var(--ease); }
.swatch:hover { transform: scale(1.06); }
.swatch[aria-checked="true"] { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--color-primary); }
.swatch:focus-visible { outline-offset: 4px; }

.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill { min-width: 48px; min-height: 44px; padding: var(--space-2) var(--space-4); display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg);
  font-weight: 700; font-size: var(--fs-300); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.pill:hover { border-color: var(--color-primary); }
.pill[aria-checked="true"] { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.pill[aria-disabled="true"] { color: var(--color-oostock); border-style: dashed; cursor: not-allowed; text-decoration: line-through; }
.pill[aria-disabled="true"]:hover { border-color: var(--color-border); }

/* ============================================================= PRODUCT CARD */
.product-grid { display: grid; gap: clamp(var(--space-4), 2.4vw, var(--space-6)) clamp(var(--space-3), 1.6vw, var(--space-5));
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr)); }
.product-grid--2 { grid-template-columns: repeat(2, 1fr); }

.product-card { container-type: inline-size; position: relative; display: flex; flex-direction: column; }
.product-card__media { position: relative; display: block; aspect-ratio: var(--ratio-product);
  overflow: hidden; background: var(--color-surface-2); border-radius: var(--radius-sm); }
.product-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity var(--dur) var(--ease); }
.product-card:hover .product-card__img { transform: scale(1.04); }
.product-card__flags { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.product-card__wish { position: absolute; top: var(--space-3); right: var(--space-3); width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: var(--radius-pill); background: rgba(255,255,255,.86);
  color: var(--color-primary); opacity: 0; transform: translateY(-4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.product-card:hover .product-card__wish, .product-card__wish:focus-visible { opacity: 1; transform: none; }
.product-card__wish svg { width: 18px; height: 18px; }
.product-card__wish, .product-card__add { z-index: 2; }
.product-card__title a::after { z-index: 1; }
.product-card__add { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.product-card:hover .product-card__add, .product-card:focus-within .product-card__add { opacity: 1; transform: none; }
.product-card__body { padding-top: var(--space-3); display: grid; gap: var(--space-1); }
.product-card__meta { font-size: var(--fs-200); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); }
.product-card__title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-400); line-height: var(--lh-snug); }
.product-card__title a::after { content: ""; position: absolute; inset: 0; }
.product-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; margin-top: var(--space-1); font-size: var(--fs-400); }
.product-card__swatches { display: flex; gap: 6px; margin-top: var(--space-2); }
.product-card__dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(28,26,23,.18); }
.product-card__more { font-size: var(--fs-200); color: var(--color-muted); align-self: center; }

/* Touch / small cards: always show add button */
@media (hover: none) {
  .product-card__add { opacity: 1; transform: none; position: static; margin-top: var(--space-3); }
  .product-card__wish { opacity: 1; transform: none; }
}
@container (max-width: 220px) {
  .product-card__add { letter-spacing: .04em; padding-inline: var(--space-3); }
}

/* ============================================================= HERO */
.hero { position: relative; }
.hero__media { position: relative; min-height: clamp(460px, 78vh, 760px); }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(28,26,23,.7) 0%, rgba(28,26,23,.42) 45%, rgba(28,26,23,.1) 100%); }
.hero__inner { position: relative; min-height: inherit; display: flex; align-items: center; }
.hero__copy { max-width: 33rem; color: #fff; padding-block: var(--space-9); }
.hero .eyebrow { color: #f0d9d9; }
.hero__title { font-size: var(--fs-900); color: #fff; }
.hero__lead { margin-top: var(--space-4); font-size: var(--fs-500); color: rgba(255,255,255,.92); max-width: 42ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__media .hero__inner { min-height: clamp(460px, 78vh, 760px); }

/* ============================================================= USP BAR */
.usp { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.usp__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-5); padding-block: var(--space-5); }
.usp__item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-300); }
.usp__item svg { width: 24px; height: 24px; color: var(--color-accent-strong); flex: none; }
.usp__item b { display: block; }
.usp__item span { color: var(--color-muted); font-size: var(--fs-200); }

/* ============================================================= COLLECTION TILES (home) */
.edits__grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.edit-tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 4 / 5; }
.edit-tile--tall { aspect-ratio: 4 / 5; }
.edit-tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.edit-tile:hover .edit-tile__img { transform: scale(1.05); }
.edit-tile__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(28,26,23,.66), rgba(28,26,23,.26) 52%, rgba(28,26,23,.06) 82%); }
.edit-tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6); color: #fff; }
.edit-tile__name { font-size: var(--fs-700); color: #fff; text-shadow: 0 1px 10px rgba(28, 26, 23, .5); }
.edit-tile__cta { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2);
  font-size: var(--fs-300); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.edit-tile__cta svg { width: 1em; height: 1em; transition: transform var(--dur) var(--ease); }
.edit-tile:hover .edit-tile__cta svg { transform: translateX(4px); }

/* ============================================================= PRODUCT RAIL */
.rail { position: relative; }
.rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: var(--space-5);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scrollbar-width: thin; }
.rail__track > * { scroll-snap-align: start; }
.rail__track::-webkit-scrollbar { height: 6px; }
.rail__track::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-pill); }

/* ============================================================= PROMO / EDITORIAL BANNER */
.promo { position: relative; overflow: hidden; }
.promo__grid { display: grid; gap: 0; grid-template-columns: 1fr; align-items: stretch; }
.promo__media { position: relative; min-height: 320px; }
.promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo__copy { background: var(--color-surface-2); padding: clamp(2rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: center; }
.promo__title { font-size: var(--fs-800); }
.promo__text { color: var(--color-muted); margin-top: var(--space-4); max-width: 46ch; font-size: var(--fs-500); }
.promo__actions { margin-top: var(--space-6); }

/* ============================================================= TESTIMONIALS */
.quotes__grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.quote { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.quote__stars { color: var(--color-rating); letter-spacing: .1em; }
.quote__text { font-family: var(--font-display); font-size: var(--fs-500); line-height: var(--lh-snug); }
.quote__who { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.quote__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.quote__name { font-weight: 700; font-size: var(--fs-300); }
.quote__role { font-size: var(--fs-200); color: var(--color-muted); }

/* ============================================================= NEWSLETTER */
.newsletter__inner { display: grid; gap: var(--space-6); align-items: center; }
.newsletter .section__title { color: inherit; }
.newsletter__text { color: rgba(255,255,255,.82); margin-top: var(--space-3); max-width: 48ch; }
.form { width: 100%; }
.form__row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.form__field { display: grid; gap: var(--space-2); flex: 1 1 220px; }
.form__label { font-size: var(--fs-200); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.form__input { width: 100%; min-height: 52px; padding: var(--space-3) var(--space-4); background: #fff; color: var(--color-text);
  border: 1px solid transparent; border-radius: var(--radius-md); font-size: var(--fs-400); }
.form__input::placeholder { color: var(--color-muted); }
.form__note { font-size: var(--fs-200); color: rgba(255,255,255,.7); margin-top: var(--space-3); }
.newsletter .form__submit { white-space: nowrap; }
.form__success { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); font-size: var(--fs-500); }
/* Newsletter sits on ink; align submit on desktop */
.newsletter__form .form__row { align-items: end; }

/* ============================================================= FOOTER */
.footer { background: var(--color-surface); border-top: 1px solid var(--color-border); }
.footer__grid { display: grid; gap: var(--space-7); grid-template-columns: 1fr; padding-block: var(--section-y) var(--space-7); }
.footer__brand { max-width: 34ch; }
.footer__logo { font-family: var(--font-display); font-size: 1.6rem; color: var(--color-primary); display: inline-flex; align-items: center; gap: .3em; margin-bottom: var(--space-3); }
.footer__logo .dot { color: var(--color-accent); }
.footer__blurb { color: var(--color-muted); }
.footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.footer__social a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); color: var(--color-primary); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.footer__social a:hover { background: var(--color-primary); color: var(--color-on-primary); }
.footer__social svg { width: 19px; height: 19px; }
.footer__title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-200); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--space-4); }
.footer__list { display: grid; gap: var(--space-3); }
.footer__list a { color: var(--color-muted); font-size: var(--fs-300); }
.footer__list a:hover { color: var(--color-text); }
.footer__address { font-style: normal; color: var(--color-muted); font-size: var(--fs-300); line-height: var(--lh-body); }
.footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  border-top: 1px solid var(--color-border); padding-block: var(--space-5); }
.footer__copy { font-size: var(--fs-200); color: var(--color-muted); }
.footer__pay { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.footer__pay svg { border-radius: var(--radius-sm); }

/* ============================================================= BREADCRUMB */
.breadcrumb { padding-block: var(--space-5) 0; }
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-200); color: var(--color-muted); letter-spacing: .04em; }
.breadcrumb__list a:hover { color: var(--color-text); }
.breadcrumb__sep { color: var(--color-border); }

/* ============================================================= COLLECTION PAGE */
.collection-head { padding-block: var(--space-6) var(--space-5); }
.collection-head__title { font-size: var(--fs-800); }
.collection-head__intro { color: var(--color-muted); max-width: 60ch; margin-top: var(--space-3); }

.shop-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; padding-bottom: clamp(3rem, 6vw, 5.5rem); }

.filters__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); justify-content: space-between;
  padding-block: var(--space-4); border-block: 1px solid var(--color-border); margin-bottom: var(--space-5); }
.filters__count { font-size: var(--fs-300); color: var(--color-muted); }
.filters__count b { color: var(--color-text); }
.filters__bar-actions { display: flex; align-items: center; gap: var(--space-3); }
.filters__toggle { display: inline-flex; }
.select { min-height: 44px; padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg);
  font-size: var(--fs-300); font-weight: 700; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231c1a17' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-3) center; }

.facets { display: grid; gap: var(--space-2); align-content: start; }
.facet { border-bottom: 1px solid var(--color-border); padding-block: var(--space-4); }
.facet__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  font-weight: 700; font-size: var(--fs-300); letter-spacing: .04em; text-transform: uppercase; }
.facet__trigger svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.facet__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.facet__panel { padding-top: var(--space-4); display: grid; gap: var(--space-3); }
.facet__panel[hidden] { display: none; }
.check { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-300); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--color-primary); flex: none; }
.check__count { margin-left: auto; color: var(--color-muted); font-size: var(--fs-200); }
.facet__swatches { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.color-check { position: relative; cursor: pointer; }
.color-check input { position: absolute; opacity: 0; inset: 0; }
.color-check__dot { width: 30px; height: 30px; border-radius: 50%; display: block; border: 1px solid rgba(28,26,23,.18); box-shadow: inset 0 0 0 2px #fff; transition: transform var(--dur) var(--ease); }
.color-check:hover .color-check__dot { transform: scale(1.08); }
.color-check input:checked + .color-check__dot { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--color-primary); }
.color-check input:focus-visible + .color-check__dot { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.facet__clear { justify-self: start; font-size: var(--fs-200); color: var(--color-muted); text-decoration: underline; text-underline-offset: 2px; margin-top: var(--space-2); }
.facet__clear:hover { color: var(--color-price-sale); }

.shop-empty { text-align: center; padding: var(--space-9) var(--space-4); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); color: var(--color-muted); }
.shop-empty h3 { font-size: var(--fs-600); color: var(--color-text); margin-bottom: var(--space-3); }

/* Filters drawer (mobile) shares overlay */
.filters__panel-wrap { }

/* ============================================================= PDP */
.pdp { container-type: inline-size; padding-block: var(--space-6) var(--section-y); }
.pdp__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }

.gallery { display: grid; gap: var(--space-3); }
.gallery__main { position: relative; aspect-ratio: var(--ratio-product); overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface-2); }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.gallery__thumb { width: 72px; aspect-ratio: var(--ratio-product); border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-2); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current="true"] { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }

.buybox { display: grid; gap: var(--space-5); align-content: start; }
.buybox__vendor { font-size: var(--fs-200); letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
.buybox__title { font-size: var(--fs-800); }
.buybox__rating { display: flex; align-items: center; gap: var(--space-3); }
.buybox__rating a { text-decoration: underline; text-underline-offset: 2px; color: var(--color-muted); font-size: var(--fs-200); }
.buybox__price { font-size: var(--fs-700); display: flex; align-items: baseline; gap: var(--space-2); }
.buybox__save { font-size: var(--fs-200); font-weight: 700; color: var(--color-price-sale); background: #fbecee; padding: 3px 8px; border-radius: var(--radius-sm); }
.buybox__desc { color: var(--color-muted); max-width: 56ch; }
.option-group { display: grid; gap: var(--space-3); }
.option-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.option-group__label { font-size: var(--fs-200); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.option-group__value { font-size: var(--fs-300); color: var(--color-muted); }
.option-group__guide { font-size: var(--fs-200); color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.buybox__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.buybox__actions .btn--block { flex: 1 1 220px; }
.buybox__assure { display: grid; gap: var(--space-3); padding-top: var(--space-2); }
.assure { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-300); color: var(--color-muted); }
.assure svg { width: 20px; height: 20px; color: var(--color-accent-strong); flex: none; }

.accordion { border-top: 1px solid var(--color-border); }
.accordion__item { border-bottom: 1px solid var(--color-border); }
.accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-4); font-weight: 700; font-size: var(--fs-400); text-align: left; }
.accordion__trigger svg { width: 18px; height: 18px; flex: none; transition: transform var(--dur) var(--ease); }
.accordion__trigger[aria-expanded="true"] svg { transform: rotate(45deg); }
.accordion__panel { padding-bottom: var(--space-5); color: var(--color-muted); }
.accordion__panel[hidden] { display: none; }
.accordion__panel ul { display: grid; gap: var(--space-2); }
.accordion__panel li { padding-left: var(--space-4); position: relative; }
.accordion__panel li::before { content: ""; position: absolute; left: 0; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); }

/* Sticky add-to-cart (mobile) */
.sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none;
  align-items: center; gap: var(--space-3); padding: var(--space-3) var(--gutter);
  background: var(--color-bg); border-top: 1px solid var(--color-border); box-shadow: 0 -8px 24px rgba(28,26,23,.08); }
.sticky-buy__info { display: grid; }
.sticky-buy__name { font-weight: 700; font-size: var(--fs-300); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.sticky-buy__price { font-size: var(--fs-300); }
.sticky-buy .btn { margin-left: auto; }
/* Show the sticky add-to-cart bar where the buy box is NOT position:sticky (below 1024).
   store.js then toggles inline display:none while the buy box itself is on screen. */
@media (max-width: 1023px) {
  .sticky-buy { display: flex; }
}

/* Size-guide drawer reuses .drawer (opens from right) */
.size-guide__body { padding: var(--space-5); overflow-y: auto; }
.size-table { width: 100%; border-collapse: collapse; font-size: var(--fs-300); margin-top: var(--space-4); }
.size-table th, .size-table td { border: 1px solid var(--color-border); padding: var(--space-3); text-align: center; }
.size-table th { background: var(--color-surface); font-weight: 700; }
.size-guide__note { color: var(--color-muted); font-size: var(--fs-300); margin-top: var(--space-4); }

/* ============================================================= CART PAGE */
.cart-page { padding-block: var(--space-6) var(--section-y); }
.cart-layout { display: grid; gap: var(--space-7); grid-template-columns: 1fr; align-items: start; }
.cart-list { display: grid; gap: 0; }
.cart-list__head { display: none; }
.cart-item { display: grid; grid-template-columns: 92px 1fr; gap: var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--color-border); }
.cart-item__media { aspect-ratio: var(--ratio-product); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface-2); }
.cart-item__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__main { display: grid; gap: var(--space-2); align-content: start; }
.cart-item__title { font-weight: 700; font-size: var(--fs-500); }
.cart-item__opt { font-size: var(--fs-200); color: var(--color-muted); }
.cart-item__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
.cart-item__price { font-weight: 700; }
.cart-item__remove { font-size: var(--fs-200); color: var(--color-muted); text-decoration: underline; text-underline-offset: 2px; }
.cart-item__remove:hover { color: var(--color-price-sale); }

.summary { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-6); display: grid; gap: var(--space-4); position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.summary__title { font-size: var(--fs-600); }
.summary__row { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--fs-400); }
.summary__row--total { border-top: 1px solid var(--color-border); padding-top: var(--space-4); font-size: var(--fs-500); font-weight: 700; }
.summary__muted { color: var(--color-muted); font-size: var(--fs-300); }
.cart-empty { text-align: center; padding: var(--space-9) var(--space-4); }
.cart-empty svg { width: 56px; height: 56px; color: var(--color-border); margin: 0 auto var(--space-4); }
.cart-empty h2 { font-size: var(--fs-700); margin-bottom: var(--space-3); }
.cart-empty p { color: var(--color-muted); margin-bottom: var(--space-5); }

/* ============================================================= CART STATUS (a11y live) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================================= REVEAL */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ============================================================= UTILITIES */
.is-locked { overflow: hidden; }
.text-center { text-align: center; }
.hide-mobile { display: none; }

/* ============================================================= BREAKPOINTS */
@media (min-width: 600px) {
  .usp__list { grid-template-columns: repeat(4, 1fr); }
  .quotes__grid { grid-template-columns: repeat(2, 1fr); }
  .cart-item { grid-template-columns: 110px 1fr; }
}
@media (min-width: 768px) {
  .edits__grid { grid-template-columns: repeat(3, 1fr); }
  .quotes__grid { grid-template-columns: repeat(3, 1fr); }
  .promo__grid { grid-template-columns: 1.05fr 1fr; }
  .newsletter__inner { grid-template-columns: 1fr 1fr; }
  .hide-mobile { display: inline-flex; }
}
@container (min-width: 560px) {
  .pdp__grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-8); }
  .gallery { grid-template-columns: 72px 1fr; grid-auto-flow: dense; }
  .gallery__main { grid-column: 2; grid-row: 1; }
  .gallery__thumbs { grid-column: 1; grid-row: 1; flex-direction: column; }
}
@media (min-width: 1024px) {
  .shop-layout { grid-template-columns: 248px 1fr; gap: var(--space-8); }
  .cart-layout { grid-template-columns: 1fr 360px; }
  .filters__toggle { display: none; }
  .facets { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
  .buybox { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}

/* Mobile nav + facet drawer behaviour */
@media (max-width: 1023px) {
  .nav { position: fixed; top: 0; right: 0; z-index: 120; height: 100dvh; width: min(86vw, 360px);
    display: flex; flex-direction: column; gap: var(--space-5); background: var(--color-bg);
    box-shadow: var(--shadow-lg); padding: calc(var(--header-h) + var(--space-4)) var(--gutter) var(--space-6);
    transform: translateX(100%); transition: transform var(--dur) var(--ease); overflow-y: auto; }
  .nav[data-open="true"] { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: var(--space-2); margin: 0; }
  .nav__link { font-size: var(--fs-600); font-family: var(--font-display); padding-block: var(--space-2); }
  .nav__link::after { display: none; }
  .nav__toggle { display: flex; order: -1; }
  .search { width: 100%; order: 5; }
  .search__panel { width: 100%; }
  .search__input { width: 100%; }
  .header__inner { justify-content: space-between; }
  .header__logo { margin-inline: auto; }
  .nav-spacer { display: none; }
}
@media (min-width: 1024px) {
  .search--drawer-only { display: none; }
  .nav .lang-switch { display: none; }
  .header__actions .lang-switch { display: inline-flex; }
}
/* Tighten the header row at narrower desktop widths so 5 nav items + lang
   switch + search + cart never wrap (Croatian labels run longer than English). */
@media (min-width: 1024px) and (max-width: 1240px) {
  .nav__list { gap: var(--space-3); }
  .nav__link { font-size: .8125rem; letter-spacing: .02em; }
  .search__input { width: clamp(90px, 8vw, 150px); }
  .header__logo { font-size: 1.3rem; }
}

/* Facets as a slide-in drawer on mobile */
@media (max-width: 1023px) {
  .facets { position: fixed; top: 0; right: 0; z-index: 120; height: 100dvh; width: min(88vw, 360px);
    background: var(--color-bg); box-shadow: var(--shadow-lg); padding: var(--space-5);
    overflow-y: auto; transform: translateX(100%); transition: transform var(--dur) var(--ease); }
  .facets.is-open { transform: translateX(0); }
  .facets__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
}
.facets__head { display: none; }
@media (max-width: 1023px) { .facets__head { display: flex; } }

/* ============================================================= FOOTER - desktop layout
   Fix: the footer grid stayed on its mobile single column at every width. */
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); align-items: start; }
}

@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* =========================================================================
   HamariUnique skin - stencil display used with intent, lime with purpose
   ========================================================================= */

/* Stencil is a display voice, not a reading voice */
h3, h4 { font-family: var(--font-body); font-weight: 650; }
.product-card__title { font-family: var(--font-body); font-weight: 600; }
.product-card__title a { text-decoration: none; }
.quote__text { font-family: var(--font-body); font-weight: 500; }
.drawer__subtotal { font-family: var(--font-body); font-weight: 700; }
.section__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; }

/* Announcement bar in house chartreuse */
.announce { background: var(--color-accent); color: var(--color-primary); }
.announce__text { font-weight: 600; letter-spacing: .04em; }

/* Brand lockup: HAMARI wordmark + stacked stencil chip */
.header__logo, .footer__logo { text-decoration: none; }
.logo-word { font-family: var(--font-body); font-weight: 800; letter-spacing: .12em; }
.logo-chip {
  display: inline-grid; place-items: center;
  min-width: 2.35rem; height: 2.35rem; padding: .2rem .3rem;
  background: var(--color-accent); color: var(--color-primary);
  font-family: var(--font-display); font-size: .58rem; line-height: .95;
  letter-spacing: .08em; text-align: center; text-transform: uppercase;
}
.footer__logo .logo-chip { transform: scale(.9); transform-origin: left center; }

/* Hero: giant stencil statement over the editorial photo */
.hero__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.7rem);
  line-height: .95;
}
.hero__title .lime { color: var(--color-accent); }

/* Category tiles: 4-up on desktop, lime label chips */
.edits__grid--4 { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .edits__grid--4 { grid-template-columns: repeat(4, 1fr); } .edits__grid--4 > * { min-width: 0; } }
/* Every tile renders the same one-line layout: the chip and the CTA never
   wrap, and both scale with the tile width (86cqi = tile minus body padding).
   Factors come from measured label widths: longest chip "ZADNJI KOMADI" =
   8.18em + 1.1em chip padding; longest CTA "CROCHETED BY HAND" = 11.5em +
   1.8em gap/arrow. */
.edits__grid--4 .edit-tile { container-type: inline-size; }
.edits__grid--4 .edit-tile__body {
  inset: 0;
  padding: clamp(.9rem, 7cqi, 2rem);
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: stretch; gap: var(--space-2);
}
.edit-tile__name {
  display: block; width: 100%; text-align: center;
  background: var(--color-accent); color: var(--color-primary);
  padding: .28em .55em;
  font-family: var(--font-display); font-weight: 400;
  font-size: min(9cqi, 1.8rem);
  white-space: nowrap;
  text-transform: uppercase; letter-spacing: .04em;
  max-width: none;
}
.edits__grid--4 .edit-tile__cta {
  order: -1; align-self: flex-start;
  margin: 0; padding: .5em .75em;
  background: rgba(23, 23, 16, .55);
  white-space: nowrap; font-size: min(6.4cqi, .875rem);
}
.edits__grid--4 .edit-tile__cta svg { flex: none; }

/* Lime CTA */
.btn--accent { background: var(--color-accent); color: var(--color-primary); border-color: var(--color-accent); }
.btn--accent:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: var(--color-primary); }

/* Atelier strip: three process tiles with captions */
.atelier__grid { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .atelier__grid { grid-template-columns: repeat(3, 1fr); } .atelier__grid > * { min-width: 0; } }
.atelier__fig { margin: 0; }
.atelier__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.96);
  box-shadow: var(--shadow-md); transition: transform var(--dur) var(--ease); }
.atelier__fig:nth-child(1) img { transform: rotate(-2.6deg); }
.atelier__fig:nth-child(2) img { transform: rotate(2.1deg); }
.atelier__fig:nth-child(3) img { transform: rotate(-2.3deg); }
.atelier__fig:hover img { transform: rotate(0deg); }
.atelier__fig figcaption { margin-top: var(--space-3); font-size: var(--fs-300); color: var(--color-muted); }
.atelier__fig figcaption b { color: var(--color-text); font-weight: 650; display: block; }

/* Store band: the shop on the square, on chartreuse */
.shopband { background: var(--color-accent); color: var(--color-primary); }
.shopband__grid { display: grid; gap: var(--space-6); align-items: center; padding-block: var(--section-y); }
@media (min-width: 900px) { .shopband__grid { grid-template-columns: 1fr 1.05fr; gap: var(--space-8); } .shopband__grid > * { min-width: 0; } }
.shopband__media img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; box-shadow: var(--shadow-lg); }
.shopband__title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; font-size: var(--fs-800); line-height: 1; }
.shopband__text { margin-top: var(--space-4); max-width: 34rem; font-size: var(--fs-500); }
.shopband__meta { margin: var(--space-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); font-weight: 600; }
.shopband__meta span { font-weight: 400; }
.shopband .btn--primary { margin-top: var(--space-5); }

/* Reviewer name stacks over the role line */
.quote__who > span:last-child { display: grid; line-height: 1.35; }

/* Review avatars → stencil initials on lime */
.quote__initial {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--color-accent); color: var(--color-primary);
  font-family: var(--font-display); font-size: 1.1rem;
}

/* Mobile nav drawer links stay in the body voice */
@media (max-width: 899px) {
  .nav__link { font-family: var(--font-body); font-weight: 700; }
}

/* Split hero: ink on white left, the kaftan photo over a chartreuse field right.
   The lime block is OUR standardized brand mark - photos themselves stay clean. */
.hero--split { display: grid; background: var(--color-bg); }
.hero--split .hero__media { position: relative; min-height: 0; order: -1; background: var(--color-accent); display: flex; flex-direction: column; }
.hero--split .hero__media img { position: static; width: 100%; height: auto; display: block; }
.hero--split .hero__content { display: flex; align-items: center; }
.hero--split .hero__copy { max-width: 38rem; color: var(--color-text); padding: var(--space-7) var(--gutter); margin-inline: auto; }
.hero--split .eyebrow { color: var(--color-muted); }
.hero--split .hero__title { color: var(--color-text); }
.hero--split .hero__lead { color: var(--color-muted); }
@media (min-width: 900px) {
  .hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); border-bottom: 1px solid var(--color-border); min-height: min(74vh, 46rem); }
  .hero--split .hero__media { order: 0; }
  .hero--split .hero__copy { padding-block: var(--space-9); }
}

/* Ink header: same surface as the newsletter band (section--ink) */
.header { background: var(--color-primary); border-bottom-color: rgba(255, 255, 255, .14); }
.header__logo { color: #fff; }
.nav__toggle { color: #fff; }
.header__actions .icon-btn, .search.hide-mobile .icon-btn { color: #fff; }
.header__actions .icon-btn:hover, .search.hide-mobile .icon-btn:hover { background: rgba(255, 255, 255, .14); }
.cart-count { background: var(--color-accent); color: var(--color-primary); }

/* Desktop nav links live on the ink bar; the mobile drawer stays light */
@media (min-width: 1024px) {
  .nav__link { color: rgba(255, 255, 255, .85); }
  .nav__link:hover, .nav__link[aria-current="page"] { color: #fff; }
  .nav__link::after { background: var(--color-accent); }
}

/* Desktop header search on ink */
.search.hide-mobile .search__input {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); color: #fff;
}
.search.hide-mobile .search__input::placeholder { color: rgba(255, 255, 255, .55); }
.search.hide-mobile .search__input:focus { background: rgba(255, 255, 255, .16); outline-color: var(--color-accent); }

/* Header language switch on ink: active language flips to the brand lime */
.header__actions .lang-switch { border-color: rgba(255, 255, 255, .28); }
.header__actions .lang-switch__btn { background: transparent; color: rgba(255, 255, 255, .72); }
.header__actions .lang-switch__btn + .lang-switch__btn { border-left-color: rgba(255, 255, 255, .28); }
.header__actions .lang-switch__btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.header__actions .lang-switch__btn[aria-pressed="true"] { background: var(--color-accent); color: var(--color-primary); }
.header__actions .lang-switch__btn:focus-visible { outline-color: var(--color-accent); }

/* Rails behave as sliders: no native scrollbar (it renders differently per OS
   and looks heavy on Windows); the arrows page through instead. Touch still
   swipes, so arrows hide on small screens. */
.rail__track { scrollbar-width: none; -ms-overflow-style: none; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__nav { position: absolute; top: 42%; z-index: 3; width: 46px; height: 46px;
  display: grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-md);
  transition: opacity var(--dur) var(--ease), transform .2s var(--ease); }
.rail__nav:hover { transform: scale(1.07); }
.rail__nav--prev { left: -10px; }
.rail__nav--next { right: -10px; }
.rail__nav[disabled] { opacity: 0; pointer-events: none; }
.rail__nav svg { width: 20px; height: 20px; }
@media (max-width: 719px) { .rail__nav { display: none; } }

/* Instagram feed: the latest posts, each tile links to the real post */
.ig__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 720px) { .ig__grid { grid-template-columns: repeat(4, 1fr); } .ig__grid > * { min-width: 0; } }
.ig__tile { display: block; overflow: hidden; position: relative; }
.ig__tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.ig__tile:hover img { transform: scale(1.05); }

/* ============================================================= MOBILE REFINEMENTS
   Phone-first pass: two products per row, section links that survive on small
   screens, a scroll indicator for the rails (their arrows are desktop-only) and
   a nav drawer with its own head, house links and contact block. */

/* Touch devices: keep the quick-add overlaid on the image. Letting it go static
   pushed it past the media box, which has a fixed aspect-ratio + overflow:hidden,
   so the button rendered outside the clip and was invisible on real phones. */
@media (hover: none) {
  .product-card__add { position: absolute; margin-top: 0; }
}

/* 1. Two products per row on phones (was one full-width card per screen) */
@media (max-width: 719px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-3); }
  .product-grid > * { min-width: 0; }
  .product-card__add { left: var(--space-2); right: var(--space-2); bottom: var(--space-2);
    font-size: .6875rem; letter-spacing: .02em; padding: .7em var(--space-2); }
  .product-card__flags { top: var(--space-2); left: var(--space-2); }
  .product-card__flags .badge { font-size: .625rem; padding: .3em .5em; }
  .product-card__wish { top: var(--space-2); right: var(--space-2); width: 34px; height: 34px; }
  .product-card__wish svg { width: 16px; height: 16px; }
  .product-card__meta { font-size: .6875rem; letter-spacing: .08em; }
  .product-card__title { font-size: var(--fs-300); }
  .product-card__rating { font-size: var(--fs-200); }
}

/* 2. Section "view all" links stay on phones - only the desktop search hides.
   Matches .hide-mobile's own 768px threshold so no width is left without them. */
@media (max-width: 767px) {
  .link-arrow.hide-mobile { display: inline-flex; }
  .section__head--row, .board__head, .wall__head { flex-wrap: wrap; align-items: flex-start; }
  .section__head--row > div:first-child, .board__head > div:first-child, .wall__head > div:first-child { flex: 1 1 100%; }
  .section__head--row .link-arrow, .board__head .link-arrow, .wall__head .link-arrow { margin-top: var(--space-1); }
}

/* 3. Rails: scroll indicator on phones, where the arrows are hidden */
.rail__progress { display: none; }
@media (max-width: 719px) {
  .rail__progress { display: block; position: relative; height: 3px; margin-top: var(--space-4);
    background: var(--color-border); overflow: hidden; }
  .rail__progress span { position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: var(--color-accent); transition: left .25s var(--ease), width .25s var(--ease); }
}

/* 4. Nav drawer: brand + close at the top, house links and contact below the
   categories, so the panel reads as a page instead of five floating links. */
.nav__head, .nav__more, .nav__contact { display: none; }
@media (max-width: 1023px) {
  /* the header keeps its raised z-index here: the drawer is a header descendant,
     so lowering the header would drop the whole panel under the overlay */
  .nav { padding-top: var(--space-3); gap: var(--space-4); }
  /* drawer reading order: brand, search, categories, house, language, contact.
     (the shared .search rule carries order:5, which otherwise drops it last) */
  .nav__head { order: 0; }
  .nav .search { order: 1; }
  .nav__list { order: 2; }
  .nav__more { order: 3; }
  .nav .lang-switch { order: 4; }
  .nav__contact { order: 5; }
  .nav__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    min-height: var(--header-h); }
  .nav__logo { display: inline-flex; align-items: center; gap: .3em; text-decoration: none;
    font-size: 1.3rem; color: var(--color-text); }
  .nav__close { width: 44px; height: 44px; display: inline-grid; place-items: center;
    margin-right: calc(var(--space-2) * -1); border-radius: var(--radius-pill); color: var(--color-text); }
  .nav__close:hover { background: var(--color-surface-2); }
  .nav__more { display: block; border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
  .nav__label { font-size: var(--fs-200); letter-spacing: .14em; text-transform: uppercase;
    color: var(--color-muted); margin: 0 0 var(--space-2); }
  .nav__more ul { list-style: none; margin: 0; padding: 0; display: grid; }
  .nav__more a { display: block; padding-block: var(--space-2); font-size: var(--fs-400); color: var(--color-text); }
  .nav__contact { display: grid; gap: var(--space-1); margin-top: auto; padding-top: var(--space-4);
    border-top: 1px solid var(--color-border); font-size: var(--fs-300); color: var(--color-muted); }
  .nav__contact address { font-style: normal; }
  .nav__contact > a { color: var(--color-text); }
  .nav__social { list-style: none; display: flex; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; }
  .nav__social a { display: inline-grid; place-items: center; width: 42px; height: 42px;
    border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text); }
  .nav__social svg { width: 18px; height: 18px; }
}

/* ============================================================= MOBILE, ROUND 2 */

/* A rail must never become a vertical scroll container. `overflow-x: auto`
   forces overflow-y to compute to `auto`, and the cards sit a fraction past the
   content box, so a vertical swipe that started inside a full-height rail was
   swallowed by the track instead of scrolling the page. (touch-action: pan-x
   would be the wrong tool - it blocks the ancestors' scroll too.) */
.rail__track { overflow-y: hidden; }

/* Hero CTAs while the hero is one stacked column: a single centred grid track
   sized to the widest label, so both buttons come out the same width. */
@media (max-width: 899px) {
  .hero__actions, .nhero__actions {
    display: grid; grid-auto-flow: row; justify-content: center; justify-items: stretch;
  }
}

/* Footer on phones: the link lists sit side by side instead of one long
   left-aligned ribbon; brand and address stay full width, bottom bar centres. */
@media (max-width: 767px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-4); }
  .footer__brand { grid-column: 1 / -1; max-width: none; }
  .footer__grid > div.footer__col { grid-column: 1 / -1; }
  .footer__bar { justify-content: center; text-align: center; }
}

/* Instagram tiles carry the post's own caption under the photo */
.ig__frame { display: block; overflow: hidden; }
.ig__caption { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: var(--space-2); font-size: var(--fs-200); line-height: 1.5;
  color: var(--color-muted); transition: color var(--dur) var(--ease); }
.ig__tile:hover .ig__caption { color: var(--color-text); }

/* Rails on phones: drop the full-bleed offset so cards line up with the page
   gutter instead of sitting flush against the screen edge. The next card still
   peeks in from the container edge, and the progress bar shows there is more. */
@media (max-width: 767px) {
  .rail__track { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
}

/* Rails on phones: the link that opens the whole collection sits under the
   products instead of above them. The header link stays for desktop. */
.rail__more { display: none; }
@media (max-width: 767px) {
  #bestsellers .section__head .link-arrow, #new-in .section__head .link-arrow { display: none; }
  .rail__more { display: inline-flex; margin-top: var(--space-5); }
}