/* ===========================================================================
   pp-pdp.css -- the redesigned single-product surface (PDP).

   WHAT THIS FILE STYLES
   The static-DOM body emitted by the prime-peptides-redesign/pdp block
   (wp-content/mu-plugins/pp-redesign-blocks.php, section "PDP"):
   breadcrumb, the two-column grid (gallery | info), the badges/eyebrow/title/
   price/short-description stack, the strength selector, the quantity stepper
   and add-to-cart control, the details/COA accordion, and the research notice.
   It also gives the description wrapper (.pp-pdp__doc) and the related-products
   group the horizontal gutter they need now that they no longer sit inside a
   .pp-shell in the template.

   AUTHORITY: the Claude Design "Bundled Page" master, screen
   data-screen-label="Wolverine Blend PDP", plus its design-system component
   sources (Badge, Button, QuantityStepper, ResearchNotice, Icon). The master's
   token VALUES are identical to this site's --pp-* tokens, so every colour,
   font, shadow and motion value below resolves through the site token, never
   through a re-declared literal.

   LOADED BY: mu-plugins/pp-redesign-loader.php, on is_product() ONLY, as the
   last link of the chain
       pp-tokens -> pp-site-scoped -> pp-compat -> pp-product -> pp-pdp
   pp-product.css is deliberately still loaded: the nine product bodies render
   verbatim below the grid and keep their .pp-product-* class names.

   SCOPE RULE: every rule opens on `.pp-site` (the <main> of the single-product
   template). The top panel is additionally scoped under `.pp-pdp-wrap` /
   `.pp-pdp`. No :root, no bare element selectors, no @keyframes, no @import.
   The extra radius steps the design needs but the site token set does not carry
   (20px / 10px / 6px) are LOCAL custom properties on the PDP wrapper, never on
   :root.

   ------------------------------------------------------------------------
   PROTECTED COMMERCE SURFACE -- A4 BUY-BUTTON GATE RE-DERIVATION
   ------------------------------------------------------------------------
   Re-derived live on 2026-08-24. Method: static DOM plus the classic
   wc-add-to-cart-variation contract -- i.e. the redesigned PDP does not render
   the woocommerce/add-to-cart-with-options block at all, so the WooCommerce 11
   [hidden] gate that custom_css post 27 defeats is not in play anywhere on this
   surface.

   Post 27 line ~478 sets, among others, `display:inline-flex !important` on
   .single_add_to_cart_button. The only .single_add_to_cart_button on the new
   PDP is the classic variations_form submit button, whose enabled/disabled
   semantics are carried by the class pair "disabled wc-variation-selection-
   needed" that WooCommerce's own add-to-cart-variation.js adds and removes --
   a class gate, not a [hidden] gate, so post 27 cannot defeat it.

   Consequently this file:
     - adds NO `display` declaration, !important or otherwise, to
       .single_add_to_cart_button;
     - adds NO [hidden]-gate styling of any kind, on any selector;
     - leaves the enabled/disabled semantics entirely to WooCommerce;
     - touches .single_add_to_cart_button only inside the tightly scoped
       selector `.pp-site .pp-pdp .variations_form .single_add_to_cart_button`,
       and only for typography/box values (see section 8).
   Simple products never emit .single_add_to_cart_button at all; their control
   is an AJAX anchor (.pp-pdp__add.add_to_cart_button.ajax_add_to_cart), the
   same mechanism the product tile already ships.

   ------------------------------------------------------------------------
   !important POLICY
   ------------------------------------------------------------------------
   !important is used ONLY to answer an existing post-27 !important declaration
   that would otherwise break the design. Every occurrence is commented with the
   post-27 rule it answers. There are two groups, in sections 6 and 8. No other
   declaration in this file is !important.
   =========================================================================== */


/* ============ 1. WRAPPER + LOCAL RADIUS SCALE ============ */

/* The design's radius scale is richer than the site's (--pp-radius-xs 3 /
   -sm 4 / -md 6 / -lg 14 / -pill). The three extra steps the PDP needs live
   here as LOCAL custom properties so nothing outside this surface can see
   them. Values are the master's --radius-xl / -lg / -md / -sm verbatim. */
.pp-site .pp-pdp-wrap,
.pp-site .pp-pdp{
  --pp-pdp-radius-xl:20px;
  --pp-pdp-radius-lg:14px;
  --pp-pdp-radius-md:10px;
  --pp-pdp-radius-sm:6px;
}

.pp-site .pp-pdp-wrap{padding-block:40px 0}

/* Visually-hidden helper (labels for the quantity input, WooCommerce's reset
   alert). Clipped rather than display:none so it stays in the a11y tree. */
.pp-site .pp-pdp__sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}


/* ============ 2. BREADCRUMB ============ */

