/* Olevor product page (VISUAL_REVAMP_PLAN §5.3 "PDP", §5.4, R6.1, R5.3, D21, D22). Tokens in style.css. */

/* body.single-product (0,1,1) out-specifies Blocksy's dynamic body rule (0,0,1); kept
   as a duplicate of style.css:167 on purpose (twin of home-v3.css). No !important
   needed (R6.6, verified live 2026-09-03). */
body.single-product {
    background: var(--olv-bg);
}

body.single-product .site-main,
body.single-product [data-content="normal"] {
    margin: 0;
    max-width: none;
    padding: 0;
}

/* Removes Blocksy's page shell (breadcrumbs, related blocks, article margin/width);
   these selectors out-rank Blocksy's (0,1,x) rules on specificity (R6.6). */
body.single-product .ct-breadcrumbs,
body.single-product .woocommerce-breadcrumb,
body.single-product .hero-section,
body.single-product .related.products {
    display: none;
}

body.single-product .ct-container-full > article {
    margin: 0;
    max-width: none;
    width: 100%;
}

/* ------------------------------------------------------------------ base */
.olv4-pdp {
    background: var(--olv-bg);
    color: var(--olv-ink);
    font-family: var(--olv-ui);
    overflow: clip;
    padding: 0;
}

.olv4-pdp img {
    display: block;
}

.olv4-pdp-wrap {
    margin: 0 auto;
    max-width: var(--olv-wrap);
    padding-inline: var(--olv-edge);
    width: 100%;
}

