.dpf,
.dpf-layout,
.dpf-sticky,
.dpf-diagram{
    overflow:visible!important;
}

.dpf{
    position:relative;
    width:calc(100vw - 24px)!important;
    max-width:1920px!important;
    box-sizing:border-box;
    margin:0 calc(50% - 50vw) 70px!important;
    padding:0 12px;
}

@media (min-width: 1921px){
    .dpf{
        width:1920px!important;
        margin-left:calc(50% - 960px)!important;
        margin-right:calc(50% - 960px)!important;
    }
}

.dpf>h2{
    margin:0 0 8px;
    font-size:64px;
    line-height:1.15;
    color:#111;
}

.dpf>p{
    margin:0 0 28px;
    color:#555;
    font-size:22px;
    line-height:1.5;
}

.dpf-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:40px;
    align-items:start;
    justify-items:center;
    box-sizing:border-box;
    padding-left:24px;
    padding-right:24px;
}

.dpf-sticky{
    position:sticky;
    top:32px; /* JS increases this when needed to vertically center the sticky diagram */
}

/* Larger left-side diagram */
.dpf-diagram{
    position:relative;
    width:100%;
    margin:0 auto;
    container-type:inline-size;
}

.dpf-list{
    max-width:760px;
    width:100%;
    justify-self:center;
}


@media (min-width: 901px){
    .dpf-sticky{
        display:flex;
        justify-content:center;
        align-items:flex-start;
        padding-top:0;
        padding-bottom:0;
    }

    .dpf-diagram{
        max-width:100%;
    }

    .dpf-sticky,
    .dpf-list{
        width:100%;
    }
}


.dpf-diagram>img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:calc(100vh - 64px);
    object-fit:contain;
    cursor:zoom-in;
}

/* Responsive diagram sizing: the image follows both browser width and height. */
@media (max-width: 900px){
    .dpf-diagram{
        width:100%!important;
        max-width:100%!important;
    }

    .dpf-diagram>img{
        width:100%!important;
        max-width:100%!important;
        max-height:none;
        object-fit:contain;
    }
}

@media (max-width: 600px){
    .dpf{
        padding-left:6px;
        padding-right:6px;
    }

    .dpf-diagram>img{
        width:100%!important;
        height:auto!important;
    }
}

.dpf-empty{
    padding:85px 25px;
    background:#f5f5f5;
    text-align:center;
}


/* NUMBERED HOTSPOTS */
.dpf-hot{
    position:absolute;
    width:clamp(24px,4.2cqw,42px);
    height:clamp(24px,4.2cqw,42px);
    margin-left:calc(clamp(24px,4.2cqw,42px) / -2);
    margin-top:calc(clamp(24px,4.2cqw,42px) / -2);
    z-index:20;
}


/* Keep edge callout circles fully inside the visible diagram. */
.dpf-hot.dpf-edge-left{ margin-left:0!important; }
.dpf-hot.dpf-edge-right{ margin-left:calc(clamp(24px,4.2cqw,42px) * -1)!important; }
.dpf-hot.dpf-edge-top{ margin-top:0!important; }
.dpf-hot.dpf-edge-bottom{ margin-top:calc(clamp(24px,4.2cqw,42px) * -1)!important; }

.dpf-hot:hover,
.dpf-hot.open{
    z-index:100000;
}

.dpf-num,
.dpf-rownum{
    display:flex;
    box-sizing:border-box;
    align-items:center;
    justify-content:center;
    padding:0;
    border-radius:50%;
    font-weight:700;
    line-height:1;
}

/* Image callout numbers scale with the actual diagram width. */
.dpf-num{
    width:clamp(24px,4.2cqw,42px);
    height:clamp(24px,4.2cqw,42px);
    border:0!important;
    background:#6B35A0!important;
    color:#fff!important;
    font-size:clamp(11px,1.75cqw,17px);
    cursor:pointer;
    transition:transform .2s ease;
}

/* Shop-list numbers remain consistent for readability. */
.dpf-rownum{
    width:40px;
    height:40px;
    border:2px solid #6B35A0;
    background:transparent!important;
    color:#6B35A0!important;
    font-size:17px;
}

.dpf-hot:hover .dpf-num,
.dpf-hot.open .dpf-num{
    background:#6B35A0!important;
    color:#fff!important;
    border:0!important;
    transform:translateY(-4px);
}


