/**
 * Shared PDP (product detail page) styles.
 *
 * Reusable "buy box" typography + controls for the ecommerce-style product
 * templates (pickups, vans, coverage product, …). Opt in by adding the
 * `pdp-buybox` class to the right-hand column container.
 *
 * Type system matches the cart/checkout: trade-gothic-next, weight 500 for
 * names/labels and 600 for prices — no uppercase.
 */

:root {
    /* Body / UI font — matches cart & checkout */
    /* Display / heading font — matches the cart & checkout page headings */
    --pdp-ink: #111;
    --pdp-muted: #707072;
    --pdp-line: #e0e0e0;
    --pdp-line-hover: #a0a0a0;
    --pdp-line-active: #111;
    --pdp-accent: #febc16; /* brand yellow — primary button (matches cart Checkout) */
    --pdp-secondary-bg: #3f3f3f; /* dark grey — secondary button */
    --pdp-secondary-bg-hover: #2a2a2a;

    --pdp-size-title: 24px;
    --pdp-size-subtitle: 17px;
    --pdp-size-price: 18px;
    --pdp-size-label: 16px;
    --pdp-size-option: 15px;
    --pdp-size-caption: 13px;
}

/* --- Buy box container --------------------------------------------------- */
.pdp-buybox {
    font-family: var(--exg-body);
    text-align: left;
}

/* Product row: flex so the buy box can stick beside the tall gallery/coverage
   column. Override the theme's overflow:hidden which would clip it and break
   sticky. */
@media (min-width: 951px) {
    .pdp-row {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        overflow: visible !important;
    }
    .pdp-buybox {
        padding-left: 44px;
        position: sticky;
        top: 20px;
        align-self: flex-start;
    }
}

/* The legacy options wrapper is capped at 260px; let it fill the column so
   options and buttons align full-width. */
.pdp-buybox .product__select-color-guard {
    max-width: none !important;
    width: 100%;
}

/* --- Heading (title + subtitle) ----------------------------------------- */
.pdp-buybox .product__heading {
    margin-bottom: 18px;
}

.pdp-buybox .product__title {
    font-family: inherit;
    font-size: var(--pdp-size-title);
    line-height: 1.05;
    font-weight: var(--exg-weight-display);
    text-align: left;
    margin: 0 0 4px;
    letter-spacing: -1px;
    text-transform: none !important;
}

.pdp-buybox .product__subtitle {
    font-family: var(--exg-body);
    font-size: 15px; /* body tier — was 17px, rivaled the section headings */
    font-weight: var(--exg-weight-regular);
    color: var(--pdp-muted);
    text-align: left;
    margin: 0;
}

/* --- Price -------------------------------------------------------------- */
.pdp-buybox .product__price,
.pdp-buybox .product__price span {
    font-family: var(--exg-body);
    font-size: var(--pdp-size-price);
    font-weight: var(--exg-weight-action) !important;
    color: var(--pdp-ink);
    text-align: left;
    margin: 0 0 20px;
}

/* "MSRP" tag after the price — smaller, muted grey (matches the subtitle). */
.pdp-buybox .product__price .product__price-msrp {
    font-size: 10px;
    font-weight: var(--exg-weight-regular) !important;
    color: var(--pdp-muted);
    letter-spacing: 0;
    margin-left: 6px;
}

.pdp-buybox .price-caption {
    font-family: var(--exg-body);
    font-size: var(--pdp-size-caption);
    font-weight: var(--exg-weight-regular);
    color: var(--pdp-muted);
    text-align: left;
    margin: 0 0 24px; /* consistent 24px section rhythm */
}

/* --- Options group (e.g. Coverages) ------------------------------------- */
.pdp-buybox .product__guard-category {
    font-family: var(--exg-body);
    font-size: 15px; /* heading tier — was 16/500, rivaled the price */
    font-weight: var(--exg-weight-semibold);
    color: var(--pdp-ink);
    text-align: left;
    text-transform: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    cursor: default;
}

/* Space under the coverages section, before the actions. */
.pdp-buybox .product__guard {
    margin-bottom: 24px; /* consistent 24px section rhythm */
}

.pdp-buybox .product__guard-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-width: none !important;
    width: 100%;
    background: none !important;
    padding: 0 !important;
    margin: 0;
}

