/**
 * Product Page Enhancements
 */

:root{
    --charcoal:var(--drk-tertiary-hover, #211F1A);
    --charcoal-soft:#2B2822;
    --cream:var(--drk-menu, #F7F1E7);
    --paper:#FCF9F3;
    --paper:#EDE8E3 ;
    --clay:var(--drk-primary, #B9784C);
    --clay-dark:var(--drk-primary-hover, #95602F);
    --clay-tint:#EFDCC8;
    --sage:var(--drk-secondary, #757E67);
    --sage-soft:var(--drk-secondary-hover, #9AA089);
    --stone:#E3D8C4;
    --stone-line:#CBBC9F;
    --ink:var(--drk-tertiary, #2E2A22);
    --ink-soft:var(--drk-ui-grey-light, #6B6555);
    --ink-faint:#8C8674;
    --white:#FFFFFF;
    --shadow: 0 20px 50px -20px rgba(33,31,26,0.25);
}

/* 2. Trust Badges
   The three of them are meant to read as one line under the title. At the
   width of the order page's right column (about 500px) they needed 550px and
   the third dropped to a second row, so the pills are sized to fit: 8px
   between them, tighter padding, 12px type and a 15px icon. That lands at
   roughly 485px, with the labels kept whole (no internal wrapping).
   flex-wrap stays on deliberately - it is the graceful way out for a narrower
   column or longer wording, rather than having them overflow. */
.drk-trust-badges {
    display: flex;
    gap: 8px;
    margin: 0 -6px 15px;
    flex-wrap: wrap;
    padding: 5px;
    border-radius: 20px;
}
.woocommerce-js h2,
.woocommerce-js div.product .product_title{
    font-size: 2.4rem;
}
.drk-badge {
    display: flex;
    align-items: center;
    background: var(--paper);
    padding: 6px 9px;
    border-radius: 20px;
    font-size: 12px;
    color: var(--clay);
    border: 1px solid var(--stone-line);
}

.drk-badge .drk-badge-label {
    white-space: nowrap;
}

.drk-badge .material-icons {
    font-size: 15px;
    margin-right: 4px;
    color: var(--clay-dark);
}

.rouwdruk-staffel-container{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title note"
        "desc  desc"
        "bars  bars"
        "table table";
    row-gap: 14px;
    column-gap: 24px;
    background: var(--paper);
    border: 1px solid var(--stone-line);
    border-radius: 16px;
    padding: 30px 34px;
    margin: 24px 0;

    h4{
        grid-area: title;
        margin: 0;
        font-size: 1.7rem;
        font-weight: 600;
        color: var(--ink);
    }

    /* Decorative intro copy, generated so no markup change is required */
    &::after{
        grid-area: desc;
        content: "Hoe meer kaarten je bestelt, hoe lager de prijs per stuk. De eerste kaart draagt de ontwerp- en opstartkosten.";
        color: var(--ink-soft);
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* Decorative tier bars: mirrors the row markers below, approximate widths */
    &::before{
        grid-area: bars;
        content: "";
        display: block;
        height: 46px;
        border-radius: 6px;
        background: linear-gradient(to right,
            var(--clay) 0%, var(--clay) 34%,
            transparent 34%, transparent 35.5%,
            var(--clay-tint) 35.5%, var(--clay-tint) 63%,
            transparent 63%, transparent 64.5%,
            var(--stone) 64.5%, var(--stone) 92%,
            transparent 92%, transparent 100%
        );
    }

    /* The existing footnote paragraph is repurposed as the top-right note */
    > p{
        grid-area: note;
        align-self: start;
        margin: 0;
        font-size: 0.8rem;
        font-style: italic;
        color: var(--ink-faint);
        text-align: right;
        white-space: nowrap;
    }

    @media (max-width: 600px){
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "note"
            "desc"
            "bars"
            "table";

        > p{
            text-align: left;
            white-space: normal;
        }
    }
}

.rouwdruk-staffel-tabel{
    grid-area: table;
    width: 100%;
    border-collapse: collapse;

    thead th{
        text-align: left;
        padding-bottom: 10px;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-faint);
        border-bottom: 1px solid var(--stone-line);

        &:last-child{ text-align: right; }
    }

    tbody td{
        padding: 16px 0;
        font-size: 1rem;
        color: var(--ink);
        border-bottom: 1px solid var(--stone-line);

        &:first-child::before{
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 10px;
            border-radius: 2px;
            vertical-align: middle;
            background: var(--clay);
        }

        &:last-child{
            text-align: right;
            font-weight: 700;
            font-size: 1.05rem;
        }
    }

    tbody tr:nth-child(2) td:first-child::before{ background: var(--clay-tint); }
    tbody tr:nth-child(n+3) td:first-child::before{ background: var(--stone); }
    tbody tr:last-child td{ border-bottom: none; }
}
.single-product{
    .social-icons{
        display: none !important;
    }
}
/* 5. Primary CTA Button - full-width pill, shared by the real add-to-cart submit
   button and the browse-state "Bewerk je kaart" link (hijacked via
   change_browse_cta_url/change_browse_cta_text in PaperConfigService.php). */
.astra-shop-summary-wrap a[href*="add-to-cart-builder"],
.woocommerce-variation-add-to-cart a[href*="add-to-cart-builder"],
.single-product div.product form.cart .button[href*="add-to-cart-builder"],
a.button[href*="add-to-cart-builder"],
.astra-shop-summary-wrap a[href*="api/v1.1/design"],
.woocommerce-variation-add-to-cart a[href*="api/v1.1/design"],
.single-product div.product form.cart .button[href*="api/v1.1/design"],
a.button[href*="api/v1.1/design"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;

    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 15px 25px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: background-color 0.2s ease;
    text-decoration: none !important;
    margin-top: 15px;
}

/* Browse-state action card: price-breakdown table above (.rouwdruk-staffel-container,
   unaffected) then this white card holding "Bereken prijs" (outline) + "Bewerk je
   kaart" (solid) stacked full-width, matching the design_id-state card below. */
.product-actions{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--white);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid var(--stone-line);
    margin: 20px 0;

    #drkPriceCalcModal {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0,0,0,0.4);

        .modal-header{
            height: 54px;
            position: relative;
            line-height: 54px;
            padding: 0 26px;
            h5{
                float: left;
                padding: 0;
                margin: 0;

            }
            >*{
                height: 54px;
                line-height: 54px;
                background: none;
                box-shadow: none;
                margin: 0;
                padding:0;
                float: right;
                color: white;
            }
            background: var(--clay);
            color: var(--white);
        }
    }

    .drk-price-calc-container{
        width: 100%;
        margin: 0;
    }
    a.button[href*="add-to-cart-builder"]{
        width: 100%;
        margin-top: 0;
    }
}




a[href*="add-to-cart-builder"]:hover {
    background-color: var(--clay-dark) !important;
}

a[href*="add-to-cart-builder"]::before,
a[href*="api/v1.1/design"]::before {
    content: 'edit';
    font-family: 'Material Icons';
    margin-right: 10px;
    font-size: 20px;
    text-transform: none;
}

/* Browse State CTA specific style */
.drk-trust-badges.drk-browse-state ~ .astra-shop-summary-wrap a[href*="api/v1.1/design"]::before,
.drk-trust-badges.drk-browse-state ~ .woocommerce-variation-add-to-cart a[href*="api/v1.1/design"]::before,
.drk-trust-badges.drk-browse-state ~ div.product form.cart .button[href*="api/v1.1/design"]::before,
a.button[href*="api/v1.1/design"]::before {
    content: 'draw';
    font-family: 'Material Icons';
    margin-right: 10px;
    font-size: 20px;
    text-transform: none;
}

/* 6. How it works strip */
.drk-how-it-works {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--cream) ;
    padding: 30px 20px;
    margin: 40px 0;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.drk-step {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 10px 20px;
}

.drk-step .material-icons {
    font-size: 32px;
    margin-right: 15px;
}

.drk-step-content {
    display: flex;
    flex-direction: column;
}

.drk-step-content strong {
    font-size: 16px;
    color: #333;
    margin-bottom: 2px;
}

.drk-step-content span {
    font-size: 14px;
    color: #777;
}

.drk-step-divider {
    width: 1px;
    height: 40px;
    background: var(--cream) ;
}

@media (max-width: 600px) {
    .drk-how-it-works {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .drk-step-divider {
        display: none;
    }
    .drk-step {
        padding: 0;
    }
}

/* 7. Product details accordion */
.drk-product-accordion {
    margin-bottom: 40px;
    border: 1px solid var(--cream) ;
    border-radius: 8px;
    overflow: hidden;
    background-color: #ffffff;
}

.drk-accordion-item {
    border-bottom: 1px solid var(--cream) ;
}

.drk-accordion-item:last-child {
    border-bottom: none;
}

.drk-accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background: var(--paper);
    border: none;
    text-align: left;
    cursor: pointer;
    font-weight: 600;
    color: #333;
    font-size: 16px;
    transition: background-color 0.2s ease;
}

.drk-accordion-header:hover {
    background: #efefef;
}

.drk-accordion-header .chevron {
    transition: transform 0.3s ease;
}

.drk-accordion-header[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

.drk-accordion-body {
    padding: 0 20px 20px 20px;
    color: var(--clay);
    font-size: 15px;
    line-height: 1.6;
}

/* 8. Related products reskin */
.related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

.related.products ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid var(--cream) ;
    border-radius: 8px;
    overflow: hidden;
    padding-bottom: 15px !important;
}

.related.products ul.products li.product .astra-shop-thumbnail-wrap {
    height: 200px;
    margin-bottom: 10px;
}

.related.products ul.products li.product img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

.related.products ul.products li.product .woocommerce-loop-product__title {
    padding: 0 10px;
    font-size: 14px !important;
}

.related.products ul.products li.product .price {
    padding: 0 10px;
    margin-bottom: 15px !important;
    display: block !important;
}

/* Related products CTA pill style */
.related.products ul.products li.product a.button {
    margin: auto 10px 0 10px !important;
    background: var(--cream)  !important;
    color: #333 !important;
    border-radius: 20px !important;
    text-align: center !important;
    padding: 8px 15px !important;
    font-size: 12px !important;
    width: calc(100% - 20px) !important;
    display: block !important;
}

/* Price Calculator Popup */
.drk-price-calc-container {
    margin: 20px 0;
}

/* Secondary/outline pill button - same treatment as .drk-edit-design-button below,
   full-width to match the primary CTA it sits alongside in the .product-actions card. */
.drk-calc-trigger-btn {
    display: flex !important;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    color: var(--clay-dark) !important;
    border: 1px solid var(--clay-dark) !important;
    padding: 15px 25px !important;
    border-radius: 999px !important;
    font-weight: bold !important;
    font-size: 14px;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.drk-calc-trigger-btn:hover {
    background-color: var(--clay-tint) !important;
    border-color: var(--clay-dark) !important;
}

.drk-calc-trigger-btn .material-icons {
    margin-right: 8px;
    font-size: 20px;
}

#drkPriceCalcModal .modal-content {
    background: var(--paper);
    border-radius: 16px;
    border: 1px solid var(--stone-line);
    box-shadow: var(--shadow);
    overflow: hidden;
}

#drkPriceCalcModal .modal-header {
    background: var(--clay);
    border-bottom: none;
    padding: 20px 25px;

    .modal-title {
        color: var(--white);
        font-weight: 600;
    }

    #closeDrkPriceCalcModal {
        color: var(--white);
        opacity: 0.85;
        position: absolute;
        right: 20px;
        &:hover { opacity: 1; }
    }
}

#drkPriceCalcModal .modal-body {
    background: var(--paper);
    padding: 25px;
}

.drk-modal-calc-row {
    margin-bottom: 20px;
}

.drk-modal-calc-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--ink);
}

.drk-modal-calc-row .form-control,
.drk-modal-calc-row .form-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--stone-line);
    border-radius: 8px;
    font-size: 15px;
    background: var(--white);
    color: var(--ink);

    &:focus {
        outline: none;
        border-color: var(--clay);
        box-shadow: 0 0 0 3px rgba(185,120,76,0.15);
    }
}

