/* ── Deen PPD: Product Page Design ─────────────────────────────────────────── */

/* ── Sale Badge ──────────────────────────────────────────────────────────────── */
.deen-ppd-badge {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    line-height: 1;
}

/* ── Trust Badges ────────────────────────────────────────────────────────────── */
.deen-ppd-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin: 20px 0 10px;
    padding: 16px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}
.deen-ppd-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #444;
    font-weight: 500;
}
.deen-ppd-trust-item .dashicons {
    color: #7c3aed;
    font-size: 17px;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/* ── Sticky Cart Bar ─────────────────────────────────────────────────────────── */
.deen-ppd-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 -3px 24px rgba(0, 0, 0, 0.10);
    z-index: 99999;
    transform: translateY(110%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 1px solid #ececec;
}
.deen-ppd-sticky-bar.deen-ppd-sticky-visible {
    transform: translateY(0);
}

.deen-ppd-sticky-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 24px;
}

.deen-ppd-sticky-img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #eee;
}

.deen-ppd-sticky-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}
.deen-ppd-sticky-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #111;
}
.deen-ppd-sticky-price {
    font-size: 14px;
    font-weight: 700;
    color: #7c3aed;
}

.deen-ppd-sticky-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #7c3aed !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}
.deen-ppd-sticky-btn:hover {
    background: #6d28d9 !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.deen-ppd-sticky-btn:active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 1 — Two-Column Product Layout (Left: Gallery · Right: Info)
   Active only when "Enable Custom Layout" is ON in Product Page Design settings
   (body.deen-ppd-layout is added via PHP when the toggle is enabled)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Full-width page: break Astra's container constraint ─────────────────────── */
body.deen-ppd-layout.single-product #content,
body.deen-ppd-layout.single-product #primary,
body.deen-ppd-layout.single-product .content-area,
body.deen-ppd-layout.single-product .ast-container > #primary {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

body.deen-ppd-layout.single-product .ast-container,
body.deen-ppd-layout.single-product #ast-container {
    max-width: 100% !important;

}

/* ── Hide Astra / theme breadcrumb on custom layout pages ───────────────────── */
body.deen-ppd-layout.single-product .ast-breadcrumbs-wrapper,
body.deen-ppd-layout.single-product .astra-breadcrumbs,
body.deen-ppd-layout.single-product .woocommerce-breadcrumb:not(.deen-ppd-breadcrumb-row *) {
    display: none !important;
}

/* ── Hide WooCommerce auto-injected elements not controlled by our layout ─────── */
body.deen-ppd-layout.single-product .woocommerce-product-details__short-description,
body.deen-ppd-layout.single-product .product_meta,
body.deen-ppd-layout.single-product .woocommerce-product-rating,
body.deen-ppd-layout.single-product .woocommerce-share {
    display: none !important;
}

