/* ==========================================================================
   ATLETIKA — Layout: announcement bar, header, navigation, footer
   ========================================================================== */

/* Body lock while a drawer/modal is open. Padding compensates for the
   scrollbar so the page does not shift sideways. */
body[data-locked="true"] { overflow: hidden; padding-inline-end: var(--scrollbar-w, 0px); }

/* ==========================================================================
   ANNOUNCEMENT BAR
   ========================================================================== */
.announce {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--announce-h);
  padding-inline: var(--gutter);
  background: var(--c-ink);
  color: var(--c-on-inverse);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  text-align: center;
}

/* ==========================================================================
   HEADER
   56px, sticky. Hides on scroll-down, returns on scroll-up (JS toggles
   data-hidden). On the homepage it starts transparent over the hero and
   turns solid once the hero scrolls past (data-solid).
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-surface);
  color: var(--c-ink);
  border-block-end: var(--bw) solid var(--c-line);
  transition: transform        var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard),
              color            var(--dur-base) var(--ease-standard),
              border-color     var(--dur-base) var(--ease-standard);
}
.header[data-hidden="true"] { transform: translateY(-100%); }

/* Transparent variant — homepage only, before the hero scrolls out. */
.header--overlay { position: fixed; inset-inline: 0; }
.header--overlay[data-solid="false"] {
  background: transparent;
  color: var(--c-on-inverse);
  border-color: transparent;
}
.header--overlay[data-solid="false"] .header__inner { --c-focus: var(--c-on-inverse); }
/* Light photography: ink text over the image instead of white — Louis
   Vuitton's `-header-theme-dark` pattern. Set data-header-theme="dark" on
   the header when the hero's top region is light.                          */
.header--overlay[data-solid="false"][data-header-theme="dark"] { color: var(--c-ink); }
.header--overlay[data-solid="false"][data-header-theme="dark"] .header__inner { --c-focus: var(--c-ink); }

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.header__left  { display: flex; align-items: center; gap: var(--s-2); justify-self: start; }
.header__right { display: flex; align-items: center; gap: var(--s-1); justify-self: end; }
.header__logo  { font-size: 20px; display: inline-flex; align-items: center; min-height: 44px; }

.header__nav { display: none; }
@media (min-width: 1024px) {
  .header__nav { display: flex; gap: var(--s-8); }
  .header__burger { display: none; }
}
.header__nav a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-size: var(--t-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
}

/* Cart count bubble — the one place the header speaks in a number. */
.header__cart { position: relative; }
.header__count {
  position: absolute;
  top: 6px; right: 4px;
  box-sizing: border-box;
  min-width: 16px; height: 16px;
  padding-inline: 4px;
  display: inline-grid; place-items: center;
  background: var(--c-ink);
  color: var(--c-on-inverse);
  border: var(--bw) solid var(--c-surface);   /* separates it from the icon */
  border-radius: var(--radius-full);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
}
.header__count > span { color: inherit; }
/* Over a dark image (white-text overlay header) the bubble inverts. */
.header--overlay[data-solid="false"]:not([data-header-theme="dark"]) .header__count {
  background: var(--c-on-inverse); color: var(--c-ink); border-color: transparent;
}
.header__count[data-count="0"] { display: none; }

/* ==========================================================================
   MEGA MENU  (desktop)
   Opens on hover with a 120ms intent delay (JS) and on focus/click for
   keyboard users. Full-width panel below the header.
   ========================================================================== */
.mega {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--c-surface);
  color: var(--c-ink);
  border-block-end: var(--bw) solid var(--c-line);
  box-shadow: var(--shadow-menu);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-quick) var(--ease-standard),
              transform var(--dur-quick) var(--ease-standard),
              visibility 0s linear var(--dur-quick);
}
.mega[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-10);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s-10) var(--gutter) var(--s-12);
}
.mega__group { display: flex; flex-direction: column; gap: var(--s-3); }
.mega__title { margin-block-end: var(--s-1); }
.mega__group a { font-size: var(--t-base); line-height: var(--lh-base); }
.mega__group a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.mega__feature { grid-column: span 2; }

/* ==========================================================================
   MOBILE NAV  (drawer--left)
   ========================================================================== */
.mnav { display: flex; flex-direction: column; }
.mnav__item {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px;
  border-block-end: var(--bw) solid var(--c-line);
  font-size: var(--t-lg);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-tight);
}
.mnav__sub { display: flex; flex-direction: column; padding-inline-start: var(--s-4); }
.mnav__sub a { display: flex; align-items: center; min-height: 48px; font-size: var(--t-body); color: var(--c-ink-secondary); }
#mnav .drawer__body { display: flex; flex-direction: column; }
/* Account and wishlist live here on mobile (the header keeps search + bag). */
.mnav__meta {
  margin-block-start: auto;
  padding-block-start: var(--s-6);
  display: flex; flex-direction: column;
  font-size: var(--t-sm); color: var(--c-ink-muted);
}
.mnav__meta-links { display: flex; flex-direction: column; margin-block-end: var(--s-4); border-block: var(--bw) solid var(--c-line); }
.mnav__meta-links a {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 52px;
  font-size: var(--t-base); color: var(--c-ink);
  border-block-end: var(--bw) solid var(--c-line);
}
.mnav__meta-links a:last-child { border-block-end: 0; }
.mnav__meta-links svg { width: 20px; height: 20px; flex: none; }
.mnav__meta-foot { display: flex; flex-direction: column; gap: var(--s-3); }

