/* ========================================================== HERO STAGE — scroll-pinned intro, sits above .shop-page. Full-bleed, breaks out of the page's max-width container. ========================================================== */ .shop-hero-scene{ position:relative; height:340vh; background:var(--stone-black); } .shop-hero-pin{ position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden; } .shop-hero-visual{ position:relative; width:56%; height:78vh; margin-left:6%; border-radius:8px; overflow:hidden; background:#2a2521; flex-shrink:0; } .shop-hero-photo{ position:absolute; inset:-6%; width:112%; height:112%; object-fit:cover; } .shop-hero-sweep{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; background:linear-gradient(105deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.85) var(--sweep,40%), rgba(255,255,255,0) 60%); } .shop-hero-glaze{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.55; background:linear-gradient(105deg, rgba(255,225,200,0) 20%, rgba(255,225,200,.5) var(--sweep,40%), rgba(255,225,200,0) 60%); } .shop-hero-vignette{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(200deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.32) 100%); } .shop-hero-copy{ position:relative; width:38%; margin-left:5%; } .shop-hero-eyebrow{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-2); font-weight:700; margin-bottom:14px; opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); } .shop-hero-eyebrow.in{ opacity:1; transform:translateY(0); } .shop-hero-title{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(30px,3.6vw,46px); line-height:1.1; margin:0 0 18px; color:var(--slab-cream); opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease) .1s, transform .7s var(--ease) .1s; } .shop-hero-title.in{ opacity:1; transform:translateY(0); } .shop-hero-sub{ font-size:14.5px; line-height:1.7; color:var(--marble-muted); max-width:420px; opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease) .2s, transform .7s var(--ease) .2s; } .shop-hero-sub.in{ opacity:1; transform:translateY(0); } .shop-hero-progress{ position:absolute; left:6%; bottom:40px; display:flex; gap:6px; } .shop-hero-progress span{ width:26px; height:2px; background:var(--line); border-radius:2px; transition:background .3s; } .shop-hero-progress span.active{ background:var(--orange-2); } .shop-hero-cfg-card{ position:absolute; right:6%; bottom:60px; width:280px; background:rgba(27,24,21,.9); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:8px; padding:22px; opacity:0; transform:translateY(30px) scale(.96); transition:opacity .6s var(--ease), transform .6s var(--ease); } .shop-hero-cfg-card.in{ opacity:1; transform:translateY(0) scale(1); } .shop-hero-cfg-label{ font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--marble-muted); margin-bottom:10px; } .shop-hero-cfg-price{ font-family:'Fraunces',serif; font-size:24px; color:var(--slab-cream); margin-bottom:14px; } .shop-hero-cfg-price .price{ color:var(--slab-cream); } .shop-hero-cfg-swatches{ display:flex; gap:8px; } .shop-hero-swatch{ width:32px; height:32px; border-radius:50%; border:2px solid transparent; background-size:cover; background-position:center; display:block; transition:border-color .3s, transform .3s; } .shop-hero-swatch:hover{ transform:scale(1.1); } .shop-hero-swatch.active{ border-color:var(--orange-2); } .shop-scroll-cue{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%); font-size:11.5px; color:var(--marble-muted); letter-spacing:.08em; text-transform:uppercase; z-index:5; transition:opacity .4s; } @media(max-width:900px){ .shop-hero-scene{ height:auto; } .shop-hero-pin{ position:relative; height:auto; flex-direction:column; padding:32px 20px 60px; align-items:flex-start; } .shop-hero-visual{ width:100%; height:50vh; margin:0 0 28px; } .shop-hero-copy{ width:100%; margin:0 0 28px; } .shop-hero-progress{ display:none; } .shop-hero-cfg-card{ position:relative; right:auto; bottom:auto; width:100%; opacity:1; transform:none; } .shop-scroll-cue{ display:none; } } /* ========================================================== TopSteen Shop — single product, cards, tabs, related. Reuses site tokens (--stone-black, --orange, Fraunces) so this matches page-about/showroom/contact exactly. ========================================================== */ .shop-page{ background:var(--stone-black); color:var(--slab-cream); font-family:'Manrope',sans-serif; padding:48px 32px 100px; max-width:1320px; margin:0 auto; } @media(max-width:900px){ .shop-page{ padding:24px 16px 140px; } } .shop-page .woocommerce-breadcrumb{ font-size:12.5px; color:var(--marble-muted); margin-bottom:28px; letter-spacing:.02em; } .shop-page .woocommerce-breadcrumb a{ color:var(--marble-muted); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s; } .shop-page .woocommerce-breadcrumb a:hover{ border-color:var(--orange-2); color:var(--slab-cream); } /* ---------- SINGLE PRODUCT LAYOUT ---------- Direct-child combinator (>) is deliberate: div.product also matches every related-product card (.shop-card carries the "product" class too, added by wc_product_class()), and those cards ARE descendants of .shop-single-wrap — just nested inside .shop-related-grid instead of being a direct child. With a plain descendant selector, this 2-column grid was silently applying to every .shop-card as well: each card became its own 1.15fr/1fr grid with only one child, which got auto-placed into just the first column — leaving the second column empty. That's what produced the small image + large dead gap on every related-product card. The direct-child combinator restricts this rule to the actual top-level #product-XXXX wrapper only. */ .shop-single-wrap > div.product{ display:block; width:100%; position:relative; } /* ---------- GALLERY ---------- */ .shop-gallery-main{ position:relative; aspect-ratio:4/3; border-radius:6px; overflow:hidden; background:#241f1b; margin-bottom:14px; cursor:zoom-in; width:100%; } .shop-gallery-slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s var(--ease); } .shop-gallery-slide.active{ opacity:1; } .shop-gallery-img{ width:100%; height:100%; object-fit:cover; transition:transform .15s linear; will-change:transform; } /* Cursor-driven light response — soft-light + overlay blend follows the mouse, mimicking light raking across polished stone. Photo drifts slightly opposite the cursor for subtle depth. */ .shop-gallery-sheen{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; opacity:0; transition:opacity .4s var(--ease); background:radial-gradient(circle 280px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 34%, rgba(255,255,255,0) 68%); } .shop-gallery-glaze{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:0; transition:opacity .4s var(--ease); background:radial-gradient(circle 440px at var(--mx,50%) var(--my,50%), rgba(255,235,215,.45) 0%, rgba(255,235,215,0) 70%); } .shop-gallery-main:hover .shop-gallery-sheen, .shop-gallery-main:hover .shop-gallery-glaze{ opacity:1; } .shop-gallery-shade{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(200deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 100%); } .shop-gallery-badge{ position:absolute; top:18px; left:18px; background:rgba(20,18,16,.75); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:100px; padding:7px 16px; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--slab-cream-dim); z-index:2; } .shop-gallery-badge--oos{ border-color:var(--orange-2); color:var(--orange-2); } .shop-gallery-zoom-btn{ position:absolute !important; bottom:18px; right:18px; z-index:3; width:44px !important; height:44px !important; border-radius:50% !important; background:rgba(20,18,16,.75) !important; backdrop-filter:blur(6px); border:1px solid var(--line) !important; color:var(--slab-cream) !important; font-size:18px; display:flex !important; align-items:center; justify-content:center; cursor:pointer; transition:border-color .3s, transform .3s var(--ease); opacity:0; padding:0 !important; min-width:0 !important; } .shop-gallery-main:hover .shop-gallery-zoom-btn{ opacity:1; } .shop-gallery-zoom-btn:hover{ border-color:var(--orange-2) !important; color:var(--orange-2) !important; transform:scale(1.08); } .shop-gallery-thumbs{ display:flex; gap:10px; flex-wrap:wrap; } .shop-gallery-thumb{ width:76px !important; height:76px !important; border-radius:4px !important; overflow:hidden !important; padding:0 !important; border:1.5px solid transparent !important; cursor:pointer; background:none !important; background-color:transparent !important; transition:border-color .3s; flex-shrink:0; display:block !important; min-width:0 !important; line-height:0 !important; } .shop-gallery-thumb.active{ border-color:var(--orange-2) !important; } .shop-gallery-thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; border-radius:0 !important; } /* ---------- LIGHTBOX ---------- */ .shop-lightbox{ position:fixed; inset:0; z-index:9999; background:rgba(10,9,8,.96); display:none; align-items:center; justify-content:center; opacity:0; transition:opacity .35s var(--ease); } .shop-lightbox.open{ display:flex; opacity:1; } .shop-lightbox-stage{ position:relative; width:min(92vw,1100px); height:min(86vh,850px); overflow:hidden; } .shop-lightbox-slide{ position:absolute; inset:0; opacity:0; transition:opacity .4s var(--ease); overflow:hidden; cursor:zoom-in; } .shop-lightbox-slide.active{ opacity:1; } .shop-lightbox-slide.zoomed{ cursor:grab; } .shop-lightbox-slide.zoomed.dragging{ cursor:grabbing; } .shop-lightbox-img{ width:100%; height:100%; object-fit:contain; transition:transform .35s var(--ease); transform-origin:50% 50%; user-select:none; } .shop-lightbox-slide.zoomed .shop-lightbox-img{ transition:none; } .shop-lightbox-close, .shop-lightbox-nav{ position:absolute !important; z-index:2; background:rgba(20,18,16,.7) !important; border:1px solid var(--line) !important; color:var(--slab-cream) !important; border-radius:50% !important; width:46px !important; height:46px !important; display:flex !important; align-items:center; justify-content:center; cursor:pointer; font-size:20px; padding:0 !important; min-width:0 !important; transition:border-color .3s, color .3s; } .shop-lightbox-close:hover, .shop-lightbox-nav:hover{ border-color:var(--orange-2) !important; color:var(--orange-2) !important; } .shop-lightbox-close{ top:24px; right:24px; } .shop-lightbox-prev{ left:24px; top:50%; transform:translateY(-50%); } .shop-lightbox-next{ right:24px; top:50%; transform:translateY(-50%); } .shop-lightbox-hint{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-size:12px; color:var(--marble-muted); letter-spacing:.02em; } @media(max-width:700px){ .shop-lightbox-nav{ width:38px; height:38px; font-size:16px; } .shop-lightbox-hint{ display:none; } } .shop-trust-row{ display:flex; gap:22px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line); flex-wrap:wrap; } .shop-trust-item{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--marble-muted); } .shop-trust-dot{ width:5px; height:5px; border-radius:50%; background:var(--orange-2); flex-shrink:0; } /* ---------- PRODUCT SUMMARY (real WooCommerce markup, restyled) ---------- */ .shop-single-wrap .summary{ padding:0; } .shop-single-wrap .product_title{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(28px,3.4vw,42px); line-height:1.08; margin:0 0 16px; color:var(--slab-cream); } .shop-single-wrap p.price{ font-family:'Fraunces',serif; font-size:28px; color:var(--slab-cream); margin:0 0 18px; } .shop-single-wrap p.price ins{ text-decoration:none; } .shop-single-wrap p.price del{ color:var(--marble-muted); font-size:18px; margin-right:8px; } .shop-single-wrap .woocommerce-product-details__short-description{ font-size:14.5px; line-height:1.7; color:var(--marble-muted); margin:0 0 32px; max-width:520px; } /* Default WooCommerce star-rating renders in a gold/yellow icon font when left unstyled — this is the exact "yellow surface" symptom. Recolor it to the theme palette (hide entirely when a product has no reviews yet, since WooCommerce still prints an empty rating row in that case). */ .shop-single-wrap .woocommerce-product-rating{ margin:0 0 14px; display:flex; align-items:center; gap:10px; } .shop-single-wrap .star-rating{ color:var(--orange-2); font-size:14px; } .shop-single-wrap .star-rating:before{ color:var(--line); } .shop-single-wrap .woocommerce-review-link{ color:var(--marble-muted); font-size:12.5px; text-decoration:none; border-bottom:1px solid var(--line); } .shop-single-wrap .woocommerce-product-rating:empty, .shop-single-wrap .woocommerce-noreviews{ display:none; } /* Default "Sale!" ribbon — restyle to the theme's orange rather than WooCommerce/Teapoy's default (often pink or yellow depending on theme). */ .shop-single-wrap span.onsale{ position:absolute; top:20px; left:20px; z-index:3; background:var(--orange); color:var(--stone-black); font-family:'Space Mono',monospace; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:6px 12px; border-radius:100px; margin:0; } /* Default product meta (SKU / categories / tags line) + social sharing — dark-theme friendly instead of the parent theme's default light/yellow panel. */ .shop-single-wrap .product_meta{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color:var(--marble-muted); line-height:1.9; } .shop-single-wrap .product_meta a{ color:var(--marble-muted); text-decoration:none; border-bottom:1px solid var(--line); } .shop-single-wrap .product_meta a:hover{ color:var(--orange-2); border-color:var(--orange-2); } /* Variation form — the "WooCommerce Variation Swatches" plugin already converts these into real clickable buttons natively. We only restyle its ACTUAL output classes here — we don't generate our own buttons. */ .shop-single-wrap table.variations{ border:none; margin:0 0 28px; } .shop-single-wrap table.variations tbody, .shop-single-wrap table.variations tr, .shop-single-wrap table.variations td{ display:block; border:none; padding:0; } .shop-single-wrap table.variations label{ display:block; font-size:13px; font-weight:600; margin-bottom:14px; letter-spacing:.01em; color:var(--slab-cream); } .shop-single-wrap .reset_variations{ display:none; } /* Real plugin markup: ul.variable-items-wrapper > li.variable-item (button/color/image/radio types) */ .shop-single-wrap .variable-items-wrapper{ display:flex; gap:9px; flex-wrap:wrap; list-style:none; margin:0 0 28px; padding:0; } .shop-single-wrap .variable-item{ background:none !important; border:1px solid var(--line) !important; color:var(--slab-cream) !important; padding:10px 18px !important; border-radius:100px !important; font-size:13px !important; font-weight:600 !important; cursor:pointer; transition:border-color .3s, color .3s, opacity .3s !important; height:auto !important; width:auto !important; min-width:0 !important; box-shadow:none !important; } .shop-single-wrap .variable-item:hover, .shop-single-wrap .variable-item.selected{ border-color:var(--orange-2) !important; color:var(--orange-2) !important; } .shop-single-wrap .variable-item.disabled, .shop-single-wrap .variable-item.excluded{ opacity:.3 !important; cursor:not-allowed; } /* If a specific attribute (e.g. color/chassis) uses image or color swatch type, keep the swatch circular and correctly sized instead of stretching a broken image */ .shop-single-wrap .variable-item[data-type="image"], .shop-single-wrap .variable-item[data-type="color"]{ padding:0 !important; width:34px !important; height:34px !important; border-radius:50% !important; overflow:hidden; background-size:cover !important; background-position:center !important; } .shop-single-wrap .variable-item[data-type="image"] img{ width:100%; height:100%; object-fit:cover; display:block; } .shop-single-wrap .woocommerce-variation-price .price{ font-size:26px; } .shop-single-wrap .woocommerce-variation-availability{ margin-bottom:16px; font-size:12.5px; color:var(--marble-muted); } /* Force the variation form to stack as full-width blocks. Nothing here previously stated this explicitly — it relied on browser block defaults, but the WooCommerce Variation Swatches plugin can inject its own layout (inline-block/flex) on these wrapper elements, which was pulling the Add to cart button up next to the dropdown instead of onto its own full-width row below it, unlike the reference design. */ .shop-single-wrap .variations_form, .shop-single-wrap .single_variation_wrap, .shop-single-wrap .woocommerce-variation-add-to-cart, .shop-single-wrap table.variations{ display:block !important; width:100% !important; float:none !important; } .shop-single-wrap .single_add_to_cart_button{ width:100% !important; display:block !important; background:var(--orange); color:var(--stone-black); border:none; padding:18px; border-radius:4px; font-size:15px; font-weight:700; letter-spacing:.01em; cursor:pointer; transition:background .3s, transform .15s; font-family:inherit; } .shop-single-wrap .single_add_to_cart_button:hover{ background:var(--orange-2); } .shop-single-wrap .single_add_to_cart_button:active{ transform:scale(.985); } .shop-single-wrap .quantity{ display:none; } /* made-to-order — quantity fixed at 1, hide native stepper */ /* WAPF (WooCommerce Advanced Product Fields) — restyle its own markup, don't replace it */ .shop-single-wrap .wapf-field-wrapper{ margin:0 0 24px; } .shop-single-wrap .wapf-field-title{ font-size:13px; font-weight:600; color:var(--slab-cream); margin-bottom:10px; display:block; } .shop-single-wrap .wapf-option-radio-image, .shop-single-wrap .wapf-option-button{ border:1px solid var(--line) !important; border-radius:100px !important; background:none !important; color:var(--slab-cream-dim) !important; transition:border-color .3s, color .3s !important; } .shop-single-wrap .wapf-option-radio-image.selected, .shop-single-wrap .wapf-option-button.selected, .shop-single-wrap .wapf-option-radio-image:hover, .shop-single-wrap .wapf-option-button:hover{ border-color:var(--orange-2) !important; color:var(--orange-2) !important; } /* ---------- TABS ---------- */ .shop-tabs{ margin-top:80px; border-top:1px solid var(--line); grid-column:1/-1; } .shop-tab-heads{ display:flex; gap:36px; border-bottom:1px solid var(--line); flex-wrap:wrap; } .shop-tab-head{ padding:20px 0 !important; font-size:14px; font-weight:600; color:var(--marble-muted); background:none !important; border:none !important; border-radius:0 !important; width:auto !important; height:auto !important; min-width:0 !important; cursor:pointer; border-bottom:2px solid transparent !important; margin-bottom:-1px; transition:color .3s, border-color .3s; font-family:inherit; } .shop-tab-head.active{ color:var(--slab-cream) !important; border-color:var(--orange-2) !important; } .shop-tab-panel{ display:none; padding:32px 0; font-size:14.5px; line-height:1.75; color:var(--marble-muted); max-width:760px; } .shop-tab-panel.active{ display:block; } .shop-tab-panel table.shop_attributes{ width:100%; border:none; } .shop-tab-panel table.shop_attributes tr{ border-bottom:1px solid var(--line); } .shop-tab-panel table.shop_attributes th, .shop-tab-panel table.shop_attributes td{ padding:12px 0; font-size:13.5px; border:none; background:none; color:var(--marble-muted); } .shop-tab-panel table.shop_attributes th{ color:var(--slab-cream-dim); font-weight:500; width:200px; } /* Reviews (real comments) */ .shop-tab-panel #reviews .commentlist{ list-style:none; margin:0; padding:0; } .shop-tab-panel #reviews .comment{ border-bottom:1px solid var(--line); padding:20px 0; } .shop-tab-panel #reviews .star-rating{ color:var(--orange-2); } .shop-tab-panel #reviews .comment-form-rating select{ background:var(--stone-black-2); color:var(--slab-cream); border:1px solid var(--line); border-radius:4px; padding:6px; } .shop-tab-panel #review_form textarea, .shop-tab-panel #review_form input[type="text"], .shop-tab-panel #review_form input[type="email"]{ background:var(--stone-black-2); border:1px solid var(--line); color:var(--slab-cream); border-radius:4px; padding:10px 12px; width:100%; font-family:inherit; } .shop-tab-panel #review_form #submit{ background:var(--orange); color:var(--stone-black); border:none; padding:12px 28px; border-radius:4px; font-weight:700; cursor:pointer; font-family:inherit; } /* ---------- RELATED / STONE VARIANTS ---------- */ .shop-related{ grid-column:1/-1; margin-top:14px; } /* .shop-page prefix raises specificity above topsteen.css's global ".topsteen-page h2{margin:0}" reset, which was silently zeroing out margin-bottom here no matter what value was set (that reset selector has higher specificity: one class + one element vs. our one class alone). Without this, ALL visible spacing under each heading and between the two sections came from a single .shop-related margin-top value — there was no way to give "space below heading" and "space above section" different sizes, which is why it looked like one big, hard-to-control gap. */ .shop-page .shop-section-title{ font-family:'Fraunces',serif; font-weight:500; font-size:26px; margin:0 0 28px; } .shop-related-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px 32px; } @media(max-width:900px){ .shop-related-grid{ grid-template-columns:repeat(2,1fr); } } /* ---------- PRODUCT CARDS (shared: related + future shop grid) ---------- Plain, unboxed tiles — no border, no card background, no padding shell. Just a clean rectangular image with generous surrounding whitespace and simple text below, matching the approved reference design exactly. The only "container" cue is the image itself; everything else is negative space and typography. */ .shop-card{ list-style:none; width:100%; float:none; margin:0; } .shop-card-link{ display:block; text-decoration:none; color:inherit; } /* Target design (2nd reference screenshot): product photos keep their natural white background and headroom — the table sits inset on a white card, not cropped/zoomed and not sitting on a dark tile. object-fit:contain shows the whole photo as shot; the white background comes from the photo itself (studio product shots), so no extra fill color is needed behind it. */ .shop-card-media{ position:relative; aspect-ratio:1/1; border-radius:6px; overflow:hidden; background:#fff; margin-bottom:18px; } .shop-card-img{ width:100%; height:100%; object-fit:contain; object-position:center; transition:transform .5s var(--ease); } .shop-card-link:hover .shop-card-img{ transform:scale(1.04); } .shop-card-shade{ position:absolute; inset:0; background:linear-gradient(200deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.3) 100%); pointer-events:none; } .shop-card-badge{ position:absolute; top:14px; left:14px; background:rgba(20,18,16,.8); border:1px solid var(--line); border-radius:100px; padding:5px 13px; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--slab-cream-dim); } .shop-card-badge--oos{ border-color:var(--orange-2); color:var(--orange-2); } .shop-card-stone{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-2); font-weight:600; margin-bottom:6px; } .shop-card-title{ font-family:'Fraunces',serif; font-weight:500; font-size:17px; line-height:1.28; margin:0 0 6px; color:var(--slab-cream); } .shop-card-price{ font-size:13.5px; color:var(--marble-muted); line-height:1.4; } .shop-card-price .price{ color:var(--marble-muted); } /* ---------- REVEAL MOTION ---------- */ .reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in{ opacity:1; transform:translateY(0); } /* ---------- MOBILE STICKY ADD-TO-CART ---------- */ .shop-sticky-bar{ display:none; position:fixed; bottom:0; left:0; right:0; background:var(--stone-black-2); border-top:1px solid var(--line); padding:14px 18px; align-items:center; justify-content:space-between; gap:14px; z-index:50; } .shop-sticky-bar .shop-sticky-price{ font-family:'Fraunces',serif; font-size:18px; color:var(--slab-cream); } .shop-sticky-bar button{ background:var(--orange); color:var(--stone-black); border:none; padding:13px 24px; border-radius:4px; font-weight:700; font-size:13.5px; font-family:inherit; cursor:pointer; } @media(max-width:900px){ .shop-sticky-bar{ display:flex; } } /* ========================================================== PDP — Studio Marmo–style single product layout. Breadcrumb -> two-column grid (gallery | summary) -> tabs -> related. Reuses existing theme tokens/classes above (.shop-gallery*, table.variations, .single_add_to_cart_button, .shop-tabs, .shop-related-grid) so nothing already styled is duplicated — this block only adds the new grid scaffolding and the pieces unique to this layout (eyebrow, stone switcher, trust list, CTA row). ========================================================== */ .pdp-breadcrumb{ font-size:12.5px; color:var(--marble-muted); margin-bottom:28px; letter-spacing:.02em; } .pdp-breadcrumb a{ color:var(--marble-muted); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s, color .3s; } .pdp-breadcrumb a:hover{ color:var(--slab-cream); border-color:var(--orange-2); } .pdp-breadcrumb-sep{ margin:0 8px; opacity:.5; } .pdp-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:64px; align-items:start; } @media(max-width:900px){ .pdp-grid{ grid-template-columns:1fr; gap:32px; } } /* Gallery sticks while the (usually longer) summary column scrolls — matches the reference's pinned-image feel without a scroll-jacked hero. */ .pdp-gallery-col{ position:sticky; top:24px; align-self:start; } @media(max-width:900px){ .pdp-gallery-col{ position:static; } } /* Thumbnail rail below the main image, as a proper grid of squares (reference shows ~5 small square thumbs in rows) rather than a loosely wrapping row. */ .pdp-gallery-col .shop-gallery-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; } @media(max-width:520px){ .pdp-gallery-col .shop-gallery-thumbs{ grid-template-columns:repeat(4,1fr); } } .pdp-gallery-col .shop-gallery-thumb{ width:100% !important; height:auto !important; aspect-ratio:1/1; } .pdp-summary-col{ padding-top:4px; } .pdp-eyebrow{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--orange-2); margin-bottom:12px; } .pdp-summary-col .product_title{ margin-bottom:10px; } .pdp-summary-col p.price{ margin-bottom:26px; } .pdp-summary-col p.price:before{ content:"Vanaf "; font-family:'Manrope',sans-serif; font-size:13px; font-weight:600; color:var(--marble-muted); display:block; margin-bottom:4px; } /* "Kies andere soort" — real sibling products (same model, different stone), each a clickable swatch card with thumb + name + price. */ .pdp-stone-switcher{ margin:0 0 30px; padding-bottom:28px; border-bottom:1px solid var(--line); } .pdp-stone-switcher-label{ font-size:13px; font-weight:600; color:var(--slab-cream); margin-bottom:14px; } .pdp-stone-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px; } .pdp-stone-swatch{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; text-decoration:none; padding:8px 6px 10px; border:1px solid transparent; border-radius:6px; transition:border-color .3s, background .3s; } .pdp-stone-swatch:hover{ background:rgba(255,255,255,.03); } .pdp-stone-swatch.active{ border-color:var(--orange-2); } .pdp-stone-swatch-thumb{ width:48px; height:48px; border-radius:50%; background-size:cover; background-position:center; border:2px solid var(--line); flex-shrink:0; } .pdp-stone-swatch.active .pdp-stone-swatch-thumb{ border-color:var(--orange-2); } .pdp-stone-swatch-name{ font-size:10.5px; line-height:1.25; color:var(--slab-cream-dim); } .pdp-stone-swatch-price{ font-size:10px; color:var(--marble-muted); } .pdp-stone-swatch-price .price{ color:var(--marble-muted); font-size:10px; } /* Trust bullets + secondary CTAs — printed after product_meta (40). */ .pdp-trust-list{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; } .pdp-trust-list li{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--marble-muted); } .pdp-trust-dot{ width:5px; height:5px; border-radius:50%; background:var(--orange-2); flex-shrink:0; } /* Contact card. */ .pdp-contact-card{ margin-top:26px; padding:24px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(160deg, rgba(199,132,60,.06), rgba(255,255,255,.015)), var(--stone-black-2,#1c1712); text-align:center; box-shadow:0 1px 0 rgba(255,255,255,.02) inset; } .pdp-contact-title{ font-family:'Fraunces',serif; font-size:17px; color:var(--slab-cream); margin-bottom:6px; } .pdp-contact-sub{ font-size:12.5px; color:var(--marble-muted); margin:0 0 16px; line-height:1.5; } .pdp-contact-row{ display:flex; gap:12px; } .pdp-contact-btn{ flex:1 1 auto; text-align:center; padding:14px 20px; border-radius:4px; font-size:13.5px; font-weight:700; letter-spacing:.01em; text-decoration:none; transition:background .3s, border-color .3s, color .3s, transform .2s; white-space:nowrap; } .pdp-contact-btn--primary{ background:var(--orange); color:var(--stone-black); border:1px solid var(--orange); } .pdp-contact-btn--primary:hover{ background:var(--orange-2); border-color:var(--orange-2); transform:translateY(-1px); } .pdp-contact-btn--outline{ background:none; color:var(--slab-cream); border:1px solid var(--line); } .pdp-contact-btn--outline:hover{ border-color:var(--orange-2); color:var(--orange-2); transform:translateY(-1px); } @media(max-width:520px){ .pdp-contact-row{ flex-direction:column; } } /* ========================================================== PDP — variation attribute blocks (Afmetingen, Hoogte, Afwerking blad, Randafwerking, Onderstel, ...), price breakdown box, and the "Vragen over deze tafel?" contact card. Builds on the tokens/classes already defined above. ========================================================== */ .pdp-attr{ margin:0 0 22px; } .pdp-attr-label{ font-size:13px; font-weight:600; color:var(--slab-cream); margin-bottom:10px; letter-spacing:.01em; } /* Boxed native