/**
 * Hyde Storefront Parity — global primitives
 * ---------------------------------------------------------------------------
 * Pulls the WoodMart / WooCommerce storefront up to the VERITAS plugin's
 * design language. References --hyde-* tokens only, so it stays locked to
 * hyde-tokens.css and drifts nowhere.
 *
 * Depends on the 'hyde-tokens' handle (registered globally by the plugin as
 * of v2.24.7.9). Enqueue this stylesheet with array('hyde-tokens') as its
 * dependency so tokens load first. See functions.php snippet.
 *
 * Scope note: purchase CTAs (add to cart, checkout, place order) are styled
 * gold to match the plugin's primary button (moment-marker). Secondary
 * actions are ink. Veto the gold-CTA call if you'd rather keep buy buttons
 * neutral and reserve gold for the plugin only.
 *
 * v1 — global primitives (links, buttons, form fields). Typography is set in
 * WoodMart theme options, not here, on purpose.
 * @version 0.1.0
 */

/* ─────────── Links ─────────── */
/* Intentionally not themed. Forcing a Hyde-blue link color here bled onto
   product titles and breadcrumbs, whose WoodMart markup varies by version,
   so exempting them turned into whack-a-mole. WoodMart's own link colors are
   sensible, so links are left to the theme. Buttons and form fields below
   are still themed. */

/* ─────────── Buttons: shared shape ─────────── */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hyde-space-2);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--hyde-radius-input);
  font-family: var(--hyde-font);
  font-size: var(--hyde-text-small);
  font-weight: var(--hyde-weight-medium);
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--hyde-duration-fast) var(--hyde-ease),
              border-color var(--hyde-duration-fast) var(--hyde-ease);
}

/* Secondary / default buttons — ink */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--hyde-ink);
  color: var(--hyde-paper);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--hyde-ink-2);
  color: var(--hyde-paper);
}

/* Primary purchase CTAs — gold (moment-marker).
   -deep is required under white text for WCAG AA, per token notes. */

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #place_order,
.woocommerce a.added_to_cart {
  background: var(--hyde-gold-deep);
  color: var(--hyde-paper);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover,
.woocommerce a.added_to_cart:hover {
  background: var(--hyde-gold-dark);
  color: var(--hyde-paper);
}

/* Focus ring — shared */

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #place_order:focus-visible {
  outline: none;
  box-shadow: var(--hyde-shadow-focus);
}

/* ─────────── Form fields ─────────── */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .woocommerce-ordering select,
.woocommerce-account input.input-text,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select {
  font-family: var(--hyde-font);
  font-size: var(--hyde-text-body);
  color: var(--hyde-ink);
  background: var(--hyde-paper);
  border: 1px solid var(--hyde-line);
  border-radius: var(--hyde-radius-input);
  padding: 8px 12px;
  line-height: var(--hyde-leading-snug);
  transition: border-color var(--hyde-duration-fast) var(--hyde-ease),
              box-shadow var(--hyde-duration-fast) var(--hyde-ease);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce .woocommerce-ordering select:focus,
.woocommerce-account input.input-text:focus,
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
  outline: none;
  border-color: var(--hyde-gold);
  box-shadow: var(--hyde-shadow-focus);
}

/* ─────────── My Account ───────────
   Native WooCommerce account screens, brought up to token parity so they
   sit cleanly beside the plugin's seller portal. Scoped to .woocommerce-account
   so cart, checkout, and shop tables are untouched (their own later pass). */

/* Account navigation — list styled as a Hyde nav card, gold active marker */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 var(--hyde-space-5);
  padding: 0;
  background: var(--hyde-paper);
  border: 1px solid var(--hyde-line-soft);
  border-radius: var(--hyde-radius-card);
  overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  border-bottom: 1px solid var(--hyde-line-faint);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px var(--hyde-space-4);
  font-family: var(--hyde-font);
  font-size: var(--hyde-text-body);
  font-weight: var(--hyde-weight-medium);
  color: var(--hyde-ink);
  text-decoration: none;
  transition: background var(--hyde-duration-fast) var(--hyde-ease);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--hyde-surface);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--hyde-gold);
  background: var(--hyde-gold-faint);
  box-shadow: inset 3px 0 0 var(--hyde-gold-deep);
}

/* Orders / downloads tables (account only) */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
  border: 1px solid var(--hyde-line-soft);
  border-radius: var(--hyde-radius-card);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: var(--hyde-text-small);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
  padding: var(--hyde-space-3) var(--hyde-space-4);
  background: var(--hyde-surface);
  color: var(--hyde-ink-soft);
  font-size: var(--hyde-text-tiny);
  font-weight: var(--hyde-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--hyde-tracking-eyebrow);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
  padding: var(--hyde-space-3) var(--hyde-space-4);
  border-top: 1px solid var(--hyde-line-faint);
  color: var(--hyde-ink);
}

/* Saved addresses — card treatment matching .hyde-card */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
  background: var(--hyde-paper);
  border: 1px solid var(--hyde-line-soft);
  border-radius: var(--hyde-radius-card);
  padding: var(--hyde-space-5);
}
.woocommerce-account .woocommerce-Address-title h3 {
  font-size: var(--hyde-text-h3);
  font-weight: var(--hyde-weight-semibold);
  color: var(--hyde-ink);
}

/* Field labels in account forms */
.woocommerce-account .woocommerce-MyAccount-content form label {
  font-size: var(--hyde-text-tiny);
  font-weight: var(--hyde-weight-medium);
  color: var(--hyde-ink-soft);
  letter-spacing: 0.02em;
}

/* ============================================================
   Order received / thank-you page — scoped to .woocommerce-order-received
   ============================================================ */

/* Hero message — replace Woo's green text and dashed cage.
   WoodMart colors this element in its own compiled CSS, so the color
   needs !important and the selector carries the element for weight. */
.woocommerce-order-received p.woocommerce-thankyou-order-received,
.woocommerce-order-received .woocommerce-thankyou-order-received {
  font-family: var(--hyde-font);
  font-size: var(--hyde-text-h3);
  font-weight: var(--hyde-weight-semibold);
  color: var(--hyde-ink) !important;
  letter-spacing: 0.02em;
  text-align: center;
  border: 0 !important;
  outline: none !important;
  background: none;
  padding: var(--hyde-space-2) 0 0;
  margin: var(--hyde-space-4) 0 var(--hyde-space-2);
}

/* Gold rule under the message instead of the dashed box */
.woocommerce-order-received p.woocommerce-thankyou-order-received::after,
.woocommerce-order-received .woocommerce-thankyou-order-received::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: var(--hyde-gold);
  margin: var(--hyde-space-3) auto 0;
}

