/**
 * Dini Petty Search - Single Product Page Styles
 *
 * Scoped under .dinipetty-product-container to beat Marcell theme specificity.
 *
 * @package DiniPettySearch
 * @version 1.4.5
 */

/* ==========================================================================
   Variables (same palette as search.css)
   ========================================================================== */

.dinipetty-product-container {
    --dp-gold: #D0AB6A;
    --dp-gold-dark: #B8944F;
    --dp-gold-light: rgba(208, 171, 106, 0.12);
    --dp-text: #2C2C2C;
    --dp-text-muted: #777;
    --dp-text-light: #999;
    --dp-border: #E8E8E8;
    --dp-bg: #FAFAFA;
    --dp-card-bg: #FFFFFF;
    --dp-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --dp-radius: 4px;
    --dp-radius-sm: 3px;
    --dp-font: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    --dp-cart-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='-2 -2 28 28' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Section Titles (shared)
   ========================================================================== */

.dinipetty-product-container .dinipetty-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--dp-text);
    margin: 0 0 14px 0;
    padding: 0;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

/* ==========================================================================
   Guest Names
   ========================================================================== */

.dinipetty-product-container .dinipetty-guest-pill {
    display: inline-block;
    padding: 5px 12px;
    background: var(--dp-gold-light);
    border: 1px solid rgba(208, 171, 106, 0.2);
    border-radius: 999px;
    font-size: 12px;
    font-family: var(--dp-font);
    color: var(--dp-gold-dark);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
}

.dinipetty-product-container a.dinipetty-guest-pill:hover,
.dinipetty-product-container a.dinipetty-guest-pill:focus {
    background: rgba(208, 171, 106, 0.22);
    color: var(--dp-gold-dark);
}

/* Hide duplicate inner heading in Additional Information tab */
.dinipetty-product-container #tab-additional_information > h2,
.dinipetty-product-container .woocommerce-Tabs-panel--additional_information > h2 {
    display: none !important;
}

/* Archive Reference tab link color */
.dinipetty-product-container #tab-dinipetty_archive_reference a,
.dinipetty-product-container .woocommerce-Tabs-panel--dinipetty_archive_reference a {
    color: var(--dp-text) !important;
    font-weight: 700;
    text-decoration: none;
}

.dinipetty-product-container #tab-dinipetty_archive_reference a:hover,
.dinipetty-product-container .woocommerce-Tabs-panel--dinipetty_archive_reference a:hover {
    color: var(--dp-gold-dark) !important;
    text-decoration: underline;
}

/* ==========================================================================
   Add to Quote Button (WooCommerce native single_add_to_cart_button)
   ========================================================================== */

/* Cart form wrapper — consistent spacing */
body.dinipetty-archive-product form.cart,
body.dinipetty-archive-product .summary form.cart,
.dinipetty-product-container .cart {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 20px 0 8px;
}

/* Hide WC quantity input + any theme-injected quantity stepper for archive products */
.dinipetty-product-container .quantity,
.dinipetty-product-container .qty-btn,
.dinipetty-product-container .wc-quantity,
.dinipetty-product-container input.qty {
    display: none !important;
}

/* Suppress PayPal / express checkout buttons on archive product pages */
body.dinipetty-archive-product [id^="ppc-button"],
body.dinipetty-archive-product [id^="ppcp"],
body.dinipetty-archive-product [id*="paypal-button"],
body.dinipetty-archive-product .ppcp-button-apm,
body.dinipetty-archive-product .ppc-button-wrapper,
body.dinipetty-archive-product .woocommerce-PaymentBox-paypal-placeholder {
    display: none !important;
}

/* Use the theme's native add-to-cart button style; only ensure it is rendered. */
body.dinipetty-archive-product .single_add_to_cart_button,
body.dinipetty-archive-product button.single_add_to_cart_button {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   YouTube Section
   ========================================================================== */

.dinipetty-product-container .dinipetty-youtube-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--dp-radius);
    overflow: hidden;
    border: 1px solid var(--dp-border);
    background: var(--dp-card-bg);
    box-shadow: var(--dp-card-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}

