/* Beds Furniture Modern - Single product page styles (enqueued only on individual product pages) */

/* =========================================================
   SINGLE PRODUCT
   Full-width gallery band (hero photo + horizontal filmstrip) at
   the top, NOT a sticky side column. The buy-card sits in NORMAL
   document flow directly below the gallery, with its own white
   background, padding and a subtle shadow for definition - no
   negative margin, no overlap with the photo. Everything else -
   short description, quick facts, trust badges, WhatsApp CTA, the
   mattress cross-sell, the info accordion and WooCommerce's own
   tabs/related products - is stacked full-width below.

   Class contract that MUST stay fixed here:
   - .pdp-media-main / .pdp-media-thumbs (+ .is-active) -
     assets/js/theme.js swaps the active gallery image by querying
     these directly (".pdp-media-main img" / ".pdp-media-thumbs img").
   - .bf-pdp-wrap - theme.js uses form.closest('.bf-pdp-wrap') to
     decide which form.cart submissions to AJAX-ify on this page.
   - .pd-info-item / .pd-info-toggle (+ .is-open) - the delivery/
     returns/dimensions accordion toggle.
   - .pd-price / .pd-quickview / .pd-quickview-media / .pd-quickview-info -
     functions.php's beds_mattress_quickview_ajax() prints this exact
     markup for the "Add a Mattress" popup.
   - .pd-mattress-list / .pd-mattress-card (+ data-product-id /
     data-product-url) / .pd-mattress-quickadd - the AJAX quick-add list.
   - .quantity / input.qty / .single_add_to_cart_button / form.cart -
     WooCommerce's own classes.
   - .bco-* - the Beds Custom Options plugin's own swatch markup.
   Everything else below is free-standing presentation and has been
   renamed/restructured.
========================================================= */

.bf-pdp-wrap{width:100%;max-width:100%;margin:0 auto;padding:0 20px 60px;overflow:visible;box-sizing:border-box;}
.bf-pdp-wrap *,
.bf-pdp-wrap *::before,
.bf-pdp-wrap *::after{box-sizing:border-box;}
.bf-pdp-wrap .woocommerce-breadcrumb{max-width:1180px;margin:0 auto 18px;padding-top:22px;}

/* =========================================================
   GALLERY BAND - full width hero + filmstrip underneath
========================================================= */
.bf-pdp-gallery{width:100%;max-width:1180px;margin:0 auto;}
.bf-pdp-gallery__hero{
    position:relative;width:100%;aspect-ratio:16/8;margin:0;padding:0;
    background:var(--ink-soft);border-radius:var(--r-lg);overflow:hidden;
    display:flex;align-items:center;justify-content:center;
}
.bf-pdp-gallery__hero img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease;}
.bf-pdp-gallery__hero:hover img{transform:scale(1.025);}
.bf-pdp-gallery__badge{
    position:absolute;z-index:2;top:18px;left:18px;background:var(--badge-sale);color:#fff;border-radius:999px;
    font-size:13.5px;font-weight:700;padding:8px 16px;line-height:1.3;box-shadow:0 6px 16px rgba(var(--badge-sale-rgb),.35);
}
.bf-pdp-gallery__filmstrip{width:100%;display:flex;flex-wrap:nowrap;gap:10px;margin:12px 0 0;padding:0 0 4px;overflow-x:auto;scrollbar-width:thin;}
.bf-pdp-gallery__filmstrip img{
    width:92px;height:92px;flex:0 0 92px;display:block;object-fit:cover;background:var(--cream);
    border:2px solid transparent;border-radius:var(--r-sm);cursor:pointer;opacity:.65;
    transition:border-color .15s ease,opacity .15s ease,transform .15s ease;
}
.bf-pdp-gallery__filmstrip img:hover{opacity:1;transform:translateY(-2px);}
.bf-pdp-gallery__filmstrip img.is-active{opacity:1;border-color:var(--rust);}

