/*
 * ════════════════════════════════════════════════════════════════════════
 *  BEIM RENERT – WOOCOMMERCE DESIGN SYSTEM
 *  A fully custom, atmospheric storefront that extends the bar homepage.
 *  Loaded only on WooCommerce contexts (see functions.php → renert_is_wc()).
 *
 *  Design language (extracted from the homepage + hardcoded shop section):
 *    · Ink #0C0C0C · Paper #fff · Rust #A84020 (hover #8A3318)
 *    · Barlow Condensed 900 UPPERCASE → display
 *    · DM Mono → kickers, meta, prices, buttons (wide tracking, small)
 *    · Barlow → body (italic = English half of bilingual copy)
 *    · Hard borders (2px grid / 4px dividers), zero radius
 *    · Black "section bands", the Renert fox as a faint parallax motif
 *  ════════════════════════════════════════════════════════════════════════ */

/* The brand palette lives in style.css – this stylesheet declares
   'beim-renert-style' as a dependency, so those tokens are always defined by
   the time this file is parsed. Repeating them here meant a colour change had
   to be made twice, which is exactly how two files drift apart. Only the two
   shop-only colours are declared below. */
:root {
  --rn-mute-soft:  #AAAAAA;
  --rn-stock:      #2D8A4E;

  --rn-cond: 'Barlow Condensed', sans-serif;
  --rn-mono: 'DM Mono', monospace;
  --rn-body: 'Barlow', sans-serif;

  --rn-pad:   40px;   /* desktop gutter */
  --rn-pad-m: 20px;   /* mobile gutter  */
  --rn-nav:   72px;   /* fixed nav height */
}

/* ════════════════════════════════════════════════════════════════════════
   0 · SHARED PRIMITIVES
   ════════════════════════════════════════════════════════════════════════ */

.rnwc-kicker {
  font-family: var(--rn-mono);
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--rn-rust);
}