.dinipetty-product-container .dinipetty-youtube-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
}

/* Kill Marcell link pseudo-elements */
.dinipetty-product-container .dinipetty-youtube-card::before,
.dinipetty-product-container .dinipetty-youtube-card::after {
    display: none !important;
    content: none !important;
}

.dinipetty-product-container .dinipetty-youtube-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s;
}

.dinipetty-product-container .dinipetty-youtube-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.85;
    transition: opacity 0.2s;
    pointer-events: none;
}

.dinipetty-product-container .dinipetty-youtube-card:hover .dinipetty-youtube-play {
    opacity: 1;
}

@media (max-width: 768px) {
}

/* ==========================================================================
   Responsive — Small Mobile (480px)
   ========================================================================== */

@media (max-width: 480px) {
    .dinipetty-product-container .dinipetty-youtube-card:hover {
        transform: none;
    }

    .dinipetty-product-container .single_add_to_cart_button {
        width: 100%;
        text-align: center;
    }

    .dinipetty-product-container .dinipetty-guest-pill {
        font-size: 12px;
        padding: 5px 12px;
    }
}

/* ==========================================================================
   YouTube Cards
   ========================================================================== */

/* No top margin: the video rail and the description are siblings in the same
   grid row, so anything here drops the video below the "About this episode"
   heading instead of starting level with it. */
.dinipetty-product-container .dinipetty-youtube-section {
    margin: 0 0 20px;
}

.dinipetty-product-container .dinipetty-youtube-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Hero + list. The first linked video gets a full-width 16:9 image with the
   text beneath; any others keep the compact thumb-left row.
   Purely positional, so it needs no change in the renderer: an episode with a
   single video — which is most of the ~80 that have one — gets the hero
   treatment automatically, while DPEP-1399's six stay a readable stack instead
   of six full-width cards running down the page. */
.dinipetty-product-container .dinipetty-youtube-card:first-child {
    flex-direction: column;
}

.dinipetty-product-container .dinipetty-youtube-card:first-child .dinipetty-youtube-card-thumb {
    width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 9;
}

.dinipetty-product-container .dinipetty-youtube-card:first-child .dinipetty-youtube-card-title {
    font-size: 21px;
    line-height: 1.25;
}

.dinipetty-product-container .dinipetty-youtube-card:first-child .dinipetty-youtube-card-body {
    padding: 16px 18px 18px;
}

.dinipetty-product-container .dinipetty-youtube-card {
    display: flex;
    align-items: stretch;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, border-color 0.2s;
    background: #fff;
}

.dinipetty-product-container .dinipetty-youtube-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    border-color: #ccc;
}

.dinipetty-product-container .dinipetty-youtube-card-thumb {
    position: relative;
    width: 200px;
    min-width: 200px;
    overflow: hidden;
    background: #111;
    flex-shrink: 0;
}

.dinipetty-product-container .dinipetty-youtube-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.88;
    transition: opacity 0.2s;
}

.dinipetty-product-container .dinipetty-youtube-card:hover .dinipetty-youtube-card-thumb img {
    opacity: 0.7;
}

.dinipetty-product-container .dinipetty-youtube-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}

.dinipetty-product-container .dinipetty-youtube-card-body {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.dinipetty-product-container .dinipetty-youtube-card-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #cc0000;
    margin: 0;
}

.dinipetty-product-container .dinipetty-youtube-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin: 0;
    line-height: 1.35;
}