/* =========================================================
   BUY-CARD - normal document flow directly below the gallery,
   its own white background + border + subtle shadow for definition.
========================================================= */
.bf-pdp-buybox{
    position:relative;z-index:1;width:100%;max-width:880px;margin:28px auto 0;
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 34px 32px;
    box-shadow:var(--lift-sm);
}

.bf-pd-cat{display:block;margin:0 0 8px;padding-left:11px;position:relative;color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.4;}
.bf-pd-cat::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;background:var(--rust);}
.bf-pdp-buybox h1{margin:0 0 12px;color:var(--ink);font-size:clamp(26px,2.8vw,36px);line-height:1.15;font-weight:600;letter-spacing:-.01em;}

.bf-pd-rating{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 16px;}
.bf-pd-rating .star-rating{margin:0;}
.bf-pd-trustpilot-link{color:var(--muted);font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:2px;}

.pd-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;margin:0 0 4px;color:var(--ink);font-size:31px;line-height:1.2;font-weight:700;letter-spacing:-.01em;font-family:var(--f-head);}
.pd-price del{color:var(--muted);font-size:17px;font-weight:400;text-decoration:line-through;font-family:var(--f-body);}
.pd-price ins{color:var(--ink);text-decoration:none;}
.bf-pd-tax-note{margin:0 0 20px;color:var(--muted);font-size:12.5px;}

.bf-pd-promo-line{
    margin:0 0 20px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    color:var(--ink);font-size:13px;line-height:1.45;font-weight:600;
}

/* =========================================================
   BEDS CUSTOM OPTIONS (plugin-rendered markup, our styling)
========================================================= */
.bco-options-wrap{width:100%;margin:0 0 22px;padding:22px 0 4px;border-top:1px solid var(--line);}
.bco-options-wrap .bco-field{width:100%;margin:0 0 22px;}
.bco-options-wrap .bco-field:last-of-type{margin-bottom:0;}

.bco-options-wrap .bco-field > label{
    display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding-left:10px;position:relative;
    color:var(--ink);font-size:14px;font-weight:700;text-transform:none;letter-spacing:0;font-family:var(--f-head);
}
.bco-options-wrap .bco-field > label::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;background:var(--rust);}

/* live "- Slats" value shown right after the group title the
   instant a swatch/select is chosen - injected by theme.js */
.bco-selected-value{color:var(--muted);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px;}
.bco-selected-value::before{content:"\2014";margin-right:6px;color:var(--line);}

/* ---- SELECT (plain dropdown fields, e.g. Bed Size) ---- */
.bco-options-wrap select.bco-select{
    width:100%;max-width:100%;min-height:50px;padding:13px 42px 13px 16px;background-color:#fff !important;
    border:1.5px solid var(--line) !important;border-radius:var(--r-sm);color:var(--ink) !important;
    font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%231a1a1a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;background-position:right 16px center !important;background-size:16px !important;
    transition:border-color .15s ease,box-shadow .15s ease;
}
.bco-options-wrap select.bco-select:hover{border-color:var(--ink-soft) !important;}
.bco-options-wrap select.bco-select:focus{outline:none;border-color:var(--ink) !important;box-shadow:0 0 0 3px rgba(var(--ink-rgb),.08);}

/* ---- SWATCH / IMAGE OPTIONS ----
   The "box" is only the image (or colour dot) - a clean, uniform
   tile with its own border. The label text lives BELOW that tile,
   outside any border. Selection shows as a ring + small check badge
   on the tile itself. flex:0 0 <w> + min-width:0 keeps every card
   the same width no matter how long its label is. */