.pp-site .pp-pdp__crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 28px;
  /* PP-FIX B8 (2026-08-29): one crumb register site-wide -- 12px, "›"
     separators (the renderer's dot separators became chevrons the same day). */
  font-family:var(--pp-font-sans);font-size:12px;font-weight:500;line-height:1.45;
  color:var(--pp-text-muted);
}
.pp-site .pp-pdp__crumbs a{color:var(--pp-text-muted)}
.pp-site .pp-pdp__crumbs a:hover{color:var(--pp-blue-600)}
/* PP-FIX C9 (2026-08-29): crumb links measured ~34x18 at 390 against the
   WCAG 24px floor. The invisible-overlay idiom pp-header.css already uses for
   the bag pill inflates the touch surface to 44px tall without moving a
   pixel of the visible register. Touch layouts only -- a desktop pointer
   does not need the overlay and it could shadow neighbouring text. */
@media (max-width:700px){
  .pp-site .pp-pdp__crumbs a{position:relative}
  .pp-site .pp-pdp__crumbs a::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% + 8px);min-width:44px;height:44px}
}
.pp-site .pp-pdp__crumb-sep{color:var(--pp-text-subtle)}
.pp-site .pp-pdp__crumb-current{color:var(--pp-text-heading)}


/* ============ 3. GRID ============ */

/* 1.1fr / .9fr and align-items:start are the master's; the 64px gutter is the
   master's `gap:64px`. Re-declared in full rather than inherited from
   pp-product.css so this surface does not depend on that file's cascade. */
.pp-site .pp-pdp{
  display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start;margin:0;
}
.pp-site .pp-pdp>*{min-width:0}


/* ============ 4. GALLERY ============ */

/* Keep PDP product media on the identical blue photo plate used by catalogue
   cards (.pp-tile__img): a shared surface makes the transition into a PDP feel
   intentional while retaining the PDP's larger radius and hairline border. */
