/**
 * DesignDusk — product page V4 layer (2026-08-15).
 *
 * Loads AFTER dd-product-page.css and only ever adds rules scoped to
 * `body.dd-pp-v4`. With the V4 flag off, not one selector here can match, so
 * the V3 layout is bit-for-bit untouched (rollback path #1).
 *
 * V3 at >=1280px is three rails: gallery | steps | order card.
 * V4 is TWO rails: [cover + order card] | [steps], per the owner's comp
 * packages/product-page/designdusk-product-page-Redesign.html
 *
 * The comp's own namespace was `.dd-trailer-page`, borrowed from the trailer
 * page. It is deliberately NOT used here — this file owns `.dd-pp-*`,
 * `.dd-tier*` and `.dd-addon-group*`, and reuses V3's existing `.dd-buy-card`
 * rather than forking it.
 *
 * Palette is taken from the comp: ink #16243a, body #22303c, muted #8b968f,
 * green #0b6b2c / #0f7a35, hairline #e6e8e6, page #f4f5f4.
 */

/* ------------------------------------------------------------------ *
 * Two-rail layout
 * ------------------------------------------------------------------ */

@media (min-width: 1080px) {
  body.dd-product-single.dd-pp-v4.dd-card-on .content-single-wrapper {
    /* 300px, not 380px. Removing the gallery's 30px padding made the cover
     * render TALLER, which pushed Add to cart below the fold (owner report
     * 2026-08-15). A narrower rail shortens the cover proportionally (2:3)
     * and lifts the order card ~120px without cropping anything. */
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    /* Row 1 is the cover's own height; the card takes row 2 and aligns to its
     * top, so it sits tight under the cover instead of being pushed down by
     * the tall summary column spanning both rows. */
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: 32px;
  }

  /* V3 makes the gallery sticky (its 3-rail layout wanted that). In the 2-rail
   * layout the card sits UNDER the cover in the same column, so a sticky
   * gallery slides down over the card. Both are static; the rail scrolls as
   * one piece. */
  body.dd-product-single.dd-pp-v4.dd-card-on .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
    position: static !important;
    top: auto !important;
  }

  /* NOT sticky. A sticky grid item is contained by the GRID, not by its own
   * row, so the card floated up over the cover on scroll and covered it
   * (owner report 2026-08-15). The left rail scrolls as one column instead;
   * the mobile buy bar still carries the persistent CTA on small screens. */
  body.dd-product-single.dd-pp-v4.dd-card-on .dd-buy-card {
    display: block;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    position: static;
    width: auto;
    /* Sit directly under the PREV/NEXT + social row, not floating below a gap
     * (owner 2026-08-15). The gallery's own bottom margin is zeroed below. */
    margin-top: 6px;
  }

  body.dd-product-single.dd-pp-v4.dd-card-on .woocommerce-product-gallery {
    margin-bottom: 0 !important;
  }

  body.dd-product-single.dd-pp-v4.dd-card-on .summary.entry-summary {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* NO chrome added here on purpose. V3 already draws the order card's own
 * frame; an earlier V4 build added a second border+padding around it, which
 * rendered as a box inside a box (owner: "doesn't look right, remove the
 * stroke"). The card keeps V3's single frame. */

/* QA MAJOR 2: the order card on custom/service (simple) products. V3's card is
 * hidden by default and only revealed by `dd-card-on`, which its JS sets only
 * for variable products — so this one needs its own reveal. */
body.dd-pp-v4 .dd-buy-card--simple {
  display: block;
  background: #fff;
  border: 1px solid #e6e8e6;
  border-radius: 14px;
  padding: 18px;
  margin-top: 18px;
}

body.dd-pp-v4 .dd-buy-card--simple .dd-bc-row,
body.dd-pp-v4 .dd-buy-card--simple .dd-bc-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

body.dd-pp-v4 .dd-buy-card--simple .dd-bc-row {
  margin-top: 8px;
  font-size: 14px;
  color: #3c4a54;
}

body.dd-pp-v4 .dd-buy-card--simple .dd-bc-total {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eceeec;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8b968f;
}

body.dd-pp-v4 .dd-buy-card--simple .dd-bc-grand {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #0b6b2c;
}

body.dd-pp-v4 .dd-buy-card--simple .dd-bc-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 12.5px;
  color: #7c8a80;
}

body.dd-pp-v4 .dd-buy-card--simple .dd-bc-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}