.drk-modal-calc-actions {
    margin-top: 30px;
}

#drk-modal-calculate-btn {
    width: 100%;
    background: var(--clay) !important;
    color: var(--white) !important;
    padding: 15px 25px !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    font-size: 14px;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease;

    &:hover { background: var(--clay-dark) !important; }
}

.drk-modal-calc-result hr {
    margin: 25px 0;
    border: 0;
    border-top: 1px solid var(--stone-line);
}

.drk-calc-total-wrap {
    background: var(--cream);
    border: 1px solid var(--stone-line);
    padding: 15px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.drk-calc-label {
    font-weight: 600;
    color: var(--ink-soft);
}

#drk-modal-total-display {
    font-size: 22px;
    font-weight: 800;
    color: var(--clay-dark);
}

.drk-calc-disclaimer {
    font-size: 12px;
    color: var(--ink-faint);
    text-align: center;
    margin-top: 15px;
}

.drk-loading-dots {
    font-weight: bold;
}

/* Paper tiles: see catalog.css (.drk-paper-tile), shared by the product page and the order page. */

@media (max-width: 768px) {
    .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Smart Gallery Styles */
body.drk-smart-gallery-active .woocommerce-product-gallery, 
body.drk-smart-gallery-active .woocommerce-product-gallery__wrapper {
    display: none !important;
}

.drk-full-width-summary {
    display: block !important;
}

.drk-full-width-summary .summary {
    width: 100% !important; 
    float: none !important; 
    max-width: none !important;
}

.drk-smart-gallery {
    display: flex; 
    gap: 20px; 
    align-items: stretch;
    .drk-sg-canvas-wrapper{
        background: var(--paper) ;
        padding: 13px 20px 40px 20px;
        border-radius: 12px;
    }

    padding: 0 30px 30px 0px;
    border-radius: 8px; 
    margin-bottom: 30px; 
    position: relative; 
    width: 100%; 
    box-sizing: border-box;
}

.drk-sg-sidebar {
    width: 100px; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    z-index: 5;
}

.drk-sg-sidebar .sg-thumb {
    cursor: pointer; 
    background: #fff;
    border-radius: 4px;
    text-align: center; 
    transition: all 0.2s;
    border: 3px solid var(--cream) ;
}

.drk-sg-sidebar .sg-thumb.active {

}

.drk-sg-sidebar .sg-thumb-label {
    font: 11px/1.4 Arial, sans-serif; 
    color: var(--clay); 
    margin-top: 4px;
}

.drk-sg-sidebar .sg-thumb.active .sg-thumb-label {

    font-weight: bold;
}

.drk-sg-sidebar .sg-thumb-preview {
    background: var(--cream) ;
    margin: 0 auto;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden;
    border-radius: 2px;
    padding: 10px;
}

.drk-sg-sidebar .sg-thumb-preview.placeholder {
    background: #f9f9f9; 
    color: var(--cream);
}

.drk-sg-sidebar .thumb-spread-wrap {
    display: flex; 
    max-width: 100%; 
    max-height: 100%;
    position: relative;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.drk-sg-sidebar .thumb-spread-wrap::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.02) 100%);
    opacity: 0.5;
    z-index: 10;
}