/* HOVER CARD */
.dpf-pop{
    position:absolute;
    top:50%;
    width:310px;
    max-height:72vh;
    overflow-y:auto;
    overflow-x:hidden;
    background:#fff;
    border:1px solid #e1e1e1;
    border-radius:10px;
    box-shadow:0 12px 35px rgba(0,0,0,.20);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-50%);
    transition:opacity .16s ease,visibility .16s ease;
    z-index:100001;
}

.dpf-hot.left .dpf-pop{
    right:48px;
}

.dpf-hot.right .dpf-pop{
    left:48px;
}

/* Bottom callouts open upward instead of running off the page */
.dpf-hot.dpf-bottom .dpf-pop{
    top:auto;
    bottom:-4px;
    transform:none;
}

.dpf-hot:hover .dpf-pop,
.dpf-hot.open .dpf-pop,
.dpf-hot:focus-within .dpf-pop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}


/* PRODUCT CARD — FULL-BLEED IMAGE */
.dpf-pop .dpf-product{
    padding:0 0 16px;
    border-bottom:1px solid #eee;
    text-align:center;
}

.dpf-pop .dpf-product:last-child{
    border-bottom:0;
}

/* Image touches left/right/top edges of card */
.dpf-pop .dpf-product>a:first-child{
    display:block;
    width:100%;
    height:205px;
    margin:0 0 14px;
    padding:0;
    background:#fafafa;
    border-radius:10px 10px 0 0;
    overflow:hidden;
}

.dpf-pop .dpf-product img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    object-fit:contain!important;
}

.dpf-pop .dpf-title{
    display:block!important;
    margin:0 15px 7px;
    color:#111!important;
    font-size:15px;
    font-weight:600;
    line-height:1.35;
    text-align:center!important;
    text-decoration:none!important;
}

.dpf-pop .dpf-price{
    display:block;
    margin:0 15px 13px;
    color:#111;
    font-size:17px;
    font-weight:700;
    text-align:center!important;
}

.dpf-pop .dpf-qty{
    display:grid;
    grid-template-columns:42px 1fr 42px;
    width:calc(100% - 30px);
    height:42px;
    margin:0 auto 9px;
    border:1px solid #ddd;
    border-radius:6px;
    overflow:hidden;
}

.dpf-qty button{
    padding:0;
    border:0;
    background:#f5f5f5;
    color:#111;
    cursor:pointer;
}

.dpf-qty input{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-right:1px solid #ddd!important;
    border-left:1px solid #ddd!important;
    border-radius:0!important;
    background:#fff!important;
    text-align:center!important;
    box-shadow:none!important;
}

.dpf-pop .dpf-add,
.dpf-pop .dpf-view{
    display:flex!important;
    width:calc(100% - 30px)!important;
    min-height:42px;
    box-sizing:border-box;
    align-items:center!important;
    justify-content:center!important;
    margin:0 auto!important;
    padding:10px 14px!important;
    border:0!important;
    border-radius:6px!important;
    background:#111!important;
    color:#fff!important;
    font-size:17px;
    font-weight:700;
    line-height:1.1;
    text-align:center!important;
    text-decoration:none!important;
    cursor:pointer;
}

.dpf-add.is-loading{
    opacity:.65;
    cursor:wait;
}


/* Smaller Coming Soon card */
.dpf-pop .dpf-coming{
    padding:14px;
    text-align:center;
}

.dpf-pop .dpf-coming strong{
    display:block;
    margin:0 0 8px;
    color:#111;
    font-size:15px;
    line-height:1.3;
}

.dpf-pop .dpf-coming span{
    display:inline-block;
    width:auto;
    min-width:90px;
    padding:6px 11px;
    border-radius:16px;
    background:#f3f3f3;
    color:#777;
    font-size:13px;
    font-weight:600;
    line-height:1.2;
    text-align:center;
}


/* RIGHT-SIDE LIST */
.dpf-list{
    border-top:0;
    margin-left:auto;
    margin-right:auto;
}

.dpf-row{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:14px;
    align-items:start;
    padding:17px 0;
    border-bottom:1px solid #ddd;
}

.dpf-rownum{
    margin-top:1px;
}

.dpf-row>div:last-child{
    min-width:0;
}

.dpf-row .dpf-product{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"title price action";
    gap:16px;
    align-items:center;
    min-height:42px;
    padding:0;
    border:0;
    text-align:left;
}

.dpf-row .dpf-product + .dpf-product{
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid #eee;
}

/* Critical fix: title remains visible in the list */
.dpf-row .dpf-title{
    display:block!important;
    grid-area:title;
    margin:0!important;
    color:#111!important;
    font-size:22px;
    font-weight:600;
    line-height:1.45;
    text-align:left!important;
    text-decoration:none!important;
}

