/* Seboozoo — WooCommerce overrides */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--sb-font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.2rem !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--sb-gold-text-on-light); /* WCAG AA ≥4.5:1 on cream/white */
  font-weight: 700;
  font-family: var(--sb-font-body);
}
/* Sale-strikethrough should still be visible but recede.
   #555 = 8.6:1 on white, 7.4:1 on cream — passes WCAG AA (and AAA) for body text.
   The broad selectors cover legacy WooCommerce markup AND block-based cart
   cross-sells (.wc-block-grid) AND mini-cart blocks (.wc-block-components-*). */
.woocommerce del,
.woocommerce del *,
.wc-block-grid del,
.wc-block-grid del *,
[class*="wc-block"] del,
[class*="wc-block"] del * {
  color: #555 !important;
  /* Blocksy applies opacity:.5 to <del>; force opaque so the #555 actually
     renders #555 (and not a 50%-blended #a6a4a0 that fails WCAG AA). */
  opacity: 1 !important;
  font-weight: 500;
  text-decoration-thickness: 1px;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--sb-black);
  color: var(--sb-white);
  border-radius: var(--sb-radius);
  font-family: var(--sb-font-display);
  text-transform: uppercase;
  letter-spacing: var(--sb-tracking-button);
  font-weight: 400;
  padding: 1rem 1.7rem;
  transition: background .25s var(--sb-ease), color .25s var(--sb-ease);
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--sb-gold);
  color: var(--sb-black);
}

.woocommerce span.onsale {
  background: var(--sb-gold);
  color: var(--sb-black);
  font-family: var(--sb-font-body);
  letter-spacing: 0.08em;
  border-radius: var(--sb-radius);
  padding: 0.4rem 0.6rem;
}

.woocommerce div.product .product_title {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.01em;
}

.woocommerce-breadcrumb {
  font-family: var(--sb-font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--sb-gold-text-on-light); /* AA-safe on cream/white */
}
.woocommerce-breadcrumb a { color: inherit; }
.woocommerce-breadcrumb a:hover { color: var(--sb-black); }