.bco-options-wrap .bco-swatches{display:flex;flex-wrap:wrap;gap:10px;}
.bco-options-wrap .bco-swatch-option{
    position:relative;flex:0 0 68px;width:68px !important;min-width:0;box-sizing:border-box;
    padding:0;margin:0;background:transparent !important;border:0 !important;
    display:flex !important;flex-direction:column;align-items:center;text-align:center;
    cursor:pointer;
}
.bco-options-wrap .bco-swatch-option img,
.bco-options-wrap .bco-swatch-option .bco-color-dot{
    width:100%;height:58px;flex-shrink:0;object-fit:cover;display:block;
    border:1.5px solid var(--line) !important;border-radius:var(--r-md) !important;
    transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.bco-color-dot{border-radius:50% !important;height:40px !important;width:40px !important;margin:0 auto;}
.bco-options-wrap .bco-swatch-option:hover img,
.bco-options-wrap .bco-swatch-option:hover .bco-color-dot{border-color:var(--rust) !important;transform:translateY(-2px);}
.bco-options-wrap .bco-swatch-option.bco-checked img,
.bco-options-wrap .bco-swatch-option:has(input:checked) img,
.bco-options-wrap .bco-swatch-option.bco-checked .bco-color-dot,
.bco-options-wrap .bco-swatch-option:has(input:checked) .bco-color-dot{
    border-color:var(--ink) !important;box-shadow:0 0 0 3px rgba(var(--ink-rgb),.12);
}
.bco-options-wrap .bco-swatch-option.bco-checked::after,
.bco-options-wrap .bco-swatch-option:has(input:checked)::after{
    content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;
    position:absolute;top:-6px;right:14px;width:19px;height:19px;border-radius:50%;
    background:var(--ink);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 6px rgba(var(--ink-rgb),.35);
}
/* The per-swatch name now lives ONLY in the live ".bco-selected-value"
   text next to the group title - theme.js reads this label's text to
   build that value, so it stays in the DOM, visually hidden. */
.bco-options-wrap .bco-swatch-label{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---- TOTAL PRICE ---- */
.bco-options-wrap .bco-total-price-box{
    margin-top:14px;padding:14px 16px !important;display:flex;align-items:center;justify-content:space-between;
    background:var(--ink) !important;color:#fff !important;border-radius:var(--r-md);
}
.bco-options-wrap .bco-total-price-box::before{content:"Total";font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0;opacity:.75;}
.bco-options-wrap .bco-total-price-box .bco-total-price{color:#fff !important;font-size:19px;font-weight:800;}

/* ---- CART / QUANTITY / ADD TO BASKET ---- */
.bf-pdp-buybox form.cart{width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:22px 0 0;max-width:100%;}
.bf-pdp-buybox form.cart .bco-options-wrap{flex:0 0 100%;max-width:100%;margin-bottom:0;}
.bf-pdp-buybox form.cart .quantity{margin:0;}
.quantity-stepper{height:54px;display:flex;align-items:stretch;overflow:hidden;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);}
.qty-step{width:44px;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;border:0;color:var(--ink);font-size:14px;cursor:pointer;transition:background .15s ease,color .15s ease;}
.qty-step:hover{background:var(--cream);color:var(--rust);}
.bf-pdp-buybox form.cart .quantity input.qty{
    width:46px;height:100%;padding:0;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
    background:#fff;color:var(--ink);text-align:center;font-family:inherit;font-size:14px;font-weight:800;-moz-appearance:textfield;
}
.bf-pdp-buybox form.cart .quantity input.qty::-webkit-inner-spin-button,
.bf-pdp-buybox form.cart .quantity input.qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}

.bf-pdp-buybox form.cart .single_add_to_cart_button,
.bf-pdp-buybox form.cart button[type="submit"]{
    flex:1 1 auto;min-width:190px;height:54px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:0 26px;background:var(--rust);border:0;border-radius:var(--r-sm);color:#fff;
    font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:.02em;cursor:pointer;
    box-shadow:0 2px 8px rgba(var(--rust-rgb),.22);transition:background .15s ease,box-shadow .15s ease,transform .1s ease;
}
.bf-pdp-buybox form.cart .single_add_to_cart_button:hover,
.bf-pdp-buybox form.cart button[type="submit"]:hover{background:var(--rust-deep);box-shadow:0 4px 14px rgba(var(--rust-rgb),.3);}
.bf-pdp-buybox form.cart .single_add_to_cart_button:active,
.bf-pdp-buybox form.cart button[type="submit"]:active{transform:translateY(1px);}
.bf-pdp-buybox form.cart .single_add_to_cart_button.disabled,
.bf-pdp-buybox form.cart .single_add_to_cart_button.loading{opacity:.6;cursor:not-allowed;box-shadow:none;}

/* =========================================================
   BELOW-FOLD STRIP - short description, quick facts, trust
   badges, WhatsApp CTA. Full width, normal document flow.
========================================================= */
.bf-pdp-below{width:100%;max-width:880px;margin:30px auto 0;}

.bf-pd-short-desc{margin:0 0 20px;color:var(--ink-text);font-size:15px;line-height:1.8;text-align:center;}
.bf-pd-short-desc p{margin:0 0 10px;}
.bf-pd-short-desc p:last-child{margin-bottom:0;}

.bf-pd-quick-facts{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;list-style:none;margin:0 0 22px;padding:0;
    color:var(--muted);font-size:12.5px;font-weight:600;
}
.bf-pd-quick-facts li{display:inline-flex;align-items:center;}
.bf-pd-quick-facts li:not(:last-child)::after{content:"\2022";margin:0 10px;color:var(--line);}

.bf-pd-trust-badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:0 0 20px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.bf-pd-trust-badges li{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;color:var(--muted);font-size:12px;font-weight:600;padding:10px 6px;border-radius:var(--r-md);transition:background .15s ease,transform .15s ease;}
.bf-pd-trust-badges li:hover{background:var(--cream);transform:translateY(-2px);}
.bf-pd-trust-badges li .ico{color:var(--rust-deep);font-size:17px;flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease;}
.bf-pd-trust-badges li:hover .ico{background:#fff;box-shadow:0 2px 8px rgba(var(--ink-rgb),.1);}

.bf-pd-whatsapp-cta{
    display:flex;align-items:center;justify-content:center;gap:12px;padding:15px 18px;margin-top:0;
    background:rgba(37,211,102,.07);border:1px solid rgba(37,211,102,.28);border-radius:var(--r-md);
    color:var(--ink-text);font-size:13px;font-weight:600;transition:background .15s ease;text-align:center;
}
.bf-pd-whatsapp-cta:hover{background:rgba(37,211,102,.13);}
.bf-pd-whatsapp-cta i{flex-shrink:0;color:#25d366;font-size:24px;}

/* =========================================================
   STACKED SECTIONS - mattress cross-sell, info accordion, tabs,
   related products. All full-width, one under the next.
========================================================= */
.bf-pdp-stack{width:100%;max-width:1180px;margin:0 auto;}

.bf-pd-info-grid{width:100%;margin:0 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;}
.bf-pd-info-col{min-width:0;display:flex;flex-direction:column;gap:16px;}

.bf-pd-info-accordion{width:100%;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--lift-sm);}
.bf-pd-info-accordion .pd-info-item{border-bottom:1px solid var(--line);}
.bf-pd-info-accordion .pd-info-item:last-child{border-bottom:0;}
.pd-info-toggle{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;
    background:none;border:0;color:var(--ink);font-family:inherit;font-size:14.5px;font-weight:700;text-align:left;cursor:pointer;
}
.pd-info-toggle::after{
    content:"";width:9px;height:9px;flex-shrink:0;border-right:2px solid var(--rust-deep);border-bottom:2px solid var(--rust-deep);
    transform:rotate(45deg);transition:transform .2s ease;
}
.pd-info-item.is-open .pd-info-toggle::after{transform:rotate(-135deg);}
.bf-pd-info-body{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.pd-info-item.is-open .bf-pd-info-body{max-height:2000px;}
.bf-pd-info-body__inner{padding:0 20px 20px;color:var(--muted);font-size:13.5px;line-height:1.7;}
.bf-pd-info-body__inner p{margin-bottom:1em;}

.bf-pd-swatch-cta{display:flex;align-items:center;gap:14px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--lift-sm);}
.bf-pd-swatch-cta .ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--cream);font-size:17px;color:var(--rust-deep);flex-shrink:0;}
.bf-pd-swatch-cta p{margin:0;font-size:13px;color:var(--ink-text);line-height:1.5;}
.bf-pd-swatch-cta a{font-weight:700;color:var(--rust);}

