/* Getatru — page bodies.
 *
 * NOTE ON COLOUR: secondary text here uses --accent (#5F5A52), never --muted
 * (#7A756C). --muted is a decorative tone from the concept and measures 3.77:1
 * on --plat-a and 4.32:1 on --card, both under the WCAG AA 4.5:1 floor for
 * normal text. --accent clears it everywhere: 5.63 / 6.46 / 5.98.
 *
 * The concept designed exactly one page. This carries its language onto the ten
 * pages it never drew: shop, PDP, cart, checkout, account, about and the four
 * policy pages. It restyles the markup WooCommerce and Twenty Twenty-Five already
 * emit rather than replacing their templates — on a live storefront, CSS that
 * misses a selector is a cosmetic bug, whereas a template that misses a hook is a
 * checkout that cannot complete.
 *
 * Tokens come from chrome.css. Loaded sitewide, after it.
 */

/* ---------- page shell ---------------------------------------------------- */

.clariven-main,
.wp-site-blocks > .wp-block-group:not(.clariven-topbar):not(.clariven-header) {
  background: var(--paper);
}

/* TT5 hands post content out as .alignfull with negative inline margins, so a
 * max-width on the container pins the column to the left edge and margin-inline
 * loses to those margins. Constrain the CHILDREN instead — the same mechanism
 * WordPress's own is-layout-constrained uses. */
/* the title sits OUTSIDE .wp-block-post-content, so it needs the same measure or
 * it hangs left of the body copy it introduces */
:where(body:not(.home)) .wp-block-post-title {
  max-width: 45rem;
  margin-inline: auto;
}

:where(body:not(.home)) :is(.wp-block-post-content, .entry-content) > * {
  /* rem, not ch: ch resolves against each element's OWN font size, so 78ch on a
   * 29px Fraunces h2 is 1516px and the headings escape the measure the
   * paragraphs sit in. 45rem is one column for every child. */
  max-width: 45rem;
  margin-inline: auto;
}

/* ---------- page + section titles ---------------------------------------- */

.wp-block-post-title,
.clariven-page-title,
.woocommerce-products-header__title,
h1.entry-title {
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.028em;
  color: var(--ink);
  margin-bottom: 8px;
}

/* the gold rule under a page title, borrowed from the concept's .eyebrow rule */
.wp-block-post-title::after,
.clariven-page-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin-top: 20px;
  background: var(--gold-ink);
}

:where(.entry-content, .wp-block-post-content) :is(h2, h3, h4) {
  font-family: var(--f-disp);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.14;
  color: var(--ink);
}
:where(.entry-content, .wp-block-post-content) h2 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); margin-top: 2.2em; }
:where(.entry-content, .wp-block-post-content) h3 { font-size: 1.18rem; margin-top: 1.8em; }

/* ---------- long-form body copy (about + the four policy pages) ----------- */

:where(.entry-content, .wp-block-post-content) p {
  color: var(--ink-soft);
  line-height: 1.72;
}
:where(.entry-content, .wp-block-post-content) :is(ul, ol) {
  color: var(--ink-soft);
  line-height: 1.72;
  padding-left: 1.3em;
}
:where(.entry-content, .wp-block-post-content) li + li { margin-top: .4em; }
:where(.entry-content, .wp-block-post-content) a {
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
:where(.entry-content, .wp-block-post-content) a:hover { color: var(--ink); }
:where(.entry-content, .wp-block-post-content) strong { color: var(--ink); font-weight: 600; }

/* ---------- shop grid: the concept's .pcard, onto Woo's loop -------------- */
/* Specificity is matched to store.css's own product-card block (.woocommerce
 * ul.products li.product) rather than raised above it — this sheet is enqueued
 * after it, so equal specificity is enough and the two stay easy to compare.
 * Where store.css reaches for !important, this has to as well. */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  padding: 0;
  margin: 0;
  list-style: none;
}