.dpf-row .dpf-price{
    grid-area:price;
    margin:0;
    color:#111;
    font-size:20px;
    font-weight:700;
    white-space:nowrap;
    text-align:right!important;
}

.dpf-row .dpf-price .woocommerce-Price-amount{
    font-size:20px;
}

.dpf-row .dpf-add,
.dpf-row .dpf-view{
    display:flex!important;
    grid-area:action;
    width:auto!important;
    min-width:72px;
    min-height:42px;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    margin:0!important;
    padding:10px 16px!important;
    border:0!important;
    border-radius:5px!important;
    background:#111!important;
    color:#fff!important;
    font-size:17px;
    font-weight:700;
    line-height:1;
    text-decoration:none!important;
    white-space:nowrap;
}

.dpf-row .dpf-coming{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:0;
    text-align:left;
}

.dpf-row .dpf-coming strong{
    display:block;
    margin:0;
    color:#111;
    font-size:21px;
    font-weight:600;
}

.dpf-row .dpf-coming span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:9px 14px;
    border-radius:20px;
    background:#f3f3f3;
    color:#777;
    font-size:16px;
    font-weight:700;
    white-space:nowrap;
}

.dpf-row .dpf-product>strong{
    font-size:21px;
}

.dpf-row .dpf-product>span{
    color:#777;
    font-size:12px;
}



@media(max-width:700px){
    .dpf-diagram{
        width:100%;
    }

    .dpf-pop,
    .dpf-hot.dpf-bottom .dpf-pop{
        position:fixed!important;
        left:50%!important;
        right:auto!important;
        top:50%!important;
        bottom:auto!important;
        width:min(310px,calc(100vw - 30px));
        transform:translate(-50%,-50%)!important;
    }

    .dpf-row .dpf-product{
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-areas:
            "title price"
            "action action";
    }

    .dpf-row .dpf-add,
    .dpf-row .dpf-view{
        width:100%!important;
    }
}


.dpf-list{
    min-width:0;
}

.dpf-row{
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    align-items:start;
    gap:20px;
    padding:24px 0;
    border-top:1px solid #e6e6e6;
}

.dpf-row:first-child{
    border-top:0;
}

@media (max-width: 1200px){
    .dpf-layout{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        gap:28px;
    }

    .dpf-list{
        max-width:100%;
    }
}

@media (max-width: 900px){
    .dpf{
        width:calc(100vw - 16px)!important;
        margin:0 calc(50% - 50vw) 56px!important;
        padding:0 8px;
    }

    .dpf-layout{
        grid-template-columns:minmax(0,1fr);
        gap:30px;
    }

    .dpf-sticky{
        position:static;
        margin-bottom:10px;
    }

    .dpf-list{
        max-width:none;
        justify-self:stretch;
        margin-top:10px;
        border-top:0;
    }

    .dpf-row:first-child{
        border-top:0;
        padding-top:0;
    }
}

@media (max-width: 700px){
    .dpf>h2{
        font-size:42px;
    }

    .dpf>p{
        font-size:18px;
    }

    .dpf-rownum{
        width:34px;
        height:34px;
        font-size:14px;
    }
}



/* Keep product popups fully visible on smaller or shorter screens. */
@media (max-width: 1600px), (max-height: 900px){
    .dpf-hot .dpf-pop,
    .dpf-hot.left .dpf-pop,
    .dpf-hot.right .dpf-pop,
    .dpf-hot.dpf-bottom .dpf-pop{
        position:fixed!important;
        left:50%!important;
        right:auto!important;
        top:50%!important;
        bottom:auto!important;
        width:min(380px,calc(100vw - 36px))!important;
        max-width:calc(100vw - 36px)!important;
        max-height:calc(100dvh - 40px)!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        transform:translate(-50%,-50%)!important;
        overscroll-behavior:contain;
        z-index:1000001!important;
    }
}

.dpf-zoom{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:28px;
    background:rgba(0,0,0,.82);
    z-index:1000000;
}

.dpf-zoom.is-open{
    display:flex;
}

.dpf-zoom-inner{
    position:relative;
    width:min(96vw, 1500px);
    max-height:92vh;
}

.dpf-zoom img{
    display:block;
    width:100%;
    height:auto;
    max-height:92vh;
    object-fit:contain;
    background:#fff;
    border-radius:10px;
}