/* ── Collapse WooCommerce notices wrapper so it doesn't add dead space ───────── */
body.deen-ppd-layout.single-product .woocommerce-notices-wrapper {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.deen-ppd-layout.single-product .woocommerce-notices-wrapper:empty {
    display: none !important;
}

/* ── Section 1: Two-column product area ─────────────────────────────────────── */
body.deen-ppd-layout.single-product div.product {
    display: grid !important;
    /* minmax(0, …), not a bare fr: a bare fr track's minimum size defaults to
       auto (its content's min-content), so a wide-enough child — the size
       swatches row, the add-to-cart button — forces the whole track past the
       container's own width instead of shrinking to fit it. minmax(0, …)
       caps that minimum at 0 so the track (and everything in it) actually
       respects the container, which is what was pushing product info off
       the right edge on narrower screens. */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
    gap: 0 52px !important;
    align-items: start !important;
    float: none !important;
    max-width: 1600px;
    margin: 0 auto !important;
    padding: 4px 60px 48px !important;
    box-sizing: border-box;
}

body.deen-ppd-layout.single-product .woocommerce-product-gallery {
    grid-column: 1 !important;
    grid-row: 1 !important;
    float: none !important;
    width: 100% !important;
    position: sticky !important;
    top: 88px;
    align-self: start;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    scrollbar-width: none;
    overflow-anchor: none;
}

body.deen-ppd-layout.single-product .woocommerce-product-gallery::-webkit-scrollbar { display: none; }

body.deen-ppd-layout.single-product .entry-summary {
    grid-column: 2 !important;
    grid-row: 1 !important;
    float: none !important;
    width: 100% !important;
    clear: none !important;
    padding: 0 0 64px 0 !important;
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
}

/* WC tabs sit inside div.product (if any) — full-span */
body.deen-ppd-layout.single-product .woocommerce-tabs {
    grid-column: 1 / -1 !important;
    float: none !important;
}

/* ── Sections 2+ — full-width blocks outside div.product ────────────────────── */
/* Same minimal treatment as the category grid's below-grid sections
   (.deen-cpd-section) — no boxed background/border, just spacing. The 20px
   left/right padding matches Astra's own .ast-container gutter, which the
   category grid keeps (it only clears max-width, not padding) even in
   Full Width Layout mode — these sections render outside that container,
   so it has to be set explicitly here to line up the same way. */
body.deen-ppd-layout.single-product .deen-ppd-section {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    margin: 40px 0 0;
    clear: both;
}

/* The whole heading treatment lives here now. Size, weight, style and spacing
   used to be six per-section settings each written into an inline style
   attribute; they were the same values in every section, so they are one rule
   instead. Alignment is still per section and stays inline — see
   deen_ppd_render_product_section().

   Scoped to the body class to outrank the theme's own h2 sizing, which is what
   the inline `!important` declarations were really there for. */
body.deen-ppd-layout.single-product .deen-ppd-section-heading {
    display: block;
    padding: 0;
    margin: 0 0 28px;
    font-size: 2em;
    font-weight: 800;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* WC ul.products grid inside our sections — edge-to-edge, same as the
   category grid's full-width layout (no inner max-width cap). */
body.deen-ppd-layout.single-product .deen-ppd-section ul.products {
    display: grid !important;
    gap: 24px 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    width: 100% !important;
}
body.deen-ppd-layout.single-product .deen-ppd-section ul.products.columns-2 { grid-template-columns: repeat(2, 1fr) !important; }
body.deen-ppd-layout.single-product .deen-ppd-section ul.products.columns-3 { grid-template-columns: repeat(3, 1fr) !important; }
body.deen-ppd-layout.single-product .deen-ppd-section ul.products.columns-4 { grid-template-columns: repeat(4, 1fr) !important; }
body.deen-ppd-layout.single-product .deen-ppd-section ul.products.columns-5 { grid-template-columns: repeat(5, 1fr) !important; }
body.deen-ppd-layout.single-product .deen-ppd-section ul.products.columns-6 { grid-template-columns: repeat(6, 1fr) !important; }

body.deen-ppd-layout.single-product .deen-ppd-section ul.products li.product {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* View All button — matches the category grid's below-grid sections. */
.deen-ppd-view-all-wrap { text-align: center; margin-top: 24px; }
.deen-ppd-view-all-btn {
    display: inline-block;
    padding: 11px 32px;
    border: 1.5px solid currentColor;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    transition: background .15s, color .15s;
}
.deen-ppd-view-all-btn:hover { background: #111827; border-color: #111827; color: #fff; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    body.deen-ppd-layout.single-product div.product {
        padding: 4px 32px 32px !important;
        gap: 0 32px !important;
    }
    body.deen-ppd-layout.single-product .deen-ppd-section {
        padding: 40px 32px;
    }
}

/* ── Mobile gallery slider: hidden above the mobile breakpoint ───────────────── */
/* Declared before the @media (max-width: 768px) block below on purpose — it
   sets the unconditional (desktop) default, which that block's own
   same-specificity `display: block` then overrides on mobile per the normal
   cascade. Swapping the two rules' order silently wins this one every time
   regardless of viewport, since a later same-specificity rule always beats
   an earlier one — which is exactly the bug this comment is here to prevent
   someone from reintroducing. */
body.deen-ppd-layout.single-product .deen-ppd-mobile-gallery-slider {
    display: none;
    width: 100%;
    margin: 0 0 16px;
}

/* ── Mobile breadcrumb: hidden above the mobile breakpoint ───────────────────── */
/* Same default-then-override pattern as the mobile gallery slider above, and
   for the same reason — declared before the @media (max-width: 767px) block
   further down so that block's `display: block` wins the cascade on mobile. */
body.deen-ppd-layout.single-product .deen-ppd-mobile-breadcrumb {
    display: none;
}

@media (max-width: 768px) {
    body.deen-ppd-layout.single-product div.product {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 0 10px 24px !important;
        gap: 0 !important;
    }
    body.deen-ppd-layout.single-product .woocommerce-product-gallery {
        position: static !important;
        max-height: none !important;
    }
    body.deen-ppd-layout.single-product .deen-ppd-section {
        padding: 10px 0;
    }
    body.deen-ppd-layout.single-product .deen-ppd-section ul.products.columns-4,
    body.deen-ppd-layout.single-product .deen-ppd-section ul.products.columns-5,
    body.deen-ppd-layout.single-product .deen-ppd-section ul.products.columns-6 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    body.deen-ppd-layout.single-product .deen-ppd-mobile-gallery-slider {
        display: block;
    }
    /* Only hidden when our slider actually rendered ahead of it (adjacent
       sibling) — a single-image product, or Gallery Style thumbs/grid, never
       print the slider wrapper, so the native gallery keeps showing on
       mobile exactly as before in those cases. */
    body.deen-ppd-layout.single-product .deen-ppd-mobile-gallery-slider + .woocommerce-product-gallery {
        display: none !important;
    }
}

/* ── Gallery shared: image display reset ─────────────────────────────────────── */
body.deen-ppd-layout.single-product .woocommerce-product-gallery__image {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    flex-shrink: 0;
}

body.deen-ppd-layout.single-product .woocommerce-product-gallery__image a { display: block; }

body.deen-ppd-layout.single-product .woocommerce-product-gallery__image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

/* ── Gallery hover zoom ──────────────────────────────────────────────────────── */
/* Driven by deen_ppd_gallery_zoom(). The host is the image's <a>, not the cell
   around it — the stacked variant below pins that cell to `position: static
   !important`, which would leave this layer positioned against the gallery
   instead of the one image. Nothing here affects layout: the layer is taken out
   of flow and the image keeps its own box, so the gallery's scrollHeight — which
   the wheel handover measures against — is untouched. */
body.deen-ppd-layout.single-product .deen-ppd-zoom-host {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}

body.deen-ppd-layout.single-product .deen-ppd-zoom-layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-repeat: no-repeat;
    /* Backstop for an image whose aspect ratio doesn't match its box, where the
       clamped background can come up short of one edge. */
    background-color: #fff;
    opacity: 0;
    transition: opacity .18s ease;
    /* Load-bearing. This layer covers the whole image, so without it the click
       would never reach the <a> the popup handler listens for, and it would
       swallow the mousemove that positions it. */
    pointer-events: none;
}

body.deen-ppd-layout.single-product .deen-ppd-zoom-layer.is-visible { opacity: 1; }

/* Gallery style variants → see bottom of file (deen-ppd-gallery-{stacked|thumbs|grid}) */

/* ── Product title ───────────────────────────────────────────────────────────── */
body.deen-ppd-layout.single-product .entry-summary h1.product_title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.3px;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: none !important;
}

