/* ===== product.css ===== */ /* ========================================================================= Single Product page design. Scope: body.single-product.woocommerce-page div.product (Astra + WooCommerce, same stack as vaporsdubai, so selectors transfer 1:1). -------------------------------------------------------------------------- RECOLOURED to the vaporsdubai header palette. header.css and this file land in the SAME custom_css post, so header.css's :root vars are in scope here: --vd-hdr-ink #0B0D12 headings / strong text (header's near-black) --vd-hdr-gold #F5C451 premium accent (logo ring / sale flag) Primary actions reuse the header's action-button gradient: base linear-gradient(180deg,#7C3AED,#6D28D9) hover linear-gradient(180deg,#8B5CF6,#7C3AED) ========================================================================= */ /* ==== Single product page — applies to every product ==== The layout is scoped with body.single-product.woocommerce-page + div.product so it styles all products. Rules that override Astra's ID-anchored width chain (`.woocommerce #content .ast-woocommerce-container div.product div.images`) add #content and .ast-woocommerce-container so they outrank it for every product. */ /* WooCommerce hands the gallery back by rewriting its inline opacity:0 to 1. If that script never runs the photo stays invisible, so pin it open for no-JS visitors (the !important is what beats the inline style). */ body.single-product.woocommerce-no-js div.product .woocommerce-product-gallery{opacity:1 !important} body.single-product.woocommerce-page #content{background:linear-gradient(180deg,#f4f0fe 0,#fff 460px)} body.single-product.woocommerce-page .ast-woocommerce-container{max-width:1180px;padding:36px 24px 72px} /* Two columns: gallery left, buy box right, tabs spanning underneath. */ body.single-product.woocommerce-page div.product{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:44px 54px;align-items:start} body.single-product.woocommerce-page div.product > .woocommerce-tabs{grid-column:1 / -1} /* Related products live inside div.product too — without this they'd sit in the left grid track and their cards would squeeze to ~120px. Span full width. */ body.single-product.woocommerce-page div.product > section.related.products{grid-column:1 / -1;width:100%;margin-top:14px} body.single-product.woocommerce-page div.product > section.related.products > h2{font-size:26px;font-weight:800;letter-spacing:-.4px;color:var(--vd-hdr-ink,#0B0D12);margin:0 0 22px} /* ---- Related products: full card grid matching the homepage shop cards ---- The polished card look lives in homepage.css scoped to `.vd-products` (a homepage-only wrapper). The related section has NO such ancestor, so the card interior is re-declared here, scoped to this section and reusing the same --vd-* design tokens, so related cards are visually identical to the site's shop cards. Accents (gold sale flag, violet sale price) follow the single-product page's header palette rather than the homepage's red. */ body.single-product.woocommerce-page div.product > section.related.products ul.products{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:26px !important;margin:0 !important} /* WooCommerce floats the loop and adds clearfix pseudos — kill both so grid wins. */ body.single-product.woocommerce-page div.product > section.related.products ul.products::before, body.single-product.woocommerce-page div.product > section.related.products ul.products::after{content:none !important;display:none !important} body.single-product.woocommerce-page div.product > section.related.products ul.products li.product{float:none !important;width:auto !important;margin:0 !important;clear:none !important;background:#fff;border:1px solid var(--vd-line);border-radius:var(--vd-radius);padding:0 0 18px;overflow:hidden;text-align:center;position:relative;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease} body.single-product.woocommerce-page div.product > section.related.products ul.products li.product:hover{transform:translateY(-6px);border-color:transparent;box-shadow:var(--vd-shadow-lg)} body.single-product.woocommerce-page div.product > section.related.products ul.products li.product a img{display:block;width:100% !important;margin:0 0 14px !important;aspect-ratio:1/1;object-fit:contain;background:var(--vd-bg-soft);padding:16px;border-radius:var(--vd-radius) var(--vd-radius) 0 0;transition:transform .35s ease} body.single-product.woocommerce-page div.product > section.related.products ul.products li.product:hover a img{transform:scale(1.06)} body.single-product.woocommerce-page div.product > section.related.products ul.products li.product .woocommerce-loop-product__title{font-family:var(--vd-font-h);font-size:15px;font-weight:600;line-height:1.4;color:var(--vd-ink);padding:0 14px;margin:0 0 8px} body.single-product.woocommerce-page div.product > section.related.products ul.products li.product .price{font-family:var(--vd-font-h);font-size:16px;font-weight:700;color:var(--vd-ink);display:block;margin:0 0 14px} body.single-product.woocommerce-page div.product > section.related.products ul.products li.product .price del{color:var(--vd-muted);font-size:.82em;font-weight:500;margin-right:6px} body.single-product.woocommerce-page div.product > section.related.products ul.products li.product .price ins{color:var(--vd-sale,#FF3B5C);text-decoration:none;font-weight:800} body.single-product.woocommerce-page div.product > section.related.products ul.products li.product .star-rating{margin:0 auto 10px;color:#FFB020;font-size:12px} body.single-product.woocommerce-page div.product > section.related.products span.onsale{position:absolute;top:14px;right:14px;left:auto;z-index:2;margin:0;min-height:0;min-width:0;line-height:1;padding:6px 12px;border-radius:999px;background:linear-gradient(180deg,#FB7185,#E11D48);box-shadow:0 8px 18px rgba(225,29,72,.35);color:#fff;font-family:var(--vd-font-h);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} /* Related Add-to-cart → violet gradient pill (the design's primary action; was ink-black). !important beats Astra's global button color. */ body.single-product.woocommerce-page div.product > section.related.products ul.products li.product .button, body.single-product.woocommerce-page div.product > section.related.products ul.products li.product a.button{background:linear-gradient(180deg,#7C3AED,#6D28D9) !important;color:#fff !important;box-shadow:0 8px 18px rgba(109,40,217,.28);margin-top:2px;padding:10px 22px;border:0;border-radius:999px;font-size:13.5px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:background .18s ease,box-shadow .18s ease,transform .18s ease} body.single-product.woocommerce-page div.product > section.related.products ul.products li.product .button:hover, body.single-product.woocommerce-page div.product > section.related.products ul.products li.product a.button:hover{background:linear-gradient(180deg,#8B5CF6,#7C3AED) !important;color:#fff !important;box-shadow:0 12px 26px rgba(109,40,217,.38);transform:translateY(-2px)} /* Responsive column count. */ @media (max-width:1200px){body.single-product.woocommerce-page div.product > section.related.products ul.products{grid-template-columns:repeat(3,minmax(0,1fr)) !important}} @media (max-width:900px){body.single-product.woocommerce-page div.product > section.related.products ul.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important}} @media (max-width:480px){body.single-product.woocommerce-page div.product > section.related.products ul.products{grid-template-columns:1fr !important}} /* Astra pins these two to `width:50%`/`46%` through `.woocommerce #content .ast-woocommerce-container div.product div.images`, which carries an ID, so the override has to name #content too in order to outrank it. Without this the two grid tracks are only half filled. */ body.single-product.woocommerce-page #content .ast-woocommerce-container div.product > .woocommerce-product-gallery, body.single-product.woocommerce-page #content .ast-woocommerce-container div.product > .summary.entry-summary{width:100%} /* ---- Gallery card ---- */ body.single-product.woocommerce-page div.product .woocommerce-product-gallery{position:relative;background:#fff;border:1px solid #ede9fe;border-radius:22px;padding:20px;box-shadow:0 18px 44px rgba(15,23,42,.07)} body.single-product.woocommerce-page div.product .woocommerce-product-gallery img{border-radius:16px;box-shadow:none !important} body.single-product.woocommerce-page div.product .woocommerce-product-gallery__trigger{border-radius:12px;opacity:.85} body.single-product.woocommerce-page div.product .woocommerce-product-gallery .flex-control-nav{margin-top:14px !important} body.single-product.woocommerce-page div.product .woocommerce-product-gallery .flex-control-thumbs li img{border-radius:10px;border:2px solid transparent;padding:0;opacity:.65;cursor:pointer} body.single-product.woocommerce-page div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active{border-color:#7c3aed;opacity:1} /* ---- Buy box ---- */ body.single-product.woocommerce-page div.product .woocommerce-breadcrumb{font-size:13px;color:#94a3b8;margin:0 0 16px} body.single-product.woocommerce-page div.product .woocommerce-breadcrumb a{color:#64748b;text-decoration:none} body.single-product.woocommerce-page div.product .woocommerce-breadcrumb a:hover{color:#7c3aed} body.single-product.woocommerce-page div.product .single-product-category{display:inline-block;margin:0 0 14px} body.single-product.woocommerce-page div.product .single-product-category a{display:inline-block;background:#f3e8ff;color:#6d28d9;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:7px 15px;border-radius:999px;text-decoration:none} body.single-product.woocommerce-page div.product h1.product_title{font-size:38px;line-height:1.16;font-weight:800;letter-spacing:-.7px;color:var(--vd-hdr-ink,#0B0D12);margin:0 0 12px} body.single-product.woocommerce-page div.product .summary p.price{font-size:30px;font-weight:800;letter-spacing:-.4px;color:#7c3aed;margin:0 0 18px} /* Sale price inside the main buy-box → red (--vd-sale, one sale color for the whole site). The plain non-sale price keeps its violet. */ body.single-product.woocommerce-page div.product .summary p.price ins{color:var(--vd-sale,#FF3B5C);text-decoration:none;font-weight:800} body.single-product.woocommerce-page div.product .woocommerce-product-details__short-description{margin:0 0 20px;border-left:3px solid #ede9fe;padding-left:16px} body.single-product.woocommerce-page div.product .woocommerce-product-details__short-description p{font-size:16px;line-height:1.75;color:#475569;margin:0} /* Availability pill: neutral by default, only green when the stock span says in-stock, so the colour cannot lie if inventory changes. */ body.single-product.woocommerce-page div.product p.ast-stock-detail{display:inline-flex;align-items:center;gap:8px;margin:0 0 24px;padding:9px 17px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;font-size:13.5px;color:#475569} body.single-product.woocommerce-page div.product p.ast-stock-detail .ast-stock-avail{font-weight:500} body.single-product.woocommerce-page div.product p.ast-stock-detail .stock{font-weight:700} body.single-product.woocommerce-page div.product p.ast-stock-detail .stock::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:currentColor;vertical-align:1px} body.single-product.woocommerce-page div.product p.ast-stock-detail:has(.stock.in-stock){background:#f0fdf4;border-color:#bbf7d0;color:#15803d} body.single-product.woocommerce-page div.product p.ast-stock-detail:has(.stock.out-of-stock){background:#fef2f2;border-color:#fecaca;color:#b91c1c} /* ---- Variable product: variation selects ---- The variations table is a 2-col WC table (th.label | td.value). It is re-flowed to stack label-above-select, and the selects are dressed to match the review-form inputs (1.5px border, 12px radius, purple focus ring) with a custom purple chevron — Astra ships these selects appearance:none, so a background chevron must be supplied or the caret disappears. Labels go uppercase, which also normalises the lower-case "coil" attribute. */ body.single-product.woocommerce-page div.product form.variations_form table.variations{flex:1 1 100%;width:100%;border-collapse:separate;border-spacing:0;margin:0 0 2px} body.single-product.woocommerce-page div.product form.variations_form table.variations tr{display:block;margin:0 0 18px} body.single-product.woocommerce-page div.product form.variations_form table.variations tr:last-child{margin-bottom:8px} body.single-product.woocommerce-page div.product form.variations_form table.variations th.label, body.single-product.woocommerce-page div.product form.variations_form table.variations td.value{display:block;width:auto !important;padding:0 !important;border:0 !important;float:none !important} body.single-product.woocommerce-page div.product form.variations_form table.variations th.label{padding:0 0 8px !important} body.single-product.woocommerce-page div.product form.variations_form table.variations th.label label{display:block;font-family:var(--vd-font-h);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#64748b;margin:0} body.single-product.woocommerce-page div.product form.variations_form table.variations td.value select{display:block;width:100%;height:52px;padding:0 46px 0 16px;background-color:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;border:1.5px solid #e2e8f0;border-radius:12px;font-family:var(--vd-font-b);font-size:16px;font-weight:600;color:var(--vd-ink);appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease} body.single-product.woocommerce-page div.product form.variations_form table.variations td.value select:hover{border-color:#c4b5fd} body.single-product.woocommerce-page div.product form.variations_form table.variations td.value select:focus{border-color:#7C3AED;box-shadow:0 0 0 4px rgba(124,58,237,.14);outline:none} /* While the placeholder ("Choose an option") is active, keep the text muted. */ body.single-product.woocommerce-page div.product form.variations_form table.variations td.value select:has(option[value=""]:checked){color:#94a3b8} /* The "Clear" reset link, shown once a variation is picked. */ body.single-product.woocommerce-page div.product form.variations_form table.variations td.value .reset_variations{display:inline-flex;align-items:center;gap:6px;float:none !important;vertical-align:middle;margin:10px 0 0;padding:5px 12px;border:1px solid #e2e8f0;border-radius:999px;font-family:var(--vd-font-h);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8 !important;text-decoration:none;transition:color .16s ease,border-color .16s ease} body.single-product.woocommerce-page div.product form.variations_form table.variations td.value .reset_variations::before{content:"\2715";font-size:10px} body.single-product.woocommerce-page div.product form.variations_form table.variations td.value .reset_variations:hover{color:#7C3AED !important;border-color:#c4b5fd} body.single-product.woocommerce-page div.product form.cart{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;margin:0 0 24px} body.single-product.woocommerce-page div.product .quantity{margin:0;width:auto} body.single-product.woocommerce-page div.product .quantity input.qty{width:78px;height:54px;padding:0 8px;background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;font-size:16.5px;font-weight:700;color:var(--vd-hdr-ink,#0B0D12);text-align:center} body.single-product.woocommerce-page div.product .quantity input.qty:focus{border-color:#7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,.13);outline:none} body.single-product.woocommerce-page div.product button.single_add_to_cart_button{flex:1 1 220px;min-height:54px;margin:0;padding:0 34px;border:0;border-radius:14px;background:linear-gradient(180deg,#7C3AED,#6D28D9);color:#fff;font-size:16.5px;font-weight:700;letter-spacing:.2px;line-height:1.2;cursor:pointer;box-shadow:0 12px 28px rgba(46,16,101,.4);transition:background .18s ease,box-shadow .18s ease,transform .18s ease} body.single-product.woocommerce-page div.product button.single_add_to_cart_button:hover,body.single-product.woocommerce-page div.product button.single_add_to_cart_button:focus{background:linear-gradient(180deg,#8B5CF6,#7C3AED);color:#fff;box-shadow:0 16px 36px rgba(46,16,101,.5);transform:translateY(-2px)} body.single-product.woocommerce-page div.product .product_meta{margin:0;padding-top:18px;border-top:1px dashed #e2e8f0;font-size:13.5px;color:#64748b} body.single-product.woocommerce-page div.product .product_meta a{color:#7c3aed;font-weight:600;text-decoration:none} /* ---- Header-palette accents ---- Gold (--vd-hdr-gold, the logo ring / announcement highlight) is the premium mark. It is only used where contrast holds: as a badge FILL (ink text sitting on gold) and on the star glyphs — never as thin text on the white cards, where #F5C451 would wash out. */ body.single-product.woocommerce-page span.onsale{background:linear-gradient(180deg,var(--vd-hdr-gold),#E0A82E);color:var(--vd-hdr-ink);font-weight:800;letter-spacing:.05em;border:0;border-radius:999px;box-shadow:0 6px 16px rgba(46,16,101,.2)} body.single-product.woocommerce-page .star-rating span{color:var(--vd-hdr-gold)} /* A struck "was" price must not carry the full-purple sale colour. */ body.single-product.woocommerce-page div.product .summary p.price del{color:#94a3b8;font-size:.62em;font-weight:600;opacity:.9} /* ---- Tabs: segmented pill nav + white content card ---- */ body.single-product.woocommerce-page div.product .woocommerce-tabs{margin-top:6px} body.single-product.woocommerce-page div.product .woocommerce-tabs ul.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;padding:6px;list-style:none;background:#f4f3fb;border:1px solid #ede9fe;border-radius:16px} body.single-product.woocommerce-page div.product .woocommerce-tabs ul.tabs::before{display:none} body.single-product.woocommerce-page div.product .woocommerce-tabs ul.tabs li,body.single-product.woocommerce-page div.product .woocommerce-tabs ul.tabs li::before,body.single-product.woocommerce-page div.product .woocommerce-tabs ul.tabs li::after{display:block;margin:0;padding:0;border:0;background:transparent;border-radius:0;box-shadow:none} body.single-product.woocommerce-page div.product .woocommerce-tabs ul.tabs li a{display:block;padding:11px 22px;border-radius:11px;font-size:14.5px;font-weight:700;letter-spacing:.1px;color:#475569;text-decoration:none} body.single-product.woocommerce-page div.product .woocommerce-tabs ul.tabs li a:hover{color:#6d28d9;text-decoration:none} body.single-product.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a{background:#fff !important;color:#7C3AED !important;box-shadow:0 6px 16px rgba(46,16,101,.14)} body.single-product.woocommerce-page div.product .woocommerce-tabs .panel{background:#fff;border:1px solid #ede9fe;border-radius:20px;padding:30px 32px;margin:0;box-shadow:0 14px 34px rgba(15,23,42,.06)} body.single-product.woocommerce-page div.product .woocommerce-tabs .panel > p{font-size:15.5px;line-height:1.8;color:#475569} body.single-product.woocommerce-page div.product .woocommerce-tabs .panel ul{display:grid;gap:11px;margin:0 0 20px;padding:0;list-style:none} body.single-product.woocommerce-page div.product .woocommerce-tabs .panel ul li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.7;color:#475569} body.single-product.woocommerce-page div.product .woocommerce-tabs .panel ul li::before{content:"\2713";position:absolute;left:0;top:0;color:#7c3aed;font-weight:800} body.single-product.woocommerce-page div.product .woocommerce-tabs .panel ul li strong{color:var(--vd-hdr-ink,#0B0D12)} body.single-product.woocommerce-page div.product .woocommerce-tabs .panel em{display:block;margin-top:20px;padding:14px 18px;background:#fef2f2;border:1px solid #fecaca;border-left:4px solid #ef4444;border-radius:10px;color:#991b1b;font-size:14px;font-style:normal;line-height:1.65} /* ---- Review panel: fields styled to sit inside the card ---- */ body.single-product.woocommerce-page div.product .woocommerce-tabs .panel h2{font-size:22px;font-weight:700;letter-spacing:-.3px;color:var(--vd-hdr-ink,#0B0D12);margin:0 0 6px} body.single-product.woocommerce-page div.product #reply-title{display:block;font-size:20px;font-weight:700;color:var(--vd-hdr-ink,#0B0D12);margin:0 0 4px} body.single-product.woocommerce-page div.product .comment-form label{display:block;font-size:13.5px;font-weight:600;letter-spacing:.02em;color:#334155;margin:14px 0 6px} body.single-product.woocommerce-page div.product .comment-form input[type=text], body.single-product.woocommerce-page div.product .comment-form input[type=email], body.single-product.woocommerce-page div.product .comment-form textarea, body.single-product.woocommerce-page div.product .comment-form select{width:100%;max-width:100%;padding:12px 14px;background-color:#fff;border:1.5px solid #e2e8f0;border-radius:12px;font-size:15px;color:var(--vd-hdr-ink,#0B0D12)} /* background-color, not the `background` shorthand: Astra paints the select's dropdown arrow as a background-image and sets appearance:none, so resetting the whole background would leave a headless select with no chevron. */ body.single-product.woocommerce-page div.product .comment-form select{padding-right:2.2em} body.single-product.woocommerce-page div.product .comment-form input[type=text]:focus, body.single-product.woocommerce-page div.product .comment-form input[type=email]:focus, body.single-product.woocommerce-page div.product .comment-form textarea:focus, body.single-product.woocommerce-page div.product .comment-form select:focus{border-color:#7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,.13);outline:none} body.single-product.woocommerce-page div.product .comment-form textarea{min-height:150px;line-height:1.7} body.single-product.woocommerce-page div.product #respond p.form-submit{margin-top:20px} body.single-product.woocommerce-page div.product #respond input#submit{min-height:50px;padding:0 30px;border:0;border-radius:14px;background:linear-gradient(180deg,#7C3AED,#6D28D9);color:#fff;font-size:15.5px;font-weight:700;cursor:pointer;box-shadow:0 10px 24px rgba(46,16,101,.36)} body.single-product.woocommerce-page div.product #respond input#submit:hover{background:linear-gradient(180deg,#8B5CF6,#7C3AED);color:#fff} /* ---- Tablet / phone ---- */ @media (max-width:921px){ body.single-product.woocommerce-page div.product{grid-template-columns:1fr;gap:28px} /* Single column: the featured image is only 600px wide, so a full-width card would upscale it. Cap the card and centre it instead. */ body.single-product.woocommerce-page #content .ast-woocommerce-container div.product > .woocommerce-product-gallery{max-width:600px;margin:0 auto} body.single-product.woocommerce-page div.product h1.product_title{font-size:30px;letter-spacing:-.5px} body.single-product.woocommerce-page div.product .summary p.price{font-size:26px} } @media (max-width:544px){ body.single-product.woocommerce-page .ast-woocommerce-container{padding:22px 14px 52px} body.single-product.woocommerce-page div.product{gap:22px} body.single-product.woocommerce-page div.product h1.product_title{font-size:25px;letter-spacing:-.4px} body.single-product.woocommerce-page div.product .summary p.price{font-size:23px} body.single-product.woocommerce-page div.product .woocommerce-product-gallery{padding:12px;border-radius:18px} body.single-product.woocommerce-page div.product .woocommerce-product-details__short-description{padding-left:14px} body.single-product.woocommerce-page div.product form.cart{flex-direction:column} body.single-product.woocommerce-page div.product .quantity,body.single-product.woocommerce-page div.product .quantity input.qty,body.single-product.woocommerce-page div.product button.single_add_to_cart_button{width:100%;flex:1 1 auto} body.single-product.woocommerce-page div.product .woocommerce-tabs ul.tabs li{flex:1 1 auto} body.single-product.woocommerce-page div.product .woocommerce-tabs ul.tabs li a{padding:11px 12px;text-align:center} body.single-product.woocommerce-page div.product .woocommerce-tabs .panel{padding:22px 18px;border-radius:16px} }