/*
Theme Name: Cotton Seven
Description: Light Backpilot-inverted theme for the Cotton Seven Co. demo shop. Block child theme of Twenty Twenty-Five; design source: the "Cotton Seven Light Theme" canvas (2026-08-29).
Template: twentytwentyfive
Version: 0.1.79
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: cotton-seven
*/

/* ── Tokens (mirror theme.json for use in raw-HTML parts) ─────────────────── */
:root {
  --c7-paper: #FAF8F4;
  --c7-card: #FFFFFF;
  --c7-ink: #1C2334;
  --c7-navy: #111827;
  --c7-border: #E9E4DB;
  --c7-well: #F4F1EB;
  --c7-muted: #6B7280;
  --c7-faint: #9CA3AF;
  --c7-amber: #F2C14E;
  --c7-amber-ink: #33280B;
  --c7-amber-dark: #B07514;
  --c7-display: 'Bricolage Grotesque', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --c7-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* Short pages: the canvas below the footer paints navy, so the footer reads
   as extending to the window edge (html, not body — the concierge widget
   samples body's background to pick its light/dark theme). */
html { background-color: var(--c7-navy); }
/* …except checkout, which has no footer — a navy canvas there reads as a
   giant dark slab under the form. */
html:has(body.woocommerce-checkout) { background-color: var(--c7-paper); }
body {
  background: var(--c7-paper);
  color: var(--c7-ink);
  font-family: var(--c7-body);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

.c7-container { max-width: 1240px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* ── Demo banner ──────────────────────────────────────────────────────────── */
.c7-banner {
  background: var(--c7-navy);
  color: #fff;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
  padding: 6px 48px;
  text-align: center;
}
.c7-banner img { width: 20px; height: 20px; flex-shrink: 0; }
.c7-banner__text { font-size: 13.5px; color: rgba(255, 255, 255, 0.85); }
.c7-banner__text strong { color: #fff; }
.c7-banner__link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c7-amber);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.c7-banner__link:hover { color: #f7d478; }
.c7-banner__close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  display: inline-flex;
  padding: 6px;
}
.c7-banner__close:hover { color: #fff; }

/* ── Site header ──────────────────────────────────────────────────────────── */
.c7-header { background: var(--c7-card); border-bottom: 1px solid var(--c7-border); }
.c7-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  height: 84px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.c7-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--c7-ink); }
.c7-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.c7-brand__name { font-family: var(--c7-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.c7-brand__byline { font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--c7-muted); white-space: nowrap; align-self: flex-end; }
.c7-nav { display: flex; align-items: center; gap: 28px; }
.c7-nav a { font-size: 14.5px; font-weight: 500; color: #4A4F5E; text-decoration: none; white-space: nowrap; }
.c7-nav a:hover, .c7-nav a[aria-current="page"] { color: var(--c7-navy); font-weight: 600; }
.c7-nav a.c7-nav__sale { color: var(--c7-amber-dark); font-weight: 600; }
.c7-header__icons { display: flex; align-items: center; gap: 20px; color: var(--c7-ink); }
.c7-header__icons a { color: var(--c7-ink); display: inline-flex; }

.c7-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c7-well);
  border: 1px solid var(--c7-border);
  border-radius: 8px;
  height: 38px;
  padding: 0 12px;
  width: 200px;
  color: var(--c7-muted);
}
.c7-search:focus-within { border-color: var(--c7-navy); color: var(--c7-navy); }
.c7-search input[type="search"] {
  border: 0;
  background: transparent;
  outline: none;
  width: 100%;
  font-family: var(--c7-body);
  font-size: 14px;
  color: var(--c7-ink);
  padding: 0;
}
.c7-search input[type="search"]::placeholder { color: var(--c7-faint); }

.c7-cart { display: inline-flex; align-items: center; gap: 10px; }
.c7-cart__meta { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.c7-cart__total { font-size: 14.5px; font-weight: 600; color: var(--c7-ink); }
.c7-cart__count { font-size: 13.5px; color: var(--c7-muted); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.c7-hero {
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 32px 80px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.c7-hero__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c7-muted);
}
.c7-hero h1 {
  margin: 0;
  font-family: var(--c7-display);
  font-size: 58px;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.c7-hero__sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c7-muted); max-width: 460px; }
.c7-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.c7-hero__actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.c7-hero__media { position: relative; }
.c7-hero__media::before {
  content: "";
  position: absolute;
  top: 24px; left: 24px; right: -24px; bottom: -24px;
  background: #EFE9DD;
  border-radius: 12px;
}
.c7-hero__media img {
  position: relative;
  width: 100%;
  height: 470px;
  object-fit: cover;
  object-position: top;
  border-radius: 12px;
  display: block;
}

/* Buttons (shared) */
.c7-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  padding: 0 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.c7-btn--primary { background: var(--c7-navy); color: #fff; }
.c7-btn--primary:hover { background: #1f2937; color: #fff; }
.c7-btn--secondary { background: var(--c7-card); border: 1px solid var(--c7-border); color: var(--c7-ink); }
.c7-btn--secondary:hover { background: var(--c7-well); color: var(--c7-ink); }

/* ── Section headings ─────────────────────────────────────────────────────── */
.c7-section { max-width: 1240px; margin: 0 auto; padding: 0 32px 84px; }
.c7-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; }
.c7-section__head h2 {
  margin: 0;
  font-family: var(--c7-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.c7-section__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c7-navy);
  text-decoration: none;
}

/* ── Category tiles ───────────────────────────────────────────────────────── */
.c7-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.c7-cat {
  background: rgba(17, 24, 39, 0.045);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--c7-ink);
}
.c7-cat:hover { background: rgba(17, 24, 39, 0.075); color: var(--c7-ink); }
.c7-cat__icon {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--c7-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c7-navy);
  flex-shrink: 0;
}
.c7-cat__name { font-family: var(--c7-display); font-size: 21px; font-weight: 600; flex-grow: 1; }
.c7-cat__arrow {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--c7-card);
  border: 1px solid var(--c7-border);
  color: var(--c7-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Product cards (WooCommerce classic loop, used by the shortcodes) ─────── */
.c7-products .woocommerce ul.products,
.woocommerce ul.products.c7-grid { margin: 0; }
.woocommerce ul.products li.product {
  background: var(--c7-card);
  border: 1px solid var(--c7-border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  padding-bottom: 18px;
  text-align: left;
}
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 0 14px;
  background: var(--c7-well);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--c7-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--c7-ink);
  padding: 0 18px 4px;
}
.woocommerce ul.products li.product .star-rating {
  margin: 8px 18px 6px;
  color: var(--c7-navy);
  font-size: 14px;
}
.woocommerce ul.products li.product .price {
  margin: 0 18px 6px;
  padding-right: 70px;
  color: var(--c7-ink);
  font-size: 16px;
  font-weight: 600;
}
.woocommerce ul.products li.product .price del { color: var(--c7-faint); font-weight: 400; font-size: 14px; opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .onsale { font-size: 0; }
.woocommerce ul.products li.product .onsale::after {
  content: "SALE";
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 14px; left: 14px; right: auto;
  margin: 0;
  background: var(--c7-amber);
  color: var(--c7-amber-ink);
  font-size: 0; /* text replaced by the ::after SALE */
  font-weight: 600;
  letter-spacing: 0.04em;
  min-height: 0; min-width: 0;
  line-height: 1.55;
  padding: 5px 12px;
  border-radius: 999px;
  z-index: 2;
}
/* Icon-only add-to-cart, bottom-right of the card */
.woocommerce ul.products li.product .button {
  position: absolute;
  right: 18px;
  bottom: 30px;
  width: 50px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  background-color: var(--c7-navy);
  color: #fff;
  font-size: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.woocommerce ul.products li.product .button:hover { background-color: #1f2937; }
.woocommerce ul.products li.product .button::before {
  content: "";
  width: 19px;
  height: 19px;
  background: #fff;
  -webkit-mask: 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='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>") center / contain no-repeat;
  mask: 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='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>") center / contain no-repeat;
}
/* Variable products: arrow glyph (go pick options) instead of the cart */
.woocommerce ul.products li.product .button.product_type_variable::before {
  -webkit-mask: 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='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15'/><path d='M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  mask: 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='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15'/><path d='M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
}
/* Hide "x products in cart" style view-cart links the loop may append */
.woocommerce ul.products li.product .added_to_cart { display: none; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.c7-footer { background: var(--c7-navy); color: #fff; margin-top: 88px; }
.c7-footer__inner { max-width: 1240px; margin: 0 auto; padding: 56px 32px 0; }
.c7-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  padding-bottom: 44px;
}
.c7-footer__brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.c7-footer__brandrow { display: flex; align-items: center; gap: 12px; }
.c7-footer__brandrow .c7-brand__name { color: #fff; font-size: 19px; }
.c7-footer__blurb { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.66); max-width: 320px; }
.c7-footer__col { display: flex; flex-direction: column; gap: 12px; }
.c7-footer__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.c7-footer__col a { font-size: 14px; color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.c7-footer__col a:hover { color: #fff; }
.c7-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* Header stays ONE line at every width; pieces drop out, nothing wraps. */
@media (max-width: 1200px) {
  .c7-brand__co { display: none; }
  /* Nav + search + cart no longer fit together — search yields first. */
  .c7-search { display: none; }
}
@media (max-width: 900px) {
  .c7-hero { grid-template-columns: 1fr; padding-top: 40px; gap: 40px; }
  .c7-hero h1 { font-size: 40px; }
  .c7-cats { grid-template-columns: 1fr; }
  .c7-footer__cols { grid-template-columns: 1fr; gap: 28px; }
  .c7-nav { display: none; }
  /* With the nav gone there is room again for a compact search field. */
  .c7-search { display: flex; }
}
@media (max-width: 760px) {
  .c7-search { display: none; }
  .c7-footer__bottom { flex-direction: column; gap: 6px; align-items: flex-start; }
}
@media (max-width: 480px) {
  /* Logo only, at its original size — the wordmark goes, the mark does not shrink. */
  .c7-brand__name, .c7-brand__byline { display: none; }
  .c7-cart__count { display: none; }
}

/* ── Classic-loop grid fixes (homepage shortcode) ─────────────────────────── */
/* wpautop injects stray <br>/<p> into the loop markup — the breaks were adding
   phantom space above sale-product images and unequal card heights. */
.woocommerce ul.products li.product br { display: none; }
.woocommerce ul.products li.product p { margin: 0; }
/* Own grid instead of Woo float columns (floats caused orphan rows). */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  justify-items: center;
}
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.woocommerce ul.products li.product {
  width: 100% !important;
  max-width: 400px; /* cards keep a sane size when columns collapse */
  float: none !important;
  margin: 0 !important;
}
/* wpautop also drops empty <p> elements directly into the <ul> — as grid items
   they occupy real cells and shift the whole row. Only <li> may be a card. */
.woocommerce ul.products > *:not(li) { display: none; }
/* Woo's clearfix pseudos (content:" "; display:table) become real grid items
   and steal the first cell — verified live: row 1 started at column 2. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }
@media (max-width: 1000px) {
  .woocommerce ul.products, .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .woocommerce ul.products, .woocommerce ul.products.columns-4 { grid-template-columns: 1fr; }
}

/* ── Shop archive cards (Woo Product Collection blocks) ───────────────────── */
.wc-block-product-template { gap: 28px !important; }
/* Our 28px gap breaks Woo's auto-fill track math (tuned to its 20px gap),
   which collapsed the grid to 2 fat columns — pin the counts explicitly. */
.wc-block-product-template__responsive.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.wc-block-product-template__responsive.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1000px) {
  .wc-block-product-template__responsive.columns-3,
  .wc-block-product-template__responsive.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .wc-block-product-template__responsive.columns-3,
  .wc-block-product-template__responsive.columns-4 { grid-template-columns: 1fr !important; }
}
.wc-block-product-template { justify-items: center; }
li.wc-block-product {
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  background: var(--c7-card);
  border: 1px solid var(--c7-border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  padding: 0 0 16px;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "img img" "title btn" "rating btn" "price btn";
}
li.wc-block-product .wp-block-woocommerce-product-image { grid-area: img; }
li.wc-block-product .wp-block-post-title { grid-area: title; }
li.wc-block-product .wp-block-woocommerce-product-rating { grid-area: rating; }
li.wc-block-product .wp-block-woocommerce-product-price { grid-area: price; }
li.wc-block-product .wp-block-woocommerce-product-image { margin: 0 0 14px !important; }
li.wc-block-product .wp-block-woocommerce-product-image img { width: 100%; display: block; background: var(--c7-well); }
li.wc-block-product .wp-block-post-title {
  text-align: left;
  padding: 0 18px;
  margin: 0 0 6px;
  font-family: var(--c7-body);
  font-size: 16px;
  line-height: 1.4;
}
li.wc-block-product .wp-block-post-title a { color: var(--c7-ink); font-weight: 600; font-size: 16px; }
li.wc-block-product .wp-block-woocommerce-product-price { text-align: left !important; padding: 0 18px; margin: 0 !important; }
li.wc-block-product .wc-block-components-product-price { color: var(--c7-ink); font-weight: 600; font-size: 16px; }
li.wc-block-product .wc-block-components-product-price del { color: var(--c7-faint); font-weight: 400; font-size: 14px; }
li.wc-block-product .wc-block-components-product-price ins { text-decoration: none; }
li.wc-block-product .wp-block-woocommerce-product-sale-badge { position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0 !important; }
li.wc-block-product .wc-block-components-product-sale-badge {
  position: static;
  background: var(--c7-amber);
  color: var(--c7-amber-ink);
  border-radius: 999px;
  padding: 5px 12px;
  border: 0;
  box-shadow: none;
}
li.wc-block-product .wc-block-components-product-sale-badge__text { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
li.wc-block-product .wp-block-woocommerce-product-button { grid-area: btn; align-self: center; justify-self: end; margin: 0 18px 0 12px !important; }
li.wc-block-product .wp-block-woocommerce-product-rating {
  color: var(--c7-navy);
  padding: 0 18px;
  margin: 0 0 4px !important;
  font-size: 0.85em;
}
li.wc-block-product .wp-block-woocommerce-product-rating .wc-block-components-product-rating__container { margin: 0; }
li.wc-block-product .wc-block-components-product-button__button {
  width: 50px !important;
  min-width: 50px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background-color: var(--c7-navy);
  color: #fff;
  font-size: 0 !important;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
li.wc-block-product .wc-block-components-product-button__button:hover { background-color: #1f2937; }
li.wc-block-product .wc-block-components-product-button__button::before {
  content: "";
  width: 19px;
  height: 19px;
  background: #fff;
  -webkit-mask: 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='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>") center / contain no-repeat;
  mask: 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='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>") center / contain no-repeat;
}
li.wc-block-product .wc-block-components-product-button__button.product_type_variable::before {
  -webkit-mask: 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='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15'/><path d='M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  mask: 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='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15'/><path d='M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
}

/* ── Add-to-cart feedback ─────────────────────────────────────────────────── */
/* Woo marks a successfully added classic-loop button with .added — show a check. */
.woocommerce ul.products li.product .button.added::before,
li.wc-block-product .wc-block-components-product-button__button.added::before {
  -webkit-mask: 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='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 12.5l5 5 10-11'/></svg>") center / contain no-repeat;
  mask: 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='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 12.5l5 5 10-11'/></svg>") center / contain no-repeat;
}
.c7-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  background: var(--c7-navy);
  color: #fff;
  font-family: var(--c7-body);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9999;
}
.c7-toast--show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.c7-toast a { color: var(--c7-amber); font-weight: 600; margin-left: 10px; text-decoration: none; }

/* ── Single product page ──────────────────────────────────────────────────── */
.wc-block-breadcrumbs { color: var(--c7-muted); font-size: 13.5px !important; }
.wc-block-breadcrumbs a { color: var(--c7-muted); }
.wc-block-breadcrumbs a:hover { color: var(--c7-navy); }

/* Gallery — flexslider manages the slide layout; only skin it. */
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery .flex-viewport { border-radius: 12px; overflow: hidden; background: var(--c7-well); }
.woocommerce-product-gallery__image { background: var(--c7-well); }
.woocommerce-product-gallery__trigger { position: absolute; top: 14px; right: 14px; z-index: 5; }
ol.flex-control-thumbs { display: flex; gap: 12px; list-style: none; margin: 14px 0 0 !important; padding: 0; }
ol.flex-control-thumbs li { width: 96px; margin: 0; }
ol.flex-control-thumbs img {
  display: block;
  width: 100%;
  border: 1px solid var(--c7-border);
  border-radius: 8px;
  cursor: pointer;
  opacity: 1;
}
ol.flex-control-thumbs img.flex-active { border: 1px solid var(--c7-faint); }

/* Summary column */
.single-product h1.wp-block-post-title,
h1.wp-block-post-title {
  font-family: var(--c7-display);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 4px;
}
.wc-block-components-product-rating { color: var(--c7-navy); }
.wc-block-components-product-rating .wc-block-components-product-rating-counter,
.wc-block-components-product-rating__reviews_count { color: var(--c7-muted); font-size: 14px; }
.wp-block-woocommerce-product-price .wc-block-components-product-price {
  font-family: var(--c7-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--c7-ink);
}
.wp-block-woocommerce-product-price del { color: var(--c7-faint); font-weight: 400; font-size: 20px; }
.wp-block-woocommerce-product-price ins { text-decoration: none; }

/* Variations form */
table.variations { margin: 10px 0 0; }
table.variations th.label { font-size: 14px; font-weight: 600; color: var(--c7-ink); padding-right: 14px; }
table.variations select {
  height: 44px;
  padding: 0 36px 0 14px;
  border: 1px solid var(--c7-border);
  border-radius: 8px;
  background-color: var(--c7-card);
  font-family: var(--c7-body);
  font-size: 14px;
  color: var(--c7-ink);
}
.reset_variations { font-size: 13px; color: var(--c7-muted); }
.woocommerce-variation-price .wc-block-components-product-price,
.woocommerce-variation-price .price { font-size: 20px; font-weight: 600; }

/* Quantity + add to cart */
.wp-block-woocommerce-add-to-cart-form form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.wp-block-woocommerce-add-to-cart-form form.cart .variations_button { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; width: 100%; }
form.cart .quantity .qty {
  height: 52px;
  width: 64px !important;
  min-width: 0 !important;
  border: 1px solid var(--c7-border);
  border-radius: 8px;
  background: var(--c7-card);
  text-align: center;
  font-family: var(--c7-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--c7-ink);
}
button.single_add_to_cart_button {
  height: 52px;
  padding: 0 32px;
  border: 0;
  border-radius: 8px;
  background: var(--c7-navy);
  color: #fff;
  font-family: var(--c7-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
button.single_add_to_cart_button:hover { background: #1f2937; }
button.single_add_to_cart_button.disabled { opacity: 0.45; cursor: not-allowed; }

/* Meta (SKU / category) */
.wp-block-woocommerce-product-sku,
.product_meta { font-size: 14px; color: var(--c7-muted); }
.product_meta a { color: var(--c7-muted); }

/* Notices (added-to-cart bar on product/cart pages) */
.woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner.is-success {
  background: var(--c7-card);
  border: 1px solid var(--c7-border);
  border-left: 4px solid var(--c7-amber);
  border-radius: 8px;
  color: var(--c7-ink);
  padding: 14px 18px;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--c7-amber-dark); }
.woocommerce-message .button, .woocommerce-info .button {
  background: var(--c7-navy);
  color: #fff;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 600;
}

/* Tabs (description / reviews) */
.woocommerce-tabs { margin-top: 56px; }
.woocommerce-tabs ul.wc-tabs, .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0 0 0;
  border-bottom: 1px solid var(--c7-border);
}
.woocommerce-tabs ul.wc-tabs li, .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.wc-tabs li.active, .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--c7-navy); }
.woocommerce-tabs ul.wc-tabs li a, .woocommerce-tabs ul.tabs li a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c7-muted);
  text-decoration: none;
}
.woocommerce-tabs ul.wc-tabs li.active a, .woocommerce-tabs ul.tabs li.active a { color: var(--c7-ink); }
.woocommerce-Tabs-panel h2 { font-family: var(--c7-display); font-size: 26px; font-weight: 700; }
.woocommerce-Tabs-panel { font-size: 15px; line-height: 1.65; color: #3D4354; }

/* Reviews as cards */
.woocommerce-Reviews .commentlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.woocommerce-Reviews .commentlist li.review { margin: 0; }
.woocommerce-Reviews .commentlist::before,
.woocommerce-Reviews .commentlist::after { content: none !important; display: none !important; }
.woocommerce-Reviews .commentlist > *:not(li) { display: none; }
.woocommerce-Reviews .comment_container {
  background: var(--c7-card);
  border: 1px solid var(--c7-border);
  border-radius: 12px;
  padding: 20px 22px;
}
.woocommerce-Reviews .comment_container img.avatar { display: none; }
.woocommerce-Reviews .comment-text { margin: 0 !important; border: 0 !important; padding: 0 !important; }
.woocommerce-Reviews .comment-text .star-rating { color: var(--c7-navy); font-size: 0.8em; margin-bottom: 6px; }
.woocommerce-Reviews .meta { font-size: 13.5px; color: var(--c7-muted); }
.woocommerce-Reviews .meta strong { color: var(--c7-ink); font-size: 15px; }
.woocommerce-Reviews .description { font-size: 14.5px; line-height: 1.6; color: #3D4354; }
#review_form_wrapper { margin-top: 32px; }
#review_form input[type="text"], #review_form input[type="email"], #review_form textarea {
  border: 1px solid var(--c7-border);
  border-radius: 8px;
  background: var(--c7-card);
  padding: 10px 14px;
  font-family: var(--c7-body);
}
#review_form .form-submit .submit {
  background: var(--c7-navy);
  color: #fff;
  border: 0;
  border-radius: 8px;
  height: 46px;
  padding: 0 26px;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 760px) {
  .woocommerce-Reviews .commentlist { grid-template-columns: 1fr; }
  h1.wp-block-post-title { font-size: 32px; }
}

/* ── Catalog sorting dropdown ─────────────────────────────────────────────── */
.woocommerce-ordering select.orderby,
.wc-block-catalog-sorting select {
  -webkit-appearance: none;
  appearance: none;
  height: 44px;
  padding: 0 38px 0 16px;
  border: 1px solid var(--c7-border);
  border-radius: 8px;
  background-color: var(--c7-card);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  font-family: var(--c7-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--c7-ink);
  cursor: pointer;
}
.woocommerce-ordering select.orderby:focus,
.wc-block-catalog-sorting select:focus { outline: none; border-color: var(--c7-navy); }
/* Result count line beside it */
.woocommerce-result-count, .wc-block-product-results-count { color: var(--c7-muted); font-size: 14px; font-family: var(--c7-body); }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.wp-block-query-pagination { margin-top: 44px; gap: 12px; align-items: center; flex-wrap: nowrap; justify-content: center; }
.wp-block-query-pagination-numbers { display: inline-flex; align-items: center; gap: 12px; }
.wp-block-query-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  background: var(--c7-card);
  border: 1px solid var(--c7-border);
  border-radius: 8px;
  font-family: var(--c7-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--c7-ink);
  text-decoration: none;
}
.wp-block-query-pagination a.page-numbers:hover { border-color: var(--c7-navy); color: var(--c7-navy); }
.wp-block-query-pagination .page-numbers.current {
  background: var(--c7-navy);
  border-color: var(--c7-navy);
  color: #fff;
  font-weight: 600;
}
.wp-block-query-pagination .page-numbers.dots {
  background: none;
  border: 0;
  color: var(--c7-faint);
  min-width: 24px;
}
.wp-block-query-pagination-next, .wp-block-query-pagination-previous {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  background: var(--c7-card);
  border: 1px solid var(--c7-border);
  border-radius: 8px;
  font-size: 0; /* icon-only: the "Previous/Next Page" text stays for screen readers' accessible name */
  line-height: 0;
  color: var(--c7-ink);
  text-decoration: none;
}
.wp-block-query-pagination-next::before, .wp-block-query-pagination-previous::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: 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='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center / contain no-repeat;
  mask: 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='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center / contain no-repeat;
}
.wp-block-query-pagination-previous::before {
  -webkit-mask: 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='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 6l-6 6 6 6'/></svg>") center / contain no-repeat;
  mask: 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='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 6l-6 6 6 6'/></svg>") center / contain no-repeat;
}
.wp-block-query-pagination-next .wp-block-query-pagination-next-arrow,
.wp-block-query-pagination-previous .wp-block-query-pagination-previous-arrow { display: none; }
.wp-block-query-pagination-next:hover, .wp-block-query-pagination-previous:hover { border-color: var(--c7-navy); color: var(--c7-navy); }

/* ── Focus ring on product cards ──────────────────────────────────────────── */
/* Client-side pagination focuses the first product link; the browser's default
   outline gets clipped by the card's overflow:hidden into a stray blue line
   under the photo. Keep a visible ring, but themed and inside the card. */
/* Mouse clicks must never paint a ring (parent-theme a:focus outline flashed
   as a clipped line during navigation); keyboard focus keeps the navy ring. */
.woocommerce ul.products li.product a:focus:not(:focus-visible) { outline: none; }
.woocommerce ul.products li.product a:focus-visible {
  outline: 2px solid var(--c7-navy);
  outline-offset: -2px;
  border-radius: 12px;
}
/* Client-side pagination force-focuses the first product's image link, which
   painted a clipped outline fragment under the photo on every page change.
   No ring on that anchor; keyboard users still get rings on title/button. */
li.wc-block-product .wp-block-woocommerce-product-image a:focus,
li.wc-block-product .wp-block-woocommerce-product-image a:focus-visible { outline: none; }
li.wc-block-product .wp-block-post-title a:focus-visible,
li.wc-block-product .wc-block-components-product-button__button:focus-visible {
  outline: 2px solid var(--c7-navy);
  outline-offset: 2px;
}

/* Compact pagination on phones — the 44px pills overflowed the viewport. */
@media (max-width: 560px) {
  .wp-block-query-pagination { gap: 5px; }
  .wp-block-query-pagination-numbers { gap: 5px; }
  .wp-block-query-pagination .page-numbers {
    min-width: 32px;
    height: 32px;
    padding: 0 4px;
    font-size: 13px;
    border-radius: 6px;
  }
  .wp-block-query-pagination .page-numbers.dots { min-width: 16px; }
  .wp-block-query-pagination-next, .wp-block-query-pagination-previous {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: 6px;
  }
  .wp-block-query-pagination-next::before, .wp-block-query-pagination-previous::before { width: 14px; height: 14px; }
}

/* Result count centers against the sorting dropdown (default <p> margin pushed it up). */
p.woocommerce-result-count { margin: 0 !important; }
.wc-block-catalog-sorting form.woocommerce-ordering { margin: 0; } /* its 14px bottom margin lifted the select off center */
.wp-block-group:has(> .wp-block-woocommerce-product-results-count) { align-items: center; }

/* Space under the pagination = space above it (44px): drop the collection's
   trailing margin and halve the footer offset on archive pages. */
.wp-block-woocommerce-product-collection { margin-bottom: 0 !important; }
body.archive .c7-footer, body.search .c7-footer { margin-top: 44px; }

/* ── Product page polish (review pass) ────────────────────────────────────── */
/* Rating row: bigger stars, muted count, tighter to the title */
.woocommerce-product-rating { display: flex; align-items: center; gap: 9px; margin: 0 0 6px !important; }
.woocommerce-product-rating .star-rating { font-size: 15px; color: var(--c7-navy); margin: 0; }
.woocommerce-product-rating .woocommerce-review-link { color: var(--c7-muted); font-size: 14px; }

/* Variation form: kill the reserved dead space, let the buy row span and grow */
table.variations { margin-bottom: 6px !important; }
.single_variation_wrap { width: 100%; margin: 0; }
.woocommerce-variation.single_variation { margin: 0 !important; }
/* Spacing lives on the rendered price, never the container — Woo leaves the
   div empty for same-price variations and any container margin/padding
   shifted the layout 10px on every selection. */
.single_variation .woocommerce-variation-price { margin: 0; padding: 0; }
.single_variation .woocommerce-variation-price .price { display: block; margin-bottom: 10px; }
/* the SR-only alert div is a flex item and was adding a phantom gap slot */
form.cart .reset_variations_alert { position: absolute; }
.woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: 14px; width: 100%; }
.woocommerce-variation-add-to-cart .quantity { margin: 0; }
a.reset_variations { margin-left: 10px; }

/* Gallery thumbs: fixed 96px squares (flexslider inline-styles the li width) */
ol.flex-control-thumbs li { width: 96px !important; margin: 0; }
ol.flex-control-thumbs img { aspect-ratio: 1 / 1; object-fit: cover; height: auto; }

/* Variation picker: label above its dropdown (as in the original theme) */
table.variations,
table.variations tbody,
table.variations tr,
table.variations th,
table.variations td { display: block; width: 100%; padding: 0; text-align: left; }
table.variations th.label { padding: 0 0 8px; }
table.variations td.value { padding: 0 0 4px; }
table.variations select {
  width: auto;
  field-sizing: content; /* size to the selected value: S/M/L stays compact */
  min-width: 0 !important;
  max-width: 320px !important;
}

/* SKU and Category each on their own line */
.wp-block-woocommerce-product-meta .wp-block-group {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Related products: one row only — show at most 4 */
[data-collection="woocommerce/product-collection/related"] li.wc-block-product:nth-child(n+5) { display: none; }

/* Related products use a flex container with hard 20% item widths (columns-5),
   which stays 4-across at any viewport — put it on the same responsive grid
   as the other product rows. */
.wc-block-product-template.is-flex-container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  justify-items: center;
}
.wc-block-product-template.is-flex-container > li.wc-block-product { width: 100% !important; }
@media (max-width: 1000px) {
  .wc-block-product-template.is-flex-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wc-block-product-template.is-flex-container { grid-template-columns: 1fr; }
}

/* Block cards: Woo appends (and for in-cart items server-renders) an
   a.added_to_cart "View cart" link — always hidden. The checkmark keys on
   .c7-just-added, set by the theme script only when THIS page's click added
   the item, so a fresh page load always shows the basket icon. */
li.wc-block-product .added_to_cart { display: none; }
li.wc-block-product .wc-block-components-product-button__button.c7-just-added::before {
  -webkit-mask: 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='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 12.5l5 5 10-11'/></svg>") center / contain no-repeat;
  mask: 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='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 12.5l5 5 10-11'/></svg>") center / contain no-repeat;
}

/* After an add, Woo injects an announcement span into the button wrapper,
   growing it 12px and nudging the centered button up — only the button
   itself may take space. */
li.wc-block-product .wp-block-woocommerce-product-button > :not(.wc-block-components-product-button__button) {
  display: none;
}

/* Single product: Woo's default round green Sale! badge -> the theme's amber pill */
.wp-block-woocommerce-product-image-gallery { position: relative; }
.wp-block-woocommerce-product-image-gallery span.onsale {
  position: absolute;
  top: 14px !important;
  left: 14px !important; /* Woo pushes it to -16px outside the image */
  right: auto;
  margin: 0;
  z-index: 10;
  background: var(--c7-amber);
  color: var(--c7-amber-ink);
  border-radius: 999px;
  min-height: 0;
  min-width: 0;
  line-height: 1.55;
  padding: 5px 12px;
  font-size: 0;
}
.wp-block-woocommerce-product-image-gallery span.onsale::after {
  content: "SALE";
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Summary column: short description italic, full description below it */
.single-product .wp-block-post-excerpt p { font-style: italic; }
.c7-full-description { font-size: 15px; line-height: 1.65; color: #3D4354; }
.c7-full-description p { margin: 0 0 10px; }

/* Tabs keep the underline style on small screens too (Woo's smallscreen CSS
   restacks them with a left bar — override back to our horizontal nav). */
@media (max-width: 768px) {
  .woocommerce-tabs ul.wc-tabs, .woocommerce-tabs ul.tabs {
    display: flex !important;
    gap: 18px;
    overflow-x: auto;
    width: 100%;
  }
  .woocommerce-tabs ul.wc-tabs li, .woocommerce-tabs ul.tabs li {
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    white-space: nowrap;
    background: none !important;
  }
  .woocommerce-tabs ul.wc-tabs li.active, .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--c7-navy) !important;
  }
}

/* Review-count and category links behave like breadcrumb links: muted, navy + underline on hover */
.woocommerce-review-link { color: var(--c7-muted) !important; font-size: 14px; }
.woocommerce-review-link:hover { color: var(--c7-navy) !important; text-decoration: underline; }
.wp-block-woocommerce-product-meta .wp-block-post-terms { font-size: 14px; color: var(--c7-ink); }
.wp-block-woocommerce-product-meta .wp-block-post-terms__prefix { font-weight: 600; color: var(--c7-ink); }
.wp-block-woocommerce-product-meta .sku { color: var(--c7-muted); }
.wp-block-woocommerce-product-meta .wp-block-post-terms a { font-weight: 400; color: var(--c7-muted); }
.wp-block-woocommerce-product-meta .wp-block-post-terms a:hover { color: var(--c7-navy); text-decoration: underline; }

/* ── Review form ──────────────────────────────────────────────────────────── */
#review_form .comment-reply-title {
  display: block;
  font-family: var(--c7-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}
#review_form .comment-notes { color: var(--c7-muted); font-size: 14px; margin: 0 0 20px; }
#review_form p { margin: 0 0 18px; }
#review_form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--c7-ink);
  margin: 0 0 8px;
}
#review_form .comment-form-rating .stars { margin: 0; color: var(--c7-navy); }
#review_form input[type="text"],
#review_form input[type="email"] {
  display: block;
  width: 100%;
  height: 44px;
  box-sizing: border-box; /* padding was inflating the 44px to 66px */
}
/* Name and Email share the first line, together spanning the textarea width */
#review_form .comment-form-author,
#review_form .comment-form-email {
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 14px);
  margin-right: 20px !important;
}
#review_form .comment-form-email { margin-right: 0 !important; }
@media (max-width: 640px) {
  #review_form .comment-form-author,
  #review_form .comment-form-email { width: 100%; margin-right: 0 !important; }
}
#review_form textarea { width: 100%; min-height: 120px; }
/* Consent checkbox: label stays inline beside the box, regular weight */
#review_form .comment-form-cookies-consent { display: flex; align-items: center; gap: 9px; }
#review_form .comment-form-cookies-consent label { display: inline; font-weight: 400; color: var(--c7-muted); margin: 0; }
#review_form .comment-form-cookies-consent input { margin: 0; accent-color: var(--c7-navy); }