/* ── SKU (custom output, right after title) ──────────────────────────────────── */
body.deen-ppd-layout.single-product .entry-summary .deen-ppd-sku {
    margin: 0 0 12px !important;
    font-size: 12.5px;
    color: #9ca3af;
}
body.deen-ppd-layout.single-product .entry-summary .deen-ppd-sku span {
    color: #6b7280;
    font-weight: 600;
}

/* ── SKU ─────────────────────────────────────────────────────────────────────── */
body.deen-ppd-layout.single-product .entry-summary .sku_wrapper {
    display: block;
    font-size: 12.5px;
    color: #9ca3af;
    margin: 0 0 14px;
}

body.deen-ppd-layout.single-product .entry-summary .sku {
    color: #6b7280;
    font-weight: 600;
}

/* ── Price ───────────────────────────────────────────────────────────────────── */
body.deen-ppd-layout.single-product .entry-summary p.price {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

body.deen-ppd-layout.single-product .entry-summary p.price .woocommerce-Price-amount {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

body.deen-ppd-layout.single-product .entry-summary p.price del {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
}

body.deen-ppd-layout.single-product .entry-summary p.price ins {
    text-decoration: none !important;
}

/* ── Variations / size ───────────────────────────────────────────────────────── */

/* Convert table/tbody → block; tr → flex so SIZE | swatches | SIZE CHART sit inline */
body.deen-ppd-layout.single-product .entry-summary table.variations,
body.deen-ppd-layout.single-product .entry-summary table.variations tbody {
    display: block !important;
    width: 100%;
}

body.deen-ppd-layout.single-product .entry-summary table.variations tr {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100%;
}

body.deen-ppd-layout.single-product .entry-summary table.variations td,
body.deen-ppd-layout.single-product .entry-summary table.variations th {
    display: block !important;
    padding: 0 !important;
}

body.deen-ppd-layout.single-product .entry-summary .variations,
body.deen-ppd-layout.single-product .entry-summary .variations td,
body.deen-ppd-layout.single-product .entry-summary .variations th,
body.deen-ppd-layout.single-product .entry-summary .variations tr {
    border: none !important;
    margin-bottom: 0;
}

/* Label row: SIZE text left, Size Chart button right */
body.deen-ppd-layout.single-product .entry-summary .variations .label label {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin: 0;
    display: inline;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* td.label: fixed, td.value: takes remaining space */
body.deen-ppd-layout.single-product .entry-summary .variations td.label { flex-shrink: 0; }
body.deen-ppd-layout.single-product .entry-summary .variations td.value { flex: 1; }

/* Swatch plugin: single scrollable row */
body.deen-ppd-layout.single-product .entry-summary .variable-items-wrapper,
body.deen-ppd-layout.single-product .entry-summary .tawcvs-swatches,
body.deen-ppd-layout.single-product .entry-summary .wvs-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 8px !important;
    padding-bottom: 4px;
    scrollbar-width: none;
}
body.deen-ppd-layout.single-product .entry-summary .variable-items-wrapper::-webkit-scrollbar,
body.deen-ppd-layout.single-product .entry-summary .tawcvs-swatches::-webkit-scrollbar { display: none; }

body.deen-ppd-layout.single-product .entry-summary .variations select {
    width: 100%;
    height: 44px;
    border: 1.5px solid #e5e7eb;
    font-size: 13.5px;
    color: #111827;
    padding: 0 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s;
}

body.deen-ppd-layout.single-product .entry-summary .variations select:focus {
    outline: none;
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17,24,39,0.08);
}

body.deen-ppd-layout.single-product .entry-summary .reset_variations {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 6px;
    display: inline-block;
}

/* ── form.cart: variable products → column; simple → row ────────────────────── */

/* Variable product: sizes row on top, ATC row below */
body.deen-ppd-layout.single-product .entry-summary form.cart:has(.variations) {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
}

/* Simple product: qty + button side by side */
body.deen-ppd-layout.single-product .entry-summary form.cart:not(:has(.variations)) {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
}

/* Variable product inner ATC row: qty + button side by side */
body.deen-ppd-layout.single-product .entry-summary .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: stretch;
}

