/* ==========================================================================
   DscVision — design system
   Grounded in the trend-womenswear ecommerce archetype (White Fox, Princess
   Polly): monochrome paper/ink, one restrained accent reserved for sale,
   portrait 3:4 imagery, uppercase letter-spaced micro-labels. The clothes
   carry the colour; the interface stays out of the way.
   ========================================================================== */

:root {
  --paper:      #FBFAF8;   /* warm off-white, never pure #fff */
  --paper-2:    #F2EFEA;   /* recessed panel */
  --ink:        #14110F;   /* warm near-black, never pure #000 */
  --ink-soft:   #55504A;
  --muted:      #8C857C;
  --line:       rgba(20, 17, 15, .13);
  --line-soft:  rgba(20, 17, 15, .07);
  --sale:       #B3341F;   /* rust — sale + badges only, nothing else */

  --shell:      1560px;
  --gutter:     clamp(16px, 3.2vw, 48px);

  --micro:      .68rem;    /* uppercase labels */
  --track:      .15em;

  --ease:       cubic-bezier(.22, 1, .36, 1);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

/* Uppercase micro-label — the workhorse of this segment's typography */
.micro {
  font-size: var(--micro);
  letter-spacing: var(--track);
  text-transform: uppercase;
  font-weight: 500;
}

/* Tabular figures so prices never jitter in a grid */
.tnum { font-variant-numeric: tabular-nums; }

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

/* ============================== announcement ============================= */

/* Fixed-height stage with every message absolutely stacked and forced to one
   line. Previously only items 2–3 were absolute, so the flow item set the
   height and the longest message wrapped and clipped. */
.announce {
  background: var(--ink);
  color: var(--paper);
  padding: 0 12px;
  font-size: clamp(.55rem, 1.9vw, .66rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
}
.announce__rotator {
  position: relative;
  display: block;
  height: 34px;
  overflow: hidden;
}
.announce__item {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  white-space: nowrap;
  opacity: 0;
  animation: announceCycle 15s infinite;
}
.announce__item:nth-child(1) { animation-delay: 0s; }
.announce__item:nth-child(2) { animation-delay: 5s; }
.announce__item:nth-child(3) { animation-delay: 10s; }
@keyframes announceCycle {
  0%, 2%   { opacity: 0; transform: translateY(4px); }
  6%, 31%  { opacity: 1; transform: none; }
  35%,100% { opacity: 0; transform: translateY(-4px); }
}

/* ================================= header =============================== */

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}

.masthead__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-block: 20px;
}

.wordmark {
  grid-column: 2;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  text-indent: .34em;   /* optical centring against the trailing track */
  white-space: nowrap;
}

.masthead__util { display: flex; align-items: center; gap: 18px; }
.masthead__util--end { grid-column: 3; justify-content: flex-end; }

.iconbtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px; margin: -6px;
  border-radius: 2px;
  transition: opacity .2s var(--ease);
}
.iconbtn:hover { opacity: .55; }
.iconbtn svg { width: 19px; height: 19px; stroke-width: 1.5; }

.cartcount {
  min-width: 17px; height: 17px; padding: 0 4px;
  display: none; place-items: center;
  background: var(--ink); color: var(--paper);
  border-radius: 999px;
  font-size: .6rem; font-weight: 600; letter-spacing: 0;
}
.cartcount[data-on] { display: grid; }

/* category nav */
.catnav { border-top: 1px solid var(--line-soft); }
.catnav__list {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 34px);
  margin: 0; padding: 13px 0; list-style: none;
}
.catnav a {
  position: relative;
  font-size: var(--micro); letter-spacing: var(--track);
  text-transform: uppercase; font-weight: 500;
  padding-block: 3px;
}
.catnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.catnav a:hover::after, .catnav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.catnav a[data-sale] { color: var(--sale); }

/* ================================== hero ================================ */

.hero { position: relative; background: var(--ink); }

.hero__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(430px, 74vh, 760px);
}
.hero__half { position: relative; overflow: hidden; }
/* absolute, not height:100% — the halves have no definite height, so a
   percentage would fall back to auto and stretch the hero to the photo's
   natural 3:4 ratio, pushing the headline off screen */