.woocommerce-tabs ul.tabs li {
  font-family: var(--sb-font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Tab link colors — WCAG AA contrast on cream/white backgrounds. Need
   !important because Blocksy's tab link rule binds to --theme-palette-color-1
   which I've remapped to gold (good elsewhere, but here it would fail AA). */
.woocommerce-tabs ul.tabs li a { color: var(--sb-black) !important; }
.woocommerce-tabs ul.tabs li:not(.active) a { color: #595959 !important; }
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover { color: var(--sb-black) !important; }

/* Single product layout improvement */
@media (min-width: 900px) {
  .woocommerce div.product .images,
  .woocommerce div.product div.images { width: 56% !important; }
  .woocommerce div.product .summary,
  .woocommerce div.product div.summary { width: 40% !important; }
}

/* Cart + checkout */
.woocommerce table.shop_table th { font-family: var(--sb-font-body); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; }

/* Form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border-radius: var(--sb-radius);
  border: 1px solid rgba(0,0,0,0.18);
  padding: 0.9rem 1rem;
}
.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible {
  border-color: var(--sb-gold-text-on-light);
  outline: 2px solid var(--sb-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(255,210,74,0.35); /* high-contrast focus ring */
}

/* Mini-cart / header */
.ct-header-cart .ct-icon-container { color: inherit; }

/* Cart / checkout / account: align the block content to the same full-width
   6rem gutter as the header & footer (these block pages use a constrained,
   centered block layout that otherwise sits narrower than the chrome). */
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-account .entry-content {
  max-width: none !important;
  padding-inline: clamp(1.5rem, 6vw, 6rem) !important;
}
body.woocommerce-cart .entry-content > .alignwide,
body.woocommerce-cart .entry-content > .alignfull,
body.woocommerce-cart .entry-content > *,
body.woocommerce-checkout .entry-content > .alignwide,
body.woocommerce-checkout .entry-content > .alignfull,
body.woocommerce-checkout .entry-content > *,
body.woocommerce-account .entry-content > * {
  max-width: none !important;
  margin-inline: 0 !important;
  width: auto !important;
}

/* My Account navigation — dark panel (#0A0A0A) with cream links. Blocksy gives
   the active/hover tab a gold fill, but no longer wraps the nav in .ct-acount-nav,
   so the old rules stopped applying and the label colour didn't flip → cream/gold
   text on a gold fill (active "Dashboard") and an invisible hover. Target the real
   wrapper and make hover + active a gold pill with a dark, high-contrast label. */
.woocommerce-MyAccount-navigation-link a {
  color: var(--sb-cream) !important;
}
.woocommerce-MyAccount-navigation-link a svg,
.woocommerce-MyAccount-navigation-link a [class*="ct-icon"] {
  color: currentColor !important;
}
.woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-MyAccount-navigation-link a:focus-visible,
.woocommerce-MyAccount-navigation-link.is-active a {
  background-color: var(--sb-gold) !important;
  color: var(--sb-black) !important; /* dark label on the gold fill */
}

/* Product USP strip below add-to-cart — aligned 2-col list with hanging check */
.sb-product-usp {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1.75rem;
  font-family: var(--sb-font-body);
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem;
  color: #4a4a4a;
}
@media (max-width: 520px) { .sb-product-usp { grid-template-columns: 1fr; } }
.sb-product-usp li {
  display: flex; align-items: flex-start; gap: 0.55rem; line-height: 1.35;
}
.sb-product-usp li::before {
  content: '✓'; flex: none;
  color: var(--sb-gold-text-on-light); font-weight: 700;
}

/* ===== Shop cover (top of /winkel/) ===== */
.sb-shop-cover {
  position: relative;
  background: radial-gradient(120% 140% at 85% 30%, #1c1c1c 0%, var(--sb-black) 60%);
  color: var(--sb-white);
  overflow: hidden;
  isolation: isolate;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.sb-shop-cover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--sb-gold), transparent 60%);
}
.sb-shop-cover__inner {
  position: relative; z-index: 2;
  max-width: var(--sb-content);
  margin: 0 auto;
  padding: clamp(2.75rem, 6vw, 5rem) clamp(1.5rem, 6vw, 4rem);
  min-height: clamp(220px, 30vw, 360px);
  display: flex; align-items: center;
}
.sb-shop-cover__copy { max-width: 60ch; min-width: 0; }
.sb-shop-cover__copy .sb-eyebrow { color: var(--sb-gold); }
/* Cover sits on a dark canvas even though /winkel/ is a "light" page, so the
   heading must stay white — beat the .woocommerce h1 { color: black } rule. */
.sb-shop-cover .sb-shop-cover__copy h1,
.woocommerce .sb-shop-cover__copy h1 {
  font-family: var(--sb-font-display);
  font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em;
  line-height: 1.0;
  font-size: clamp(2.2rem, 5vw, 4rem);
  margin: 0.6rem 0 1rem;
  color: var(--sb-white) !important;
}
.sb-shop-cover__copy p {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 46ch; margin: 0;
}
@media (min-width: 860px) {
  .sb-shop-cover__copy { max-width: 72%; }
}
@media (max-width: 600px) {
  .sb-shop-cover__copy { max-width: 100%; }
  .sb-shop-cover__copy h1 { font-size: clamp(1.7rem, 8vw, 2.3rem); overflow-wrap: break-word; }
  .sb-shop-cover__inner { min-height: 0; }
}

/* ===== Shop archive (/winkel/): align content to the header/footer rhythm =====
   Blocksy normally constrains the shop to a centered 1290px container, which made
   the header look narrower here than on the full-bleed homepage and left empty
   space to the right of the 3-product grid. Run the shop content full width with
   the same 6rem gutters as the header & footer, then fill the grid evenly. */
body.woocommerce-shop #main .ct-container[data-vertical-spacing],
body.post-type-archive-product #main .ct-container[data-vertical-spacing] {
  max-width: none !important;
  padding-inline: clamp(1.5rem, 6vw, 6rem) !important;
}
/* The cover band is full-bleed (rendered outside the padded content container),
   so to line its copy up with the grid/header/footer it needs the FULL content
   inset: my container gutter clamp(1.5rem,6vw,6rem) + Blocksy's inner 5vw gutter. */