.pp-site .pp-pdp__stage{
  overflow:hidden;
  aspect-ratio:1/1;
  border:1px solid var(--pp-border-subtle);
  border-radius:var(--pp-pdp-radius-xl);
  background:linear-gradient(70deg,#e8f2fd 0%,#d2e4f8 30%,#b0d0f1 62%,#8abcec 100%);
}
.pp-site .pp-pdp__stage-img{
  display:block;width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;
}

.pp-site .pp-pdp__thumbs{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 0}

/* 72px, radius-sm, active = 2px accent border. The 1px/2px swap is absorbed by
   the box-sizing:border-box that .pp-site already sets, so nothing shifts. */
.pp-site .pp-pdp__thumb{
  width:72px;height:72px;padding:0;overflow:hidden;
  -webkit-appearance:none;appearance:none;
  border:1px solid var(--pp-border-default);
  border-radius:var(--pp-pdp-radius-sm);
  background:linear-gradient(70deg,#e8f2fd 0%,#d2e4f8 30%,#b0d0f1 62%,#8abcec 100%);
  cursor:pointer;flex:0 0 auto;
  transition:border-color var(--pp-dur-fast) var(--pp-ease);
}
.pp-site .pp-pdp__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pp-site .pp-pdp__thumb:hover{border-color:var(--pp-blue-300)}
.pp-site .pp-pdp__thumb.is-active{border:2px solid var(--pp-border-accent)}
.pp-site .pp-pdp__thumb:focus-visible{outline:none;box-shadow:var(--pp-shadow-focus)}


/* ============ 5. INFO COLUMN: BADGES -> PRICE -> SUMMARY ============ */

.pp-site .pp-pdp__info{display:block}

/* Badge: the master's Badge component -- 22px tall, radius-xs, 11px uppercase
   600 with eyebrow tracking, status bg/fg pairs. */
.pp-site .pp-pdp__badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.pp-site .pp-pdp__badge{
  display:inline-flex;align-items:center;gap:4px;
  height:22px;padding:0 8px;
  border-radius:var(--pp-radius-xs);
  font-family:var(--pp-font-sans);font-size:11px;font-weight:600;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;
}
/* PP-FIX B5 (2026-08-29): badge ink darkened one step for AA at 11px --
   green-600 on green-100 measured 4.04:1, blue-600 on blue-100 4.3:1;
   green-700/blue-700 give 5.5:1 and 5.1:1. */
.pp-site .pp-pdp__badge--success{background:var(--pp-green-100);color:var(--pp-green-700)}
.pp-site .pp-pdp__badge--info{background:var(--pp-blue-100);color:var(--pp-blue-700)}

.pp-site .pp-pdp__eyebrow{
  font-family:var(--pp-font-sans);font-size:12px;font-weight:600;line-height:1.4;
  letter-spacing:.18em;text-transform:uppercase;color:var(--pp-text-accent);
}

/* Display sm (32px) with the display face and tight tracking. */
.pp-site .pp-pdp__title{
  margin:10px 0 0;max-width:none;
  font-family:var(--pp-font-display);font-size:clamp(26px,3.2vw,32px);
  font-weight:600;line-height:1.2;letter-spacing:var(--pp-ls-tight);
  color:var(--pp-text-heading);overflow-wrap:break-word;
}

/* Mono 21px / 600 navy -- the same price register the old summary column used. */
.pp-site .pp-pdp__price{
  margin:10px 0 0;
  font-family:var(--pp-font-mono);font-size:21px;font-weight:600;line-height:1.3;
  color:var(--pp-navy-700);
}
.pp-site .pp-pdp__price del{opacity:.5;font-weight:400}
.pp-site .pp-pdp__price ins{text-decoration:none}

.pp-site .pp-pdp__excerpt{
  margin:16px 0 0;max-width:52ch;
  font-family:var(--pp-font-sans);font-size:15px;line-height:1.6;color:var(--pp-text-body);
}
.pp-site .pp-pdp__excerpt p{margin:0 0 12px}
.pp-site .pp-pdp__excerpt p:last-child{margin-bottom:0}

/* -- Curated summary (the seven ids in pp_redesign_pdp_curated_summary()).
   The wrapper keeps .pp-pdp__excerpt, so the intro and closing paragraphs
   inherit the excerpt typography and 12px rhythm above unchanged; the only new
   shape is the benefit list between them. */
.pp-site .pp-pdp__excerpt--curated .pp-pdp__sum-list{
  margin:0 0 12px;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:8px;
}
.pp-site .pp-pdp__excerpt--curated .pp-pdp__sum-item{
  display:flex;align-items:flex-start;gap:10px;
  margin:0;padding:0;list-style:none;
}
/* 20px marker on the first line of the row: the 15px/1.6 line box is 24px, so
   2px of offset optically centres the circle on that first line. Time Blue is
   inherited by the SVG's stroke="currentColor" -- no colour literal in either
   the markup or here. */
.pp-site .pp-pdp__excerpt--curated .pp-pdp__sum-icon{
  flex:0 0 20px;width:20px;height:20px;margin-top:2px;
  color:var(--pp-blue-600);
}
/* min-width:0 lets a long benefit line wrap instead of forcing the flex row
   wider than the info column at 320px. */
.pp-site .pp-pdp__excerpt--curated .pp-pdp__sum-text{
  min-width:0;overflow-wrap:break-word;
}

/* PP-FIX B1 (2026-08-29): "Read the research guide" link into the Education
   Library, rendered by pp-redesign-blocks.php between the excerpt and the buy
   panel on the eight products with a matching guide. */
.pp-site a.pp-pdp__guide{
  display:inline-flex;align-items:center;gap:6px;
  margin:16px 0 0;
  font-family:var(--pp-font-sans);font-size:13px;font-weight:500;
  color:var(--pp-text-accent);
  border-bottom:1px solid var(--pp-blue-200);
  padding-bottom:1px;
}
.pp-site a.pp-pdp__guide:hover{color:var(--pp-blue-700);border-bottom-color:var(--pp-blue-500)}

.pp-site .pp-pdp__unavailable{
  margin:24px 0 0;padding:14px 16px;
  border:1px solid var(--pp-border-default);border-radius:var(--pp-pdp-radius-sm);
  background:var(--pp-surface-subtle);
  font-family:var(--pp-font-sans);font-size:14px;color:var(--pp-text-muted);
}


/* ============ 6. STRENGTH SELECTOR ============ */

.pp-site .pp-pdp__field{margin:20px 0 0}
.pp-site .pp-pdp__field-label{
  margin:0 0 10px;
  font-family:var(--pp-font-sans);font-size:11px;font-weight:600;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;color:var(--pp-text-muted);
}

/* <fieldset> on the variable product, plain <div> on a simple one; both reset
   to the same flex row. */
.pp-site .pp-pdp__opts{
  display:flex;flex-wrap:wrap;gap:12px;
  margin:0;padding:0;border:0;min-inline-size:0;
}

/* Card: flex:1, radius-sm, 1px default border / 2px accent + soft-accent fill
   when selected. Padding compensates for the border swap exactly as the design
   master does (13px 17px unselected, 12px 16px selected). */
.pp-site .pp-pdp__opt{
  display:flex;flex:1 1 130px;min-width:0;
  -webkit-appearance:none;appearance:none;
  margin:0;padding:13px 17px;text-align:left;
  border:1px solid var(--pp-border-default);
  border-radius:var(--pp-pdp-radius-sm);
  background:var(--pp-neutral-0);
  cursor:pointer;
  transition:border-color var(--pp-dur-fast) var(--pp-ease),background var(--pp-dur-fast) var(--pp-ease);
}
.pp-site .pp-pdp__opt:hover{border-color:var(--pp-blue-300)}
.pp-site .pp-pdp__opt.is-selected{
  padding:12px 16px;
  border:2px solid var(--pp-border-accent);
  background:var(--pp-surface-accent-soft);
}
.pp-site .pp-pdp__opt-body{display:block;min-width:0}
.pp-site .pp-pdp__opt-title{
  display:block;
  font-family:var(--pp-font-sans);font-size:14px;font-weight:600;line-height:1.2;
  color:var(--pp-text-heading);
}

/* The radio itself is the accessible control; the card is its visual. */
.pp-site .pp-pdp__opt-input{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;
}
/* The radio is clipped, so its own focus ring can never be seen; the card
   carries it instead. :focus-within rather than :has(:focus-visible) so the
   ring is guaranteed to appear in every browser that ships :focus-within,
   which is all of them -- a clipped control with no visible focus state would
   be a keyboard trap in anything that lacks :has(). */
.pp-site .pp-pdp__opt:focus-within{box-shadow:var(--pp-shadow-focus)}

/* A simple product's chip is a disabled <button> -- inert, nothing to choose.
   post 27 line ~526 sets `button[disabled]{cursor:not-allowed !important;
   opacity:.55 !important}`, which would render this informational chip as a
   broken control. These two !important declarations answer exactly those two,
   and nothing else. */
.pp-site .pp-pdp__opt[disabled]{
  opacity:1 !important;   /* answers post 27 button[disabled]{opacity:.55!important} */
  cursor:default !important; /* answers post 27 button[disabled]{cursor:not-allowed!important} */
}

/* WooCommerce's own attribute <select> is present for the classic variation JS
   (which reads `.variations select` only) but never shown: it is clipped, not
   display:none, and the renderer also marks it disabled so it is not submitted.
   This is NOT a [hidden] gate and carries no !important. */
.pp-site .pp-pdp__variations{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}


/* ============ 7. QUANTITY STEPPER ============ */

/* The master's QuantityStepper: radius-sm, hairline border, mono value. Used by
   both the simple-product <output> variant and the variable form's real number
   input.

   Height is 46px, not the master's 44px: the buttons fill the frame's CONTENT
   box, so a 44px border-box frame yields 42px targets. The brief's ">= 44px
   touch target" requirement is the tighter constraint, so the frame carries the
   2px of border and the buttons land on exactly 44px.

   The -btn / -input / -val rules are (0,3,0) on purpose. The theme's global
   `input:not([type=submit])...{width:100%;padding:.8rem 1rem}` and WooCommerce's
   `.woocommerce .quantity .qty{width:3.631em}` both outrank a (0,2,0) selector;
   losing the width made the number input demand 100% of the row, which pushed
   the flex line over and shrank the -/+ buttons from 44px to 35px. */
.pp-site .pp-pdp__qty{
  display:inline-flex;align-items:center;
  height:46px;margin:0;overflow:hidden;flex:0 0 auto;
  border:1px solid var(--pp-border-default);
  border-radius:var(--pp-pdp-radius-sm);
  background:var(--pp-neutral-0);
}
.pp-site .pp-pdp__qty .pp-pdp__qty-btn{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:44px;min-width:44px;height:100%;padding:0;
  -webkit-appearance:none;appearance:none;border:0;background:none;
  font-family:var(--pp-font-sans);font-size:18px;font-weight:600;line-height:1;
  color:var(--pp-navy-700);cursor:pointer;
  transition:background var(--pp-dur-fast) var(--pp-ease),color var(--pp-dur-fast) var(--pp-ease);
}
.pp-site .pp-pdp__qty-btn:hover{background:var(--pp-neutral-50)}
/* post 27 line ~526 also fades every button[disabled] to .55; the stepper marks
   its own disabled state with colour, so the fade is answered here. */
.pp-site .pp-pdp__qty-btn:disabled{
  color:var(--pp-neutral-300);background:none;
  opacity:1 !important;      /* answers post 27 button[disabled]{opacity:.55!important} */
  cursor:not-allowed;
}
.pp-site .pp-pdp__qty-btn:focus-visible{outline:none;box-shadow:var(--pp-shadow-focus)}

.pp-site .pp-pdp__qty .pp-pdp__qty-val{
  flex:0 1 auto;min-width:36px;text-align:center;
  font-family:var(--pp-font-mono);font-size:15px;font-weight:500;line-height:1;
  color:var(--pp-text-heading);
}

/* The variable form's real WooCommerce quantity field, styled to read as the
   same stepper. Spinners removed because the -/+ buttons are the affordance. */
.pp-site .pp-pdp__qty .pp-pdp__qty-input{
  flex:0 1 auto;width:56px;min-width:0;height:100%;padding:0;margin:0;
  -webkit-appearance:textfield;appearance:textfield;
  border:0;background:transparent;text-align:center;
  font-family:var(--pp-font-mono);font-size:15px;font-weight:500;line-height:1;
  color:var(--pp-text-heading);
}
.pp-site .pp-pdp__qty-input::-webkit-outer-spin-button,
.pp-site .pp-pdp__qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pp-site .pp-pdp__qty-input:focus-visible{outline:none;box-shadow:var(--pp-shadow-focus)}


/* ============ 8. ADD TO CART ============ */

.pp-site .pp-pdp__buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:24px 0 0}

/* The master's Button variant="primary" at the size the PDP screen pins
   (hint-size 100%,48px): full-width, 48px, radius-sm, blue-600 -> blue-700.
   This is the SIMPLE-product control -- an <a>, never .single_add_to_cart_button. */
.pp-site .pp-pdp__add{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  flex:1 1 200px;min-width:0;min-height:48px;padding:0 var(--pp-space-8);
  border:1px solid transparent;border-radius:var(--pp-pdp-radius-sm);
  background:var(--pp-blue-600);color:#fff;
  font-family:var(--pp-font-sans);font-size:15px;font-weight:600;line-height:1.2;
  letter-spacing:.08em;text-align:center;white-space:nowrap;cursor:pointer;
  transition:background var(--pp-dur-fast) var(--pp-ease),border-color var(--pp-dur-fast) var(--pp-ease),color var(--pp-dur-fast) var(--pp-ease);
}
.pp-site .pp-pdp__add:hover{background:var(--pp-blue-700);color:#fff}
.pp-site .pp-pdp__add:focus-visible{outline:none;box-shadow:var(--pp-shadow-focus)}
/* WooCommerce's AJAX script appends a "View cart" sibling after a successful
   add; keep it on its own line rather than inside the button row. */
.pp-site .pp-pdp__buy .added_to_cart{
  flex:1 1 100%;
  font-family:var(--pp-font-sans);font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--pp-navy-700);
  border-bottom:1px solid var(--pp-border-default);padding-bottom:3px;
  align-self:flex-start;
}

/* --- Variable product: the classic variations_form --- */
.pp-site .pp-pdp__form{margin:0}

/* WooCommerce injects the matched variation's price + availability here. It is
   deliberately a quieter register than .pp-pdp__price above, which carries the
   product's full price range from get_price_html(). */
.pp-site .pp-pdp .single_variation_wrap{margin:24px 0 0}
.pp-site .pp-pdp .woocommerce-variation-price{
  font-family:var(--pp-font-mono);font-size:17px;font-weight:600;line-height:1.3;
  color:var(--pp-navy-700);
}
.pp-site .pp-pdp .woocommerce-variation-availability{
  margin-top:6px;
  font-family:var(--pp-font-sans);font-size:13px;line-height:1.5;color:var(--pp-text-muted);
}
.pp-site .pp-pdp .woocommerce-variation-description{
  margin-top:6px;
  font-family:var(--pp-font-sans);font-size:14px;line-height:1.6;color:var(--pp-text-body);
}
/* WooCommerce always injects both helper divs, empty or not (this catalogue
   ships no variation descriptions and no availability strings). Zeroing the
   margin instead of hiding them keeps the buy area compact without putting a
   `display` declaration anywhere inside the variation form -- see the A4 note. */
.pp-site .pp-pdp .woocommerce-variation-description:empty,
.pp-site .pp-pdp .woocommerce-variation-availability:empty{margin-top:0}
.pp-site .pp-pdp .woocommerce-variation-add-to-cart{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:16px 0 0;
}
.pp-site .pp-pdp .wc-no-matching-variations{
  margin:12px 0 0;
  font-family:var(--pp-font-sans);font-size:14px;line-height:1.6;color:var(--pp-red-600);
}

/* The variable product's submit button.
   A4 NOTE: no `display` is set here, at any strength -- WooCommerce owns the
   enabled/disabled semantics through the "disabled wc-variation-selection-
   needed" classes, and post 27's display:inline-flex !important is left exactly
   as it is. The declarations below are typography and box only, and each
   !important answers one specific post-27 !important on the same property so
   this button matches .pp-pdp__add above instead of post 27's generic
   14px/700/#146ef5/10px-radius button register. */
.pp-site .pp-pdp .variations_form .single_add_to_cart_button{
  flex:1 1 200px;min-width:0;min-height:48px;
  gap:8px;
  padding:0 var(--pp-space-8) !important;                 /* answers post 27 padding:0 21px!important */
  border:1px solid transparent !important;                /* answers post 27 border:1px solid var(--pp-blue)!important */
  border-radius:var(--pp-pdp-radius-sm) !important;       /* answers post 27 border-radius:var(--pp-radius-small)!important */
  background:var(--pp-blue-600) !important;               /* answers post 27 background:var(--pp-blue)!important */
  color:#fff !important;                                  /* answers post 27 color:var(--pp-white)!important */
  font-family:var(--pp-font-sans);
  font-size:15px !important;                              /* answers post 27 font-size:14px!important */
  font-weight:600 !important;                             /* answers post 27 font-weight:700!important */
  letter-spacing:.08em;line-height:1.2;
}
.pp-site .pp-pdp .variations_form .single_add_to_cart_button:hover{
  background:var(--pp-blue-700) !important;               /* answers post 27 :hover background:#0b5ed7!important */
  border-color:transparent !important;                    /* answers post 27 :hover border-color:#0b5ed7!important */
  color:#fff !important;                                  /* answers post 27 :hover color:var(--pp-white)!important */
}
/* WooCommerce's "not yet chosen" state. Colour only -- never display. */
.pp-site .pp-pdp .variations_form .single_add_to_cart_button.disabled{
  background:var(--pp-neutral-100) !important;            /* answers post 27 background:var(--pp-blue)!important */
  border-color:transparent !important;                    /* answers post 27 border:...var(--pp-blue)!important */
  color:var(--pp-neutral-400) !important;                 /* answers post 27 color:var(--pp-white)!important */
  cursor:not-allowed;
}
.pp-site .pp-pdp .variations_form .single_add_to_cart_button.disabled:hover{
  background:var(--pp-neutral-100) !important;            /* answers post 27 :hover background:#0b5ed7!important */
  color:var(--pp-neutral-400) !important;                 /* answers post 27 :hover color:var(--pp-white)!important */
}


/* ============ 9. ACCORDION ============ */

.pp-site .pp-pdp__acc{
  margin:24px 0 0;overflow:hidden;
  border:1px solid var(--pp-border-default);
  border-radius:var(--pp-pdp-radius-md);
}
.pp-site .pp-pdp__acc-item + .pp-pdp__acc-item{border-top:1px solid var(--pp-border-default)}

.pp-site .pp-pdp__acc-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;min-height:52px;
  list-style:none;cursor:pointer;
  background:var(--pp-neutral-0);
  font-family:var(--pp-font-display);font-size:14px;font-weight:600;line-height:1.3;
  color:var(--pp-text-heading);
  transition:background var(--pp-dur-fast) var(--pp-ease);
}
.pp-site .pp-pdp__acc-head::-webkit-details-marker{display:none}
.pp-site .pp-pdp__acc-head::marker{content:""}
.pp-site .pp-pdp__acc-head:hover{background:var(--pp-neutral-50)}
.pp-site .pp-pdp__acc-head:focus-visible{outline:none;box-shadow:var(--pp-shadow-focus)}