/* Order overview strip — number / date / email / total / method */
.woocommerce-order-received ul.woocommerce-thankyou-order-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--hyde-space-2) 0 var(--hyde-space-5);
  padding: var(--hyde-space-4) 0;
  border-top: 1px solid var(--hyde-line-soft);
  border-bottom: 1px solid var(--hyde-line-soft);
  list-style: none;
}
.woocommerce-order-received ul.woocommerce-thankyou-order-details li {
  border-right: 1px solid var(--hyde-line-faint);
  padding: 0 var(--hyde-space-5);
  margin: 0 0 var(--hyde-space-2);
  font-size: var(--hyde-text-tiny);
  font-weight: var(--hyde-weight-medium);
  letter-spacing: var(--hyde-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hyde-ink-soft);
  text-align: center;
}
.woocommerce-order-received ul.woocommerce-thankyou-order-details li:last-child {
  border-right: 0;
}
.woocommerce-order-received ul.woocommerce-thankyou-order-details li strong {
  display: block;
  white-space: nowrap;
  margin-top: var(--hyde-space-2);
  font-size: var(--hyde-text-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--hyde-ink);
  font-weight: var(--hyde-weight-semibold);
}

/* Section headings — Order details / Billing address */
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title {
  font-family: var(--hyde-font);
  font-size: var(--hyde-text-h3);
  font-weight: var(--hyde-weight-semibold);
  color: var(--hyde-ink);
  border-bottom: 2px solid var(--hyde-gold);
  display: inline-block;
  padding-bottom: var(--hyde-space-2);
  margin-top: var(--hyde-space-4);
  margin-bottom: var(--hyde-space-4);
}

/* Order table — WoodMart's .woocommerce table.shop_table th/td rules
   outweigh a bare class selector, so match its weight and pin padding. */
.woocommerce-order-received table.shop_table.woocommerce-table--order-details,
.woocommerce-order-received table.woocommerce-table--order-details {
  border: 1px solid var(--hyde-line-soft);
  border-radius: var(--hyde-radius-card);
  border-collapse: collapse;
  margin-bottom: var(--hyde-space-5);
}
.woocommerce-order-received table.shop_table.woocommerce-table--order-details th,
.woocommerce-order-received table.shop_table.woocommerce-table--order-details td,
.woocommerce-order-received table.woocommerce-table--order-details th,
.woocommerce-order-received table.woocommerce-table--order-details td {
  border-color: var(--hyde-line-faint);
  padding: var(--hyde-space-4) var(--hyde-space-5) !important;
  font-size: var(--hyde-text-small);
  vertical-align: middle;
}
.woocommerce-order-received table.shop_table.woocommerce-table--order-details thead th,
.woocommerce-order-received table.woocommerce-table--order-details thead th {
  font-size: var(--hyde-text-tiny);
  font-weight: var(--hyde-weight-medium);
  letter-spacing: var(--hyde-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hyde-ink-soft);
  background: var(--hyde-paper);
}
.woocommerce-order-received table.shop_table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received table.shop_table.woocommerce-table--order-details tfoot tr:last-child td,
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td {
  font-size: var(--hyde-text-body);
  font-weight: var(--hyde-weight-semibold);
  color: var(--hyde-ink);
  background: var(--hyde-paper);
}

/* Billing address — drop default italics, card treatment */
.woocommerce-order-received address {
  font-style: normal;
  line-height: var(--hyde-leading-snug);
  color: var(--hyde-ink-2);
  background: var(--hyde-paper);
  border: 1px solid var(--hyde-line-soft);
  border-radius: var(--hyde-radius-card);
  padding: var(--hyde-space-4) var(--hyde-space-5);
}

/* Mobile — stack the overview strip */
@media (max-width: 640px) {
  .woocommerce-order-received ul.woocommerce-thankyou-order-details {
    flex-direction: column;
    gap: var(--hyde-space-3);
  }
  .woocommerce-order-received ul.woocommerce-thankyou-order-details li {
    border-right: 0;
    padding: 0;
  }
}

/* ============================================================
   Checkout page — scoped to elements that exist only on the
   checkout form, so nothing leaks onto order-received (which
   shares the woocommerce-checkout body class)
   ============================================================ */

/* Section headings — Billing details / Additional information / Your order */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--hyde-font);
  font-size: var(--hyde-text-h3);
  font-weight: var(--hyde-weight-semibold);
  color: var(--hyde-ink);
  text-transform: none;
  border-bottom: 2px solid var(--hyde-gold);
  display: inline-block;
  padding-bottom: var(--hyde-space-2);
  margin-bottom: var(--hyde-space-4);
}

/* Order review table — same treatment as the thank-you table,
   selector weight matched to WoodMart's .woocommerce table.shop_table */
form.woocommerce-checkout table.shop_table {
  border: 1px solid var(--hyde-line-soft);
  border-radius: var(--hyde-radius-card);
  border-collapse: collapse;
}
form.woocommerce-checkout table.shop_table th,
form.woocommerce-checkout table.shop_table td {
  border-color: var(--hyde-line-faint);
  padding: var(--hyde-space-4) var(--hyde-space-5) !important;
  font-size: var(--hyde-text-small);
  vertical-align: middle;
}
form.woocommerce-checkout table.shop_table thead th {
  font-size: var(--hyde-text-tiny);
  font-weight: var(--hyde-weight-medium);
  letter-spacing: var(--hyde-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hyde-ink-soft);
  background: var(--hyde-paper);
}
form.woocommerce-checkout table.shop_table tr.order-total th,
form.woocommerce-checkout table.shop_table tr.order-total td {
  font-size: var(--hyde-text-body);
  font-weight: var(--hyde-weight-semibold);
  color: var(--hyde-ink);
  background: var(--hyde-paper);
}

/* Payment box — card treatment instead of Woo's gray slab */
form.woocommerce-checkout #payment {
  background: var(--hyde-paper);
  border: 1px solid var(--hyde-line-soft);
  border-radius: var(--hyde-radius-card);
}
form.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--hyde-line-faint);
  padding: var(--hyde-space-4) var(--hyde-space-5);
}
form.woocommerce-checkout #payment ul.payment_methods li {
  padding: var(--hyde-space-2) 0;
}
form.woocommerce-checkout #payment ul.payment_methods label {
  font-size: var(--hyde-text-body);
  font-weight: var(--hyde-weight-medium);
  color: var(--hyde-ink);
}
form.woocommerce-checkout #payment div.payment_box {
  background: var(--hyde-gold-faint);
  border: 1px solid var(--hyde-line-faint);
  border-radius: var(--hyde-radius-card);
  color: var(--hyde-ink-2);
  font-size: var(--hyde-text-small);
}
form.woocommerce-checkout #payment div.payment_box::before {
  display: none; /* Woo's gray speech-bubble arrow, pointless on a square card */
}
form.woocommerce-checkout #payment div.place-order {
  padding: var(--hyde-space-4) var(--hyde-space-5) var(--hyde-space-5);
}