.bf-pd-payment-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--lift-sm);}
.bf-pd-payment-card__title{font-size:14px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0;margin-bottom:12px;font-family:var(--f-head);}
.bf-pd-payment-card .contact-form-note{margin-top:12px;}
.payment-icons{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;align-items:center;}
.payment-icons span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:30px;padding:0 6px;font-size:22px;color:var(--muted);background:var(--cream);border-radius:var(--r-sm);}

/* ---- TABS ---- */
.bf-pd-tabs{width:100%;margin:48px auto 0;}
.bf-pd-tabs .tabs.wc-tabs{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0 0 28px;padding:0;border-bottom:1px solid var(--line);}
.bf-pd-tabs .tabs.wc-tabs li{margin:0;padding:0;}
.bf-pd-tabs .tabs.wc-tabs li a{display:block;padding:13px 18px;color:var(--muted);font-size:14px;font-weight:700;border-bottom:3px solid transparent;transition:color .15s ease;}
.bf-pd-tabs .tabs.wc-tabs li a:hover{color:var(--ink);}
.bf-pd-tabs .tabs.wc-tabs li.active a{color:var(--ink);border-bottom-color:var(--rust);}
.bf-pd-tabs .woocommerce-Tabs-panel{width:100%;max-width:800px;margin:0 auto;color:var(--ink-text);font-size:14.5px;line-height:1.8;}
.bf-pd-tabs .woocommerce-Tabs-panel p{margin-bottom:1em;}
.bf-pd-tabs .woocommerce-Tabs-panel h1,
.bf-pd-tabs .woocommerce-Tabs-panel h2,
.bf-pd-tabs .woocommerce-Tabs-panel h3,
.bf-pd-tabs .woocommerce-Tabs-panel h4{font-size:18px;margin:1.4em 0 .6em;color:var(--ink);}
.bf-pd-tabs .woocommerce-Tabs-panel h1:first-child,
.bf-pd-tabs .woocommerce-Tabs-panel h2:first-child,
.bf-pd-tabs .woocommerce-Tabs-panel h3:first-child,
.bf-pd-tabs .woocommerce-Tabs-panel h4:first-child{margin-top:0;}
.bf-pd-tabs .woocommerce-Tabs-panel ul,
.bf-pd-tabs .woocommerce-Tabs-panel ol{margin:0 0 1em;padding-left:1.25em;}
.bf-pd-tabs .woocommerce-Tabs-panel li{margin-bottom:.4em;}
.bf-pd-tabs .woocommerce-Tabs-panel table{width:100%;border-collapse:collapse;}
.bf-pd-tabs .woocommerce-Tabs-panel table th,
.bf-pd-tabs .woocommerce-Tabs-panel table td{padding:11px;border-bottom:1px solid var(--line);text-align:left;}
.bf-pd-tabs #reviews .comment-list{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:16px;}
.bf-pd-tabs #reviews .comment-list li{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;}
.bf-pd-tabs #reviews .comment-text p.meta{font-size:12px;color:var(--muted);margin-bottom:6px;}
.bf-pd-tabs #reviews .comment-text .description p{margin:6px 0 0;}
.bf-pd-tabs #reviews #respond{max-width:600px;margin:0 auto;}
.bf-pd-tabs #reviews #respond .comment-form-comment textarea{width:100%;padding:13px;border:1px solid var(--line);border-radius:var(--r-sm);font-family:inherit;min-height:110px;}
.bf-pd-tabs #reviews #respond .form-submit input{background:var(--rust);color:#fff;border:none;padding:13px 26px;border-radius:var(--r-sm);font-weight:600;text-transform:none;letter-spacing:0;font-size:14px;cursor:pointer;transition:background .15s ease;}
.bf-pd-tabs #reviews #respond .form-submit input:hover{background:var(--rust-deep);}

