/*
 * Site-theme section styles (issue #103 — phase B0).
 *
 * Loaded by the theme editor canvas, the admin preview page and (from C4) the
 * storefront, so a section looks identical in all three. Every value comes from
 * a --wn-* custom property emitted by tokensToCssVars — no hardcoded colors.
 *
 * Conventions: mobile-first, tap targets >= 44px, images always carry an
 * aspect-ratio so nothing shifts while loading.
 */

.wn-scope {
  font-family: var(--wn-font-body);
  color: #111827;
  background: var(--wn-color-surface);
}

.wn-section {
  box-sizing: border-box;
  padding: calc(var(--wn-space) * 2) var(--wn-space);
}

.wn-container {
  width: 100%;
  max-width: var(--wn-container);
  margin: 0 auto;
}

.wn-section h2,
.wn-section h3 {
  font-family: var(--wn-font-heading);
  margin: 0;
}

.wn-section-title {
  font-size: calc(1.5rem * var(--wn-font-scale));
  line-height: 1.25;
  text-align: center;
}

.wn-section-subtitle {
  margin-top: calc(var(--wn-space) / 2);
  color: var(--wn-color-muted);
  font-size: calc(0.95rem * var(--wn-font-scale));
  text-align: center;
}

.wn-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--wn-radius);
  background: #f3f4f6;
}

.wn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 calc(var(--wn-space) * 1.25);
  border: 0;
  border-radius: var(--wn-radius);
  background: var(--wn-color-primary);
  color: var(--wn-color-on-primary);
  font-family: var(--wn-font-heading);
  font-size: calc(0.95rem * var(--wn-font-scale));
  cursor: pointer;
}

/* ---------- trust badges ---------- */

.wn-trust-badges .wn-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--wn-space) * 1.5);
  margin-top: calc(var(--wn-space) * 1.5);
}

@media (min-width: 768px) {
  .wn-trust-badges .wn-trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.wn-trust-item {
  text-align: center;
}

.wn-trust-icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto calc(var(--wn-space) * 0.75);
  object-fit: contain;
  aspect-ratio: 1 / 1;
}

.wn-trust-item h3 {
  font-size: calc(1rem * var(--wn-font-scale));
  line-height: 1.3;
}

.wn-trust-item p {
  margin: calc(var(--wn-space) / 4) 0 0;
  color: var(--wn-color-muted);
  font-size: calc(0.875rem * var(--wn-font-scale));
  line-height: 1.5;
}

/* ---------- reviews ---------- */

.wn-reviews-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--wn-space) / 2);
  margin-top: var(--wn-space);
  font-size: calc(1rem * var(--wn-font-scale));
}

.wn-reviews-count {
  color: var(--wn-color-muted);
}

.wn-stars {
  color: var(--wn-color-accent);
  letter-spacing: 1px;
  white-space: nowrap;
}

.wn-stars-empty {
  opacity: 0.25;
}

.wn-reviews-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wn-space);
  margin-top: calc(var(--wn-space) * 1.5);
}

@media (min-width: 640px) {
  .wn-reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .wn-reviews-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.wn-review-card {
  padding: var(--wn-space);
  border: 1px solid var(--wn-color-border);
  border-radius: var(--wn-radius);
  background: var(--wn-color-surface);
}

.wn-review-head {
  display: flex;
  align-items: center;
  gap: calc(var(--wn-space) / 2);
  margin-bottom: calc(var(--wn-space) / 2);
}

.wn-review-avatar {
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  background: #f3f4f6;
}

.wn-review-avatar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wn-font-heading);
  color: var(--wn-color-muted);
  text-transform: uppercase;
}

.wn-review-name {
  font-family: var(--wn-font-heading);
  font-size: calc(0.95rem * var(--wn-font-scale));
}

.wn-review-verified {
  font-size: calc(0.75rem * var(--wn-font-scale));
  color: var(--wn-color-muted);
}