body.dd-pp-v4 .dd-buy-card--simple .dd-buy-card__cta {
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  border: none;
  border-radius: 8px;
  background: #0b6b2c;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

body.dd-pp-v4 .dd-buy-card--simple .dd-buy-card__cta:hover { background: #095623; }

/* With the card present there would be two "Add to cart" buttons — the native
 * one inside form.cart and the card's proxy. V3 hides the native one only
 * under `dd-card-on`, which never applies to simple products. Same clip
 * technique, NOT display:none: the proxy calls .click() on it, so it has to
 * stay in the DOM and remain clickable. The card sits outside form.cart
 * (rendered on woocommerce_after_add_to_cart_form), so this cannot hit it. */
body.dd-pp-v4.dd-simple-card-on form.cart .single_add_to_cart_button,
body.dd-pp-v4.dd-simple-card-on form.cart .quantity_wrap {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body.dd-pp-v4 .dd-buy-card--simple .dd-buy-card__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: #16243a;
}

/* Owner 2026-08-15: the cover's own outlined card ate vertical space. The comp
 * has ONE card in the left rail, not a framed gallery stacked on a framed buy
 * card — so the gallery loses its frame and the cover sits flush. */
/* !important because the theme's own gallery rule out-specifies a body-scoped
 * override (measured: 1px solid #e6e6e6, radius 15px, padding 30px). The 30px
 * padding was the actual space cost, not the stroke. */
body.dd-product-single.dd-pp-v4 .woocommerce-product-gallery {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.dd-product-single.dd-pp-v4 .dd-gallery-nav {
  margin-top: 8px;
  padding-top: 8px;
}

/* Close the gap between the add-ons block and the 5-icon trust strip
 * (owner 2026-08-15). V3 spaced these for the 3-rail layout. */
body.dd-product-single.dd-pp-v4 .dd-trust-block--cards {
  margin-top: 18px;
}

body.dd-product-single.dd-pp-v4 .summary.entry-summary > form.cart {
  margin-bottom: 8px;
}

body.dd-product-single.dd-pp-v4 .yith-wapo-container,
body.dd-product-single.dd-pp-v4 .dd-addon-group--more {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Step 1 — tier cards
 *
 * The real <select> stays in the DOM and stays authoritative; it is simply
 * not shown. Same for the swatch row the swatches plugin renders, which the
 * cards replace visually.
 * ------------------------------------------------------------------ */

body.dd-pp-v4.dd-tiers-on .variations,
body.dd-pp-v4.dd-tiers-on .woo-variation-swatches,
body.dd-pp-v4.dd-tiers-on ul.variable-items-wrapper,
body.dd-pp-v4.dd-tiers-on .woo-variation-items-wrapper {
  display: none !important;
}

/* Three across on the comp (Ebook | Ebook+Paperback | Hardback). auto-fit so a
 * two-variation product fills the row evenly instead of leaving a hole. */
/* The fieldset is SERVER-rendered, so it exists even when JS never runs.
 * Hidden until `dd-tiers-on` (set only by the V4 JS), because without JS the
 * radios cannot drive the Woo select and the native `.variations` control is
 * the real one — showing both would be two controls, one of them dead.
 * This keeps the documented no-JS fallback exactly as it was. */
body.dd-pp-v4 .dd-tiers {
  display: none;
}

body.dd-pp-v4.dd-tiers-on .dd-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 14px 0 4px;
  /* fieldset reset */
  border: 0;
  padding: 0;
  min-width: 0;
}

/* Real radio: kept in the accessibility tree and focusable, just not painted.
 * NOT display:none — that would remove it from keyboard navigation, which is
 * the whole point of moving to native inputs (QA MAJOR 3). */
body.dd-pp-v4 .dd-tier__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Focus lands on the invisible radio, so the ring has to be drawn by the
 * label around it. */
body.dd-pp-v4 .dd-tier:focus-within {
  outline: 2px solid #0f7a35;
  outline-offset: 2px;
}

/* Selected state works without JS having to add a class, and the class is
 * kept as a belt-and-braces for browsers without :has(). */
body.dd-pp-v4 .dd-tier:has(.dd-tier__input:checked) {
  border-color: #0b6b2c;
  box-shadow: inset 0 0 0 1px #0b6b2c;
  background: #f6faf7;
}

body.dd-pp-v4 .dd-tier {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #e0e3e0;
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}

body.dd-pp-v4 .dd-tier:hover { border-color: #c9cfc9; }

body.dd-pp-v4 .dd-tier:focus-visible {
  outline: 2px solid #0f7a35;
  outline-offset: 2px;
}

body.dd-pp-v4 .dd-tier--selected {
  border-color: #0b6b2c;
  box-shadow: inset 0 0 0 1px #0b6b2c;
  background: #f6faf7;
}

body.dd-pp-v4 .dd-tier__name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.25;
  color: #16243a;
  text-transform: uppercase;
}

body.dd-pp-v4 .dd-tier__blurb {
  flex: 1 0 auto;
  font-size: 11.5px;
  line-height: 1.45;
  color: #7c8a80;
  text-wrap: pretty;
}

body.dd-pp-v4 .dd-tier__price {
  font-size: 15px;
  font-weight: 700;
  color: #16243a;
  white-space: nowrap;
}

body.dd-pp-v4 .dd-tier--unavailable {
  opacity: .5;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------ *
 * Step 3 — add-on groups
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * Step 2 — the comp stacks every field full width. V3 pairs Author Name and
 * Tagline into two columns; V4 unstacks that pairing.
 * ------------------------------------------------------------------ */

/* Must out-specify V3's
 * `body.dd-product-single .wapf-wrapper.dd-fields-ready .wapf-field-row`,
 * which lays each row out as a wrapping flex line (Author + Tagline pair up).
 * The comp stacks them, so the flex line becomes a block. */
body.dd-product-single.dd-pp-v4 .wapf-wrapper.dd-fields-ready .wapf-field-row {
  display: block;
}

body.dd-product-single.dd-pp-v4 .wapf-wrapper.dd-fields-ready .wapf-field-container {
  width: 100% !important;
  flex: none;
  max-width: none;
  float: none;
  margin: 0 0 16px;
}

/* NOTE: the rule that hid V3's four category labels is gone. V3 no longer
 * creates them when V4 is active (see dd-product-page.js), so there is nothing
 * left to hide — the label, the JS that removed it, and this rule were three
 * places maintaining one dead concept. */

/* Every add-on row's description sat 11px LEFT of its own title — measured:
 * label.yith-wapo-addon-label at x=512, p.description at x=501. That stagger
 * is what reads as a broken vertical line under "Extra design change request"
 * and under "Interior Formatting". Bring descriptions onto the label's edge. */
body.dd-pp-v4 .yith-wapo-option p.description {
  padding-left: 11px;
}

body.dd-pp-v4 .dd-addons__note {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8b968f;
  text-wrap: pretty;
}

body.dd-pp-v4 .dd-addon-group__title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0b6b2c;
}

body.dd-pp-v4 .dd-addon-group--more {
  margin-top: 18px;
  border-top: 1px solid #eceeec;
  padding-top: 14px;
}

/* "More add-ons" is a section label, not a disclosure — every row stays
 * visible, matching the comp. Muted vs the green Recommended label. */
body.dd-pp-v4 .dd-addon-group__title--more {
  color: #8b968f;
}

body.dd-pp-v4 .dd-addon-group__body {
  display: block;
  margin-top: 4px;
}

/* Quote-only row: no price, no usable checkbox, a real link out to the service
 * page. `visibility: hidden` — NOT `display: none` — because the checkbox must
 * keep occupying its space, or this row's label starts further left than every
 * other add-on and the column of names stops lining up (owner 2026-08-15). */
/* The input is REMOVED from flow, not just hidden. Measured: with
 * `visibility:hidden` every label sat at x=512 — geometrically aligned with
 * the other rows, but the empty 14px checkbox slot at x=471 read as an indent
 * ("a tab space before it"). Collapsing it lets the label start flush at the
 * checkbox column, which reads as "this row isn't selectable".
 *
 * Do NOT hide .checkbox-button-container / .checkboxbutton — the option's
 * LABEL renders inside them, and hiding the container deletes the words
 * "Interior Formatting" outright. */
body.dd-pp-v4 .dd-addon--quote input.yith-wapo-option-value {
  visibility: hidden;
}

/* Measured positions for this row's label: display:none -> 488 (floats between
 * columns), margin pulled -> 471 (outdents past every other name),
 * visibility:hidden -> 512 (exactly level with every other name). 512 wins, and
 * the leftover empty checkbox slot — the thing that read as a tab space — gets
 * a quiet dash so it looks deliberate instead of blank. */
body.dd-pp-v4 .dd-addon--quote .checkbox-button-container {
  position: relative;
}

body.dd-pp-v4 .dd-addon--quote .checkbox-button-container::before {
  content: "\2014"; /* em dash */
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  color: #c9cfc9;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

/* Sit the quote link where every other row shows its price (right edge,
 * vertically centred). Done positionally rather than by moving the node into
 * a price element — YITH's price node is nested deeper than a stable selector
 * reaches, and two attempts to target it left the link stranded on the left. */
body.dd-pp-v4 .dd-addon--quote {
  position: relative;
}

body.dd-pp-v4 .dd-addon__quote-link {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13.5px;
  font-weight: 600;
  color: #0f7a35;
  text-decoration: none;
  white-space: nowrap;
}

body.dd-pp-v4 .dd-addon__quote-link:hover {
  color: #0a5a26;
  text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * Mobile — single rail, cards stay full width, card returns to flow
 * ------------------------------------------------------------------ */

@media (max-width: 1079px) {
  body.dd-pp-v4 .dd-tier {
    grid-template-columns: 1fr auto;
  }

  body.dd-pp-v4 .dd-tier__price {
    font-size: 16px;
  }
}

/* SERVICE products: no cover add-ons block. "Hardback Cover", "Jacket Cover"
 * and "Animated cover" are meaningless bought alongside interior formatting,
 * and 11 of them were rendering on the live formatting product. The inputs
 * are also disabled in JS, so this is presentation, not the guard. */
body.dd-pp-v4.dd-pp-service .yith-wapo-container,
body.dd-pp-v4.dd-pp-service .dd-addon-group,
body.dd-pp-v4.dd-hide-cover-addons .yith-wapo-container,
body.dd-pp-v4.dd-hide-cover-addons .dd-addon-group {
  display: none;
}

/* The "3 · Add-ons" step header above that block: JS removes it; this is the
 * no-JS belt so an empty numbered section never renders on a service page. */
body.dd-pp-v4.dd-pp-service .dd-step:has(+ .yith-wapo-container) {
  display: none;
}

/* ------------------------------------------------------------------ *
 * SERVICE fields (2026-08-17) — layout radio, manuscript upload slot,
 * manuscript-final gate. Same design language as the tier cards.
 * ------------------------------------------------------------------ */

body.dd-pp-v4 .dd-service-fields {
  border: 0;
  padding: 0;
  margin: 18px 0 6px;
  min-width: 0;
}

body.dd-pp-v4 .dd-service-fields .dd-sf-legend {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #16243a;
  padding: 0;
  margin-bottom: 10px;
}

body.dd-pp-v4 .dd-sf-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

body.dd-pp-v4 .dd-sf-radio {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #e0e3e0;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  line-height: 1.4;
  color: #16243a;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}

body.dd-pp-v4 .dd-sf-radio:hover { border-color: #c9cfc9; }

body.dd-pp-v4 .dd-sf-radio:has(input:checked) {
  border-color: #0b6b2c;
  box-shadow: inset 0 0 0 1px #0b6b2c;
  background: #f6faf7;
}

body.dd-pp-v4 .dd-sf-radio input {
  margin: 2px 0 0;
  accent-color: #0b6b2c;
  flex: 0 0 auto;
}

body.dd-pp-v4 .dd-sf-upload {
  border: 1px dashed #c9cfc9;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: #fff;
}

body.dd-pp-v4 .dd-sf-upload__title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #16243a;
}

body.dd-pp-v4 .dd-sf-upload__note {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #7c8a80;
}

body.dd-pp-v4 .dd-sf-upload__slot:not(:empty) { margin-top: 10px; }

body.dd-pp-v4 .dd-sf-final {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #e0e3e0;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #16243a;
  cursor: pointer;
}

body.dd-pp-v4 .dd-sf-final input {
  margin: 2px 0 0;
  accent-color: #0b6b2c;
  flex: 0 0 auto;
}

body.dd-pp-v4 .dd-sf-final:has(input:checked) {
  border-color: #0b6b2c;
  box-shadow: inset 0 0 0 1px #0b6b2c;
  background: #f6faf7;
}