.dpf-zoom-close{
    position:absolute;
    top:-14px;
    right:-14px;
    width:38px;
    height:38px;
    border:0;
    border-radius:999px;
    background:#fff;
    color:#111;
    font-size:28px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 4px 18px rgba(0,0,0,.25);
}

.dpf-zoom-note{
    margin-top:10px;
    color:#fff;
    font-size:14px;
    text-align:center;
}


/* v1.3.14 — mobile-first responsive sizing */
@media (max-width: 900px){
    .dpf{
        width:100vw!important;
        max-width:100vw!important;
        margin:0 calc(50% - 50vw) 48px!important;
        padding:0!important;
    }

    .dpf-layout{
        display:block;
        width:100%;
        padding-left:0;
        padding-right:0;
    }

    .dpf-sticky{
        width:100vw!important;
        max-width:100vw!important;
        margin:0 0 clamp(26px,7vw,44px)!important;
        padding:0!important;
    }

    .dpf-diagram{
        width:100vw!important;
        max-width:100vw!important;
        margin:0!important;
    }

    .dpf-diagram>img{
        display:block!important;
        width:100vw!important;
        max-width:100vw!important;
        height:auto!important;
        max-height:none!important;
        object-fit:contain!important;
    }

    .dpf-list{
        width:calc(100% - clamp(28px,7vw,56px));
        max-width:none!important;
        margin:0 auto!important;
        padding-left:2px;
        padding-right:2px;
        box-sizing:border-box;
        border-top:0!important;
    }

    .dpf-row{
        grid-template-columns:clamp(30px,8vw,38px) minmax(0,1fr);
        gap:clamp(10px,3vw,16px);
        padding:clamp(12px,3.6vw,20px) 0;
    }

    .dpf-rownum{
        width:clamp(30px,8vw,38px);
        height:clamp(30px,8vw,38px);
        font-size:clamp(12px,3.4vw,16px);
        border-width:2px;
    }

    .dpf-row .dpf-product{
        gap:clamp(8px,2.5vw,14px);
        min-height:0;
    }

    .dpf-row .dpf-title,
    .dpf-row .dpf-coming strong,
    .dpf-row .dpf-product>strong{
        font-size:clamp(15px,4.2vw,20px)!important;
        line-height:1.3;
    }

    .dpf-row .dpf-price,
    .dpf-row .dpf-price .woocommerce-Price-amount{
        font-size:clamp(14px,3.8vw,18px)!important;
    }

    .dpf-row .dpf-add,
    .dpf-row .dpf-view{
        min-width:0;
        min-height:clamp(34px,10vw,42px);
        padding:clamp(8px,2.2vw,10px) clamp(10px,3vw,14px)!important;
        font-size:clamp(13px,3.6vw,16px)!important;
    }

    .dpf-row .dpf-coming span{
        min-height:clamp(32px,9vw,38px);
        padding:clamp(7px,2vw,9px) clamp(10px,3vw,13px);
        font-size:clamp(12px,3.3vw,15px)!important;
    }

    .dpf-row .dpf-product>span{
        font-size:clamp(11px,3vw,13px);
    }
}

@media (max-width: 520px){
    .dpf-list{
        width:calc(100% - 20px);
    }

    .dpf-row .dpf-product{
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-areas:
            "title price"
            "action action";
    }

    .dpf-row .dpf-coming{
        grid-template-columns:minmax(0,1fr) auto;
        gap:10px;
    }
}


/* Zoom keeps the numbered callouts aligned with the diagram. */
.dpf-zoom{
    overflow:auto;
}

.dpf-zoom-inner{
    width:auto;
    max-width:96vw;
    max-height:94dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.dpf-zoom-stage{
    position:relative;
    max-width:96vw;
    max-height:88dvh;
}

.dpf-zoom-stage .dpf-diagram{
    position:relative;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    container-type:inline-size;
}

.dpf-zoom-stage .dpf-diagram>img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    cursor:default;
}

.dpf-zoom-stage .dpf-hot{
    pointer-events:none;
}

.dpf-zoom-stage .dpf-num{
    pointer-events:none;
}

.dpf-zoom-note{
    margin-top:10px;
}


