/* =============================================================================
   62-buybox.css — THE BUY BOX (single product, right half)
   -----------------------------------------------------------------------------
   WHAT WAS WRONG

   1  THE ORDER WAS THE PROBLEM, not the styling. The template prints
      title → rating → price → stock → SKU → the nine-row SPECIFICATION →
      add to cart. On this product that specification is 470px tall, so at
      1440x1200 the price was on screen and the thing a customer came to press
      was not: Add to cart began below 1200px and the trust row below 1500px.
      A buy box whose buy action is off screen is not a buy box.

   2  THE HIERARCHY WAS FLAT. Everything between the title and the cart sat on
      the same left margin at 13-15px with a 20px rhythm — price, stock, SKU
      and spec table all weighted the same. Nothing said "this is the decision".

   3  QUANTITY AND ADD TO CART WERE TWO OBJECTS with a 12px gap between them,
      one a bordered stepper and one a pill, reading as two unrelated controls
      rather than one commit gesture.

   4  THE CHROME WAS CHUNKY. A filled trust PANEL with a border and a radius,
      three green icons, a filled circle share row and a green brand pill — on
      a view the Bible allows two accents, and 25-controls.css has already
      settled that chrome is hairlines and 0.7rem tracked HUD text.

   WHAT THIS DOES

   RE-ORDERS THE COLUMN WITHOUT TOUCHING THE TEMPLATE. .product-info becomes a
   two-column grid and every child is placed explicitly, so the specification
   moves BELOW the decision and the right-hand half of the header and price
   bands stops being empty: the review link counterweights the kicker, the
   stock chip counterweights the price. Odd-numbered rows are left free so the
   narrow ladder can drop the counterweights underneath without renumbering.

   BUILDS ONE PANEL OUT OF FOUR SIBLINGS. ::before is placed as a grid item
   spanning the price, stock, variant/cart and wishlist rows, so four elements
   that cannot be wrapped in markup are drawn as one recessed panel — the
   "panel below the page, field above it" plane order 25-controls.css defines.

   MAKES ONE CONTROL OUT OF TWO. The quantity and Add to cart sit in a single
   field trough — the stepper cut into its left cap behind a hairline, the
   paper pill filling the rest. One object, 68px tall, the full width of the
   panel, and the brightest thing on the page.

   KEEPS EVERY WOOCOMMERCE HOOK. Nothing here is display:none except the
   template's own spacer rule. The variations table, its select, the reset
   link, the quantity input, the hidden add-to-cart / product_id / variation_id
   fields and the .disabled state wc-add-to-cart-variation.js toggles are all
   intact — the greyed pill before a variant is chosen is WooCommerce working,
   so §6 gives it a tracked line of copy that says so instead of leaving it
   looking broken.

   TYPE. The coherence pass already took the title off Fraunces 800 and the
   price off Inter 800 / 32px accent-green. Both stay Fraunces 300 in --ink;
   this file only re-scales them so the price is the largest object in the
   column, and every selector here outweighs 93-coherence.css, which loads
   after it.

   This file loads after every media query in main.css, so it carries its own.
   ========================================================================== */


/* =============================================================================
   1 · THE COLUMN
   ========================================================================== */

.single-product-page .product-info {
  /* the panel's inner gutter, used by every row that sits on it */
  --bx-pad: clamp(20px, 2.2vw, 30px);

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  column-gap: clamp(18px, 2vw, 28px);
  row-gap: 0;               /* rows are spaced by margins: an unused row must
                               collapse to nothing, and a row-gap would not */
  align-content: start;
}

/* --- row 1: the lockup this template never had ------------------------------
   The PDP is the one page on the site that opens with no header kicker — the
   coherence report flagged it and left it because it needs markup. It does
   not: the column's own ::after is a grid item, and it can carry the 34x1px
   rule and the tracked label every other section opens with. */