.olv4-pdp-sr {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.olv4-pdp-eyebrow {
    color: var(--olv-muted-strong); /* WCAG 1.4.3 */
    font-family: var(--olv-mono);
    font-size: var(--olv-type-eyebrow);
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin: 0;
    text-transform: uppercase;
}

.olv4-pdp-title {
    font-size: var(--olv-type-section);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin: 0;
    text-wrap: balance;
}

.olv4-pdp-head {
    margin-bottom: 40px;
}

.olv4-pdp-head .olv4-pdp-eyebrow {
    margin-bottom: 12px;
}

/* ------------------------------------------------------- gallery + purchase panel */
.olv4-pdp-hero {
    background: var(--olv-white);
    border-bottom: 1px solid var(--olv-line);
}

.olv4-pdp-top {
    align-items: start;
    display: grid;
    gap: 72px;
    grid-template-columns: minmax(0, 472px) minmax(0, 1fr);
    padding-bottom: var(--olv-section-pad);
    padding-top: 40px;
}

.olv4-pdp-gallery {
    align-self: start;
    display: grid;
    gap: 12px;
    position: sticky;
    top: calc(var(--olv-header) + 24px);
}

.olv4-pdp-stage {
    aspect-ratio: 1 / 1;
    background: var(--olv-field-50);
    border-radius: var(--olv-radius-card);
    overflow: hidden;
}

.olv4-pdp-stage > img {
    height: 100%;
    object-fit: contain;
    transition: opacity var(--olv-motion-fast) var(--olv-ease-standard);
    width: 100%;
}


.olv4-pdp-summary {
    max-width: 560px;
    min-width: 0;
    padding-top: 8px;
}

.olv4-pdp-product-eyebrow {
    color: var(--olv-muted); /* Lighthouse: accent text at 10 px was 3.6:1; the dot keeps the accent */
    letter-spacing: 0.09em;
    margin-bottom: 16px;
}

.olv4-pdp-product-eyebrow::before {
    background: var(--olv-pdp-accent, var(--olv-ink));
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 4px;
    margin-right: 8px;
    vertical-align: middle;
    width: 4px;
}

.olv4-pdp-summary h1 {
    color: var(--olv-ink);
    font-family: var(--olv-ui);
    font-size: var(--olv-type-pdp-title);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.2;
    margin: 0 0 20px;
    text-wrap: balance;
}

/* chips (§5.4): non-interactive facts only */
.olv4-pdp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.olv4-pdp-chips li {
    border: 1px solid var(--olv-line);
    border-radius: var(--olv-radius-control);
    color: var(--olv-ink);
    font-family: var(--olv-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.4;
    padding: 5px 12px;
    text-transform: uppercase;
    white-space: nowrap;
}

.olv4-pdp-price-row {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 0 20px;
}

.olv4-pdp-price {
    font-family: var(--olv-mono);
    font-size: 25px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

.olv4-pdp-price small {
    color: var(--olv-muted);
    font-size: 11px;
    font-weight: 400;
    margin-left: 8px;
}

.olv4-pdp-price del {
    color: var(--olv-muted);
    font-weight: 400;
    margin-right: 8px;
}

.olv4-pdp-price ins {
    text-decoration: none;
}

.olv4-pdp-availability {
    align-items: center;
    color: var(--olv-ink);
    display: inline-flex;
    font-size: var(--olv-type-small);
    gap: 8px;
    line-height: 1.4;
    margin: 0;
}

.olv4-pdp-availability i {
    background: #299160;
    border-radius: 50%;
    display: inline-block;
    height: 6px;
    width: 6px;
}

.olv4-pdp-availability.is-agotado i {
    background: var(--olv-danger);
}

.olv4-pdp-availability.is-reservado i {
    background: var(--olv-muted);
}

.olv4-pdp-description {
    color: var(--olv-ink);
    font-size: var(--olv-type-body);
    line-height: 1.6;
    margin: 0 0 12px;
    max-width: 520px;
}

/* D22: one factual status line, no badge */
.olv4-pdp-docs {
    color: var(--olv-muted);
    font-size: var(--olv-type-small);
    line-height: 1.6;
    margin: 0 0 28px;
}

.olv4-pdp-docs span {
    color: var(--olv-ink);
}

.olv4-pdp-backorder {
    color: var(--olv-ink);
    font-size: var(--olv-type-body);
    line-height: 1.6;
    margin: 0 0 16px;
}

.olv-stock-alert {
    background: var(--olv-white);
    border: 1px solid var(--olv-line);
    border-radius: var(--olv-radius-card);
    margin: 16px 0;
    width: 100%;
}

.olv-stock-alert > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: var(--olv-type-body);
    font-weight: 500;
    gap: 12px;
    justify-content: space-between;
    list-style: none;
    min-height: 52px;
    padding: 12px 16px;
}

.olv-stock-alert > summary::-webkit-details-marker { display: none; }
.olv-stock-alert[open] > summary span { transform: rotate(45deg); }

.olv-stock-alert-form {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0 16px 16px;
}

.olv-stock-alert-form p,
.olv-stock-alert-form label {
    color: var(--olv-ink);
    font-size: var(--olv-type-small);
    line-height: 1.6;
    margin: 0;
}

.olv-stock-alert-form input[type="email"] {
    background: var(--olv-white);
    border: 1px solid var(--olv-muted);
    border-radius: var(--olv-radius-input);
    color: var(--olv-ink);
    font-family: inherit;
    font-size: 16px;
    min-height: 52px;
    padding: 12px 16px;
    width: 100%;
}

.olv-stock-alert-form .olv-stock-alert-consent {
    align-items: start;
    cursor: pointer;
    display: grid;
    gap: 12px;
    grid-template-columns: 20px 1fr;
    min-height: 44px;
    padding-block: 8px;
}

.olv-stock-alert-consent input { margin: 4px 0 0; }
.olv-stock-alert-form a { color: inherit; text-decoration: underline; }

.olv-stock-alert-form button {
    background: var(--olv-ink);
    border: 1px solid var(--olv-ink);
    border-radius: var(--olv-radius-control);
    color: var(--olv-white);
    font: inherit;
    min-height: 52px;
    padding: 12px 16px;
    white-space: normal;
    width: 100%;
}

.olv-stock-alert-form button:disabled { cursor: default; opacity: 0.65; }
.olv-stock-alert-form .olv-stock-alert-status { font-weight: 500; }
.olv-stock-alert-form .olv-stock-alert-status:empty { display: none; }
.olv-stock-alert-form .olv-stock-alert-status.is-error { color: var(--olv-danger); }
.olv-stock-alert-form .olv-stock-alert-help { color: var(--olv-muted-strong); }

/* purchase controls (D21): stepper 140x52 with 44 px buttons + pill 52 px filling the row */
.olv4-pdp-cart form.cart {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 12px;
    width: 100%;
}

/* Holds the D21 140x52 stepper box against Blocksy's .ct-cart-actions/.quantity
   rules; same-specificity ties resolve to this file by enqueue order (R6.6). */
.olv4-pdp-cart form.cart > .ct-cart-actions {
    align-items: stretch;
    display: flex;
    flex: 1 1 100%;
    gap: 12px;
    width: 100%;
}

.olv4-pdp-cart form.cart > p,
.olv4-pdp-cart .stock {
    flex: 1 1 100%;
}

.olv4-pdp-cart .quantity {
    align-items: center;
    background: var(--olv-white);
    border: 1px solid var(--olv-line);
    border-radius: var(--olv-radius-input);
    display: flex;
    flex: 0 0 140px;
    height: 52px;
    margin: 0;
    max-width: 140px;
    min-width: 140px;
    padding: 0 3px;
    position: relative;
    width: 140px;
}

.olv4-pdp-cart .quantity.hidden {
    display: none;
}

.olv4-pdp-cart .quantity label,
.olv4-pdp-cart .quantity .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Flattens Blocksy's absolutely-positioned .ct-increase/.ct-decrease mini-buttons into
   the D21 44 px flex row; (0,3,0)+ selectors win the cascade without !important, and
   the hover colour is pinned by the (0,4,0) :hover rule below (R6.6). */
.olv4-pdp-cart .quantity .ct-decrease,
.olv4-pdp-cart .quantity .ct-increase,
.olv4-pdp-cart .quantity button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    bottom: auto;
    color: var(--olv-ink);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 44px;
    font-family: var(--olv-ui);
    font-size: 18px;
    height: 44px;
    justify-content: center;
    left: auto;
    line-height: 1;
    margin: 0;
    padding: 0;
    position: static;
    right: auto;
    top: auto;
    transition: background var(--olv-motion-fast) var(--olv-ease-standard);
    width: 44px;
}

.olv4-pdp-cart .quantity .ct-decrease:hover,
.olv4-pdp-cart .quantity .ct-increase:hover,
.olv4-pdp-cart .quantity button:hover {
    background: rgba(0, 0, 0, 0.06);
    /* Blocksy's div.quantity .ct-increase:hover (0,3,1) sets the arrows white; this
       (0,4,0) rule keeps the ink colour without !important. */
    color: var(--olv-ink);
}

.olv4-pdp-cart .quantity .ct-decrease {
    order: 1;
}

.olv4-pdp-cart .quantity input.qty {
    -moz-appearance: textfield;
    appearance: textfield;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--olv-ink);
    flex: 1 1 auto;
    font-family: var(--olv-mono);
    font-size: 15px;
    font-weight: 500;
    height: 44px;
    line-height: 1.4;
    margin: 0;
    max-width: none;
    min-height: 44px;
    min-width: 0;
    order: 2;
    padding: 0;
    text-align: center;
    width: 100%;
}

