/* ========================================================================== পাহাড়ি বাজার — সিঙ্গেল প্রোডাক্ট কম্পোনেন্ট CSS (is_product only) ========================================================================== */ /* min-width:0 on the grid items is the actual fix for the gallery breaking the page layout: a grid track's default min-width is "auto", meaning it won't shrink below its content's intrinsic width — so a wide, non-wrapping row of thumbnails was forcing the whole .pd-grid (and the page) wider instead of being contained and scrolling internally via overflow-x:auto. */ .pd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;margin-top:18px} /* z-index here matters: .gallery is position:sticky, so it's a stacking context of its own. Without an explicit z-index, its own level is "auto", and the summary column next to it (later in DOM, same implicit level) paints on top of it — including the .gal-zoom-result panel that intentionally overflows .gallery's box to sit beside the image. */ .gallery{position:sticky;top:calc(var(--mega-h) + 16px);min-width:0;z-index:6} .pd-info{min-width:0} .gal-main{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/0;background:#fff;border:1px solid var(--border);cursor:zoom-in;padding:0} .gal-main img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .4s var(--ease)} .gal-main.zoom img{transform:scale(1.6);cursor:zoom-out} .gal-tag{position:absolute;top:14px;left:14px;z-index:2} .gal-360{position:absolute;bottom:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-pill);font-size:.78rem;font-weight:600;background:#fff;border:1px solid var(--border)} /* Thumbnails scroll horizontally (drag-scroll, see theme.js) instead of overflowing/breaking the layout when a product has many gallery images — a right-edge fade hints there's more to scroll to. */ .gal-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%)} .gal-thumbs::-webkit-scrollbar{display:none} .gal-thumb{width:72px;height:72px;border-radius:var(--r-sm);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all var(--t-fast);flex-shrink:0;background:#fff;padding:4px} .gal-thumb.active{border-color:var(--orange-500)} .gal-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .gal-thumb.video{position:relative}.gal-thumb.video::after{content:'▶';position:absolute;inset:0;display:grid;place-items:center;background:rgba(19,48,42,.4);color:#fff;font-size:.85rem} /* --------------------------------------------------------------------- * গ্যালারি কন্ট্রোলার (Theme Options → সিঙ্গেল প্রডাক্ট → গ্যালারি): * থাম্বনেইলের অবস্থান (নিচে/পাশে) + জুম স্টাইল (ভিতরে/বাইরে) — content- * single-product.php outputs "thumbs-below|thumbs-side" and * "zoom-inside|zoom-outside" on .gallery; theme.js drives the actual * hover/tap behaviour for both zoom styles. * ------------------------------------------------------------------- */ /* থাম্বনেইল পাশে — main image ও thumbs strip পাশাপাশি, thumbs একটা সরু উলম্ব কলামে বাম দিকে (order দিয়ে, DOM-এর ক্রম না বদলিয়ে) স্ক্রল হবে। */ .gallery.thumbs-side{display:flex;gap:12px;align-items:flex-start} .gallery.thumbs-side .gal-main{order:2;flex:1;min-width:0} .gallery.thumbs-side .gal-thumbs{ order:1;flex:0 0 76px;flex-direction:column;margin-top:0;max-height:520px; overflow-y:auto;overflow-x:hidden; -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent 100%); mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent 100%); } @media(max-width:920px){ /* Not enough width for a side column on tablets/phones — fall back to the below-layout regardless of the admin's pick, so it never breaks. */ .gallery.thumbs-side{display:block} .gallery.thumbs-side .gal-thumbs{flex-direction:row;max-height:none;overflow-y:visible;overflow-x:auto;margin-top:12px; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);} } /* জুম — ভিতরে: মাউস যেদিকে থাকে ছবিটা সেদিকে কেন্দ্র করে বড় হয়, একই বক্সের ভিতরেই (কোনো ওভারফ্লো/আলাদা প্যানেল লাগে না)। theme.js মাউসের অবস্থান অনুযায়ী transform-origin বসায় এবং hover/touch-এ .zoom-active টগল করে। */ .gallery.zoom-inside .gal-main img{transition:transform .15s ease-out} .gallery.zoom-inside .gal-main.zoom-active img{transform:scale(2.2);cursor:zoom-out} /* জুম — বাইরে: মূল ছবির উপর একটা হালকা লেন্স-বক্স মাউস অনুসরণ করে, আর সেই অংশটুকুই ডান পাশে একটা আলাদা বড় প্যানেলে (ম্যাগনিফায়ার) দেখা যায় — মূল ছবিটা নিজে ছোট/একই সাইজেই থাকে। */ .gal-lens{display:none;position:absolute;top:0;left:0;pointer-events:none;border:1.5px solid var(--orange-500);background:rgba(241,121,18,.16);z-index:5} .gallery.zoom-outside .gal-main.zoom-active .gal-lens{display:block} .gal-zoom-result{ display:none;position:absolute;top:0;left:calc(100% + 20px);width:440px;height:100%; min-height:100%;border:1px solid var(--border);border-radius:var(--r-lg); background-color:#fff;background-repeat:no-repeat;box-shadow:var(--co-shadow-lg,0 20px 40px rgba(0,0,0,.12)); z-index:20; } .gallery.zoom-outside .gal-main.zoom-active ~ .gal-zoom-result{display:block} /* Not enough room for a 440px side panel below ~1300px viewport width, or on touch devices with no real hover — the lens/result panel would either overflow off-screen or make no sense on a finger tap, so both fall back to the same "zoom inside the box" behaviour theme.js already handles. */ @media(max-width:1300px){ .gal-zoom-result{display:none!important} .gallery.zoom-outside .gal-main.zoom-active img{transform:scale(2.2);cursor:zoom-out} } .pd-cat{color:var(--orange-500);font-weight:600;font-size:.82rem} .pd-info h1{margin:8px 0 12px} .pd-rating-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap} .pd-rating-row .stars{font-size:1.05rem} /* Three distinct price roles — each wins over WooCommerce's shared .woocommerce-Price-amount.amount span by targeting our own wrapper (b / .old / .save), not the generic amount class. */ .pd-price{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px;row-gap:6px;margin-bottom:10px} .pd-price b.pd-price-cur,.pd-price b{font-family:var(--font-num);font-size:1.95rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1} .pd-price b .amount{color:inherit;font-size:inherit;font-weight:inherit} .pd-price .old{font-family:var(--font-num);font-size:1rem;font-weight:600;color:var(--gray-400)} .pd-price .old,.pd-price .old .amount{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--gray-300);color:var(--gray-400)} .pd-price .save{display:inline-flex;align-items:center;gap:4px;background:var(--save);color:#fff;font-size:.76rem;font-weight:800;padding:5px 12px;border-radius:999px;line-height:1;white-space:nowrap} .pd-price .save .amount{color:inherit;font-size:inherit;font-weight:inherit} .pd-desc{color:var(--gray-600);margin:16px 0 22px;font-size:1.02rem} .pd-highlights{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:24px} .pd-hl{display:flex;align-items:center;gap:10px;padding:12px 15px;background:var(--off-white);border:1px solid var(--border);border-radius:var(--r-sm);font-size:.9rem;font-weight:700} .pd-hl .i{width:32px;height:32px;border-radius:9px;background:var(--orange-100);color:var(--orange-600);display:grid;place-items:center;flex-shrink:0} /* Single spacing scale used everywhere in the buy block, so the gap between cart/buy-now equals the gap down to the WhatsApp/call row, and equals the gap between WhatsApp/call themselves — desktop and mobile both use it. */ :root{--buy-gap:9px} .pd-buy{margin:2px 0 18px} /* Row 1: qty stepper + cart + buy-now, all side by side, then wishlist. Row 2: WhatsApp / call, same gap below as the row-1 button gap. All four action buttons (cart, buy-now, whatsapp, call) share the same radius/shape. */ .pd-buy-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--buy-gap);margin-bottom:var(--buy-gap)} .pd-buy-top .pc-qty{order:1;flex-shrink:0;height:42px;border-radius:var(--r-sm)} .pd-buy-top .pc-qty button{width:28px;height:40px} .pd-buy-top .pc-qval{min-width:18px;font-size:.85rem} .pd-buy-top .pc-wish{order:3;flex-shrink:0;width:42px;height:42px} .pc-single{width: auto;} /* .pd-buy-grid only groups the two buttons in markup — display:contents lets its children (add-to-cart / buy-now) become direct flex items of .pd-buy-top so both sit inline with the qty stepper, side by side. */ .pd-buy-grid{display:contents} .pd-buy-grid .btn{order:2;flex:1 1 0;min-width:0;padding-inline:12px;border-radius:var(--r-sm);font-size:.82rem;white-space:nowrap} /* Out-of-stock "স্টকে এলে জানান" (full-size — see .pc-notify base rules in styles.css) — matches the height/shape of the qty+cart row it replaces. Rendered as a sibling of .pd-buy (not inside it — there's no cart/qty row to group it with when out of stock), so it needs its own margin, not .pd-buy's. */ .pc-notify--full{margin:2px 0 18px} .pc-notify--full .pc-notify-btn,.pc-notify--full .pc-notify-form input,.pc-notify--full .pc-notify-form button,.pc-notify--full .pc-notify-done{height:46px;border-radius:var(--r-sm);font-size:.92rem} .pc-notify--full .pc-notify-btn{background:var(--off-white)} .pc-notify--full .pc-notify-msg{font-size:.85rem} /* Secondary row: WhatsApp / call — same gap, same button shape as row 1. */ .pd-buy-contact{display:flex;gap:var(--buy-gap);margin-top:var(--buy-gap)} .pd-buy-contact .btn{flex:1 1 0;min-width:0;border-radius:var(--r-sm)} .btn-whatsapp{background:#25d366;color:#fff} .btn-whatsapp:hover{filter:brightness(1.06);transform:translateY(-2px)} .btn-whatsapp.btn-sm{background:rgba(37,211,102,.1);color:#128c3e;border:1.5px solid rgba(37,211,102,.35)} .btn-whatsapp.btn-sm:hover{background:#25d366;color:#fff;border-color:transparent} .btn-call{background:#2354e6;color:#fff} .btn-call:hover{filter:brightness(1.08);transform:translateY(-2px)} .btn-call.btn-sm{background:rgba(35,84,230,.08);color:#2354e6;border:1.5px solid rgba(35,84,230,.3)} .btn-call.btn-sm:hover{background:#2354e6;color:#fff;border-color:transparent} /* In-cart state: single-product add button becomes a green "কার্ট দেখুন". */ .btn.pc-added,.single_add_to_cart_button.pc-added{background-color:var(--green-cta)!important;background-image:none!important;color:#fff!important} /* Hide WooCommerce's separate "View cart" link — we use the in-button state. */ .single-product .added_to_cart,.woocommerce-variation-add-to-cart .added_to_cart,.pd-buy .added_to_cart{display:none!important} /* Compact, smart variable-product buy area. When there are more options than fit on one line, the row scrolls horizontally (drag-scroll, see theme.js) instead of wrapping, with a right-edge fade hinting there's more to see. */ .var-swatches{display:flex;flex-wrap:nowrap;gap:7px;margin:4px 0 10px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%)} .var-swatches::-webkit-scrollbar{display:none} .var-swatch{flex-shrink:0;padding:7px 14px;border:1.5px solid var(--border);border-radius:var(--r-pill);font-size:.85rem;font-weight:600;color:var(--gray-600);background:#fff;cursor:pointer;transition:all var(--t-fast)} .var-swatch:hover{border-color:var(--orange-400);color:var(--orange-600)} .var-swatch.active{background-color:var(--orange-500);background-image:var(--grad-orange);border-color:transparent;color:#fff;box-shadow:0 3px 10px rgba(241,121,18,.28)} .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .woocommerce-variation-add-to-cart .quantity.qty-wrap{flex-shrink:0} .woocommerce-variation-add-to-cart .single_add_to_cart_button{flex:1 1 auto;min-width:130px;white-space:nowrap} .woocommerce-variation-add-to-cart .pd-buy-variation{flex:1 1 100%} @media(max-width:600px){ .woocommerce-variation-add-to-cart .single_add_to_cart_button{flex:1 1 60%} .var-swatch{padding:6px 12px;font-size:.82rem} } /* Mobile: same layout, tighter spacing — one shared gap value everywhere, so cart/buy-now/whatsapp/call read as one consistent grid, no stray gaps. */ @media(max-width:600px){ :root{--buy-gap:7px} .pd-buy{margin:2px 0 14px} .pd-buy-top .pc-wish{width:40px;height:40px} .pd-buy-grid .btn{height:42px;font-size:.78rem;padding-inline:8px;gap:5px} .pd-buy-grid .btn svg{width:14px;height:14px;flex-shrink:0} .pd-buy-contact .btn{font-size:.76rem;padding:8px 6px;gap:4px;white-space:normal;line-height:1.15} .pd-buy-contact .btn svg{width:13px;height:13px;flex-shrink:0} } /* Mobile: compact price row — smaller numerals, save-badge stays inline. */ @media(max-width:480px){ .pd-price{column-gap:8px;row-gap:5px;margin-bottom:8px} .pd-price b,.pd-price b .amount{font-size:1.55rem} .pd-price .old,.pd-price .old .amount{font-size:.82rem} .pd-price .save{font-size:.68rem;padding:4px 10px} .pahari-single .pd-price ins,.pahari-single .pd-price ins .amount{font-size:1.55rem} .pahari-single .pd-price .price > .amount, .pahari-single .pd-price .price > .amount bdi, .pahari-single .pd-price .price > ins, .pahari-single .pd-price .price > ins .amount, .pahari-single .pd-price .price > .pahari-price-now, .pahari-single .pd-price .price > .pahari-price-now .amount{font-size:1.55rem!important} .pahari-single .pd-price del,.pahari-single .pd-price del .amount,.pahari-single .pd-price del bdi, .pahari-single .pd-price .price del,.pahari-single .pd-price .price del .amount,.pahari-single .pd-price .price del bdi{font-size:.82rem!important} .pahari-single .pd-price .pahari-price-now{font-size:1.55rem} .pahari-single .pd-price .pahari-price-old{font-size:.82rem} .pahari-single .pd-price .pahari-price-save{font-size:.68rem;padding:4px 10px} } .pd-delivery{display:flex;align-items:center;gap:12px;padding:14px;border:1px dashed var(--orange-400);border-radius:var(--r-md);background:var(--orange-100);margin-bottom:18px;font-size:.92rem} .pd-trust{display:flex;gap:20px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--border)} .pd-trust .t{display:flex;align-items:center;gap:7px;font-size:.84rem;color:var(--gray-600);font-weight:500} .pd-trust .t svg{color:var(--orange-500)} .tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:26px;overflow-x:auto} .tab{padding:13px 20px;font-family:var(--font-display);font-weight:600;color:var(--gray-500);border-bottom:2px solid transparent;white-space:nowrap;transition:all var(--t-fast)} .tab.active{color:var(--orange-600);border-color:var(--orange-500)} .tab-panel{display:none}.tab-panel.active{display:block;animation:fadeUp .4s var(--ease-out)} .nutri-table{width:100%;border-collapse:collapse;max-width:460px} .nutri-table tr{border-bottom:1px solid var(--border)} .nutri-table td{padding:11px 4px;font-size:.94rem}.nutri-table td:last-child{text-align:right;font-weight:700;color:var(--orange-600)} .origin-card{display:flex;gap:18px;align-items:center;padding:22px;background:var(--off-white);border:1px solid var(--border);border-radius:var(--r-lg)} .origin-card img{width:100px;height:100px;border-radius:50%;object-fit:cover;flex-shrink:0} .review-item{padding:20px 0;border-bottom:1px solid var(--border)} .review-item .head{display:flex;align-items:center;gap:12px;margin-bottom:9px} .review-item img{width:42px;height:42px;border-radius:50%;object-fit:cover} .sticky-buy{position:fixed;bottom:0;left:0;right:0;z-index:870;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-top:1px solid var(--border);padding:11px var(--gutter);transform:translateY(120%);transition:transform var(--t-mid) var(--ease-out)} .sticky-buy.show{transform:translateY(0)} .sticky-buy-inner{max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:16px} .sticky-buy .pinfo{display:flex;align-items:center;gap:13px} .sticky-buy img{width:48px;height:48px;border-radius:11px;object-fit:contain;background:var(--gray-50);padding:3px} @media(max-width:880px){.pd-grid{grid-template-columns:minmax(0,1fr);gap:28px}.gallery{position:static}.pd-highlights{grid-template-columns:1fr}.sticky-buy .pinfo{display:none}} @media(max-width:760px){.sticky-buy{bottom:66px}} /* ===== WooCommerce variable-product form (styled to match the design) ===== Our custom template handles SIMPLE products with qty + add + buy. For variable/grouped/external products it falls back to WooCommerce's own form, which we style here so it fits inside .pd-info. NOTE: we must NOT set display:grid on div.product — our template manages its own layout. */ .pahari-single .woocommerce-variation-price{margin:4px 0 12px} .pahari-single .woocommerce-variation-price .price{display:flex;align-items:baseline;gap:10px} .pahari-single .woocommerce-variation-price .amount{font-family:var(--font-num);font-size:1.9rem;font-weight:800;color:var(--orange-600)} /* Variation table: label sits above its options (not squeezed into a side column) — gives swatches the full row width to size themselves naturally. */ .pahari-single table.variations, .pahari-single table.variations tbody, .pahari-single table.variations tr{display:block;width:100%} .pahari-single table.variations{border-collapse:collapse;margin:2px 0 14px} .pahari-single table.variations tr{margin-bottom:12px} .pahari-single table.variations tr:last-child{margin-bottom:0} .pahari-single table.variations th.label{display:block;width:auto;text-align:left;font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:.86rem;padding:0 0 7px} .pahari-single table.variations td.value{display:block;padding:0;position:relative} .pahari-single table.variations select,.woocommerce .pahari-single table.variations select{width:100%;max-width:340px;padding:12px 16px!important;border:1.5px solid var(--border)!important;border-radius:var(--r-md)!important;background:#fff!important;font-family:inherit;color:var(--ink)} .pahari-single .reset_variations{display:none!important} .pahari-single form.cart{display:block;margin:2px 0 14px 0 !important} /* Qty + add-to-cart + buy-now, all side by side — mirrors the simple-product layout (.pd-buy-top / .pd-buy-grid above), same shared --buy-gap scale. */ .pahari-single .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;align-items:center;gap:var(--buy-gap);width:100%} .pahari-single form.cart .quantity{display:inline-flex;order:1} .pahari-single form.cart .quantity input.qty,.woocommerce .pahari-single form.cart .quantity input.qty{width:36px;text-align:center;padding:0!important;border:none!important;border-radius:0!important;background:transparent!important;font-family:var(--font-num);font-size:.95rem} .pahari-single .single_add_to_cart_button, .woocommerce .pahari-single .single_add_to_cart_button, .woocommerce .pahari-single button.single_add_to_cart_button{background:var(--grad-orange)!important;color:#fff!important;border:none!important;padding:0 14px!important;height:42px;border-radius:var(--r-sm)!important;font-family:var(--font-display)!important;font-weight:700!important;font-size:.82rem!important;line-height:1.2!important;box-shadow:var(--sh-orange)!important;cursor:pointer;transition:transform var(--t-fast),box-shadow var(--t-mid);text-transform:none!important;letter-spacing:0!important;order:2;flex:1 1 0;min-width:0} .pahari-single .single_add_to_cart_button:hover{transform:translateY(-2px)} .pahari-single .single_add_to_cart_button.disabled,.pahari-single .single_add_to_cart_button:disabled{opacity:.5!important;cursor:not-allowed;box-shadow:none!important} .pahari-single .stock.out-of-stock{color:var(--danger);font-weight:600} .pahari-single .pd-info .quantity{margin:0} /* Variation swatches — compact chips (built by theme.js), sized by content rather than stretched, so 2-3 options never look oversized. */ .pahari-single .var-swatches{display:flex;flex-wrap:nowrap;gap:8px;margin:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%)} .pahari-single .var-swatches::-webkit-scrollbar{display:none} .pahari-single .var-swatch{flex-shrink:0;padding:8px 16px;border:1.5px solid var(--border);border-radius:var(--r-pill);background:#fff;color:var(--gray-600);font-family:var(--font-display);font-weight:600;font-size:.85rem;cursor:pointer;transition:all var(--t-fast);line-height:1.2} .pahari-single .var-swatch:hover{border-color:var(--orange-400);color:var(--orange-600)} .pahari-single .var-swatch.active{background-color:var(--orange-500);background-image:var(--grad-orange);border-color:transparent;color:#fff;box-shadow:0 3px 10px rgba(241,121,18,.28)} .pahari-single .var-swatch.active::after{content:'✓';margin-left:6px;font-weight:700} .pahari-single .var-swatch.disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through} /* Buy area for simple products (qty + add + buy-now + wishlist row, then the compact WhatsApp/call row) — see .pd-buy-top / .pd-buy-grid above. */ .pahari-single .pd-buy .btn-dark{margin:0} /* Variable-product: compact qty stepper (order 1, shares row 1 with add-to-cart). */ .pahari-single .quantity.qty-wrap{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:var(--r-sm);overflow:hidden;background:#fff;flex-shrink:0;height:42px;order:1} .pahari-single .quantity.qty-wrap button{width:28px;height:40px;flex-shrink:0;border:none;background:none;font-size:1.05rem;color:var(--gray-600);cursor:pointer;line-height:1} .pahari-single .quantity.qty-wrap button:hover{color:var(--orange-600)} .pahari-single .quantity.qty-wrap input.qty,.woocommerce .pahari-single .quantity.qty-wrap input.qty{width:32px!important;height:40px;border:none!important;border-radius:0!important;text-align:center;padding:0!important;background:transparent!important;font-family:var(--font-num);font-size:.85rem;-moz-appearance:textfield;appearance:textfield} /* Hide the native number-input spin arrows — we have our own −/+ buttons. */ .pahari-single .quantity.qty-wrap input.qty::-webkit-inner-spin-button, .pahari-single .quantity.qty-wrap input.qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} /* Add-to-cart + buy-now: side by side, same radius/height/gap as the qty stepper (same shared --buy-gap scale used in .pd-buy-top above). */ .pahari-single .single_add_to_cart_button, .woocommerce .pahari-single .single_add_to_cart_button{white-space:nowrap;text-align:center} .pahari-single .pd-buy-variation{order:2;margin:0;flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;padding:0 14px;border-radius:var(--r-sm);font-size:.82rem;white-space:nowrap} /* Hide WooCommerce's duplicate variation price — we show it in .pd-price */ .pahari-single .woocommerce-variation-price{display:none!important} .pahari-single .pd-price .price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:6px;flex:1 1 100%} /* A PLAIN (non-sale) variation price arrives as — no ins/del, no pahari-price-* classes — and WooCommerce's own ".woocommerce div.product span.price" rule paints it olive-green with its own font. Style it explicitly (!important to outrank that WC selector) so the price looks identical to the simple-product one. NOTE: the big/ink treatment must only reach CURRENT-price paths (a direct .amount, or one inside ins/.pahari-price-now) — a naive ".price .amount" selector also swallows the .amount inside , blowing the old price up to 1.95rem (its 4-class specificity beats the 3-class del rule below). */ .pahari-single .pd-price .price{font-family:var(--font-num)!important;color:var(--ink)!important;letter-spacing:-.02em;line-height:1} .pahari-single .pd-price .price > .amount, .pahari-single .pd-price .price > .amount bdi, .pahari-single .pd-price .price > ins, .pahari-single .pd-price .price > ins .amount, .pahari-single .pd-price .price > ins bdi, .pahari-single .pd-price .price > .pahari-price-now, .pahari-single .pd-price .price > .pahari-price-now .amount{font-family:var(--font-num)!important;font-size:1.95rem!important;font-weight:800!important;color:var(--ink)!important;letter-spacing:-.02em;line-height:1} .pahari-single .pd-price ins{text-decoration:none;background:transparent} .pahari-single .pd-price ins,.pahari-single .pd-price ins .amount{font-family:var(--font-num);font-size:1.95rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1} /* Old/struck price — same muted look in EVERY markup shape (del from WC, .pahari-price-old from our sale-price filter), wherever it sits. */ .pahari-single .pd-price del,.pahari-single .pd-price del .amount,.pahari-single .pd-price del bdi, .pahari-single .pd-price .price del,.pahari-single .pd-price .price del .amount,.pahari-single .pd-price .price del bdi, .pahari-single .pd-price .pahari-price-old,.pahari-single .pd-price .pahari-price-old .amount,.pahari-single .pd-price .pahari-price-old bdi{font-family:var(--font-num)!important;font-size:1rem!important;font-weight:600!important;color:var(--gray-400)!important;text-decoration:line-through} /* Picking a variation swaps .pd-price's HTML for the variation's own price_html, which goes through pahari_format_sale_price() and comes back as .pahari-price-now/-old/-save (not ins/del) — style those too so the price doesn't go plain the moment a variation is selected. */ .pahari-single .pd-price .pahari-price-now{font-family:var(--font-num);font-size:1.95rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1} .pahari-single .pd-price .pahari-price-old{font-family:var(--font-num);font-size:1rem;font-weight:600;color:var(--gray-400);text-decoration:line-through} .pahari-single .pd-price .pahari-price-save{display:inline-flex;align-items:center;gap:4px;background:var(--save);color:#fff;font-size:.76rem;font-weight:800;padding:5px 12px;border-radius:999px;line-height:1;white-space:nowrap} @media(max-width:600px){ .pahari-single .single_add_to_cart_button, .woocommerce .pahari-single .single_add_to_cart_button{height:44px;font-size:.82rem!important;padding:0 10px!important} .pahari-single .pd-buy-variation{height:44px;font-size:.82rem;padding:0 10px} .pahari-single .pd-buy-variation svg{width:14px;height:14px;flex-shrink:0} .pahari-single .var-swatch{padding:7px 13px;font-size:.8rem} .pahari-single .quantity.qty-wrap,.pahari-single .quantity.qty-wrap button,.pahari-single .quantity.qty-wrap input.qty{height:44px} } /* WooCommerce default single fallback (only if our template isn't used) */ .single-product .product_title{margin:8px 0 12px} .single-product p.price .amount{font-family:var(--font-num);font-weight:800;color:var(--orange-600)} /* ========================================================================== Reviews — woocommerce/single-product-reviews.php override. Premium clickable star input (pure CSS, no dependency on WC's own JS converting the