.woocommerce ul.products li.product,
.wc-block-product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(43, 49, 56, .05);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.woocommerce ul.products li.product:hover,
.wc-block-product:hover {
  border-color: #CDD3D9;
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

/* the image well — the concept's radial plinth */
.woocommerce ul.products li.product a img,
.wc-block-product img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  width: 100%;
  padding: 12% 14%;
  margin: 0 0 0 0;
  background: radial-gradient(72% 62% at 50% 42%, #FFFFFF 0%, #F6F7F8 52%, var(--plat-b) 100%);
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  transition: transform .5s var(--ease);
  mix-blend-mode: multiply;
}
.woocommerce ul.products li.product:hover a img,
.wc-block-product:hover img { transform: scale(1.045) translateY(-2px); }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-name {
  font-family: var(--f-disp);
  font-weight: 500 !important;
  font-size: 1.16rem !important;
  line-height: 1.16;
  letter-spacing: -.022em;
  color: var(--ink);
  padding: 18px 20px 0 !important;
  margin: 0;
  min-height: 0;
}
.woocommerce ul.products li.product .price,
.wc-block-product .wc-block-components-product-price {
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -.012em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  padding: 10px 20px 0;
  margin: 0 0 auto;
}
.woocommerce ul.products li.product .price del { color: var(--accent); font-weight: 400; }
.woocommerce ul.products li.product .price ins { color: var(--gold-ink); text-decoration: none; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin: 16px 20px 20px;
  align-self: flex-start;
}

/* ---------- single product ------------------------------------------------ */

.single-product div.product .product_title {
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: -.026em;
  color: var(--ink);
}
.single-product div.product .price,
.wc-block-components-product-price__value {
  font-family: var(--f-disp);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -.012em;
}
.single-product div.product .woocommerce-product-gallery img {
  border-radius: var(--r);
  background: radial-gradient(72% 62% at 50% 42%, #FFFFFF 0%, #F6F7F8 52%, var(--plat-b) 100%);
  border: 1px solid var(--line-2);
}

/* Specifications + COA tabs from the mu-plugin */
.woocommerce-tabs ul.tabs li a {
  font-family: var(--f-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.woocommerce-tabs ul.tabs li.active a { color: var(--ink); }
.woocommerce-Tabs-panel h2 { font-family: var(--f-disp); font-weight: 500; letter-spacing: -.02em; }
.woocommerce-Tabs-panel table th { color: var(--accent); font-weight: 600; }
.woocommerce-Tabs-panel table td { color: var(--ink-soft); }

/* ---------- buttons: one pill language across classic + block Woo --------- */

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.wc-block-components-button,
.wp-block-button__link,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px !important;
  font-family: var(--f-body);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.005em;
  border: 1px solid transparent;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 1px 2px rgba(43, 49, 56, .18);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.wc-block-components-button:hover,
.wp-block-button__link:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: #1F252B;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(43, 49, 56, .58);
}
/* Secondary / outline variants keep the ghost treatment.
 * .wc-backward is deliberately NOT here: store.css pins that button's label to
 * #fff !important (an old fix for navy-on-navy), so giving it a white ground
 * renders "Return to shop" as white text on white. It stays a primary button. */
.wc-block-components-button.outlined,
.is-style-outline .wp-block-button__link {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}
.wc-block-components-button.outlined:hover,
.is-style-outline .wp-block-button__link:hover {
  background: #fff;
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: var(--shadow);
}

/* ---------- forms: cart, checkout, account -------------------------------- */

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select,
.wc-block-components-text-input input,
.wc-block-components-select__select {
  font-family: var(--f-body);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 46px;
}
.woocommerce input:focus-visible,
.woocommerce select:focus-visible,
.woocommerce textarea:focus-visible,
.wc-block-components-text-input input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.woocommerce label,
.wc-block-components-text-input label,
.wc-block-components-checkbox__label {
  color: var(--ink-soft);
  font-size: .9375rem;
}

/* ---------- tables (cart, order review, account orders) ------------------- */

.woocommerce table.shop_table,
.wc-block-cart-items {
  border: 1px solid var(--line);
  border-radius: var(--r);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--card);
}
.woocommerce table.shop_table th,
.wc-block-cart-items__header {
  font-family: var(--f-body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--plat-a);
  border-bottom: 1px solid var(--line);
}
.woocommerce table.shop_table td { border-top: 1px solid var(--line-2); color: var(--ink-soft); }
.wc-block-components-product-name { font-family: var(--f-disp); font-weight: 500; letter-spacing: -.018em; color: var(--ink); }

/* ---------- notices ------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font-family: var(--f-body);
}
.woocommerce-message { border-left: 3px solid var(--gold-ink); }
.woocommerce-error { border-left: 3px solid #A2402F; }

/* Woo ships its own status colours on these modifier classes, which out-specify
 * the bare banner selector above — restate them on the palette. */
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning {
  background: var(--card);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.wc-block-components-notice-banner.is-info { border-left: 3px solid var(--gold-ink); }
.wc-block-components-notice-banner.is-success { border-left: 3px solid #4A6B4F; }
.wc-block-components-notice-banner.is-error { border-left: 3px solid #A2402F; }
.wc-block-components-notice-banner.is-warning { border-left: 3px solid var(--gold); }
.wc-block-components-notice-banner.is-info svg { fill: var(--gold-ink); }
.wc-block-components-notice-banner.is-success svg { fill: #4A6B4F; }
.wc-block-components-notice-banner.is-error svg { fill: #A2402F; }
.wc-block-components-notice-banner.is-warning svg { fill: var(--gold-ink); }

/* ---------- account ------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 11px 0;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-2);
  font-size: .9375rem;
}
.woocommerce-MyAccount-navigation li.is-active a { color: var(--ink); font-weight: 500; }
.woocommerce-MyAccount-navigation li a:hover { color: var(--gold-ink); }

/* ---------- RUO compliance blocks keep their weight ----------------------- */

.pst-strip, .pst-legal, .pst-copyright, .pst-ruo-ack { font-family: var(--f-body); }