/* A reusable mono pill/button shell (ghost → fills on hover) */
.rnwc-btn,
.rnwc-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--rn-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 2px solid var(--rn-ink);
  background: var(--rn-ink);
  color: #fff;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  text-align: center;
}
.rnwc-btn:hover { background: var(--rn-rust); border-color: var(--rn-rust); color: #fff; }
.rnwc-btn-ghost { background: none; color: var(--rn-ink); }
.rnwc-btn-ghost:hover { background: var(--rn-ink); color: #fff; }

/* ════════════════════════════════════════════════════════════════════════
   1 · ATMOSPHERIC PAGE HERO  (shop · category · cart · checkout · account)
   The dark, branded header that makes the store feel native to the bar.
   ════════════════════════════════════════════════════════════════════════ */

.rnwc-hero {
  position: relative;
  background: var(--rn-ink);
  color: #fff;
  overflow: hidden;
  padding-top: var(--rn-nav);
  border-bottom: 4px solid var(--rn-rust);
  isolation: isolate;
}
/* subtle warm vignette so the flat black reads as "lit" */
.rnwc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(168,64,32,0.30), transparent 55%),
    radial-gradient(90% 70% at 0% 120%, rgba(255,255,255,0.05), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
/* the Renert fox – faint parallax watermark, lower-right.
   Carries .fox-layer + data-fox-speed, so main.js drives it with the same
   scroll-parallax used by the homepage foxes (translateY on this element). */
.rnwc-hero .rnwc-hero__fox {
  position: absolute;
  right: -2%;
  top: calc(var(--rn-nav) + 20px); /* below the band so the head stays visible (all heroes: shop, cart, checkout, account) */
  bottom: auto;
  width: clamp(220px, 40vw, 560px);
  opacity: 0.07;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  z-index: -1; /* keep behind hero content (overrides the global .fox-layer z-index:0) */
}
/* The slim breadcrumb hero (single product) is too short to frame the fox, so it
   anchors a smaller one to the right. Vertical centring lives on the <img> so the
   parallax translateY main.js writes to the .fox-layer span is never overwritten. */
.rnwc-hero--slim .rnwc-hero__fox {
  width: clamp(150px, 18vw, 260px);
  right: 1%;
  top: 50%;
  bottom: auto;
  opacity: 0.07;
}
.rnwc-hero--slim .rnwc-hero__fox img { transform: translateY(-50%); }
.rnwc-hero__fox img { width: 100%; height: auto; display: block; } /* white artwork (shopfox_white) – no CSS inversion needed */

/* top band – mirrors the homepage .section-band */
.rnwc-hero__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px var(--rn-pad);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rnwc-hero__band .rnwc-kicker { color: var(--rn-rust); }
.rnwc-hero__meta {
  font-family: var(--rn-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.rnwc-hero__body {
  padding: 56px var(--rn-pad) 60px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
/* Specificity note: the generic ".woocommerce h1/h2/h3" rule (added later in
   this file) would otherwise repaint these white titles ink-black on the dark
   hero. Scoping with the parent class lifts them above that rule. */
.rnwc-hero .rnwc-hero__title {
  font-family: var(--rn-cond);
  font-weight: 900;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.88;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.rnwc-hero .rnwc-hero__title .accent { color: var(--rn-rust); }
.rnwc-hero__desc {
  margin: 26px 0 0;
  max-width: 34rem;
  font-family: var(--rn-body);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.62);
}
.rnwc-hero__desc .en { color: rgba(255,255,255,0.4); }

/* Checkout flow step-rail (Basket → Checkout → Confirmation) */
.rnwc-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0 0 30px;
  padding: 0;
}
.rnwc-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rn-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
}
.rnwc-steps li span {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  font-size: 10px;
}
.rnwc-steps li.is-active { color: #fff; }
.rnwc-steps li.is-active span { border-color: var(--rn-rust); background: var(--rn-rust); color: #fff; }
.rnwc-steps li.is-done { color: rgba(255,255,255,0.7); }
.rnwc-steps li.is-done span { border-color: rgba(255,255,255,0.5); }

/* Slim variant – used as a breadcrumb bar on single product */
.rnwc-hero--slim { border-bottom-width: 2px; }
.rnwc-hero--slim .rnwc-hero__body { display: none; }

/* (The lower fox anchor now lives on the base .rnwc-hero__fox rule above –
   it applies to every dark hero: shop, category, cart, checkout, account.) */

@media (max-width: 768px) {
  .rnwc-hero__band { padding: 12px var(--rn-pad-m); }
  .rnwc-hero__body { padding: 28px var(--rn-pad-m) 30px; }
  .rnwc-steps { gap: 16px; }
  /* The shop/category description stays visible on mobile too (it used to be
     hidden here to surface products sooner) – just tightened a little. */
  .renert-shop-archive .rnwc-hero__desc { margin-top: 18px; font-size: 0.92rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   2 · BREADCRUMB
   ════════════════════════════════════════════════════════════════════════ */

.rnwc-breadcrumb {
  font-family: var(--rn-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rn-mute-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rnwc-breadcrumb a { color: var(--rn-mute); transition: color .15s; }
.rnwc-breadcrumb a:hover { color: var(--rn-rust); }
.rnwc-breadcrumb .sep { color: rgba(12,12,12,0.25); }
/* On the dark hero band */
.rnwc-hero .rnwc-breadcrumb { color: rgba(255,255,255,0.4); }
.rnwc-hero .rnwc-breadcrumb a { color: rgba(255,255,255,0.6); }
.rnwc-hero .rnwc-breadcrumb a:hover { color: #fff; }
.rnwc-hero .rnwc-breadcrumb .sep { color: rgba(255,255,255,0.25); }

/* ════════════════════════════════════════════════════════════════════════
   3 · TRUST / REASSURANCE BAND
   ════════════════════════════════════════════════════════════════════════ */

.rnwc-trust {
  list-style: none;
  display: grid;
  grid-auto-flow: column;      /* one column per item → band re-fits 2/3/4 items */
  grid-auto-columns: 1fr;
  margin: 0;
  padding: 0;
  background: var(--rn-ink);
  border-bottom: 2px solid var(--rn-ink);
}
.rnwc-trust li {
  padding: 20px 28px;
  border-right: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rnwc-trust li:last-child { border-right: none; }
.rnwc-trust__k {
  font-family: var(--rn-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rn-rust);
}
.rnwc-trust__v {
  font-family: var(--rn-body);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
}
@media (max-width: 820px) {
  .rnwc-trust { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-auto-columns: auto; }
  .rnwc-trust li:nth-child(2) { border-right: none; }
  .rnwc-trust li:nth-child(1), .rnwc-trust li:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.1); }
}
/* Mobile: keep the band compact (2×2, tighter) and – see §16 – move it to the
   foot of the archive so it never delays the products. */
@media (max-width: 480px) {
  .rnwc-trust li { padding: 14px 16px; }
  .rnwc-trust__v { font-size: 0.76rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   4 · GLOBAL WOOCOMMERCE PRIMITIVES (buttons · headings · price · badges
       · forms · notices · stars) – palette + type harmonised with the bar
   ════════════════════════════════════════════════════════════════════════ */

/* Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
  background: var(--rn-ink);
  color: #fff;
  border: 2px solid var(--rn-ink);
  border-radius: 0;
  font-family: var(--rn-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 14px 28px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  box-shadow: none;
  text-shadow: none;
  line-height: 1.4;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
  background: var(--rn-rust);
  border-color: var(--rn-rust);
  color: #fff;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt {
  background: var(--rn-rust);
  border-color: var(--rn-rust);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover {
  background: var(--rn-ink);
  border-color: var(--rn-ink);
}
/* Secondary / ghost buttons (e.g. "Update cart", "Continue shopping") */
.woocommerce a.button.wc-backward,
.woocommerce button.button[name="update_cart"],
.woocommerce-page a.button.wc-backward {
  background: none;
  color: var(--rn-ink);
}
.woocommerce a.button.wc-backward:hover,
.woocommerce button.button[name="update_cart"]:hover {
  background: var(--rn-ink);
  color: #fff;
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Headings */
.woocommerce .woocommerce-products-header__title,
.woocommerce .page-title,
.woocommerce h1,
.woocommerce h2,
.woocommerce h3 {
  font-family: var(--rn-cond);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--rn-ink);
}

/* Price */
.woocommerce .price,
.woocommerce .amount,
.woocommerce .woocommerce-Price-amount {
  font-family: var(--rn-mono);
  font-weight: 500;
  color: var(--rn-ink);
}
.woocommerce del { opacity: 0.5; }
.woocommerce ins { text-decoration: none; color: var(--rn-rust); }

/* Sale / featured badge */
.woocommerce span.onsale {
  background: var(--rn-rust);
  color: #fff;
  border-radius: 0;
  font-family: var(--rn-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  min-height: auto;
  min-width: auto;
  line-height: 1;
  padding: 7px 11px;
  margin: 0;
  top: 0; right: 0; left: auto;
}

/* Star ratings */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before,
.woocommerce p.stars a { color: var(--rn-rust); }

/* Forms – inputs / selects / textareas */
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce-page form .input-text,
.woocommerce-page form select {
  border: 1px solid #d8d8d8;
  border-radius: 0;
  font-family: var(--rn-body);
  font-size: 14px;
  padding: 13px 16px;
  color: var(--rn-ink);
  background-color: #fff;
  box-shadow: none;
  transition: border-color .15s;
}
.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
  border-color: var(--rn-ink);
  outline: none;
  box-shadow: none;
}
.woocommerce .select2-container--default .select2-selection--single {
  height: auto;
  display: flex;
  align-items: center;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); }
.woocommerce .select2-dropdown { border-color: #d8d8d8; border-radius: 0; }
.woocommerce .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--rn-rust); }

/* Form labels */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  font-family: var(--rn-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rn-mute);
  margin-bottom: 6px;
  display: block;
}
.woocommerce form .form-row .required { color: var(--rn-rust); border: none; }
.woocommerce form .form-row.woocommerce-invalid .input-text { border-color: var(--rn-rust); }

/* Notices – branded info / success / error */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce .woocommerce-info {
  border-radius: 0;
  border-top: 3px solid var(--rn-rust);
  background: var(--rn-panel);
  font-family: var(--rn-body);
  font-size: 0.9rem;
  color: var(--rn-ink);
  padding: 1.2em 1.4em 1.2em 3.2em;
  list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--rn-rust); top: 1.2em; left: 1.3em; }
.woocommerce-error { border-top-color: #c0392b; }
.woocommerce-error::before { color: #c0392b; top: 1.2em; left: 1.3em; }
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  padding: 9px 18px;
  font-size: 9px;
}

/* ════════════════════════════════════════════════════════════════════════
   5 · STOREFRONT / SHOP ARCHIVE  (.renert-shop-archive)
   ════════════════════════════════════════════════════════════════════════ */

.renert-shop-archive { background: #fff; }

/* Product grid – the bordered, full-bleed homepage grid */
.renert-shop-archive ul.products.shop-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  border-left: 2px solid var(--rn-ink);
  border-top: 2px solid var(--rn-ink);
  list-style: none;
  padding: 0;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
}
/* Kill WC clearfix pseudo-elements that become phantom grid cells */
.renert-shop-archive ul.products::before,
.renert-shop-archive ul.products::after { content: none !important; display: none !important; }
@media (max-width: 900px) { .renert-shop-archive ul.products.shop-grid { grid-template-columns: repeat(2, 1fr); } }

/* ════════════════════════════════════════════════════════════════════════
   6 · PRODUCT CARD  (shared by archive · related · upsells · cross-sells)
   Markup comes from woocommerce/content-product.php (homepage .shop-product)
   ════════════════════════════════════════════════════════════════════════ */

.renert-shop-archive ul.products li.product,
.woocommerce .related.products ul.products li.product,
.woocommerce .up-sells ul.products li.product,
.woocommerce .cross-sells ul.products li.product {
  border-bottom: 2px solid var(--rn-ink);
  border-right: 2px solid var(--rn-ink);
  display: flex !important;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important; /* let 1fr tracks stay equal; a long sale price must
                              not stretch its column or push the grid off-screen */
  position: relative;
  background: #fff;
}

/* Image – square box, image fills, zoom on hover */
.renert-shop-archive ul.products li.product a.product-img,
.woocommerce .related.products ul.products li.product a.product-img,
.woocommerce .up-sells ul.products li.product a.product-img,
.woocommerce .cross-sells ul.products li.product a.product-img {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--rn-grey-img);
  border-bottom: 2px solid var(--rn-ink);
  position: relative;
  line-height: 0;
}
.renert-shop-archive ul.products li.product a.product-img img,
.woocommerce .related.products ul.products li.product a.product-img img,
.woocommerce .up-sells ul.products li.product a.product-img img,
.woocommerce .cross-sells ul.products li.product a.product-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
  display: block;
}
.renert-shop-archive ul.products li.product:hover a.product-img img,
.woocommerce .related.products ul.products li.product:hover a.product-img img,
.woocommerce .up-sells ul.products li.product:hover a.product-img img,
.woocommerce .cross-sells ul.products li.product:hover a.product-img img { transform: scale(1.05); }

/* Badge (NEW / SALE / BEST) */
.renert-shop-archive ul.products li.product .product-tag,
.woocommerce .related.products ul.products li.product .product-tag,
.woocommerce ul.products li.product .product-tag {
  position: absolute;
  top: 0; right: 0;
  z-index: 2;
  background: var(--rn-rust);
  color: #fff;
  font-family: var(--rn-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 6px 11px;
  line-height: 1;
}
/* Stack wrapper when a product shows more than one badge */
.renert-shop-archive ul.products li.product .product-tags,
.woocommerce .related.products ul.products li.product .product-tags,
.woocommerce ul.products li.product .product-tags {
  position: absolute;
  top: 0; right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.renert-shop-archive ul.products li.product .product-tags .product-tag,
.woocommerce .related.products ul.products li.product .product-tags .product-tag,
.woocommerce ul.products li.product .product-tags .product-tag {
  position: static;
}

/* Info block */
.renert-shop-archive ul.products li.product .product-info,
.woocommerce .related.products ul.products li.product .product-info,
.woocommerce .up-sells ul.products li.product .product-info,
.woocommerce .cross-sells ul.products li.product .product-info {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
@media (max-width: 768px) {
  .renert-shop-archive ul.products li.product .product-info,
  .woocommerce .related.products ul.products li.product .product-info { padding: 16px; }
}
/* Head layout (grid, desktop price-on-title-line) comes from style.css
   .product-head; only spacing + the name-margin reset live here because the
   archive typography selectors below out-specify the base rules. */
.renert-shop-archive ul.products li.product .product-head,
.woocommerce .related.products ul.products li.product .product-head {
  margin-bottom: 6px;
}
/* Phones hide the description, so open up the gap between title and button. */
@media (max-width: 768px) {
  .renert-shop-archive ul.products li.product .product-head,
  .woocommerce .related.products ul.products li.product .product-head { margin-bottom: 14px; }
}
.renert-shop-archive ul.products li.product .product-head .product-name,
.woocommerce .related.products ul.products li.product .product-head .product-name,
.woocommerce .up-sells ul.products li.product .product-head .product-name,
.woocommerce .cross-sells ul.products li.product .product-head .product-name {
  margin: 0;
}

/* Card typography. These selectors already out-specify the homepage base rules
   in style.css (and WooCommerce core does not style these custom .product-*
   classes), so no !important is needed – specificity alone wins. */
.renert-shop-archive ul.products li.product .product-cat,
.woocommerce .related.products ul.products li.product .product-cat,
.woocommerce .up-sells ul.products li.product .product-cat,
.woocommerce .cross-sells ul.products li.product .product-cat {
  font-family: var(--rn-mono);
  /* Slightly smaller + tighter tracking so longer names ("Tank Tops") stay on
     one line in the narrow two-up mobile grid instead of wrapping. */
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--rn-mute-soft);
  text-transform: uppercase;
  font-weight: 400;
}
.renert-shop-archive ul.products li.product .product-price,
.woocommerce .related.products ul.products li.product .product-price,
.woocommerce .up-sells ul.products li.product .product-price,
.woocommerce .cross-sells ul.products li.product .product-price {
  font-family: var(--rn-mono);
  font-size: 0.85rem;
  color: var(--rn-ink);
  font-weight: 400;
  white-space: nowrap;
}
.renert-shop-archive ul.products li.product .product-name,
.renert-shop-archive ul.products li.product .product-name a,
.woocommerce .related.products ul.products li.product .product-name,
.woocommerce .related.products ul.products li.product .product-name a,
.woocommerce .up-sells ul.products li.product .product-name,
.woocommerce .up-sells ul.products li.product .product-name a,
.woocommerce .cross-sells ul.products li.product .product-name,
.woocommerce .cross-sells ul.products li.product .product-name a {
  font-family: var(--rn-cond);
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--rn-ink);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  text-decoration: none;
  line-height: 1.1;
}
.renert-shop-archive ul.products li.product .product-name a:hover,
.woocommerce .related.products ul.products li.product .product-name a:hover,
.woocommerce .cross-sells ul.products li.product .product-name a:hover { color: var(--rn-rust); }
.renert-shop-archive ul.products li.product .product-desc,
.woocommerce .related.products ul.products li.product .product-desc,
.woocommerce .cross-sells ul.products li.product .product-desc {
  font-family: var(--rn-body);
  font-size: 0.85rem;
  color: var(--rn-mute);
  line-height: 1.55;
  font-weight: 400;
  margin-bottom: 18px;
}
/* Phones hide the card description (matches the homepage grid in style.css).
   These archive selectors out-specify style.css's ".product-info .product-desc",
   so the hide has to live here too to win on /shop, related and cross-sells. */
@media (max-width: 768px) {
  .renert-shop-archive ul.products li.product .product-desc,
  .woocommerce .related.products ul.products li.product .product-desc,
  .woocommerce .cross-sells ul.products li.product .product-desc { display: none; }
}

/* Price inside price span */
.renert-shop-archive .product-price .woocommerce-Price-amount,
.woocommerce .related.products .product-price .woocommerce-Price-amount { font-family: inherit; font-size: inherit; color: inherit; }
.renert-shop-archive .product-price ins,
.woocommerce .related.products .product-price ins { text-decoration: none; color: var(--rn-rust); }
.renert-shop-archive .product-price del { opacity: 0.45; font-size: 0.78em; margin-right: 5px; }

/* Card add-to-cart (ghost → fills) */
.renert-shop-archive ul.products li.product .add-to-cart,
.renert-shop-archive ul.products li.product a.button.add_to_cart_button,
.woocommerce .related.products ul.products li.product .add-to-cart,
.woocommerce .related.products ul.products li.product a.button.add_to_cart_button,
.woocommerce .up-sells ul.products li.product a.button.add_to_cart_button,
.woocommerce .cross-sells ul.products li.product a.button.add_to_cart_button,
.woocommerce .cross-sells ul.products li.product .add-to-cart {
  width: 100%;
  /* Match the homepage/bistro card button exactly (style.css .add-to-cart):
     padding 10px, letter-spacing 0.35em, line-height normal → same 36px box, so
     Add to Cart + Notify me look identical on the shop and the homepage. */
  padding: 10px;
  border: 2px solid var(--rn-ink);
  border-radius: 0;
  color: var(--rn-ink);
  background: none;
  font-family: var(--rn-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
  margin-top: auto;
  text-align: center;
  display: block;
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
  box-shadow: none;
  text-shadow: none;
  line-height: normal;
}
.renert-shop-archive ul.products li.product .add-to-cart:hover,
.renert-shop-archive ul.products li.product a.button.add_to_cart_button:hover,
.renert-shop-archive ul.products li.product a.button.add_to_cart_button.loading,
.renert-shop-archive ul.products li.product a.button.add_to_cart_button.added,
.woocommerce .related.products ul.products li.product a.button.add_to_cart_button:hover,
.woocommerce .cross-sells ul.products li.product a.button.add_to_cart_button:hover {
  background: var(--rn-ink);
  color: #fff;
}
/* loading spinner colour + hide WC "added" tick */
.woocommerce ul.products li.product a.button.add_to_cart_button.added::after { display: none; }
.woocommerce ul.products li.product a.button.loading { opacity: 1; }
.woocommerce ul.products li.product a.button.loading::after { border-top-color: currentColor; }

/* Category cards (when a shop shows sub-categories) */
.renert-shop-archive ul.products li.product-category {
  border-bottom: 2px solid var(--rn-ink);
  border-right: 2px solid var(--rn-ink);
  margin: 0 !important; padding: 0 !important; text-align: left;
}
.renert-shop-archive ul.products li.product-category a { display: block; }
.renert-shop-archive ul.products li.product-category img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-bottom: 2px solid var(--rn-ink); margin: 0;
}
.renert-shop-archive ul.products li.product-category h2.woocommerce-loop-category__title {
  font-family: var(--rn-cond); font-weight: 700; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--rn-ink);
  padding: 20px 24px; margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.renert-shop-archive ul.products li.product-category .count {
  font-family: var(--rn-mono); font-size: 0.75rem; color: var(--rn-mute-soft);
  background: none; font-weight: 400;
}

/* ════════════════════════════════════════════════════════════════════════
   7 · SINGLE PRODUCT
   ════════════════════════════════════════════════════════════════════════ */

.woocommerce div.product {
  display: grid;
  grid-template-columns: 56% 1fr;
  gap: 64px;
  align-items: start;
}
/* override WC core float/width on gallery + summary */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
}

/* Gallery – native scroll-snap carousel (markup: woocommerce/single-product/
   product-image.php; layout in §22, desktop sizing in §20). The box stays the
   positioned anchor; the magnifier lens itself anchors to each slide (§22). */
.woocommerce div.product .woocommerce-product-gallery {
  margin: 0;
  position: relative;
}
/* Custom magnifier lens (js/woocommerce.js): full-overlay zoomed view. */
.rnwc-zoom-lens {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-color: var(--rn-grey-img);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 4;
}
.rnwc-zoom-lens.is-active { opacity: 1; }

/* Summary */
.woocommerce div.product .summary { padding: 0; }
.woocommerce div.product .summary .posted_in {
  font-family: var(--rn-mono); font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--rn-rust); margin: 0 0 10px; display: block;
}
.woocommerce div.product .summary .posted_in a { color: inherit; }
.woocommerce div.product .summary > .product_title {
  font-family: var(--rn-cond); font-weight: 900;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--rn-ink);
  margin: 0 0 16px; line-height: 0.95;
}
.woocommerce div.product .summary > .price {
  font-family: var(--rn-mono); font-size: 1.3rem; letter-spacing: 0.02em;
  color: var(--rn-ink); display: block; margin: 0 0 22px;
  border-bottom: 1px solid rgba(12,12,12,0.12); padding-bottom: 22px;
}
.woocommerce div.product .summary > .price del { color: var(--rn-mute-soft); font-size: 0.8em; margin-right: 8px; }
.woocommerce div.product .summary > .price ins { text-decoration: none; color: var(--rn-rust); }
.woocommerce div.product .summary .woocommerce-product-rating { margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.woocommerce div.product .summary .woocommerce-product-rating .woocommerce-review-link {
  font-family: var(--rn-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rn-mute);
}
.woocommerce div.product .summary .woocommerce-product-details__short-description {
  font-family: var(--rn-body); font-size: 0.96rem; color: #555; line-height: 1.8; margin: 0 0 28px;
}
.woocommerce div.product .summary .woocommerce-product-details__short-description p + p { margin-top: 0.8em; }

/* Stock label */
/* `.summary .stock` (0,4,2) out-specifies WC core's `p.stock` (0,3,2) and its
   :where() colour rule (0,2,1), so specificity alone wins – no !important. */
.woocommerce div.product .summary .stock {
  font-family: var(--rn-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 0; margin: 0 0 20px;
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none;
}
.woocommerce div.product .summary .stock::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block;
}
.woocommerce div.product .summary .stock.in-stock { color: var(--rn-stock); }
.woocommerce div.product .summary .stock.out-of-stock { color: rgba(12,12,12,0.4); }

/* Variations */
.woocommerce div.product table.variations {
  width: 100%; border: none; border-collapse: collapse; margin: 0 0 22px;
}
.woocommerce div.product table.variations td { padding: 0; border: none; }
.woocommerce div.product table.variations tr { display: block; margin-bottom: 16px; }
.woocommerce div.product table.variations td.label { width: auto; padding-bottom: 8px; display: block; }
.woocommerce div.product table.variations td.label label {
  font-family: var(--rn-mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--rn-mute); margin: 0;
}
.woocommerce div.product table.variations td.value { display: block; position: relative; }
.woocommerce div.product table.variations select {
  appearance: none; -webkit-appearance: none; width: 100%;
  border: 2px solid var(--rn-ink); border-radius: 0;
  font-family: var(--rn-mono); font-size: 0.8rem; letter-spacing: 0.08em;
  padding: 13px 40px 13px 14px; color: var(--rn-ink); cursor: pointer; transition: border-color 0.15s;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230C0C0C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.woocommerce div.product table.variations select:focus { outline: none; border-color: var(--rn-rust); }
.woocommerce div.product .reset_variations {
  font-family: var(--rn-mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rn-mute); margin-top: 8px; display: inline-block;
}
.woocommerce div.product .reset_variations:hover { color: var(--rn-rust); }

/* Variation pills / colour swatches (js/woocommerce.js mirrors the dropdowns,
   which are kept hidden-but-functional so WooCommerce's logic stays intact). */
.woocommerce div.product .rnwc-pv-native {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.woocommerce div.product .rnwc-pv { display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce div.product .rnwc-pv .rnwc-size {
  min-width: 46px; padding: 11px 14px;
  font-family: var(--rn-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1; color: var(--rn-ink); background: none; border: 2px solid var(--rn-ink);
  border-radius: 0; cursor: pointer; box-sizing: border-box; transition: background .15s, color .15s;
}
.woocommerce div.product .rnwc-pv .rnwc-size:hover,
.woocommerce div.product .rnwc-pv .rnwc-size.is-active { background: var(--rn-ink); color: #fff; }
.woocommerce div.product .rnwc-pv .rnwc-size--out,
.woocommerce div.product .rnwc-pv .rnwc-size:disabled {
  color: #c2c2c2; border-color: #e2e2e2; text-decoration: line-through; cursor: not-allowed; pointer-events: none;
}
/* Sold out but still selectable: struck through and muted, yet clickable so it
   opens the "Notify me" capture. Distinct from --out (an impossible combo). */
.woocommerce div.product .rnwc-pv .rnwc-size--soldout {
  color: var(--rn-mute, #8a8a8a); border-color: #d2d2d2; text-decoration: line-through;
}
.woocommerce div.product .rnwc-pv .rnwc-size--soldout:hover,
.woocommerce div.product .rnwc-pv .rnwc-size--soldout.is-active {
  background: var(--rn-mute, #8a8a8a); color: #fff; border-color: var(--rn-mute, #8a8a8a);
}
/* Single-product "Notify me" – shown when the chosen size is out of stock. */
.woocommerce div.product .summary .rnwc-pdp-notify { margin-top: 14px; }
.woocommerce div.product .summary .rnwc-pdp-notify__btn {
  display: block; width: 100%; padding: 16px 20px; border: 2px solid var(--rn-ink);
  background: var(--rn-ink); color: #fff; font-family: var(--rn-mono); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 13px; line-height: 1; cursor: pointer; border-radius: 0;
  transition: background .15s, border-color .15s;
}
.woocommerce div.product .summary .rnwc-pdp-notify__btn:hover { background: var(--rn-rust); border-color: var(--rn-rust); }
.woocommerce div.product .rnwc-pv .rnwc-swatch {
  width: 36px; height: 36px; padding: 2px; border: 2px solid transparent; border-radius: 0;
  background: none; cursor: pointer; box-sizing: border-box; transition: border-color .15s;
}
.woocommerce div.product .rnwc-pv .rnwc-swatch > span {
  display: block; width: 100%; height: 100%; background: var(--sw, #ccc); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}
.woocommerce div.product .rnwc-pv .rnwc-swatch:hover { border-color: #bbb; }
.woocommerce div.product .rnwc-pv .rnwc-swatch.is-active { border-color: var(--rn-ink); }
.woocommerce div.product .rnwc-pv .rnwc-swatch--out,
.woocommerce div.product .rnwc-pv .rnwc-swatch:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.woocommerce div.product .single_variation .price { font-family: var(--rn-mono); font-size: 1.2rem; color: var(--rn-ink); display: block; margin-bottom: 16px; }
.woocommerce div.product .woocommerce-variation-availability .stock { margin-bottom: 16px !important; }

/* Product entirely out of stock (every size gone): no struck-through size
   pills, no dead qty/Add-to-Cart – the whole variations UI goes away. The
   summary instead shows the same "Out of stock" line a simple product gets,
   plus the Notify-me button (renert_oos_notify_block() in functions.php). */
.single-product div.product.outofstock form.cart.variations_form table.variations {
  display: none;
}
/* !important: WooCommerce's add-to-cart-variation.js calls .show() on this wrap
   at init, planting an inline display:block that outranks any normal rule. */
.single-product div.product.outofstock form.cart.variations_form .single_variation_wrap {
  display: none !important;
}

/* Qty + add-to-cart row – one bordered unit: the qty stepper sits flush against
   the Add-to-Cart button with no gap (zeroed margins keep the flex children
   adjacent; the divider is the qty's right border). */
.woocommerce div.product .summary form.cart {
  display: flex; gap: 0; align-items: stretch; margin: 0 0 22px;
  border: 2px solid var(--rn-ink); overflow: hidden;
}
.woocommerce div.product .summary form.cart.variations_form { flex-wrap: wrap; border: none; overflow: visible; }
.woocommerce div.product .summary form.cart.variations_form .woocommerce-variation-add-to-cart {
  display: flex; width: 100%; border: 2px solid var(--rn-ink); align-items: stretch; overflow: hidden;
}
/* `form.cart` is in the selector so this beats WooCommerce core's
   `div.product form.cart .quantity { margin: 0 4px 0 0 }` (the 4px was the gap). */
.woocommerce div.product .summary form.cart .quantity {
  display: flex; align-items: stretch; flex: 0 0 auto; margin: 0; float: none;
  border-right: 2px solid var(--rn-ink);
}
.woocommerce div.product .summary .quantity input.qty {
  width: 64px; text-align: center; border: none; border-radius: 0;
  font-family: var(--rn-mono); font-size: 14px; padding: 12px 8px; height: auto;
  box-shadow: none; background: transparent; -moz-appearance: textfield;
}
.woocommerce div.product .summary .quantity input.qty::-webkit-inner-spin-button,
.woocommerce div.product .summary .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; }
.woocommerce div.product .summary .quantity input.qty:focus { outline: none; }
.woocommerce div.product .summary form.cart .single_add_to_cart_button {
  flex: 1 1 auto; margin: 0; float: none; min-width: 0;
  background: var(--rn-ink); color: #fff; border: none; border-radius: 0;
  font-family: var(--rn-mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  padding: 16px 24px; cursor: pointer; transition: background .2s;
}
.woocommerce div.product .summary .single_add_to_cart_button:hover { background: var(--rn-rust); }
.woocommerce div.product .summary .single_add_to_cart_button.disabled,
.woocommerce div.product .summary .single_add_to_cart_button[disabled] { background: #ccc; cursor: not-allowed; }

/* Reassurance row under add-to-cart (injected via hook) */
.rnwc-assure {
  list-style: none; margin: 0 0 28px; padding: 22px 0 0;
  border-top: 1px solid rgba(12,12,12,0.1);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.rnwc-assure li { display: flex; gap: 11px; align-items: flex-start; }
.rnwc-assure svg { width: 19px; height: 19px; flex-shrink: 0; stroke: var(--rn-rust); margin-top: 1px; }
.rnwc-assure b {
  display: block; font-family: var(--rn-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rn-ink); font-weight: 500; margin-bottom: 3px;
}
.rnwc-assure span { font-family: var(--rn-body); font-size: 0.78rem; color: var(--rn-mute); line-height: 1.45; }
@media (max-width: 520px) { .rnwc-assure { grid-template-columns: 1fr; gap: 14px; } }

/* Product meta */
.woocommerce div.product .product_meta {
  font-family: var(--rn-mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rn-mute-soft);
  display: flex; flex-direction: column; gap: 5px;
  border-top: 1px solid rgba(12,12,12,0.1); padding-top: 20px;
}
.woocommerce div.product .product_meta > span { display: flex; gap: 8px; }
.woocommerce div.product .product_meta a { color: var(--rn-mute); }
.woocommerce div.product .product_meta a:hover { color: var(--rn-rust); }

/* Tabs (desktop ≥901px flushes the black top-border to the gallery in §20). */
.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1; margin-top: 72px; border-top: 4px solid var(--rn-ink); padding-top: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid rgba(12,12,12,0.15); padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: none !important; border-radius: 0 !important; background: none !important; margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--rn-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(12,12,12,0.4); padding: 20px 26px; display: block; transition: color 0.15s;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--rn-ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--rn-rust) !important; margin-bottom: -1px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--rn-rust); }
.woocommerce div.product .woocommerce-tabs .panel {
  padding: 44px 0; font-family: var(--rn-body); font-size: 0.97rem; color: #444; line-height: 1.85; max-width: 720px;
}
/* js/woocommerce.js §10 hides the inactive panels via [hidden] – belt and
   braces here in case a plugin ever puts a display rule on .panel. */
.woocommerce div.product .woocommerce-tabs .panel[hidden] { display: none; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
  font-family: var(--rn-cond); font-size: 1.6rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 24px; color: var(--rn-ink);
}
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3 {
  font-family: var(--rn-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rn-ink); margin: 1.4em 0 0.6em;
}
.woocommerce div.product .woocommerce-product-attributes {
  border-collapse: collapse; width: 100%; max-width: 520px;
}
.woocommerce div.product .woocommerce-product-attributes th,
.woocommerce div.product .woocommerce-product-attributes td {
  font-family: var(--rn-mono); font-size: 0.78rem; letter-spacing: 0.04em;
  padding: 13px 0; border-bottom: 1px solid rgba(12,12,12,0.1); text-align: left; background: none;
}
.woocommerce div.product .woocommerce-product-attributes th { text-transform: uppercase; color: var(--rn-mute); width: 170px; font-weight: 400; }

/* ── Product info accordion (Description / Additional info / Reviews) ──────────
   Replaces the tab strip with collapsed <details> so the product page stays
   short – the long copy and the specs are one tap away, not always expanded. */
.woocommerce div.product .rnwc-prodacc {
  /* margin-top comes from the breakpoints: 36px on phones (§21), 0 on desktop
     (§20 flushes the black bar to the gallery, like the tabs before it). */
  grid-column: 1 / -1; border-top: 4px solid var(--rn-ink);
}
.rnwc-prodacc__item { border-bottom: 1px solid rgba(12,12,12,0.15); }
.rnwc-prodacc__summary {
  list-style: none; cursor: pointer; position: relative; user-select: none;
  padding: 22px 34px 22px 2px; font-family: var(--rn-mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--rn-ink);
  transition: color 0.15s;
}
.rnwc-prodacc__summary::-webkit-details-marker { display: none; }
.rnwc-prodacc__summary:hover { color: var(--rn-rust); }
.rnwc-prodacc__summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg); transition: transform 0.2s;
}
.rnwc-prodacc__item[open] > .rnwc-prodacc__summary { color: var(--rn-rust); }
.rnwc-prodacc__item[open] > .rnwc-prodacc__summary::after { transform: translateY(-30%) rotate(-135deg); }
.rnwc-prodacc__summary:focus-visible { outline: 2px solid var(--rn-rust); outline-offset: 3px; }
.rnwc-prodacc__panel {
  padding: 4px 2px 40px; font-family: var(--rn-body); font-size: 0.97rem; color: #444;
  line-height: 1.85; max-width: 720px;
}
.rnwc-prodacc__panel h2, .rnwc-prodacc__panel h3 {
  font-family: var(--rn-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--rn-ink); margin: 1.4em 0 0.6em;
}

/* Reviews */
.woocommerce #reviews #comments ol.commentlist { margin: 0; padding: 0; }
.woocommerce #reviews #comments ol.commentlist li {
  margin: 0 0 28px; padding: 0; background: none; border: none;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text {
  border: 1px solid var(--rn-line); border-radius: 0; padding: 24px 28px; margin-left: 70px;
}
.woocommerce #reviews #comments ol.commentlist li img.avatar {
  width: 50px; height: 50px; border: 2px solid var(--rn-ink); border-radius: 0; padding: 0; background: none; position: absolute;
}
.woocommerce #reviews .comment-form-rating label,
.woocommerce #reviews #respond label {
  font-family: var(--rn-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rn-mute);
}
.woocommerce #reviews #review_form #respond .comment-reply-title {
  font-family: var(--rn-cond); font-weight: 900; text-transform: uppercase; font-size: 1.3rem;
}

/* Related / up-sells / cross-sells grids */
.woocommerce .related.products,
.woocommerce .up-sells.products,
.woocommerce .upsells.products { grid-column: 1 / -1; margin-top: 80px; clear: both; }
.woocommerce .related.products > h2,
.woocommerce .up-sells > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
  font-family: var(--rn-cond); font-weight: 900; font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--rn-rust);
  margin: 0 0 0; padding-bottom: 22px; border-bottom: 4px solid var(--rn-ink);
}
.woocommerce .related.products ul.products,
.woocommerce .up-sells ul.products,
.woocommerce .cross-sells ul.products {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
  border-left: 2px solid var(--rn-ink); border-top: 2px solid var(--rn-ink);
  list-style: none; padding: 0; margin: 0 !important; width: 100% !important; float: none !important; clear: both;
}
.woocommerce .related.products ul.products::before, .woocommerce .related.products ul.products::after,
.woocommerce .up-sells ul.products::before, .woocommerce .up-sells ul.products::after,
.woocommerce .cross-sells ul.products::before, .woocommerce .cross-sells ul.products::after { content: none !important; display: none !important; }
@media (max-width: 768px) {
  .woocommerce .related.products ul.products,
  .woocommerce .up-sells ul.products,
  .woocommerce .cross-sells ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   8 · CART
   ════════════════════════════════════════════════════════════════════════ */

.woocommerce-cart .woocommerce { display: block; }
.woocommerce-cart table.cart { border: none; margin-bottom: 0; }
.woocommerce-cart table.cart thead th {
  font-family: var(--rn-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rn-mute); font-weight: 400; border-bottom: 2px solid var(--rn-ink); padding: 0 8px 14px; background: none;
}
.woocommerce-cart table.cart td {
  /* !important kills WooCommerce's zebra striping (`tr:nth-child(2n) td` greys
     every other row), which showed as a grey band on the 2nd item + above the
     coupon on mobile. */
  border-bottom: 1px solid var(--rn-line); vertical-align: middle; padding: 22px 8px; background: none !important;
}
.woocommerce-cart table.cart td.product-thumbnail img {
  width: 84px; height: 84px; object-fit: cover; border: 2px solid var(--rn-ink);
}
.woocommerce-cart table.cart td.product-name { font-family: var(--rn-cond); }
.woocommerce-cart table.cart td.product-name a {
  font-family: var(--rn-cond); font-size: 1.15rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--rn-ink);
}
.woocommerce-cart table.cart td.product-name a:hover { color: var(--rn-rust); }
.woocommerce-cart table.cart td.product-name .variation {
  font-family: var(--rn-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rn-mute); margin-top: 6px;
}
.woocommerce-cart table.cart td.product-price .woocommerce-Price-amount,
.woocommerce-cart table.cart td.product-subtotal .woocommerce-Price-amount {
  font-family: var(--rn-mono); font-size: 0.85rem;
}
.woocommerce-cart table.cart td.product-subtotal { font-weight: 500; }
/* qty stepper */
.woocommerce-cart table.cart td.product-quantity .quantity {
  display: inline-flex; align-items: stretch; border: 2px solid var(--rn-ink);
}
.woocommerce-cart table.cart td.product-quantity input.qty {
  width: 54px; text-align: center; border: none; background: transparent;
  font-family: var(--rn-mono); font-size: 13px; padding: 9px 4px; -moz-appearance: textfield;
}
.woocommerce-cart table.cart td.product-quantity input.qty::-webkit-inner-spin-button,
.woocommerce-cart table.cart td.product-quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; }
/* remove link */
.woocommerce-cart table.cart td.product-remove a.remove {
  color: var(--rn-mute-soft) !important; font-size: 20px; width: 26px; height: 26px; line-height: 24px;
  border-radius: 0; background: none !important;
}
.woocommerce-cart table.cart td.product-remove a.remove:hover { color: var(--rn-rust) !important; background: none !important; }
.woocommerce-cart table.cart td.actions { padding: 24px 0; border-bottom: none; }
.woocommerce-cart table.cart td.actions > .button { float: right; }

/* ════════════════════════════════════════════════════════════════════════
   COUPON BOX – ONE shared definition for cart (.coupon) and checkout
   (.checkout_coupon) so they are pixel-identical and can never drift again.
   · Desktop: input + APPLY COUPON split 50/50, side by side (desktop-checkout ref).
   · Mobile (≤768px): stacked, full width (mobile-cart ref).
   Checkout wraps its input/button in <p class="form-row">; display:contents
   flattens those so both layouts have the same direct flex children.
   ════════════════════════════════════════════════════════════════════════ */
.woocommerce-cart table.cart td.actions .coupon,
.woocommerce form.checkout_coupon {
  display: flex; gap: 16px; align-items: stretch; float: none; box-sizing: border-box;
  border: 2px solid var(--rn-ink); border-radius: 0; background: var(--rn-panel);
  padding: 24px; margin: 0 0 24px;
}
.woocommerce form.checkout_coupon > p:not(.form-row) { display: none; }   /* drop WC's intro line */
.woocommerce form.checkout_coupon .form-row { display: contents; }        /* flatten → same children as cart */
.woocommerce form.checkout_coupon .clear { display: none; }
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce form.checkout_coupon .input-text {
  flex: 1 1 0; width: auto; min-width: 0; max-width: none; margin: 0;
  border: 2px solid var(--rn-ink); border-radius: 0; background: #fff; padding: 14px 16px;
}
.woocommerce-cart table.cart td.actions .coupon .button,
.woocommerce form.checkout_coupon .button {
  flex: 1 1 0; margin: 0; border: 2px solid var(--rn-ink); white-space: nowrap;
}
@media (max-width: 768px) {
  .woocommerce-cart table.cart td.actions .coupon,
  .woocommerce form.checkout_coupon { flex-direction: column; gap: 12px; }
  .woocommerce-cart table.cart td.actions .coupon .input-text,
  .woocommerce form.checkout_coupon .input-text,
  .woocommerce-cart table.cart td.actions .coupon .button,
  .woocommerce form.checkout_coupon .button { flex: 1 1 auto; width: 100%; }
}

/* Cart totals card */
.woocommerce-cart .cart-collaterals { margin-top: 48px; display: block; }
.woocommerce-cart .cart-collaterals .cart_totals {
  float: none !important; width: 100% !important; max-width: 460px; margin-left: auto;
  border: 2px solid var(--rn-ink); padding: 32px;
}
.woocommerce-cart .cart_totals h2 {
  font-family: var(--rn-cond); font-size: 1.6rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.03em; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 2px solid var(--rn-ink);
}
.woocommerce-cart .cart_totals table { border: none; margin: 0; width: 100%; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  font-family: var(--rn-mono); font-size: 0.8rem; border-bottom: 1px solid var(--rn-line); padding: 14px 0; background: none; vertical-align: top;
}
.woocommerce-cart .cart_totals table td { text-align: right; }
.woocommerce-cart .cart_totals table th { font-weight: 400; color: var(--rn-mute); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.66rem; text-align: left; white-space: nowrap; }
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  border-top: 2px solid var(--rn-ink); border-bottom: none; font-size: 1.05rem; padding-top: 16px; color: var(--rn-ink);
}
.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount { font-weight: 500; }
.woocommerce-cart .wc-proceed-to-checkout { padding: 24px 0 0; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  background: var(--rn-rust) !important; color: #fff !important; border: 2px solid var(--rn-rust) !important;
  /* font-size/letter-spacing/padding need !important: WooCommerce's default
     `.woocommerce .wc-proceed-to-checkout a.checkout-button { font-size:1.25em }`
     out-specifies us (extra element selector) and otherwise blows the text up. */
  font-family: var(--rn-mono) !important; font-size: 11px !important; letter-spacing: 0.22em !important;
  text-transform: uppercase !important; line-height: 1.4 !important;
  padding: 18px 28px !important; border-radius: 0; display: block; text-align: center; transition: background .2s, border-color .2s;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { background: var(--rn-ink) !important; border-color: var(--rn-ink) !important; }

/* Cross-sells under the cart */
.woocommerce-cart .cross-sells { margin-top: 64px; }

/* Quantities auto-apply via AJAX (js/woocommerce.js), so the manual
   "Update basket" button is hidden; a subtle busy state covers the request. */
.woocommerce-cart table.cart td.actions button[name="update_cart"],
.woocommerce-cart table.cart td.actions input[name="update_cart"] { display: none !important; }
.woocommerce-cart .woocommerce.rnwc-cart-busy { opacity: 0.5; pointer-events: none; transition: opacity .15s; }

/* Cart coupon – collapsed behind the exact same toggle WooCommerce uses on
   checkout (.woocommerce-form-coupon-toggle, inserted by js/woocommerce.js), so
   it looks and behaves identically. Desktop + mobile. */
.woocommerce-cart .woocommerce-form-coupon-toggle { margin-bottom: 16px; }
.woocommerce-cart .woocommerce-form-coupon-toggle .woocommerce-info {
  border-top-color: var(--rn-rust); margin: 0; text-align: left; cursor: pointer;
}
.woocommerce-cart .woocommerce-form-coupon-toggle .showcoupon { cursor: pointer; }

/* ════════════════════════════════════════════════════════════════════════
   9 · CHECKOUT
   ════════════════════════════════════════════════════════════════════════ */

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }

/* WooCommerce form fields – the global `.form-row` grid (style.css, meant for
   the reservation form) otherwise turns every checkout/address field into a
   broken 2-column grid. Reset to clean stacked fields (label above input). */
.woocommerce form .form-row,
.woocommerce-page form .form-row {
  display: flex; flex-direction: column; gap: 0; margin: 0 0 18px; padding: 0;
}
.woocommerce form .form-row .woocommerce-input-wrapper { display: block; width: 100%; }
.woocommerce form .form-row label { margin-bottom: 6px; }
/* First / last name (and any paired rows) sit side by side; everything else full width. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  display: flex; flex-wrap: wrap; column-gap: 20px;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row { flex: 1 1 100%; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last { flex: 1 1 calc(50% - 10px); }
@media (max-width: 600px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last { flex-basis: 100%; }
}
/* Checkout coupon box styling lives in the shared COUPON BOX block in §8 (cart). */
/* Whole coupon toggle bar is clickable (js/woocommerce.js forwards to .showcoupon). */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { cursor: pointer; }
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--rn-cond); font-size: 1.5rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--rn-ink); margin: 0 0 22px; padding-bottom: 14px; border-bottom: 2px solid var(--rn-ink);
}
.woocommerce-checkout #customer_details h3#ship-to-different-address {
  display: flex; align-items: center; gap: 12px; border: none; font-size: 1.05rem; padding: 0; margin: 28px 0 16px;
}
.woocommerce-checkout #customer_details h3#ship-to-different-address label { margin: 0; }
.woocommerce-checkout .woocommerce-billing-fields h3 { border: none; padding: 0; }

/* Order review table */
.woocommerce-checkout #order_review {
  border: 2px solid var(--rn-ink); padding: 32px; background: #fff;
}
.woocommerce-checkout table.shop_table { border: none; }
.woocommerce-checkout table.shop_table th {
  font-family: var(--rn-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rn-mute); font-weight: 400; border-bottom: 2px solid var(--rn-ink); background: none; padding: 0 0 12px;
}
.woocommerce-checkout table.shop_table td {
  font-family: var(--rn-mono); font-size: 0.8rem; border-bottom: 1px solid var(--rn-line); background: none; padding: 14px 0; color: var(--rn-ink);
}
.woocommerce-checkout table.shop_table .product-name {
  font-family: var(--rn-body); text-transform: none; letter-spacing: 0; color: var(--rn-ink);
}
.woocommerce-checkout table.shop_table .product-total { text-align: right; }
.woocommerce-checkout table.shop_table tfoot th,
.woocommerce-checkout table.shop_table tfoot td {
  font-family: var(--rn-mono); border-bottom: 1px solid var(--rn-line); padding: 12px 0; text-align: right; background: none;
}
.woocommerce-checkout table.shop_table tfoot th { text-align: left; text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.06em; color: var(--rn-mute); font-weight: 400; }
.woocommerce-checkout table.shop_table .order-total th,
.woocommerce-checkout table.shop_table .order-total td {
  border-top: 2px solid var(--rn-ink); border-bottom: none; font-size: 1.05rem; color: var(--rn-ink); padding-top: 15px;
}