.hero__half img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
  animation: heroSettle 1.6s var(--ease) forwards;
}
.hero__half:nth-child(2) img { animation-delay: .08s; }
@keyframes heroSettle { to { transform: none; } }

/* On a phone two half-width photos are ~190px each — too cramped to read as
   imagery. Drop to a single full-bleed shot and give the headline the room. */
@media (max-width: 620px) {
  .hero__split { grid-template-columns: 1fr; }
  .hero__half:nth-child(2) { display: none; }
}

.hero__plate {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center;
  text-align: center; gap: 22px;
  padding: var(--gutter);
  pointer-events: none;
}
.hero__eyebrow {
  color: rgba(251, 250, 248, .82);
  font-size: var(--micro); letter-spacing: .28em; text-transform: uppercase;
  opacity: 0; animation: riseIn .9s var(--ease) .25s forwards;
}
.hero__title {
  margin: 0;
  color: var(--paper);
  font-size: clamp(2.6rem, 8.4vw, 6.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.022em;
  text-transform: uppercase;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .32);
}
.hero__title span { display: block; opacity: 0; animation: riseIn 1s var(--ease) forwards; }
.hero__title span:nth-child(1) { animation-delay: .34s; }
.hero__title span:nth-child(2) { animation-delay: .44s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.pill {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper); color: var(--ink);
  padding: 14px 30px; border-radius: 999px;
  font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; font-weight: 600;
  opacity: 0; animation: riseIn 1s var(--ease) .56s forwards;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.pill:hover { background: var(--ink); color: var(--paper); }
.pill svg { width: 14px; height: 14px; }

/* =============================== sections =============================== */

.section { padding-block: clamp(56px, 8vw, 104px); }

.sectionhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 22px; margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}
.sectionhead h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  font-weight: 700; letter-spacing: -.02em; text-transform: uppercase;
  /* not 1 — Romanian Ș/Ț have comma-below marks that a 1.0 line box clips */
  line-height: 1.1;
}
.sectionhead__link {
  font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
  font-weight: 500; border-bottom: 1px solid var(--line); padding-bottom: 3px;
  transition: border-color .25s var(--ease);
}
.sectionhead__link:hover { border-color: var(--ink); }

/* category tiles */
/* Six categories: an explicit track count keeps them on one tidy row instead of
   auto-fit stranding a single orphan tile on a second row. */
/* Editorial rhythm rather than six identical squares: row one runs wide-narrow-
   narrow, row two flips to narrow-narrow-wide. Fixed row heights mean the wide
   tiles crop landscape and narrow ones portrait — asymmetric but strictly
   aligned, never ragged. */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(250px, 25vw, 400px);
  gap: clamp(10px, 1.4vw, 18px);
}
.tiles > :nth-child(1),
.tiles > :nth-child(6) { grid-column: span 2; }
@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 40vw, 290px); }
}
.tile { position: relative; overflow: hidden; background: var(--paper-2); }
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), filter .5s var(--ease);
}
.tile:hover img { transform: scale(1.045); }
.tile__label {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--paper); color: var(--ink);
  padding: 11px 15px;
  font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; font-weight: 600;
}
.tile__label svg { width: 13px; height: 13px; flex: none; }

/* ============================= product grid ============================= */

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.7vw, 26px) clamp(10px, 1.3vw, 20px);
}
@media (max-width: 1080px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card { display: flex; flex-direction: column; }

/* The overlays (flag, wishlist, size chips) anchor to the image frame, not the
   whole card — otherwise `bottom` resolves against the title/price block and
   the chips land on top of the price. */
.card__frame { position: relative; }

.card__media {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;                 /* matches her 1086×1448 source photos */
  background: var(--paper-2);
  display: block;
}
.card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .55s var(--ease), transform 1.2s var(--ease);
}
.card__media img.is-alt { opacity: 0; }
.card:hover .card__media img.is-main { opacity: 0; }
.card:hover .card__media img.is-alt  { opacity: 1; }
.card:hover .card__media img { transform: scale(1.035); }