.wn-review-card p {
  margin: calc(var(--wn-space) / 2) 0 0;
  font-size: calc(0.9rem * var(--wn-font-scale));
  line-height: 1.6;
}

/* ---------- bundle / upsell ---------- */

.wn-bundle-badge {
  margin-top: calc(var(--wn-space) / 2);
  color: var(--wn-color-accent);
  font-size: calc(0.9rem * var(--wn-font-scale));
  text-align: center;
}

.wn-bundle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: calc(var(--wn-space) / 2);
  margin-top: calc(var(--wn-space) * 1.5);
}

.wn-bundle-item {
  width: 140px;
  text-align: center;
}

.wn-bundle-thumb-empty {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--wn-color-border);
  border-radius: var(--wn-radius);
}

.wn-bundle-name {
  margin-top: calc(var(--wn-space) / 2);
  font-size: calc(0.875rem * var(--wn-font-scale));
  line-height: 1.4;
}

.wn-bundle-price {
  margin-top: calc(var(--wn-space) / 4);
  font-size: calc(0.875rem * var(--wn-font-scale));
}

.wn-bundle-price s {
  margin-left: 6px;
  color: var(--wn-color-muted);
}

.wn-bundle-plus {
  align-self: center;
  color: var(--wn-color-muted);
  font-size: calc(1.25rem * var(--wn-font-scale));
}

.wn-bundle-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--wn-space);
  margin-top: calc(var(--wn-space) * 1.5);
  font-size: calc(1rem * var(--wn-font-scale));
}

.wn-bundle-total s {
  margin-left: 6px;
  color: var(--wn-color-muted);
}

.wn-bundle-saving {
  color: var(--wn-color-accent);
}

/* ---------- size chart ---------- */

.wn-size-details {
  max-width: 720px;
  margin: var(--wn-space) auto 0;
  border: 1px solid var(--wn-color-border);
  border-radius: var(--wn-radius);
}

.wn-size-summary {
  min-height: 44px;
  padding: calc(var(--wn-space) * 0.75) var(--wn-space);
  cursor: pointer;
  font-family: var(--wn-font-heading);
  font-size: calc(1rem * var(--wn-font-scale));
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wn-size-summary::after {
  content: '▾';
  color: var(--wn-color-muted);
}

.wn-size-details[open] .wn-size-summary::after {
  content: '▴';
}

.wn-size-table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--wn-color-border);
}

.wn-size-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(0.875rem * var(--wn-font-scale));
}

.wn-size-table th,
.wn-size-table td {
  padding: calc(var(--wn-space) / 2) calc(var(--wn-space) * 0.75);
  border-bottom: 1px solid var(--wn-color-border);
  text-align: left;
  white-space: nowrap;
}

.wn-size-table thead th {
  font-family: var(--wn-font-heading);
  text-transform: capitalize;
}

.wn-size-info {
  margin: 0;
  padding: calc(var(--wn-space) * 0.75) var(--wn-space);
  color: var(--wn-color-muted);
  font-size: calc(0.8125rem * var(--wn-font-scale));
}

/* ---------- product detail (POD) ---------- */

.wn-pdp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--wn-space) * 1.5);
}