.single-product-page .product-info::after {
  content: "THE PIECE";
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  padding-left: 50px;
  background-image: linear-gradient(var(--ctl-hair-3), var(--ctl-hair-3));
  background-repeat: no-repeat;
  background-size: 34px 1px;
  background-position: 0 50%;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- the panel: rows 6-9 drawn as one object -------------------------------- */
.single-product-page .product-info::before {
  content: "";
  grid-row: 6 / 10;
  grid-column: 1 / -1;
  border: 1px solid var(--ctl-panel-edge);
  border-radius: var(--ctl-r);
  background: var(--ctl-panel-face);
}

/* The template's 20px hairline spacer. The panel and the rules below replace
   every division it used to draw. */
.single-product-page .product-info .sp-divider { display: none; }


/* =============================================================================
   2 · THE HEADER BAND — kicker | review link, then the title
   ========================================================================== */

.single-product-page .product-info .product-rating-row {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  padding: 0;
  border-bottom: 0;
  white-space: nowrap;
}

.single-product-page .product-info .product-reviews-link {
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ctl-hair);
  transition: color 0.4s var(--ctl-ease), border-color 0.4s var(--ctl-ease);
}
.single-product-page .product-info .product-reviews-link:hover,
.single-product-page .product-info .product-reviews-link:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ctl-hair-3);
}

.single-product-page .product-info .star-rating { margin: 0; }

/* The brand was a green pill. It becomes the same tracked HUD line as
   everything else in the band, sitting under the kicker. */
.single-product-page .product-info .product-brand-link {
  grid-row: 2;
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0 0 clamp(10px, 1.1vw, 14px);
  padding: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-light);
  border-bottom: 1px solid var(--ctl-hair);
  padding-bottom: 4px;
  transition: color 0.4s var(--ctl-ease), border-color 0.4s var(--ctl-ease);
}
.single-product-page .product-info .product-brand-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ctl-hair-3);
}

/* Fraunces 300 / --ink, from the coherence pass — re-scaled only, so the price
   below it can be the largest object in the column. */
.single-product-page .product-info .product-title {
  grid-row: 3;
  grid-column: 1 / -1;
  margin: 0 0 clamp(14px, 1.5vw, 20px);
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: clamp(1.8rem, 2.25vw, 2.45rem);
  line-height: 1.03;
  letter-spacing: -0.038em;
  color: var(--ink);
  text-wrap: balance;
}

/* Reference data, so it is set as reference data: one tracked HUD line under
   the title. The full string is repeated verbatim in .product-meta at the foot
   of the column, so truncating a 68-character scrape slug here loses nothing. */
.single-product-page .product-info .sp-sku {
  grid-row: 4;
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin: 0 0 clamp(24px, 2.8vw, 38px);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.single-product-page .product-info .sp-sku span {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--color-text-light);
}


/* =============================================================================
   3 · THE PRICE BAND — the loudest object on the page
   ========================================================================== */

.single-product-page .product-info .product-price-block {
  grid-row: 6;
  grid-column: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  padding: var(--bx-pad) 0 0 var(--bx-pad);
}