/* flex:0 1 auto (not flex:1) lets each panel's width follow its own image's
   intrinsic size instead of forcing an equal half - correct for FoldOut's
   asymmetric square-flap/wide-base split. The sidebar is width-constrained
   (fixed 100px column), not height-constrained like the main canvas, so
   this relies on flex-basis:auto's replaced-element sizing rather than a
   fixed cross-axis dimension - the .thumb-panel img rule below is
   deliberately left untouched. */
.drk-sg-sidebar .thumb-spread-wrap .thumb-panel-wrapper {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;

}

.drk-sg-sidebar .thumb-spread-wrap.horizontal {
    flex-direction: column;
}

.drk-sg-sidebar .thumb-panel {
    display: block;
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain;
}

.drk-sg-sidebar .drk-sg-crease::before {
    left: -5px;
    width: 10px;
}

.drk-smart-gallery.is-flat .drk-sg-crease,
.drk-smart-gallery.is-flat .drk-sg-spine,
.drk-smart-gallery.is-flat .drk-sg-back-flap {
    display: none !important;
}

.drk-sg-sidebar.horizontal .drk-sg-crease::before {
    top: -5px;
    height: 10px;
}

.drk-sg-sidebar .drk-sg-spine {
    width: 4px;
}

.drk-sg-sidebar.horizontal .drk-sg-spine {
    height: 4px;
    width: auto;
}