/* Payment box */
.woocommerce-checkout #payment {
  border-radius: 0; background: var(--rn-panel); border: none; border-top: 1px solid var(--rn-line); margin-top: 28px;
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--rn-line); padding: 8px 0 16px; }
.woocommerce-checkout #payment ul.payment_methods li { margin: 0; }
.woocommerce-checkout #payment ul.payment_methods li label { font-family: var(--rn-body); font-size: 0.92rem; color: var(--rn-ink); }
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { accent-color: var(--rn-rust); }
.woocommerce-checkout #payment div.payment_box { background: #f1f1f1; border-radius: 0; font-family: var(--rn-body); font-size: 0.86rem; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #f1f1f1; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text { font-size: 0.82rem; color: var(--rn-mute); }
.woocommerce-checkout #payment #place_order {
  background: var(--rn-rust); color: #fff; border: 2px solid var(--rn-rust);
  font-family: var(--rn-mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  padding: 19px 40px; border-radius: 0; cursor: pointer; transition: background .2s, border-color .2s;
  width: 100%; display: block; margin-top: 18px;
}
.woocommerce-checkout #payment #place_order:hover { background: var(--rn-ink); border-color: var(--rn-ink); }
/* Login + coupon toggles at top of checkout */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { border-top-color: var(--rn-rust); }