.single-product-page .product-info .product-price-block .product-price {
  display: block;
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: clamp(2.05rem, 2.7vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
/* The variation script rewrites this node with WooCommerce's own price_html,
   so the inner spans have to inherit the display voice too. */
.single-product-page .product-info .product-price-block .product-price .price,
.single-product-page .product-info .product-price-block .product-price bdi,
.single-product-page .product-info .product-price-block .product-price .woocommerce-Price-amount {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.single-product-page .product-info .product-price-block .product-price .woocommerce-Price-currencySymbol {
  font-size: 0.62em;
  vertical-align: 0.24em;
  margin-right: 0.06em;
  color: var(--color-text-light);
}

.single-product-page .product-info .product-price-block .product-price del,
.single-product-page .product-info .product-price-block .product-price-old {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* Was a filled green chip — the third accent on a two-accent view. */
.single-product-page .product-info .product-price-block .product-save {
  padding: 6px 11px;
  border-radius: var(--ctl-r);
  background: var(--ctl-wash-2);
  color: var(--ink);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The one accent this view spends, and it is spent on the only thing here that
   is genuinely a status. */
.single-product-page .product-info .sp-availability {
  grid-row: 6;
  grid-column: 2;
  justify-self: end;
  align-self: center;
  margin: 0;
  padding: calc(var(--bx-pad) + 4px) var(--bx-pad) 0 0;
  font-size: 0.7rem;
}
.single-product-page .product-info .sp-availability .availability-in,
.single-product-page .product-info .sp-availability .availability-out {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: var(--ctl-r);
  background: var(--ctl-wash-1);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.single-product-page .product-info .sp-availability .availability-in { color: var(--color-accent); }
.single-product-page .product-info .sp-availability .availability-out { color: var(--color-danger); }
.single-product-page .product-info .sp-availability svg { width: 14px; height: 14px; }


/* =============================================================================
   4 · THE VARIANT
   -----------------------------------------------------------------------------
   WooCommerce prints a two-cell table: a nowrap label cell and a value cell.
   At any width worth having, the label belongs ABOVE the field it names, so
   the table is unwound to blocks at every width rather than only under 600px.
   ========================================================================== */

.single-product-page .product-info form.cart,
.single-product-page .product-info .variations_form {
  grid-row: 8;
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(18px, 2vw, 24px) var(--bx-pad) 0;
}

.single-product-page .variations_form table.variations,
.single-product-page .variations_form table.variations tbody,
.single-product-page .variations_form table.variations tr,
.single-product-page .variations_form table.variations th,
.single-product-page .variations_form table.variations td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
}
.single-product-page .variations_form table.variations { margin: 0 0 clamp(14px, 1.6vw, 18px); }
.single-product-page .variations_form table.variations tr + tr { margin-top: 14px; }

.single-product-page .variations_form table.variations th.label {
  margin: 0 0 9px;
  text-align: left;
}
.single-product-page .variations_form table.variations th.label label {
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.single-product-page .variations_form td.value select,
.single-product-page .variations_form select {
  width: 100%;
  height: var(--ctl-h-lg);
  min-height: var(--ctl-h-lg);
  padding: 0 46px 0 16px;
  border: 1px solid var(--ctl-field-edge);
  border-top-color: var(--ctl-field-edge-lit);
  border-radius: var(--ctl-r);
  background-color: var(--ctl-field-face);
  box-shadow: var(--ctl-field-depth);
  color: var(--ctl-field-ink);
  font-family: var(--font-primary);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* the chevron, inlined so no extra asset request is added */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a698' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  transition: var(--ctl-field-transition);
}
.single-product-page .variations_form td.value select:hover {
  background-color: var(--ctl-field-face-hover);
  border-color: var(--ctl-field-edge-hov);
}
.single-product-page .variations_form td.value select:focus,
.single-product-page .variations_form td.value select:focus-visible {
  outline: none;
  background-color: var(--ctl-field-face-focus);
  border-color: var(--ctl-field-edge-foc);
  box-shadow: var(--ctl-field-depth-focus);
}

.single-product-page .variations_form .reset_variations {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--ctl-hair);
  padding-bottom: 3px;
  transition: color 0.4s var(--ctl-ease), border-color 0.4s var(--ctl-ease);
}
.single-product-page .variations_form .reset_variations:hover {
  color: var(--ink);
  border-bottom-color: var(--ctl-hair-3);
}

.single-product-page .variations_form .single_variation_wrap { margin: 0; }
.single-product-page .variations_form .woocommerce-variation { margin: 0; }
.single-product-page .variations_form .woocommerce-variation-availability {
  margin: 0 0 12px;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-light);
}


/* =============================================================================
   5 · THE CONTROL — quantity and Add to cart as one object
   -----------------------------------------------------------------------------
   A field trough at the system's 6px corner with the stepper cut into its left
   cap behind a hairline, and the paper pill — 25-controls.css reserves the
   999px corner for exactly this gesture — filling the rest of it. The simple
   and the variable branches of the template print different markup for the
   same thing, so both are addressed together and land on the same object.
   ========================================================================== */

.single-product-page .sp-cart-form .product-qty-row,
.single-product-page .variations_form .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--ctl-field-edge);
  border-top-color: var(--ctl-field-edge-lit);
  border-radius: var(--ctl-r);
  background-color: var(--ctl-field-face);
  box-shadow: var(--ctl-field-depth);
}

/* the left cap */
.single-product-page .sp-cart-form .product-qty-row .qty-control,
.single-product-page .variations_form .woocommerce-variation-add-to-cart .quantity {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0 6px 0 0;
  border: 0;
  border-right: 1px solid var(--ctl-hair);
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  float: none;
}
.single-product-page .sp-cart-form .product-qty-row .qty-control { width: 122px; }
.single-product-page .variations_form .woocommerce-variation-add-to-cart .quantity { width: 92px; }

.single-product-page .sp-cart-form .product-qty-row .qty-btn {
  width: 36px;
  height: auto;
  min-height: var(--ctl-h-lg);
  border: 0;
  background: none;
  color: var(--color-text-light);
  font-size: 1.05rem;
  line-height: 1;
  border-radius: var(--ctl-r);
  transition: color 0.3s var(--ctl-ease), background-color 0.3s var(--ctl-ease);
}
.single-product-page .sp-cart-form .product-qty-row .qty-btn:hover {
  background: var(--ctl-wash-2);
  color: var(--ink);
}

.single-product-page .sp-cart-form .product-qty-row .qty-input,
.single-product-page .variations_form .woocommerce-variation-add-to-cart .quantity input.qty,
.single-product-page .variations_form .woocommerce-variation-add-to-cart .quantity input.input-text {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: var(--ctl-h-lg);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--color-dark);
  outline: none;
}

/* the commit gesture */
.single-product-page .sp-cart-form .product-qty-row .product-add-cart,
.single-product-page .variations_form.cart .woocommerce-variation-add-to-cart button.single_add_to_cart_button.button {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0 0 0 6px;
  height: var(--ctl-h-lg);
  min-height: var(--ctl-h-lg);
  padding: 0 22px;
  border: 1px solid var(--paper);
  border-radius: var(--ctl-r-action);
  background: var(--paper);
  color: var(--night);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  font-family: var(--font-primary);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}
.single-product-page .sp-cart-form .product-qty-row .product-add-cart svg {
  width: 15px;
  height: 15px;
}
.single-product-page .sp-cart-form .product-qty-row .product-add-cart:hover,
.single-product-page .variations_form.cart .woocommerce-variation-add-to-cart button.single_add_to_cart_button.button:hover {
  background: var(--ctl-paper-lit);
  border-color: var(--ctl-paper-lit);
  color: var(--night);
}

/* WooCommerce leaves the button in the DOM and inert until an option is
   picked. That is the plugin working, so it is drawn as a deliberate "not
   yet" — recessed into the trough, not a broken pill. */
.single-product-page .variations_form.cart .woocommerce-variation-add-to-cart button.single_add_to_cart_button.button.disabled,
.single-product-page .variations_form.cart .woocommerce-variation-add-to-cart button.single_add_to_cart_button.button:disabled,
.single-product-page .variations_form.cart .woocommerce-variation-add-to-cart button.single_add_to_cart_button.button.disabled:hover,
.single-product-page .variations_form.cart .woocommerce-variation-add-to-cart button.single_add_to_cart_button.button:disabled:hover {
  background: var(--ctl-wash-2);
  border-color: transparent;
  color: var(--color-text-light);
  box-shadow: none;
  cursor: not-allowed;
}


/* =============================================================================
   6 · "NOT YET" — the line that explains the greyed pill
   -----------------------------------------------------------------------------
   A select with nothing chosen still has a checked option: WooCommerce's own
   "Choose an option", whose value is empty. :has() reads that, so the prompt
   appears before a variant is picked and removes itself the moment one is,
   with no script and no change to the markup.
   ========================================================================== */

.single-product-page .variations_form .single_variation_wrap::before {
  content: "";
  display: none;
}
.single-product-page .variations_form:has(select option[value=""]:checked) .single_variation_wrap::before {
  content: "CHOOSE AN OPTION TO CONTINUE";
  display: block;
  margin: 0 0 12px;
  padding-left: 46px;
  background-image: linear-gradient(var(--ctl-hair-2), var(--ctl-hair-2));
  background-repeat: no-repeat;
  background-size: 30px 1px;
  background-position: 0 50%;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* =============================================================================
   7 · THE SECOND ACTION — wishlist, closing the panel
   ========================================================================== */

.single-product-page .product-info .product-actions-row {
  grid-row: 9;
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 10px var(--bx-pad) var(--bx-pad);
}

.single-product-page .product-info .product-wishlist-btn {
  flex: 1 1 auto;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px;
  border: 1px solid var(--ctl-hair);
  border-radius: var(--ctl-r);
  background: none;
  color: var(--color-text-light);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: var(--transition);
}
.single-product-page .product-info .product-wishlist-btn:hover {
  border-color: var(--ctl-hair-2);
  background: var(--ctl-wash-1);
  color: var(--ink);
}
.single-product-page .product-info .product-wishlist-btn svg { width: 15px; height: 15px; }
.single-product-page .product-info .product-wishlist-btn[aria-pressed="true"] {
  border-color: var(--ctl-hair-3);
  color: var(--ink);
}


/* =============================================================================
   8 · THE SPECIFICATION — placed, not styled
   -----------------------------------------------------------------------------
   The only thing this file does to the spec plate is MOVE it: out from between
   the price and the cart, where it put 740px of reference data in front of the
   decision, to below the panel where a buyer reads it after deciding. Its
   surface, legends, counters and typography belong to 64-specs.css and not one
   declaration of them is touched here.
   ========================================================================== */

.single-product-page .product-info .product-short-desc {
  grid-row: 10;
  grid-column: 1 / -1;
}


/* =============================================================================
   9 · THE CHROME — trust, share, meta. Hairlines and HUD text, nothing filled.
   ========================================================================== */

.single-product-page .product-info .sp-trust-badges {
  grid-row: 11;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: clamp(28px, 3vw, 42px) 0 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: none;
}
.single-product-page .product-info .sp-trust-item {
  flex: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(16px, 1.8vw, 20px) 16px clamp(16px, 1.8vw, 20px) 0;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.single-product-page .product-info .sp-trust-item + .sp-trust-item {
  padding-left: clamp(14px, 1.6vw, 20px);
  border-left: 1px solid var(--color-border);
}
.single-product-page .product-info .sp-trust-badges .sp-trust-item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--color-text-light);
  stroke-width: 1.5;
}

.single-product-page .product-info .sp-share {
  grid-row: 12;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(22px, 2.4vw, 32px) 0 0;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* The label holds the left edge and the two discs the right, so the row is
   resolved on both sides instead of trailing off into 380px of empty field. */
.single-product-page .product-info .sp-share > span:first-child {
  margin-right: auto;
}

.single-product-page .product-info .sp-share-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--ctl-hair);
  background: none;
  color: var(--color-text-light);
  transition: var(--transition);
}
.single-product-page .product-info .sp-share-btn:hover {
  border-color: var(--ctl-hair-3);
  background: var(--ctl-wash-1);
  color: var(--ink);
}