.pp-site .pp-pdp__acc-title{display:flex;align-items:center;gap:10px;min-width:0}
.pp-site .pp-pdp__acc-title .pp-pdp__icon{flex:0 0 auto;color:var(--pp-blue-600)}
.pp-site .pp-pdp__acc-chev{
  display:inline-flex;flex:0 0 auto;color:var(--pp-neutral-400);
  transition:transform var(--pp-dur-fast) var(--pp-ease);
}
.pp-site .pp-pdp__acc-item[open] .pp-pdp__acc-chev{transform:rotate(180deg)}
.pp-site .pp-pdp__icon{display:block}

.pp-site .pp-pdp__acc-body{
  padding:16px 18px;
  border-top:1px solid var(--pp-border-subtle);
  background:var(--pp-surface-subtle);
}
.pp-site .pp-pdp__acc-body--facts{padding:8px 18px 16px}

.pp-site .pp-pdp__fact{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--pp-border-subtle);
}
.pp-site .pp-pdp__fact:last-child{border-bottom:0}
.pp-site .pp-pdp__fact-k{
  font-family:var(--pp-font-sans);font-size:13.5px;line-height:1.45;color:var(--pp-text-muted);
}
.pp-site .pp-pdp__fact-v{
  font-family:var(--pp-font-mono);font-size:13.5px;line-height:1.45;
  color:var(--pp-text-heading);text-align:right;
}