.pdp-buybox .product__guard-item {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    max-width: none !important;
    min-height: 0;
    background: #fff;
    border: 1px solid var(--pdp-line) !important;
    border-radius: 8px;
    padding: 11px 16px; /* was 15/18 — boxes were airy for one SKU line */
    margin: 0;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.pdp-buybox .product__guard-item:hover {
    border-color: var(--pdp-line-hover) !important;
}

.pdp-buybox .product__guard-item.active {
    border: 1px solid var(--pdp-line-active) !important;
    box-shadow: none !important;
}

.pdp-buybox .product__guard-name {
    font-family: var(--exg-body);
    font-size: var(--pdp-size-option);
    font-weight: var(--exg-weight-strong) !important;
    color: var(--pdp-ink);
    line-height: 1.2;
}

/* --- Financing (Klarna/Affirm) -------------------------------------------
   Stripe Payment Method Messaging iframe mounted by exgPaylaterRender().
   Quiet, single block under the coverage selector — must not compete with
   the ATC button. Typography lives inside the Stripe iframe. */
.pdp-buybox .pdp-financing {
    text-align: left;
    margin: 0 0 4px;
    clear: both;
}
.pdp-buybox .pdp-financing iframe {
    min-height: 22px;
}

/* --- Actions (primary + secondary buttons) ------------------------------ */
/* Primary: matches the cart/checkout button (yellow, trade-gothic-next 700).
   !important is needed to beat the theme's compiled button rules. */
.pdp-buybox .product__button {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    margin: 18px 0 !important;
    padding: 15px 20px !important;
    font-family: var(--exg-body) !important;
    font-size: var(--pdp-size-label) !important;
    font-weight: var(--exg-weight-strong) !important;
    text-align: center;
    text-transform: none !important;
    text-decoration: none;
    color: #0a0a0a !important;
    background: var(--pdp-accent) !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.pdp-buybox .product__button:hover { opacity: 0.85; }

/* --- Aside rows (fleet callout + local install) --------------------------
   ONE shared pattern for both post-ATC asides: quiet, unboxed rows separated
   by hairlines. Heading tier 15/600, body 13 muted, small underlined CTA.
   Fleet CTA links to the (to-be-built) Pickup Fleet landing page — href is a
   placeholder "#" until that page exists. */
.pdp-buybox .fleet-callout,
.pdp-buybox .installation-note {
    margin: 0;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--pdp-line);
    text-align: left;
}
.pdp-buybox .fleet-callout {
    border-top: 1px solid var(--pdp-line);
}
.pdp-buybox .fleet-callout__heading,
.pdp-buybox .installation-note__q {
    margin: 0 0 4px;
    font-family: var(--exg-body);
    font-size: 15px;
    font-weight: var(--exg-weight-semibold);
    line-height: 1.4;
    color: var(--pdp-ink);
}
.pdp-buybox .fleet-callout__text,
.pdp-buybox .installation-note__text {
    margin: 0 0 6px;
    font-family: var(--exg-body);
    font-size: var(--pdp-size-caption);
    font-weight: var(--exg-weight-regular);
    line-height: 1.5;
    color: var(--pdp-muted);
}
.pdp-buybox .fleet-callout__cta {
    text-decoration: none !important; /* per Dan: no underline on the fleet CTA */
}
.pdp-buybox .fleet-callout__cta,
.pdp-buybox .installation-quote-cta {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--exg-body) !important;
    font-size: var(--pdp-size-caption) !important;
    font-weight: var(--exg-weight-semibold) !important;
    text-align: left;
    text-transform: none !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--pdp-ink) !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: color 0.15s ease;
}
.pdp-buybox .fleet-callout__cta:hover,
.pdp-buybox .installation-quote-cta:hover {
    color: var(--pdp-muted) !important;
    background: none !important;
}

/* --- Coverage detail (rendered under the gallery, swaps with selection) --- */
.pdp-cov {
    margin-top: 40px;
    font-family: var(--exg-body);
    color: var(--pdp-ink);
    text-align: left;
}
.pdp-cov[hidden] {
    display: none !important;
}
.pdp-cov__title {
    font-family: var(--exg-display);
    font-weight: var(--exg-weight-display);
    font-size: 28px;
    letter-spacing: -0.5px;
    line-height: 1.05;
    color: var(--pdp-ink);
    text-transform: none !important;
    margin: 0 0 12px;
}
.pdp-cov__sku {
    font-size: 14px;
    font-weight: var(--exg-weight-strong);
    margin: 0 0 18px;
}
.pdp-cov__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 0 0 18px;
}
.pdp-cov__badges img {
    height: 58px;
    width: auto;
    display: block;
}
.pdp-cov__categories {
    font-size: 14px;
    margin: 0 0 10px;
}
.pdp-cov__description {
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-line;
    margin: 0 0 22px;
}
.pdp-cov__specs {
    margin: 0 0 24px;
    border-top: 1px solid var(--pdp-line);
}
.pdp-cov__spec {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 11px 0;
    border-bottom: 1px solid var(--pdp-line);
}
.pdp-cov__spec dt {
    margin: 0;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: var(--exg-weight-strong);
    color: var(--pdp-ink);
}
.pdp-cov__spec dd {
    margin: 0;
    text-align: right;
    font-size: 14px;
    color: #555;
}