@media (min-width: 900px) {
  .wn-pdp-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.wn-pdp-main {
  aspect-ratio: 1 / 1;
}

.wn-pdp-thumbs {
  display: flex;
  gap: calc(var(--wn-space) / 2);
  margin-top: calc(var(--wn-space) / 2);
  overflow-x: auto;
}

.wn-pdp-thumb {
  flex: 0 0 auto;
  width: 72px;
  padding: 0;
  border: 1px solid var(--wn-color-border);
  border-radius: var(--wn-radius);
  background: none;
  cursor: pointer;
}

.wn-pdp--thumbs-left .wn-pdp-gallery {
  display: flex;
  flex-direction: row-reverse;
  gap: calc(var(--wn-space) / 2);
}

.wn-pdp--thumbs-left .wn-pdp-thumbs {
  flex-direction: column;
  margin-top: 0;
  overflow-x: visible;
}

.wn-pdp--grid .wn-pdp-thumbs {
  flex-wrap: wrap;
}

.wn-pdp--grid .wn-pdp-thumb {
  width: calc(33.333% - var(--wn-space) / 3);
}

.wn-pdp-title {
  margin: 0;
  font-family: var(--wn-font-heading);
  font-size: calc(1.75rem * var(--wn-font-scale));
  line-height: 1.2;
}

.wn-pdp-price {
  display: flex;
  align-items: baseline;
  gap: calc(var(--wn-space) / 2);
  margin-top: var(--wn-space);
  font-size: calc(1.25rem * var(--wn-font-scale));
}

.wn-pdp-sale {
  color: var(--wn-color-accent);
}

.wn-pdp-price s {
  color: var(--wn-color-muted);
  font-size: calc(1rem * var(--wn-font-scale));
}

.wn-pdp-badge {
  padding: 2px 8px;
  border-radius: calc(var(--wn-radius) / 2);
  background: var(--wn-color-accent);
  color: var(--wn-color-on-primary);
  font-size: calc(0.75rem * var(--wn-font-scale));
}

.wn-pdp-block {
  margin-top: calc(var(--wn-space) * 1.25);
}

.wn-pdp-label {
  margin-bottom: calc(var(--wn-space) / 2);
  font-family: var(--wn-font-heading);
  font-size: calc(0.9375rem * var(--wn-font-scale));
}

.wn-pdp-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--wn-space) / 2);
}

.wn-swatch {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--wn-color-border);
  border-radius: 50%;
  background: #f3f4f6;
  cursor: pointer;
}

.wn-swatch-selected {
  outline: 2px solid var(--wn-color-primary);
  outline-offset: 2px;
}

.wn-pdp-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--wn-space) / 2);
}

.wn-size-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 calc(var(--wn-space) * 0.75);
  border: 1px solid var(--wn-color-border);
  border-radius: var(--wn-radius);
  background: var(--wn-color-surface);
  font-family: var(--wn-font-body);
  font-size: calc(0.9375rem * var(--wn-font-scale));
  cursor: pointer;
}

.wn-size-pill-selected {
  border-color: var(--wn-color-primary);
  box-shadow: inset 0 0 0 1px var(--wn-color-primary);
}

.wn-size-extra {
  color: var(--wn-color-muted);
  font-size: calc(0.75rem * var(--wn-font-scale));
}

.wn-pdp-cta {
  width: 100%;
  margin-top: calc(var(--wn-space) * 1.5);
}

.wn-pdp-note {
  margin: calc(var(--wn-space) / 2) 0 0;
  color: var(--wn-color-muted);
  font-size: calc(0.875rem * var(--wn-font-scale));
  line-height: 1.5;
}

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

.wn-announcement {
  background: var(--wn-color-primary);
  color: var(--wn-color-on-primary);
  font-size: calc(0.875rem * var(--wn-font-scale));
}

.wn-announcement-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(var(--wn-space) / 2);
  min-height: 44px;
  padding: calc(var(--wn-space) / 2) var(--wn-space);
  text-align: center;
}

.wn-announcement-link {
  color: inherit;
  text-decoration: underline;
}

/* ---------- countdown ---------- */

.wn-countdown-discount {
  margin-top: calc(var(--wn-space) / 2);
  color: var(--wn-color-accent);
  font-family: var(--wn-font-heading);
  text-align: center;
}

.wn-countdown-clock {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--wn-space) / 2);
  margin-top: var(--wn-space);
}

.wn-countdown-part {
  min-width: 64px;
  padding: calc(var(--wn-space) / 2);
  border: 1px solid var(--wn-color-border);
  border-radius: var(--wn-radius);
  text-align: center;
}