.card__flag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--paper); color: var(--ink);
  padding: 5px 9px;
  font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600;
}
.card__flag[data-out] { background: var(--ink); color: var(--paper); }

.card__wish {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--ink);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.card:hover .card__wish, .card__wish:focus-visible { opacity: 1; transform: none; }
.card__wish svg { width: 17px; height: 17px; }
.card__wish[aria-pressed="true"] svg { fill: currentColor; }

/* quick size row — appears over the base of the image on hover (desktop) */
.card__sizes {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 5px;
  background: rgba(251, 250, 248, .95);
  padding: 8px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.card:hover .card__sizes { opacity: 1; transform: none; }
@media (hover: none) { .card__sizes { display: none; } }

.chip {
  flex: 1 1 auto; min-width: 34px;
  padding: 7px 6px;
  border: 1px solid var(--line);
  font-size: .63rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
  text-align: center;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:disabled { color: var(--muted); text-decoration: line-through; cursor: not-allowed; opacity: .5; }

.card__body { padding-top: 11px; display: flex; flex-direction: column; gap: 3px; }
.card__name {
  font-size: .82rem; font-weight: 500; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.card__price { font-size: .82rem; font-weight: 600; letter-spacing: .01em; }
.card__swatches { display: flex; gap: 4px; margin-top: 3px; }
.card__swatch {
  width: 11px; height: 11px; border-radius: 999px;
  border: 1px solid var(--line);
}

/* ============================== editorial =============================== */

.editorial {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--paper-2);
}
@media (max-width: 860px) { .editorial { grid-template-columns: 1fr; } }
.editorial__img { position: relative; min-height: 340px; }
.editorial__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.editorial__copy {
  display: grid; align-content: center; gap: 18px;
  padding: clamp(34px, 6vw, 82px);
}
.editorial__copy h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -.022em; text-transform: uppercase;
}
.editorial__copy p { margin: 0; color: var(--ink-soft); max-width: 46ch; }

/* service row */
.services {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 1px solid var(--line);
}
.service {
  display: grid; gap: 7px; justify-items: center; text-align: center;
  padding: 34px 20px;
  border-right: 1px solid var(--line);
}
.service:last-child { border-right: 0; }
@media (max-width: 720px) { .service { border-right: 0; border-bottom: 1px solid var(--line); } }
.service svg { width: 21px; height: 21px; stroke-width: 1.4; }
.service h3 { margin: 4px 0 0; font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; font-weight: 600; }
.service p { margin: 0; font-size: .78rem; color: var(--muted); }

/* ================================ footer =============================== */

.footer { background: var(--ink); color: var(--paper); margin-top: clamp(56px, 8vw, 96px); }
.footer__grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(26px, 4vw, 56px);
  padding-block: clamp(44px, 6vw, 78px);
}
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4 {
  margin: 0 0 15px;
  font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; font-weight: 600;
  color: rgba(251, 250, 248, .55);
}
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.footer a { font-size: .85rem; color: rgba(251, 250, 248, .88); }
.footer a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.footer__mark { font-size: 1.15rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.footer__note { font-size: .82rem; color: rgba(251, 250, 248, .6); max-width: 34ch; margin: 12px 0 0; }

.subscribe { display: flex; gap: 0; margin-top: 16px; max-width: 330px; }
.subscribe input {
  flex: 1; min-width: 0;
  background: transparent; color: var(--paper);
  border: 1px solid rgba(251, 250, 248, .3); border-right: 0;
  padding: 11px 13px; font-size: .82rem;
}
.subscribe input::placeholder { color: rgba(251, 250, 248, .45); }
.subscribe input:focus { outline: none; border-color: rgba(251, 250, 248, .7); }
.subscribe button {
  background: var(--paper); color: var(--ink);
  padding: 11px 18px;
  font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; font-weight: 600;
}

.footer__base {
  border-top: 1px solid rgba(251, 250, 248, .16);
  padding-block: 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: .74rem; color: rgba(251, 250, 248, .55);
}

/* ============================== catalog page ============================ */

.pagehead { padding-block: clamp(30px, 4.6vw, 56px) 0; }
.crumbs { font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.pagehead h1 {
  margin: 12px 0 0;
  font-size: clamp(1.9rem, 5.4vw, 3.6rem);
  font-weight: 700; letter-spacing: -.024em; text-transform: uppercase; line-height: 1.1;
}
.pagehead p { margin: 10px 0 0; color: var(--ink-soft); max-width: 56ch; }

.filterbar {
  position: sticky; top: 63px; z-index: 40;
  background: var(--paper);
  border-block: 1px solid var(--line);
  margin-top: clamp(24px, 3.4vw, 40px);
}
.filterbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 11px;
}
.filters { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter {
  flex: none;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; font-weight: 500;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.resultcount { font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (max-width: 720px) { .resultcount { display: none; } }

.sorter { position: relative; }
.sorter select {
  appearance: none;
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 34px 8px 15px;
  font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; font-weight: 500;
  cursor: pointer;
}
.sorter svg { position: absolute; right: 13px; top: 50%; translate: 0 -50%; width: 11px; pointer-events: none; }

/* skeletons + states */
.skeleton { aspect-ratio: 3 / 4; background: var(--paper-2); position: relative; overflow: hidden; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton__line { height: 11px; margin-top: 10px; background: var(--paper-2); }
.skeleton__line + .skeleton__line { width: 42%; }

.notice {
  grid-column: 1 / -1;
  padding: 54px 20px; text-align: center;
  border: 1px dashed var(--line);
  color: var(--ink-soft);
}
.notice strong { display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: var(--track); font-size: var(--micro); }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; translate: -50% 0; z-index: 90;
  background: var(--ink); color: var(--paper);
  padding: 13px 22px;
  font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; font-weight: 500;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), translate .3s var(--ease);
}
.toast[data-on] { opacity: 1; translate: -50% -6px; }

/* Deliberately no scroll-reveal. Hiding content behind an observer meant a
   missed callback could leave whole sections blank; on a storefront the product
   grid must be visible the instant it renders. Entrance motion is limited to
   the hero, where it is pure CSS and cannot fail. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ======================================================================
   ADDITIONS — richer homepage, working header actions, product page
   ====================================================================== */

/* Staggered product grid: identical cards, alternate columns dropped. Gives the
   row an editorial cadence without making anything look misaligned. */
@media (min-width: 900px) {
  .grid--stagger > :nth-child(2n) { margin-top: clamp(28px, 3.4vw, 56px); }
}

/* ------------------------------------------------------------ marquee -- */
.marquee {
  border-block: 1px solid var(--line);
  background: var(--paper-2);
  overflow: hidden;
  padding-block: 15px;
}
.marquee__track {
  display: flex; gap: 44px; width: max-content;
  animation: marqueeRun 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span {
  font-size: clamp(.8rem, 1.9vw, 1.15rem);
  font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  display: flex; align-items: center; gap: 44px; white-space: nowrap;
}
.marquee span::after { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--sale); }
@keyframes marqueeRun { to { transform: translateX(-50%); } }

/* ----------------------------------------------------------- lookbook -- */
.lookbook {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(190px, 19vw, 300px);
  gap: clamp(8px, 1vw, 14px);
}
/* 5 images across 4 columns × 2 rows: a full-height portrait on the left, then
   a wide-then-narrow pair on each row. Every cell is filled — no gaps. */
.lookbook > :nth-child(1) { grid-row: span 2; }
.lookbook > :nth-child(2),
.lookbook > :nth-child(4) { grid-column: span 2; }
@media (max-width: 780px) {
  .lookbook { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 34vw, 230px); }
  .lookbook > :nth-child(4) { grid-column: span 2; }
}
.look { position: relative; overflow: hidden; background: var(--paper-2); }
.look img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.look:hover img { transform: scale(1.05); }

/* --------------------------------------------------------- price edit -- */
.edit-band {
  display: grid; grid-template-columns: .85fr 2fr; align-items: center;
  gap: clamp(20px, 3vw, 48px);
}
@media (max-width: 900px) { .edit-band { grid-template-columns: 1fr; } }
.edit-band__copy h2 {
  margin: 0 0 12px; font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -.024em; text-transform: uppercase;
}
.edit-band__copy p { margin: 0 0 18px; color: var(--ink-soft); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.rail::-webkit-scrollbar { display: none; }

/* -------------------------------------------------------------- panel -- */
.scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 17, 15, .45);
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
}
.scrim[data-open] { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 101;
  width: min(420px, 100%);
  background: var(--paper);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .4s var(--ease);
}
.panel[data-open] { transform: none; }
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gutter); border-bottom: 1px solid var(--line);
}
.panel__head h2 { margin: 0; font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; font-weight: 600; }
.panel__body { flex: 1; overflow-y: auto; padding: var(--gutter); }
.panel__foot { border-top: 1px solid var(--line); padding: var(--gutter); display: grid; gap: 12px; }