.pp-site .pp-pdp__acc-text{
  font-family:var(--pp-font-sans);font-size:13.5px;line-height:1.6;color:var(--pp-text-body);
}
.pp-site .pp-pdp__acc-link{
  display:inline-block;margin:8px 0 0;min-height:24px;
  font-family:var(--pp-font-sans);font-size:13.5px;line-height:1.6;
  color:var(--pp-text-accent);
}
.pp-site .pp-pdp__acc-link:hover{color:var(--pp-blue-700);text-decoration:underline;text-underline-offset:3px}


/* ============ 9b. DOSE CALCULATOR (accordion panel) ============ */

/* The body is the design master's calculator well: generous padding on the
   existing surface-subtle ground, hairline top rule already supplied by
   .pp-pdp__acc-body. */
.pp-site .pp-pdp__acc-body--dose{padding:22px 18px}

/* Pen shape: [-] [ big dial + CLICKS ] [+]. Matches the master's 40px mono
   number with a 2px underline and the 11px tracked unit. The -/+ buttons keep
   the 44px touch target the stepper already ships. */
.pp-site .pp-pdp__dose-row{
  display:flex;align-items:center;justify-content:center;gap:16px;
}
.pp-site .pp-pdp__dose-btn{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:44px;min-width:44px;height:44px;padding:0;
  -webkit-appearance:none;appearance:none;
  border:1px solid var(--pp-border-default);
  border-radius:var(--pp-pdp-radius-sm);
  background:var(--pp-neutral-0);
  font-family:var(--pp-font-sans);font-size:18px;font-weight:600;line-height:1;
  color:var(--pp-navy-700);cursor:pointer;
  transition:background var(--pp-dur-fast) var(--pp-ease),border-color var(--pp-dur-fast) var(--pp-ease),color var(--pp-dur-fast) var(--pp-ease);
}
.pp-site .pp-pdp__dose-btn:hover{background:var(--pp-neutral-50);border-color:var(--pp-blue-300)}
.pp-site .pp-pdp__dose-btn:focus-visible{outline:none;box-shadow:var(--pp-shadow-focus)}