/* v1.3.17 — compact viewport-safe popup cards */
@media (max-width: 900px){
    .dpf-hot .dpf-pop,
    .dpf-hot.left .dpf-pop,
    .dpf-hot.right .dpf-pop,
    .dpf-hot.dpf-bottom .dpf-pop{
        position:fixed!important;
        left:50%!important;
        right:auto!important;
        top:50%!important;
        bottom:auto!important;
        width:min(72vw,260px)!important;
        max-width:calc(100vw - 28px)!important;
        max-height:60dvh!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        transform:translate(-50%,-50%)!important;
        border-radius:8px;
        overscroll-behavior:contain;
        z-index:1000002!important;
    }

    .dpf-pop .dpf-product{
        padding-bottom:10px;
    }

    .dpf-pop .dpf-product>a:first-child{
        height:clamp(90px,25vw,125px);
        margin-bottom:8px;
    }

    .dpf-pop .dpf-title{
        margin:0 10px 4px;
        font-size:clamp(12px,3.3vw,14px);
        line-height:1.22;
    }

    .dpf-pop .dpf-price{
        margin:0 10px 8px;
        font-size:clamp(13px,3.5vw,15px);
    }

    .dpf-pop .dpf-qty{
        grid-template-columns:32px 1fr 32px;
        width:calc(100% - 20px);
        height:34px;
        margin-bottom:7px;
    }

    .dpf-pop .dpf-qty input{
        height:34px!important;
        font-size:13px!important;
    }

    .dpf-pop .dpf-add,
    .dpf-pop .dpf-view{
        width:calc(100% - 20px)!important;
        min-height:34px;
        padding:7px 10px!important;
        font-size:13px!important;
    }

    .dpf-pop .dpf-coming{
        padding:10px;
    }

    .dpf-pop .dpf-coming strong{
        font-size:13px;
        line-height:1.25;
    }

    .dpf-pop .dpf-coming span{
        min-width:0;
        padding:5px 8px;
        font-size:11px;
    }
}

@media (max-width: 520px){
    .dpf-hot .dpf-pop,
    .dpf-hot.left .dpf-pop,
    .dpf-hot.right .dpf-pop,
    .dpf-hot.dpf-bottom .dpf-pop{
        width:min(68vw,235px)!important;
        max-width:calc(100vw - 24px)!important;
        max-height:56dvh!important;
    }

    .dpf-pop .dpf-product>a:first-child{
        height:95px;
    }

    .dpf-pop .dpf-title{
        font-size:12px;
    }

    .dpf-pop .dpf-price{
        font-size:13px;
    }
}

@media (max-width: 380px){
    .dpf-hot .dpf-pop,
    .dpf-hot.left .dpf-pop,
    .dpf-hot.right .dpf-pop,
    .dpf-hot.dpf-bottom .dpf-pop{
        width:min(74vw,220px)!important;
        max-height:54dvh!important;
    }

    .dpf-pop .dpf-product>a:first-child{
        height:82px;
    }
}



/* v1.3.18 — mobile containment fix: use the real available page width, not 100vw. */
@media (max-width: 900px){
    .dpf{
        width:100%!important;
        max-width:100%!important;
        margin:0 auto 48px!important;
        padding:0!important;
        box-sizing:border-box!important;
        overflow-x:hidden!important;
    }

    .dpf-layout{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        padding:0!important;
        margin:0!important;
        box-sizing:border-box!important;
    }

    .dpf-sticky{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:0 0 clamp(24px,6vw,38px)!important;
        padding:0!important;
        box-sizing:border-box!important;
    }

    .dpf-diagram{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:0 auto!important;
        box-sizing:border-box!important;
    }

    .dpf-diagram>img{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        height:auto!important;
        max-height:none!important;
        object-fit:contain!important;
    }

    .dpf-list{
        width:calc(100% - clamp(20px,5vw,36px))!important;
        max-width:100%!important;
        min-width:0!important;
        margin:0 auto!important;
        padding:0!important;
        box-sizing:border-box!important;
        overflow:visible!important;
    }

    .dpf-row,
    .dpf-row>div:last-child,
    .dpf-row .dpf-product,
    .dpf-row .dpf-coming{
        min-width:0!important;
        max-width:100%!important;
        box-sizing:border-box!important;
    }

    .dpf-row .dpf-title,
    .dpf-row .dpf-coming strong,
    .dpf-row .dpf-product>strong{
        overflow-wrap:anywhere;
        word-break:normal;
    }
}


