/* Cult Clothing Inc. - modelled on supreme.com: monospace, lowercase, black splash, white shop */
:root {
  --fg: #000;
  --bg: #fff;
  --mut: #777;
  --red: #f00;
  --tile: #f1f1f1;
  --font: "Courier New", Courier, monospace;
  --pad: 16px;
  --bar-h: 44px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font: 400 11px/1.5 var(--font); color: var(--fg); background: var(--bg); padding-bottom: calc(var(--bar-h) + 24px); overflow-wrap: break-word; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button, select { font: inherit; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -64px; z-index: 50; background: #fff; color: #000; padding: 12px 16px; border: 1px solid #000; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px dashed currentColor; outline-offset: 3px; }

/* masthead: logo box + live clock, centred */
.masthead { display: grid; justify-items: center; gap: 12px; padding: 28px var(--pad) 0; }
.logo { display: block; width: 112px; height: 112px; background: #000; padding: 0; }
.logo img { width: 100%; height: 100%; object-fit: contain; filter: invert(1); }
.clock { font-size: 11px; min-height: 1.5em; }

/* black splash */
body.home { background: #000; color: #fff; padding-bottom: 0; }
body.home .masthead { padding-top: 90px; gap: 16px; }
body.home .logo { background: #fff; }
body.home .logo img { filter: none; }
.menu { width: min(100% - 2 * var(--pad), 360px); margin: 70px auto 0; }
.menu li { margin: 0; }
.menu a { display: flex; align-items: center; min-height: 44px; font-size: 12px; text-decoration: none; }
.menu a:hover { text-decoration: underline; }
.smallprint { position: fixed; left: 0; right: 0; bottom: 18px; text-align: center; color: #aaa; font-size: 10px; }

/* main area */
main { display: block; }

/* shop strip */
.stripwrap { width: min(100% - 2 * var(--pad), 720px); margin: 56px auto 0; overflow-x: auto; padding-bottom: 10px; }
.strip { display: flex; gap: 2px; width: max-content; }
.slice { position: relative; display: block; width: 72px; height: 300px; overflow: hidden; background: var(--tile); text-decoration: none; transition: width var(--transition-slow); }
.slice .mock { position: absolute; top: 0; left: 50%; height: 100%; width: auto; transform: translateX(-50%); }
.slice:hover, .slice:focus-visible { width: 240px; }
.new { position: absolute; top: 0; right: 0; z-index: 2; background: #8d8d8d; color: #fff; font-size: 9px; line-height: 1; padding: 3px 4px; }

/* mockup */
.mock { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--tile); isolation: isolate; overflow: hidden; }
.mock .g { position: absolute; inset: 0; width: 100%; height: 100%; }
.mock .print { position: absolute; left: var(--px); top: var(--py); width: var(--pw); height: auto; mix-blend-mode: multiply; }
.mock--dark .print { filter: invert(1); mix-blend-mode: screen; }
.mock--photo { background: #fff; }
.mock--photo .g { object-fit: cover; }

/* sold out */
.new.sold { background: #000; }
.slice:has(.sold) .mock, .item:has(.sold) .mock { opacity: 0.4; }
.btn--sold { background: #fff; color: var(--mut); border: 1px solid var(--mut); cursor: not-allowed; }
.btn--sold:hover { opacity: 1; }

/* view all */
.all { width: min(100% - 2 * var(--pad), 960px); margin: 48px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
.item { position: relative; display: block; text-decoration: none; }
.item .mock { margin-bottom: 6px; }
.iname { display: block; font-weight: 700; }
.icol { display: block; color: var(--mut); }
.item:hover .iname { text-decoration: underline; }

/* product page */
.pdp { width: min(100% - 2 * var(--pad), 760px); margin: 48px auto 0; display: grid; gap: 22px; }
.pimg .mock { max-width: 460px; margin: 0 auto; }
.pinfo { display: grid; gap: 12px; align-content: start; max-width: 300px; }
.pinfo h1 { font-size: 13px; font-weight: 400; }
.pcol { font-weight: 700; }
.pdesc { max-height: 96px; overflow-y: auto; padding-right: 8px; }
.swatches { display: grid; grid-template-columns: repeat(3, 48px); gap: 8px; }
.sw { display: block; width: 48px; border: 2px solid transparent; }
.sw.on { border-color: #777; }
.pprice { font-size: 13px; }
.prow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; margin-bottom: 8px; }
select { width: 100%; height: 44px; padding: 0 8px; border: 1px solid #000; border-radius: 0; background: #fff; color: #000; text-align: center; text-align-last: center; }
.next { font-size: 11px; text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.next:hover { text-decoration: underline; }
.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 0; font-family: var(--font); font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; color: #fff; transition: opacity var(--transition-fast); }
.btn:hover { opacity: 0.85; }
.btn--red { background: var(--red); }
.btn--blk { background: #000; }
.msg { min-height: 1.5em; color: var(--red); font-weight: 700; }
.fine { color: var(--red); }

/* cart */
.cartpage { width: min(100% - 2 * var(--pad), 640px); margin: 48px auto 0; }
.cartpage h1, .text h1 { font-size: 13px; font-weight: 700; margin-bottom: 16px; }
.cartpage [hidden] { display: none; }
.crows { border-top: 1px solid #000; }
.crow { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid #ddd; align-items: start; }
.crow .mock { width: 56px; }
.cname { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.cname:hover { text-decoration: underline; }
.csub { color: var(--mut); margin-bottom: 4px; }
.cctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cctl select { width: 76px; height: 44px; }
.rm { min-width: 44px; min-height: 44px; padding: 0; background: none; border: 0; color: var(--mut); text-decoration: underline; cursor: pointer; }
.rm:hover { color: #000; }
.ctot { font-weight: 700; text-align: right; }
.subtotal { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; padding: 14px 0 6px; }
.cartpage .prow { margin-top: 14px; }

/* text pages */
.text { width: min(100% - 2 * var(--pad), 560px); margin: 48px auto 0; }
.text h2 { font-size: 11px; margin: 28px 0 8px; }
.text p { margin-bottom: 12px; }
.todo { color: var(--mut); }
.text figure { margin: 20px 0; }
.text figcaption { margin-top: 6px; }
.pair { display: grid; gap: 16px; }

/* bottom bar */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--bar-h); padding: 0 var(--pad); background: #fff; }
.bar { flex-wrap: wrap; }
.bar ul { display: flex; gap: 0; flex-wrap: wrap; }
.bar a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; font-size: 11px; text-decoration: none; }
.bar a:hover { text-decoration: underline; }

/* iOS zooms into form fields under 16px */
@media (max-width: 767px) {
  select { font-size: 16px; }
  .slice { width: 84px; }
  body:not(.home) .masthead { padding-top: 16px; gap: 8px; }
  .pdp, .all, .stripwrap, .cartpage, .text { margin-top: 24px; }
  .pimg .mock { max-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .slice { transition: none; }
}

@media (min-width: 480px) {
  .all { grid-template-columns: repeat(3, 1fr); }
  .bar a { font-size: 12px; }
}
@media (min-width: 768px) {
  :root { --pad: 28px; }
  .all { grid-template-columns: repeat(4, 1fr); }
  .pdp { grid-template-columns: 1fr 260px; align-items: start; gap: 40px; }
  .pair { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .all { grid-template-columns: repeat(5, 1fr); }
}