/* ── Quantity stepper ────────────────────────────────────────────────────────── */
body.deen-ppd-layout.single-product .entry-summary .quantity {
    display: flex;
    align-items: center;
    border: 1.5px solid #e5e7eb;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
    min-width: 110px;
}

body.deen-ppd-layout.single-product .entry-summary input.qty {
    -moz-appearance: textfield;
    width: 46px !important;
    height: 48px;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    background: transparent;
    padding: 0 4px;
}

body.deen-ppd-layout.single-product .entry-summary input.qty::-webkit-outer-spin-button,
body.deen-ppd-layout.single-product .entry-summary input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.deen-ppd-layout.single-product .entry-summary .quantity .qty-minus,
body.deen-ppd-layout.single-product .entry-summary .quantity .qty-plus,
body.deen-ppd-layout.single-product .entry-summary .quantity .minus,
body.deen-ppd-layout.single-product .entry-summary .quantity .plus,
body.deen-ppd-layout.single-product .entry-summary .quantity input[type="button"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 48px !important;
    background: none !important;
    border: none !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    color: #374151 !important;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0 !important;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
    box-shadow: none !important;
    border-radius: 0 !important;
}
body.deen-ppd-layout.single-product .entry-summary .quantity .qty-minus,
body.deen-ppd-layout.single-product .entry-summary .quantity .minus,
body.deen-ppd-layout.single-product .entry-summary .quantity input[value="-"] {
    border-right: 1.5px solid #e5e7eb !important;
}
body.deen-ppd-layout.single-product .entry-summary .quantity .qty-plus,
body.deen-ppd-layout.single-product .entry-summary .quantity .plus,
body.deen-ppd-layout.single-product .entry-summary .quantity input[value="+"] {
    border-left: 1.5px solid #e5e7eb !important;
}
body.deen-ppd-layout.single-product .entry-summary .quantity .qty-minus:hover,
body.deen-ppd-layout.single-product .entry-summary .quantity .qty-plus:hover,
body.deen-ppd-layout.single-product .entry-summary .quantity .minus:hover,
body.deen-ppd-layout.single-product .entry-summary .quantity .plus:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