/* ---- RELATED PRODUCTS CAROUSEL
   .bf-pd-related wraps the shared .carousel/.carousel-track/
   .bf-carousel-nav pattern (defined once in the shared style.css,
   not duplicated here) so it looks and behaves exactly like the
   homepage's own product carousels. .upsells.products is still
   WooCommerce's own default grid output (untouched), so it keeps
   its grid layout below. ---- */
.bf-pd-tabs .bf-pd-related,
.bf-pd-tabs .upsells.products{width:100%;margin-top:56px;}
.bf-pd-tabs .bf-pd-related > h2,
.bf-pd-tabs .upsells.products > h2{margin:0 0 20px;color:var(--ink);font-size:23px;}
.bf-pd-tabs .upsells.products ul.products{
    width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;margin:0;padding:0;list-style:none;
}

/* ---- MATTRESS SECTION - clean LIST layout (not a wrapped card
   grid): one bordered panel holding full-width rows, thumb left,
   name/price in the middle, "Select Options" pinned to the right.
   Sleeker and far easier to scan than the old wrapped-tile grid. ---- */
.pd-mattress-section{width:100%;margin-bottom:50px;}
.pd-mattress-section h2{display:flex;align-items:center;gap:11px;margin:0 0 20px;color:var(--ink);font-size:22px;}
.pd-mattress-section h2 i{color:var(--rust-deep);font-size:19px;}
.pd-mattress-list{
    display:flex;flex-direction:column;width:100%;background:#fff;
    border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--lift-sm);
}
.pd-mattress-card{
    width:100%;display:flex;align-items:center;gap:16px;padding:16px 20px;
    background:transparent;border:0;border-bottom:1px solid var(--line);text-align:left;
    transition:background .15s ease;
}
.pd-mattress-card:last-child{border-bottom:0;}
.pd-mattress-card:hover{background:var(--cream);}
.pd-mattress-card-thumb{width:68px;height:68px;flex-shrink:0;overflow:hidden;background:var(--cream);border-radius:var(--r-md);border:1px solid var(--line);}
.pd-mattress-card-thumb img{width:100%;height:100%;display:block;object-fit:cover;}
.pd-mattress-card-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;}
.pd-mattress-card-name{color:var(--ink);font-size:14px;font-weight:700;line-height:1.3;}
.pd-mattress-card-name:hover{color:var(--rust);}
.pd-mattress-card-price{color:var(--rust);font-size:13.5px;font-weight:700;}
.pd-mattress-quickadd{
    flex-shrink:0;margin-top:0;padding:11px 20px !important;font-size:12.5px !important;white-space:nowrap;
}
.pd-mattress-quickadd.loading{opacity:.6;pointer-events:none;}