/* ── Cart page (Woo cart block) ───────────────────────────────────────────── */
.wc-block-cart-items__header .wc-block-cart-items__header-product,
.wc-block-cart-items__header .wc-block-cart-items__header-total {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c7-muted);
}
.wc-block-cart-items .wc-block-cart-items__row { border-color: var(--c7-border); }
.wc-block-components-product-name {
  color: var(--c7-ink) !important;
  font-weight: 600;
  text-decoration: none;
}
.wc-block-components-product-name:hover { color: var(--c7-navy) !important; text-decoration: underline; }
.wc-block-cart-item__image img { border-radius: 8px; background: var(--c7-well); }
.wc-block-components-product-metadata__description { color: var(--c7-muted); }
.wc-block-cart-item__prices { color: var(--c7-ink); }

/* Quantity stepper + remove */
.wc-block-components-quantity-selector {
  border: 1px solid var(--c7-border) !important;
  border-radius: 8px !important;
  background: var(--c7-card);
}
.wc-block-components-quantity-selector::after { border: 0 !important; }
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { font-weight: 600; color: var(--c7-ink); }
.wc-block-cart-item__remove-link,
.wc-block-cart-item__remove-icon { color: var(--c7-muted); }
.wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__remove-icon:hover { color: var(--c7-navy); }

