/* =========================================================================
   Prishtina Sneaker Culture — design system
   Monochrome Swiss grid, modelled on titoloshop.com
   ========================================================================= */

:root {
  --ink:        #0a0a0a;
  --ink-soft:   #4a4a4a;
  --muted:      #8a8a8a;
  --line:       #e4e4e4;
  --line-soft:  #f0f0f0;
  --bg:         #ffffff;
  --bg-alt:     #f6f6f4;
  --tile:       #f4f4f4;
  --field:      #efefef;
  --sale:       #d0021b;
  --ok:         #1a7f37;

  --font: 'Inter', 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', sans-serif;

  --wrap: 1800px;
  --gut: 28px;
  --card-gap: 34px;

  --nav-h: 62px;
  --bar-h: 34px;

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

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
  margin: 0 0 .6em;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 980px; }

.u-upper { text-transform: uppercase; letter-spacing: .09em; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  background: var(--ink); color: #fff; padding: 10px 16px; clip: auto; width: auto; height: auto;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  border: 1px solid var(--ink);
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.btn:hover { background: #fff; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: transparent; color: #fff; }
.btn--wide { width: 100%; }
.btn--wa { background: #1faa53; border-color: #1faa53; color: #fff; }
.btn--wa:hover { background: #fff; color: #1faa53; }
.btn[disabled] { opacity: .35; pointer-events: none; }

/* ------------------------------------------------------- announcement bar */

.topbar {
  height: var(--bar-h);
  background: var(--ink); color: #fff;
  display: flex; align-items: center;
  font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .13em;
  overflow: hidden;
}
/* The gap gives way before the messages do: at a fixed 60px the four of them
   need ~1270px and the last one loses its tail on a 1280px screen. */
.topbar__track { display: flex; align-items: center; justify-content: center; gap: clamp(26px, 3.4vw, 60px); width: 100%; }
.topbar__item { white-space: nowrap; opacity: .92; }
.topbar__item b { font-weight: 700; }
/* The four messages need ~1150px laid out in a row. Below that the bar clips
   them — silently, because it has to hide the overflow for the ticker — so the
   ticker has to start at the width the row stops fitting, not at a round 900. */
@media (max-width: 1150px) {
  .topbar__track { justify-content: flex-start; animation: ticker 22s linear infinite; }
  @keyframes ticker { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
}
@media (prefers-reduced-motion: reduce) {
  /* No animation to carry the overflow, so let the messages wrap into the bar
     instead of running off the end of it. */
  .topbar { height: auto; }
  .topbar__track { animation: none; flex-wrap: wrap; justify-content: center; gap: 6px 26px; padding-block: 7px; }
}

/* ---------------------------------------------------------------- header */

.site-header { position: sticky; top: 0; z-index: 80; background: var(--bg); border-bottom: 1px solid var(--line); }
/* One inline row: brand hard left, nav in the middle, tools right.
   The burger column only enters the grid once the nav collapses. */
.header__inner {
  height: var(--nav-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
}

.brand { display: inline-flex; flex-direction: column; line-height: 1; }
.brand__mark {
  font-size: 17px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
}
.brand__sub {
  margin-top: 4px;
  font-size: 8px; font-weight: 500; letter-spacing: .28em;
  text-transform: uppercase; color: var(--muted);
}

.nav { display: flex; justify-content: center; }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 21px 0;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  position: relative;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 16px;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav li:hover > a::after,
.nav .current-menu-item > a::after { transform: scaleX(1); }
.nav .psc-sale > a { color: var(--sale); }

/* mega / dropdown */
.nav li { position: relative; }
.nav .sub-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  display: block; min-width: 210px;
  background: #fff; border: 1px solid var(--line);
  padding: 14px 0; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  box-shadow: 0 18px 40px rgba(0,0,0,.07);
}
.nav li:hover > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav .sub-menu a { padding: 8px 22px; font-size: 11px; letter-spacing: .07em; font-weight: 500; white-space: nowrap; }
.nav .sub-menu a::after { display: none; }
.nav .sub-menu a:hover { background: var(--bg-alt); }

.header__tools { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.tool {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.tool svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.tool__count {
  min-width: 17px; height: 17px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0;
}
.burger { display: none; }
.header__left { display: none; }

/* search drawer */
.searchbar {
  border-bottom: 1px solid var(--line);
  max-height: 0; overflow: hidden;
  transition: max-height .3s var(--ease);
}
.searchbar.is-open { max-height: 140px; }
.searchbar form { display: flex; align-items: center; gap: 14px; padding: 22px 0; }
.searchbar input[type="search"] {
  flex: 1; border: 0; border-bottom: 1px solid var(--ink); background: none;
  padding: 10px 0; font-size: 19px; font-family: inherit; outline: none;
}
.searchbar input::placeholder { color: var(--muted); }

/* ------------------------------------------------------------ mobile nav */

.mobile-nav {
  position: fixed; inset: 0; z-index: 120;
  background: #fff; padding: 22px var(--gut);
  transform: translateX(-100%); transition: transform .3s var(--ease);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > ul > li > a {
  display: block; padding: 15px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
}
.mobile-nav .sub-menu { padding: 4px 0 14px 14px; }
.mobile-nav .sub-menu a { display: block; padding: 7px 0; font-size: 13px; color: var(--ink-soft); }
.mobile-nav__close { background: none; border: 0; font-size: 26px; cursor: pointer; line-height: 1; }

/* ------------------------------------------------------------------ hero */

.hero { position: relative; background: var(--ink); overflow: hidden; }
.hero__media { position: relative; height: clamp(420px, 68vh, 760px); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.hero__body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gut) 58px;
  max-width: var(--wrap); margin-inline: auto;
  color: #fff;
}
.hero__eyebrow {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .24em;
  margin-bottom: 16px; opacity: .85;
}
.hero__title {
  font-size: clamp(34px, 6.2vw, 86px);
  font-weight: 800; letter-spacing: -0.03em; line-height: .95;
  text-transform: uppercase; margin: 0 0 18px; max-width: 17ch;
}
.hero__text { max-width: 46ch; font-size: 14.5px; opacity: .9; margin: 0 0 28px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------- section headings */

/* Vertical spacing only — these classes are combined with .wrap in the markup,
   so a `padding` shorthand here would wipe out the gutter. */
.section { padding-block: 66px; }
.section--tight { padding-block: 40px; }
.section--alt { background: var(--bg-alt); }
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 30px; flex-wrap: wrap;
}
.section__title {
  font-size: clamp(19px, 2.1vw, 27px); font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; margin: 0;
}
.section__note { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.section__link {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .11em;
  border-bottom: 1px solid var(--ink); padding-bottom: 3px;
}

/* --------------------------------------------------------- product grid */

/* Cards sit in open white space, not in a hairline grid: the tile itself is the
   only box, exactly as on the reference storefront. The shop archive runs three
   up; the curated homepage rails stay four up. */
.products,
.psc-grid {
  display: grid;
  gap: 44px var(--card-gap);
  margin: 0; padding: 0; list-style: none;
}
.products { grid-template-columns: repeat(3, 1fr); }
.psc-grid { grid-template-columns: repeat(4, 1fr); }
.psc-grid--3 { grid-template-columns: repeat(3, 1fr); }

.product-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 0;
  min-width: 0;
}
.product-card__name, .product-card__brand { overflow-wrap: anywhere; }
.product-card__media {
  position: relative; display: block;
  aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--tile);
  /* Product shots are JPEGs on white, so they are multiplied into the tile:
     white drops out and the photograph sits directly on the grey. */
  isolation: isolate;
}
.product-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  /* `darken` rather than `multiply`: it drops the white studio background into
     the tile without also darkening the shots that came on light grey. */
  mix-blend-mode: darken;
  transform: scale(1.12);
  transition: opacity .35s var(--ease), transform .6s var(--ease);
}
.product-card__media .img--alt { opacity: 0; }
.product-card:hover .img--main { opacity: 0; }
.product-card:hover .img--alt { opacity: 1; }
.product-card:hover .product-card__media img { transform: scale(1.17); }

.product-card__body { padding: 22px 2px 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-card__brand {
  font-size: 11px; font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: .15em;
}
.product-card__name {
  font-size: 15.5px; font-weight: 600; color: var(--ink);
  line-height: 1.32; letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card__price { padding-top: 6px; font-size: 15px; font-weight: 400; }
.product-card__price del { color: var(--muted); margin-right: 8px; }
.product-card__price ins { color: var(--sale); text-decoration: none; }
.product-card__meta {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em;
}

.badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  padding: 4px 8px; background: var(--ink); color: #fff;
}
.badge--sale { background: var(--sale); }
.badge--new  { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.badge--soon { background: #fff; color: var(--ink); border: 1px dashed var(--ink); }
.badge--out  { background: #fff; color: var(--muted); border: 1px solid var(--line); }

.product-card__wish {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: none; border: 0; cursor: pointer; padding: 6px; line-height: 0;
  opacity: 0; transition: opacity .2s var(--ease);
}
.product-card:hover .product-card__wish { opacity: 1; }
.product-card__wish svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.4; }
.product-card__wish.is-on svg { fill: var(--sale); stroke: var(--sale); }

/* ------------------------------------------------------------ shop layout */

/* Grid and flex children default to a min-width of auto, so an intrinsically
   wide child (a product photo, a long product name) can force its track wider
   than the viewport. Every image-bearing track in this theme opts out. */
.shop > *, .pdp > *, .newsletter__inner > *, .footer__cols > * { min-width: 0; }
.products > *, .psc-grid > *, .tiles > *, .ig-strip > *,
.brandstrip > *, .trust > *, .info-grid > *, .release > * { min-width: 0; }

/* archive masthead — display title left, standfirst right */
.shop-head {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 30px 50px; align-items: end;
  padding-block: 64px 60px;
}
.shop-head__title {
  margin: 0;
  font-size: clamp(52px, 8.7vw, 166px);
  font-weight: 600; letter-spacing: -.045em; line-height: .84;
}
.shop-head__intro {
  margin: 0; max-width: 44ch; align-self: center;
  font-size: clamp(14.5px, 1.05vw, 19px); line-height: 1.68; color: var(--ink);
}

/* toolbar — filters left, count and sort right, hairline top and bottom */
.shop-toolbar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 30px; flex-wrap: wrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: 21px;
}
.filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.filters__reset {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .11em;
  color: var(--muted); border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.filters__reset:hover { color: var(--ink); }

.filter { position: relative; }
.filter__btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 16px;
  border: 1px solid #d8d8d8; background: #fff;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer;
  transition: border-color .18s var(--ease);
}
.filter__btn:hover, .filter.is-open .filter__btn { border-color: var(--ink); }
.filter__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 4px;
  background: var(--ink); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: 0;
}
.filter__chev { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .18s var(--ease); }
.filter.is-open .filter__chev { transform: rotate(180deg); }

.filter__panel {
  display: none;
  position: absolute; z-index: 70; top: calc(100% + 9px); left: 0;
  width: max-content; min-width: 250px; max-width: min(420px, calc(100vw - 2 * var(--gut)));
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .10);
  padding: 16px;
}
.filter.is-open .filter__panel { display: block; }
.filter__opts { max-height: 310px; overflow-y: auto; }

.opt {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 2px; font-size: 12.5px; cursor: pointer;
}
.opt:hover .opt__label { color: var(--ink); }
.opt input { accent-color: var(--ink); width: 14px; height: 14px; margin: 0; flex: none; }
.opt__label { color: var(--ink-soft); }
.opt__count { margin-left: auto; padding-left: 14px; font-size: 11px; color: var(--muted); }
.opt__swatch { width: 15px; height: 15px; border: 1px solid var(--line); flex: none; }

/* sizes read as a chip grid rather than as a list of checkboxes */
.filter__panel--size .filter__opts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.opt--size { position: relative; padding: 0; justify-content: center; }
.opt--size input { position: absolute; opacity: 0; pointer-events: none; }
.opt--size .opt__label {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 38px;
  border: 1px solid var(--line); font-size: 12px; font-weight: 500;
}
.opt--size input:checked + .opt__label { background: var(--ink); border-color: var(--ink); color: #fff; }
.opt--size:hover .opt__label { border-color: var(--ink); }

.filter__actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-soft);
}
.filter__clear {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .11em;
  color: var(--muted);
}
.filter__clear:hover { color: var(--ink); }
.btn--sm { padding: 11px 20px; font-size: 10px; }

.shop-toolbar__end { display: flex; align-items: center; gap: 28px; margin-left: auto; flex-wrap: wrap; }
.shop-count {
  margin: 0; font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .12em;
}
.shop-count b { color: var(--ink); font-weight: 600; }

.sortby {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 34px 0 16px; background: var(--field);
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer;
}
.sortby__label { color: var(--ink-soft); }
.sortby__select {
  position: absolute; inset: 0;
  width: 100%; height: 100%; opacity: 0; cursor: pointer;
  font: inherit; border: 0; padding: 0; margin: 0;
}
.sortby__chev {
  position: absolute; right: 14px;
  width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2;
  pointer-events: none;
}

.shop { padding-bottom: 20px; }
.shop .products { margin-top: 70px; }

.shop-empty { padding: 70px 0 20px; max-width: 46ch; }
.shop-empty__title { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.shop-empty p { color: var(--ink-soft); margin: 0 0 18px; }

.shop-help {
  display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap;
  margin-top: 60px; padding: 26px 20px; background: var(--bg-alt); text-align: center;
}
.shop-help p { margin: 0; font-size: 12.5px; color: var(--ink-soft); }

.page-head { padding-block: 40px 6px; }
.page-head h1 { font-size: clamp(24px, 3vw, 38px); text-transform: uppercase; margin: 0 0 8px; }
.page-head p { color: var(--muted); margin: 0; max-width: 62ch; font-size: 13.5px; }

.breadcrumbs { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding-block: 18px 0; }
.breadcrumbs a:hover { color: var(--ink); }

/* -------------------------------------------------------------- pagination */

.psc-pagination { display: flex; justify-content: center; gap: 6px; padding: 48px 0 0; flex-wrap: wrap; }
.psc-pagination .page-numbers {
  min-width: 38px; height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); font-size: 12px; font-weight: 600;
}
.psc-pagination .page-numbers:hover { border-color: var(--ink); }
.psc-pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ------------------------------------------------------------ single product */

.pdp { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; padding: 30px 0 70px; align-items: start; }
/* One image per row: most pairs carry two shots, and a two-up grid left the
   gallery column half empty next to the sticky info panel. */
.pdp__gallery { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pdp__gallery figure { margin: 0; background: #fff; aspect-ratio: 4/3; display: grid; place-items: center; min-width: 0; }
.pdp__gallery img { width: 100%; height: 100%; object-fit: contain; padding: 5%; }

.pdp__info { position: sticky; top: calc(var(--nav-h) + 22px); }
.pdp__brand { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 8px; }
.pdp__title { font-size: clamp(20px, 2.4vw, 30px); text-transform: uppercase; margin: 0 0 14px; letter-spacing: -0.01em; }
.pdp__price { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.pdp__price del { color: var(--muted); font-weight: 400; margin-right: 10px; }
.pdp__price ins { color: var(--sale); text-decoration: none; }
.pdp__tax { font-size: 11px; color: var(--muted); margin-bottom: 24px; }

.pdp__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 24px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.pdp__meta b { color: var(--ink); font-weight: 600; }

.size-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.size-head h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; margin: 0; }
.size-head a { font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line); }

.size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; margin-bottom: 22px; }
.size-opt { position: relative; }
.size-opt input { position: absolute; opacity: 0; pointer-events: none; }
.size-opt span {
  display: flex; align-items: center; justify-content: center;
  height: 42px; border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.size-opt input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.size-opt:hover span { border-color: var(--ink); }
.size-opt.is-out span {
  color: var(--muted); cursor: not-allowed; background: var(--bg-alt);
  text-decoration: line-through; border-color: var(--line-soft);
}
.size-opt.is-out:hover span { border-color: var(--line-soft); }
.size-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.pdp__actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.pdp__hint { font-size: 11px; color: var(--sale); min-height: 15px; }

.pdp__accordion { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: 0; padding: 17px 0; cursor: pointer;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; text-align: left;
}
.acc__btn span:last-child { font-size: 17px; font-weight: 400; line-height: 1; }
.acc__panel { display: none; padding: 0 0 20px; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.acc__item.is-open .acc__panel { display: block; }
.acc__panel ul { margin: 0; padding-left: 18px; }

.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 26px; }
.trust div { background: #fff; padding: 15px 12px; text-align: center; }
.trust svg { width: 19px; height: 19px; stroke: var(--ink); fill: none; stroke-width: 1.3; margin: 0 auto 7px; }
.trust p { margin: 0; font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }
.trust small { display: block; color: var(--muted); font-size: 9.5px; letter-spacing: .04em; text-transform: none; margin-top: 2px; font-weight: 400; }

/* ------------------------------------------------------------- editorial */

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tile { position: relative; background: #fff; overflow: hidden; aspect-ratio: 4/5; display: block; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.tile:hover img { transform: scale(1.05); }
.tile__body {
  position: absolute; inset: auto 0 0 0; padding: 26px;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
  color: #fff;
}
.tile__kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; opacity: .85; margin-bottom: 6px; }
.tile__title { font-size: 21px; font-weight: 700; text-transform: uppercase; margin: 0; letter-spacing: -0.01em; }

/* -------------------------------------------------------- release calendar */

.releases { border: 1px solid var(--line); }
.release {
  display: grid; grid-template-columns: 92px 88px 1fr auto auto;
  gap: 20px; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.release:last-child { border-bottom: 0; }
.release:hover { background: var(--bg-alt); }
.release__date { text-align: center; border-right: 1px solid var(--line); padding-right: 14px; }
.release__day { font-size: 21px; font-weight: 800; line-height: 1; }
.release__mon { font-size: 9.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-top: 3px; }
.release__thumb { aspect-ratio: 1/1; }
.release__thumb img { width: 100%; height: 100%; object-fit: contain; }
.release__brand { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.release__name { font-size: 13px; color: var(--ink-soft); text-transform: uppercase; }
.release__price { font-size: 13px; font-weight: 600; }
.release__cta { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; border: 1px solid var(--ink); padding: 9px 16px; }
.release__cta:hover { background: var(--ink); color: #fff; }

/* ------------------------------------------------------------- brand strip */

.brandstrip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.brandstrip a {
  background: #fff; padding: 24px 10px; text-align: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  transition: background .2s var(--ease);
}
.brandstrip a:hover { background: var(--ink); color: #fff; }

/* ---------------------------------------------------------------- social */

.ig-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ig-strip a { position: relative; aspect-ratio: 1/1; background: #fff; overflow: hidden; }
.ig-strip img { width: 100%; height: 100%; object-fit: contain; padding: 10%; transition: transform .5s var(--ease); }
.ig-strip a:hover img { transform: scale(1.07); }

/* -------------------------------------------------------------- newsletter */

.newsletter { background: var(--bg); color: var(--ink); border-top: 1px solid var(--line); padding: clamp(52px, 7vw, 104px) 0; }
.newsletter__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.newsletter__kicker {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .2em; color: var(--ink-soft); margin: 0 0 14px;
}
.newsletter h2 {
  font-size: clamp(26px, 3.4vw, 50px); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.06; margin: 0; text-transform: none;
}
.newsletter h2 em { font-style: italic; display: block; }
.newsletter form { display: flex; gap: 0; }
.newsletter input[type="email"] {
  flex: 1; border: 1px solid var(--line); border-right: 0; background: transparent;
  color: var(--ink); padding: 19px 20px; font-family: inherit; font-size: 14px; outline: none; min-width: 0;
}
.newsletter input::placeholder { color: var(--muted); }
.newsletter input[type="email"]:focus { border-color: var(--ink); }
.newsletter form .btn { padding-inline: 34px; }

.newsletter__consent {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 18px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-soft);
}
.newsletter__consent input { margin: 2px 0 0; width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--ink); }
.newsletter__consent a { text-decoration: underline; text-underline-offset: 2px; }
.newsletter__note:empty { display: none; }
.newsletter__note { font-size: 12px; color: var(--ok); margin-top: 12px; }

/* ------------------------------------------------------------------ footer */

.site-footer { border-top: 1px solid var(--line); padding: 58px 0 0; font-size: 12.5px; }
.footer__cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr) 1.2fr; gap: 40px; padding-bottom: 46px; }
.footer__col h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; margin: 0 0 16px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 9px; }
.footer__col a { color: var(--ink-soft); }
.footer__col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__about p { color: var(--ink-soft); margin: 0 0 14px; max-width: 34ch; line-height: 1.7; }
.footer__social { display: flex; gap: 12px; }
.footer__social a {
  width: 34px; height: 34px; border: 1px solid var(--line);
  display: grid; place-items: center;
}
.footer__social a:hover { background: var(--ink); border-color: var(--ink); }
.footer__social a:hover svg { stroke: #fff; }
.footer__social svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 1.4; }

.footer__bottom {
  border-top: 1px solid var(--line); padding: 20px 0 30px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  font-size: 11px; color: var(--muted);
}
.pay { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.pay span {
  border: 1px solid var(--line); padding: 5px 9px; font-size: 9px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}

/* ------------------------------------------------------------------ cart */

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none; margin: 18px 0; padding: 14px 18px;
  border: 1px solid var(--ink); background: var(--bg-alt);
  font-size: 12.5px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
}
.woocommerce-error { border-color: var(--sale); color: var(--sale); }

.psc-cart-item-size { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }

table.shop_table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.shop_table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  padding: 12px 10px; border-bottom: 1px solid var(--ink);
}
table.shop_table td { padding: 16px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.shop_table img { width: 62px; }

.cart-collaterals { margin-top: 36px; display: flex; justify-content: flex-end; }
.cart_totals { width: min(420px, 100%); border: 1px solid var(--line); padding: 24px; }
.cart_totals h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .11em; }

.quantity input {
  width: 62px; padding: 9px; border: 1px solid var(--line); text-align: center; font-family: inherit;
}
.coupon { display: flex; gap: 8px; margin-bottom: 18px; }
.coupon input { border: 1px solid var(--line); padding: 11px 14px; font-family: inherit; font-size: 12px; }

/* ---------------------------------------------------------------- content */

.entry { padding: 10px 0 70px; font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); }
.entry h2 { font-size: 22px; color: var(--ink); text-transform: uppercase; margin-top: 38px; }
.entry h3 { font-size: 16px; color: var(--ink); text-transform: uppercase; margin-top: 28px; }
.entry a { text-decoration: underline; text-underline-offset: 3px; }
.entry ul, .entry ol { padding-left: 20px; }
.entry li { margin-bottom: 7px; }

.faq-list { border-top: 1px solid var(--line); }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.info-grid > div { background: #fff; padding: 28px; }
.info-grid h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 10px; }
.info-grid p { margin: 0; font-size: 13px; color: var(--ink-soft); }

/* ------------------------------------------------------------ demo notice */

/* An author `display` beats the browser's own `[hidden]` rule, so the
   attribute has to be honoured here or the panel can never close. */
.demo-modal[hidden] { display: none; }

.demo-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gut);
}

.demo-modal__backdrop {
  position: absolute; inset: 0;
  border: 0; padding: 0;
  background: rgba(10, 10, 10, .62);
  cursor: pointer;
  animation: demo-modal-fade .22s var(--ease) both;
}

.demo-modal__box {
  position: relative;
  width: min(460px, 100%);
  padding: 42px 38px 34px;
  background: var(--bg);
  border: 1px solid var(--ink);
  text-align: center;
  animation: demo-modal-rise .28s var(--ease) both;
}

.demo-modal__kicker {
  margin: 0 0 20px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted);
}

.demo-modal__box h2 {
  margin: 0 0 14px;
  font-size: 20px;
  text-transform: uppercase; letter-spacing: .04em;
}

.demo-modal__text {
  margin: 0 0 28px;
  color: var(--ink-soft);
}

@keyframes demo-modal-fade { from { opacity: 0; } }
@keyframes demo-modal-rise { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 600px) {
  .demo-modal__box { padding: 34px 24px 28px; }
  .demo-modal__box h2 { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-modal__backdrop, .demo-modal__box { animation: none; }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1400px) {
  .psc-grid { grid-template-columns: repeat(3, 1fr); }
  .brandstrip { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 1100px) {
  :root { --gut: 18px; --card-gap: 22px; }
  .nav { display: none; }
  .burger { display: inline-flex; }
  .header__left { display: block; }
  .header__inner { grid-template-columns: auto 1fr auto; }
  .brand-wrap { display: flex; justify-content: center; }
  .pdp { grid-template-columns: 1fr; gap: 30px; }
  .pdp__info { position: static; }
  .shop-head { grid-template-columns: 1fr; gap: 18px; padding-block: 30px 36px; }
  .shop-head__intro { max-width: 56ch; }
  .products { grid-template-columns: repeat(2, 1fr); }
  .shop .products { margin-top: 34px; }
  .newsletter__inner { grid-template-columns: 1fr; gap: 24px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 30px; }
  .ig-strip { grid-template-columns: repeat(3, 1fr); }
  .release { grid-template-columns: 68px 64px 1fr auto; }
  .release__cta { display: none; }
}
@media (max-width: 760px) {
  .products, .psc-grid, .psc-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .shop-toolbar { gap: 14px; padding-block: 12px; }
  .shop-toolbar__end { width: 100%; justify-content: space-between; gap: 14px; }
  .filters { gap: 8px; }
  /* the panel spans the toolbar instead of its own button once space runs out */
  .filter { position: static; }
  .filter__panel { left: 0; right: 0; width: auto; max-width: none; }
  /* Narrow, not short: these are the controls the whole archive is driven
     through, so they keep a 44px tap height and give up horizontal padding
     instead. */
  .filter__btn { height: 44px; padding: 0 10px; gap: 8px; letter-spacing: .08em; }
  .sortby { height: 44px; }
  .product-card__body { padding-top: 16px; gap: 6px; }
  .product-card__name { font-size: 13.5px; }
  .product-card__price { font-size: 13px; }
  .shop-help { margin-top: 40px; }
  .tiles { grid-template-columns: 1fr; }
  .brandstrip { grid-template-columns: repeat(3, 1fr); }
  .trust { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .pdp__gallery { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
  /* Only the icons survive here, which leaves the bar a row of 17px targets.
     The icons stay the size they are drawn; the tap area around them grows. */
  .header__tools .tool span { display: none; }
  .header__inner { gap: 10px; }
  .header__tools { gap: 4px; }
  .tool { min-width: 44px; min-height: 44px; justify-content: center; }

  /* The wordmark stacks to three lines at this width. Let the bar take its
     real height rather than clip it, and pull the type in so the stack stays
     compact next to the controls. */
  .header__inner { height: auto; min-height: var(--nav-h); padding-block: 9px; }
  .brand__mark { font-size: 14px; letter-spacing: .12em; }
  .mobile-nav__close { min-width: 44px; min-height: 44px; }
  .section { padding: 44px 0; }
  .release { grid-template-columns: 56px 1fr auto; }
  .release__thumb { display: none; }
  table.shop_table thead { display: none; }
  table.shop_table tr { display: block; border-bottom: 1px solid var(--line); padding: 12px 0; }
  table.shop_table td { display: flex; justify-content: space-between; gap: 14px; border: 0; padding: 6px 0; }
  table.shop_table td::before {
    content: attr(data-title);
    font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted);
  }
  /* WooCommerce ships the thumbnail and remove cells with no data-title, so the
     label resolves to an empty string — and an empty first flex child still
     takes its half of `space-between`, throwing the photo to the far edge. */
  table.shop_table td:not([data-title])::before { content: none; }
}
@media (max-width: 420px) {
  .product-card__body { padding-top: 12px; }
  .shop-head__title { letter-spacing: -.035em; }
}

/* ------------------------------------------------------------------ touch */

/* Width tells you how much room there is; it does not tell you what is doing
   the pointing. These rules key off the input device instead, so a touch
   laptop is treated like a phone and a narrow desktop window is not. */
@media (hover: none) {
  /* Revealing a control on hover hides it outright from a finger: there is no
     hover state to enter, so the wishlist button was unreachable on a phone. */
  .product-card__wish { opacity: 1; }

  /* Text links carrying real actions, sized for a cursor. The extra height is
     tap area only — the type and the rhythm around it do not move. */
  .breadcrumbs a { display: inline-block; padding-block: 8px; }
  .psc-pagination .page-numbers { min-width: 44px; height: 44px; }
  .product-card__name { padding-block: 6px; }
  .filters__reset { display: inline-block; padding-block: 10px; }
  .newsletter input[type="email"], .newsletter form .btn { min-height: 46px; }
}

/* iOS Safari zooms the page in whenever a control you can type into takes
   focus below 16px, and never zooms back out. Applies to the typing controls
   only — a checkbox or a button never triggers it. */
@media (max-width: 900px) {
  input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
  input[type="url"], input[type="password"], input[type="number"], input[type="date"],
  select, textarea,
  /* Named again because the component rules that set their type size are more
     specific than the bare element selectors above. */
  .newsletter input[type="email"],
  .coupon input,
  .quantity input {
    font-size: 16px;
  }

  /* A 16px box is under the 24px WCAG floor and sits next to a link, so it is
     easy to miss and easy to hit by accident. */
  .newsletter__consent input { width: 24px; height: 24px; flex-basis: 24px; }
}

@media (hover: none) {
  /* Icon-only controls drawn at the size of their glyph. The glyph stays put;
     the box around it grows to something a thumb can land on. */
  .product-card__wish { padding: 13px; }
  .footer__social a { width: 44px; height: 44px; }

  /* The row title is the link that opens the release, so it carries the tap. */
  .release__name { display: inline-block; padding-block: 7px; }

  /* Between 760 and 1100 the tools keep their labels, so they are wide enough
     already — but a tablet still meets them as 17px-tall strips. */
  .tool { min-height: 44px; }

  /* WooCommerce draws these itself, at cursor scale. The password reveal is
     sized and placed in checkout.css, where the rest of its field lives. */
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
}

/* ------------------------------------------------------------ print/admin */

.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }