/* NQ x NYC premium dark theme. Loaded after every other store stylesheet.
   Same look as bandztrading.com: black page, white and silver type, chrome buttons,
   hairlines. Product photos have white backgrounds, so they sit on light "studio"
   tiles instead of the black page. html.nq-premium is the prefix so these rules
   outrank the older sheets without rewriting them. */

/* ---------- Tokens ---------- */
html.nq-premium {
  --canvas: #000;
  --paper: #0a0a0c;
  --ink: #f5f5f7;
  --muted: #8e8e94;
  --body-text: #a1a1a6;
  --line: #1d1d22;
  --line-strong: #2c2c33;
  --card: #0b0b0d;
  --studio: linear-gradient(180deg, #f7f7f8 0%, #ececef 100%);
  --tile: #f2f2f4;
  --heading: linear-gradient(180deg, #ffffff 0%, #ececf0 38%, #a4a4ac 100%);
  /* neutral silver: the purple tint on bandztrading.com is only there for Discord */
  --chrome: linear-gradient(180deg, #e2e2e6 0%, #c3c3c9 48%, #a2a2aa 100%);
  --chrome-hover: linear-gradient(180deg, #ececef 0%, #cfcfd4 48%, #b0b0b7 100%);
  --chrome-ink: #0a0a0c;
  --chrome-edge: rgba(255, 255, 255, 0.3);
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --radius: 18px;
  color-scheme: dark;
  background: var(--canvas);
  scroll-padding-top: 80px;
}
html.nq-premium body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--f-body);
  letter-spacing: -0.006em;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.nq-premium ::selection { background: rgba(255, 255, 255, 0.85); color: #000; }
html.nq-premium button:focus-visible,
html.nq-premium a:focus-visible,
html.nq-premium select:focus-visible,
html.nq-premium summary:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: 3px; }

html.nq-premium h1,
html.nq-premium h2 {
  font-family: var(--f-body);
  font-weight: 600;
  letter-spacing: -0.045em;
  background: var(--heading);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}
html.nq-premium .eyebrow {
  font: 500 11px/1.4 var(--f-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Header ---------- */
html.nq-premium .nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
  padding-bottom: 14px;
}
html.nq-premium .nav .nav-wordmark { color: #fff; font-weight: 600; letter-spacing: -0.04em; font-size: 21px; }
html.nq-premium .nav .nav-wordmark span { color: var(--muted); font-weight: 400; }
html.nq-premium .nav nav a { color: #c7c7cc; font-size: 13px; transition: color 0.2s ease; }
html.nq-premium .nav nav a:hover { color: #fff; }
html.nq-premium .bag-button {
  color: #fff;
  font-size: 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  background: rgba(255, 255, 255, 0.04);
}
html.nq-premium .bag-button span { background: #fff; color: #000; }

/* ---------- Hero ---------- */
html.nq-premium .nq-top { position: relative; background: #000; padding-bottom: 88px; text-align: center; }
html.nq-premium .nq-top::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1100px, 92vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}
/* Desktop: cap the hero so the headline and button stay above the fold. */
@media (min-width: 901px) {
  html.nq-premium .nq-top > .nq-hero { aspect-ratio: auto; height: min(32.75vw, 42vh); }
}
html.nq-premium .nq-hero--fallback { aspect-ratio: auto; height: 0; }
html.nq-premium .nq-top-copy { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 8px 20px 0; }
html.nq-premium .nq-kicker {
  margin: 0 0 18px;
  font: 500 11.5px/1 var(--f-body);
  letter-spacing: 0.24em;
  color: var(--muted);
}
html.nq-premium .nq-top h1 {
  margin: 0 auto;
  max-width: 13ch;
  font-size: clamp(54px, 6.4vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.052em;
  text-wrap: balance;
}
html.nq-premium .nq-top h1 span {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #c8c8ce 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.3));
}
html.nq-premium .nq-lede {
  max-width: 520px;
  margin: 20px auto 0;
  font-size: 19px;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--body-text);
}
html.nq-premium .nq-top-actions { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
html.nq-premium .nq-top-note { margin: 22px 0 0; font-size: 12.5px; letter-spacing: 0.02em; color: #6e6e73; }

/* ---------- Buttons ---------- */
html.nq-premium .nq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 28px;
  border-radius: 999px;
  font: 600 15.5px/1 var(--f-body);
  letter-spacing: -0.01em;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
html.nq-premium .nq-btn--chrome,
html.nq-premium .button.primary,
html.nq-premium .card-buy {
  border: 1px solid var(--chrome-edge);
  background: var(--chrome);
  color: var(--chrome-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 18px 50px -22px rgba(255, 255, 255, 0.12);
}
html.nq-premium .nq-btn--chrome:hover,
html.nq-premium .button.primary:hover:not(:disabled),
html.nq-premium .card-buy:hover {
  background: var(--chrome-hover);
  border-color: var(--chrome-edge);
  opacity: 1;
}
html.nq-premium .nq-btn--ghost { color: #fff; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); }
html.nq-premium .nq-btn--ghost:hover { border-color: #55555e; background: rgba(255, 255, 255, 0.07); }
html.nq-premium .nq-btn:active,
html.nq-premium .button:active:not(:disabled),
html.nq-premium .card-buy:active { transform: scale(0.985); }

html.nq-premium .button {
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 16px 24px;
  min-height: 50px;
}
html.nq-premium .button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
html.nq-premium .button.ghost:hover:not(:disabled) { border-color: #55555e; }
html.nq-premium button:disabled { opacity: 0.4; }
html.nq-premium .card-buy { border-radius: 999px; min-height: 42px; font-size: 13.5px; }

/* ---------- Sections ---------- */
html.nq-premium .section { padding-top: 96px; padding-bottom: 96px; }
html.nq-premium .section-heading { text-align: center; margin-bottom: 40px; }
html.nq-premium .section-heading .eyebrow { margin-bottom: 14px; }
html.nq-premium .section-heading h2 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; }
html.nq-premium .section-heading > p { color: var(--body-text); font-size: 17px; margin-top: 14px; }

/* Product grid */
html.nq-premium .products { gap: 20px; }
html.nq-premium .product-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  padding: 8px 8px 16px;
  transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
html.nq-premium .product-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
html.nq-premium .product-photo { background: var(--studio); border-radius: var(--radius); }
html.nq-premium .product-photo .model-photo { border-radius: var(--radius); }
html.nq-premium .product-label { color: #1d1d1f; }
html.nq-premium .photo-count { background: rgba(255, 255, 255, 0.85); color: #1d1d1f; border-radius: 999px; }
html.nq-premium .quick-add { background: #fff; color: #000; }
html.nq-premium .product-meta { padding: 16px 8px 0; }
html.nq-premium .product-title { color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
html.nq-premium .product-price { color: #d2d2d7; font-size: 15px; }
html.nq-premium .product-fit { color: var(--muted); font-size: 12.5px; }
html.nq-premium .card-photo-arrow { color: #1d1d1f; }

/* The set */
html.nq-premium .set-section {
  max-width: 1400px;
  margin: 0 auto;
  background: transparent;
  gap: 0;
  padding: 0 4.5%;
}
html.nq-premium .set-section > .set-pictures {
  align-self: stretch;
  max-height: none;
  background: var(--studio);
  border-radius: 28px 0 0 28px;
  padding: 24px;
}
html.nq-premium .set-section > .set-pictures img { max-height: 440px; }
html.nq-premium .set-copy {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 28px 28px 0;
}
html.nq-premium .set-copy h2 { font-size: clamp(40px, 4.4vw, 64px); }
html.nq-premium .set-copy > p:not(.eyebrow) { color: var(--body-text); font-size: 15px; max-width: 360px; }
html.nq-premium .set-copy .set-color-label { color: var(--muted); }
html.nq-premium .set-copy .set-color-label strong { color: #fff; font-weight: 500; }
html.nq-premium .bundle-options button {
  background: #111114;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
}
html.nq-premium .bundle-options button.selected { border-color: #d2d2d7; background: #17171b; box-shadow: 0 0 0 1px #d2d2d7 inset; }
html.nq-premium .bundle-options small { color: #d2d2d7; }

/* Swatches and sizes */
/* Colour dots: a light hairline so Black reads on the dark panels; White gets one too. */
html.nq-premium .swatch { border-color: #6e6e78; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
html.nq-premium .swatch.selected { border-color: #8e8e98; outline-color: #fff; }html.nq-premium .size-button { color: var(--ink); border-color: var(--line-strong); border-radius: 12px; }
html.nq-premium .size-button.selected { background: #fff; color: #000; border-color: #fff; }

/* Hat */
html.nq-premium .hat-feature { border-bottom: 0; max-width: 1400px; }
html.nq-premium .hat-feature-photo { background: var(--studio); border-radius: 28px; overflow: hidden; }
html.nq-premium .hat-feature-copy h2 { font-size: clamp(44px, 4.8vw, 70px); }
html.nq-premium .hat-feature-copy .hat-story { color: #e5e5ea; }
html.nq-premium .hat-feature-copy .hat-facts { color: var(--muted); }

/* Delivery */
html.nq-premium .delivery-info {
  max-width: 900px;
  margin: 0 auto 96px;
  padding: 48px clamp(22px, 4vw, 56px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
}
html.nq-premium .delivery-info h2 { font-size: clamp(32px, 3.6vw, 48px); margin-bottom: 28px; }
html.nq-premium .delivery-rows { border-top-color: var(--line); max-width: none; }
html.nq-premium .delivery-rows > div { border-bottom-color: var(--line); }
html.nq-premium .delivery-rows dt { color: var(--muted); }
html.nq-premium .delivery-rows dd { color: var(--ink); }

/* Footer */
html.nq-premium footer {
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 14px;
  padding: 64px 20px 72px;
}
html.nq-premium .footer-brand img { filter: invert(1); width: 200px; opacity: 0.92; margin: 0 auto 8px; }
html.nq-premium footer p,
html.nq-premium footer a:not(.footer-brand),
html.nq-premium footer > span { color: #8e8e94; font-size: 13px; }
html.nq-premium footer a:not(.footer-brand):hover { color: #fff; }

/* ---------- Dialogs ---------- */
html.nq-premium dialog { background: #0b0b0d; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 24px; }
html.nq-premium dialog::backdrop { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html.nq-premium .close { color: #fff; }
html.nq-premium .detail-gallery { background: var(--studio); }
html.nq-premium .detail-gallery .detail-visual { background: transparent; }
html.nq-premium .photo-caption { color: #6e6e73; }
html.nq-premium .gallery-thumb { color: #6e6e73; border-radius: 10px; }
html.nq-premium .gallery-thumb.selected { border-color: #1d1d1f; color: #1d1d1f; }
html.nq-premium .gallery-thumb img { background: #e4e4e8; border-radius: 7px; }
html.nq-premium .detail-copy h2,
html.nq-premium .set-dialog-content h2 { font-size: 34px; }
html.nq-premium .detail-price { color: #fff; }
html.nq-premium .fit { border-color: var(--line); }
html.nq-premium details { border-top-color: var(--line); }
html.nq-premium .size-table th,
html.nq-premium .size-table td { border-bottom-color: var(--line); }
html.nq-premium .link-button { color: var(--ink); }
html.nq-premium .bundle-gallery { background: var(--studio); color: #6e6e73; }
html.nq-premium .bundle-preview-thumbs button { color: #6e6e73; border-radius: 10px; }
html.nq-premium .bundle-preview-thumbs button.selected { border-color: #1d1d1f; color: #1d1d1f; }
/* Set dialog line thumbnails: multiply (from store.css) turned these into black squares on the
   dark dialog. White photo square, dimmed to the tile grey, normal blend. */
html.nq-premium .bundle-item-heading img {
  flex: none;
  width: 48px;
  height: 58px;
  box-sizing: border-box;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  mix-blend-mode: normal;
  filter: brightness(0.949);
}
html.nq-premium .bundle-type-switch button { color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; }
html.nq-premium .bundle-type-switch button[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
html.nq-premium .set-size-row select,
html.nq-premium #shipping-country {
  background: #111114;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
}
html.nq-premium #bag-dialog { border-radius: 24px 0 0 24px; border-right: 0; }
html.nq-premium .bag-head { border-bottom-color: var(--line); }
html.nq-premium .bag-item { border-bottom-color: var(--line); }
/* Every bag thumbnail sits on the same light tile. The product photos are opaque white
   squares that rely on multiply, which turns the whole image black against the dark bag
   (a black hoodie vanished). So the tile is drawn behind the image in an isolated group:
   multiply then blends against the tile, never the dark dialog. */
html.nq-premium .bag-item { isolation: isolate; grid-template-columns: 88px 1fr; gap: 16px; }
html.nq-premium .bag-item::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 88px;
  height: 108px;
  background: var(--tile);
  border-radius: 12px;
}
html.nq-premium .bag-item > img {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 88px;
  height: 108px;
  box-sizing: border-box;
  padding: 4px;
  object-fit: contain;
  background: transparent;
  border-radius: 12px;
  mix-blend-mode: multiply;
}
html.nq-premium .bag-item > div { grid-column: 2; grid-row: 1; min-width: 0; }
html.nq-premium .stepper button { color: var(--ink); border-color: var(--line-strong); border-radius: 8px; }
html.nq-premium .remove,
html.nq-premium .continue { color: var(--muted); }
html.nq-premium #toast { background: #fff; color: #000; border-radius: 999px; }
html.nq-premium #checkout-overlay { background: rgba(0, 0, 0, 0.92); color: var(--ink); }
html.nq-premium .checkout-spinner { border-color: var(--line-strong); border-top-color: #fff; }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  html.nq-premium .set-section { grid-template-columns: 1fr; }
  html.nq-premium .set-section > .set-pictures { border-radius: 28px 28px 0 0; }
  html.nq-premium .set-copy { border-left: 1px solid var(--line); border-top: 0; border-radius: 0 0 28px 28px; }
}

/* ---------- Phones ---------- */
@media (max-width: 650px) {
  html.nq-premium { scroll-padding-top: 118px; }
  html.nq-premium .nav { padding: 14px 20px 0; border-bottom-color: rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.78); }
  html.nq-premium .nav nav { border-top-color: rgba(255, 255, 255, 0.08); }
  html.nq-premium .nav .nav-wordmark { font-size: 20px; }
  html.nq-premium .nq-top { padding-bottom: 56px; }
  html.nq-premium .nq-kicker { font-size: 10.5px; margin-bottom: 14px; }
  html.nq-premium .nq-top h1 { font-size: clamp(44px, 13.4vw, 60px); line-height: 1; }
  html.nq-premium .nq-lede { font-size: 16px; max-width: 330px; margin-top: 14px; }
  html.nq-premium .nq-top-actions { flex-direction: column; gap: 10px; margin-top: 26px; padding: 0 4px; }
  html.nq-premium .nq-btn { width: 100%; max-width: 360px; }
  html.nq-premium .nq-top-note { font-size: 12px; }
  html.nq-premium .section { padding-top: 56px; padding-bottom: 56px; }
  html.nq-premium .section-heading { margin-bottom: 26px; }
  html.nq-premium .section-heading h2 { font-size: 40px; max-width: none; }
  html.nq-premium .section-heading > p { font-size: 14px; max-width: none; }
  html.nq-premium .products { gap: 12px; }
  html.nq-premium .product-card { padding: 5px 5px 12px; border-radius: 18px; }
  html.nq-premium .product-photo { border-radius: 14px; }
  html.nq-premium .product-meta { padding: 12px 5px 0; }
  html.nq-premium .product-title { font-size: 13.5px; min-height: 0; }
  html.nq-premium .product-price { font-size: 13.5px; }
  html.nq-premium .product-fit { font-size: 11.5px; min-height: 0; }
  html.nq-premium .card-buy { min-height: 40px; font-size: 13px; }
  html.nq-premium .set-section { padding: 0 16px; }
  html.nq-premium .set-section > .set-pictures { padding: 16px; min-height: 0; max-height: 260px; }
  html.nq-premium .set-section > .set-pictures img { max-height: 228px; }
  html.nq-premium .set-copy { padding: 30px 20px 32px; }
  html.nq-premium .set-copy h2 { font-size: 40px; }
  html.nq-premium .hat-feature { padding-top: 56px; padding-bottom: 56px; }
  html.nq-premium .hat-feature-copy { text-align: left; }
  html.nq-premium .hat-feature-copy h2 { font-size: 44px; }
  html.nq-premium .delivery-info { margin: 0 16px 56px; padding: 32px 20px; border-radius: 22px; }
  html.nq-premium footer { padding: 48px 20px 56px; display: flex; }
  html.nq-premium .footer-brand { grid-column: auto; }
  html.nq-premium .footer-brand img { width: 170px; }
  html.nq-premium #product-dialog { border-radius: 0; border: 0; }
  html.nq-premium #product-dialog .close { background: rgba(255, 255, 255, 0.9); color: #000; }
  html.nq-premium #bag-dialog { border-radius: 0; }
  html.nq-premium dialog { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html.nq-premium .product-card,
  html.nq-premium .nq-btn { transition: none; }
  html.nq-premium .product-card:hover { transform: none; }
}

/* Shipping is the same price everywhere, so the country is chosen in Stripe Checkout,
   not from a 70-country list in the bag. The US-only select stays for the bag total. */
html.nq-premium label[for="shipping-country"],
html.nq-premium #shipping-country { display: none; }

/* ---------- Bag: one-tap hat add-on ---------- */
html.nq-premium .hat-upsell { margin: 18px 0 6px; }
html.nq-premium .hat-upsell-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 14px;
}
html.nq-premium .hat-upsell-row img { flex: none; width: 48px; height: 48px; object-fit: cover; background: #fff; border-radius: 10px; filter: brightness(0.949); }
html.nq-premium .hat-upsell-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.nq-premium .hat-upsell-copy strong { color: var(--ink); font: 600 13.5px/1.25 var(--f-body); letter-spacing: -0.01em; }
html.nq-premium .hat-upsell-copy span { color: var(--body-text); font-size: 12.5px; }
html.nq-premium .hat-upsell-add {
  flex: none;
  min-width: 68px;
  min-height: 38px;
  padding: 0 18px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font: 600 13px/1 var(--f-body);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
html.nq-premium .hat-upsell-add:hover { border-color: #55555e; background: rgba(255, 255, 255, 0.07); }
html.nq-premium .hat-upsell-add:active { transform: scale(0.97); }
html.nq-premium .hat-upsell-note { margin: 8px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.4; letter-spacing: 0.01em; }

/* ---------- Reviews ---------- */
/* Real reviews only. With none yet (public/reviews.json is []), reviews.js leaves the
   one quiet line below in place. */
html.nq-premium .reviews--empty { max-width: 900px; margin: -36px auto 72px; padding: 0 20px; text-align: center; }
html.nq-premium .reviews-empty { margin: 0; color: var(--muted); font-size: 14px; letter-spacing: -0.005em; }
html.nq-premium .reviews .section-heading { justify-content: center; }
html.nq-premium .review-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
html.nq-premium .review-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
}
html.nq-premium .review-stars { color: #e2e2e6; font-size: 15px; letter-spacing: 0.14em; line-height: 1; }
html.nq-premium .review-stars .off { color: #3a3a42; }
html.nq-premium .review-text { margin: 0; color: #e5e5ea; font-size: 15px; line-height: 1.6; letter-spacing: -0.01em; overflow-wrap: anywhere; }
html.nq-premium .review-photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--studio); border-radius: var(--radius); }
html.nq-premium .review-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: auto; font-size: 12.5px; color: var(--muted); }
html.nq-premium .review-meta strong { color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }

@media (max-width: 650px) {
  html.nq-premium .reviews--empty { margin: -24px auto 48px; }
  html.nq-premium .reviews .section-heading { display: block; }
  html.nq-premium .review-list { grid-template-columns: 1fr; gap: 12px; }
  html.nq-premium .review-card { padding: 18px; border-radius: 18px; }
  html.nq-premium .hat-upsell-add { min-height: 40px; }
}

/* "All three pieces" shows the tee next to the hoodie and joggers. */
html.nq-premium .set-section > .set-pictures.has-tee { grid-template-columns: repeat(3, 1fr); gap: 8px; }
html.nq-premium .set-section > .set-pictures img[hidden] { display: none; }

/* ---------- Bag: free shipping progress ---------- */
html.nq-premium .ship-progress { margin: 16px 0 0; }
html.nq-premium .ship-progress[hidden] { display: none; }
html.nq-premium .ship-progress p { margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.3; letter-spacing: 0.01em; }
html.nq-premium .ship-progress.unlocked p { color: var(--ink); }
html.nq-premium .ship-progress-bar { height: 3px; background: var(--line-strong); border-radius: 999px; overflow: hidden; }
html.nq-premium .ship-progress-bar span { display: block; width: 0; height: 100%; background: var(--chrome); border-radius: inherit; transition: width 0.35s ease; }

/* ---------- Product view: sticky add to bag (phones only) ---------- */
html.nq-premium .sticky-add { display: none; }
@media (max-width: 640px) {
  html.nq-premium .sticky-add:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: rgba(10, 10, 12, 0.9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-strong);
  }
  html.nq-premium .sticky-add-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  html.nq-premium .sticky-add-info strong { overflow: hidden; color: var(--ink); font: 600 13.5px/1.25 var(--f-body); letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
  html.nq-premium .sticky-add-info span { color: var(--body-text); font-size: 12.5px; }
  html.nq-premium #sticky-add-button {
    flex: none;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid var(--chrome-edge);
    border-radius: 999px;
    background: var(--chrome);
    color: var(--chrome-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    font: 600 14px/1 var(--f-body);
    letter-spacing: -0.005em;
    cursor: pointer;
  }
  html.nq-premium #sticky-add-button:active { transform: scale(0.97); }
  /* keep the last lines of the product view clear of the bar */
  html.nq-premium #product-dialog .detail-copy { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ---------- Phones: 44px minimum tap targets (padding grows the hit area, not the layout) ---------- */
@media (max-width: 640px) {
  html.nq-premium .nav .brand { padding: 12px 0; margin: -12px 0; }
  html.nq-premium footer { gap: 4px; }
  html.nq-premium footer a:not(.footer-brand) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; }
  html.nq-premium #size-guide { padding-top: 4px; }
  html.nq-premium #size-guide summary { padding: 12px 0; }
  html.nq-premium #shipping-info-link { display: inline-block; padding: 14px 0; margin: -14px 0; }
}