.olv4-pdp-cart .quantity input.qty::-webkit-inner-spin-button,
.olv4-pdp-cart .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.olv4-pdp-cart .quantity .ct-increase {
    order: 3;
}

/* Styles the add-to-cart pill. Blocksy's button selector list hides
   `.woocommerce button.button` at (0,2,1), so the `button` type selector here is
   load-bearing: it ties at (0,2,1) and this file prints later (R6.6, CDP-verified
   2026-09-03 — do not shorten the selector). */
.olv4-pdp-cart button.single_add_to_cart_button {
    align-items: center;
    background: var(--olv-ink);
    border: 0;
    border-radius: var(--olv-radius-control);
    color: var(--olv-white);
    cursor: pointer;
    display: inline-flex;
    flex: 1 1 auto;
    font-family: var(--olv-ui);
    font-size: 15px;
    font-weight: 500;
    height: 52px;
    justify-content: center;
    line-height: 1.2;
    margin: 0;
    min-height: 52px;
    min-width: 0;
    padding: 12px 24px;
    position: relative;
    text-transform: none;
    transition:
        background var(--olv-motion-fast) var(--olv-ease-standard),
        transform 200ms var(--olv-ease-standard);
    white-space: nowrap;
    width: auto;
}

.olv4-pdp-cart button.single_add_to_cart_button:hover {
    background: var(--olv-ink);
    color: var(--olv-white);
    transform: scale(1.02);
}

.olv4-pdp-cart button.single_add_to_cart_button:disabled,
.olv4-pdp-cart button.single_add_to_cart_button.disabled {
    cursor: default;
    opacity: 0.6;
    transform: none;
}

.olv4-pdp-cart .stock {
    color: var(--olv-muted);
    font-size: var(--olv-type-small);
    line-height: 1.6;
    margin: 0;
}

.olv4-pdp-cart .stock.in-stock {
    display: none;
}