/* ── ATC button ──────────────────────────────────────────────────────────────── */
body.deen-ppd-layout.single-product .entry-summary .single_add_to_cart_button,
body.deen-ppd-layout.single-product .entry-summary button.button.alt {
    flex: 1 !important;
    min-height: 48px !important;
    padding: 0 28px !important;
    background: #111827 !important;
    color: #fff !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    text-transform: none !important;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
    box-shadow: 0 2px 10px rgba(17,24,39,0.18);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

/* ── Short description (hidden via PHP/CSS) ──────────────────────────────────── */
body.deen-ppd-layout.single-product .entry-summary .woocommerce-product-details__short-description {
    display: none !important;
}

body.deen-ppd-layout.single-product .entry-summary .single_add_to_cart_button:hover,
body.deen-ppd-layout.single-product .entry-summary button.button.alt:hover {
    background: #1f2937 !important;
    box-shadow: 0 4px 16px rgba(17,24,39,0.22) !important;
    transform: translateY(-1px);
    color: #fff !important;
}

body.deen-ppd-layout.single-product .entry-summary .single_add_to_cart_button:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(17,24,39,0.12) !important;
}

/* ── Product meta ────────────────────────────────────────────────────────────── */
body.deen-ppd-layout.single-product .entry-summary .product_meta {
    margin: 16px 0 0;
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.8;
}

body.deen-ppd-layout.single-product .entry-summary .product_meta a {
    color: #6b7280;
    text-decoration: none;
}

body.deen-ppd-layout.single-product .entry-summary .product_meta a:hover {
    color: #111827;
    text-decoration: underline;
}

/* ── Breadcrumb row in summary ───────────────────────────────────────────────── */
.deen-ppd-breadcrumb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.deen-ppd-breadcrumb-row .woocommerce-breadcrumb {
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #9ca3af;
    background: none;
}

.deen-ppd-breadcrumb-row .woocommerce-breadcrumb a {
    color: #9ca3af;
    text-decoration: none;
}

.deen-ppd-breadcrumb-row .woocommerce-breadcrumb a:hover {
    color: #374151;
}

/* ── Title row (title + inline wishlist) ─────────────────────────────────────── */
.deen-ppd-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.deen-ppd-title-row .product_title {
    flex: 1;
    margin: 0 0 8px;
}

/* ── Wishlist button ─────────────────────────────────────────────────────────── */
.deen-wl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    min-width: 38px;
    cursor: pointer;
    color: #6b7280;
    transition: color .15s, background .15s, border-color .15s;
    flex-shrink: 0;
    margin-top: 4px;
}
.deen-wl-btn:hover {
    color: #ef4444;
    background: #fef2f2;
    border-color: #fecaca;
}
.deen-wl-btn.active {
    color: #ef4444;
    border-color: #fca5a5;
    background: #fef2f2;
}
.deen-wl-btn.active .deen-wl-icon {
    fill: #ef4444;
    stroke: #ef4444;
}
.deen-wl-btn.loading { opacity: .5; pointer-events: none; }

/* ── Find in Store + Delivery inline row ─────────────────────────────────────── */
.deen-ppd-atc-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 0;
}
.deen-ppd-atc-meta .deen-ppd-find-in-store {
    margin: 0;
    flex-shrink: 0;
}
.deen-ppd-atc-meta .deen-ppd-delivery-info {
    flex: 1;
    min-width: 0;
    margin: 0;
}

/* ── Delivery info ───────────────────────────────────────────────────────────── */
.deen-ppd-delivery-info {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 14px 0 0;
    padding: 11px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    font-size: 13px;
    color: #15803d;
    font-weight: 500;
}

.deen-ppd-delivery-icon {
    flex-shrink: 0;
    color: #16a34a;
}

/* ── Promotion text ──────────────────────────────────────────────────────────── */
.deen-ppd-promo-text {
    margin: 10px 0 0;
    padding: 10px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    font-size: 13px;
    color: #92400e;
}

/* ── Size chart link ─────────────────────────────────────────────────────────── */
.deen-ppd-size-chart-link {
    margin: 8px 0 0;
}
.deen-ppd-size-chart-link a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Astra's own global link focus/active style paints a background + color —
   same issue and fix as .deen-ppd-acc-trigger above. */
.deen-ppd-size-chart-link a:hover,
.deen-ppd-size-chart-link a:focus,
.deen-ppd-size-chart-link a:active {
    background: none !important;
    color: #111827 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ── Find in Store ───────────────────────────────────────────────────────────── */
.deen-ppd-find-in-store {
    position: relative;
    margin: 12px 0 0;
}
.deen-ppd-fis-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1.5px solid #d1d5db;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.deen-ppd-fis-btn:hover { border-color: #111827; color: #111827; }
.deen-ppd-fis-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 16px 18px;
    font-size: 13px;
    color: #374151;
    min-width: 260px;
    max-width: 360px;
}
.deen-ppd-fis-popup[hidden] { display: none; }

/* ── Size Chart: label + trigger button ──────────────────────────────────────── */
.deen-ppd-sc-label-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.deen-ppd-sc-trigger {
    background: none;
    border: none;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: color .15s;
    flex-shrink: 0;
    margin-left: auto;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}