/* ---- QUICK-VIEW MODAL
   theme.js builds this element at runtime (openQuickview()) and
   functions.php's beds_mattress_quickview_ajax() fills
   .pd-quickview / .pd-quickview-media / .pd-quickview-info, so all
   of these names are a fixed contract. ---- */
.pd-quickview-modal{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:20px;}
.pd-quickview-modal[hidden]{display:none;}
.pd-quickview-modal-scrim{position:absolute;inset:0;background:rgba(20,16,30,.5);opacity:0;transition:opacity .2s ease;}
.pd-quickview-modal-panel{
    position:relative;background:#fff;border-radius:var(--r-lg);width:100%;max-width:560px;max-height:88vh;
    overflow-y:auto;padding:28px;box-shadow:var(--lift);transform:translateY(16px) scale(.98);opacity:0;
    transition:transform .22s ease,opacity .22s ease;
}
.pd-quickview-modal.is-open .pd-quickview-modal-scrim{opacity:1;}
.pd-quickview-modal.is-open .pd-quickview-modal-panel{transform:translateY(0) scale(1);opacity:1;}
.pd-quickview-modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;font-size:14px;z-index:1;}
.pd-quickview-modal-close:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.pd-quickview{display:flex;flex-direction:column;gap:16px;}
.pd-quickview-media{width:100%;max-width:220px;margin:0 auto;border-radius:var(--r-md);overflow:hidden;background:var(--cream);}
.pd-quickview-media img{width:100%;display:block;object-fit:cover;}
.pd-quickview-info h3{margin:0 0 6px;font-size:19px;}
.pd-quickview-info .pd-price{font-size:22px;margin:0 0 14px;}
.pd-quickview-info form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0;max-width:100%;}
.pd-quickview-info form.cart .bco-options-wrap{flex-basis:100%;margin-bottom:0;max-width:100%;min-width:0;}
.pd-quickview-info form.cart .quantity{margin:0;}