.drk-sg-sidebar .drk-sg-back-flap {
    right: -3px;
    bottom: 1px;
    left: 2px;
}

.drk-sg-sidebar.horizontal .drk-sg-back-flap {
    top: 2px;
    right: 1px;
    bottom: -3px;
    left: 0px;
    transform-origin: center top;
    transform: rotateX(-25deg) skewX(-2deg);
}

.drk-sg-sidebar .thumb-spread-wrap.flat .thumb-panel-wrapper {
    flex: none;
    width: 100%;
}
.drk-sg-sidebar .thumb-spread-wrap.vertical .thumb-panel-wrapper {
    flex: 0 1 auto;
}
.drk-sg-sidebar .thumb-spread-wrap.horizontal .thumb-panel-wrapper {
    flex: 0 1 auto;
}

.drk-sg-canvas-wrapper {
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative;
    border: 1px solid var(--stone-line);
}

/* Stack all slide variations cleanly */
.drk-sg-canvas {
    position: relative;
    padding: 0;
    background: transparent;
    width: 100%;

    /* ADD THIS: Grid layout forces all children to occupy the same track,
       making the wrapper match the largest child's height naturally */
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;

}

/* Force all spread containers into the same grid cell */
.drk-sg-spread-container {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    position: relative;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1), 0 1px 8px rgba(0,0,0,0.05);

    /* Control visibility via opacity and pointer events so the tallest item
       can still dictate the height even when it is hidden */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1;
}

/* Reveal the active view smoothly */
.drk-sg-spread-container.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

.drk-sg-spread-container::after {
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    pointer-events: none; 
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.02) 100%); 
    opacity: 0.5;
}

.drk-sg-spread-container.horizontal {
    flex-direction: column;
}

.drk-sg-panel {
    display: block; 
    position: relative; 
    overflow: hidden;
}
/* Ensure images scale responsibly up to their maximum natural sizes */
.drk-sg-single img {
    display: block;
    height: auto;
    max-height: 60vh; /* Set a strict upper ceiling bound */
    width: 100%;
    object-fit: contain;
}
/* .drk-sg-panel (not .drk-sg-single, which is alone and has no sibling to
   size relative to) sizes from its own image's intrinsic aspect ratio at a
   shared row height instead of a forced width:100% - two equal-width
   columns is wrong for FoldOut's asymmetric square-flap/wide-base split.
   Correct for BiFold too (whose two images already happen to be roughly
   equal), so this isn't FoldOut-gated. */