/* Astra's own global button focus/active style paints a background + color —
   same issue and fix as .deen-ppd-acc-trigger above. */
.deen-ppd-sc-trigger:hover,
.deen-ppd-sc-trigger:focus,
.deen-ppd-sc-trigger:active {
    background: none !important;
    color: #111827 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ── Size Chart Drawer ───────────────────────────────────────────────────────── */

/*
 * visibility approach: instantly visible on open, waits for close transition
 * before hiding (transition: visibility 0s linear <delay> matches panel duration)
 */
.deen-ppd-sc-drawer {
    position: fixed;
    inset: 0;
    z-index: 999999;
    visibility: hidden;
    pointer-events: none;
    /* delay hiding until close animation (0.38s) finishes */
    transition: visibility 0s linear 0.38s;
}
.deen-ppd-sc-drawer.open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s; /* show immediately on open */
}

/* Overlay: fade in/out */
.deen-ppd-sc-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    transition: opacity 0.32s ease;
}
.deen-ppd-sc-drawer.open .deen-ppd-sc-overlay { opacity: 1; }

/* Panel: slide in/out from right */
.deen-ppd-sc-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 520px;
    max-width: 95vw;
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 48px rgba(0, 0, 0, 0.13);
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.32, 0, 0.15, 1);
    will-change: transform;
}
.deen-ppd-sc-drawer.open .deen-ppd-sc-panel { transform: translateX(0); }

.deen-ppd-sc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.1px;
}

.deen-ppd-sc-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #6b7280;
    display: flex;
    align-items: center;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.deen-ppd-sc-close:hover { background: #f3f4f6; color: #111827; }

.deen-ppd-sc-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.deen-ppd-sc-body iframe {
    width: 100%;
    min-height: 70vh;
    border: none;
    display: block;
}
.deen-ppd-sc-body img {
    max-width: 100%;
    height: auto;
    display: block;
}

body.deen-sc-open { overflow: hidden !important; }

@keyframes deen-sc-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 600px) {
    .deen-ppd-sc-panel { width: 100vw; }
}

/* ── Accordion ───────────────────────────────────────────────────────────────── */
.deen-ppd-accordion {
    margin-top: 20px;
    border-top: 1px solid #e5e7eb;
    overflow-anchor: none;
}

.deen-ppd-acc-item {
    border-bottom: 1px solid #e5e7eb;
}

.deen-ppd-acc-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
    text-align: left;
    gap: 12px;
    transition: color 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

/* Astra's own global button style paints a blue background + white text on
   :hover/:focus/:active — pairs fine for its real buttons, but this trigger
   isn't one, so every state needs both halves overridden together (or the
   text goes invisible, white on our white background, once the blue is
   removed) — !important since Astra's rule outranks a plain selector here. */
.deen-ppd-acc-trigger:hover,
.deen-ppd-acc-trigger:focus,
.deen-ppd-acc-trigger:active,
.deen-ppd-acc-item.open .deen-ppd-acc-trigger {
    background: none !important;
    color: #374151 !important;
    outline: none !important;
    box-shadow: none !important;
}

.deen-ppd-acc-chevron {
    flex-shrink: 0;
    color: #9ca3af;
    transition: transform 0.2s ease;
}

.deen-ppd-acc-item.open .deen-ppd-acc-chevron {
    transform: rotate(180deg);
}

.deen-ppd-acc-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.deen-ppd-acc-item.open .deen-ppd-acc-body {
    max-height: 800px;
}

.deen-ppd-acc-content {
    padding-bottom: 16px;
    font-size: 13.5px;
    line-height: 1.7;
    color: #4b5563;
}

.deen-ppd-acc-content p { margin: 0 0 10px; }
.deen-ppd-acc-content p:last-child { margin-bottom: 0; }
.deen-ppd-acc-content ul, .deen-ppd-acc-content ol { padding-left: 18px; margin: 0 0 10px; }
.deen-ppd-acc-content li { margin-bottom: 4px; }