.wn-countdown-value {
  display: block;
  font-family: var(--wn-font-heading);
  font-size: calc(1.5rem * var(--wn-font-scale));
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.wn-countdown-label {
  display: block;
  margin-top: 2px;
  color: var(--wn-color-muted);
  font-size: calc(0.6875rem * var(--wn-font-scale));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- faq ---------- */

.wn-faq-list {
  max-width: 820px;
  margin: var(--wn-space) auto 0;
}

.wn-faq-item {
  border-bottom: 1px solid var(--wn-color-border);
}

.wn-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: calc(var(--wn-space) * 0.75) 0;
  cursor: pointer;
  font-family: var(--wn-font-heading);
  font-size: calc(1rem * var(--wn-font-scale));
  list-style: none;
}

.wn-faq-question::after {
  content: '+';
  margin-left: var(--wn-space);
  color: var(--wn-color-muted);
}

.wn-faq-item[open] .wn-faq-question::after {
  content: '–';
}

.wn-faq-answer {
  padding: 0 0 calc(var(--wn-space) * 0.75);
  color: var(--wn-color-muted);
  font-size: calc(0.9375rem * var(--wn-font-scale));
  line-height: 1.6;
}

.wn-trust-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto calc(var(--wn-space) * 0.75);
  border: 1px dashed var(--wn-color-border);
  border-radius: 50%;
  color: var(--wn-color-muted);
  font-size: 0.75rem;
}


/* ==========================================================================
 * Built-in section icons.
 *
 * A trust badge with no artwork used to render the literal word "icon", which is
 * what every seeded theme looked like. These are the fallback: a block sets
 * `icon: 'shield'` and gets a real mark.
 *
 * Drawn with mask-image rather than <img src>, because an image cannot inherit a
 * colour — masked, the shape is cut out of `--wn-color-primary`, so the icons
 * change with the theme like everything else. A badge that has a real `src` still
 * renders as an <img>; this only fills the gap.
 *
 * The SVGs are inline so there is no extra request and nothing to host, and they
 * are stroke-only: the mask reads alpha, so the stroke becomes the visible shape.
 * ========================================================================== */

.wn-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto calc(var(--wn-space) * 0.75);
  background-color: var(--wn-color-primary);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Secure checkout / payment safety. */
.wn-icon-shield {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7.5 3v5.25c0 4.5-3 7.9-7.5 9.5-4.5-1.6-7.5-5-7.5-9.5V6L12 3z"/><path d="M8.75 12.25l2.25 2.25 4.25-4.5"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7.5 3v5.25c0 4.5-3 7.9-7.5 9.5-4.5-1.6-7.5-5-7.5-9.5V6L12 3z"/><path d="M8.75 12.25l2.25 2.25 4.25-4.5"/></svg>');
}

/* Returns and exchanges. */
.wn-icon-returns {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 15L3.5 9.5 9 4"/><path d="M3.5 9.5H15a5.5 5.5 0 010 11h-3.5"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 15L3.5 9.5 9 4"/><path d="M3.5 9.5H15a5.5 5.5 0 010 11h-3.5"/></svg>');
}

/* Printed / made to order. */
.wn-icon-print {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 8V3.5h10V8"/><path d="M5.5 8h13a2 2 0 012 2v5.5H17V21H7v-5.5H3.5V10a2 2 0 012-2z"/><path d="M7 15.5h10"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 8V3.5h10V8"/><path d="M5.5 8h13a2 2 0 012 2v5.5H17V21H7v-5.5H3.5V10a2 2 0 012-2z"/><path d="M7 15.5h10"/></svg>');
}

/* Shipping and tracking. */
.wn-icon-truck {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.5h11v9h-11z"/><path d="M13.5 9.5h4l4 3.5v2.5h-8z"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.5h11v9h-11z"/><path d="M13.5 9.5h4l4 3.5v2.5h-8z"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>');
}