.btn {
  display: block; width: 100%; text-align: center;
  background: var(--ink); color: var(--paper);
  padding: 15px 20px;
  font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; font-weight: 600;
  transition: opacity .25s var(--ease);
}
.btn:hover { opacity: .85; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }

.line { display: grid; grid-template-columns: 66px 1fr auto; gap: 13px; padding-block: 15px; border-bottom: 1px solid var(--line-soft); }
.line img { width: 66px; height: 88px; object-fit: cover; background: var(--paper-2); }
.line h3 { margin: 0 0 3px; font-size: .82rem; font-weight: 500; }
.line p { margin: 0; font-size: .74rem; color: var(--muted); }
.line__price { font-size: .82rem; font-weight: 600; }
.line__rm { font-size: .68rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; justify-self: start; margin-top: 6px; }
.line__rm:hover { color: var(--sale); }

.empty { text-align: center; color: var(--muted); padding: 48px 0; font-size: .85rem; }

/* ------------------------------------------------------------- search -- */
.searchwrap { position: fixed; inset: 0; z-index: 101; display: grid; align-content: start; pointer-events: none; }
.searchwrap[data-open] { pointer-events: auto; }
.searchbar {
  background: var(--paper); border-bottom: 1px solid var(--line);
  transform: translateY(-100%); transition: transform .4s var(--ease);
}
.searchwrap[data-open] .searchbar { transform: none; }
.searchbar__inner { display: flex; align-items: center; gap: 14px; padding-block: 20px; }
.searchbar input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font-size: clamp(1.1rem, 3vw, 1.8rem); font-weight: 600; letter-spacing: -.01em;
}
.searchbar input:focus { outline: none; }
.searchbar input::placeholder { color: var(--muted); }
.searchres { background: var(--paper); max-height: 62vh; overflow-y: auto; border-bottom: 1px solid var(--line); }
/* Must be keyed off the open state, not :empty — the results box always holds a
   .shell child, so :empty never matched and its 1px border rendered as a grey
   line straight across the closed header. */
