/* Aritzia-style product listing + product page replica for the Ansley textile portfolio. */
:root {
  color-scheme: light;
  --ink: #000;
  --ink-2: #4a4a4a;
  --ink-3: #767676;
  --line: #e2e2e2;
  --ground: #fff;
  --tile: #f3f2f0;
  --gutter: clamp(16px, 2.4vw, 32px);
  --font: "Helvetica Neue", Helvetica, Arial, "Nanum Gothic", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body { font-family: var(--font); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.pf-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 14px var(--gutter); background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line); backdrop-filter: blur(6px);
}
.pf-brand { font-size: 15px; letter-spacing: .32em; font-weight: 500; text-decoration: none; }
.pf-crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.pf-crumbs a { text-decoration: none; }
.pf-crumbs a:hover { text-decoration: underline; }
.pf-crumbs [data-crumb-name] { color: var(--ink); }

/* ---------- listing (search results) ---------- */
.plp { padding: 0 var(--gutter) 64px; }
.plp-head { padding: 40px 0 20px; text-align: center; }
.plp-kicker { margin: 0 0 6px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.plp-head h1 { margin: 0; font-size: clamp(26px, 3.4vw, 40px); font-weight: 400; letter-spacing: -.01em; }
.plp-sub { margin: 10px auto 0; max-width: 560px; color: var(--ink-2); }
.plp-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 0; margin-bottom: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.plp-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.plp-tab {
  font: inherit; font-size: 12px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--ground); color: var(--ink);
}
.plp-tab[aria-selected="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.plp-count { margin: 0; font-size: 12px; color: var(--ink-3); }
.plp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 12px; }
.plp-section-title { grid-column: 1 / -1; margin: 18px 0 -12px; font-size: 13px; font-weight: 500; letter-spacing: .04em; }

.tile { text-decoration: none; display: flex; flex-direction: column; gap: 8px; }
.tile-media { position: relative; aspect-ratio: 1920 / 2623; background: var(--tile); overflow: hidden; }
.tile-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }
.tile-media img + img { opacity: 0; }
.tile:hover .tile-media img + img { opacity: 1; }
.tile-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; font-size: 12px; color: var(--ink-3); }
.tile-flag { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 3px 7px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.92); }
.tile-name { margin: 0; font-size: 13px; }
.tile-meta { margin: 0; font-size: 12px; color: var(--ink-3); }
.tile-swatches { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #cfcfcf; background: var(--tile) center / cover; }
.tile-more { font-size: 11px; color: var(--ink-3); }

/* ---------- product page ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 0 clamp(20px, 3vw, 48px); padding: 0 var(--gutter) 64px 0; }
.pdp-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; align-content: start; }
.pdp-shot { position: relative; margin: 0; aspect-ratio: 1920 / 2623; background: var(--tile); overflow: hidden; cursor: zoom-in; }
.pdp-shot img, .pdp-shot video { width: 100%; height: 100%; object-fit: cover; }
.pdp-shot figcaption { position: absolute; left: 10px; bottom: 8px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: rgba(255,255,255,.85); padding: 2px 6px; }
.pdp-shot.is-video { cursor: default; }
.pdp-empty { grid-column: 1 / -1; aspect-ratio: 2 / 1; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--ink-3); background: var(--tile); }
.pdp-info { padding-top: 28px; }
.pdp-sticky { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 72px); }
.pdp-brand { margin: 0 0 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.pdp-name { margin: 0; font-size: 22px; font-weight: 400; line-height: 1.25; }
.pdp-tagline { margin: 8px 0 0; color: var(--ink-2); }
.pdp-status { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.pdp-colour { margin: 24px 0 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.pdp-colour-label { margin: 0 0 10px; font-size: 13px; }
.pdp-colour-label span { text-transform: uppercase; }
.pdp-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid #cfcfcf; background: var(--tile) center / cover; outline-offset: 2px;
  font-size: 9px; color: var(--ink-3); overflow: hidden;
}
.swatch[aria-pressed="true"] { outline: 1.5px solid var(--ink); }
.swatch.is-empty { opacity: .45; }
.pdp-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.pdp-acc { margin-top: 20px; border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; font-size: 13px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 18px; font-weight: 300; }
.acc[open] summary::after { content: "−"; }
.acc-body { padding: 0 0 18px; color: var(--ink-2); }
.acc-body p { margin: 0 0 10px; }
.acc-body ul { margin: 0; padding-left: 18px; }
.acc-body li { margin: 0 0 4px; }
.pdp-source { margin: 18px 0 0; font-size: 12px; color: var(--ink-3); }

.pf-lightbox { padding: 0; border: 0; max-width: min(96vw, 1100px); max-height: 96vh; background: #fff; }
.pf-lightbox::backdrop { background: rgba(0, 0, 0, .72); }
.pf-lightbox img { max-height: 96vh; width: auto; margin: auto; }
.pf-lightbox-close { position: absolute; right: 8px; top: 4px; font-size: 28px; line-height: 1; border: 0; background: none; cursor: pointer; }

.pf-footer { padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-3); }
.pf-footer p { margin: 0; max-width: 820px; }

@media (max-width: 1100px) { .plp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .plp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 8px; }
  .pdp { grid-template-columns: minmax(0, 1fr); padding: 0 0 48px; }
  .pdp-gallery {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .pdp-shot { flex: 0 0 86%; scroll-snap-align: start; }
  .pdp-empty { flex: 0 0 100%; aspect-ratio: 4 / 3; }
  .pdp-info { padding: 20px var(--gutter) 0; }
  .pdp-sticky { position: static; }
}