/* Privacy / data. */
.wn-icon-lock {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7.5 10.5V8a4.5 4.5 0 019 0v2.5"/><rect x="4.5" y="10.5" width="15" height="9.5" rx="2"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7.5 10.5V8a4.5 4.5 0 019 0v2.5"/><rect x="4.5" y="10.5" width="15" height="9.5" rx="2"/></svg>');
}

/* Help / support. */
.wn-icon-support {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 5.5h17v11H9l-5.5 4z"/><path d="M9.5 9.5a2.5 2.5 0 114 2c-.7.5-1 1-1 2"/><path d="M12.5 15h.01"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 5.5h17v11H9l-5.5 4z"/><path d="M9.5 9.5a2.5 2.5 0 114 2c-.7.5-1 1-1 2"/><path d="M12.5 15h.01"/></svg>');
}

/* Speed / fast dispatch. */
.wn-icon-bolt {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2.5L5 13.5h5l-1 8 8-11h-5l1-8z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2.5L5 13.5h5l-1 8 8-11h-5l1-8z"/></svg>');
}


/* ==========================================================================
 * Section colour bands.
 *
 * `block.background` wraps a section in one of these, so a theme can alternate
 * bands instead of stacking white blocks. Every value comes from the tokens —
 * the alternative, which the demo themes used, is hand-written HTML with inline
 * colours that stop matching the moment the palette changes.
 *
 * Not gated behind .wn-themed: the dash preview renders sections without that
 * class, same as the icons.
 * ========================================================================== */

.wn-band-soft {
  /* Dropped wholesale by a browser without color-mix, which leaves the section
     on the page background — what it looked like before the field existed. */
  background-color: color-mix(in srgb, var(--wn-color-border) 45%, var(--wn-color-surface));
}

.wn-band-surface {
  background-color: var(--wn-color-surface);
}

.wn-band-primary {
  background-color: var(--wn-color-primary);
  color: var(--wn-color-on-primary);
}

.wn-band-accent {
  background-color: var(--wn-color-accent);
  color: var(--wn-color-on-primary);
}

/* On a full-colour band the muted greys stop being readable, so anything that
   normally dims inherits the band's own ink instead. */
.wn-band-primary .wn-section-subtitle,
.wn-band-accent .wn-section-subtitle,
.wn-band-primary .wn-trust-item p,
.wn-band-accent .wn-trust-item p,
.wn-band-primary .wn-reviews-count,
.wn-band-accent .wn-reviews-count,
.wn-band-primary .wn-faq-answer,
.wn-band-accent .wn-faq-answer {
  color: inherit;
  opacity: 0.85;
}

/* An icon is masked out of --wn-color-primary, which on a primary band is the
   band's own colour: invisible. On any full-colour band it takes the ink. */
.wn-band-primary .wn-icon,
.wn-band-accent .wn-icon {
  background-color: currentColor;
}

.wn-band-primary .wn-review-card,
.wn-band-accent .wn-review-card {
  background: transparent;
  border-color: currentColor;
}

/* ==========================================================================
 * Theme chrome — the page's own controls follow the theme, not just sections.
 *
 * Everything below is gated behind `.wn-themed` on <html>, which root.tsx only
 * sets when the store has theme tokens. Without it these rules never match, so
 * a store with no theme renders exactly as it did before.
 *
 * The targets are the shared classes the storefront already ships (.btn,
 * .btn-outline) plus a few `wn-*` hooks added to shared components, so a single
 * layer covers product, collection, cart and every other page at once. Selector
 * specificity is >= 2 classes, which beats both the compiled `.btn` rule and
 * the Tailwind utilities on those components.
 * ========================================================================== */

.wn-themed body {
  font-family: var(--wn-font-body);
  background-color: var(--wn-color-surface);
}

.wn-themed h1,
.wn-themed h2,
.wn-themed h3,
.wn-themed h4 {
  font-family: var(--wn-font-heading);
}

/* Primary action: Add to cart, checkout, newsletter submit. */
.wn-themed .btn {
  background-color: var(--wn-color-primary);
  border-color: var(--wn-color-primary);
  color: var(--wn-color-on-primary);
  border-radius: var(--wn-radius);
}