.drk-sg-panel img {
    display: block;
    height: 60vh;
    max-height: 60vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Keep the closed card centered if it is narrower than the full spread width */
.drk-sg-spread-container.closed {
    width: fit-content;
    max-width: 100%;
}
/* Horizontal fold adjustments */
.drk-smart-gallery.horizontal .drk-sg-spread-container:not(.closed) {
    flex-direction: column;
}

.drk-smart-gallery.horizontal .drk-sg-spread-container:not(.closed) .drk-sg-panel {
    flex: none;
    width: 100%;
}
/* Horizontal fold stacks panels top/bottom (column direction), so the cross
   axis is width, not height - each panel already takes the full row width
   (above) and its height should follow its own image's aspect ratio, not
   the fixed 60vh used for the vertical-fold (row) case above. This already
   handles FoldOut's asymmetry correctly for horizontal fold with no extra
   logic - two stacked full-width images naturally render at different
   heights based on their own content. */
.drk-smart-gallery.horizontal .drk-sg-spread-container:not(.closed) .drk-sg-panel img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
}


/* Sits between the two panels as a real (zero-width) flex sibling now,
   instead of position:absolute pinned to left:50% - that hardcoded the
   crease to the visual midpoint, which is wrong once the panels themselves
   aren't equal width (FoldOut's square-flap/wide-base split). A zero-width
   anchor lands exactly on the real seam regardless of panel widths; the
   ::before pseudo-element is what actually paints the wider shadow,
   absolutely positioned relative to that zero-width anchor rather than the
   whole container. */
.drk-sg-crease {
    flex: 0 0 0;
    width: 0;
    position: relative;
    z-index: 2;
    pointer-events: none;
}
.drk-sg-crease::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15px;
    width: 30px;
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0) 100%);
}

.drk-smart-gallery.horizontal .drk-sg-crease {
    width: auto;
    height: 0;
}
.drk-smart-gallery.horizontal .drk-sg-crease::before {
    left: 0;
    right: 0;
    top: -15px;
    bottom: auto;
    height: 30px;
    width: auto;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0) 100%);
}

.drk-sg-spine {
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 10px; 
    left: 0; 
    z-index: 3; 
    pointer-events: none; 
    background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0) 100%); 
    border-left: 1px solid rgba(0,0,0,0.05);
}

.drk-sg-spread-container.horizontal .drk-sg-spine {
    left: 0; 
    right: 0; 
    top: 0; 
    width: auto; 
    bottom: auto; 
    height: 10px; 
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0) 100%); 
    border-left: none; 
    border-top: 1px solid rgba(0,0,0,0.05);
}

.drk-sg-back-flap {
    position: absolute; 
    top: 0px; 
    right: -6px; 
    bottom: 2px; 
    left: 4px; 
    background: #f1f1f1; 
    z-index: 1; 
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1); 
    border-radius: 0 2px 2px 0; 
    transform-origin: left center;
    transform: rotateY(-25deg) skewY(-2deg);
}

.drk-sg-spread-container.horizontal .drk-sg-back-flap {
    top: 4px;
    right: 2px;
    bottom: -6px;
    left: 0px;
    border-radius: 0 0 2px 2px;
    /* Base rule's rotateY/left-hinge is the vertical-fold tilt (rotates around a
       vertical axis at the left edge) - a horizontal fold hinges at the top edge
       instead, so it needs the rotated axis (rotateX) and origin, not just the
       flat position swap above. */
    transform-origin: center top;
    transform: rotateX(-25deg) skewX(-2deg);
}


.thumb-spread-wrap.closed {
    box-shadow: 1px 4px 12px rgba(0,0,0,0.15);
}

.thumb-spread-wrap.closed .thumb-panel-wrapper {
    z-index: 2; 
    position: relative;
}

.thumb-spread-wrap {
    position: relative;
}

.drk-sg-spread-container.closed {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 2px 10px 30px rgba(0,0,0,0.15), 0 1px 8px rgba(0,0,0,0.05);
}

/* Panel width follows its own image's aspect ratio at a shared row height -
   not a forced equal half. Correct for FoldOut's asymmetric square-flap/
   wide-base split; visually unchanged for BiFold, whose two images already
   happen to be roughly equal. */