/* Reviews inside accordion */
.deen-ppd-acc-content #reviews { padding: 0; }
.deen-ppd-acc-content #reviews h2 { font-size: 14px; margin-bottom: 14px; }
.deen-ppd-acc-content .woocommerce-Reviews-title { display: none; }
.deen-ppd-acc-content .comment-form-rating { margin-bottom: 12px; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */

/* Tablet: tighten gap */
@media (max-width: 1024px) {
    body.deen-ppd-layout.single-product div.product {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 0 32px !important;
    }
}

/* Mobile: stack gallery above info */
@media (max-width: 767px) {
    /* The one mobile gutter everything else in this block aligns to
       (div.product, .deen-ppd-section, .deen-ppd-mobile-breadcrumb all sit
       at 0 padding of their own, relying on this) — Astra's own default is
       20px here. */
    body.deen-ppd-layout.single-product .ast-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body.deen-ppd-layout.single-product div.product {
        grid-template-columns: minmax(0, 1fr) !important;
        /* No horizontal padding of its own here — div.product already sits
           inside Astra's .ast-container, which supplies the page's one
           mobile gutter. The 10px this used to add on top of that gutter
           (from the max-width:768px block above) was a second, redundant
           padding stacked on the first. */
        padding: 0 0 24px !important;
        gap: 24px 0 !important;
    }

    body.deen-ppd-layout.single-product .woocommerce-product-gallery {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.deen-ppd-layout.single-product .entry-summary {
        grid-column: 1 !important;
        grid-row: 2 !important;
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
        /* The base rule's 64px bottom padding exists to give the sticky
           desktop gallery column room to keep scrolling past a shorter
           info column — meaningless once the columns stack on mobile, where
           it just reads as a dead gap before the next section. */
        padding-bottom: 8px !important;
    }

    /* Same idea: the 40px top margin below is sized for desktop, where it
       follows a tall two-column area. Stacked on top of entry-summary's own
       bottom padding and this element's own top padding on mobile, it was
       leaving a ~190px empty band before "Related Products". */
    body.deen-ppd-layout.single-product .deen-ppd-section {
        margin-top: 0;
        /* Same redundant-gutter fix as div.product above — this section
           also lives inside .ast-container, so its own 16px left/right
           (from the max-width:768px block) was a second gutter on top of
           Astra's. */
        padding-left: 0;
        padding-right: 0;
    }

    /* The 2em/800 base is sized for a desktop section following a tall
       two-column area — too large once these sections stack full-width on
       a phone. */
    body.deen-ppd-layout.single-product .deen-ppd-section-heading {
        font-size: 18px;
        font-weight: 500;
    }

    /* Swap in the breadcrumb printed above div.product for the one at the
       top of entry-summary — the latter is now stuck below the gallery
       (entry-summary's whole grid row is), so only the standalone copy can
       sit above the image on this breakpoint. */
    body.deen-ppd-layout.single-product .deen-ppd-mobile-breadcrumb {
        display: block;
        margin: 12px 0 0;
    }
    body.deen-ppd-layout.single-product .entry-summary > .deen-ppd-breadcrumb-row {
        display: none;
    }

    body.deen-ppd-layout.single-product .entry-summary h1.product_title { font-size: 20px !important; }
    body.deen-ppd-layout.single-product .entry-summary p.price { font-size: 18px !important; }
    body.deen-ppd-layout.single-product .entry-summary form.cart { gap: 8px; }

    body.deen-ppd-layout.single-product .entry-summary .single_add_to_cart_button,
    body.deen-ppd-layout.single-product .entry-summary button.button.alt {
        padding: 0 16px !important;
        font-size: 13.5px !important;
    }
}

@media (max-width: 600px) {
    .deen-ppd-sticky-img { display: none; }
    .deen-ppd-sticky-inner { padding: 10px 16px; gap: 10px; }
    .deen-ppd-sticky-btn { padding: 10px 18px !important; font-size: 13px !important; }
    .deen-ppd-sticky-name { font-size: 13px; }

    .deen-ppd-trust-badges { gap: 10px 16px; }
    .deen-ppd-trust-item { font-size: 12px; }

    .deen-ppd-acc-trigger { font-size: 13px; padding: 13px 0; }
    .deen-ppd-acc-content { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Gallery Style Variants
   Applied via body class: deen-ppd-gallery-{stacked|thumbs|grid}
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Stacked (default) — images in a single vertical column ─────────────────── */
body.deen-ppd-layout.deen-ppd-gallery-stacked.single-product .woocommerce-product-gallery .flex-viewport {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}
body.deen-ppd-layout.deen-ppd-gallery-stacked.single-product .woocommerce-product-gallery__wrapper {
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    gap: 2px;
    background: #fff;
}
body.deen-ppd-layout.deen-ppd-gallery-stacked.single-product .woocommerce-product-gallery__image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    border: none;
}
body.deen-ppd-layout.deen-ppd-gallery-stacked.single-product .woocommerce-product-gallery__image a,
body.deen-ppd-layout.deen-ppd-gallery-stacked.single-product .woocommerce-product-gallery__image img {
    width: 100% !important;
}
body.deen-ppd-layout.deen-ppd-gallery-stacked.single-product .flex-control-nav,
body.deen-ppd-layout.deen-ppd-gallery-stacked.single-product .flex-control-thumbs,
body.deen-ppd-layout.deen-ppd-gallery-stacked.single-product .flex-direction-nav,
body.deen-ppd-layout.deen-ppd-gallery-stacked.single-product .woocommerce-product-gallery__trigger {
    display: none !important;
}

/* ── Main + Thumbnails — large main image, row of thumbs below ──────────────── */
body.deen-ppd-layout.deen-ppd-gallery-thumbs.single-product .woocommerce-product-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.deen-ppd-layout.deen-ppd-gallery-thumbs.single-product .woocommerce-product-gallery .flex-viewport {
    overflow: hidden !important;
}
body.deen-ppd-layout.deen-ppd-gallery-thumbs.single-product .woocommerce-product-gallery__wrapper {
    display: flex !important;
    flex-direction: row !important;
}
body.deen-ppd-layout.deen-ppd-gallery-thumbs.single-product .woocommerce-product-gallery__image {
    flex-shrink: 0;
}
body.deen-ppd-layout.deen-ppd-gallery-thumbs.single-product .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
body.deen-ppd-layout.deen-ppd-gallery-thumbs.single-product .flex-control-thumbs li {
    width: calc(25% - 6px);
}
body.deen-ppd-layout.deen-ppd-gallery-thumbs.single-product .flex-control-thumbs img {
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .15s;
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
}
body.deen-ppd-layout.deen-ppd-gallery-thumbs.single-product .flex-control-thumbs img.flex-active {
    border-color: #111827;
}
body.deen-ppd-layout.deen-ppd-gallery-thumbs.single-product .flex-control-nav,
body.deen-ppd-layout.deen-ppd-gallery-thumbs.single-product .flex-direction-nav,
body.deen-ppd-layout.deen-ppd-gallery-thumbs.single-product .woocommerce-product-gallery__trigger {
    display: none !important;
}

/* ── Grid — first image large (spanning 2 rows), rest in a 2-col grid ───────── */
body.deen-ppd-layout.deen-ppd-gallery-grid.single-product .woocommerce-product-gallery .flex-viewport {
    overflow: visible !important;
    max-height: none !important;
}
body.deen-ppd-layout.deen-ppd-gallery-grid.single-product .woocommerce-product-gallery__wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    transform: none !important;
    gap: 8px;
}
body.deen-ppd-layout.deen-ppd-gallery-grid.single-product .woocommerce-product-gallery__image:first-child {
    grid-row: span 2;
}
body.deen-ppd-layout.deen-ppd-gallery-grid.single-product .woocommerce-product-gallery__image img {
    aspect-ratio: 3/4;
    object-fit: cover;
    width: 100%;
}
body.deen-ppd-layout.deen-ppd-gallery-grid.single-product .woocommerce-product-gallery__image:first-child img {
    aspect-ratio: 3/4;
    height: 100%;
}
body.deen-ppd-layout.deen-ppd-gallery-grid.single-product .flex-control-nav,
body.deen-ppd-layout.deen-ppd-gallery-grid.single-product .flex-control-thumbs,
body.deen-ppd-layout.deen-ppd-gallery-grid.single-product .flex-direction-nav,
body.deen-ppd-layout.deen-ppd-gallery-grid.single-product .woocommerce-product-gallery__trigger {
    display: none !important;
}

/* ── Image URL Copy Popup ─────────────────────────────────────────────────────── */
.deen-ppd-url-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99998;
    display: none;
}
.deen-ppd-url-overlay.active {
    display: block;
}
.deen-ppd-url-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #111827;
    color: #f9fafb;
    border-radius: 12px;
    padding: 18px 20px 20px;
    min-width: 340px;
    max-width: min(92vw, 540px);
    z-index: 99999;
    display: none;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.deen-ppd-url-popup.active {
    display: block;
}
.deen-ppd-url-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.deen-ppd-url-popup-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}
.deen-ppd-url-popup-close {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0 4px;
    font-size: 20px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s;
}
.deen-ppd-url-popup-close:hover {
    color: #f9fafb;
}
.deen-ppd-url-popup-url {
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 12px;
    color: #d1d5db;
    word-break: break-all;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 7px;
    padding: 10px 12px;
    margin-bottom: 14px;
    line-height: 1.6;
    user-select: all;
    cursor: text;
}
.deen-ppd-url-popup-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 10px 16px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.deen-ppd-url-popup-copy:hover {
    background: #1d4ed8;
}
.deen-ppd-url-popup-copy.copied {
    background: #16a34a;
}