.dinipetty-product-container .dinipetty-youtube-card-excerpt {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.dinipetty-product-container .dinipetty-youtube-card-cta {
    font-size: 12px;
    font-weight: 600;
    color: #111;
    margin-top: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 600px) {
    .dinipetty-product-container .dinipetty-youtube-card {
        flex-direction: column;
    }

    .dinipetty-product-container .dinipetty-youtube-card-thumb {
        width: 100%;
        min-width: 0;
        height: 180px;
    }
}

/* ==========================================================================
   Stock WooCommerce furniture — belt to the PHP braces
   --------------------------------------------------------------------------
   setup_archive_product() removes these at the action level, which is the real
   fix. These rules exist because Marcell is an Elementor theme that may call
   woocommerce_show_product_images() / woocommerce_output_product_data_tabs()
   directly from a template override rather than through the action, in which
   case the remove_action() sails past and the page renders both the stock
   furniture and our own. Hidden is a survivable failure; doubled is not.
   ========================================================================== */

body.dinipetty-archive-product .woocommerce-product-gallery,
body.dinipetty-archive-product .woocommerce-product-gallery__wrapper,
body.dinipetty-archive-product .woocommerce-product-gallery__trigger,
body.dinipetty-archive-product .flex-control-thumbs,
body.dinipetty-archive-product .onsale,
body.dinipetty-archive-product .woocommerce-tabs,
body.dinipetty-archive-product .up-sells,
body.dinipetty-archive-product .related.products,
body.dinipetty-archive-product .summary > .price,
body.dinipetty-archive-product .summary > .product_meta,
body.dinipetty-archive-product .woocommerce-product-details__short-description {
    display: none !important;
}

/* ==========================================================================
   Archive PDP layout (v1.8.0)
   --------------------------------------------------------------------------
   One layout for every episode. The title band spans full width; below it the
   media slot and the summary column sit side by side. The media slot is always
   filled — video card, featured image, or generated episode card — because an
   empty column collapses the grid.
   ========================================================================== */

/* --- Title band --------------------------------------------------------- */

/* The band exists only to carry the <h1>, which the theme hides — availability
   is a table row now. It must take no vertical space of its own, or it renders
   as a stray rule under the page banner. */
.dinipetty-product-container .dinipetty-title-band {
    grid-column: 1 / -1;
    padding: 0;
    margin: 0;
}

.dinipetty-product-container .dinipetty-title {
    margin: 0 0 12px;
    line-height: 1.15;
}

/* --- Availability pill -------------------------------------------------- */

.dinipetty-product-container .dinipetty-availability-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 6px 13px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--dp-border);
    color: var(--dp-text);
    font-family: var(--dp-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.dinipetty-product-container .dinipetty-availability-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Same greens and golds the search toolbar uses, so the badge a visitor
   filtered by and the badge on the page they land on are the same object. */
.dinipetty-product-container .dinipetty-availability-pill.is-available .dinipetty-availability-dot {
    background: #6FBF9A;
}

.dinipetty-product-container .dinipetty-availability-pill.is-request .dinipetty-availability-dot {
    background: var(--dp-gold);
}

.dinipetty-product-container .dinipetty-media {
    min-width: 0;
}

/* --- About -------------------------------------------------------------- */

.dinipetty-product-container .dinipetty-about {
    margin-bottom: 28px;
}

/* The lead section heading only — DETAILS and RELATED EPISODES stay at 18px,
   so the page reads as one primary block followed by two secondary ones. */
.dinipetty-product-container .dinipetty-about .dinipetty-section-title {
    font-size: 24px;
}

/* The description inherits the theme's Cormorant, which suits the Details
   values but makes several paragraphs of running copy harder to read. Set it
   in the UI sans instead; the serif stays on the table and the headings. */
.dinipetty-product-container .dinipetty-about-text,
.dinipetty-product-container .dinipetty-about-text p,
.dinipetty-product-container .dinipetty-about-text li,
.dinipetty-product-container .dinipetty-about-text strong {
    color: var(--dp-text) !important;
}

.dinipetty-product-container .dinipetty-about-text {
    font-family: var(--dp-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
}

.dinipetty-product-container .dinipetty-about-text p {
    margin: 0 0 12px;
}

.dinipetty-product-container .dinipetty-about-text li {
    font-family: var(--dp-font);
    font-size: 16px;
    line-height: 1.65;
}

.dinipetty-product-container .dinipetty-about-text p:last-child {
    margin-bottom: 0;
}

/* Clamped in CSS, never truncated in PHP or JS — the full text stays in the
   document for crawlers and for anyone browsing without styles. */
.dinipetty-product-container .dinipetty-about-text.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dinipetty-product-container .dinipetty-about-toggle {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    font-family: 'Cormorant', Georgia, serif;
    font-size: 19px;
    font-weight: 500;
    color: var(--dp-gold-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.dinipetty-product-container .dinipetty-about-toggle::before,
.dinipetty-product-container .dinipetty-about-toggle::after {
    display: none !important;
    content: none !important;
}

.dinipetty-product-container .dinipetty-about-toggle:focus-visible {
    outline: 2px solid var(--dp-gold);
    outline-offset: 3px;
}

/* --- Details ------------------------------------------------------------ */

.dinipetty-product-container .dinipetty-details {
    margin-top: 28px;
}

.dinipetty-product-container .dinipetty-details-list {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-top: 1px dotted rgba(0, 0, 0, 0.1);
}

/* Row treatment lifted from the theme's own shop_attributes table on the book
   product: a faint tint plus dotted rules. Hairlines on white left our version
   looking like an unstyled spec dump next to it. */
.dinipetty-product-container .dinipetty-detail:has(.dinipetty-pill-list) {
    align-items: start;
}

.dinipetty-product-container .dinipetty-detail {
    display: grid;
    grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
    gap: 16px;
    align-items: baseline;
    padding: 10px 12px;
    background: rgba(243, 245, 247, 0.4);
    border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
}

.dinipetty-product-container .dinipetty-detail dt {
    margin: 0;
    font-family: 'AvantGarde', var(--dp-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #212121;
}

.dinipetty-product-container .dinipetty-detail dd {
    margin: 0;
    font-family: 'Cormorant', Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.35;
    color: #1D1D1D;
}

/* Pills sit inside a <dd> but keep their own sans type — in the serif value
   style the guest links would read as prose rather than as links. */
.dinipetty-product-container .dinipetty-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.dinipetty-product-container .dinipetty-detail dd .dinipetty-guest-pill,
.dinipetty-product-container .dinipetty-detail dd .dinipetty-topic-pill {
    font-family: var(--dp-font);
    line-height: 1.5;
}

.dinipetty-product-container .dinipetty-topic-pill {
    display: inline-block;
    padding: 4px 13px;
    background: #fff;
    border: 1px solid var(--dp-border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dp-text);
    white-space: nowrap;
}

/* --- Add to Quote ------------------------------------------------------- */

/* The label is always in the DOM; Marcell collapses it with
   `.woocommerce div.product form.cart .button { font-size: 0 !important }`,
   specificity (0,2,2). An override keyed on the body class alone is (0,2,1)
   and loses, which is why the button rendered as a bare icon. These selectors
   carry (0,4,4) so they win outright rather than by luck of source order. */
body.dinipetty-archive-product div.product form.cart button.single_add_to_cart_button,
body.dinipetty-archive-product div.product form.cart a.single_add_to_cart_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 4px 0 0 !important;
    padding: 15px 30px !important;
    border: 0 !important;
    border-radius: var(--dp-radius) !important;
    background: var(--dp-text) !important;
    color: #fff !important;
    font-family: var(--dp-font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    text-indent: 0 !important;
    text-transform: none !important;
    overflow: visible !important;
    white-space: nowrap;
    opacity: 1 !important;
    transition: background 0.15s ease;
}

body.dinipetty-archive-product div.product form.cart button.single_add_to_cart_button:hover,
body.dinipetty-archive-product div.product form.cart a.single_add_to_cart_button:hover {
    background: var(--dp-gold-dark) !important;
    color: #fff !important;
}

body.dinipetty-archive-product div.product form.cart button.single_add_to_cart_button:focus-visible {
    outline: 2px solid var(--dp-gold) !important;
    outline-offset: 3px;
}

/* Cart glyph, drawn as a mask so it takes the button's own colour. */
body.dinipetty-archive-product div.product form.cart button.single_add_to_cart_button::before,
body.dinipetty-archive-product div.product form.cart a.single_add_to_cart_button::before {
    content: "" !important;
    display: inline-block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
    background-color: transparent !important;
    background-image: linear-gradient( #fff, #fff ) !important;
    -webkit-mask: var(--dp-cart-icon) center / contain no-repeat;
    mask: var(--dp-cart-icon) center / contain no-repeat;
}

body.dinipetty-archive-product div.product form.cart button.single_add_to_cart_button::after,
body.dinipetty-archive-product div.product form.cart a.single_add_to_cart_button::after {
    content: none !important;
}

/* --- Related episodes --------------------------------------------------- */

.dinipetty-product-container .dinipetty-related {
    grid-column: 1 / -1;
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid var(--dp-border);
}

.dinipetty-product-container .dinipetty-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
    gap: 22px;
    margin-top: 14px;
}

.dinipetty-product-container .dinipetty-related-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-decoration: none;
    color: var(--dp-text);
}

/* Marcell decorates every anchor with pseudo-element underlines. */
.dinipetty-product-container .dinipetty-related-card::before,
.dinipetty-product-container .dinipetty-related-card::after {
    display: none !important;
    content: none !important;
}

.dinipetty-product-container .dinipetty-related-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--dp-bg);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
}

.dinipetty-product-container .dinipetty-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dinipetty-product-container .dinipetty-related-number {
    font-size: 24px;
    font-weight: 300;
    color: var(--dp-text-light);
    font-variant-numeric: tabular-nums;
}

.dinipetty-product-container .dinipetty-related-name {
    font-family: var(--dp-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

.dinipetty-product-container .dinipetty-related-card:hover .dinipetty-related-name {
    color: var(--dp-gold-dark);
}

.dinipetty-product-container .dinipetty-related-meta {
    font-family: var(--dp-font);
    font-size: 12px;
    color: var(--dp-text-light);
}

/* --- Two-column body ---------------------------------------------------- */

@media (min-width: 861px) {
    /* Description left, video rail right. Source order puts the media before
       .summary because it hangs off woocommerce_before_single_product_summary,
       so the visual order is set with `order` rather than by moving markup. */
    .dinipetty-product-container.product {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        column-gap: 38px;
        align-items: start;
    }

    .dinipetty-product-container.dinipetty-has-video.product {
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    }

    .dinipetty-product-container .dinipetty-title-band { order: 0; }
    .dinipetty-product-container.product > .summary   { order: 1; }
    .dinipetty-product-container .dinipetty-media     { order: 2; }
    .dinipetty-product-container .dinipetty-related   { order: 3; }

    .dinipetty-product-container.product > .summary {
        width: auto !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0;
    }
}

@media (max-width: 860px) {
    .dinipetty-product-container .dinipetty-media {
        margin-bottom: 26px;
    }

    .dinipetty-product-container .dinipetty-availability-pill {
        margin-left: 0;
    }
}

/* ==========================================================================
   Page spacing — keep last
   --------------------------------------------------------------------------
   The theme's content-wrapper padding is viewport-dependent (116px at desktop)
   and, with the title band collapsed to nothing, left a 133px void under the
   page banner. Pinned to a value that reads as deliberate at any width.

   This lives at the end of the file on purpose: it was twice deleted by edits
   that replaced a block by splicing between two selectors, because it happened
   to sit between them.
   ========================================================================== */

html body.dinipetty-archive-product .page_content_wrap {
    padding-top: 48px !important;
}