.searchwrap:not([data-open]) .searchres { display: none; }

/* -------------------------------------------------------- product page -- */
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }

.pdp__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .pdp__gallery { grid-template-columns: 1fr; } }
.pdp__gallery figure { margin: 0; aspect-ratio: 3 / 4; background: var(--paper-2); overflow: hidden; }
.pdp__gallery figure:first-child:nth-last-child(odd) { grid-column: span 2; }
@media (max-width: 560px) { .pdp__gallery figure:first-child:nth-last-child(odd) { grid-column: auto; } }
.pdp__gallery img { width: 100%; height: 100%; object-fit: cover; }

.pdp__info { position: sticky; top: 128px; display: grid; gap: 18px; }
@media (max-width: 900px) { .pdp__info { position: static; } }
.pdp__info h1 { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 700; letter-spacing: -.022em; line-height: 1.05; }
.pdp__price { font-size: 1.2rem; font-weight: 600; }
.pdp__desc { color: var(--ink-soft); font-size: .92rem; }

.optset { display: grid; gap: 9px; }
.optset__label { display: flex; justify-content: space-between; align-items: baseline; }
.optrow { display: flex; flex-wrap: wrap; gap: 7px; }
.opt {
  min-width: 46px; padding: 11px 14px;
  border: 1px solid var(--line);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.opt:hover:not(:disabled) { border-color: var(--ink); }
.opt[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.opt:disabled { color: var(--muted); text-decoration: line-through; opacity: .45; cursor: not-allowed; }

.acc { border-top: 1px solid var(--line); }
.acc__row { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 15px 0;
  font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; font-weight: 600;
}
.acc__btn svg { width: 13px; transition: transform .3s var(--ease); }
.acc__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.acc__panel { display: none; padding-bottom: 16px; color: var(--ink-soft); font-size: .88rem; }
.acc__panel[data-open] { display: block; }

/* ---------------------------------------------------------------- faq -- */
.faq { display: grid; grid-template-columns: .8fr 1.4fr; gap: clamp(24px, 4vw, 72px); align-items: start; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }
.faq__intro h2 {
  margin: 10px 0 14px;
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -.024em; text-transform: uppercase;
}
.faq__intro p { margin: 0 0 16px; color: var(--ink-soft); max-width: 40ch; }
.faq .acc__btn { text-align: left; gap: 20px; }

/* ============================ mobile corrections ======================== */

/* Filter bar: on a phone the pills and the sort control fought for one line and
   the category names got clipped. Stack them — pills scroll on their own row. */
@media (max-width: 760px) {
  .filterbar__inner { flex-direction: column; align-items: stretch; gap: 10px; padding-block: 12px; }
  .filterbar__inner > div { justify-content: space-between; }
  .resultcount { display: inline; }
  .filters { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .sorter select { width: 100%; }
}

/* Product gallery: stacking every photo pushed the price and the add-to-cart
   button far below the fold. On phones it becomes a swipeable carousel with a
   peek of the next frame, so the buying controls sit right under image one. */
@media (max-width: 900px) {
  .pdp__gallery {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    gap: 8px;
  }
  .pdp__gallery::-webkit-scrollbar { display: none; }
  .pdp__gallery figure,
  .pdp__gallery figure:first-child:nth-last-child(odd) {
    flex: 0 0 84%;
    grid-column: auto;
    scroll-snap-align: center;
    aspect-ratio: 3 / 4;
  }
  .gallerynav { display: flex; }
}

.gallerynav {
  display: none;
  align-items: center; justify-content: center; gap: 7px;
  padding-top: 12px;
}
.gallerynav__dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--line); transition: background .25s var(--ease), width .25s var(--ease);
}
.gallerynav__dot[data-on] { background: var(--ink); width: 18px; }

/* =============================== legal / prose ========================== */
.legal { max-width: 760px; padding-block: clamp(28px, 4vw, 52px) clamp(48px, 7vw, 90px); }
.legal__crumbs { font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.legal__crumbs a:hover { color: var(--ink); }
.legal h1 {
  margin: 14px 0 6px;
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700; letter-spacing: -.024em; text-transform: uppercase; line-height: 1.05;
}
.legal__updated { color: var(--muted); font-size: .8rem; margin: 0 0 34px; }
.legal h2 {
  margin: 38px 0 12px;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 600; letter-spacing: -.01em;
}
.legal p, .legal li { color: var(--ink-soft); font-size: .95rem; line-height: 1.7; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 7px; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--ink); }
.legal__box {
  border: 1px solid var(--line); background: var(--paper-2);
  padding: 18px 20px; border-radius: 4px; margin: 0 0 22px;
}
.legal__box p { margin: 0; }
.legal__box strong { color: var(--ink); }

/* contact cards */
.contactgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 22px 0 8px; }
.contactcard { border: 1px solid var(--line); padding: 20px; }
.contactcard .micro { color: var(--muted); }
.contactcard a, .contactcard p { display: block; margin-top: 6px; font-size: 1rem; color: var(--ink); text-decoration: none; }
.contactcard a:hover { text-decoration: underline; }

/* footer: company identification + ANPC row */
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__company {
  border-top: 1px solid rgba(251, 250, 248, .16);
  padding-block: 16px 4px;
  font-size: .72rem; color: rgba(251, 250, 248, .5); line-height: 1.6;
}
.footer__anpc { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-block: 6px 2px; }
.footer__anpc a { font-size: .72rem; color: rgba(251, 250, 248, .6); text-decoration: underline; text-underline-offset: 2px; }
.footer__anpc a:hover { color: var(--paper); }