/* The shipped .btn:hover inverts to a transparent fill; keep that behaviour. */
.wn-themed .btn:hover {
  background-color: transparent;
  border-color: var(--wn-color-primary);
  color: var(--wn-color-primary);
}

.wn-themed .btn[disabled],
.wn-themed .btn[disabled]:hover {
  background-color: var(--wn-color-muted);
  border-color: var(--wn-color-muted);
  color: var(--wn-color-on-primary);
}

/* The white variant stays light-on-dark-page; only its ink follows the theme. */
.wn-themed .btn.white,
.wn-themed .btn.white:hover {
  color: var(--wn-color-primary);
}

.wn-themed .btn-outline {
  border-color: var(--wn-color-primary);
  color: var(--wn-color-primary);
  border-radius: var(--wn-radius);
}

.wn-themed .btn-outline:hover {
  background-color: var(--wn-color-primary);
  color: var(--wn-color-on-primary);
}

/* Size / variant picker (components/VariantButton.tsx). */
.wn-themed .wn-variant-btn {
  border-color: var(--wn-color-border);
  border-radius: calc(var(--wn-radius) / 2);
}

.wn-themed .wn-variant-btn:hover,
.wn-themed .wn-variant-btn.is-active {
  background-color: var(--wn-color-primary);
  border-color: var(--wn-color-primary);
  color: var(--wn-color-on-primary);
}

/* Colour swatch — the selected ring reads as the theme, not a stock red. */
.wn-themed .wn-swatch.is-active {
  border-color: var(--wn-color-primary);
}

/* Price block: sale price and the discount pill share the accent colour. */
.wn-themed .wn-price-sale {
  color: var(--wn-color-accent);
}

.wn-themed .wn-price-badge {
  background-color: var(--wn-color-accent);
  color: #fff;
  border-radius: calc(var(--wn-radius) / 2);
}

/* Product description tabs (routes/products/components/Specifications.tsx). */
.wn-themed .wn-tab.is-active {
  background-color: var(--wn-color-primary);
  color: var(--wn-color-on-primary);
}

/* Colour chips: the fill is the real product colour, the frame is chrome. */
.wn-themed .wn-color-chip {
  border-color: var(--wn-color-border);
}

.wn-themed .wn-color-chip.is-active {
  border-color: var(--wn-color-primary);
}

/* Counter pills — cart count, the size on a cart line. */
.wn-themed .wn-badge {
  background-color: var(--wn-color-primary);
  color: var(--wn-color-on-primary);
}

/* Tag pills — "Explore Related Searches", "Other Products", listing tags.
 *
 * Deliberately the same recipe a theme section uses for its own pills (rounded
 * to 999px, 10px/22px, 0.85rem scaled): these sit a few hundred pixels apart on
 * a product page, so two different pill shapes read as a mistake. */
.wn-themed .wn-tag {
  background-color: var(--wn-color-surface);
  border: 1px solid var(--wn-color-border);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: calc(0.85rem * var(--wn-font-scale));
}

.wn-themed .wn-tag:hover {
  background-color: var(--wn-color-primary);
  border-color: var(--wn-color-primary);
  color: var(--wn-color-on-primary);
}

/* Current page in a pager. */
.wn-themed .wn-page-current {
  background-color: var(--wn-color-primary);
  color: var(--wn-color-on-primary);
  border-radius: calc(var(--wn-radius) / 2);
}

/* Neutral panels: the spec table on a product, the count strip on a listing. */
.wn-themed .wn-panel,
.wn-themed .wn-listing-banner {
  background-color: var(--wn-color-surface);
  border: 1px solid var(--wn-color-border);
}

.wn-themed .wn-panel {
  border-radius: calc(var(--wn-radius) / 2);
}