/* Two-column checkout from 992px. customer_details spans both rows of column 1
   so the order-review heading + table stack together at the top of column 2 –
   otherwise the table lands in row 2, dropping far below the tall billing form. */
@media (min-width: 992px) {
  .woocommerce-checkout form.checkout.woocommerce-checkout {
    display: grid; grid-template-columns: 1fr 0.85fr; grid-template-rows: auto auto;
    column-gap: 56px; row-gap: 0; align-items: start;
  }
  .woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1 / 3; }
  .woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  .woocommerce-checkout form.checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--rn-nav) + 24px); }
}

/* ════════════════════════════════════════════════════════════════════════
   10 · ORDER RECEIVED / THANK YOU
   ════════════════════════════════════════════════════════════════════════ */

.rnwc-thankyou__intro { margin-bottom: 40px; }
.rnwc-thankyou__lead {
  font-family: var(--rn-body); font-size: 1.05rem; line-height: 1.7; color: #555; max-width: 36rem; margin: 0;
}
.rnwc-thankyou__lead .en { font-style: italic; color: var(--rn-mute); display: block; margin-top: 4px; font-size: 0.92em; }
.woocommerce .woocommerce-order .woocommerce-thankyou-order-failed { border-top: 3px solid #c0392b; background: var(--rn-panel); padding: 1.2em 1.4em; }

/* Order overview cards */
.woocommerce ul.woocommerce-order-overview.order_details {
  list-style: none; margin: 0 0 48px; padding: 0; border: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.woocommerce ul.woocommerce-order-overview.order_details li {
  border: 2px solid var(--rn-ink); border-right-width: 0; margin: 0; padding: 22px 24px; float: none;
  font-family: var(--rn-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rn-mute);
  text-align: left; line-height: 1.5;
}
.woocommerce ul.woocommerce-order-overview.order_details li:last-child { border-right-width: 2px; }
.woocommerce ul.woocommerce-order-overview.order_details li strong {
  display: block; margin-top: 8px; font-family: var(--rn-cond); font-size: 1.15rem; font-weight: 700;
  letter-spacing: 0.01em; text-transform: none; color: var(--rn-ink);
}
@media (max-width: 600px) {
  .woocommerce ul.woocommerce-order-overview.order_details { grid-template-columns: 1fr 1fr; }
  .woocommerce ul.woocommerce-order-overview.order_details li { border-right-width: 2px; border-bottom-width: 0; }
  .woocommerce ul.woocommerce-order-overview.order_details li:nth-last-child(-n+1) { border-bottom-width: 2px; }
}

/* Order details / customer tables (also used in account view-order + emails-on-site) */
.woocommerce .woocommerce-order-details__title,
.woocommerce .woocommerce-column__title,
.woocommerce .woocommerce-customer-details h2 {
  font-family: var(--rn-cond); font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em;
  font-size: 1.4rem; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--rn-ink);
}
.woocommerce table.woocommerce-table--order-details,
.woocommerce table.shop_table.order_details { border: 2px solid var(--rn-ink); border-collapse: collapse; width: 100%; }
.woocommerce table.shop_table.order_details th,
.woocommerce table.shop_table.order_details td {
  font-family: var(--rn-mono); font-size: 0.8rem; padding: 14px 18px; border-bottom: 1px solid var(--rn-line); background: none; text-align: left;
}
.woocommerce table.shop_table.order_details tfoot th { text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.06em; color: var(--rn-mute); }
.woocommerce table.shop_table.order_details tfoot .order-total th,
.woocommerce table.shop_table.order_details tfoot .order-total td { border-top: 2px solid var(--rn-ink); font-size: 1rem; color: var(--rn-ink); }
.woocommerce .woocommerce-customer-details address {
  border: 2px solid var(--rn-line); border-radius: 0; padding: 22px 24px; font-family: var(--rn-body); font-size: 0.92rem; line-height: 1.7; color: #444;
}
.rnwc-order-actions { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════════
   11 · MY ACCOUNT
   ════════════════════════════════════════════════════════════════════════ */

.woocommerce-account .woocommerce {
  display: grid; grid-template-columns: 250px 1fr; gap: 56px; align-items: start;
}
/* Login/lost-password pages have no nav → single column.
   WP adds .logged-in on the body for authenticated users, so its absence is a
   reliable "show the login screen" signal; :has() is progressive enhancement. */
.woocommerce-account:not(.logged-in) .woocommerce,
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) { display: block; }

/* Account navigation (sidebar) */
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none; width: auto; font-family: var(--rn-mono);
  border-top: 2px solid var(--rn-ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; border-bottom: 1px solid var(--rn-line); }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 16px 4px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rn-ink); transition: color .15s, padding .15s; position: relative;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
  content: ""; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  width: 0; height: 2px; background: var(--rn-rust); transition: width .2s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--rn-rust); padding-left: 16px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover::before { width: 8px; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--rn-rust); padding-left: 16px; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before { width: 8px; }