.single-product-page .product-info .product-meta {
  grid-row: 13;
  grid-column: 1 / -1;
  margin: clamp(22px, 2.4vw, 32px) 0 0;
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--color-border);
}
.single-product-page .product-info .product-meta-item {
  gap: clamp(12px, 1.4vw, 20px);
  margin-bottom: 10px;
  font-size: 0.8rem;
  line-height: 1.55;
}
.single-product-page .product-info .product-meta-item strong {
  flex: 0 0 auto;
  min-width: 92px;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.single-product-page .product-info .product-meta-item span,
.single-product-page .product-info .product-meta-item a {
  min-width: 0;
  color: var(--color-text-light);
  overflow-wrap: anywhere;
}
.single-product-page .product-info .product-meta-item a {
  border-bottom: 1px solid transparent;
  transition: color 0.35s var(--ctl-ease), border-color 0.35s var(--ctl-ease);
}
.single-product-page .product-info .product-meta-item a:hover {
  color: var(--ink);
  border-bottom-color: var(--ctl-hair);
}


/* =============================================================================
   10 · THE LADDER
   -----------------------------------------------------------------------------
   Below 820px the layout is one column, so the two counterweights have to come
   out of column 2 and stand on their own rows. Rows 5 and 7 were left free for
   exactly this — nothing is renumbered and no row ever holds two items.
   ========================================================================== */

@media (max-width: 1024px) {
  .single-product-page .product-info .product-title {
    font-size: clamp(1.7rem, 3.2vw, 2.1rem);
  }
  .single-product-page .product-info .product-price-block .product-price {
    font-size: clamp(1.9rem, 3.6vw, 2.3rem);
  }
}

@media (max-width: 768px) {
  .single-product-page .product-info {
    grid-template-columns: minmax(0, 1fr);
  }
  .single-product-page .product-info::after {
    grid-column: 1;
    margin-bottom: clamp(12px, 2vw, 18px);
  }
  .single-product-page .product-info .product-rating-row {
    grid-row: 4;
    grid-column: 1;
    justify-self: start;
    margin: 0 0 12px;
  }
  .single-product-page .product-info .sp-sku {
    grid-row: 5;
    grid-column: 1;
    margin-bottom: clamp(20px, 3vw, 28px);
  }
  .single-product-page .product-info .product-price-block {
    grid-column: 1;
    padding: var(--bx-pad) var(--bx-pad) 0;
  }
  .single-product-page .product-info .sp-availability {
    grid-row: 7;
    grid-column: 1;
    justify-self: start;
    padding: 12px var(--bx-pad) 0;
  }
  .single-product-page .product-info .product-title {
    font-size: clamp(1.65rem, 5.2vw, 2.15rem);
  }
  .single-product-page .product-info .product-price-block .product-price {
    font-size: clamp(2rem, 6.4vw, 2.5rem);
  }
}

@media (max-width: 620px) {
  .single-product-page .product-info .sp-trust-badges {
    grid-template-columns: minmax(0, 1fr);
  }
  .single-product-page .product-info .sp-trust-item {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
  }
  .single-product-page .product-info .sp-trust-item + .sp-trust-item {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }
  .single-product-page .product-info .product-meta-item {
    flex-direction: column;
    gap: 3px;
  }
}

@media (max-width: 480px) {
  .single-product-page .product-info {
    --bx-pad: 16px;
  }
  .single-product-page .product-info::after {
    padding-left: 42px;
    background-size: 28px 1px;
    letter-spacing: 0.14em;
  }
  .single-product-page .product-info .product-short-desc::before {
    padding-left: 42px;
    background-size: 28px 1px;
    letter-spacing: 0.14em;
  }
  /* The trough keeps both halves on one line down to 320px: the stepper gives
     up its width before the commit gesture does. */
  .single-product-page .sp-cart-form .product-qty-row .qty-control { width: 104px; }
  .single-product-page .variations_form .woocommerce-variation-add-to-cart .quantity { width: 74px; }
  .single-product-page .sp-cart-form .product-qty-row .qty-btn { width: 30px; }
  .single-product-page .sp-cart-form .product-qty-row .product-add-cart,
  .single-product-page .variations_form.cart .woocommerce-variation-add-to-cart button.single_add_to_cart_button.button {
    padding: 0 12px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }
}


/* =============================================================================
   11 · REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .single-product-page .product-info .product-reviews-link,
  .single-product-page .product-info .product-brand-link,
  .single-product-page .variations_form .reset_variations,
  .single-product-page .product-info .product-wishlist-btn,
  .single-product-page .product-info .sp-share-btn,
  .single-product-page .product-info .product-meta-item a {
    transition-duration: 0.01ms;
  }
}