/* ==========================================================================
 * The real header and footer, themed.
 *
 * A theme can replace the chrome with its own HTML template, but a hand-written
 * template only reproduces the markup its author remembered — the multi-level
 * menu, the logo URL, the mobile menu, the mini cart, the socials, the footer
 * menus, the currency selector and the payment icons all live in components.
 * So the default is the other way round: keep the components, restyle them.
 *
 * These selectors are the storefront's own semantic classes (.header-container,
 * .menu-item, .submenu, .search), not Tailwind utilities, so no component needs
 * to change for the chrome to follow the theme.
 * ========================================================================== */

/* The wrapper, not `.header-container`. That class is the width-limited
   container: painting it leaves the full-bleed parent white, which only shows
   once the viewport is wider than the container — 230px of white down each edge
   at 1900px, invisible at 1280. */
.wn-themed header,
.wn-themed header > div {
  background-color: var(--wn-color-surface);
}

.wn-themed .menu-item > a {
  color: inherit;
  font-family: var(--wn-font-heading);
}

.wn-themed .menu-item > a:hover {
  color: var(--wn-color-primary);
}

/* Dropdown panel: keep the reveal behaviour, restate only the surface. */
.wn-themed .submenu {
  background-color: var(--wn-color-surface);
  border: 1px solid var(--wn-color-border);
  border-radius: calc(var(--wn-radius) / 2);
  color: inherit;
}

.wn-themed .submenu a:hover {
  color: var(--wn-color-primary);
}

/* Search field. */
.wn-themed .search {
  background-color: var(--wn-color-surface);
  border-color: var(--wn-color-border);
}

.wn-themed footer {
  background-color: var(--wn-color-surface);
  border-top: 1px solid var(--wn-color-border);
}

/* --- chrome typography and bands, so header/footer read as the same design ---
 *
 * The colour bands are derived from the theme with color-mix rather than adding
 * a token: a browser that does not support it drops the declaration and keeps
 * the greys the storefront ships, which is a safe place to land.
 */

.wn-themed header nav > ul {
  justify-content: center;
}

.wn-themed .menu-item > a {
  font-size: calc(0.95rem * var(--wn-font-scale));
  letter-spacing: 0.02em;
}

.wn-themed footer > div:first-child {
  background-color: color-mix(in srgb, var(--wn-color-border) 45%, var(--wn-color-surface));
}

.wn-themed footer > div:last-child {
  background-color: color-mix(in srgb, var(--wn-color-border) 80%, var(--wn-color-surface));
}

.wn-themed .wn-footer-title {
  font-family: var(--wn-font-heading);
  font-size: calc(1.25rem * var(--wn-font-scale));
}

.wn-themed footer a:hover {
  color: var(--wn-color-primary);
}

/* "Phone:", "Email:", "Address:" — labels, not values. */
.wn-themed footer li > span:first-child {
  color: var(--wn-color-muted);
}

/* Search submit and the cart counter carry the theme's accent, so the identity
 * colour appears in the header the way it does on the page. */

.wn-themed .wn-search-submit {
  color: var(--wn-color-primary);
}

.wn-themed .wn-search-submit-filled {
  background-color: var(--wn-color-primary);
  color: var(--wn-color-on-primary);
}

.wn-themed .mini-cart {
  border-color: var(--wn-color-primary);
  color: var(--wn-color-primary);
}

.wn-themed .mini-cart:hover {
  background-color: var(--wn-color-primary);
  color: var(--wn-color-on-primary);
}

/* Mobile drawer (#menu in MobileMenuNew) — the same typography and rules as the
 * desktop nav, so the two do not read as different sites. The id outranks
 * Tailwind's `divide-gray-200`, which sets the row borders through a
 * three-class selector. */

/* Set on the nav, not on a/button: the drawer's own title is a plain div, so
 * inheritance covers it without a selector that depends on row order. */
.wn-themed #menu {
  font-family: var(--wn-font-heading);
}

.wn-themed #menu li {
  border-color: var(--wn-color-border);
}