.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; }
.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; margin-bottom: 64px; }

/* Deterministic 2-column placement. WooCommerce inserts a (often empty)
   .woocommerce-notices-wrapper as the first child of .woocommerce, which would
   otherwise take grid cell 1 and shove the nav into column 2 and the content
   into the 250px column. Force every stray child full-width, hide the empty
   notices wrapper, and pin the nav/content to their columns on desktop. */
.woocommerce-account .woocommerce > * { grid-column: 1 / -1; min-width: 0; }
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }
@media (min-width: 769px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; }
  .woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; }
}

/* Account forms: full-width fields, first/last name stacked cleanly */
.woocommerce-account .woocommerce-MyAccount-content form .form-row {
  display: flex; flex-direction: column; gap: 0; margin: 0 0 16px;
}
.woocommerce-account .woocommerce-MyAccount-content form .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content form .form-row-last { width: 100%; float: none; }
.woocommerce-account .woocommerce-MyAccount-content form .input-text,
.woocommerce-account .woocommerce-MyAccount-content form select,
.woocommerce-account .woocommerce-MyAccount-content form textarea { width: 100%; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address { min-width: 0; }

/* Dashboard greeting + quick cards (rendered by dashboard.php override) */
.rnwc-dash__hi {
  font-family: var(--rn-body); font-size: 1.02rem; line-height: 1.7; color: #444; margin: 0 0 32px;
}
.rnwc-dash__hi a { color: var(--rn-rust); text-decoration: underline; text-underline-offset: 3px; }
.rnwc-dash__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border-left: 2px solid var(--rn-ink); border-top: 2px solid var(--rn-ink); }
.rnwc-dash__card {
  border-right: 2px solid var(--rn-ink); border-bottom: 2px solid var(--rn-ink);
  padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; transition: background .15s;
}
.rnwc-dash__card:hover { background: var(--rn-panel); }
.rnwc-dash__card svg { width: 24px; height: 24px; stroke: var(--rn-rust); }
.rnwc-dash__card b { font-family: var(--rn-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.2rem; color: var(--rn-ink); }
.rnwc-dash__card span { font-family: var(--rn-body); font-size: 0.85rem; color: var(--rn-mute); line-height: 1.5; }
.rnwc-dash__card .rnwc-dash__go { margin-top: auto; font-family: var(--rn-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rn-ink); }
.rnwc-dash__card:hover .rnwc-dash__go { color: var(--rn-rust); }

/* Orders / downloads tables */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table {
  border: 2px solid var(--rn-ink); border-collapse: collapse; width: 100%;
}
.woocommerce-account table.shop_table th {
  font-family: var(--rn-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rn-mute); font-weight: 400; padding: 16px 18px; border-bottom: 2px solid var(--rn-ink); background: var(--rn-panel); text-align: left;
}
.woocommerce-account table.shop_table td {
  font-family: var(--rn-mono); font-size: 0.8rem; padding: 16px 18px; border-bottom: 1px solid var(--rn-line); background: none; vertical-align: middle;
}
.woocommerce-account table.shop_table tr:last-child td { border-bottom: none; }
.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-status { color: var(--rn-rust); letter-spacing: 0.1em; }
.woocommerce-account table.shop_table .button {
  padding: 9px 16px; font-size: 9px; letter-spacing: 0.18em; margin: 2px;
}
.woocommerce-account table.shop_table .order-actions { text-align: right; }

/* Addresses */
.woocommerce-account .woocommerce-Addresses { margin: 0; }
.woocommerce-account .woocommerce-Address { margin-bottom: 28px; }
.woocommerce-account .woocommerce-Address-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--rn-ink);
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  font-family: var(--rn-cond); font-weight: 900; text-transform: uppercase; font-size: 1.3rem; margin: 0;
}
.woocommerce-account .woocommerce-Address-title .edit {
  font-family: var(--rn-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--rn-rust);
}
.woocommerce-account .woocommerce-Address address {
  border: 2px solid var(--rn-line); padding: 22px 24px; font-family: var(--rn-body); font-size: 0.92rem; line-height: 1.75; color: #444;
}
/* Addresses – driven by the theme's my-address.php override (.rnwc-addresses,
   no col2-set float classes, so nothing can stagger): billing left, shipping
   right on desktop; one column on mobile. */