/* ==========================================================================
   SEARCH OVERLAY  — does not exist on the current site at all
   ========================================================================== */
.search {
  position: fixed;
  inset-inline: 0; top: 0;
  z-index: var(--z-drawer);
  background: var(--c-surface);
  border-block-end: var(--bw) solid var(--c-line);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-drawer),
              visibility 0s linear var(--dur-base);
}
.search[data-open="true"] { transform: none; visibility: visible; transition-delay: 0s; }
.search__inner { max-width: 880px; margin-inline: auto; padding: var(--s-8) var(--gutter) var(--s-10); }
.search__form { display: flex; align-items: center; gap: var(--s-3); border-block-end: var(--bw) solid var(--c-ink); }
.search__input {
  flex: 1;
  min-height: 56px;
  border: 0;
  background: transparent;
  font-size: var(--t-xl);
  font-weight: var(--fw-regular);
  letter-spacing: var(--track-tight);
}
.search__input:focus-visible { outline: none; }
.search__form:focus-within { border-color: var(--c-ink); }
.search__results { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-block-start: var(--s-6); }
@media (max-width: 767px) { .search__results { grid-template-columns: repeat(2, 1fr); } }
.search__hint { margin-block-start: var(--s-4); font-size: var(--t-xs); color: var(--c-ink-muted); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { border-block-start: var(--bw) solid var(--c-line); margin-block-start: var(--section-gap); }
.footer__inner { padding-block: var(--s-16) var(--s-8); }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-10);
}
@media (min-width: 768px)  { .footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-8); } }
.footer__col { display: flex; flex-direction: column; gap: var(--s-3); }
.footer__col a { font-size: var(--t-base); color: var(--c-ink-secondary); }
.footer__col a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.footer__news { display: flex; flex-direction: column; gap: var(--s-4); max-width: 380px; }
.footer__news-form { display: flex; border-block-end: var(--bw) solid var(--c-ink); }
.footer__news-form .input { border: 0; padding-inline-start: 0; }
.footer__news-form .input:focus-visible { outline: none; }
.footer__news-form:focus-within { border-block-end-width: var(--bw-thick); }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  margin-block-start: var(--s-12);
  padding-block-start: var(--s-6);
  border-block-start: var(--bw) solid var(--c-line);
  font-size: var(--t-xs);
  color: var(--c-ink-muted);
}
.footer__bottom .cluster { --cluster-gap: var(--s-4); }

/* Payment marks — official provider SVGs where available (assets/img/pay),
   text badges for the two without freely hosted artwork (Swedbank,
   Citadele — replace with the banks' own assets in the theme). */
.paymarks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.paymark--img { height: 24px; width: auto; max-width: 64px; border: 0; padding: 0; object-fit: contain; }
.paymark {
  display: inline-flex; align-items: center;
  height: 24px; padding-inline: var(--s-2);
  border: var(--bw) solid var(--c-line-strong);
  font-size: var(--t-3xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-ink-secondary);
}

/* ==========================================================================
   USP BAND — factual, not urgency
   ========================================================================== */
.usp { display: grid; grid-template-columns: 1fr; gap: var(--s-6); padding-block: var(--s-8); border-block: var(--bw) solid var(--c-line); }
@media (min-width: 768px) { .usp { grid-template-columns: repeat(3, 1fr); } }
.usp__item { display: flex; gap: var(--s-4); align-items: flex-start; }
.usp__item svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.usp__title { font-size: var(--t-xs); font-weight: var(--fw-medium); letter-spacing: var(--track-ui); text-transform: uppercase; }
.usp__text  { font-size: var(--t-sm); color: var(--c-ink-muted); margin-top: var(--s-1); }

/* ==========================================================================
   PRODUCT GRID
   2 → 3 (768) → 4 (1280). Row gap ≫ column gap — the pattern across
   Totême (32/0), Jacquemus (3–5px) and Acne: the grid reads as one
   continuous sheet of imagery rather than a wall of cards.
   ========================================================================== */
.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-8) var(--s-1);
}
@media (min-width: 768px)  { .products { grid-template-columns: repeat(3, 1fr); gap: var(--s-10) var(--s-2); } }
@media (min-width: 1280px) { .products { grid-template-columns: repeat(4, 1fr); gap: var(--s-12) var(--s-2); } }

/* Editorial rhythm — Bottega Veneta's 9-tile cycle. Every ninth cycle
   opens with a double-width tile, so the grid never settles into a
   repeating rectangle. Opt-in per listing.                                  */
@media (min-width: 1280px) {
  .products--editorial > :nth-child(9n + 1) { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .products--editorial > :nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; }
}

/* Horizontal product rail (homepage, cross-sell). Scroll-snaps on touch,
   shows arrows on pointer devices. */
.rail { position: relative; }
.rail__track {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  -webkit-overflow-scrolling: touch;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { flex: 0 0 68%; scroll-snap-align: start; }
@media (min-width: 480px)  { .rail__track > * { flex-basis: 40%; } }
@media (min-width: 1024px) { .rail__track > * { flex-basis: calc(25% - var(--s-3)); } .rail__track { gap: var(--s-4); } }
.rail__arrows { display: none; gap: var(--s-1); }
@media (hover: hover) and (pointer: fine) { .rail__arrows { display: flex; } }