body.woocommerce-shop .sb-shop-cover__inner,
body.post-type-archive-product .sb-shop-cover__inner {
  max-width: none;
  margin: 0;
  padding-inline: calc(clamp(1.5rem, 6vw, 6rem) + 5vw);
}

/* 3-up product grid that fills the full content width (no right-hand gap) */
body.woocommerce-shop ul.products,
body.post-type-archive-product ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(1.25rem, 2.5vw, 2.5rem) !important;
  width: 100%;
  margin: 0 !important;
}
body.woocommerce-shop ul.products li.product,
body.post-type-archive-product ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--sb-radius-l);  /* match homepage cards */
  overflow: hidden;
  padding: clamp(1.75rem, 2.2vw, 2.5rem) clamp(1.75rem, 2.2vw, 2.5rem) clamp(2rem, 2.6vw, 2.75rem);
  display: flex; flex-direction: column;
  transition: transform .35s var(--sb-ease), box-shadow .35s var(--sb-ease);
}
body.woocommerce-shop ul.products li.product:hover,
body.post-type-archive-product ul.products li.product:hover {
  transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0,0,0,0.18);
}
/* Product image fills the tile edge-to-edge (no surrounding space) */
body.woocommerce-shop ul.products li.product img,
body.post-type-archive-product ul.products li.product img {
  background: var(--sb-cream);
  border-radius: var(--sb-radius);  /* match homepage cards */
  aspect-ratio: 1/1; object-fit: cover;
  padding: 0;
  width: 100%;
  margin: 0 0 1.5rem !important;
}
body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title,
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title {
  color: var(--sb-black) !important;
  font-weight: 800 !important;          /* match homepage cards */
  letter-spacing: -0.01em;
  font-size: clamp(1.3rem, 1.6vw, 1.6rem) !important;
  line-height: 1.1; margin: 0 0 .5rem !important; padding: 0 !important;
}
body.woocommerce-shop ul.products li.product .price,
body.post-type-archive-product ul.products li.product .price {
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  margin-bottom: 1.25rem;
}
/* Push the add-to-cart button to the bottom so unequal copy keeps cards aligned */
body.woocommerce-shop ul.products li.product .button,
body.woocommerce-shop ul.products li.product .added_to_cart,
body.post-type-archive-product ul.products li.product .button,
body.post-type-archive-product ul.products li.product .added_to_cart {
  margin-top: auto !important;
  width: 100%; text-align: center;
}

/* Cart cross-sell / wc-block-grid add-to-cart buttons.
   Blocksy ships them as white-on-gold (2.25:1 — fails WCAG AA). Force the
   safe palette: black on gold = 9.6:1 AAA. */
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product a.button,
.wc-block-grid__product a[href*="add-to-cart"],
[class*="wc-block"] a[href*="add-to-cart"] {
  background: var(--sb-gold) !important;
  color: var(--sb-black) !important;
  border-color: var(--sb-gold) !important;
  font-family: var(--sb-font-display) !important;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product a.button:hover,
.wc-block-grid__product a[href*="add-to-cart"]:hover,
[class*="wc-block"] a[href*="add-to-cart"]:hover {
  background: var(--sb-black) !important;
  color: #fff !important;
  border-color: var(--sb-black) !important;
}
@media (max-width: 900px) {
  body.woocommerce-shop ul.products,
  body.post-type-archive-product ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  body.woocommerce-shop ul.products,
  body.post-type-archive-product ul.products { grid-template-columns: 1fr !important; }
}