.drk-sg-spread-container:not(.closed) .drk-sg-panel {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.drk-sg-spread-container.closed .drk-sg-panel {
    z-index: 2;
    position: relative;
}

.drk-sg-spread-container:not(.closed) .drk-sg-panel img {
    width: auto;
    max-width: 100%;
    height: 60vh;
    max-height: 60vh;
    display: block;
    object-fit: contain;
}

/* Closed single panel: constrain to a sensible max width, let height follow */
.drk-sg-spread-container.closed .drk-sg-panel img {
    width: auto;
    height: auto;
    max-height: 60vh;
    max-width: 100%;
    display: block;
}

/* Flat single panel */
.drk-sg-single img {
    width: auto;
    height: auto;
    max-height: 60vh;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

.nav-arrow {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: rgba(255,255,255,0.8); 
    border: none; 
    border-radius: 50%; 
    width: 40px; 
    height: 40px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    z-index: 10; 
    transition: all 0.2s;
}
.price{
    .drk-total-display-wrapper{
        .woocommerce-Price-amount{
            display: block !important;
        }
    }
}
.price{
    .woocommerce-Price-amount{
        display: none !important;
    }
}
.single_add_to_cart_button{
    background-color: #C48257;
}
/* The real add-to-cart <button> (design_id state) - the earlier "Primary CTA Button"
   rule only matches <a href="..."> variants (the browse-state hijacked link), so this
   gets its own pill/icon treatment to match. */
button.single_add_to_cart_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 30px);
    margin: 0 13px;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 15px 25px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
button.single_add_to_cart_button::before {
    content: 'shopping_cart';
    font-family: 'Material Icons';
    margin-right: 10px;
    font-size: 20px;
    /* Without this, the parent's text-transform: uppercase cascades into the ligature
       text itself ("shopping_cart" -> "SHOPPING_CART"), which Material Icons can't
       match as a valid ligature - it then falls back to rendering the literal text
       instead of the glyph (same reason the existing "edit" icon rule has this too). */
    text-transform: none;
}
/* "Terug naar bewerken" - secondary/outline pill, same family as .drk-calc-trigger-btn.
   Also carries class="button" (Flatsome's own button styles), so background/border/color
   need !important to reliably win regardless of theme stylesheet load order - same
   reasoning as the !important usage throughout the "Primary CTA Button" rule above. */
.drk-edit-design-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: transparent !important;
    color: var(--clay-dark, var(--drk-primary-hover, #95602F)) !important;
    border: 1px solid var(--clay-dark, var(--drk-primary-hover, #95602F)) !important;
    border-radius: 999px !important;
    padding: 15px 25px !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none !important;
}
.drk-edit-design-button:hover {
    background: var(--cream, var(--drk-menu, #F7F1E7)) !important;
    color: var(--clay-dark, var(--drk-primary-hover, #95602F)) !important;
}
.drk-edit-design-button .material-icons {
    font-size: 18px;
}
/* design_id-state action card: total price + quantity stepper row, then the
   add-to-cart button, then "Terug naar bewerken" - all stacked full-width in a
   white rounded card, matching the browse-state .product-actions card above. */
.product-add-to-cart-actions{
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 16px;
    background: var(--white);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid var(--stone-line);
    box-sizing: border-box;

    /* Neutralize Bootstrap's .row negative side-margins/flex-wrap so the quantity
       row and button row stay contained within this card's padding. */
    .row {
        display: block;
        width: 100%;
        margin: 0;
    }

    .quantity-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .drk-total-display-wrapper {
        display: flex;
        flex-direction: column;
        padding-left: 15px;
    }
    /* CSS-only label above the price, matching the "TOTAALPRIJS" heading in the
       redesign without needing a markup change. */
    .drk-total-display-wrapper::before {
        content: "Totaalprijs";
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-faint, #8C8674);
        margin-bottom: 2px;
    }
    .drk-total-value .woocommerce-Price-amount.amount{
        font-weight: bold;
        font-size: 1.6em;
        color: var(--ink, var(--drk-tertiary, #2E2A22));
    }

    /* Quantity stepper: rounded pill, cream background, flat +/- buttons either side
       of the number - replaces the old fixed-height/inline-block universal rules. */
    .ux-quantity {
        flex: 1!important;
        >*{
            flex: 1;
            height: 54px;
        }
        display: flex;
        align-items: center;
        background: var(--cream) !important;
        border: 1px solid var(--stone-line);
        border-radius: 999px !important;
        overflow: hidden;
        padding: 0;
        box-sizing: border-box;
        .button{
            width: 44px;
        }
    }
    /* The -/+ steppers are <input type="button">, which also carry WooCommerce's own
       .button/.is-form classes - those (and native OS button chrome) need stripping
       with !important + appearance:none, same cascade-fight reasoning as the
       "Terug naar bewerken" button elsewhere in this file. */
    .ux-quantity__button {
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: 54px;
        height: 54px;
        line-height: 54px;
        padding: 0;
        margin: 0;
        font-size: 18px;
        font-weight: bold;
        color: var(--clay-dark, var(--drk-primary-hover, #95602F)) !important;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }
    .ux-quantity__button:hover {
        background: var(--clay-tint, #EFDCC8) !important;
    }
    .ux-quantity__button:focus-visible {
        outline: 2px solid var(--clay-dark, var(--drk-primary-hover, #95602F));
        outline-offset: -2px;
    }
    .ux-quantity .qty {
        appearance: none !important;
        -moz-appearance: textfield !important;
        flex: 1;
        height: 54px;
        line-height: 54px;
        padding: 0;
        max-width: none;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        color: var(--ink, var(--drk-tertiary, #2E2A22));
    }
    .ux-quantity .qty::-webkit-outer-spin-button,
    .ux-quantity .qty::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }


}
.nav-arrow:hover {
    background: #fff; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.nav-arrow.prev {
    left: 20px;
}

.nav-arrow.next {
    right: 20px;
}

.drk-sg-status {
    position: absolute; 
    bottom: 10px; 
    left: 130px; 
    font: 12px Arial, sans-serif; 
    color: #999;
}

.price-loading { opacity: 0.5; pointer-events: none; }

/* drk-design-viewer: live read-only render of a saved user_design on the product page */
.drk-design-viewer {
    display: flex;
    gap: 20px;
    padding: 0 30px 30px 0;
    border-radius: 8px;
    margin-bottom: 30px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.drk-design-viewer.bottom {
    flex-direction: column;
    align-items: center;
}

.drk-design-viewer.left {
    align-items: stretch;
}

.drk-dv-main-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--paper);
    padding: 13px 20px 40px 20px;
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--stone-line);
}

.drk-dv-main-viewport {
    position: relative;
    img{
        max-width: none !important;
    }
}

/* Mirrors .drk-sg-spread-container: same "physical card" depth effects (shadow,
   fold crease, spine, back-flap) as the smart-gallery, applied here to the
   live-rendered clone instead of a flattened panel image. Shared by the main
   viewport and every thumbnail since both go through the same renderInto().
   Deliberately skips the sheen (radial-gradient ::after) smart-gallery also has -
   that rule only looks fine there because it sits on a rasterized JPEG panel, whose
   compression noise hides the gradient's banding; on this component's flat CSS
   background (real DOM, no JPEG) the exact same gradient visibly bands into rings,
   worst on a blank page (e.g. an empty Achterkant) with nothing else to mask it. */
.drk-dv-clone {
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1), 0 1px 8px rgba(0,0,0,0.05);
}

/* Closed (single-panel) views get a stronger "standalone card" shadow, matching
   .drk-sg-spread-container.closed - the open full-spread view keeps the gentler one above. */
.drk-dv-clone.closed {
    box-shadow: 2px 10px 30px rgba(0,0,0,0.15), 0 1px 8px rgba(0,0,0,0.05);
}

.drk-dv-panel {
    overflow: hidden;
    background: white;
    z-index: 1;
}

.drk-dv-crease {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 400;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0) 100%);
}

.drk-dv-crease.horizontal {
    left: 0;
    right: 0;
    top: 50%;
    width: auto;
    height: 30px;
    transform: translateY(-50%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0) 100%);
}

.drk-dv-spine {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    left: 0;
    z-index: 400;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0) 100%);
    border-left: 1px solid rgba(0,0,0,0.05);
}

.drk-dv-spine.horizontal {
    left: 0;
    right: 0;
    top: 0;
    width: auto;
    bottom: auto;
    height: 10px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0) 100%);
    border-left: none;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.drk-dv-back-flap {
    position: absolute;
    top: 0;
    right: -6px;
    bottom: 2px;
    left: 4px;
    background: #f1f1f1;
    z-index: 0;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    border-radius: 0 2px 2px 0;
    transform-origin: left center;
    transform: rotateY(-25deg) skewY(-2deg);
    pointer-events: none;
}

.drk-dv-back-flap.horizontal {
    top: 4px;
    right: 2px;
    bottom: -6px;
    left: 0px;
    border-radius: 0 0 2px 2px;
    /* Base rule's rotateY/left-hinge is the vertical-fold tilt (vertical axis at
       the left edge) - a horizontal fold hinges at the top edge instead, so it
       needs the rotated axis (rotateX) and origin, not just the position swap. */
    transform-origin: center top;
    transform: rotateX(-25deg) skewX(-2deg);
}

.drk-design-viewer.bottom .drk-dv-thumbnails {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-top: 16px;
    justify-content: center;
}

.drk-design-viewer.left .drk-dv-thumbnails {
    width: 100px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 5;
}

.drk-dv-thumb {
    cursor: pointer;
    background: #fff;
    border-radius: 4px;
    text-align: center;
    transition: all 0.2s;
    outline: 1px solid var(--stone-line);
}

.drk-dv-thumb.active {
    outline: 2px solid var(--clay);
}

.drk-dv-thumb-preview {

    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 2px;
    padding: 8px;
}

.drk-dv-thumb-viewport {
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.drk-dv-thumb-label {
    font: 11px/1.4 Arial, sans-serif;
    color: var(--clay);
    margin-top: 4px;
}

.drk-dv-thumb.active .drk-dv-thumb-label {
    font-weight: bold;
}

.drk-dv-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.8);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 10;
    transition: all 0.2s;
}

.drk-dv-nav:hover {
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.drk-dv-nav.prev { left: 10px; }
.drk-dv-nav.next { right: 10px; }

/* Digitale rouwkaart toggle on the order page (DigitalCardService::renderToggle()). */
.drk-digital-card {
    margin: 14px 0;
}
.drk-digital-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    background: var(--white);
    border: 1px solid var(--stone-line);
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.drk-digital-toggle:hover {
    border-color: var(--sage-soft);
}
.drk-digital-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--clay-tint);
}
.drk-digital-card.is-on .drk-digital-toggle {
    border-color: var(--sage);
}
.drk-digital-text {
    min-width: 0;
}
.drk-digital-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--charcoal);
    line-height: 1.3;
}
.drk-digital-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--clay-dark);
}
.drk-digital-price .woocommerce-Price-amount {
    color: inherit;
}
.drk-digital-hint {
    margin-top: 2px;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.4;
}
.drk-digital-hint[hidden] {
    display: none;
}
.drk-digital-track {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 24px;
    padding: 3px;
    border-radius: 999px;
    background: var(--stone-line);
    transition: background .15s ease;
}
.drk-digital-knob {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}
.drk-digital-card.is-on .drk-digital-track {
    background: var(--clay);
}
.drk-digital-card.is-on .drk-digital-knob {
    transform: translateX(18px);
}


/* Dynamische thumbnail (DynamicThumbnailService::render()): the customer's
   own design as a product thumbnail, in the gallery's place. */
.drk-dynamic-thumb {
    margin-bottom: 30px;
}
.drk-dynamic-thumb-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    background: var(--paper);
    border: 1px solid var(--stone-line);
    border-radius: 12px;
    overflow: hidden;
}
.drk-dynamic-thumb-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 720px;
    object-fit: contain;
    transition: opacity .35s ease, filter .35s ease;
}
.drk-dynamic-thumb-img[hidden] {
    display: none;
}
.drk-dynamic-thumb-placeholder {
    opacity: .45;
    filter: blur(2px) saturate(.8);
    max-width: 70%;
    padding: 30px 0;
}
.drk-dynamic-thumb-status {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--white);
    box-shadow: 0 4px 18px rgba(33, 31, 26, .12);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
}
.drk-dynamic-thumb.is-failed .drk-dynamic-thumb-status {
    position: static;
    transform: none;
    box-shadow: none;
    margin: 30px auto;
}
.drk-dynamic-thumb-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--stone-line);
    border-top-color: var(--clay);
    animation: drk-dynamic-thumb-spin .8s linear infinite;
}
.drk-dynamic-thumb.is-failed .drk-dynamic-thumb-spinner {
    display: none;
}
@keyframes drk-dynamic-thumb-spin {
    to { transform: rotate(360deg); }
}