.pp-site .pp-pdp__dose-dial{display:flex;align-items:baseline;gap:10px}
.pp-site .pp-pdp__dose-input{
  width:84px;padding:0 0 4px;margin:0;
  -webkit-appearance:textfield;appearance:textfield;
  border:0;border-bottom:2px solid var(--pp-neutral-200);border-radius:0;
  background:transparent;text-align:center;
  font-family:var(--pp-font-mono);font-size:40px;font-weight:500;line-height:1;
  color:var(--pp-navy-700);
}
.pp-site .pp-pdp__dose-input::-webkit-outer-spin-button,
.pp-site .pp-pdp__dose-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* PP-FIX C10 (2026-08-29): the colour-only underline shift was flagged as
   invisible in the keyboard walk. The field keeps its underline register but
   the focused underline thickens to a 3px band. */
.pp-site .pp-pdp__dose-input:focus-visible{outline:none;box-shadow:0 2px 0 0 var(--pp-blue-500);border-bottom-color:var(--pp-blue-500)}
.pp-site .pp-pdp__dose-unit{
  font-family:var(--pp-font-mono);font-size:11px;font-weight:500;line-height:1;
  letter-spacing:.18em;color:var(--pp-text-muted);white-space:nowrap;
}

/* Result (blue, the computed figure) and sub (muted, the rule line), centered
   like the master. */