/* Privacy policy text above the button */
form.woocommerce-checkout .woocommerce-privacy-policy-text p {
  font-size: var(--hyde-text-tiny);
  color: var(--hyde-ink-soft);
  line-height: var(--hyde-leading-snug);
}
form.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: var(--hyde-gold-deep);
  text-decoration: underline;
}

/* Place order — the one CTA on the page goes gold, full width */
form.woocommerce-checkout #place_order {
  display: block;
  width: 100%;
  background: var(--hyde-gold) !important;
  border-color: var(--hyde-gold) !important;
  color: var(--hyde-surface) !important;
  font-weight: var(--hyde-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--hyde-text-small);
  padding: var(--hyde-space-4) var(--hyde-space-5);
  border-radius: var(--hyde-radius-input);
  transition: background var(--hyde-duration-fast) var(--hyde-ease);
}
form.woocommerce-checkout #place_order:hover {
  background: var(--hyde-gold-deep) !important;
  border-color: var(--hyde-gold-deep) !important;
}

/* Returning customer / coupon toggle links */
.woocommerce-checkout .woocommerce-form-login-toggle a,
.woocommerce-checkout .woocommerce-form-coupon-toggle a {
  color: var(--hyde-gold-deep);
  text-decoration: underline;
}

/* ============================================================
   WooCommerce notices — replace the green/blue defaults with
   the brand treatment, site-wide
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.wd-notice.wd-success,
.wd-notice.wd-info {
  background: var(--hyde-paper) !important;
  color: var(--hyde-ink) !important;
  border: 1px solid var(--hyde-line-soft) !important;
  border-left: 3px solid var(--hyde-gold) !important;
  border-radius: var(--hyde-radius-card);
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--hyde-gold) !important;
}
.woocommerce-message a,
.woocommerce-info a {
  color: var(--hyde-gold-deep);
}
.woocommerce-error,
.wd-notice.wd-warning {
  background: var(--hyde-paper) !important;
  color: var(--hyde-ink) !important;
  border: 1px solid var(--hyde-line-soft) !important;
  border-left: 3px solid var(--hyde-danger, #b23b3b) !important;
  border-radius: var(--hyde-radius-card);
}

/* ============================================================
   Empty cart — branded state (markup output from the plugin);
   hide Woo's default message/button so they don't double up
   ============================================================ */
.woocommerce-cart .wc-empty-cart-message,
.woocommerce-cart p.return-to-shop {
  display: none;
}
.hsp-empty-cart {
  text-align: center;
  padding: var(--hyde-space-5) var(--hyde-space-4);
  margin: var(--hyde-space-5) auto;
  max-width: 520px;
}
.hsp-empty-cart h2 {
  font-family: var(--hyde-font);
  font-size: var(--hyde-text-h3);
  font-weight: var(--hyde-weight-semibold);
  color: var(--hyde-ink);
  margin: 0 0 var(--hyde-space-2);
}
.hsp-empty-cart h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: var(--hyde-gold);
  margin: var(--hyde-space-3) auto 0;
}
.hsp-empty-cart p {
  font-size: var(--hyde-text-body);
  color: var(--hyde-ink-soft);
  margin: var(--hyde-space-4) 0 var(--hyde-space-5);
}
.hsp-empty-cart .hsp-empty-cart-cta {
  display: inline-block;
  background: var(--hyde-gold) !important;
  border: 1px solid var(--hyde-gold) !important;
  color: var(--hyde-surface) !important;
  font-weight: var(--hyde-weight-semibold);
  font-size: var(--hyde-text-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--hyde-space-3) var(--hyde-space-5);
  border-radius: var(--hyde-radius-input);
  transition: background var(--hyde-duration-fast) var(--hyde-ease);
}
.hsp-empty-cart .hsp-empty-cart-cta:hover {
  background: var(--hyde-gold-deep) !important;
  border-color: var(--hyde-gold-deep) !important;
}

/* Empty cart — suppress redundant success/info notices; the branded
   empty state already says everything. Errors remain visible.
   Two scopes for the same rule:
   1. .hsp-cart-empty — body class set by PHP when the page LOADS empty.
   2. :has(.hsp-empty-cart) — v1.5.3: covers the AJAX path. Removing the
      last item re-renders the cart via WooCommerce fragments without a
      page load, so the body class from (1) never gets added; keying off
      the presence of our branded empty-state block instead works in both
      cases. (1) is kept as a belt for browsers without :has(). */
.hsp-cart-empty .woocommerce-message,
.hsp-cart-empty .woocommerce-info,
.hsp-cart-empty .wd-notice.wd-success,
.hsp-cart-empty .wd-notice.wd-info,
.hsp-cart-empty p.cart-empty,
body.woocommerce-cart:has(.hsp-empty-cart) .woocommerce-message,
body.woocommerce-cart:has(.hsp-empty-cart) .woocommerce-info,
body.woocommerce-cart:has(.hsp-empty-cart) .wd-notice.wd-success,
body.woocommerce-cart:has(.hsp-empty-cart) .wd-notice.wd-info,
body.woocommerce-cart:has(.hsp-empty-cart) p.cart-empty {
  display: none !important;
}

/* ============================================================
   One-of-one merchandising — shop grid + single product
   ============================================================ */

/* Eyebrow tag above product titles, grid and single. Pure CSS so it
   renders regardless of WoodMart's card template version. */
.products .product .wd-entities-title::before,
.product-grid-item .wd-entities-title::before {
  content: "One of one";
  display: block;
  font-size: var(--hyde-text-tiny);
  font-weight: var(--hyde-weight-medium);
  letter-spacing: var(--hyde-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hyde-gold-deep);
  margin-bottom: var(--hyde-space-2);
}
.single-product div.product .product_title::before {
  content: "One of one";
  display: block;
  font-size: var(--hyde-text-tiny);
  font-weight: var(--hyde-weight-medium);
  letter-spacing: var(--hyde-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hyde-gold-deep);
  margin-bottom: var(--hyde-space-2);
}

/* Product labels — replace WoodMart's red/green pills with brand marks.
   Sold (out of stock): gold on ink. Sale: ink on gold. Square. */