.pdp-cov__kb {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--pdp-muted);
    font-family: var(--exg-display);
    font-size: 13px;
    font-weight: var(--exg-weight-strong);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 2px solid var(--pdp-line);
    padding-bottom: 3px;
    margin: 0;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.pdp-cov__kb::after { content: "\2192"; font-size: 14px; line-height: 1; }
.pdp-cov__kb:hover { color: var(--pdp-ink); border-color: var(--pdp-ink); opacity: 1; }
.pdp-cov__model-title {
    font-size: 18px;
    font-weight: var(--exg-weight-strong);
    line-height: 1.25;
    margin: 8px 0 12px;
}
.pdp-cov__content {
    font-size: 15px;
    line-height: 1.55;
}
.pdp-cov__content img { max-width: 100%; height: auto; }

/* Truck-level description, moved into the left column under the coverage detail. */
.pdp-truck-desc {
    margin-top: 28px;
    padding-top: 0;
    font-family: var(--exg-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--pdp-ink);
    text-align: left;
}
.pdp-truck-desc img { max-width: 100%; height: auto; }
/* Loose product images dumped straight into the description are removed.
   (The #exguard photo-gallery widget lives in a div, so it is unaffected.) */
.pdp-truck-desc > p:has(> img) { display: none; }

/* --- Product videos (ACF `pdp_videos` repeater) ------------------------- */
.pdp-videos {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
/* Content-column placement: sits within the left content area. */
.pdp-videos--content {
    margin: 32px 0 0;
}
/* Full-width feature placement: its own band, centered to the grid. */
.pdp-videos--feature {
    margin: 48px auto;
    max-width: 1100px;
    padding: 0 20px;
    box-sizing: border-box;
}
.pdp-video__heading {
    margin: 0 0 12px;
    font-family: var(--exg-display);
    font-size: var(--pdp-size-title);
    font-weight: var(--exg-weight-display);
    line-height: 1.15;
    color: var(--pdp-ink);
    text-align: left;
}
/* Responsive 16:9 frame — normalizes the oEmbed iframe regardless of the
   width/height the provider returns. */
.pdp-video__frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
    overflow: hidden;
}
.pdp-video__frame iframe,
.pdp-video__frame video,
.pdp-video__frame embed,
.pdp-video__frame object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* --- Video slide gallery (Slick, 1 per view) ---------------------------- */
.pdp-videos--slider {
    position: relative;
    display: block;
    gap: 0;
}
/* Room below for the dots. */
.pdp-videos--slider {
    padding-bottom: 30px;
}
.pdp-videos--slider .slick-track {
    display: flex;
    align-items: stretch;
}
.pdp-videos--slider .slick-slide {
    height: auto;
}
/* Prev / next arrows — circular, overlaying the slide edges. */
.pdp-videos--slider .slick-prev,
.pdp-videos--slider .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0;
    cursor: pointer;
    transition: background 0.15s ease;
}
.pdp-videos--slider .slick-prev:hover,
.pdp-videos--slider .slick-next:hover {
    background: rgba(0, 0, 0, 0.8);
}
.pdp-videos--slider .slick-prev { left: 10px; }
.pdp-videos--slider .slick-next { right: 10px; }
.pdp-videos--slider .slick-prev:before,
.pdp-videos--slider .slick-next:before {
    display: inline-block;
    font-family: var(--exg-body);
    font-size: 22px;
    line-height: 1;
    color: #fff;
}
.pdp-videos--slider .slick-prev:before { content: '\2039'; }
.pdp-videos--slider .slick-next:before { content: '\203A'; }
/* Dots. */
.pdp-videos--slider .slick-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pdp-videos--slider .slick-dots li { width: auto; height: auto; margin: 0; }
.pdp-videos--slider .slick-dots li button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
}
.pdp-videos--slider .slick-dots li button:before { display: none; }
.pdp-videos--slider .slick-dots li.slick-active button { background: #000; }