/* ===================================================================== 6 MUSHROOMS - PRODUCT DETAIL PAGE (scoped to .six-pdp) All sizes in px (theme sets html font-size:10px, so rem is 62.5% off). ===================================================================== */ .six-pdp{ /* every colour comes from the global tokens in chrome.css - never hardcode */ --f: var(--ap-font); --ink:var(--ap-ink); --ink-2:var(--ap-ink-2); --muted:var(--ap-mute); --faint:var(--ap-faint); --line:var(--ap-line); --line-soft:var(--ap-line-soft); --line-strong:var(--ap-line-strong); --canvas:var(--ap-canvas); --parch:var(--ap-parchment); --surface:var(--ap-surface); --plum:var(--ap-plum); --plum-h:var(--ap-plum-dark); --plum-tint:var(--ap-plum-tint); --gold:var(--ap-gold); --sale:var(--ap-sale); --ok:var(--ap-stock); --wrap:1280px; --gut:clamp(20px,4vw,48px); --r:18px; --e:cubic-bezier(.16,1,.3,1); font-family:var(--f); color:var(--ink); background:var(--canvas); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .six-pdp *{box-sizing:border-box;} .six-pdp .pd-wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); width:100%;} .six-pdp h1,.six-pdp h2,.six-pdp h3{margin:0; font-weight:700; letter-spacing:-.022em; line-height:1.18;} .six-pdp p{margin:0;} .six-pdp a{color:inherit; text-decoration:none;} .six-pdp img{max-width:100%; display:block;} /* breadcrumb */ .six-pdp .pd-crumb{padding:18px 0 0; font-size:12.5px; color:var(--faint);} .six-pdp .pd-crumb .pd-wrap{display:flex; flex-wrap:wrap; align-items:center; gap:7px;} .six-pdp .pd-crumb a:hover{color:var(--ink); text-decoration:underline;} /* ---------- TOP: gallery + buy box ---------- */ .six-pdp .pd-top{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4vw,64px); align-items:start; padding-block:24px 56px;} /* gallery */ .six-pdp .pd-stage{position:relative; aspect-ratio:1/1; border-radius:var(--r); overflow:hidden; background:var(--parch); display:flex; align-items:center; justify-content:center;} .six-pdp .pd-main-img{width:100%; height:100%; object-fit:cover;} .six-pdp .pd-noimg{font-size:70px; font-weight:700; color:var(--line-strong);} .six-pdp .pd-badge{position:absolute; top:14px; right:14px; background:var(--ap-scrim); color:var(--canvas); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:9999px;} .six-pdp .pd-thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;} .six-pdp .pd-thumb{width:66px; height:66px; padding:0; border:1px solid var(--line); border-radius:11px; overflow:hidden; background:var(--parch); cursor:pointer; transition:border-color .18s var(--e);} .six-pdp .pd-thumb img{width:100%; height:100%; object-fit:cover;} .six-pdp .pd-thumb.is-on{border-color:var(--ink); border-width:2px;} .six-pdp .pd-thumb:hover{border-color:var(--plum);} /* buy box */ .six-pdp .pd-eyebrow{font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--plum); margin-bottom:10px;} .six-pdp .pd-title{font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.026em;} .six-pdp .pd-rating{display:flex; align-items:center; gap:9px; margin-top:12px; font-size:13.5px;} .six-pdp .pd-stars{color:var(--gold); letter-spacing:1px; font-size:14px;} .six-pdp .pd-stars--sm{font-size:12.5px;} .six-pdp .pd-rnum{font-weight:700;} .six-pdp .pd-rlink{color:var(--muted); text-decoration:underline; text-underline-offset:2px;} .six-pdp .pd-new{font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--plum);} .six-pdp .pd-price{margin-top:16px; font-size:26px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums;} .six-pdp .pd-price del{color:var(--faint); font-weight:400; font-size:20px; margin-right:8px;} .six-pdp .pd-price ins{text-decoration:none; color:var(--sale);} .six-pdp .pd-short{margin-top:14px; font-size:15.5px; line-height:1.6; color:var(--muted); max-width:52ch;} .six-pdp .pd-stock{display:flex; align-items:center; gap:8px; margin-top:16px; font-size:13.5px; color:var(--ok);} .six-pdp .pd-stock.is-out{color:var(--faint);} .six-pdp .pd-dot{width:7px; height:7px; border-radius:50%; background:currentColor;} /* WooCommerce add-to-cart form, restyled */ .six-pdp form.cart{margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; align-items:center;} .six-pdp form.cart .quantity{display:flex;} .six-pdp form.cart .quantity input.qty{width:74px; height:52px; padding:0 10px; text-align:center; font-family:inherit; font-size:16px; color:var(--ink); border:1px solid var(--line); border-radius:12px; background:var(--canvas);} .six-pdp form.cart .quantity input.qty:focus{outline:none; border-color:var(--plum); box-shadow:0 0 0 3px var(--plum-tint);} .six-pdp form.cart button.single_add_to_cart_button{ flex:1 1 220px; min-height:52px; padding:14px 30px; border:0; border-radius:9999px; cursor:pointer; background:var(--plum); color:var(--canvas); font-family:inherit; font-size:16px; font-weight:700; letter-spacing:-.012em; transition:background-color .2s var(--e), transform .15s var(--e);} .six-pdp form.cart button.single_add_to_cart_button:hover{background:var(--plum-h); transform:translateY(-1px);} /* disabled is faded plum, never grey - the brand only uses the one colour */ .six-pdp form.cart button.single_add_to_cart_button.disabled{background:var(--plum); color:var(--canvas); opacity:.38; pointer-events:none;} /* screen-reader-only text must not render visibly */ .six-pdp .screen-reader-text{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;} /* variable products: stack the form so the selector sits above the CTA */ .six-pdp form.variations_form{flex-direction:column; align-items:stretch;} .six-pdp form.variations_form .woocommerce-variation-add-to-cart{display:flex; gap:12px; align-items:center; flex-wrap:wrap;} .six-pdp form.variations_form .woocommerce-variation-add-to-cart button.single_add_to_cart_button{flex:1 1 220px;} /* ---------- VARIANT PICKER (WPC radio buttons) as Apple-style cards ---------- Compact grid of selectable tiles instead of a tall stacked radio list. */ .six-pdp .woovr-variations{ display:grid !important; grid-template-columns:repeat(auto-fit, minmax(58px, 1fr)) !important; gap:8px !important; margin:4px 0 18px !important; padding:0 !important; border:0 !important; list-style:none; /* the form is a flex column: keep FULL width (cross axis) but don't grow vertically (main axis) - that was stretching tiles to 296px */ align-self:stretch !important; width:100% !important; align-content:start !important; grid-auto-rows:min-content !important; flex:0 0 auto !important; height:auto !important; } .six-pdp .woovr-variation{ position:relative; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:1px !important; min-height:0 !important; height:auto !important; margin:0 !important; padding:9px 6px !important; border:1.5px solid var(--line) !important; border-radius:12px !important; background:var(--canvas) !important; text-align:center !important; cursor:pointer; align-self:start !important; transition:border-color .18s var(--e), background-color .18s var(--e); } .six-pdp .woovr-variation:hover{ border-color:var(--line-strong) !important; } /* radio stays in the DOM (the plugin needs it) but is visually hidden */ .six-pdp .woovr-variation-selector{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } /* the plugin's info block is 121px tall by default - collapse it */ .six-pdp .woovr-variation-info{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:1px !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; line-height:1.2 !important; width:100% !important; } .six-pdp .woovr-variation-info > *{ margin:0 !important; padding:0 !important; } /* label + price inside the tile */ .six-pdp .woovr-variation-name, .six-pdp .woovr-variation .woovr-variation-name{ font-size:14px !important; font-weight:700 !important; color:var(--ink) !important; line-height:1.2 !important; } .six-pdp .woovr-variation-name label{ margin:0 !important; padding:0 !important; cursor:pointer; font:inherit !important; } .six-pdp .woovr-variation-price, .six-pdp .woovr-variation .woovr-variation-price{ font-size:12px !important; font-weight:400 !important; color:var(--muted) !important; line-height:1.2 !important; } .six-pdp .woovr-variation img{ display:none !important; } .six-pdp .woovr-variation-price .amount{ color:var(--muted) !important; font-weight:400 !important; } .six-pdp .woovr-variation-image{ display:none !important; } /* selected state (the plugin adds .woovr-variation-active) */ .six-pdp .woovr-variation.woovr-variation-active, .six-pdp .woovr-variation.woovr-selected, .six-pdp .woovr-variation:has(input:checked){ border-color:var(--ink) !important; background:var(--parch) !important; } .six-pdp .woovr-variation.woovr-variation-active .woovr-variation-price, .six-pdp .woovr-variation.woovr-selected .woovr-variation-price, .six-pdp .woovr-variation:has(input:checked) .woovr-variation-price{ color:var(--ink) !important; } /* unavailable */ .six-pdp .woovr-variation[data-purchasable="no"]{ opacity:.42; pointer-events:none; } /* the plugin replaces the select, so hide the now-duplicate dropdown row */ .six-pdp .woovr-variations + table.variations, .six-pdp form.variations_form table.variations:has(+ .woovr-variations){ display:none !important; } /* variation selector - the theme hides this table, so force it visible */ .six-pdp table.variations{display:block !important; width:100%; border:0; margin:0 0 10px;} .six-pdp table.variations tbody, .six-pdp table.variations tr, .six-pdp table.variations th, .six-pdp table.variations td{display:block !important; width:100% !important; border:0; padding:0; vertical-align:middle;} .six-pdp table.variations th.label{margin-bottom:6px;} .six-pdp table.variations td.value{margin-bottom:8px;} .six-pdp table.variations th.label label{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint);} .six-pdp table.variations select{appearance:none; width:100%; height:48px; padding:0 38px 0 14px; cursor:pointer; font-family:inherit; font-size:15px; color:var(--ink); background-color:var(--canvas); border:1px solid var(--line); border-radius:12px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 14px center;} .six-pdp table.variations select:focus{outline:none; border-color:var(--plum); box-shadow:0 0 0 3px var(--plum-tint);} /* price + quantity + add-to-cart share ONE row */ .six-pdp .single_variation_wrap{display:flex; align-items:center; gap:18px; flex-wrap:wrap; width:100%;} .six-pdp .single_variation{margin:0; flex:0 0 auto;} .six-pdp .woocommerce-variation{margin:0;} .six-pdp .woocommerce-variation-price{margin:0; font-size:26px; font-weight:700; line-height:1.15; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap;} .six-pdp .woocommerce-variation-price .amount{font-size:26px;} .six-pdp .woocommerce-variation-availability{flex:0 0 100%; margin:0;} .six-pdp .woocommerce-variation-add-to-cart{flex:1 1 300px; margin:0;} /* qty + button share one baseline row, equal heights */ .six-pdp form.cart .quantity, .six-pdp form.variations_form .woocommerce-variation-add-to-cart .quantity{flex:0 0 auto;} .six-pdp form.cart .quantity input.qty, .six-pdp form.variations_form .woocommerce-variation-add-to-cart button.single_add_to_cart_button{height:52px;} .six-pdp .reset_variations{font-size:12.5px; color:var(--muted); text-decoration:underline;} .six-pdp .woocommerce-variation-availability p{font-size:13.5px; color:var(--muted);} /* simple products: price already sits above, keep the row tight */ .six-pdp form.cart:not(.variations_form){align-items:center;} /* assurance list */ .six-pdp .pd-assure{list-style:none; margin:26px 0 0; padding:22px 0 0; border-top:1px solid var(--line-soft); display:grid; grid-template-columns:1fr 1fr; gap:14px 22px;} .six-pdp .pd-assure li{display:flex; flex-direction:column; gap:2px;} .six-pdp .pd-assure strong{font-size:13.5px; font-weight:700; letter-spacing:-.01em;} .six-pdp .pd-assure span{font-size:12.5px; color:var(--muted);} /* ---------- SECTIONS ---------- */ .six-pdp .pd-section{padding-block:clamp(40px,5vw,68px); border-top:1px solid var(--line-soft);} .six-pdp .pd-section h2{font-size:clamp(21px,2.2vw,27px); margin-bottom:20px;} .six-pdp .pd-details-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(28px,4vw,60px); align-items:start;} .six-pdp .pd-copy p{font-size:16px; line-height:1.68; color:var(--ink-2); margin-bottom:14px; max-width:70ch;} .six-pdp .pd-copy a{color:var(--plum); text-decoration:underline;} .six-pdp .pd-detail-main h3{font-size:16px; margin:26px 0 10px;} .six-pdp .pd-list{margin:0; padding-left:19px; color:var(--ink-2);} .six-pdp .pd-list li{font-size:15px; line-height:1.75;} .six-pdp .pd-list a{color:var(--plum); text-decoration:underline;} /* spec card */ .six-pdp .pd-spec{background:var(--parch); border-radius:var(--r); padding:24px 24px 10px;} .six-pdp .pd-spec h3{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:14px;} .six-pdp .pd-spec dl{margin:0;} .six-pdp .pd-spec dl > div{display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--line);} .six-pdp .pd-spec dl > div:first-child{border-top:0;} .six-pdp .pd-spec dt{font-size:13.5px; color:var(--muted);} .six-pdp .pd-spec dd{margin:0; font-size:13.5px; font-weight:700; text-align:right;} /* reviews */ .six-pdp .pd-rev-summary{display:flex; align-items:baseline; gap:11px; margin-bottom:22px;} .six-pdp .pd-rev-score{font-size:34px; font-weight:700; letter-spacing:-.02em;} .six-pdp .pd-rev-count{font-size:13.5px; color:var(--muted);} .six-pdp .pd-rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;} .six-pdp .pd-rev{margin:0; background:var(--canvas); border:1px solid var(--line); border-radius:14px; padding:20px;} .six-pdp .pd-rev blockquote{margin:8px 0 0; font-size:14.5px; line-height:1.6; color:var(--ink-2);} .six-pdp .pd-rev figcaption{margin-top:12px; font-size:12.5px; font-weight:700; color:var(--muted);} .six-pdp .pd-rev-empty{background:var(--parch); border-radius:var(--r); padding:34px; text-align:center;} .six-pdp .pd-rev-empty p{font-size:16px; font-weight:700;} .six-pdp .pd-rev-empty-sub{font-size:14px !important; font-weight:400 !important; color:var(--muted); margin-top:6px;} /* related */ .six-pdp .pd-rel-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px;} .six-pdp .pd-rel-head h2{margin:0;} .six-pdp .pd-rel-all{font-size:14px; font-weight:700; color:var(--plum);} .six-pdp .pd-rel-all:hover{text-decoration:underline;} .six-pdp .pd-rel-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px);} .six-pdp .pd-rel-card{display:grid; grid-template-rows:auto 15px auto auto; gap:0;} .six-pdp .pd-rel-media{display:block; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:var(--parch); margin-bottom:12px;} .six-pdp .pd-rel-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e);} .six-pdp .pd-rel-card:hover .pd-rel-media img{transform:scale(1.05);} .six-pdp .pd-rel-cat{font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint);} .six-pdp .pd-rel-name{font-size:15px; font-weight:700; line-height:1.32; margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:39px;} .six-pdp .pd-rel-price{font-size:15px; font-weight:700; margin-top:5px; font-variant-numeric:tabular-nums;} /* sticky bar */ .six-pdp .pd-sticky{position:fixed; left:0; right:0; bottom:0; z-index:900; background:var(--ap-glass); -webkit-backdrop-filter:saturate(1.8) blur(18px); backdrop-filter:saturate(1.8) blur(18px); border-top:1px solid var(--line); transform:translateY(102%); transition:transform .3s var(--e);} .six-pdp .pd-sticky.is-on{transform:none;} .six-pdp .pd-sticky-in{display:flex; align-items:center; gap:16px; padding-block:11px;} .six-pdp .pd-sticky-name{font-size:14.5px; font-weight:700; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .six-pdp .pd-sticky-price{font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;} .six-pdp .pd-sticky-btn{background:var(--plum); color:var(--canvas); padding:11px 24px; border-radius:9999px; font-size:14.5px; font-weight:700; white-space:nowrap;} .six-pdp .pd-sticky-btn:hover{background:var(--plum-h);} /* ---------- RESPONSIVE ---------- */ @media(max-width:1080px){ .six-pdp .pd-rev-grid{grid-template-columns:repeat(2,1fr);} .six-pdp .pd-rel-grid{grid-template-columns:repeat(3,1fr);} } @media(max-width:900px){ .six-pdp .pd-top{grid-template-columns:1fr; gap:26px; padding-block:18px 40px;} .six-pdp .pd-details-grid{grid-template-columns:1fr; gap:26px;} .six-pdp .pd-title{font-size:26px;} .six-pdp .pd-price{font-size:23px;} } @media(max-width:700px){ .six-pdp .pd-rev-grid{grid-template-columns:1fr;} .six-pdp .pd-rel-grid{grid-template-columns:repeat(2,1fr);} .six-pdp .pd-assure{grid-template-columns:1fr;} .six-pdp form.cart button.single_add_to_cart_button{flex:1 1 auto;} /* on phones the price goes on its own line above qty + button */ .six-pdp .single_variation_wrap{gap:12px;} .six-pdp .single_variation{flex:0 0 100%;} .six-pdp .woocommerce-variation-price{font-size:23px;} .six-pdp .woocommerce-variation-price .amount{font-size:23px;} .six-pdp .woocommerce-variation-add-to-cart{flex:1 1 100%;} .six-pdp .pd-thumb{width:56px; height:56px;} .six-pdp .pd-sticky-name{display:none;} .six-pdp .pd-sticky-btn{flex:1; text-align:center;} .six-pdp .pd-sticky-in{gap:12px;} .six-pdp .pd-sticky-price{font-size:14.5px; white-space:nowrap;} /* variant tiles stay compact and wrap gracefully on small screens */ .six-pdp .woovr-variations{grid-template-columns:repeat(auto-fit, minmax(56px, 1fr)) !important; gap:7px !important;} .six-pdp .woovr-variation{padding:8px 4px !important;} .six-pdp .woovr-variation-name{font-size:13px !important;} .six-pdp .woovr-variation-price{font-size:11.5px !important;} } @media (prefers-reduced-motion:reduce){ .six-pdp *{transition:none !important;} }