.wd-product-label,
.product-labels .product-label,
span.onsale {
  border-radius: 0 !important;
  font-size: var(--hyde-text-tiny);
  font-weight: var(--hyde-weight-semibold);
  letter-spacing: var(--hyde-tracking-eyebrow);
  text-transform: uppercase;
}
.wd-product-label.out-of-stock,
.product-labels .out-of-stock {
  background: var(--hyde-ink) !important;
  color: var(--hyde-gold) !important;
}
.wd-product-label.onsale,
.product-labels .onsale,
span.onsale {
  background: var(--hyde-gold) !important;
  color: var(--hyde-surface) !important;
}
.wd-product-label.new,
.product-labels .new {
  background: var(--hyde-paper) !important;
  color: var(--hyde-ink) !important;
  border: 1px solid var(--hyde-gold) !important;
}

/* Sold treatment v2 — legibility fixes from live review.
   Label: paper on ink (gold was illegible at label size).
   Stock-status line: quiet ink mark, not WoodMart's error red. */
.wd-product-label.out-of-stock,
.product-labels .out-of-stock {
  color: var(--hyde-paper) !important;
  font-size: var(--hyde-text-small);
  padding: var(--hyde-space-2) var(--hyde-space-3);
}
.single-product div.product p.stock.out-of-stock,
p.stock.out-of-stock {
  color: var(--hyde-ink-soft) !important;
  font-size: var(--hyde-text-small);
  font-weight: var(--hyde-weight-medium);
  letter-spacing: 0.01em;
  text-transform: none;
}

/* ============================================================
   404 — branded template body (templates/404.php)
   ============================================================ */