.olv4-pdp-microcopy {
    color: var(--olv-muted);
    font-family: var(--olv-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin: 0 0 24px;
    text-transform: uppercase;
}

/* D44: assisted channel link under the buy block; rendered only when a WhatsApp URL is configured */
.olv4-pdp-whatsapp {
    align-items: center;
    color: var(--olv-ink);
    display: inline-flex;
    font-size: 13px;
    font-weight: 500;
    gap: 8px;
    margin: -8px 0 24px;
    min-height: 44px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.olv4-pdp-whatsapp:hover {
    color: var(--olv-muted);
}

/* promo pill: the only offer surface on the PDP (D14) */
.olv4-pdp-promo {
    align-items: center;
    background: var(--olv-white);
    border: 1px solid var(--olv-line);
    border-radius: var(--olv-radius-control);
    color: var(--olv-ink);
    cursor: pointer;
    display: flex;
    gap: 14px;
    min-height: 52px;
    padding: 8px 20px 8px 18px;
    text-align: left;
    transition: border-color var(--olv-motion-fast) var(--olv-ease-standard);
    width: 100%;
}

.olv4-pdp-promo::before {
    background: var(--olv-accent);
    border-radius: 50%;
    content: "";
    flex: 0 0 auto;
    height: 8px;
    width: 8px;
}

.olv4-pdp-promo:hover,
.olv4-pdp-promo:focus-visible {
    border-color: var(--olv-ink);
}

.olv4-pdp-promo-copy {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

.olv4-pdp-promo small {
    color: var(--olv-muted);
    font-family: var(--olv-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.olv4-pdp-promo strong {
    font-size: var(--olv-type-small);
    font-weight: 500;
    line-height: 1.4;
}

.olv4-pdp-promo-glyph {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    transition: transform var(--olv-motion-fast) var(--olv-ease-standard);
}

.olv4-pdp-promo:hover .olv4-pdp-promo-glyph,
.olv4-pdp-promo:focus-visible .olv4-pdp-promo-glyph {
    transform: translateX(4px);
}

.olv4-pdp-scope {
    color: var(--olv-muted);
    font-size: var(--olv-type-small);
    line-height: 1.6;
    margin: 20px 0 0;
}

.olv4-pdp-scope strong {
    color: var(--olv-ink);
    font-weight: 500;
}

/* ------------------------------------------------ D48: solvent fact + Bac Water add-on */
.olv4-pdp-prep {
    color: var(--olv-muted-strong);
    font-size: var(--olv-type-small);
    line-height: 1.55;
    margin: -16px 0 24px;
    max-width: 520px;
}

.olv4-pdp-cart form.cart .olv-addon {
    align-items: flex-start;
    background: var(--olv-field-50);
    border: 1px solid var(--olv-line);
    border-radius: var(--olv-radius-input);
    cursor: pointer;
    display: flex;
    flex: 1 1 100%;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
}

.olv4-pdp-cart form.cart .olv-addon input {
    accent-color: var(--olv-ink);
    flex: 0 0 auto;
    height: 24px;
    margin: 1px 0 0;
    width: 24px;
}

.olv4-pdp-cart form.cart .olv-addon input:focus-visible {
    outline: 2px solid var(--olv-ink);
    outline-offset: 2px;
}

.olv4-pdp-cart form.cart .olv-addon input:disabled + .olv-addon-copy {
    opacity: 0.7;
}

.olv4-pdp-cart form.cart .olv-addon-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.olv4-pdp-cart form.cart .olv-addon strong {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

.olv4-pdp-cart form.cart .olv-addon small {
    color: var(--olv-muted-strong);
    font-size: 12px;
    line-height: 1.5;
}

.olv4-pdp-cart form.cart .olv-addon small .woocommerce-Price-amount {
    font-family: var(--olv-mono);
}

/* ------------------------------------------------ D46 conversion pass: buy-block facts */
.olv4-pdp-back {
    align-items: center;
    color: var(--olv-muted);
    display: inline-flex;
    font-size: var(--olv-type-small);
    font-weight: 500;
    gap: 6px;
    margin: 0 0 18px;
    min-height: 24px;
    text-decoration: none;
}

.olv4-pdp-back:hover,
.olv4-pdp-back:focus-visible {
    color: var(--olv-ink);
}

.olv4-pdp-delivery {
    align-items: start;
    color: var(--olv-ink);
    display: flex;
    font-size: var(--olv-type-small);
    gap: 10px;
    line-height: 1.55;
    margin: 0 0 14px;
}

.olv4-pdp-delivery i,
.olv4-pdp-assure li i {
    background: var(--olv-pdp-accent, var(--olv-ink));
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    height: 6px;
    margin-top: 7px;
    width: 6px;
}

.olv4-pdp-delivery strong {
    font-weight: 600;
}

.olv4-pdp-assure {
    border-bottom: 1px solid var(--olv-line);
    border-top: 1px solid var(--olv-line);
    display: grid;
    gap: 8px 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0 0 16px;
    padding: 14px 0;
}

.olv4-pdp-assure li {
    align-items: start;
    color: var(--olv-muted);
    display: flex;
    font-size: var(--olv-type-small);
    gap: 10px;
    line-height: 1.5;
}

.olv4-pdp-assure li i {
    background: var(--olv-ink);
    height: 4px;
    margin-top: 8px;
    width: 4px;
}

/* documentation standard: three numbered facts, no badges (D42, guardrails) */
.olv4-pdp-standard {
    background: var(--olv-bg);
    border-top: 1px solid var(--olv-line);
    padding: var(--olv-section-pad) 0;
}

.olv4-pdp-standard-grid {
    counter-reset: none;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.olv4-pdp-standard-grid li {
    background: var(--olv-white);
    border: 1px solid var(--olv-line);
    border-radius: var(--olv-radius-card);
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 24px 22px 26px;
}

.olv4-pdp-standard-grid span {
    color: var(--olv-muted);
    font-family: var(--olv-mono);
    font-size: var(--olv-type-eyebrow);
    letter-spacing: 0.1em;
}

.olv4-pdp-standard-grid h3 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.olv4-pdp-standard-grid p {
    color: var(--olv-muted);
    font-size: var(--olv-type-body);
    line-height: 1.6;
    margin: 0;
}

.olv4-pdp-standard-grid p strong {
    color: var(--olv-ink);
    font-weight: 500;
}

/* complementary lab item: one quiet card, link only (R5.3 keeps a single add-to-cart on the page) */
.olv4-pdp-complement {
    background: var(--olv-white);
    padding: 0 0 var(--olv-section-pad);
}

.olv4-pdp-complement-card {
    align-items: center;
    background: var(--olv-field-50);
    border: 1px solid var(--olv-line);
    border-radius: var(--olv-radius-card);
    color: var(--olv-ink);
    display: grid;
    gap: 24px;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    padding: 16px 24px 16px 16px;
    text-decoration: none;
    transition: border-color var(--olv-motion-fast) var(--olv-ease-standard);
}

.olv4-pdp-complement-card:hover,
.olv4-pdp-complement-card:focus-visible {
    border-color: var(--olv-ink);
}

.olv4-pdp-complement-card img {
    aspect-ratio: 1 / 1;
    background: var(--olv-white);
    border-radius: 12px;
    height: auto;
    object-fit: contain;
    width: 96px;
}

.olv4-pdp-complement-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.olv4-pdp-complement-copy strong {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.olv4-pdp-complement-meta {
    color: var(--olv-muted);
    font-size: var(--olv-type-small);
}

.olv4-pdp-complement-cta {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

/* -------------------------------------------------------------- story band (§5.5) */







/* ------------------------------------------------------------------ specs grid */
.olv4-pdp-specs {
    background: var(--olv-white);
    padding: var(--olv-section-pad) 0;
}

.olv4-pdp-spec-grid {
    background: var(--olv-line);
    border: 1px solid var(--olv-line);
    border-radius: var(--olv-radius-card);
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    overflow: hidden;
}

.olv4-pdp-spec-grid > div {
    align-content: space-between;
    background: var(--olv-white);
    display: grid;
    gap: 24px;
    min-height: 140px;
    min-width: 0;
    padding: 24px 20px;
}

.olv4-pdp-spec-grid dt {
    color: var(--olv-muted);
    font-family: var(--olv-mono);
    font-size: var(--olv-type-eyebrow);
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
}

.olv4-pdp-spec-grid dd {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------- FAQ accordion (§6.3 #6) */
.olv4-pdp-faq {
    background: var(--olv-soft);
    padding: var(--olv-section-pad) 0;
}

.olv4-pdp-faq-grid {
    align-items: start;
    display: grid;
    gap: 64px;
    grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
}

.olv4-pdp-accordion {
    border-top: 1px solid var(--olv-line);
}

.olv4-pdp-accordion details {
    border-bottom: 1px solid var(--olv-line);
}

.olv4-pdp-accordion summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 17px;
    font-weight: 500;
    gap: 24px;
    justify-content: space-between;
    line-height: 1.4;
    list-style: none;
    min-height: 64px;
    padding: 20px 0;
}

.olv4-pdp-accordion summary::-webkit-details-marker {
    display: none;
}

.olv4-pdp-faq-marker {
    flex: 0 0 auto;
    height: 16px;
    position: relative;
    width: 16px;
}

.olv4-pdp-faq-marker::before,
.olv4-pdp-faq-marker::after {
    background: var(--olv-ink);
    content: "";
    left: 0;
    position: absolute;
    top: 50%;
    height: 1px;
    transition: transform var(--olv-motion-state) var(--olv-ease-standard);
    width: 100%;
}

.olv4-pdp-faq-marker::after {
    transform: rotate(90deg);
}

.olv4-pdp-accordion details[open] .olv4-pdp-faq-marker::after {
    transform: rotate(180deg);
}

.olv4-pdp-faq-body {
    color: var(--olv-muted-strong);
    font-size: var(--olv-type-body);
    line-height: 1.6;
    margin: 0;
    max-width: 640px;
    padding: 0 40px 24px 0;
}

.olv4-pdp-accordion details[open] .olv4-pdp-faq-body {
    animation: olv4-pdp-faq-in var(--olv-motion-state) var(--olv-ease-enter) both;
}

@keyframes olv4-pdp-faq-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -------------------------------------------- related rail (shared card partial, D23) */
.olv4-pdp-related {
    background: var(--olv-white);
    padding: var(--olv-section-pad) 0;
}

.olv4-pdp-related-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, minmax(0, 300px)); /* D39: one row of four */
}

.olv4-pdp-related .olv4-card {
    background: var(--olv-white);
    border-radius: var(--olv-radius-card);
    min-width: 0;
    overflow: hidden;
    position: relative;
    transition: box-shadow 250ms var(--olv-ease-standard);
}

.olv4-pdp-related .olv4-card:hover {
    box-shadow: var(--olv-card-shadow);
    transform: none;
}

.olv4-pdp-related .olv4-card-media {
    aspect-ratio: 1 / 1;
    background: var(--olv-field-50);
    border-radius: var(--olv-radius-card);
    display: block;
    overflow: hidden;
    padding: 32px;
}

.olv4-pdp-related .olv4-card-media img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.olv4-pdp-related .olv4-card-body {
    padding: 20px 0 0;
}

.olv4-pdp-related .olv4-card-eyebrow {
    color: var(--olv-card-accent-text, var(--olv-muted-strong));
    font-family: var(--olv-mono);
    font-size: var(--olv-type-eyebrow);
    font-weight: 400;
    letter-spacing: 0.09em;
    line-height: 1.4;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.olv4-pdp-related .olv4-card-eyebrow::before {
    background: var(--olv-card-accent, var(--olv-ink));
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 4px;
    margin-right: 8px;
    vertical-align: middle;
    width: 4px;
}

.olv4-pdp-related .olv4-card-body h3 {
    font-size: var(--olv-type-card-title);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 8px;
}

.olv4-pdp-related .olv4-card-body h3 a {
    color: var(--olv-ink);
    text-decoration: none;
}

.olv4-pdp-related .olv4-card-desc {
    color: var(--olv-muted);
    font-size: var(--olv-type-small);
    line-height: 1.6;
    margin: 0 0 8px;
}

.olv4-pdp-related .olv4-card-availability {
    align-items: center;
    color: var(--olv-ink);
    display: flex;
    font-size: var(--olv-type-small);
    gap: 8px;
    margin: 0 0 16px;
}

.olv4-pdp-related .olv4-card-availability i {
    background: #299160;
    border-radius: 50%;
    display: inline-block;
    height: 6px;
    width: 6px;
}

.olv4-pdp-related .olv4-card-availability.is-agotado i {
    background: var(--olv-danger);
}

.olv4-pdp-related .olv4-card-availability.is-reservado i {
    background: var(--olv-muted);
}

.olv4-pdp-related .olv4-card-footer {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.olv4-pdp-related .olv4-card-price {
    font-family: var(--olv-mono);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

.olv4-pdp-related .olv4-card-price small {
    color: var(--olv-muted);
    font-size: var(--olv-type-micro); /* R6.2: unit suffix, not an uppercase eyebrow, so the 10 px exemption does not apply */
    margin-left: 6px;
}

.olv4-pdp-related .olv4-card-price del {
    color: var(--olv-muted);
    margin-right: 6px;
}

.olv4-pdp-related .olv4-card-price ins {
    text-decoration: none;
}

.olv4-pdp-related .olv4-card-cta {
    align-items: center;
    background: var(--olv-ink);
    border-radius: var(--olv-radius-control);
    color: var(--olv-white);
    display: inline-flex;
    font-size: 13px;
    font-weight: 500;
    gap: 6px;
    justify-content: center;
    min-height: 44px; /* R7.3 target floor */
    padding: 10px 18px;
    text-decoration: none;
    transition: transform 200ms var(--olv-ease-standard);
    white-space: nowrap;
}

.olv4-pdp-related .olv4-card-cta:hover {
    color: var(--olv-white);
    transform: scale(1.02);
}

.olv4-pdp-related .olv4-rail-meta {
    display: none;
}

/* mobile sticky bar: hidden above 760 px (§5.3) */
.olv4-pdp .olv-mobile-buybar {
    display: none;
}

/* reveals (§6.3 #11): lower sections only; price, stock and controls are never hidden */
.js .olv4-pdp [data-olv-reveal] {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity var(--olv-motion-section) var(--olv-ease-enter),
        transform var(--olv-motion-section) var(--olv-ease-enter);
}

.js .olv4-pdp [data-olv-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------------------------------------------ tablet 761–999 (D25) */
@media (max-width: 999px) {
    .olv4-pdp-top {
        gap: 32px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding-top: 24px;
    }

    .olv4-pdp-summary {
        max-width: none;
    }


    .olv4-pdp-spec-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .olv4-pdp-faq-grid {
        gap: 40px;
        grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
    }

    .olv4-pdp-related-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------ mobile ≤ 760 */
@media (max-width: 760px) {
    .olv4-pdp-top {
        gap: 24px;
        grid-template-columns: 1fr;
        padding-top: 16px;
    }

    .olv4-pdp-gallery {
        position: static;
    }

    .olv4-pdp-summary {
        padding-top: 0;
    }

    .olv4-pdp-summary h1 {
        margin-bottom: 16px;
    }

    .olv4-pdp-head {
        margin-bottom: 28px;
    }



    .olv4-pdp-spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .olv4-pdp-spec-grid > div {
        min-height: 120px;
        padding: 20px 16px;
    }

    .olv4-pdp-faq-grid {
        gap: 28px;
        grid-template-columns: 1fr;
    }

    .olv4-pdp-accordion summary {
        font-size: 15px;
        min-height: 56px;
        padding: 16px 0;
    }

    .olv4-pdp-faq-body {
        padding-right: 0;
    }

    /* related rail: horizontal snap rail with boundary-reporting controls (§5.4) */
    .olv4-pdp-related-grid {
        grid-auto-columns: minmax(280px, 82%);
        grid-auto-flow: column;
        grid-template-columns: none;
        margin-inline: calc(var(--olv-edge) * -1);
        overflow-x: auto;
        padding: 0 var(--olv-edge) 12px;
        scroll-padding-inline: var(--olv-edge);
        scroll-snap-type: x mandatory;
        scrollbar-color: var(--olv-muted) transparent;
        scrollbar-width: none;
    }

    .olv4-pdp-related-grid::-webkit-scrollbar {
        display: none;
    }

    .olv4-pdp-related .olv4-card {
        scroll-snap-align: start;
    }

    .olv4-pdp-related .olv4-rail-meta {
        align-items: center;
        color: var(--olv-muted);
        display: flex;
        font-family: var(--olv-mono);
        font-size: var(--olv-type-eyebrow);
        gap: 12px;
        justify-content: space-between;
        letter-spacing: 0.05em;
        margin-top: 12px;
        text-transform: uppercase;
    }

    .olv4-pdp-related .olv4-rail-controls {
        display: flex;
        gap: 8px;
    }

    .olv4-pdp-related .olv4-rail-controls button {
        align-items: center;
        background: var(--olv-white);
        border: 1px solid var(--olv-line);
        border-radius: 50%;
        color: var(--olv-ink);
        cursor: pointer;
        display: inline-flex;
        font-size: 16px;
        height: 44px;
        justify-content: center;
        line-height: 1;
        padding: 0;
        width: 44px;
    }

    .olv4-pdp-related .olv4-rail-controls button:disabled {
        color: var(--olv-line);
        cursor: default;
    }

    /* sticky bar (§5.3, §6.3 #16): full-width 69 px white, 180 ms, safe-area padding */
    .olv4-pdp .olv-mobile-buybar {
        align-items: center;
        background: var(--olv-white);
        border-top: 1px solid var(--olv-line);
        bottom: 0;
        color: var(--olv-ink);
        display: flex;
        gap: 16px;
        left: 0;
        min-height: 69px;
        padding: 12px var(--olv-edge) calc(12px + env(safe-area-inset-bottom));
        pointer-events: none;
        position: fixed;
        right: 0;
        transform: translateY(100%);
        transition: transform var(--olv-motion-fast) var(--olv-ease-standard);
        z-index: 8800;
    }

    .olv4-pdp .olv-mobile-buybar.is-active {
        pointer-events: auto;
        transform: translateY(0);
    }

    body.single-product.olv-buybar-active {
        padding-bottom: calc(69px + env(safe-area-inset-bottom));
    }

    body.single-product.olv-buybar-active .olv-concierge {
        bottom: calc(89px + env(safe-area-inset-bottom));
    }

    .olv-mobile-buybar-copy {
        display: grid;
        flex: 1 1 auto;
        gap: 2px;
        min-width: 0;
    }

    .olv-mobile-buybar-name {
        font-size: var(--olv-type-small);
        font-weight: 500;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .olv-mobile-buybar-price {
        font-family: var(--olv-mono);
        font-size: 13px;
        font-weight: 500;
        line-height: 1.4;
    }

    .olv-mobile-buybar-price ins {
        text-decoration: none;
    }

    .olv-mobile-buybar-price del {
        color: var(--olv-muted);
        font-weight: 400;
        margin-right: 6px;
    }

    .olv-mobile-buybar-price em {
        color: var(--olv-muted);
        font-size: 11px;
        font-style: normal;
        font-weight: 400;
        margin-left: 4px;
    }

    .olv4-pdp .olv-mobile-buybar button {
        background: var(--olv-ink);
        border: 0;
        border-radius: var(--olv-radius-control);
        color: var(--olv-white);
        cursor: pointer;
        flex: 0 0 98px;
        font-family: var(--olv-ui);
        font-size: 14px;
        font-weight: 500;
        height: 44px;
        line-height: 1.2;
        margin-left: auto;
        padding: 0;
        width: 98px;
    }
}

@media (max-width: 430px) {
    .olv4-pdp-spec-grid {
        grid-template-columns: 1fr;
    }

    .olv4-pdp-spec-grid > div {
        min-height: 0;
    }

    .olv4-pdp-cart button.single_add_to_cart_button {
        padding-inline: 16px;
    }
}

/* ----------------------------------------------------------- reduced motion (rule 8) */
/* Motion kill-switch: the preview class out-specifies this file's reveal primers and
   hover transforms; the OS media-query mirror repeats the same selectors later in the
   file, so source order decides (R6.6). */
.js body.olv-reduced-motion-preview .olv4-pdp [data-olv-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}

body.olv-reduced-motion-preview .olv4-pdp-stage > img,
body.olv-reduced-motion-preview .olv4-pdp-cart button.single_add_to_cart_button,
body.olv-reduced-motion-preview .olv4-pdp-promo,
body.olv-reduced-motion-preview .olv4-pdp-promo-glyph,
body.olv-reduced-motion-preview .olv4-pdp-faq-marker::before,
body.olv-reduced-motion-preview .olv4-pdp-faq-marker::after,
body.olv-reduced-motion-preview .olv4-pdp-related .olv4-card,
body.olv-reduced-motion-preview .olv4-pdp-related .olv4-card-cta,
body.olv-reduced-motion-preview .olv4-pdp .olv-mobile-buybar {
    transition: none;
}

body.olv-reduced-motion-preview .olv4-pdp-accordion details[open] .olv4-pdp-faq-body {
    animation: none;
}

body.olv-reduced-motion-preview .olv4-pdp-cart button.single_add_to_cart_button:hover,
body.olv-reduced-motion-preview .olv4-pdp-related .olv4-card-cta:hover,
body.olv-reduced-motion-preview .olv4-pdp-promo:hover .olv4-pdp-promo-glyph {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js .olv4-pdp [data-olv-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .olv4-pdp-stage > img,
    .olv4-pdp-cart button.single_add_to_cart_button,
    .olv4-pdp-promo,
    .olv4-pdp-promo-glyph,
    .olv4-pdp-faq-marker::before,
    .olv4-pdp-faq-marker::after,
    .olv4-pdp-related .olv4-card,
    .olv4-pdp-related .olv4-card-cta,
    .olv4-pdp .olv-mobile-buybar {
        transition: none;
    }

    .olv4-pdp-accordion details[open] .olv4-pdp-faq-body {
        animation: none;
    }

    .olv4-pdp-cart button.single_add_to_cart_button:hover,
    .olv4-pdp-related .olv4-card-cta:hover,
    .olv4-pdp-promo:hover .olv4-pdp-promo-glyph {
        transform: none;
    }
}

/* D46 conversion pass, phones */
@media (max-width: 760px) {
    .olv4-pdp-assure {
        grid-template-columns: 1fr;
    }

    .olv4-pdp-standard-grid {
        grid-template-columns: 1fr;
    }

    .olv4-pdp-complement-card {
        gap: 14px;
        grid-template-columns: 72px minmax(0, 1fr);
        padding: 14px;
    }

    .olv4-pdp-complement-card img {
        width: 72px;
    }

    .olv4-pdp-complement-cta {
        grid-column: 2;
    }
}