/* The quantity input + Add to Cart button inside the quickview never
   matched any selector before (only ".bf-pdp-buybox form.cart ..."
   was styled) and rendered as a bare, unstyled browser button/input -
   this reuses the exact same button language as the main buy-box so
   the two forms look identical. */
.pd-quickview-info form.cart .quantity input.qty{
    width:46px;height:100%;padding:0;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
    background:#fff;color:var(--ink);text-align:center;font-family:inherit;font-size:14px;font-weight:800;-moz-appearance:textfield;
}
.pd-quickview-info form.cart .quantity input.qty::-webkit-inner-spin-button,
.pd-quickview-info form.cart .quantity input.qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.pd-quickview-info form.cart .single_add_to_cart_button,
.pd-quickview-info form.cart button[type="submit"]{
    flex:1 1 auto;min-width:160px;height:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:0 24px;background:var(--rust);border:0;border-radius:var(--r-sm);color:#fff;
    font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.02em;cursor:pointer;
    box-shadow:0 2px 8px rgba(var(--rust-rgb),.22);transition:background .15s ease,box-shadow .15s ease,transform .1s ease;
}
.pd-quickview-info form.cart .single_add_to_cart_button:hover,
.pd-quickview-info form.cart button[type="submit"]:hover{background:var(--rust-deep);box-shadow:0 4px 14px rgba(var(--rust-rgb),.3);}
.pd-quickview-info form.cart .single_add_to_cart_button:active,
.pd-quickview-info form.cart button[type="submit"]:active{transform:translateY(1px);}
.pd-quickview-info form.cart .single_add_to_cart_button.disabled,
.pd-quickview-info form.cart .single_add_to_cart_button.loading{opacity:.6;cursor:not-allowed;box-shadow:none;}

/* ---- TABLET ---- */
@media(max-width:1000px){
    .bf-pdp-gallery__hero{aspect-ratio:16/10;}
    .bf-pdp-buybox{margin-top:22px;padding:26px 24px 28px;}
}

/* ---- MOBILE: single-column info grid, no overlap ---- */
@media(max-width:860px){
    .bf-pdp-wrap{padding:0 14px 50px;}
    .bf-pdp-gallery__hero{aspect-ratio:4/3;border-radius:var(--r-md);}
    .bf-pdp-buybox{width:100%;margin:18px auto 0;padding:22px 20px 24px;}
    .bf-pdp-below{margin-top:26px;}
    .bf-pd-trust-badges{grid-template-columns:repeat(2,1fr);}
    .bf-pd-info-grid{grid-template-columns:1fr;gap:18px;}
    .bf-pd-tabs{margin-top:40px;}
}