.hsp-404 {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 120px;
  text-align: center;
}
.hsp-404-watermark {
  font-family: var(--hyde-font);
  font-size: 180px;
  line-height: 1;
  font-weight: var(--hyde-weight-medium);
  letter-spacing: 0.04em;
  color: var(--hyde-gold);
  opacity: 0.1;
  user-select: none;
  pointer-events: none;
}
.hsp-404-inner {
  position: relative;
  margin-top: -118px;
}
.hsp-404-eyebrow {
  display: block;
  font-size: var(--hyde-text-tiny);
  font-weight: var(--hyde-weight-medium);
  letter-spacing: var(--hyde-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hyde-gold-deep);
  margin-bottom: var(--hyde-space-3);
}
.hsp-404 h1 {
  font-family: var(--hyde-font);
  font-size: 40px;
  line-height: 1.15;
  font-weight: var(--hyde-weight-semibold);
  color: var(--hyde-ink);
  max-width: 560px;
  margin: 0 auto;
}
.hsp-404 h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  background: var(--hyde-gold);
  margin: 22px auto 0;
}
.hsp-404 p {
  font-size: var(--hyde-text-body);
  color: var(--hyde-ink-soft);
  line-height: 1.7;
  max-width: 520px;
  margin: 22px auto 34px;
}
.hsp-404-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--hyde-space-4);
  flex-wrap: wrap;
  margin-bottom: 38px;
}
.hsp-404-cta {
  display: inline-block;
  background: var(--hyde-gold) !important;
  border: 1px solid var(--hyde-gold) !important;
  color: var(--hyde-surface) !important;
  font-weight: var(--hyde-weight-semibold);
  font-size: var(--hyde-text-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 34px;
  border-radius: var(--hyde-radius-input);
  transition: background var(--hyde-duration-fast) var(--hyde-ease);
}
.hsp-404-cta:hover {
  background: var(--hyde-gold-deep) !important;
  border-color: var(--hyde-gold-deep) !important;
}
.hsp-404-home {
  color: var(--hyde-ink) !important;
  font-size: var(--hyde-text-small);
  font-weight: var(--hyde-weight-medium);
  text-decoration: underline;
}
.hsp-404-search {
  display: flex;
  max-width: 440px;
  margin: 0 auto;
  border: 1px solid var(--hyde-line);
  background: var(--hyde-surface);
}
.hsp-404-search input[type="search"] {
  flex: 1;
  border: 0;
  padding: 13px 16px;
  font-size: var(--hyde-text-small);
  color: var(--hyde-ink);
  background: transparent;
  border-radius: 0;
}
.hsp-404-search input[type="search"]:focus {
  outline: none;
  box-shadow: var(--hyde-shadow-focus);
}
.hsp-404-search button {
  border: 0;
  border-left: 1px solid var(--hyde-line);
  background: transparent;
  color: var(--hyde-gold-deep);
  font-size: var(--hyde-text-small);
  font-weight: var(--hyde-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 22px;
  cursor: pointer;
  border-radius: 0;
  transition: background var(--hyde-duration-fast) var(--hyde-ease);
}
.hsp-404-search button:hover {
  background: var(--hyde-gold-faint);
}
@media (max-width: 640px) {
  .hsp-404-watermark { font-size: 110px; }
  .hsp-404-inner { margin-top: -72px; }
  .hsp-404 h1 { font-size: 30px; }
}

/* 404 refinements (v1.5.2): kill WoodMart link-hover underline on the CTA,
   flatten WoodMart's inner input chrome, live-results dropdown */
.hsp-404-cta,
.hsp-404-cta:hover,
.hsp-404-cta:focus {
  text-decoration: none !important;
}
.hsp-404-search-wrap {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
}
.hsp-404-search {
  max-width: none;
}
.hsp-404-search input[type="search"],
.hsp-404-search input[type="search"]:focus {
  height: 46px;
  min-height: 0;
  padding: 0 16px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
}
.hsp-404-search button,
.hsp-404-search button:hover {
  height: 46px;
  background: transparent;
  box-shadow: none !important;
}
.hsp-404-search button:hover {
  background: var(--hyde-gold-faint);
}
.hsp-404-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--hyde-surface);
  border: 1px solid var(--hyde-line);
  border-top: 0;
  z-index: 50;
  text-align: left;
}
.hsp-404-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none !important;
  border-bottom: 1px solid var(--hyde-line-faint);
  transition: background var(--hyde-duration-fast) var(--hyde-ease);
}
.hsp-404-result:last-child {
  border-bottom: 0;
}
.hsp-404-result:hover {
  background: var(--hyde-gold-faint);
}
.hsp-404-result img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  flex: 0 0 44px;
}
.hsp-404-result-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hsp-404-result-name {
  font-size: var(--hyde-text-small);
  color: var(--hyde-ink);
  font-weight: var(--hyde-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hsp-404-result-price {
  font-size: var(--hyde-text-tiny);
  color: var(--hyde-gold-deep);
  font-weight: var(--hyde-weight-semibold);
}
.hsp-404-result-empty {
  padding: 12px 14px;
  font-size: var(--hyde-text-small);
  color: var(--hyde-ink-soft);
}

/* ============================================================
   v1.5.4 — Full-screen search overlay (header search icon).
   WoodMart's overlay ships a bare thin-bordered input with a
   black square submit button — off-brand next to the rest of
   the storefront. Retheme on tokens. Scoped to WoodMart's
   full-screen search containers only, so the HSP 404 search
   and any sidebar search widgets are untouched. Selector pairs
   cover WoodMart's markup variants across versions.
   ============================================================ */
[class*="wd-search-full-screen"] .searchform input[type="text"],
[class*="wd-search-full-screen"] .searchform input[type="search"],
.wd-dropdown-search .searchform input[type="text"],
.wd-dropdown-search .searchform input[type="search"] {
  font-family: var(--hyde-font) !important;
  font-size: var(--hyde-text-h3) !important;
  font-weight: var(--hyde-weight-regular);
  color: var(--hyde-ink) !important;
  background: var(--hyde-paper) !important;
  border: 1px solid var(--hyde-line) !important;
  border-radius: var(--hyde-radius-input) !important;
  box-shadow: none !important;
}
[class*="wd-search-full-screen"] .searchform input[type="text"]:focus,
[class*="wd-search-full-screen"] .searchform input[type="search"]:focus,
.wd-dropdown-search .searchform input[type="text"]:focus,
.wd-dropdown-search .searchform input[type="search"]:focus {
  border-color: var(--hyde-gold) !important;
  box-shadow: none !important;
  outline: none;
}
[class*="wd-search-full-screen"] .searchform input::placeholder,
.wd-dropdown-search .searchform input::placeholder {
  color: var(--hyde-ink-fade);
}

/* Submit: gold-deep under the white icon (AA), gold-dark hover —
   same treatment as every primary control on the site. */
[class*="wd-search-full-screen"] .searchform .searchsubmit,
[class*="wd-search-full-screen"] .searchform button[type="submit"],
.wd-dropdown-search .searchform .searchsubmit,
.wd-dropdown-search .searchform button[type="submit"] {
  background: var(--hyde-gold-deep) !important;
  border: 1px solid var(--hyde-gold-deep) !important;
  color: var(--hyde-paper) !important;
  border-radius: var(--hyde-radius-input) !important;
  transition: background var(--hyde-duration-fast) var(--hyde-ease);
}
[class*="wd-search-full-screen"] .searchform .searchsubmit:hover,
[class*="wd-search-full-screen"] .searchform button[type="submit"]:hover,
.wd-dropdown-search .searchform .searchsubmit:hover,
.wd-dropdown-search .searchform button[type="submit"]:hover {
  background: var(--hyde-gold-dark) !important;
  border-color: var(--hyde-gold-dark) !important;
}

/* Live-search suggestion dropdown under the field: paper card,
   hairline separators, ink titles, quiet prices. */
[class*="wd-search-full-screen"] .wd-search-results,
[class*="wd-search-full-screen"] .wd-dropdown-results,
.wd-dropdown-search .wd-search-results,
.wd-dropdown-search .wd-dropdown-results {
  background: var(--hyde-paper) !important;
  border: 1px solid var(--hyde-line-soft) !important;
  border-radius: var(--hyde-radius-card) !important;
  box-shadow: none !important;
}
[class*="wd-search-full-screen"] .wd-search-results .suggestion-title,
.wd-dropdown-search .wd-search-results .suggestion-title {
  font-family: var(--hyde-font);
  font-size: var(--hyde-text-small);
  color: var(--hyde-ink);
}
[class*="wd-search-full-screen"] .wd-search-results .suggestion-price,
.wd-dropdown-search .wd-search-results .suggestion-price {
  font-size: var(--hyde-text-small);
  color: var(--hyde-ink-soft);
}

/* ============================================================
   v1.5.5 — Full-screen search overlay: LAYOUT pass. v1.5.4
   retoned the colors but left WoodMart's geometry — an
   edge-to-edge input floating in a void with a detached square
   button. Pull it toward the approved 404 search pattern:
   constrained centered column, eyebrow heading, house control
   height, button attached to the field.
   ============================================================ */
[class*="wd-search-full-screen"] .searchform,
[class*="wd-search-full-screen"] form {
  max-width: 680px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative;
}

/* Eyebrow heading above the field, same voice as the 404 page. */
[class*="wd-search-full-screen"] .searchform::before {
  content: "Search the collection";
  display: block;
  font-family: var(--hyde-font);
  font-size: var(--hyde-text-tiny);
  font-weight: var(--hyde-weight-semibold);
  letter-spacing: var(--hyde-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hyde-gold-deep);
  margin-bottom: var(--hyde-space-3);
  text-align: left;
}

/* House control height and calmer type. v1.5.4's h3-size input
   read oversized against 15px body type everywhere else. */
[class*="wd-search-full-screen"] .searchform input[type="text"],
[class*="wd-search-full-screen"] .searchform input[type="search"] {
  height: 52px !important;
  line-height: 52px !important;
  font-size: var(--hyde-text-body) !important;
  padding: 0 64px 0 var(--hyde-space-4) !important;
}

/* Button lives inside the field's right edge instead of floating
   beside it as a detached block. */
[class*="wd-search-full-screen"] .searchform .searchsubmit,
[class*="wd-search-full-screen"] .searchform button[type="submit"] {
  position: absolute !important;
  right: 4px !important;
  top: auto !important;
  bottom: 4px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
}

/* Suggestion dropdown matches the field width, not the viewport. */
[class*="wd-search-full-screen"] .wd-search-results,
[class*="wd-search-full-screen"] .wd-dropdown-results {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   v1.5.7 — Search overlay: professional pass now that selectors
   land. Three fixes: (1) submit showed WoodMart's clipped
   "Search" text + overflowing icon inside the 44px square —
   kill all inner content and paint our own magnifier; (2) the
   results panel had a fixed height leaving a huge white void —
   height follows content, scrolls past 60vh; (3) result items
   rendered as full grid cards — compact them into suggestion
   rows matching the 404 live-search pattern.
   ============================================================ */

/* (1) Icon-only submit. Inner text/icons hidden, white magnifier
   painted as a background SVG, centered. */
[class*="wd-search-full-screen"] .searchform .searchsubmit,
[class*="wd-search-full-screen"] .searchform button[type="submit"] {
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}
[class*="wd-search-full-screen"] .searchform .searchsubmit > *,
[class*="wd-search-full-screen"] .searchform .searchsubmit::before,
[class*="wd-search-full-screen"] .searchform .searchsubmit::after {
  display: none !important;
}

/* Clear (x) control: quiet, vertically centered in the field,
   clear of the submit square. v1.5.12: WoodMart positions it
   against the whole form, and our eyebrow heading made the form
   taller, floating the X above the field — anchor it from the
   BOTTOM instead (input is 52px at the form's bottom edge, so
   bottom:26px + translateY(50%) is the input's midline no matter
   what sits above). */
[class*="wd-search-full-screen"] .searchform .wd-clear-search {
  color: var(--hyde-ink-fade) !important;
  right: 58px !important;
  top: auto !important;
  bottom: 26px !important;
  transform: translateY(50%) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* (2) Results panel: no fixed-height void. Grows with content,
   scrolls when long. Hairline card on paper. */
[class*="wd-search-full-screen"] .wd-search-results {
  height: auto !important;
  min-height: 0 !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  margin-top: var(--hyde-space-2);
}

/* (3) Suggestion rows: thumb + text in a quiet row, hairline
   separators — the 404 dropdown pattern. Covers WoodMart's
   grid-item and wd-product markup variants. */
[class*="wd-search-full-screen"] .wd-search-results .product-grid-item,
[class*="wd-search-full-screen"] .wd-search-results [class*="wd-product"],
[class*="wd-search-full-screen"] .wd-search-results li.product {
  display: flex !important;
  align-items: center !important;
  gap: var(--hyde-space-3);
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  text-align: left !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--hyde-line-faint);
  background: var(--hyde-paper);
}
[class*="wd-search-full-screen"] .wd-search-results img {
  width: 48px !important;
  height: 48px !important;
  object-fit: cover;
  flex: 0 0 48px;
  margin: 0 !important;
}
[class*="wd-search-full-screen"] .wd-search-results .wd-entities-title,
[class*="wd-search-full-screen"] .wd-search-results h3,
[class*="wd-search-full-screen"] .wd-search-results .product-title {
  font-family: var(--hyde-font) !important;
  font-size: var(--hyde-text-small) !important;
  font-weight: var(--hyde-weight-medium) !important;
  color: var(--hyde-ink) !important;
  margin: 0 !important;
  text-align: left !important;
}
[class*="wd-search-full-screen"] .wd-search-results .wd-entities-title::before {
  display: none !important; /* no One-of-one eyebrow inside suggestion rows */
}
[class*="wd-search-full-screen"] .wd-search-results .price {
  font-size: var(--hyde-text-small) !important;
  color: var(--hyde-ink-soft) !important;
  margin: 0 !important;
}

/* "View all results": uppercase eyebrow link, gold-deep, roomy
   hit area, no leftover borders. */
[class*="wd-search-full-screen"] .wd-search-results [class*="show-all"],
[class*="wd-search-full-screen"] .wd-search-results [class*="view-all"] {
  display: block;
  font-family: var(--hyde-font) !important;
  font-size: var(--hyde-text-tiny) !important;
  font-weight: var(--hyde-weight-semibold) !important;
  letter-spacing: var(--hyde-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hyde-gold-deep) !important;
  text-decoration: none !important;
  text-align: center;
  padding: 14px !important;
  border: 0 !important;
}
[class*="wd-search-full-screen"] .wd-search-results [class*="show-all"]:hover,
[class*="wd-search-full-screen"] .wd-search-results [class*="view-all"]:hover {
  color: var(--hyde-gold-dark) !important;
  background: var(--hyde-gold-faint);
}

/* ============================================================
   v1.5.8 — Overlay live search, branded dropdown. WoodMart's
   own AJAX results panel resisted three restyling passes, so it
   is hidden outright and hyde-search.js renders our markup in
   its place — aligned to the field because it's a child of the
   form, rows identical to the approved 404 pattern.
   ============================================================ */
[class*="wd-search-full-screen"] .wd-search-results,
[class*="wd-search-full-screen"] .wd-search-loader {
  display: none !important;
}

.hsp-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--hyde-paper);
  border: 1px solid var(--hyde-line-soft);
  border-radius: var(--hyde-radius-card);
  overflow: hidden;
  max-height: 60vh;
  overflow-y: auto;
  text-align: left;
}
.hsp-search-row {
  display: flex;
  align-items: center;
  gap: var(--hyde-space-3);
  padding: 10px 14px;
  text-decoration: none !important;
  border-bottom: 1px solid var(--hyde-line-faint);
  background: var(--hyde-paper);
}
.hsp-search-row:hover {
  background: var(--hyde-gold-faint);
}
.hsp-search-row img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  flex: 0 0 44px;
  border: 1px solid var(--hyde-line-faint);
}
.hsp-search-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hsp-search-name {
  font-family: var(--hyde-font);
  font-size: var(--hyde-text-small);
  font-weight: var(--hyde-weight-medium);
  color: var(--hyde-ink);
  line-height: var(--hyde-leading-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hsp-search-row:hover .hsp-search-name {
  color: var(--hyde-ink);
}
.hsp-search-price {
  font-family: var(--hyde-font);
  font-size: var(--hyde-text-small);
  color: var(--hyde-ink-soft);
}
.hsp-search-empty {
  padding: 14px;
  font-family: var(--hyde-font);
  font-size: var(--hyde-text-small);
  color: var(--hyde-ink-soft);
}
.hsp-search-all {
  display: block;
  padding: 13px 14px;
  font-family: var(--hyde-font);
  font-size: var(--hyde-text-tiny);
  font-weight: var(--hyde-weight-semibold);
  letter-spacing: var(--hyde-tracking-eyebrow);
  text-transform: uppercase;
  text-align: center;
  color: var(--hyde-gold-deep) !important;
  text-decoration: none !important;
}
.hsp-search-all:hover {
  color: var(--hyde-gold-dark) !important;
  background: var(--hyde-gold-faint);
}

/* ============================================================
   v1.5.9 — Header account element: kill the logged-out flash.
   The account icon paints in its generic state and is corrected
   by script a beat later (cache/fragment hydration), causing a
   visible swap + sideways hop. Hold it invisible on first paint;
   hyde-search.js reveals it once state settles. Reserved space
   (visibility, not display) so the header doesn't reflow.
   ============================================================ */
[class*="wd-header-my-account"] {
  visibility: hidden;
  /* v1.5.11: fixed, centered footprint so the logged-out glyph and
     the logged-in avatar occupy identical space — no sideways hop
     when the state corrects. Visibility (not opacity) so the
     skeleton child can override and stay visible. */
  position: relative;
  min-width: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
html.hsp-account-ready [class*="wd-header-my-account"] {
  visibility: visible;
  animation: hsp-account-in 160ms ease;
}
@keyframes hsp-account-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* No-JS safety: if scripts never run, show it anyway. */
@media (scripting: none) {
  [class*="wd-header-my-account"] {
    visibility: visible;
  }
}

/* v1.5.10 — Placeholder circle holding the account element's spot
   while its state settles. Quiet gold-faint pulse, Hyde-voiced
   "loading" instead of an empty gap. Removed by JS at reveal. */
.hsp-account-skel {
  /* v1.5.11: overlays the account element's own box (absolute,
     centered) instead of sitting beside it — the old sibling
     placement added 28px that vanished at reveal, causing the
     leftward jump. visibility:visible escapes the parent's
     hidden state (works for visibility, unlike opacity). */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: visible;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hyde-gold-soft, #c9b478);
  animation: hsp-skel-pulse 1.1s ease-in-out infinite;
}
html.hsp-account-ready .hsp-account-skel {
  display: none;
}
@keyframes hsp-skel-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.75; }
}

/* ============================================================
   v1.5.13 — Checkout coupon toggle. WoodMart's compact treatment
   collapses the notice padding, jamming "Have a coupon?" against
   the bar's edge and crowding the page top. Give it the house
   notice treatment with real breathing room.
   ============================================================ */
.woocommerce-form-coupon-toggle .woocommerce-info {
  display: block !important;
  background: var(--hyde-paper) !important;
  border: 1px solid var(--hyde-line-soft) !important;
  border-left: 2px solid var(--hyde-gold) !important;
  padding: 14px 18px !important;
  margin: 8px 0 28px !important;
  font-size: var(--hyde-text-small) !important;
  color: var(--hyde-ink) !important;
  line-height: 1.5 !important;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before {
  display: none !important; /* Woo/WoodMart icon pseudo collides with the text */
}
.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .showcoupon {
  color: var(--hyde-gold-deep) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.woocommerce-form-coupon-toggle .woocommerce-info a:hover,
.woocommerce-form-coupon-toggle .showcoupon:hover {
  color: var(--hyde-gold-dark) !important;
}

/* ============================================================
   v1.5.14 — Checkout coupon toggle, second pass. v1.5.13 targeted
   Woo's .woocommerce-form-coupon-toggle wrapper, but WoodMart
   renders the notice UNWRAPPED (v1.3.1's bare .woocommerce-info
   colors reached it; the padding rules didn't). Pin it by content
   instead — the "Click here" link is Woo's .showcoupon anchor,
   which WoodMart's own toggle JS requires — and size the bar to
   the billing column (WoodMart checkout's standard 7/12 split).
   ============================================================ */
body.woocommerce-checkout .woocommerce-info:has(a.showcoupon) {
  display: block !important;
  box-sizing: border-box !important;
  width: calc(58.333% - 15px) !important;
  max-width: 100% !important;
  background: var(--hyde-paper) !important;
  border: 1px solid var(--hyde-line-soft) !important;
  border-left: 2px solid var(--hyde-gold) !important;
  padding: 16px 20px !important;
  margin: 0 0 30px !important;
  font-size: var(--hyde-text-body, 15px) !important;
  color: var(--hyde-ink) !important;
  line-height: 1.5 !important;
}
body.woocommerce-checkout .woocommerce-info:has(a.showcoupon)::before {
  display: none !important;
}
body.woocommerce-checkout .woocommerce-info a.showcoupon {
  color: var(--hyde-gold-deep) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
body.woocommerce-checkout .woocommerce-info a.showcoupon:hover {
  color: var(--hyde-gold-dark) !important;
}
@media (max-width: 1024px) {
  body.woocommerce-checkout .woocommerce-info:has(a.showcoupon) {
    width: 100% !important;
  }
}

/* v1.5.15 — search progress spinner + 404 clear button */
.hsp-search-spin,
.hsp-404-spin {
	display: inline-block;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: 0 6px;
	border-radius: 50%;
	border: 2px solid var(--hyde-line-soft, #e5e5ea);
	border-top-color: var(--hyde-gold, #b5872a);
	animation: hsp-spin 0.7s linear infinite;
	vertical-align: middle;
}
.hsp-search-spin[hidden],
.hsp-404-spin[hidden] { display: none; }
@keyframes hsp-spin { to { transform: rotate(360deg); } }
.hsp-404-clear {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0 8px;
	font-size: 15px;
	line-height: 1;
	color: var(--hyde-ink-soft, #6e6e73);
	transition: color .18s ease;
}
.hsp-404-clear:hover { color: var(--hyde-ink, #1d1d1f); }
.hsp-404-clear[hidden] { display: none; }

/* v1.5.17 — one shared slot so the 404 spinner sits exactly where the X is.
   The clear X is a <button>, so .hsp-404-search button's submit styling
   (46px, border-left, uppercase, gold hover) bled onto it — the .15/.16
   misalignment root. These two-class rules out-specify that and fully
   reset it; the slot also needs align-self:center in the flex row. */
.hsp-404-ctl {
	position: relative;
	display: inline-block;
	align-self: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
}
.hsp-404-ctl .hsp-404-clear,
.hsp-404-ctl .hsp-404-spin {
	position: absolute;
	margin: 0;
	padding: 0;
}
/* v1.5.18 — the rotate keyframes animate `transform`, which OVERWROTE the
   translate(-50%,-50%) centering each frame (transform is one property) —
   the spinner looped drifting down-right. Center by margin instead so the
   animation owns transform outright. */
.hsp-404-ctl .hsp-404-clear {
	top: 0;
	left: 0;
}
.hsp-404-ctl .hsp-404-spin {
	top: 50%;
	left: 50%;
	margin: -8px 0 0 -8px;
}
.hsp-404-ctl .hsp-404-clear,
.hsp-404-ctl .hsp-404-clear:hover {
	width: 26px;
	height: 26px;
	border: 0;
	background: none;
	color: var(--hyde-ink-soft, #6e6e73);
	font-size: 15px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0;
	text-transform: none;
}
.hsp-404-ctl .hsp-404-clear:hover {
	color: var(--hyde-ink, #1d1d1f);
}

/* v1.5.20 — the X visual moves OFF the <button> entirely. Firefox wraps
   button internals in anonymous boxes and misplaced both the glyph (.18)
   and button-pseudo bars (.19); the spinner (a plain span child of the
   slot) rendered correctly. So the bars are now pseudos of the SLOT SPAN,
   anchored exactly like the spinner (top/left 50% of .hsp-404-ctl) —
   same element, same technique, the two visuals share one spot by
   construction in every engine. The button stays as a transparent 26px
   hit target; pointer-events:none keeps the bars from eating its click. */
.hsp-404-ctl.has-x::before,
.hsp-404-ctl.has-x::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.5px;
	margin: -0.75px 0 0 -6px;
	background: var(--hyde-ink-soft, #6e6e73);
	pointer-events: none;
	transition: background .18s ease;
}
.hsp-404-ctl.has-x::before { transform: rotate(45deg); }
.hsp-404-ctl.has-x::after { transform: rotate(-45deg); }
.hsp-404-ctl.has-x:hover::before,
.hsp-404-ctl.has-x:hover::after {
	background: var(--hyde-ink, #1d1d1f);
}

/* v1.5.21 — searching state as the dropdown's first frame */
.hsp-search-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	font-size: 13px;
	color: var(--hyde-ink-soft, #6e6e73);
}
.hsp-search-loading .hsp-search-spin {
	margin: 0;
}

/* v1.5.23 — labels left, actions right.
   VERITAS puts the favourite/share column at top-right of the gallery
   (.hts-corner-col, top 14 / right 14, z-index 20) and WoodMart stacks
   its product labels in that same corner. "New" was narrow enough to
   hide underneath; renaming it "Just In" in 1.5.22 made it wide enough
   to collide and get clipped by the heart button.
   Fixing the position rather than the wording, so no future label text
   can reintroduce this. Single product only — grid cards have no corner
   column and keep the theme's placement. */
.single-product .product-labels,
.single-product .wd-product-labels,
.single-product .product-labels.labels-rounded {
  left: 14px !important;
  right: auto !important;
  z-index: 3;
  max-width: calc(100% - 84px);
}
.single-product .product-labels .product-label,
.single-product .wd-product-label {
  white-space: nowrap;
}

/* ============================================================
   CART + CHECKOUT parity — v1.5.24
   The pass deferred at line ~141 ("their own later pass").
   Matched to the order emails (hyde-trading v2.25.84) so email,
   cart and checkout read as one system.
   ============================================================ */

/* Section headings. The rules shipped in 1.0 already asked for title
   case + gold rule, but carried no !important, so WoodMart's uppercase
   won and #order_review_heading rendered "YOUR ORDER" in caps with no
   rule. Casing convention (locked): CAPS = eyebrows and column labels,
   TITLE CASE = content headings. */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-cart .cart_totals > h2,
.woocommerce-cart .woocommerce > h1,
.woocommerce-cart header.entry-header .entry-title {
  font-size: var(--hyde-text-h3) !important;
  font-weight: var(--hyde-weight-semibold) !important;
  color: var(--hyde-ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: 2px solid var(--hyde-gold) !important;
  display: inline-block !important;
  padding-bottom: var(--hyde-space-2) !important;
}

/* Order tables: horizontal hairlines, never a grid. */
.woocommerce-cart table.shop_table.cart,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
  border: 1px solid var(--hyde-line-faint) !important;
  border-collapse: collapse !important;
}
.woocommerce-cart table.shop_table.cart th,
.woocommerce-cart table.shop_table.cart td,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td {
  border: 0 !important;
  border-bottom: 1px solid var(--hyde-line-faint) !important;
  padding: 14px !important;
  vertical-align: middle !important;
}
/* Column and row labels: the caps half of the convention. */
.woocommerce-cart table.shop_table.cart th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table th {
  font-size: var(--hyde-text-tiny) !important;
  font-weight: var(--hyde-weight-semibold) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--hyde-ink-soft) !important;
}
.woocommerce-cart table.shop_table.cart td,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td {
  font-size: var(--hyde-text-small) !important;
  color: var(--hyde-ink-soft) !important;
}

/* The total, anchored on WooCommerce's NAMED .order-total row rather
   than "the last row" — position is what broke the same treatment in
   the emails twice (v2.25.83/.84). */
tr.order-total th,
tr.order-total td {
  border-bottom: 0 !important;
  border-top: 1px solid var(--hyde-line) !important;
}
tr.order-total td,
tr.order-total td .amount,
tr.order-total td strong {
  color: var(--hyde-gold-deep) !important;
  font-size: var(--hyde-text-body) !important;
  font-weight: var(--hyde-weight-semibold) !important;
}

/* Quantity is dead information on a one-of-one catalogue: every piece
   is sold_individually, so the column can only ever read 1. Hidden in
   the cart table, and hidden inline in the checkout review where WC
   renders it as "× 1" after the product name. */
.woocommerce-cart table.shop_table.cart th.product-quantity,
.woocommerce-cart table.shop_table.cart td.product-quantity,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .product-quantity {
  display: none !important;
}

/* Required-field marks: the palette's danger red, not WooCommerce's. */
.woocommerce form .form-row .required,
.woocommerce-checkout .required {
  color: var(--hyde-danger, #b23b3b) !important;
  text-decoration: none !important;
}

/* WoodMart demo Info Boxes on the cart page — same widget family hidden
   on the PDP. Generic copy ("Fast domestic shipping!") repeating the trust
   strip in an exclamation voice Hyde does not use. v1.5.24 hid these and
   put nothing back, which is what made the page feel half finished; the
   Hyde trust strip now renders in their place (hyde-trading v2.25.85).
   THEME-FACING: if these are not wd_infobox widgets the rule no-ops and
   they stay — send the inspector and it is a one-line change. */
.woocommerce-cart .elementor-widget-wd_infobox {
  display: none !important;
}

/* Coupons belong at checkout, where WooCommerce already shows the
   "Have a coupon?" notice HSP styles with a gold rule. On the cart the
   field duplicated that prompt AND put a second, competing dark button
   beside the gold Proceed to Checkout. Cart only — the checkout notice
   is deliberately untouched. */
.woocommerce-cart .actions .coupon {
  display: none !important;
}
/* v1.5.26 — with the coupon gone the whole actions ROW was left standing
   as an empty grey band under the item (visible in Bob's screenshot). Its
   only other control is "Update cart", which can do nothing here: every
   piece is sold_individually so there is no quantity to update. Hide the
   row, not just its contents. */
.woocommerce-cart td.actions,
.woocommerce-cart tr:has(> td.actions) {
  display: none !important;
}

/* The item row carries real content now (gold-rail trust block + value
   line from hyde-trading), so it needs room to breathe rather than
   table-tight padding. */
.woocommerce-cart table.shop_table.cart td.product-name {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  line-height: 1.45 !important;
  color: var(--hyde-ink) !important;
  font-size: var(--hyde-text-body) !important;
}
.woocommerce-cart table.shop_table.cart td.product-name a {
  color: var(--hyde-ink) !important;
  font-weight: var(--hyde-weight-medium);
}
.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
  max-width: 104px;
  height: auto;
}
/* v1.5.27 — ONE money column. Price and Subtotal always carry the same
   figure here (quantity can only ever be 1), so the row showed the price
   twice and left the value line wrapping in a column too narrow for it.
   Subtotal is hidden; Price keeps the figure and the value line beneath. */
.woocommerce-cart table.shop_table.cart th.product-subtotal,
.woocommerce-cart table.shop_table.cart td.product-subtotal {
  display: none !important;
}
.woocommerce-cart table.shop_table.cart td.product-price,
.woocommerce-cart table.shop_table.cart th.product-price {
  text-align: right !important;
  white-space: normal !important;
  min-width: 190px;
}
.woocommerce-cart table.shop_table.cart td.product-price {
  color: var(--hyde-ink) !important;
  font-weight: var(--hyde-weight-semibold) !important;
  font-size: var(--hyde-text-body) !important;
  vertical-align: top !important;
  padding-top: 20px !important;
}