/* Totals sidebar as a card */
.wp-block-woocommerce-cart-totals-block {
  background: var(--c7-card);
  border: 1px solid var(--c7-border);
  border-radius: 12px;
  padding: 22px 24px !important;
}
.wc-block-cart__totals-title {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  color: var(--c7-muted) !important;
  border: 0 !important;
}
.wc-block-components-totals-item__label { color: var(--c7-ink); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--c7-display);
  font-weight: 700;
}
.wc-block-components-panel__button { color: var(--c7-ink); }

/* Checkout button */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--c7-navy) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-family: var(--c7-body);
  font-weight: 600;
  min-height: 52px;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { background: #1f2937 !important; }

/* Coupon row: placeholder-style label (the floating-label dance misrendered
   with the theme fonts), themed input, Apply as the light secondary button */
.wc-block-components-totals-coupon__form { gap: 12px; align-items: stretch; }
.wc-block-components-totals-coupon .wc-block-components-text-input input {
  height: 48px !important;
  padding: 0 14px !important;
  box-sizing: border-box;
  border: 1px solid var(--c7-border) !important;
  border-radius: 8px !important;
  font-family: var(--c7-body);
  font-size: 14px;
  color: var(--c7-ink);
  box-shadow: none !important;
}
.wc-block-components-totals-coupon .wc-block-components-text-input input:focus {
  outline: none !important;
  border-color: var(--c7-navy) !important;
}
.wc-block-components-totals-coupon .wc-block-components-text-input label {
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: var(--c7-faint) !important;
}
.wc-block-components-totals-coupon .wc-block-components-text-input.is-active label { opacity: 0; }
.wc-block-components-totals-coupon__button {
  background: var(--c7-card) !important;
  color: var(--c7-ink) !important;
  border: 1px solid var(--c7-border) !important;
  border-radius: 8px !important;
  font-family: var(--c7-body);
  font-weight: 600;
  height: 48px;
  min-height: 48px;
  padding: 0 24px;
  box-shadow: none !important;
}
.wc-block-components-totals-coupon__button:hover { background: var(--c7-well) !important; color: var(--c7-ink) !important; }

/* ── Checkout form fields — same border language as the coupon input ─────── */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-combobox input,
.wc-block-checkout .wc-block-components-select .wc-block-components-select__select,
.wc-block-checkout select,
.wc-block-checkout textarea {
  border: 1px solid var(--c7-border) !important;
  border-radius: 8px !important;
  background: var(--c7-card) !important;
  box-shadow: none !important;
  color: var(--c7-ink);
}
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-combobox input:focus,
.wc-block-checkout .wc-block-components-select .wc-block-components-select__select:focus,
.wc-block-checkout select:focus,
.wc-block-checkout textarea:focus {
  outline: none !important;
  border-color: var(--c7-navy) !important;
  box-shadow: none !important;
}
/* Payment option card: its edge is an inset box-shadow, not a border —
   grey ring at rest, slim navy ring when selected */
.wc-block-checkout .wc-block-components-radio-control-accordion-option {
  box-shadow: inset 0 0 0 1px var(--c7-border) !important;
  border-radius: 8px;
}
.wc-block-checkout .wc-block-components-radio-control-accordion-option:has(input:checked) {
  box-shadow: inset 0 0 0 1px var(--c7-navy) !important;
}
.wc-block-checkout .wc-block-components-radio-control__input { accent-color: var(--c7-navy); }

/* Checkout header: minimal, no band — brand text + a quiet back link */
.c7-checkout-header {
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px 32px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.c7-checkout-header__brand {
  font-family: var(--c7-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c7-ink);
  text-decoration: none;
}
.c7-back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px;
  background: var(--c7-card);
  border: 1px solid var(--c7-border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c7-ink);
  text-decoration: none;
}
.c7-back-link:hover { background: var(--c7-well); color: var(--c7-ink); }

/* Demo-checkout note on the order-received page */
.c7-demo-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 26px;
  padding: 14px 18px;
  background: #FBF2D9; /* light amber tint */
  border: 1px solid #EDD9A3;
  border-left: 4px solid var(--c7-amber);
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--c7-ink);
  text-align: left;
}
.c7-demo-note svg { flex-shrink: 0; color: var(--c7-amber-dark); margin-top: 1px; }