.pp-site .pp-pdp__dose-result{
  margin:14px 0 0;text-align:center;
  font-family:var(--pp-font-mono);font-size:13px;font-weight:500;line-height:1.5;
  color:var(--pp-blue-700);
}
.pp-site .pp-pdp__dose-sub{
  margin:6px 0 0;text-align:center;
  font-family:var(--pp-font-mono);font-size:12px;font-weight:400;line-height:1.5;
  color:var(--pp-text-muted);
}

/* Spray shape (Semax / Selank): two labelled numeric fields side by side. */
.pp-site .pp-pdp__dose-row--spray{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-start}
.pp-site .pp-pdp__dose-field{display:flex;flex-direction:column;gap:6px;flex:1 1 120px;min-width:0}
.pp-site .pp-pdp__dose-label{
  font-family:var(--pp-font-sans);font-size:11px;font-weight:600;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;color:var(--pp-text-muted);
}
.pp-site .pp-pdp__dose-num{
  width:100%;padding:8px 10px;margin:0;
  border:1px solid var(--pp-border-default);
  border-radius:var(--pp-pdp-radius-sm);
  background:var(--pp-neutral-0);text-align:left;
  font-family:var(--pp-font-mono);font-size:16px;font-weight:500;line-height:1.2;
  color:var(--pp-text-heading);
}
.pp-site .pp-pdp__dose-num:focus-visible{outline:none;border-color:var(--pp-blue-500);box-shadow:var(--pp-shadow-focus)}
.pp-site .pp-pdp__dose-row--spray ~ .pp-pdp__dose-result,
.pp-site .pp-pdp__dose-row--spray ~ .pp-pdp__dose-sub{text-align:left}


/* ============ 10. RESEARCH NOTICE ============ */

/* Reuses .pp-notice--boxed from pp-site-scoped.css, which already matches the
   master's ResearchNotice variant="block" tone="boxed". Only the width cap
   pp-product.css sets for the old summary column is released here. */
.pp-site .pp-pdp__ruo{margin:20px 0 0;max-width:none}


/* ============ 11. DESCRIPTION + RELATED WRAPPERS ============ */

/* .pp-pdp__doc keeps the styling pp-product.css already gives the nine bodies;
   only the top gap is restated so it does not depend on that file's cascade. */
.pp-site .pp-pdp__doc{margin:96px 0 0}

/* The template no longer wraps the related-products group in a .pp-shell, so
   it gets the shell's own max-width and gutter here. pp-product.css keeps
   owning everything inside it. */
.pp-site .pp-pdp-page>.pp-pdp__related{
  max-width:var(--pp-max);margin-inline:auto;padding-inline:var(--pp-gutter);
  padding-block:70px 96px;
}


/* ============ 12. RESPONSIVE ============
   Checked against 320 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920.
   Breakpoints mirror pp-product.css (1100 / 960 / 700 / 380) so the PDP and the
   product bodies below it change shape at the same widths. */

@media (max-width:1100px){
  .pp-site .pp-pdp{gap:48px}
}

/* 1024 and 768 land here: one column, gallery first, info second (DOM order). */
@media (max-width:960px){
  .pp-site .pp-pdp{grid-template-columns:1fr;gap:40px}
  .pp-site .pp-pdp__stage{max-width:560px}
  .pp-site .pp-pdp__excerpt{max-width:62ch}
  .pp-site .pp-pdp__doc{margin-top:70px}
  .pp-site .pp-pdp-page>.pp-pdp__related{padding-block:48px 70px}
}