/* ---- SMALL MOBILE ---- */
@media(max-width:640px){
    .bf-pdp-gallery__filmstrip img{width:64px;height:64px;flex-basis:64px;}
    .bf-pdp-buybox h1{font-size:22px;}
    .pd-price{font-size:24px;}
    .bf-pd-short-desc{font-size:13.5px;}
    .bco-options-wrap .bco-swatches{gap:8px;}
    .bco-options-wrap .bco-swatch-option{flex:0 0 58px;width:58px !important;}
    .bco-options-wrap .bco-swatch-option img,
    .bco-options-wrap .bco-swatch-option .bco-color-dot{height:50px;}
    .bco-color-dot{height:36px !important;width:36px !important;}
    .bf-pdp-buybox form.cart{gap:9px;}
    .quantity-stepper{height:48px;}
    .qty-step{width:38px;}
    .bf-pdp-buybox form.cart .quantity input.qty{width:42px;}
    .bf-pdp-buybox form.cart .single_add_to_cart_button,
    .bf-pdp-buybox form.cart button[type="submit"]{height:48px;min-width:0;padding:0 16px;font-size:12px;}
    .bf-pd-swatch-cta,.bf-pd-whatsapp-cta{flex-direction:column;text-align:center;gap:10px;}
    .bf-pd-payment-card{padding:16px;}
    .payment-icons{justify-content:center;}
    .pd-mattress-section{margin-bottom:36px;}
    .pd-mattress-card{padding:13px 14px;gap:12px;}
    .pd-mattress-card-thumb{width:56px;height:56px;}
    .pd-mattress-card-name{font-size:13px;}
    .pd-mattress-quickadd{padding:9px 14px !important;font-size:11.5px !important;}
    .bf-pd-tabs{margin-top:36px;}
    .bf-pd-tabs .tabs.wc-tabs{gap:2px;margin-bottom:20px;}
    .bf-pd-tabs .tabs.wc-tabs li a{padding:10px 12px;font-size:12.5px;}
    .bf-pd-tabs .woocommerce-Tabs-panel{font-size:13.5px;}
    .bf-pd-tabs .bf-pd-related,
    .bf-pd-tabs .upsells.products{margin-top:40px;}
    .pd-quickview-modal{padding:0;align-items:flex-end;}
    .pd-quickview-modal-panel{max-width:100%;max-height:92vh;padding:22px 18px 26px;border-radius:var(--r-lg) var(--r-lg) 0 0;}
    .pd-quickview-info form.cart .quantity input.qty{width:42px;}
    .pd-quickview-info form.cart .single_add_to_cart_button,
    .pd-quickview-info form.cart button[type="submit"]{height:46px;min-width:0;padding:0 16px;font-size:12px;}
}

/* ---- VERY SMALL PHONE ---- */
@media(max-width:400px){
    .bf-pdp-buybox h1{font-size:20px;}
    .pd-price{font-size:22px;}
    .bf-pdp-buybox form.cart .single_add_to_cart_button,
    .bf-pdp-buybox form.cart button[type="submit"]{font-size:11px;padding:0 12px;}
    .pd-mattress-card{flex-wrap:wrap;}
    .pd-mattress-quickadd{flex:1 1 100%;margin-top:4px;}
    .pd-quickview-modal-panel{padding:18px 14px 22px;}
    .pd-quickview-info form.cart .single_add_to_cart_button,
    .pd-quickview-info form.cart button[type="submit"]{font-size:11px;padding:0 12px;}
}

/* ---- STRUCTURAL FIXES ---- */
.bf-pdp-wrap .woocommerce-variation-add-to-cart{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.bf-pdp-wrap .woocommerce-variation-add-to-cart .quantity{margin:0;}
.bf-pdp-wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button{flex:1 1 auto;}

.bf-pdp-wrap input.qty::-webkit-inner-spin-button,
.bf-pdp-wrap input.qty::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;}
.bf-pdp-wrap input.qty{-moz-appearance:textfield;}

.bf-pdp-wrap button:focus-visible,
.bf-pdp-wrap a:focus-visible,
.bf-pdp-wrap select:focus-visible,
.bf-pdp-wrap input:focus-visible{outline:2px solid var(--rust);outline-offset:2px;}