/* Added-to-cart banner (block notice) — theme type, no focus ring, sane link */
.wc-block-components-notice-banner {
  font-family: var(--c7-body) !important;
  font-size: 14.5px !important;
  line-height: 1.55;
  color: var(--c7-ink) !important;
  background: var(--c7-card) !important;
  border: 1px solid var(--c7-border) !important;
  border-left: 4px solid var(--c7-amber) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.wc-block-components-notice-banner:focus,
.wc-block-components-notice-banner:focus-visible { outline: none !important; }
.wc-block-components-notice-banner .wc-block-components-notice-banner__content { font-size: 14.5px; }
.wc-block-components-notice-banner a {
  font-size: 14.5px !important;
  font-weight: 600;
  color: var(--c7-navy) !important;
  text-decoration: none;
}
.wc-block-components-notice-banner a:hover { text-decoration: underline; }

/* ── Legacy wc-block-grid (empty-cart "New in store") — full card parity
   with the related-products cards ───────────────────────────────────────── */
.wc-block-grid__products { display: flex; gap: 24px; }
.wc-block-grid__product {
  flex: 1 1 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 18px !important;
  position: relative;
  text-align: left;
  background: var(--c7-card);
  border: 1px solid var(--c7-border) !important;
  border-radius: 12px;
  overflow: hidden;
}
.wc-block-grid__product .wc-block-grid__product-link { text-decoration: none; color: var(--c7-ink); }
.wc-block-grid__product .wc-block-grid__product-image { margin: 0 0 14px; }
.wc-block-grid__product .wc-block-grid__product-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.wc-block-grid__product .wc-block-grid__product-title {
  font-family: var(--c7-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--c7-ink);
  padding: 0 76px 4px 18px;
  margin: 0;
}
.wc-block-grid__product .wc-block-grid__product-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--c7-ink);
  padding: 0 76px 0 18px;
  margin: 0;
}
.wc-block-grid__product .wc-block-grid__product-price del { color: var(--c7-faint); font-weight: 400; font-size: 14px; }
.wc-block-grid__product .wc-block-grid__product-price ins { text-decoration: none; }
.wc-block-grid__product .wc-block-grid__product-rating { display: none; }
.wc-block-grid__product .wc-block-grid__product-onsale {
  position: absolute;
  top: 14px;
  left: 14px;
  right: auto;
  z-index: 2;
  margin: 0;
  background: var(--c7-amber);
  color: var(--c7-amber-ink);
  border: 0;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.55;
}
/* Icon-only button, right of the text block (cart when it adds directly,
   arrow when it leads to the product page) */
