/* FINAL ORDER BUTTON SAFETY OFFSET — 4px farther from the bottom edge. */
.dfh-pay-button{
transform:translateX(-50%) translateY(-8px)!important;
}
/* FINAL MICRO-POSITION — ORDER button and scroll hint slightly farther from bottom edge. */
.dfh-product-page.has-order .dfh-order-button{
bottom:40px!important;
}
.dfh-product-page.has-order .dfh-scroll-hint{
bottom:64px!important;
}
@media(max-width:768px){
.dfh-product-page.has-order .dfh-scroll-hint{
bottom:22px!important;
}
}
/* FINAL ORDER POSITION — fixed visual placement, all pages and viewports. */
html body .dfh-order-button{
position:fixed!important;
top:calc(100vh - 59px)!important;
bottom:auto!important;
left:50%!important;
transform:translateX(-50%)!important;
z-index:9999999!important;
}
/* MOBILE ONLY — when ORDER is visible, lift the product composition
by the same 8px as the mobile scroll hint. With no ORDER button,
everything keeps its original position. */
@media(max-width:768px){
.dfh-product-page.has-order .dfh-product-media-area{
transform:translateX(-50%) translateY(-8px)!important;
}
.dfh-product-page.has-order .dfh-purchase-panel{
transform:translateY(-8px)!important;
}
}
/* MOBILE ONLY — align the entire composition with the ORDER-visible scroll hint.
When ORDER is not visible, the original positions remain untouched. */
@media(max-width:768px){
.dfh-product-page.has-order .dfh-product-media-area{
transform:translateX(-50%) translateY(-15px)!important;
}
.dfh-product-page.has-order .dfh-purchase-panel{
bottom:63px!important;
transform:translateY(-15px)!important;
}
/* ORDER itself: 15px lower than its current mobile position. */
html body .dfh-product-page.has-order .dfh-order-button{
top:calc(100vh - 17px)!important;
bottom:auto!important;
}
}
/* MOBILE ONLY — direct, explicit final offsets for the two elements that
must move relative to their current visual positions when ORDER is shown. */
@media(max-width:768px){
.dfh-product-page.has-order .dfh-main-media img{
transform:translateY(-15px) scale(1.12)!important;
transform-origin:center center!important;
}
html body .dfh-product-page.has-order .dfh-order-button{
transform:translateX(-50%) translateY(15px)!important;
}
}
/* FINAL MOBILE COMPOSITION FIX — when ORDER is visible, move the actual
visual blocks together. Long product names automatically push the
description down instead of colliding with it. */
@media(max-width:768px){
.dfh-product-page.has-order .dfh-title-block{
transform:translateY(-15px)!important;
}
.dfh-product-page.has-order .dfh-description{
transform:translateY(-15px)!important;
}
.dfh-product-page.has-order .dfh-product-media-area{
transform:translateX(-50%) translateY(-15px)!important;
}
.dfh-product-page.has-order .dfh-purchase-panel{
transform:translateY(-15px)!important;
}
.dfh-product-page.has-order .dfh-main-media img{
transform:translateY(-15px) scale(1.12)!important;
transform-origin:center center!important;
}
/* Explicitly place ORDER below its current mobile position by 15px.
Using bottom rather than top avoids viewport-unit rounding fighting
the previous fixed-position rules. */
html body .dfh-product-page.has-order .dfh-order-button{
top:auto!important;
bottom:30px!important;
transform:translateX(-50%)!important;
}
.dfh-product-page.has-order .dfh-scroll-hint{
bottom:22px!important;
}
}
/* =========================================================
MOBILE TYPOGRAPHY FINAL — product title max 2 lines;
collection/drop labels always stay on one line.
========================================================= */
@media(max-width:768px){
.dfh-product-name{
display:-webkit-box !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:2 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.dfh-collection-label,
.dfh-archive-label,
.dfh-drop-name{
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
}
/* =========================================================
MOBILE FINAL FIX — collection/drop stays on one line;
ORDER sits clearly below the swipe hint.
========================================================= */
@media(max-width:768px){
/* Collection / DROP name must always remain on one line. */
.dfh-collection-label .dfh-drop-name{
display:block!important;
width:max-content!important;
max-width:none!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
line-height:1.02!important;
}
/* Keep the swipe hint above the ORDER button with a clear gap. */
.dfh-product-page.has-order .dfh-scroll-hint{
bottom:52px!important;
z-index:30!important;
}
/* ORDER is placed underneath the swipe hint, never behind it. */
html body .dfh-product-page.has-order .dfh-order-button{
top:auto!important;
bottom:6px!important;
left:50%!important;
transform:translateX(-50%)!important;
z-index:9999999!important;
}
}
/* =========================================================
V109 — MOBILE FINAL SMALL CORRECTIONS
- Collection / drop name: one line only.
- I WANT IT: restore a compact native 250:64 proportion.
- ORDER: 10px lower than its current v108 position.
========================================================= */
@media(max-width:768px){
/* Collection / DROP text: always one line, with ellipsis when necessary. */
.dfh-collection-label{
width:52vw !important;
max-width:52vw !important;
}
.dfh-archive-label,
.dfh-drop-name{
display:block !important;
width:100% !important;
max-width:100% !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
word-break:normal !important;
}
/* Keep I WANT IT at the asset's native 250:64 ratio and slightly more compact. */
.dfh-purchase-panel .dfh-cart-button{
width:132px !important;
min-width:132px !important;
max-width:132px !important;
height:auto !important;
aspect-ratio:250 / 64 !important;
padding:0 10px !important;
transform:none !important;
}
/* ORDER: exactly 10px lower than the current v108 mobile position. */
html body .dfh-product-page.has-order .dfh-order-button{
top:auto !important;
bottom:-4px !important;
transform:translateX(-50%) !important;
}
}
Choosing a selection results in a full page refresh.