/* Fotovergroting bij een kaart (PhotoEnlargementService). Zelfde blokvorm als
   de digitale rouwkaart erboven: een keuze die bij de bestelling hoort. */
.drk-photo-sizes { margin: 14px 0 0; padding: 14px 16px; border: 1px solid #E5DED3; border-radius: 14px; background: #fff; }
.drk-photo-sizes.is-on { border-color: #C1633B; background: #FCF7F3; }
.drk-photo-wanted { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; }
.drk-photo-wanted input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: #C1633B; flex: none; }
.drk-photo-wanted-text strong { display: block; font-size: 15px; }
.drk-photo-wanted-text small { display: block; color: #6B625C; font-size: 13px; }
.drk-photo-sizes-head { margin: 14px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6B625C; }
.drk-photo-size { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; }
.drk-photo-size input { width: 17px; height: 17px; accent-color: #C1633B; margin: 0; }
.drk-photo-size-label { flex: 1; font-size: 14px; }
.drk-photo-size-price { font-weight: 700; font-size: 14px; }
.drk-photo-frame { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1px solid #EFE8E0; cursor: pointer; }
.drk-photo-frame input { width: 17px; height: 17px; accent-color: #C1633B; margin: 0; }
.drk-photo-frame span:nth-of-type(1) { flex: 1; font-size: 14px; }
.drk-photo-frame-price { font-weight: 700; font-size: 14px; }