.wc-block-grid__product .wc-block-grid__product-add-to-cart {
  position: absolute;
  right: 18px;
  bottom: 22px;
  margin: 0;
}
.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link {
  width: 50px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--c7-navy);
  color: #fff;
  font-size: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link:hover { background: #1f2937; }
.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link::before {
  content: "";
  width: 19px;
  height: 19px;
  background: #fff;
  -webkit-mask: 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='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15'/><path d='M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  mask: 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='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15'/><path d='M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
}
.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link.ajax_add_to_cart::before {
  -webkit-mask: 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='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>") center / contain no-repeat;
  mask: 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='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>") center / contain no-repeat;
}

/* No outline flash when clicking a card (mouse focus); keyboard keeps a ring */
.wc-block-grid__product a:focus:not(:focus-visible) { outline: none !important; }
.wc-block-grid__product a.wc-block-grid__product-link:focus-visible {
  outline: 2px solid var(--c7-navy);
  outline-offset: -2px;
  border-radius: 12px;
}

/* Related-products section heading — match the other section headings */
.wp-block-woocommerce-product-collection h2.wp-block-heading {
  font-family: var(--c7-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c7-ink);
}

/* Programmatically-focused containers (tabindex="-1" — Woo focuses the cart
   items table after a removal, etc.) are unreachable by keyboard, so their
   focus ring is pure noise. */
.wc-block-cart [tabindex="-1"]:focus,
.wc-block-checkout [tabindex="-1"]:focus,
table.wc-block-cart-items:focus { outline: none !important; }

/* Mobile banner: two compact lines instead of a six-line column */
@media (max-width: 640px) {
  .c7-banner { flex-wrap: wrap; row-gap: 2px; padding: 9px 44px; }
  .c7-banner__tail { display: none; }
  .c7-banner__link { flex-basis: 100%; justify-content: center; }
}

/* ── Focus outlines: keyboard only, site-wide ─────────────────────────────── */
/* TT5 ships `:where(.wp-site-blocks :focus){outline:solid 2px}` — an explicit
   :focus style, so every mouse click flashes a black rectangle on links
   (logo, nav, breadcrumbs, card titles, tiles). Suppress for pointer focus,
   keep a navy ring for keyboard users. Supersedes the earlier per-surface
   fixes, which remain as harmless specifics. */
.wp-site-blocks :focus:not(:focus-visible) { outline: none; }
.wp-site-blocks :focus-visible { outline: 2px solid var(--c7-navy); outline-offset: 2px; }