/* v1.3.20 — refined mobile spacing and professional responsive list typography */
@media (max-width: 900px){
    .dpf-sticky{
        margin:0 0 clamp(34px,8vw,58px)!important;
    }

    .dpf-list{
        width:calc(100% - clamp(24px,6vw,44px))!important;
        margin:clamp(8px,2.4vw,14px) auto 0!important;
    }

    .dpf-row{
        grid-template-columns:clamp(30px,7.2vw,36px) minmax(0,1fr)!important;
        gap:clamp(12px,3.2vw,18px)!important;
        padding:clamp(14px,3.8vw,22px) 0!important;
    }

    .dpf-rownum{
        width:clamp(30px,7.2vw,36px)!important;
        height:clamp(30px,7.2vw,36px)!important;
        font-size:clamp(12px,3.1vw,15px)!important;
        border-width:1.8px!important;
    }

    .dpf-row .dpf-product{
        gap:clamp(8px,2.2vw,14px)!important;
        align-items:start!important;
    }

    .dpf-row .dpf-title,
    .dpf-row .dpf-coming strong,
    .dpf-row .dpf-product>strong{
        font-size:clamp(15px,4.2vw,18px)!important;
        line-height:1.28!important;
        font-weight:600!important;
        letter-spacing:0!important;
    }

    .dpf-row .dpf-price,
    .dpf-row .dpf-price .woocommerce-Price-amount{
        font-size:clamp(14px,3.8vw,16px)!important;
        line-height:1.2!important;
        font-weight:700!important;
    }

    .dpf-row .dpf-add,
    .dpf-row .dpf-view{
        min-width:clamp(52px,15vw,66px)!important;
        min-height:clamp(32px,8.4vw,38px)!important;
        padding:clamp(7px,2.2vw,9px) clamp(10px,2.8vw,13px)!important;
        font-size:clamp(12px,3.2vw,14px)!important;
        line-height:1!important;
        border-radius:6px!important;
    }

    .dpf-row .dpf-coming{
        gap:clamp(10px,2.8vw,14px)!important;
        align-items:center!important;
    }

    .dpf-row .dpf-coming span{
        min-height:clamp(28px,8vw,34px)!important;
        padding:clamp(6px,1.8vw,8px) clamp(9px,2.6vw,12px)!important;
        font-size:clamp(11px,3vw,13px)!important;
        font-weight:700!important;
        border-radius:18px!important;
    }
}

@media (max-width: 520px){
    .dpf-sticky{
        margin-bottom:clamp(36px,10vw,62px)!important;
    }

    .dpf-list{
        width:calc(100% - 18px)!important;
        margin-top:14px!important;
    }

    .dpf-row .dpf-product{
        grid-template-columns:minmax(0,1fr) auto!important;
        grid-template-areas:
            "title price"
            "action action"!important;
    }

    .dpf-row .dpf-title,
    .dpf-row .dpf-coming strong,
    .dpf-row .dpf-product>strong{
        font-size:clamp(15px,4.6vw,17px)!important;
    }

    .dpf-row .dpf-price,
    .dpf-row .dpf-price .woocommerce-Price-amount{
        font-size:clamp(14px,4vw,15px)!important;
    }

    .dpf-row .dpf-add,
    .dpf-row .dpf-view{
        width:100%!important;
        justify-content:center!important;
    }
}


/* v1.3.21 — mobile popup behaves like a modal, not a sticky element. */
.dpf-mobile-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.28);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .15s ease,visibility .15s ease;
    z-index:1000000;
}

.dpf-mobile-backdrop.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

@media (max-width: 900px){
    .dpf-diagram{
        overflow:visible!important;
    }

    .dpf-hot .dpf-pop,
    .dpf-hot.left .dpf-pop,
    .dpf-hot.right .dpf-pop,
    .dpf-hot.dpf-bottom .dpf-pop{
        z-index:1000002!important;
    }
}


/* v1.4.0 — multiple diagrams per assembly */
.dpf-diagram-stack{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:32px;
}

.dpf-diagram-block{
    width:100%;
}

.dpf-diagram-label,
.dpf-list-group-title{
    margin:0 0 12px;
    color:#111;
    font-size:20px;
    font-weight:700;
    line-height:1.25;
}

.dpf-list-group-title{
    margin-top:24px;
    padding-bottom:10px;
    border-bottom:1px solid #ddd;
}

.dpf-list-group-title:first-child{
    margin-top:0;
}

@media (min-width:901px){
    .dpf-sticky.dpf-multi{
        position:static!important;
        top:auto!important;
        display:block!important;
    }

    .dpf-has-multiple-diagrams .dpf-diagram>img{
        max-height:none;
    }
}

@media (max-width:900px){
    .dpf-diagram-stack{
        gap:clamp(32px,8vw,54px);
    }
    .dpf-diagram-label,
    .dpf-list-group-title{
        font-size:clamp(16px,4.5vw,19px);
    }
}