.woocommerce-account .woocommerce-MyAccount-content .rnwc-addresses { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-content .rnwc-addresses { grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
}
.woocommerce-account .woocommerce-MyAccount-content .rnwc-addresses-intro { margin: 0 0 72px; }

/* Edit-account / address forms */
.woocommerce-account .woocommerce-EditAccountForm fieldset,
.woocommerce-EditAccountForm legend {
  border: none; margin: 28px 0 8px; padding: 0;
  font-family: var(--rn-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.1rem;
}
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button,
.woocommerce-account form .button { margin-top: 12px; }

/* Account forms – compact; first/last name share a row. Class-agnostic.
   row-gap sets the vertical rhythm and row margins are zeroed, so spacing is
   even regardless of WooCommerce's own margins. */
.woocommerce-account .woocommerce-MyAccount-content form {
  display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 16px; align-items: flex-start;
}
.woocommerce-account .woocommerce-MyAccount-content form > * {
  flex: 1 1 100%; min-width: 0; margin-top: 0 !important; margin-bottom: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content form > .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content form > .form-row-last { flex: 1 1 calc(50% - 12px); width: auto; }
@media (max-width: 600px) {
  .woocommerce-account .woocommerce-MyAccount-content form > .form-row-first,
  .woocommerce-account .woocommerce-MyAccount-content form > .form-row-last { flex-basis: 100%; }
}

/* Address blocks sit in the grid; the grid gap spaces them, so no own margin. */
.woocommerce-account .woocommerce-MyAccount-content .rnwc-address {
  float: none !important; width: auto !important; max-width: none !important; margin: 0 !important;
}

/* Downloads empty / orders empty handled by generic notice styling */

/* ════════════════════════════════════════════════════════════════════════
   12 · LOGIN / REGISTER  (atmospheric two-panel, rendered by form-login.php)
   ════════════════════════════════════════════════════════════════════════ */

.rnwc-auth { margin: 0 auto; max-width: 1100px; }
.rnwc-auth__grid { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--rn-ink); }
.rnwc-auth__grid--single { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
.rnwc-auth__panel { padding: 48px 48px 52px; }
.rnwc-auth__panel + .rnwc-auth__panel { border-left: 2px solid var(--rn-ink); }
.rnwc-auth__panel h2 {
  font-family: var(--rn-cond) !important; font-weight: 900 !important; text-transform: uppercase;
  font-size: 1.9rem !important; letter-spacing: 0.03em; margin: 0 0 6px; color: var(--rn-ink);
}
.rnwc-auth__kicker { font-family: var(--rn-mono); font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--rn-rust); display: block; margin-bottom: 28px; }
.rnwc-auth .form-row { margin-bottom: 18px; }
.rnwc-auth .woocommerce-form-login__submit,
.rnwc-auth .woocommerce-form-register__submit { width: 100%; margin-top: 6px; }
.rnwc-auth .woocommerce-form-login__rememberme { font-family: var(--rn-body); font-size: 0.84rem; text-transform: none; letter-spacing: 0; color: var(--rn-mute); display: inline-flex; align-items: center; gap: 8px; }
.rnwc-auth .woocommerce-LostPassword { margin: 16px 0 0; }
.rnwc-auth .woocommerce-LostPassword a { font-family: var(--rn-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--rn-mute); }
.rnwc-auth .woocommerce-LostPassword a:hover { color: var(--rn-rust); }
/* Right "register" panel reads as the warm/atmospheric half */
.rnwc-auth__panel--register {
  background: var(--rn-ink);
  position: relative; overflow: hidden; isolation: isolate;
}
.rnwc-auth__panel--register::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(110% 80% at 90% 0%, rgba(168,64,32,0.35), transparent 55%);
}
.rnwc-auth__panel--register h2 { color: #fff; }
.rnwc-auth__panel--register .rnwc-auth__intro { color: rgba(255,255,255,0.6); font-family: var(--rn-body); font-size: 0.92rem; line-height: 1.7; margin: 0 0 26px; }
/* These override generic ".woocommerce form .input-text / button.button"
   rules (specificity 21), so they carry the extra .rnwc-auth ancestor (31). */
.rnwc-auth .rnwc-auth__panel--register label { color: rgba(255,255,255,0.55); }
.rnwc-auth .rnwc-auth__panel--register .input-text { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); color: #fff; }
.rnwc-auth .rnwc-auth__panel--register .input-text:focus { border-color: var(--rn-rust); }
.rnwc-auth .rnwc-auth__panel--register .woocommerce-form-register__submit { background: var(--rn-rust); border-color: var(--rn-rust); color: #fff; }
.rnwc-auth .rnwc-auth__panel--register .woocommerce-form-register__submit:hover { background: #fff; border-color: #fff; color: var(--rn-ink); }
.rnwc-auth__panel--register p { color: rgba(255,255,255,0.7); font-family: var(--rn-body); }
.rnwc-auth__fox { position: absolute; right: -6%; bottom: -10%; width: 240px; opacity: 0.08; mix-blend-mode: screen; z-index: -1; pointer-events: none; }
.rnwc-auth__fox img { width: 100%; } /* white artwork (shopfox_white) – no CSS inversion needed */

@media (max-width: 820px) {
  .rnwc-auth__grid { grid-template-columns: 1fr; }
  .rnwc-auth__panel + .rnwc-auth__panel { border-left: none; border-top: 2px solid var(--rn-ink); }
  .rnwc-auth__panel { padding: 36px 28px 40px; }
}

/* Lost / reset password single form */
.woocommerce .woocommerce-ResetPassword { max-width: 440px; }
.woocommerce .woocommerce-ResetPassword p:first-child { font-family: var(--rn-body); color: var(--rn-mute); font-size: 0.92rem; line-height: 1.7; }

/* ════════════════════════════════════════════════════════════════════════
   13 · EMPTY STATES  (cart · shop · account)
   ════════════════════════════════════════════════════════════════════════ */

.rnwc-empty {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--rn-ink); color: #fff;
  border: 2px solid var(--rn-ink);
  padding: 72px 48px; text-align: center;
}
.rnwc-empty::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(100% 80% at 50% -10%, rgba(168,64,32,0.3), transparent 60%);
}
.rnwc-empty__fox { position: absolute; left: 50%; bottom: -18%; transform: translateX(-50%); width: 320px; opacity: 0.06; z-index: -1; }
.rnwc-empty__fox img { width: 100%; } /* white artwork (shopfox_white) – no CSS inversion needed */
.rnwc-empty__kicker { font-family: var(--rn-mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--rn-rust); }
.rnwc-empty .rnwc-empty__title {
  font-family: var(--rn-cond); font-weight: 900; font-size: clamp(2rem, 5vw, 3.2rem);
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; color: #fff; margin: 14px 0 0;
}
.rnwc-empty__sub { font-family: var(--rn-body); font-size: 1rem; color: rgba(255,255,255,0.6); margin: 16px auto 0; max-width: 28rem; line-height: 1.65; }
.rnwc-empty__sub .en { font-style: italic; color: rgba(255,255,255,0.4); display: block; margin-top: 4px; font-size: 0.9em; }
.rnwc-empty__cta { margin-top: 30px; display: inline-flex; }
.rnwc-empty .rnwc-btn { background: var(--rn-rust); border-color: var(--rn-rust); }
.rnwc-empty .rnwc-btn:hover { background: #fff; border-color: #fff; color: var(--rn-ink); }
/* WC's default empty-cart bits, hidden in favour of our block */
.woocommerce-cart .cart-empty.woocommerce-info,
.woocommerce-cart .return-to-shop { display: none; }
.rnwc-empty + .cross-sells { margin-top: 56px; }

/* ════════════════════════════════════════════════════════════════════════
   14 · WRAPPER / SPACING for woocommerce_content pages (cart/checkout/account
        /single product render inside .renert-page--shop > .renert-page__inner)
   ════════════════════════════════════════════════════════════════════════ */

/* The hero is full-bleed; the WC content sits in the constrained inner column.
   Page.php already provides .renert-page padding; trim its top because the
   hero now owns the space under the nav. */
.renert-page--shop.has-rnwc-hero { padding-top: 0; }
.renert-page--shop.has-rnwc-hero .renert-page__inner { padding-top: 64px; }
@media (max-width: 768px) { .renert-page--shop.has-rnwc-hero .renert-page__inner { padding-top: 44px; } }

/* Single product: §20 (≥901px) and §21 (≤900px) zero the inner padding for
   the full-bleed layouts – no base rule needed here. */

/* ════════════════════════════════════════════════════════════════════════
   15 · MOBILE STICKY ADD-TO-CART (single product) – injected via hook
   ════════════════════════════════════════════════════════════════════════ */

.rnwc-sticky-atc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; align-items: center; gap: 14px;
  background: #fff; border-top: 2px solid var(--rn-ink);
  padding: 12px var(--rn-pad-m);
  transform: translateY(110%); transition: transform .25s ease;
}
.rnwc-sticky-atc.is-visible { transform: translateY(0); }
.rnwc-sticky-atc__info { flex: 1; min-width: 0; }
.rnwc-sticky-atc__name { font-family: var(--rn-cond); font-weight: 700; text-transform: uppercase; font-size: 0.95rem; color: var(--rn-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rnwc-sticky-atc__price { font-family: var(--rn-mono); font-size: 0.8rem; color: var(--rn-mute); }
.rnwc-sticky-atc__price .amount { color: var(--rn-ink); }
.rnwc-sticky-atc__btn {
  flex-shrink: 0; background: var(--rn-rust); color: #fff; border: none;
  font-family: var(--rn-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; padding: 15px 26px; cursor: pointer; transition: background .2s;
}
.rnwc-sticky-atc__btn:hover { background: var(--rn-ink); }
@media (max-width: 768px) { .single-product .rnwc-sticky-atc { display: flex; } }
/* Don't let the sticky bar compete with the cart drawer or the mobile menu:
   while either is open, take it off-screen (it returns when they close). */
body.cart-open .rnwc-sticky-atc,
body.menu-open .rnwc-sticky-atc { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════
   17 · QUANTITY STEPPERS (injected by woocommerce.js into .quantity)
   ════════════════════════════════════════════════════════════════════════ */

.woocommerce .quantity.rnwc-qty { display: inline-flex; align-items: stretch; }
.rnwc-qty-btn {
  width: 40px;
  border: none;
  background: none;
  font-family: var(--rn-mono);
  font-size: 16px;
  line-height: 1;
  color: var(--rn-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.rnwc-qty-btn:hover { background: var(--rn-ink); color: #fff; }
.rnwc-qty-minus { border-right: 1px solid rgba(12,12,12,0.15); }
.rnwc-qty-plus  { border-left: 1px solid rgba(12,12,12,0.15); }
/* Single product: stepper sits inside the bordered qty box, input loses its fixed width */
.woocommerce div.product .summary .quantity.rnwc-qty input.qty { width: 46px; }
.woocommerce-cart table.cart td.product-quantity .quantity.rnwc-qty input.qty { width: 42px; }
@media (max-width: 500px) {
  .woocommerce div.product .summary form.cart:not(.variations_form) .quantity.rnwc-qty { width: 100%; }
  .woocommerce div.product .summary form.cart:not(.variations_form) .quantity.rnwc-qty input.qty { flex: 1; width: auto; }
}

/* Mobile: slimmer size pills on the product page, and a tighter run from the
   size picker down to the Add-to-Cart row. */
@media (max-width: 768px) {
  .woocommerce div.product .rnwc-pv { gap: 6px; }
  .woocommerce div.product .rnwc-pv .rnwc-size { min-width: 40px; padding: 8px 10px; font-size: 11px; }
  .woocommerce div.product table.variations { margin: 0 0 12px; }
  .woocommerce div.product table.variations tr { margin-bottom: 12px; }
  .woocommerce div.product .single_variation .price { margin-bottom: 10px; }
  .woocommerce div.product .woocommerce-variation-availability .stock { margin-bottom: 10px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   16 · RESPONSIVE – single product + general
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* align-items: stretch – the base grid rule sets align-items:start, which in
     this flex COLUMN would shrink children without an explicit width (the
     Description/Additional-info accordion, related grids) to content width. */
  .woocommerce div.product { display: flex !important; flex-direction: column; gap: 0; align-items: stretch; }
  /* No flex child may exceed the viewport – this is what stops the related-products
     grid (and a wide summary) from spilling off the right edge on phones. */
  .woocommerce div.product > * { min-width: 0; max-width: 100%; }
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce div.product div.images { order: 1; position: static !important; width: 100% !important; margin-bottom: 0; top: auto; }
  .woocommerce div.product .summary { order: 2; padding-top: 34px; }
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .rnwc-prodacc { order: 3; }
  /* Related / up-sells had no flex order, so they defaulted to order:0 and were
     painted ABOVE the gallery on mobile. Pin them last so the real order holds:
     gallery → summary → tabs → related. (DOM order is already correct.) */
  .woocommerce div.product .up-sells,
  .woocommerce div.product .related.products { order: 4; }
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 0; }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 36px; border-top: 2px solid var(--rn-ink); overflow-x: auto;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: nowrap; border-bottom: 2px solid var(--rn-ink); }
  .woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: none; border-right: 1px solid var(--rn-line); white-space: nowrap; }
  .woocommerce-account .woocommerce-MyAccount-navigation li a { padding: 14px 18px !important; }
  .woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { padding-left: 18px !important; }
  .woocommerce-account .woocommerce-MyAccount-navigation li a::before { display: none; }
}
@media (max-width: 600px) {
  .woocommerce-cart table.cart thead { display: none; }
  /* WooCommerce's responsive table injects "Product:/Price:/Quantity:" prefixes
     via td::before – hide them; this branded grid layout labels nothing. */
  .woocommerce-cart table.cart td::before { display: none !important; }
  .woocommerce-cart table.cart tbody { display: block; }
  /* Float layout: the thumbnail floats left (explicit size, so it always shows);
     name + price flow beside it; the stepper clears below it; subtotal is a
     full-width row. Every per-cell rule is prefixed `tr.cart_item` so it
     out-specifies the td reset below – otherwise the reset's display:block wins
     and the subtotal label/value collapse together. */
  .woocommerce-cart table.cart tr.cart_item {
    position: relative; display: block; overflow: hidden;
    padding: 20px 0; border-bottom: 1px solid var(--rn-line);
  }
  .woocommerce-cart table.cart tr.cart_item td { display: block; border: none !important; padding: 0 !important; text-align: left !important; }
  .woocommerce-cart table.cart tr.cart_item td.product-thumbnail { float: left; width: 64px; margin: 0 16px 0 0; }
  .woocommerce-cart table.cart tr.cart_item td.product-thumbnail img { width: 64px; height: 64px; display: block; }
  .woocommerce-cart table.cart tr.cart_item td.product-name { padding-right: 30px !important; }
  .woocommerce-cart table.cart tr.cart_item td.product-price { margin-top: 4px; font-family: var(--rn-mono); font-size: 0.82rem; color: var(--rn-mute); }
  .woocommerce-cart table.cart tr.cart_item td.product-quantity { clear: left; margin-top: 12px; }
  .woocommerce-cart table.cart tr.cart_item td.product-subtotal {
    clear: both; display: flex; align-items: baseline; gap: 8px;
    border-top: 1px solid var(--rn-line) !important; padding-top: 12px !important; margin-top: 14px;
  }
  .woocommerce-cart table.cart tr.cart_item td.product-subtotal::before {
    content: "Subtotal"; font-family: var(--rn-mono); font-size: 0.6rem;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--rn-mute);
  }
  .woocommerce-cart table.cart tr.cart_item td.product-subtotal .woocommerce-Price-amount { margin-left: auto; font-family: var(--rn-mono); }
  .woocommerce-cart table.cart tr.cart_item td.product-remove { position: absolute; top: 18px; right: 0; z-index: 1; }
  /* Actions / coupon row */
  .woocommerce-cart table.cart tr:not(.cart_item) { display: block; }
  .woocommerce-cart table.cart td.actions { display: block; padding: 20px 0 0 !important; }
  /* coupon box stacking is handled by the shared COUPON BOX block (@max-width:768) */
  .woocommerce-cart table.cart td.actions > .button { float: none; width: 100%; }
}
@media (max-width: 500px) {
  .woocommerce div.product .summary > .product_title { font-size: 2rem; }
  .woocommerce div.product .summary form.cart:not(.variations_form) { flex-direction: column; border: none; gap: 8px; }
  .woocommerce div.product .summary form.cart:not(.variations_form) .quantity { border: 2px solid var(--rn-ink); width: 100%; justify-content: center; }
  .woocommerce div.product .summary form.cart:not(.variations_form) .single_add_to_cart_button { border: 2px solid var(--rn-ink); width: 100%; }
  /* Variable products: stack qty + button too */
  .woocommerce div.product .summary form.cart.variations_form .woocommerce-variation-add-to-cart { flex-direction: column; border: none; gap: 8px; }
  .woocommerce div.product .summary form.cart.variations_form .woocommerce-variation-add-to-cart .quantity { border: 2px solid var(--rn-ink); width: 100%; justify-content: center; }
  .woocommerce div.product .summary form.cart.variations_form .single_add_to_cart_button { border: 2px solid var(--rn-ink); width: 100%; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 14px 16px; font-size: 9px; }
}

/* ════════════════════════════════════════════════════════════════════════
   18 · REFINEMENTS + GRACEFUL DEGRADATION
   ════════════════════════════════════════════════════════════════════════ */

/* Cross-sells read better 2-up (they usually surface 2 items) */
.woocommerce .cross-sells ul.products { grid-template-columns: repeat(2, 1fr) !important; }
@media (max-width: 600px) { .woocommerce .cross-sells ul.products { grid-template-columns: 1fr !important; } }

/* ─ Select2 (variation / country selects) brand polish ─ */
.woocommerce .select2-container--default .select2-results__option--highlighted[aria-selected],
.woocommerce .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--rn-rust); color: #fff; }

/* ─ Password strength meter ─ */
.woocommerce-password-strength { font-family: var(--rn-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 0; padding: 8px 0; }
.woocommerce-password-strength.strong { color: var(--rn-stock); }
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad { color: #c0392b; }

/* ─ Quantity input on grouped products (table) ─ */
.woocommerce div.product form.cart .grouped_form .quantity { border: 2px solid var(--rn-ink); }

/* ════════════════════════════════════════════════════════════════════════
   19 · MOBILE GRID POLISH (shop archive · related · up/cross-sells)
   Two clean, equal columns; long sale prices wrap instead of overflowing.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Cat + price keep one row, but a long "34,99 € 24,99 €" wraps below the
     category rather than stretching the column / spilling off the card. */
  /* Tighter, even padding so the two columns breathe. */
  .renert-shop-archive ul.products li.product .product-info,
  .woocommerce .related.products ul.products li.product .product-info,
  .woocommerce .up-sells ul.products li.product .product-info,
  .woocommerce .cross-sells ul.products li.product .product-info { padding: 14px; }
  /* Strip the card to image · name · price · button on phones (matches the
     homepage grid); the description doubles up with the bilingual copy. */
  /* Description stays on phones – style.css clamps it to three lines. */
  /* Related/up-sells sit lower; don't push them miles down on a phone. */
  .woocommerce .related.products,
  .woocommerce .up-sells.products,
  .woocommerce .upsells.products { margin-top: 48px; }
  .woocommerce .related.products > h2,
  .woocommerce .up-sells > h2,
  .woocommerce .cross-sells > h2 { padding-bottom: 16px; }
}

/* One weight for every add-to-cart button – homepage, shop grid, related and the
   single-product / sticky buttons – DM Mono regular, never bold. */
.renert-shop-archive ul.products li.product .add-to-cart,
.renert-shop-archive ul.products li.product a.button.add_to_cart_button,
.woocommerce .related.products ul.products li.product .add-to-cart,
.woocommerce .related.products ul.products li.product a.button.add_to_cart_button,
.woocommerce .up-sells ul.products li.product a.button.add_to_cart_button,
.woocommerce .cross-sells ul.products li.product .add-to-cart,
.woocommerce div.product .summary .single_add_to_cart_button,
.rnwc-sticky-atc__btn { font-weight: 400 !important; }

/* The slide-in drawer is the add-to-cart feedback, so hide WooCommerce's inline
   "View cart" link that it appends after an AJAX add on the grid/related cards. */
.renert-shop-archive ul.products li.product .added_to_cart,
.woocommerce .related.products ul.products li.product .added_to_cart,
.woocommerce .up-sells ul.products li.product .added_to_cart,
.woocommerce .cross-sells ul.products li.product .added_to_cart { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════
   20 · SINGLE PRODUCT – FULL-BLEED GALLERY (desktop ≥ 901px)
   Image runs to the left edge and flush under the breadcrumb bar (square,
   capped on wide screens). Summary, tabs and related sit in a padded right
   column. Mobile keeps the stacked layout from §16.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  /* Break out of the centered 1200 column into a full-bleed shell. */
  .single-product .renert-page--shop.has-rnwc-hero .renert-page__inner {
    max-width: none;
    padding: 0;
  }

  /* Image column is capped so the square never gets gigantic on wide monitors.
     align-items:stretch grows the gallery to the FULL row height so the photo
     always fills its box edge-to-edge – no white gap below it, in any state
     (long/short summary, in/out of stock, any zoom). min-height is the square
     floor for when the summary is the shorter column. */
  .single-product div.product {
    grid-template-columns: min(56vw, 760px) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }

  /* The GALLERY box fills the stretched column; the carousel internals (§22) fill
     THIS box via inset:0 and the image covers it, re-fitting live on resize. The
     right border is the column divider. */
  .woocommerce.single-product div.product .woocommerce-product-gallery {
    position: relative;
    align-self: stretch;
    min-height: min(56vw, 760px);
    margin: 0;
    overflow: hidden;
    border-right: 2px solid var(--rn-ink);
  }

  /* Summary: comfortable reading column, offset under the bar, gutter on the right. */
  .single-product div.product .summary {
    padding: 60px clamp(40px, 5vw, 88px) 48px 48px;
    max-width: 660px;
  }

  /* Tabs + related were in the old 40px column – re-inset their content
     (padding keeps the full-width dividers, insets the text/grid).
     margin-top:0 flushes the black tab-bar to the bottom of the square gallery. */
  .single-product div.product .woocommerce-tabs,
  .single-product div.product .rnwc-prodacc {
    margin-top: 0;
    padding-left: 48px;
    padding-right: clamp(40px, 5vw, 88px);
  }
  .single-product div.product .related.products,
  .single-product div.product .up-sells {
    padding-left: 48px;
    padding-right: clamp(40px, 5vw, 88px);
  }
  /* "Also Nice" stays full-bleed (the card grid runs edge-to-edge like the
     storefront); its heading + filter carry the gutter instead. */
  .single-product div.product .rnwc-also.related.products {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   21 · SINGLE PRODUCT – FULL-BLEED ON MOBILE (≤900px)
   Mirror §20 for the stacked layout: the gallery image and the related /
   up-sell card grids run edge-to-edge like the shop archive, while text
   blocks keep the mobile gutter. Keeps the store consistent on phones.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Drop the page gutters so images + card grids reach the screen edges. */
  .single-product .renert-page--shop.has-rnwc-hero .renert-page__inner { padding: 0; }

  /* Re-inset the text columns so copy keeps a readable gutter. */
  .single-product div.product .summary,
  .single-product div.product .woocommerce-tabs .panel,
  .single-product div.product .rnwc-prodacc {
    padding-left: var(--rn-pad-m);
    padding-right: var(--rn-pad-m);
  }
  /* Less air between the product meta and the accordion on phones. */
  .woocommerce div.product .rnwc-prodacc { margin-top: 36px; }

  /* Section headings keep the gutter (full-width underline); the card grids
     below them stay edge-to-edge, exactly like the storefront. */
  .single-product div.product .related.products > h2,
  .single-product div.product .up-sells > h2 {
    padding-left: var(--rn-pad-m);
    padding-right: var(--rn-pad-m);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   22 · "ALSO NICE"  (single product)
   The category filter (.rnwc-filter) lives in style.css instead –
   it also appears on the homepage, where this WooCommerce stylesheet (and its
   --rn-* variables) is not loaded.
   ════════════════════════════════════════════════════════════════════════ */
/* "Also Nice" – full-bleed card grid (§20/§21); heading keeps the gutter. */
.rnwc-also__title { padding-left: var(--rn-pad); padding-right: var(--rn-pad); }

/* ─ Honour reduced-motion for the sticky bar + card zooms ─ */
@media (prefers-reduced-motion: reduce) {
  .rnwc-sticky-atc { transition: none; }
  .renert-shop-archive ul.products li.product a.product-img img { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   KEYBOARD FOCUS – visible ring on every custom shop control (WCAG 2.4.7).
   The native variation <select> stays in the tab order (clipped, not
   display:none), and these mirror controls are real <button>s, so both
   paths are now clearly focusable.
   ════════════════════════════════════════════════════════════════════════ */
.rnwc-size:focus-visible,
.rnwc-swatch:focus-visible,
.rnwc-filter__pill:focus-visible,
.rnwc-buy__atc:focus-visible,
.rnwc-quickadd:focus-visible,
.rnwc-sticky-atc__btn:focus-visible,
.rnwc-pv-native:focus-visible,
.woocommerce .add-to-cart:focus-visible,
.woocommerce .button:focus-visible,
.woocommerce a.rnwc-btn:focus-visible,
.woocommerce a.rnwc-btn-ghost:focus-visible,
.rnwc-gallery-slide:focus-visible {
  outline: 2px solid var(--rn-rust);
  outline-offset: 2px;
}
/* The gallery slide's ring sits inside its overflow:hidden box, so pull it in. */
.rnwc-gallery-slide:focus-visible { outline-offset: -2px; }
/* Dark hero / sheet controls get a light ring. */
.rnwc-hero :focus-visible,
.rnwc-sheet :focus-visible,
.rnwc-trust :focus-visible {
  outline-color: #fff;
}

/* ════════════════════════════════════════════════════════════════════════
   22 · SINGLE PRODUCT – NATIVE SCROLL-SNAP GALLERY
   Replaces the FlexSlider gallery. Markup: woocommerce/single-product/
   product-image.php. One image = one static slide (no dots); multiple images =
   a swipeable strip with dots (same pattern + dot styling as the homepage
   `.about-strip`). Every slide is a click-to-zoom surface. The slides use their
   own classes (.rnwc-gallery-slide), and the old FlexSlider gallery CSS has been
   removed, so this section is the single source of truth.
   ════════════════════════════════════════════════════════════════════════ */
/* Two layouts, one component:
   • Mobile/tablet (≤900px, stacked): the strip flows in-flow; each slide is a
     square (aspect-ratio) and the image fills it via absolute inset:0.
   • Desktop (≥901px): §20 stretches the gallery box to the full row height. The
     scroll container is made absolute (inset:0) at carousel-wrap AND strip, so each
     inherits that definite box height with no percentage to resolve. Slides stretch
     into the strip and the image covers it, re-fitting live on resize, single AND
     multi – and always filling the box, so there's no white gap. */
.rnwc-gallery .carousel-wrap { position: relative; }

.rnwc-gallery-strip {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--rn-grey-img);
}
.rnwc-gallery-strip::-webkit-scrollbar { display: none; }

.rnwc-gallery-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;          /* sizing context for the image + magnifier lens */
  overflow: hidden;
  aspect-ratio: 1 / 1;         /* mobile: square; desktop overrides to fill */
  background: var(--rn-grey-img);
}
/* Fill via absolute positioning, not height:100% – a percentage height resolves
   to auto against a flex-stretched slide, leaving the image at its intrinsic size.
   The slide is position:relative, so inset:0 makes the image cover the slide's
   actual used height – the square (mobile) or the sticky-square box (desktop, §20),
   so it re-fits on resize. */
/* NB: the `.rnwc-gallery` prefix (specificity 0,2,0) is REQUIRED – it beats
   WooCommerce core's `.woocommerce img { height:auto }` (woocommerce-layout.css,
   0,1,1). Without it WC wins, and since <img> is a replaced element height:auto
   renders it at its intrinsic ratio instead of filling the slide → the white gap. */
.rnwc-gallery .rnwc-gallery-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Desktop: the slide is stretched (flex) into the box; the image covers it. */

/* Every slide is a click-to-zoom surface (magnifier in js/woocommerce.js) – single
   and multi alike. */
.rnwc-gallery-slide { cursor: zoom-in; }
.rnwc-gallery-slide.is-zoomed { cursor: zoom-out; }

/* Dots – visible on desktop too (the homepage strips show them on mobile only,
   so override that here), styled to match. */
.rnwc-gallery .carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}
.rnwc-gallery .carousel-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
  flex-shrink: 0;
  pointer-events: auto;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
}
.rnwc-gallery .carousel-dots .dot.active {
  background: #fff;
  transform: scale(1.2);
}

@media (prefers-reduced-motion: reduce) {
  .rnwc-gallery-strip { scroll-behavior: auto; }
  .rnwc-gallery .carousel-dots .dot { transition: none; }
}

/* Desktop (≥901px): §20 stretches the gallery box to the full row height (the
   positioned, overflow-hidden anchor with the right-hand divider). Fill it by making
   the scroll container absolute at EVERY level – carousel-wrap AND the strip – so each
   inherits that definite box height (inset:0) with no percentage to resolve.
   CRITICAL: the slide must take height:100% of the strip, NOT keep its square
   aspect-ratio. A flex item with a definite width + aspect-ratio:1 computes its
   height from the width (a square) and ignores align-items:stretch – which left the
   photo square inside a taller box (the white gap) and made it track only the column
   width, never the box. Clearing the ratio AND pinning height:100% fills the box in
   every state and re-fits live on resize. No strip border: only §20's border-right. */
@media (min-width: 901px) {
  .rnwc-gallery .carousel-wrap { position: absolute; inset: 0; }
  .rnwc-gallery-strip { position: absolute; inset: 0; border: none; }
  .rnwc-gallery-slide {
    aspect-ratio: auto;
    height: 100%;   /* = strip height (definite via inset:0) → fills the box */
  }
}

/* Mobile (≤900px): stacked, full-bleed under the breadcrumb bar – match the old
   single-image frame (2px sides + bottom, flush top). */
@media (max-width: 900px) {
  .rnwc-gallery-strip { border: 2px solid var(--rn-ink); border-top: none; }
}

/* Free-delivery nudge under the add-to-cart (cart-fragment, updates live). */
.woocommerce div.product .rnwc-ship-hint {
  font-family: var(--rn-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rn-mute);
  margin: 14px 0 0;
}
.woocommerce div.product .rnwc-ship-hint .woocommerce-Price-amount { color: var(--rn-ink); }
.woocommerce div.product .rnwc-ship-hint__ok { color: var(--rn-rust); }

/* ─── Size guide (Shop Settings → Product Page – Size Guide) ─────────────────
   Quiet <details> disclosure rendered above the Add to Cart button. */
.woocommerce div.product details.rnwc-sizeguide {
  margin: 0 0 14px;
}
.woocommerce div.product .rnwc-sizeguide summary {
  display: inline-block;
  cursor: pointer;
  font-family: var(--rn-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rn-rust);
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
}
.woocommerce div.product .rnwc-sizeguide summary::-webkit-details-marker { display: none; }
.woocommerce div.product .rnwc-sizeguide summary:focus-visible { outline: 2px solid var(--rn-rust); outline-offset: 2px; }
.woocommerce div.product .rnwc-sizeguide__scroll { overflow-x: auto; margin-top: 10px; }
.woocommerce div.product .rnwc-sizeguide table {
  border-collapse: collapse;
  border: 2px solid var(--rn-ink);
  font-family: var(--rn-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  width: auto;
}
.woocommerce div.product .rnwc-sizeguide th,
.woocommerce div.product .rnwc-sizeguide td {
  border: 1px solid rgba(12,12,12,0.25);
  padding: 6px 12px;
  text-align: left;
  white-space: nowrap;
}
.woocommerce div.product .rnwc-sizeguide th {
  background: var(--rn-ink);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
}