/*
  BIG ZAYN — shop.css
  Shared shop styles, in the order they always loaded: support chat → extras (search, wishlist,
  fit, pay your way…) → refine (type and detail refinements). Loaded after mobile.css on every
  shop page; ios.css comes last of all.
*/

/* ════════════════════════════════════════════════════════════════════
   SUPPORT CHAT (was support.css)
   ════════════════════════════════════════════════════════════════════ */
/* BIG ZAYN: support chat */

.bzchat {
  position: fixed; top: 84px; right: 32px; z-index: 1000;
  width: 380px; height: min(600px, calc(100vh - 110px));
  display: flex; flex-direction: column;
  background: var(--green, #254336); color: var(--cream, #dad3be);
  border: 1px solid rgba(218,211,190,.15); box-shadow: 0 24px 60px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease;
}
.bzchat.open { opacity: 1; pointer-events: all; transform: none; }

.bzchat__head { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 18px 12px; border-bottom: 1px solid rgba(218,211,190,.1); }
.bzchat__label { display: block; font-family: var(--font-body); font-size: 8px; letter-spacing: .3em; color: var(--red, #eb3309); margin-bottom: 3px; }
.bzchat__title { font-family: var(--font-display); font-size: 14px; letter-spacing: .14em; }
.bzchat__close { background: none; border: none; color: rgba(218,211,190,.5); font-size: 14px; cursor: pointer; padding: 4px; }
.bzchat__close:hover { color: var(--cream, #dad3be); }

.bzchat__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* First message form */
.bzchat__start { padding: 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.bzchat__intro { margin: 0; font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: rgba(218,211,190,.65); }
.bzchat__start label { display: flex; flex-direction: column; gap: 7px; font-family: var(--font-display); font-size: 8px; letter-spacing: .2em; color: rgba(218,211,190,.45); }
.bzchat__start label span { font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-size: 11px; opacity: .8; }
.bzchat__start input, .bzchat__start textarea, .bzchat__compose textarea {
  background: rgba(0,0,0,.14); border: 1px solid rgba(218,211,190,.14); color: var(--cream, #dad3be);
  font-family: var(--font-body); font-size: 14px; padding: 11px 12px; resize: none; letter-spacing: 0;
}
.bzchat__start input:focus, .bzchat__start textarea:focus, .bzchat__compose textarea:focus { outline: none; border-color: var(--cream, #dad3be); }
.bzchat__err { margin: -4px 0 0; color: var(--red, #eb3309); font-size: 12px; font-family: var(--font-body); min-height: 0; }
.bzchat__err:empty { display: none; }
.bzchat__send-btn { background: var(--cream, #dad3be); color: var(--green, #254336); border: none; padding: 14px; font-family: var(--font-display); font-size: 10px; letter-spacing: .22em; cursor: pointer; }

/* Conversation */
.bzchat__msgs { flex: 1; overflow-y: auto; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 8px; }
.bzchat__day { align-self: center; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: rgba(218,211,190,.35); margin: 6px 0; }
.bzchat__msg { max-width: 82%; display: flex; flex-direction: column; gap: 4px; }
.bzchat__msg p { margin: 0; padding: 10px 12px; font-family: var(--font-body); font-size: 14px; line-height: 1.5; word-wrap: break-word; }
.bzchat__msg span { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: rgba(218,211,190,.35); }
.bzchat__msg--customer { align-self: flex-end; align-items: flex-end; }
.bzchat__msg--customer p { background: var(--cream, #dad3be); color: var(--green, #254336); }
.bzchat__msg--admin p { border: 1px solid rgba(218,211,190,.25); }
.bzchat__note { font-family: var(--font-body); font-size: 12px; color: rgba(218,211,190,.5); text-align: center; margin: 10px 8px 0; line-height: 1.5; }
.bzchat__compose { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(218,211,190,.1); align-items: flex-end; }
.bzchat__compose textarea { flex: 1; min-height: 42px; max-height: 120px; }
.bzchat__compose button { background: var(--cream, #dad3be); color: var(--green, #254336); border: none; padding: 0 14px; height: 42px; font-family: var(--font-display); font-size: 9px; letter-spacing: .2em; cursor: pointer; }


/* Reply waiting: a dot on the support icon */
.bzchat-trigger { position: relative; }
.bzchat-has-reply::after { content: ''; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--red, #eb3309); box-shadow: 0 0 0 2px var(--green, #254336); }

@media (max-width: 640px) {
  .bzchat { inset: 0; top: 0; right: 0; width: 100%; height: 100%; height: 100dvh; border: none; transform: translateY(16px); }
  .bzchat.open { transform: none; }
  html.bzchat-lock, html.bzchat-lock body { overflow: hidden; }
}

/* Floating chat button, bottom right, on every screen size (the header icon is no longer used) */
.topbar__icons .icon-btn[aria-label="Support"] { display: none; }
.bzchat-fab {
  display: flex; align-items: center; justify-content: center;
  position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 950;
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(218,211,190,.25);
  background: var(--cream, #dad3be); color: var(--green, #254336); cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.35); transition: transform .2s ease, bottom .25s ease;
}
.bzchat-fab svg { width: 22px; height: 22px; }
.bzchat-fab:hover { transform: scale(1.05); }
.bzchat-fab:active { transform: scale(.94); }
.bzchat-fab.bzchat-has-reply::after { top: 4px; right: 4px; width: 11px; height: 11px; box-shadow: 0 0 0 2px var(--cream, #dad3be); }
/* Hidden while the chat is open, or while a full-screen panel is up */
html.bzchat-lock .bzchat-fab, html.bzsearch-lock .bzchat-fab { display: none; }

/* Desktop: the chat opens where the button was, bottom right */
@media (min-width: 641px) {
  .bzchat { top: auto; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); height: min(600px, calc(100vh - 48px)); transform: translateY(12px); }
  .bzchat.open { transform: none; }
}

@media (max-width: 768px) {
  .bzchat-fab { right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
  /* Stay clear of the product page's buy bar and the profile's tab bar */
  body:has(.buybar.show) .bzchat-fab { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  body:has(.pv2__side) .bzchat-fab { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* ════════════════════════════════════════════════════════════════════
   EXTRAS (was extras.css)
   ════════════════════════════════════════════════════════════════════ */
/* BIG ZAYN: extras (search, wishlist hearts, drop alerts, product page extras) */

/* ── Hearts ─────────────────────────────── */
.bzheart {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: none; background: none; cursor: pointer;
  color: var(--cream, #dad3be);
}
.bzheart svg { width: 20px; height: 20px; transition: transform .2s ease, fill .2s ease; }
.bzheart.on svg { fill: var(--red, #eb3309); stroke: var(--red, #eb3309); }
.bzheart.pop svg { animation: bzheart-pop .35s ease; }
@keyframes bzheart-pop { 40% { transform: scale(1.3); } }
/* On gallery cards: top right of the photo */
.bzheart--card { position: absolute; top: 8px; right: 8px; z-index: 3; width: 34px; height: 34px; background: rgba(37,67,54,.55); border-radius: 50%; }
.bzheart--card svg { width: 17px; height: 17px; }

/* ── Search ─────────────────────────────── */
.bzsearch {
  position: fixed; inset: 0; z-index: 1100; background: rgba(15,28,22,.6);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.bzsearch.open { opacity: 1; pointer-events: all; }
.bzsearch__bar, .bzsearch__results { background: var(--green, #254336); max-width: 920px; margin: 0 auto; }
.bzsearch__bar { margin-top: 72px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(218,211,190,.15); color: var(--cream, #dad3be); }
.bzsearch__bar > svg { width: 20px; height: 20px; flex: none; opacity: .6; }
.bzsearch__bar input { flex: 1; min-width: 0; background: none; border: none; color: var(--cream, #dad3be); font-family: var(--font-body); font-size: 17px; padding: 6px 0; }
.bzsearch__bar input:focus { outline: none; }
.bzsearch__bar input::-webkit-search-cancel-button { display: none; }
.bzsearch__close { background: none; border: none; color: rgba(218,211,190,.55); font-size: 14px; cursor: pointer; padding: 6px; }
.bzsearch__results { max-height: calc(100vh - 160px); overflow-y: auto; padding: 18px; }
.bzsearch__hint, .bzsearch__count { margin: 0; font-family: var(--font-body); font-size: 13px; color: rgba(218,211,190,.55); }
.bzsearch__count { font-family: var(--font-display); font-size: 8px; letter-spacing: .22em; margin-bottom: 14px; }
.bzsearch__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.bzsearch__cats a { padding: 9px 14px; border: 1px solid rgba(218,211,190,.2); color: var(--cream, #dad3be); text-decoration: none; font-family: var(--font-display); font-size: 9px; letter-spacing: .2em; }
.bzsearch__cats a:hover { border-color: var(--cream, #dad3be); }
.bzsearch__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; }
.bzsearch__item { display: flex; flex-direction: column; gap: 4px; color: var(--cream, #dad3be); text-decoration: none; }
.bzsearch__img { aspect-ratio: 3 / 4; background: rgba(0,0,0,.15); overflow: hidden; margin-bottom: 4px; }
.bzsearch__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.bzsearch__item:hover img { transform: scale(1.03); }
.bzsearch__sku { font-family: var(--font-display); font-size: 10px; letter-spacing: .14em; }
.bzsearch__meta { font-family: var(--font-body); font-size: 11px; color: rgba(218,211,190,.5); }
.bzsearch__price { font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
html.bzsearch-lock, html.bzsearch-lock body { overflow: hidden; }
@media (max-width: 640px) {
  .bzsearch { background: var(--green, #254336); }
  .bzsearch__bar { margin-top: 0; padding: 16px; }
  .bzsearch__results { max-height: calc(100dvh - 64px); padding: 16px; }
  .bzsearch__grid { grid-template-columns: 1fr 1fr; }
}

/* ── Drop alerts ────────────────────────── */
.bzdrops { border-top: 1px solid rgba(218,211,190,.15); background: var(--green, #254336); }
.bzdrops__inner { max-width: 1400px; margin: 0 auto; padding: 36px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bzdrops__label { display: block; font-family: var(--font-display); font-size: 10px; letter-spacing: .24em; color: var(--red, #eb3309); margin-bottom: 6px; }
.bzdrops__text { margin: 0; font-family: var(--font-body); font-size: 15px; color: var(--cream, #dad3be); }
.bzdrops__form { display: flex; gap: 0; flex: 0 1 420px; min-width: 0; }
.bzdrops__form input { flex: 1; min-width: 0; background: transparent; border: 1px solid rgba(218,211,190,.3); border-right: none; color: var(--cream, #dad3be); font-family: var(--font-body); font-size: 14px; padding: 13px 14px; }
.bzdrops__form input:focus { outline: none; border-color: var(--cream, #dad3be); }
.bzdrops__form button { background: var(--cream, #dad3be); color: var(--green, #254336); border: none; padding: 0 20px; font-family: var(--font-display); font-size: 9px; letter-spacing: .22em; cursor: pointer; white-space: nowrap; }
@media (max-width: 768px) {
  .bzdrops__inner { padding: 32px 24px; flex-direction: column; align-items: stretch; }
  .bzdrops__form { flex-basis: auto; }
}

/* ── Product page extras ────────────────── */
.pdx__name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pdx__name-row .detail__name { flex: 1; min-width: 0; }
.pdx__heart { flex: none; margin-top: 2px; width: 40px; height: 40px; border: 1px solid rgba(218,211,190,.2); }
.pdx__heart:hover { border-color: var(--cream, #dad3be); }
.pdx__wa { flex-basis: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; padding: 8px 0; color: rgba(218,211,190,.75); text-decoration: none; font-family: var(--font-display); font-size: 9px; letter-spacing: .2em; transition: color .2s; }
.pdx__wa:hover { color: var(--cream, #dad3be); }
.pdx__wa svg { width: 18px; height: 18px; flex: none; }

.pdx__look { max-width: 1200px; margin: 0 auto; padding: 72px 48px 24px; }
.pdx__h { font-family: var(--font-display); font-size: 14px; letter-spacing: .2em; color: var(--cream, #dad3be); margin: 0 0 24px; font-weight: 400; }
.pdx__look-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pdx__card { display: flex; flex-direction: column; color: var(--cream, #dad3be); text-decoration: none; }
.pdx__card-img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: rgba(0,0,0,.12); }
.pdx__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.pdx__card:hover .pdx__card-img img { transform: scale(1.03); }
.pdx__card-info { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 0 10px; }
.pdx__card-sku { font-family: var(--font-display); font-size: 11px; letter-spacing: .12em; }
.pdx__card-cat { grid-row: 2; font-family: var(--font-body); font-size: 11px; color: rgba(218,211,190,.5); }
.pdx__card-price { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: 'IBM Plex Mono', monospace; font-size: 12px; text-align: right; }
.pdx__add { background: none; border: 1px solid rgba(218,211,190,.3); color: var(--cream, #dad3be); font-family: var(--font-display); font-size: 9px; letter-spacing: .2em; padding: 11px; cursor: pointer; transition: border-color .2s; }
.pdx__add:hover { border-color: var(--cream, #dad3be); }
.pdx__reviews { padding-top: 64px; }
.pdx__avg { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .04em; color: rgba(218,211,190,.7); margin-left: 10px; }
@media (max-width: 768px) {
  .pdx__look { padding: 48px 20px 16px; }
  .pdx__look-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px; }
  .pdx__card { scroll-snap-align: start; }
  .pdx__card-price { grid-row: auto; grid-column: 1; text-align: left; }
}

/* ── Fit at checkout ────────────────────── */
.fit__intro { margin: -6px 0 16px; font-family: var(--font-body); font-size: 13px; color: rgba(218,211,190,.55); }
/* Fit choices: one row each, the chosen one opens underneath */
.fit__opts { display: flex; flex-direction: column; border-top: 1px solid rgba(218,211,190,.12); }
.fit__row { border-bottom: 1px solid rgba(218,211,190,.12); }
.fit__row[hidden] { display: none; }
.fit__opt { width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; background: none; border: none; color: rgba(218,211,190,.75); padding: 18px 2px; cursor: pointer; transition: color .2s; }
.fit__opt:hover { color: var(--cream, #dad3be); }
.fit__opt:focus { outline: none; }
.fit__opt:focus-visible .fit__dot { box-shadow: 0 0 0 3px rgba(218,211,190,.25); }
.fit__dot { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(218,211,190,.45); position: relative; transition: border-color .2s; }
.fit__dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--red, #eb3309); transform: scale(0); transition: transform .2s ease; }
.fit__opt.on { color: var(--cream, #dad3be); }
.fit__opt.on .fit__dot { border-color: var(--cream, #dad3be); }
.fit__opt.on .fit__dot::after { transform: scale(1); }
.fit__opt-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fit__opt b { font-family: var(--font-display); font-weight: 400; font-size: 10px; letter-spacing: .18em; }
.fit__opt em { font-style: normal; font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: rgba(218,211,190,.5); }
.fit__row .fit__panel { margin: 0 0 22px 32px; animation: fitOpen .25s ease; }
@keyframes fitOpen { from { opacity: 0; transform: translateY(-4px); } }
.fit__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fit__mode { margin-bottom: 14px; }
.fit__panel { margin-top: 18px; }
.fit__unit { display: inline-flex; border: 1px solid rgba(218,211,190,.2); margin-bottom: 14px; }
.fit__unit button { background: none; border: none; color: rgba(218,211,190,.5); font-family: var(--font-display); font-size: 8px; letter-spacing: .2em; padding: 8px 14px; cursor: pointer; }
.fit__unit button.on { background: var(--cream, #dad3be); color: var(--green, #254336); }
.fit__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fit__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fit__grid label { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-display); font-size: 8px; letter-spacing: .16em; color: rgba(218,211,190,.45); }
.fit__grid label span { font-family: var(--font-body); font-size: 10px; letter-spacing: 0; opacity: .7; }
.fit__grid input, .fit__grid select { background: rgba(218,211,190,.05); border: 1px solid rgba(218,211,190,.15); color: var(--cream, #dad3be); font-family: var(--font-body); font-size: 14px; padding: 11px 10px; width: 100%; min-width: 0; letter-spacing: 0; }
.fit__grid input:focus, .fit__grid select:focus { outline: none; border-color: var(--cream, #dad3be); }
.fit__grid select option { background: var(--green, #254336); }
.fit__hint { margin: 12px 0 0; font-family: var(--font-body); font-size: 12px; line-height: 1.6; color: rgba(218,211,190,.5); }
@media (max-width: 640px) {
  .fit__grid, .fit__grid--3 { grid-template-columns: 1fr 1fr; }
  .fit__row .fit__panel { margin-left: 0; }
}
@media (max-width: 420px) { .fit__grid--2 { grid-template-columns: 1fr; } }

/* ── Account panel for guests: WISHLIST + CLIENT LOGIN ── */
.bzacct { position: fixed; inset: 0; z-index: 1100; background: rgba(15,28,22,.45); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.bzacct.open { opacity: 1; pointer-events: all; }
.bzacct__panel {
  position: absolute; top: 76px; right: 32px; width: min(820px, calc(100vw - 64px)); max-height: calc(100vh - 110px);
  display: grid; grid-template-columns: 1.15fr 1fr; background: var(--green, #254336); color: var(--cream, #dad3be);
  border: 1px solid rgba(218,211,190,.15); box-shadow: 0 24px 60px rgba(0,0,0,.4);
  transform: translateY(-8px); transition: transform .22s ease;
}
.bzacct.open .bzacct__panel { transform: none; }
.bzacct__close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: rgba(218,211,190,.5); font-size: 14px; cursor: pointer; padding: 6px; z-index: 1; }
.bzacct__wish, .bzacct__login { padding: 32px; min-height: 0; }
.bzacct__wish { border-right: 1px solid rgba(218,211,190,.12); overflow-y: auto; }
.bzacct__h { font-family: var(--font-display); font-weight: 400; font-size: 13px; letter-spacing: .2em; margin: 0 0 20px; }
.bzacct__h sup { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0; color: var(--red, #eb3309); }
.bzacct__p { margin: 0; font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: rgba(218,211,190,.6); }
.bzacct__note { font-size: 11px; margin-top: 14px; color: rgba(218,211,190,.4); }
.bzacct__list { display: grid; gap: 14px; }
.bzacct__item { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 14px; color: inherit; text-decoration: none; }
.bzacct__img { aspect-ratio: 3 / 4; background: rgba(0,0,0,.15); overflow: hidden; }
.bzacct__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bzacct__info { display: flex; flex-direction: column; gap: 4px; padding-right: 36px; }
.bzacct__sku { font-family: var(--font-display); font-size: 10px; letter-spacing: .14em; }
.bzacct__price { font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.bzacct__add { align-self: flex-start; margin-top: 6px; background: none; border: 1px solid rgba(218,211,190,.3); color: var(--cream, #dad3be); font-family: var(--font-display); font-size: 8px; letter-spacing: .2em; padding: 8px 10px; cursor: pointer; }
.bzacct__add:hover { border-color: var(--cream, #dad3be); }
.bzacct__heart { position: absolute; top: -6px; right: -4px; }
.bzacct__login form { display: grid; gap: 10px; margin-top: 20px; }
.bzacct__login input { background: rgba(0,0,0,.14); border: 1px solid rgba(218,211,190,.2); color: var(--cream, #dad3be); font-family: var(--font-body); font-size: 15px; padding: 13px 14px; }
.bzacct__login input:focus { outline: none; border-color: var(--cream, #dad3be); }
.bzacct__login button[type=submit] { background: var(--cream, #dad3be); color: var(--green, #254336); border: none; padding: 14px; font-family: var(--font-display); font-size: 9px; letter-spacing: .22em; cursor: pointer; }
.bzacct__msg { margin: 12px 0 0; font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: rgba(218,211,190,.75); }
.bzacct__msg:empty { display: none; }
.bzacct__msg.is-err { color: var(--red, #eb3309); }
@media (max-width: 760px) {
  .bzacct__panel { inset: 0; top: 0; right: 0; width: 100%; max-height: none; height: 100dvh; grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; border: none; transform: translateY(16px); }
  .bzacct__wish { border-right: none; border-bottom: 1px solid rgba(218,211,190,.12); padding: 56px 20px 28px; overflow: visible; }
  .bzacct__login { padding: 28px 20px 40px; }
}

/* Empty bag: best sellers */
.cart-best { max-width: 1200px; margin: 0 auto; padding: 8px 48px 96px; }
.cart-best__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 768px) {
  .cart-best { padding: 0 20px 64px; }
  .cart-best__grid { grid-template-columns: 1fr 1fr; overflow: visible; margin: 0; padding: 0; }
}

/* Fit: sizes, chart, work-sheet groups */
.fit__sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fit__sizes button { min-width: 56px; background: none; border: 1px solid rgba(218,211,190,.2); color: rgba(218,211,190,.7); font-family: var(--font-display); font-size: 11px; letter-spacing: .14em; padding: 12px 14px; cursor: pointer; }
.fit__sizes button.on { border-color: var(--cream, #dad3be); background: var(--cream, #dad3be); color: var(--green, #254336); }
.fit__link { background: none; border: none; padding: 0; margin: 0 0 14px; color: rgba(218,211,190,.75); font-family: var(--font-display); font-size: 9px; letter-spacing: .2em; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.fit__chart { margin-bottom: 16px; }
.fit__table-wrap { overflow-x: auto; }
.fit__table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 12px; }
.fit__table th, .fit__table td { padding: 8px 10px; border-bottom: 1px solid rgba(218,211,190,.1); text-align: center; white-space: nowrap; }
.fit__table th { font-family: var(--font-display); font-size: 9px; letter-spacing: .16em; font-weight: 400; color: rgba(218,211,190,.6); }
.fit__table td:first-child, .fit__table th:first-child { text-align: left; color: rgba(218,211,190,.7); }
.fit__group { margin-bottom: 18px; }
.fit__group[hidden] { display: none; }
.fit__group-h { margin: 0 0 10px; font-family: var(--font-display); font-size: 9px; letter-spacing: .22em; color: var(--red, #eb3309); }
.fit__how { margin-top: 16px; font-family: var(--font-body); font-size: 12px; color: rgba(218,211,190,.6); }
.fit__how summary { cursor: pointer; font-family: var(--font-display); font-size: 9px; letter-spacing: .2em; color: rgba(218,211,190,.75); }
.fit__how ul { margin: 10px 0; padding-left: 18px; line-height: 1.7; }
.fit__how b { color: var(--cream, #dad3be); font-weight: 400; }
/* Boxes line up even when some labels have a hint underneath */
.fit__grid label > input, .fit__grid label > select { margin-top: auto; }
.fit__grid label span { display: block; margin-top: -2px; }

/* Fit after payment (confirmation page) */
.fit { margin: 8px 0 0; padding: 0; text-align: left; }
.fit__label { display: block; font-family: var(--font-display); font-size: 9px; letter-spacing: .24em; color: var(--red, #eb3309); }
.fit__title { font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: .12em; color: var(--cream, #dad3be); margin: 10px 0 10px; }
.fit .fit__intro { margin: 0 0 18px; }
.fit__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; }
.fit__save { background: var(--cream, #dad3be); color: var(--green, #254336); border: none; padding: 15px 26px; font-family: var(--font-display); font-size: 10px; letter-spacing: .22em; cursor: pointer; }
.fit__skip { background: none; border: none; padding: 6px 0; color: rgba(218,211,190,.6); font-family: var(--font-display); font-size: 9px; letter-spacing: .2em; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.fit__skip:hover { color: var(--cream, #dad3be); }
@media (max-width: 640px) {
  .fit__save { width: 100%; }
  .fit__actions { gap: 14px; }
}

/* Pay your way (product page + bag) */
.bzpay { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(218,211,190,.12); flex-basis: 100%; }
.bzpay__k { font-family: var(--font-display); font-size: 8px; letter-spacing: .24em; color: rgba(218,211,190,.5); }
.bzpay__opts { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.bzpay__opts span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 12px; color: rgba(218,211,190,.8); white-space: nowrap; }
.bzpay__opts svg { width: 15px; height: 15px; flex: none; opacity: .75; }
.cart-checkout-btn + .bzpay { margin-top: 16px; }

/* ════════════════════════════════════════════════════════════════════
   REFINE (was refine.css)
   ════════════════════════════════════════════════════════════════════ */
/*
  BIG ZAYN — refine.css
  Design refinements layered on top of the original styles (loaded last on every page).
  Same colours, same display font — this file only sharpens readability and details.
*/

:root {
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --muted:     rgba(218, 211, 190, 0.66);  /* secondary text — readable on green */
  --faint:     rgba(218, 211, 190, 0.48);  /* labels, captions */
  --line:      rgba(218, 211, 190, 0.14);
  --panel:     #1c3326;                    /* darker green behind images */
}

/* =============================================
   1. TECHNICAL LABELS — monospace, like garment tags
   Codes, numbers and prices read as data; headings keep the display font.
   ============================================= */
.para__num,
.stamp__sub,
.gallery-header__label,
.gallery-header__count,
.gallery-item__num,
.gallery-item__name,
.gallery-item__sku,
.gallery-item__price,
.price-usd,
.detail__breadcrumb,
.detail__tag,
.detail__price,
.detail__sku-stamp,
.spec-label,
.cart-page__label,
.cart-page__count,
.cart-item__tag,
.cart-item__sku,
.cart-item__price,
.cart-summary__row,
.qty-num,
.co-item__qty,
.co-item__price,
.confirmation__ref-num,
.order-card__ref,
.swipe-label {
  font-family: var(--font-mono);
  font-weight: 400;
}

.para__num            { font-size: 12px; letter-spacing: 0.08em; }
.stamp__sub           { font-size: 10px; letter-spacing: 0.14em; color: var(--faint); }
.gallery-header__label{ font-size: 11px; letter-spacing: 0.16em; }
.gallery-header__count{ font-size: 11px; letter-spacing: 0.14em; color: var(--muted); }
.gallery-item__num    { font-size: 11px; letter-spacing: 0.08em; }
.gallery-item__name   { font-size: 13px; letter-spacing: 0.06em; }
.gallery-item__sku    { font-size: 11px; letter-spacing: 0.06em; color: var(--faint); }
.gallery-item__price  { font-size: 13px; letter-spacing: 0.02em; }
.price-usd            { font-size: 0.85em; color: var(--faint); letter-spacing: 0; }
.detail__breadcrumb   { font-size: 11px; letter-spacing: 0.12em; color: var(--faint); }
.detail__breadcrumb a { color: var(--muted); }
.detail__tag          { font-size: 11px; letter-spacing: 0.14em; }
.detail__price        { font-size: 24px; font-weight: 500; letter-spacing: 0; }
.spec-label           { font-size: 11px; letter-spacing: 0.12em; color: var(--faint); }
.spec-value           { font-size: 13px; }
.cart-page__label     { font-size: 11px; letter-spacing: 0.16em; }
.cart-page__count     { font-size: 11px; letter-spacing: 0.14em; color: var(--muted); }
.cart-item__tag       { font-size: 11px; letter-spacing: 0.14em; }
.cart-item__sku       { font-size: 11px; letter-spacing: 0.06em; color: var(--faint); }
.cart-item__price     { font-weight: 500; letter-spacing: 0; }
.cart-summary__row    { font-size: 12px; letter-spacing: 0.06em; color: var(--muted); }
.cart-summary__row--total { font-size: 16px; font-weight: 500; color: var(--cream); }

/* =============================================
   2. CONTRAST — secondary text was ~30% opacity, hard to read
   ============================================= */
.brand__tagline,
.new-arrivals__sub,
.reviews__sub,
.cart-continue,
.cart-item__remove,
.thumb span {
  color: var(--faint);
}
.cart-continue:hover,
.cart-item__remove:hover { color: var(--cream); }
.topnav ul li a { color: var(--muted); }

/* =============================================
   3. HOMEPAGE
   ============================================= */
/* Page order: New Arrivals (top, clears the fixed header) → Manifesto → Reviews */
.new-arrivals { padding-top: 170px; }
.manifesto    { padding-top: 40px; }
@media (max-width: 1024px) {
  .new-arrivals { padding-top: 150px; }
  .manifesto    { padding-top: 32px; }
}
@media (max-width: 768px) {
  .new-arrivals { padding-top: 104px; }
  .manifesto    { padding-top: 24px; }
}

/* New arrivals use the full width and show code + price like the gallery */
.new-arrivals {
  max-width: 1200px;
  scroll-margin-top: 140px;
}
/* 3 across: each category gives 3 pieces, so rows always come out full */
.new-arrivals__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.new-arrivals__grid .gallery-item__info { padding: 14px 4px 20px; }

@media (max-width: 768px) {
  .new-arrivals { padding-left: 0; padding-right: 0; scroll-margin-top: 80px; }
  .new-arrivals__header { padding: 0 20px; }
  .new-arrivals__grid { grid-template-columns: repeat(2, 1fr); }
  .new-arrivals__grid .gallery-item__info { padding: 10px 8px 16px; flex-direction: column; gap: 4px; }
}

/* Reviews — care labels: each testimony printed like a garment tag */
.reviews__inner { max-width: 1200px; overflow: visible; user-select: auto; -webkit-user-select: auto; }
.reviews__header { margin-bottom: 32px; }
/* Same grid as New Arrivals: 3 across, 2px gaps, same edges */
.tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
.tags__more {
  margin-top: 24px;
  background: none;
  border: 1px solid rgba(218, 211, 190, 0.25);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 10px 16px;
  cursor: pointer;
}
.tags__more:hover { border-color: var(--cream); }

.tag {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--green);
  padding: 30px 22px 20px;
}
/* punched hole, like a hang tag */
.tag__hole {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--green);
}
.tag__quote {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 4;   /* rule: max 4 lines on a tag, the rest is in READ MORE */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tag__quote { margin: 4px 0 16px; font-size: 16px; }
.tag__more {
  align-self: flex-start;
  margin: -8px 0 16px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--green);
  opacity: 0.7;
  cursor: pointer;
}
.tag__more:hover { opacity: 1; }
.tag__meta {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  row-gap: 4px;
  margin: auto 0 0;   /* pinned to the bottom so tags in a row line up */
  padding-top: 12px;
  border-top: 1px dashed rgba(37, 67, 54, 0.35);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.tag__meta dt { opacity: 0.55; }
.tag__meta dd { margin: 0; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag__meta .tag__stars { color: var(--red); letter-spacing: 0.12em; }
.tag__order {
  align-self: flex-start;
  margin-top: 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--red);
  padding: 0 0 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--red);
  cursor: pointer;
}
.tag__order:hover { color: var(--green); border-color: var(--green); }

@media (max-width: 900px) {
  .tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .reviews__inner { padding: 0 20px; }
}


/* =============================================
   4. GALLERY CARDS
   ============================================= */
.gallery-item__image-wrap { background: var(--panel); }
.gallery-item__cta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; }
.gallery-item__quickadd { color: var(--muted); }
.gallery-item__quickadd:hover { color: var(--cream); }

/* =============================================
   5. PRODUCT PAGE
   ============================================= */
/* Image box matches the photo's 3:4 shape — no white bars */
.detail__image-wrap {
  background: var(--panel);
  aspect-ratio: 3 / 4;
  height: 100%;
  width: auto;
  max-width: 100%;
  justify-self: center;
}
.detail__image { object-fit: cover; }


/* Made-to-measure explainer under the buttons */


/* Product qty stepper (also used in the bag) */
.qty-wrap { border: 1px solid rgba(218, 211, 190, 0.2); }
.qty-btn {
  background: none;
  border: none;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.qty-btn:hover { background: rgba(218, 211, 190, 0.1); }
.qty-num { width: 36px; text-align: center; font-size: 13px; color: var(--cream); }
.qty-wrap { display: flex; align-items: center; width: fit-content; }

/* Mobile: full-width 3:4 photo, sticky buy bar */
@media (max-width: 768px) {
  .detail__image-wrap {
    height: auto;
    max-height: none;
    width: 100%;
    background: var(--panel);
  }
  .detail__image { object-fit: cover; }
  .swipe-label { color: var(--cream); font-size: 10px; letter-spacing: 0.12em; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
}

.buybar { display: none; }
@media (max-width: 768px) {
  .buybar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--green);
    border-top: 1px solid var(--line);
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  .buybar.show { transform: translateY(0); }
  .buybar__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .buybar__sku { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--faint); }
  .buybar__price { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--cream); }
  .buybar__btn {
    flex-shrink: 0;
    background: var(--cream);
    color: var(--green);
    border: none;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.2em;
    padding: 14px 20px;
    cursor: pointer;
  }
}

/* =============================================
   6. BAG
   ============================================= */
.cart-item__img-wrap { background: var(--panel); }
.cart-item__img { object-fit: cover; }
.cart-checkout-btn { white-space: nowrap; }

/* =============================================
   7. THE RED TAG — one signature red element per piece
   (was red text on the photo — unreadable on red/brown backgrounds)
   ============================================= */
.gallery-item__num {
  top: 12px;
  left: 12px;
  background: var(--red);
  color: var(--cream);
  padding: 3px 7px 2px;
  font-size: 10px;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

/* Empty sub-labels were leaving a gap at the end of section lines */
.new-arrivals__sub:empty,
.reviews__sub:empty { display: none; }

/* =============================================
   8. NAV INSIDE THE TOP BAR (wide screens)
   logo — categories — icons, on one line. site.js moves .topnav into .topbar;
   below this width it stays a second bar as before.
   ============================================= */
@media (min-width: 1200px) {
  .topbar .topnav {
    position: static;
    flex: 1;
    display: flex;
    justify-content: center;
    background: none;
    border: none;
    padding: 0 24px;
    min-width: 0;
  }
  .topbar .topnav ul li a { padding: 8px 14px; }
  .topbar .topnav ul li a.active { border-bottom-color: var(--red); }

  /* The header is one bar shorter now, so pull page content up to match */
  body.has-inline-nav .new-arrivals   { padding-top: 124px; }
  body.has-inline-nav .gallery-header { padding-top: 134px; }
  body.has-inline-nav .detail         { padding-top: 102px; }
  body.has-inline-nav .cart-page,
  body.has-inline-nav .checkout,
  body.has-inline-nav .faq-page,
  body.has-inline-nav .legal-page     { padding-top: 102px; }
  body.has-inline-nav .confirmation   { padding-top: 114px; }
  body.has-inline-nav .cart-summary__inner { top: 102px; }
}

/* New arrivals = shop window: photo + category tag only, CTA on hover */
.gallery-item--window .gallery-item__cta { background: var(--green); padding: 6px 10px 5px; }
/* Touch screens can't hover, so the label stays hidden there — tapping opens the collection */
@media (hover: none) {
  .gallery-item--window .gallery-item__cta { display: none; }
}

/* =============================================
   9. FEWER LINES
   Only the header and footer edges keep a hairline; the decorative rules
   beside section titles and under every card are gone.
   ============================================= */
.stamp__line,
.new-arrivals__line,
.reviews__line,
.gallery-divider { display: none; }

.gallery-item__info { border-bottom: none; }
.stamp__sub { margin-left: auto; }
.gallery-header { padding-bottom: 40px; }


/* =============================================
   10. POPUPS — full review, pieces in an order
   ============================================= */
.bz-modal { max-width: 520px; padding: 36px 32px 28px; background: #1e3829; }
.bz-modal__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--faint);
  margin: 0 0 18px;
}
.bz-modal__stars { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; color: var(--red); margin: 0 0 14px; }
.bz-modal__quote {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--cream);
  white-space: pre-line;
  margin: 0 0 24px;
}
.bz-modal__meta {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  row-gap: 4px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(218, 211, 190, 0.2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.bz-modal__meta dt { color: var(--faint); }
.bz-modal__meta dd { margin: 0; color: var(--cream); text-transform: uppercase; }
.bz-modal__link {
  margin-top: 20px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--red);
  padding: 0 0 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cream);
  cursor: pointer;
}
.bz-modal__link:hover { color: var(--red); }
.bz-modal__muted { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }

.bz-pieces { display: flex; flex-direction: column; }
.bz-piece {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(218, 211, 190, 0.08);
}
.bz-piece__img { display: block; aspect-ratio: 3 / 4; background: var(--panel); overflow: hidden; }
.bz-piece__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bz-piece__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bz-piece__name { font-family: var(--font-mono); font-size: 13px; color: var(--cream); }
.bz-piece__name:hover { color: var(--red); }
.bz-piece__price { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

.bz-piece__add,
.bz-pieces__addall {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 10px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.bz-piece__add { background: none; border: 1px solid rgba(218, 211, 190, 0.35); color: var(--cream); }
.bz-piece__add:hover { border-color: var(--cream); }
.bz-pieces__all {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
}
.bz-pieces__total { font-family: var(--font-mono); font-size: 12px; color: var(--cream); }
.bz-pieces__addall { background: var(--cream); border: 1px solid var(--cream); color: var(--green); }
.bz-pieces__addall:hover { background: var(--red); border-color: var(--red); color: var(--cream); }
.bz-piece__add.is-added,
.bz-pieces__addall.is-added { background: none; border-color: transparent; color: var(--red); cursor: default; }
.bz-pieces__bag {
  align-self: flex-end;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cream);
  border-bottom: 1px solid var(--red);
  padding-bottom: 2px;
}

@media (max-width: 560px) {
  .bz-modal { padding: 32px 20px 24px; }
  .bz-piece { grid-template-columns: 56px minmax(0, 1fr); }
  .bz-piece__add { grid-column: 2; justify-self: start; padding: 8px 12px; }
  .bz-pieces__all { flex-direction: column; align-items: stretch; }
  .bz-pieces__addall { padding: 14px; }
}

/* Bag counter on the bag icon — here too so pages without cart.css (homepage) show it */
.icon-btn { position: relative; }
.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* =============================================
   11. REVIEW TAGS — same size every time, green with cream text
   ============================================= */
.tag {
  --ink: var(--cream);
  background: var(--panel);
  color: var(--ink);
}
/* Text area is always exactly 4 lines tall, whether the review is 3 words or 3 pages */
.tag__quote {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  height: calc(16px * 1.55 * 4);
  color: var(--ink);
}
/* Unused READ MORE / VIEW ORDER keep their space so every tag lines up */
.tag .is-off { visibility: hidden; }

.tag__hole { background: var(--green); }
.tag__more { color: var(--muted); margin: 0 0 16px; opacity: 1; }
.tag__more:hover { color: var(--cream); }
.tag__meta { border-top-color: rgba(218, 211, 190, 0.18); color: var(--ink); }
.tag__meta dt { color: var(--faint); opacity: 1; }
.tag__order { color: var(--cream); border-bottom-color: var(--red); }
.tag__order:hover { color: var(--red); border-color: var(--red); }

/* Review tag header: name + check (left), gold stars (right) */
.tag__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.tag__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag__check { flex-shrink: 0; }
.tag__rating {
  flex-shrink: 0;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: #e8b931;   /* gold */
}

/* Phone: two tags across, like New Arrivals — name above the stars, tighter type */
@media (max-width: 560px) {
  .tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tag { padding: 24px 12px 14px; }
  .tag__hole { top: 8px; width: 6px; height: 6px; margin-left: -3px; }
  .tag__top { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 10px; }
  .tag__name { font-size: 10px; letter-spacing: 0.04em; max-width: 100%; }
  .tag__rating { font-size: 12px; }
  .tag__quote { font-size: 13px; height: calc(13px * 1.55 * 4); margin: 0 0 10px; }
  .tag__more { font-size: 10px; margin-bottom: 10px; }
  .tag__meta { grid-template-columns: 44px minmax(0, 1fr); font-size: 10px; letter-spacing: 0.02em; padding-top: 10px; }
  .tag__order { font-size: 10px; margin-top: 10px; }
}

/* =============================================
   12. REVIEW CARDS — page green, framed in orange
   ============================================= */
.tags { gap: 16px; }
.tag {
  background: var(--green);
  border: 1px solid var(--red);
  padding: 22px 22px 20px;
}
.tag__meta { border-top: none; padding-top: 0; }
.tag__order,
.bz-modal__link {
  border-bottom: none;
  padding-bottom: 0;
  color: var(--cream);
}
.tag__order:hover,
.bz-modal__link:hover { color: var(--red); }
.bz-modal { --ink: var(--cream); }
.bz-modal .tag__top { margin-bottom: 18px; }
.bz-modal__meta { border-top: none; padding-top: 0; }

/* "ALL REVIEWS" link at the right of the homepage heading */
.reviews__all {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--cream);
  transition: color 0.2s;
}
.reviews__all:hover { color: var(--red); }

/* reviews.html */
.reviews-page { padding: 0 48px 120px; }
.reviews-page__status { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--faint); padding: 40px 0; }
.reviews-page .tags__more { display: block; margin: 32px auto 0; }
#reviewsEnd { height: 1px; }

@media (max-width: 768px) {
  .reviews-page { padding: 0 16px 60px; }
  .tags { gap: 10px; }
}
@media (max-width: 560px) {
  .tag { padding: 16px 12px 14px; }
}

/* Order ref + date stacked, no labels */
.tag__meta,
.bz-modal__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-transform: uppercase;
}
.tag__meta span:last-child,
.bz-modal__meta span:last-child { color: var(--faint); }

/* Text is trimmed in reviews.js so "… READ MORE" ends the 4th line — no CSS clamp */
.tag__quote {
  display: block;
  -webkit-line-clamp: unset;
  overflow: hidden;
}
.tag__quote .tag__more {
  display: inline;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.tag__quote .tag__more:hover { color: var(--cream); }

/* Order ref faint like the date */
.tag__meta span,
.bz-modal__meta span { color: var(--faint); }

/* =============================================
   13. LOADING SHAPES — empty tiles while the first load is on its way
   ============================================= */
.gallery-item--skeleton { pointer-events: none; }
.gallery-item--skeleton .gallery-item__image-wrap,
.sk-line { animation: bz-pulse 1.4s ease-in-out infinite; }
.sk-line {
  display: block;
  width: 90px;
  height: 10px;
  margin-bottom: 8px;
  background: rgba(218, 211, 190, 0.08);
}
.sk-line--short { width: 60px; }
@keyframes bz-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .gallery-item--skeleton .gallery-item__image-wrap, .sk-line { animation: none; }
}

/* Phones: the manifesto heading stacks, so the BIG ZAYN / … / LAGOS line sits left under it */
@media (max-width: 768px) {
  .stamp__sub { margin-left: 0; align-self: flex-start; }
}

/* Sale price: old price struck through, new price in brand red */
.price-was { color: rgba(218,211,190,0.45); text-decoration-thickness: 1px; margin-right: 4px; font-weight: 400; }
.price-now { color: #eb3309; }

/* Chat reviews (reviews.js): quote beside a small screenshot, same card height as written ones */
.tag__body { display: flex; gap: 14px; align-items: flex-start; }
.tag__body .tag__quote { flex: 1; min-width: 0; }
.tag__shot {
  flex: none; padding: 0; border: 0; cursor: zoom-in; background: none;
  height: calc(16px * 1.55 * 4); aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden;
  transition: transform .25s ease;
}
.tag__shot:active { transform: scale(.96); }
/* Zoomed in on the chat itself: the frame's quote and logo are already on the card */
.tag__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.25); transform-origin: 50% 57%; }
.bz-modal__chat { display: block; width: 100%; max-height: min(62vh, 760px); object-fit: contain; border-radius: 14px; margin: 0 0 16px; }
.bz-modal__meta a { color: inherit; }
@media (max-width: 560px) {
  .tag__body { gap: 8px; }
  .tag__shot { height: calc(13px * 1.55 * 4); border-radius: 8px; }
}
/* Chat cards: date on the first meta line (no "CLIENT" line), same faint colour as written cards' date */
.tag__meta .tag__date { color: var(--faint); }
.tag__meta span.is-off { visibility: hidden; }
/* Picture-only chat card (no quote): the chat fills the quote space, same height as every card */
.tag__body--shot .tag__shot { width: 100%; aspect-ratio: auto; margin: 4px 0 16px; }
.tag__body--shot .tag__shot img { transform: scale(1.4); transform-origin: 50% 52%; }
@media (max-width: 560px) { .tag__body--shot .tag__shot { margin: 0 0 10px; } }