/* Phones (430 / 390 / 375 / 320). The gallery is deliberately much shorter than
   1:1 and the vertical rhythm is compressed so title -> strength -> price ->
   quantity -> Add to cart stay close to the fold. No sticky bar is introduced
   (the brief rules one out) and the section order the design master prescribes
   is not reshuffled.

   Measured in headless Chromium with these values, as document offsets (the
   site header accounts for the first ~120px and is not this file's to change).
   Figures are the bottom of the Add to cart control:
       430x932   simple 832 (above the fold)   variable 1005
       390x844   simple 853 (at the fold)      variable 1001
       375x667   simple 817                    variable 1034
       320x640   simple 806                    variable 1021
   The variable product sits lower because its form carries the extra
   WooCommerce-injected variation price block that a simple product has not. */
@media (max-width:700px){
  .pp-site .pp-pdp-wrap{padding-block:16px 0}
  .pp-site .pp-pdp__crumbs{margin-bottom:14px;font-size:12.5px;gap:6px}
  .pp-site .pp-pdp{gap:22px}
  .pp-site .pp-pdp__stage{
    aspect-ratio:auto;height:min(30vh,232px);max-width:none;
    border-radius:var(--pp-pdp-radius-lg);
  }
  .pp-site .pp-pdp__thumbs{gap:10px;margin-top:10px}
  .pp-site .pp-pdp__thumb{width:56px;height:56px}
  .pp-site .pp-pdp__badges{margin-bottom:12px}
  .pp-site .pp-pdp__title{font-size:26px;margin-top:8px}
  .pp-site .pp-pdp__price{font-size:19px;margin-top:8px}
  .pp-site .pp-pdp__excerpt{margin-top:12px;font-size:14.5px}
  .pp-site .pp-pdp__field{margin-top:16px}
  .pp-site .pp-pdp__field-label{margin-bottom:8px}
  .pp-site .pp-pdp__opt{padding:12px 14px}
  .pp-site .pp-pdp__opt.is-selected{padding:11px 13px}
  .pp-site .pp-pdp__buy{margin-top:16px}
  .pp-site .pp-pdp .single_variation_wrap{margin-top:14px}
  .pp-site .pp-pdp .woocommerce-variation-add-to-cart{margin-top:12px}
  .pp-site .pp-pdp__acc{margin-top:20px}
  .pp-site .pp-pdp__acc-head{padding:14px 16px;font-size:13.5px}
  .pp-site .pp-pdp__acc-body{padding:14px 16px}
  .pp-site .pp-pdp__acc-body--facts{padding:6px 16px 14px}
  .pp-site .pp-pdp__acc-body--dose{padding:18px 14px}
  .pp-site .pp-pdp__dose-input{font-size:34px;width:72px}
  .pp-site .pp-pdp__dose-row{gap:12px}
  .pp-site .pp-pdp__doc{margin-top:56px}
  .pp-site .pp-pdp-page>.pp-pdp__related{padding-block:40px 56px}
}

/* 320-380: the stepper and the button each need a full row so neither the
   price nor the label can be clipped. Touch targets stay at 44px+. */
@media (max-width:430px){
  .pp-site .pp-pdp__qty{flex:1 1 100%;justify-content:space-between}
  .pp-site .pp-pdp__qty .pp-pdp__qty-input{width:auto;flex:1 1 auto;min-width:0}
  .pp-site .pp-pdp__qty .pp-pdp__qty-val{flex:1 1 auto}
  .pp-site .pp-pdp__add,
  .pp-site .pp-pdp .variations_form .single_add_to_cart_button{flex:1 1 100%;white-space:normal}
  .pp-site .pp-pdp .woocommerce-variation-add-to-cart{gap:10px}
}

@media (max-width:380px){
  .pp-site .pp-pdp__title{font-size:23px}
  .pp-site .pp-pdp__opts{gap:8px}
  .pp-site .pp-pdp__opt{flex:1 1 100%}
  .pp-site .pp-pdp__thumb{width:52px;height:52px}
  .pp-site .pp-pdp__fact{gap:12px}
  .pp-site .pp-pdp__dose-row{gap:8px}
  .pp-site .pp-pdp__dose-btn{width:40px;min-width:40px}
  .pp-site .pp-pdp__dose-input{width:60px;font-size:30px}
  .pp-site .pp-pdp__dose-field{flex:1 1 100%}
}

/* Wide viewports (1440 / 1920): the shell already caps at --pp-max, so only the
   gallery needs a ceiling to keep the 1:1 stage from dominating the fold. */
@media (min-width:1441px){
  .pp-site .pp-pdp{gap:72px}
}

@media (prefers-reduced-motion:reduce){
  .pp-site .pp-pdp__thumb,
  .pp-site .pp-pdp__opt,
  .pp-site .pp-pdp__qty-btn,
  .pp-site .pp-pdp__add,
  .pp-site .pp-pdp__acc-head,
  .pp-site .pp-pdp__acc-chev,
  .pp-site .pp-pdp__dose-btn{transition:none}
}