.shop .material-showcase{padding:88px max(24px,6vw);background:#141212;color:#f1eeea;border-block:1px solid #373130;scroll-margin-top:30px}
.material-heading{max-width:800px;margin:0 auto 48px;text-align:center}.material-heading .eyebrow{color:#d8bab0;font-size:10px;letter-spacing:.2em}.shop .material-heading h2{font-weight:400;font-size:clamp(36px,4vw,60px);line-height:1.06;letter-spacing:-.045em;margin:18px 0}.material-heading>p:last-child{font-size:14px;color:#bdb5b2;line-height:1.7}
.material-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:7%;max-width:1300px;margin:auto;align-items:center}.material-visual{min-width:0}.material-stage{height:520px;position:relative;perspective:1100px;overflow:hidden;background:radial-gradient(ellipse at 50% 65%,#433a363d,transparent 65%)}
.material-art,.material-base{position:absolute;left:20%;top:16%;width:60%;max-width:240px;aspect-ratio:5/7;height:auto;transform:rotateX(14deg) rotateY(-24deg) rotateZ(-9deg);transition:transform .85s cubic-bezier(.2,.7,.2,1),box-shadow .6s;transform-origin:center}.material-art{z-index:2;box-shadow:1px 1px #aaa,0 18px 30px #0009;overflow:hidden;background:#171717}.material-art img{width:100%;height:100%;object-fit:contain;display:block}.material-base{background:linear-gradient(115deg,#b5b4af,#f2f0eb 48%,#adaca9);box-shadow:1px 1px #777,0 10px 25px #0008}.material-visual[data-expanded=true] .material-art{transform:translate(-30px,-52px) rotateX(14deg) rotateY(-24deg) rotateZ(-9deg)}.material-visual[data-expanded=true] .material-base{transform:translate(34px,46px) rotateX(14deg) rotateY(-24deg) rotateZ(-9deg)}
.material-sheen{position:absolute;inset:0;background:linear-gradient(112deg,transparent 20%,#fff2 34%,#fff6 35%,#fff1 49%,transparent 62%);pointer-events:none;transition:opacity .6s}.material-visual[data-material=pp-matt] .material-sheen{opacity:.15}.material-visual[data-material=aluminium] .material-sheen{opacity:.2}.material-visual[data-material=aluminium] .material-base{background:linear-gradient(100deg,#6c6c6c,#e4e5e4 26%,#aaa 56%,#dedede);box-shadow:1px 1px #929292,2px 2px #929292,3px 3px #727272,4px 4px #555,0 12px 30px #0009}.material-visual[data-material=aluminium][data-expanded=false] .material-art{box-shadow:2px 2px #aaa,4px 4px #777,6px 6px #555,0 20px 30px #0008}
.material-shadow{position:absolute;bottom:30px;left:22%;width:65%;height:20px;background:#000a;filter:blur(14px);transform:rotate(-9deg)}.layer-tag{position:absolute;font-size:9px;letter-spacing:.12em;color:#d7cdc5;z-index:3;transition:opacity .3s;max-width:48%;padding:8px 0;border-top:1px solid #877c75}.layer-front{top:6%;left:4%}.layer-back{bottom:4%;right:0}.material-visual[data-expanded=false] .layer-tag{opacity:0}.material-visual-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #393232;padding-top:20px}.explode-toggle{display:flex;gap:16px;align-items:center;border:1px solid #756964;background:transparent;color:#eee4df;padding:12px 16px;border-radius:24px;cursor:pointer;font:inherit;font-size:12px}.explode-toggle svg{width:18px;height:18px}.material-visual-footer>span{font-size:8px;letter-spacing:.1em;color:#aaa09a}.material-caption{color:#9d9590;font-size:11px;line-height:1.7;max-width:430px;margin-top:16px}
.material-options{display:grid;gap:10px}.material-options :is(button,label){display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#ffffff03;color:#f1eeea;border:1px solid #4b4240;padding:20px;border-radius:5px;cursor:pointer;font:inherit}.material-options :is(button,label):is([aria-pressed=true],:has(input:checked)){background:#eee7df12;border-color:#e4d6cc}.material-options :is(button,label)>.material-option-copy{flex:1;min-width:0}.material-options strong,.material-options small{display:block}.material-options strong{font-weight:500;font-size:15px}.material-options small{margin-top:6px;font-size:10px;color:#b3a9a2}.material-options b{font-size:15px;font-weight:500;white-space:nowrap}.material-swatch{width:34px;height:42px;background:#b1b0ad;display:block;border:1px solid #d3ceca;flex-shrink:0;transform:skewY(-8deg)}.material-swatch.pp-gloss{background:linear-gradient(110deg,#666,#f4f3f1 47%,#999 50%,#d5d5d1)}.material-swatch.pp-matt{background:#999894}.material-swatch.aluminium{background:linear-gradient(100deg,#bbb,#fafafa,#999);box-shadow:3px 2px #5f5e5c}.material-detail{padding:30px 0 12px;min-height:250px}.material-detail .eyebrow{font-size:9px;color:#c4a995;letter-spacing:.14em}.material-detail h3{font-size:29px;font-weight:400;margin:10px 0}.material-detail>p:not(.eyebrow){font-size:13px;line-height:1.7;color:#bdb5b2}.material-detail dl{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0 0}.material-detail dt{font-size:9px;text-transform:uppercase;color:#9e918b;letter-spacing:.08em}.material-detail dd{margin:8px 0;font-size:12px;color:#e4dbd5}.material-price-note{font-size:11px;color:#b3a9a2;line-height:1.6}.material-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;background:#f1efeb;color:#171515;border-radius:28px;font-size:13px;text-decoration:none;margin:18px 0}.material-collection{font-size:12px;color:#d7c7bb;text-decoration:none;border-bottom:1px solid #77665d;padding-bottom:5px}.material-showcase button:focus-visible,.material-showcase a:focus-visible{outline:2px solid #fff;outline-offset:5px}
.material-field{border:0;padding:0;margin:24px 0}.material-field legend{font-size:13px;font-weight:500;margin-bottom:14px}.material-purchase-options{display:grid;gap:8px}.material-purchase-options label{display:flex;align-items:center;gap:12px;border:1px solid #4b4240;border-radius:6px;padding:14px;cursor:pointer}.material-purchase-options label:has(input:checked){border-color:#e1d6d0;background:#eee5dd10}.material-purchase-options input{accent-color:#eee}.material-purchase-options span{flex:1;font-size:12px}.material-purchase-options b{font-size:13px;font-weight:500}.material-purchase-note{font-size:11px;line-height:1.6;color:#bdb2ab;margin:10px 0}.material-purchase-options label:focus-within{outline:2px solid #aaa;outline-offset:2px}
@media(max-width:950px){.material-layout{gap:32px;grid-template-columns:1fr 1fr}.material-stage{height:430px}.material-options :is(button,label){padding:14px;gap:10px}.material-options strong,.material-options b{font-size:13px}.material-swatch{width:25px;height:34px}.material-detail dl{grid-template-columns:1fr;gap:10px}.material-visual-footer{flex-wrap:wrap}}
@media(max-width:700px){.shop .material-showcase{padding:48px 20px}.material-heading{text-align:left;margin-bottom:24px}.material-layout{grid-template-columns:minmax(0,1fr);gap:30px}.material-stage{height:420px;max-width:400px;margin:auto}.material-options :is(button,label){padding:16px}.material-detail{min-height:0}.material-detail dl{grid-template-columns:1fr 1fr}.material-purchase-options label{padding:12px}.material-visual-footer>span{display:none}}
@media(prefers-reduced-motion:reduce){.material-showcase *{transition:none!important;animation:none!important}}

/* Material theatre: large artwork, light and depth driven by native scroll. */
.shop .material-showcase{position:relative;background:radial-gradient(ellipse at 18% 60%,#372a252e,transparent 54%),#121111;padding-top:76px;padding-bottom:80px;overflow:clip}
.material-heading{margin-bottom:24px}
.material-layout{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:5%;max-width:1440px;align-items:center}
.material-visual{--split:1;--turn:-12deg;--pitch:6deg;--roll:-5deg;--light-x:12%;--light-y:45%;--scroll-progress:1}
.material-stage{height:700px;perspective:1500px;background:none;isolation:isolate}
.material-aura{position:absolute;inset:2% -10% 0;background:radial-gradient(ellipse at 48% var(--light-y),#a55e3633,transparent 61%);pointer-events:none;transition:background .5s}
.material-visual[data-material=aluminium] .material-aura{background:radial-gradient(ellipse at 48% var(--light-y),#92a5b42e,transparent 61%)}
.material-stage-word{position:absolute;top:0;left:4%;font-size:clamp(60px,7vw,110px);font-weight:500;line-height:1;letter-spacing:-.06em;color:#e8d6c50b;white-space:nowrap;pointer-events:none}
.material-art,.material-base{left:19%;top:11%;width:64%;max-width:380px;transform:rotateX(var(--pitch)) rotateY(var(--turn)) rotateZ(var(--roll));transition:transform .18s linear,box-shadow .6s}
.material-art{box-shadow:1px 1px #c8bdb280,0 24px 50px #0009}
.material-visual[data-expanded=true] .material-art{transform:translate(calc(-32px * var(--split)),calc(-34px * var(--split))) rotateX(var(--pitch)) rotateY(var(--turn)) rotateZ(var(--roll))}
.material-visual[data-expanded=true] .material-base{transform:translate(calc(50px * var(--split)),calc(64px * var(--split))) rotateX(var(--pitch)) rotateY(var(--turn)) rotateZ(var(--roll))}
.material-base{box-shadow:1px 1px #777,0 22px 38px #0009}
.material-sheen{inset:-15% -45%;background:linear-gradient(110deg,transparent 33%,#ffffff05 40%,#ffffff38 48%,#ffffff08 52%,transparent 62%);transform:translateX(var(--light-x));transition:transform .22s linear,opacity .6s;mix-blend-mode:screen}
.material-visual[data-material=pp-matt] .material-sheen{opacity:.06}
.material-visual[data-material=aluminium] .material-sheen{opacity:.25}
.material-shadow{left:15%;bottom:35px;width:75%;height:30px;opacity:.65;transform:scaleX(calc(.8 + var(--scroll-progress)*.2)) rotate(-5deg)}
.layer-front{top:8%;left:0;max-width:28%}.layer-back{bottom:7%;right:0;max-width:30%}
.layer-tag{font-size:10px;line-height:1.5;border-color:#a7978570}
.material-scroll-cue{position:absolute;bottom:6px;left:0;display:flex;align-items:center;gap:12px;color:#b4a79e;font-size:8px;letter-spacing:.16em}
.material-scroll-cue>span{display:block;width:54px;height:1px;background:#b5a29240;position:relative}
.material-scroll-cue>span:after{content:'';position:absolute;inset:0;background:#d4c0ab;transform-origin:left;transform:scaleX(var(--scroll-progress))}
.material-visual[data-material-motion=paused] .material-scroll-cue{visibility:hidden}
.material-visual-footer{margin-top:12px;border-color:#ffffff16}
.material-motion-toggle{background:none;border:0;color:#ad9f94;font:inherit;font-size:11px;padding:12px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.material-motion-toggle[hidden]{display:none}
.material-caption{font-size:10px;max-width:510px;color:#968c85}
.material-options :is(button,label){transition:border-color .2s,background .2s,transform .2s;min-height:84px}
.material-options :is(button,label):hover{transform:translateX(4px);border-color:#c9b6a5;background:#eee7df09}
.material-options :is(button,label):is([aria-pressed=true],:has(input:checked)){background:linear-gradient(110deg,#eee7df14,#eee7df05);box-shadow:inset 2px 0 #d7c7b7}
.material-options :is(button,label):is([aria-pressed=true],:has(input:checked)) .material-swatch{transform:skewY(-8deg) translateY(-2px)}
.material-swatch{transition:transform .3s}
.material-detail{min-height:230px}.material-detail h3{font-size:32px}
.material-cta{transition:background .2s,box-shadow .2s}.material-cta:hover{background:#fff;box-shadow:0 5px 28px #e6d3b91a}
@media(min-width:1600px){.material-art,.material-base{max-width:410px}.material-stage{height:750px}}
@media(min-width:701px) and (max-width:1100px){.material-stage{height:560px}.material-art,.material-base{top:17%;width:67%;left:15%;max-width:300px}.material-visual[data-expanded=true] .material-base{transform:translate(calc(32px * var(--split)),calc(50px * var(--split))) rotateX(var(--pitch)) rotateY(var(--turn)) rotateZ(var(--roll))}.material-layout{gap:30px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.layer-tag{font-size:8px}.material-stage-word{font-size:60px}.material-options :is(button,label){padding:14px}}
@media(max-width:700px){.shop .material-showcase{padding:48px 20px}.material-layout{grid-template-columns:minmax(0,1fr);gap:30px}.material-stage{height:510px;max-width:430px}.material-art,.material-base{width:68%;max-width:280px;left:16%;top:15%}.material-visual[data-expanded=true] .material-art{transform:translate(calc(-14px * var(--split)),calc(-22px * var(--split))) rotateX(var(--pitch)) rotateY(var(--turn)) rotateZ(var(--roll))}.material-visual[data-expanded=true] .material-base{transform:translate(calc(28px * var(--split)),calc(40px * var(--split))) rotateX(var(--pitch)) rotateY(var(--turn)) rotateZ(var(--roll))}.material-stage-word{font-size:70px;left:0}.layer-front{top:12%;left:0}.layer-back{bottom:8%;max-width:40%}.material-detail{min-height:0}.material-options :is(button,label):hover{transform:none}}
@media(max-width:380px){.material-stage{height:430px}.material-stage-word{font-size:58px}.material-visual-footer{gap:8px}.explode-toggle{padding:12px;font-size:11px}.material-motion-toggle{font-size:10px}.material-detail h3{font-size:28px}}
@media(prefers-reduced-motion:reduce){.material-showcase *{transition:none!important;animation:none!important}.material-options :is(button,label):hover{transform:none}.material-scroll-cue{display:none}}
.material-stage .layer-front{top:2%;left:0}
.material-stage .layer-back{bottom:4%;background:#121111b8;padding:7px 9px}
.material-options .material-option-copy{flex:1;min-width:0}
.material-purchase-cards label{position:relative}
.material-purchase-cards input{position:absolute;width:1px;height:1px;padding:0;margin:0;opacity:0;clip-path:inset(50%)}
.material-purchase-cards label:has(input:focus-visible){outline:2px solid #eee;outline-offset:4px}
.material-purchase-cards .material-swatch{flex:0 0 34px}
.material-purchase-cards label:has(input:checked){border-color:#e4d6cc}
.material-benefits{margin:22px 0 8px}
.material-benefits .material-benefit-heading{margin:0 0 8px;color:#f1ece6;font-size:20px;line-height:1.3;letter-spacing:-.025em}
.material-benefits .material-benefit-intro{font-size:13px;line-height:1.8;color:#c3b9b1;max-width:54ch;margin:0 0 20px}
.material-benefit-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.material-benefit-list li{display:flex;align-items:flex-start;gap:12px}
.material-benefit-list svg{width:18px;height:18px;flex:0 0 18px;color:#cfbba4;margin-top:2px}
.material-benefit-list strong{display:block;color:#eee7df;font-size:13px;font-weight:500;line-height:1.5}
.material-benefit-list small{display:block;color:#a99e94;font-size:11px;line-height:1.7;margin-top:3px}
.material-benefits-purchase{padding:20px 0;border-top:1px solid #ffffff16;border-bottom:1px solid #ffffff16;margin:18px 0 10px}
.material-benefits-purchase .material-benefit-heading{font-size:18px}
.material-benefits-purchase .material-benefit-intro{font-size:12px;margin-bottom:16px}
.material-benefits-purchase .material-benefit-list{gap:10px}
.material-benefits-purchase .material-benefit-list small{display:block}
.production-origin{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border:1px solid #d6c4af30;border-radius:6px;background:#d6c4af06;text-align:left}
.production-origin svg{width:24px;height:18px;flex:0 0 24px;margin-top:2px;border-radius:1px}
.production-origin strong{display:block;font-size:13px;line-height:1.5;font-weight:500;color:#f1ece6}
.production-origin small{display:block;margin-top:4px;font-size:11px;line-height:1.7;color:#b9ada2}
.material-heading .production-origin{width:fit-content;max-width:100%;margin:24px auto 8px}
#product-form>.production-origin{margin:8px 0 22px}
.material-benefit-symbol{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border:1px solid #cfbba42e;border-radius:9px;background:linear-gradient(140deg,#cfbba40f,#cfbba403)}
.material-benefit-symbol .material-benefit-icon{width:22px;height:22px;margin:0;color:#d7c5b0}
.material-benefit-list li{align-items:center}
.material-benefits-purchase .material-benefit-symbol{width:30px;height:30px;flex-basis:30px;border-radius:7px}
.material-benefits-purchase .material-benefit-symbol svg{width:19px;height:19px}
/* Match the product purchase control: centred label, bag and the same hover light. */
.shop .material-cta{position:relative;isolation:isolate;justify-content:center;gap:18px;min-height:56px;padding:14px 22px;border:1px solid #64dda292;border-radius:28px;background:#f2f3ef;color:#151916;box-shadow:0 0 23px #64dda222;transition:box-shadow .25s,border-color .25s,background .25s;text-align:center}
.shop .material-cta .material-cta-label{font-size:14px;font-weight:500;letter-spacing:.005em}
.shop .material-cta .bag-icon{width:19px;height:19px;flex:0 0 19px}
.shop .material-cta:is(:hover,:focus-visible){background:#fafff9;border-color:#85f1b9;box-shadow:0 0 32px #64dda24d;animation:buy-pulse 1.7s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.shop .material-cta:is(:hover,:focus-visible){animation:none}.shop .material-cta{transition:none}}
/* Keep buying controls short; let the gallery carry the material story. */
.product-layout{row-gap:26px}
.product-layout>.product-gallery{grid-column:1;grid-row:1;position:static}
.product-layout>.product-info{grid-column:2;grid-row:1 / span 2}
.gallery-material-panel{grid-column:1;grid-row:2;min-width:0;padding:26px;border:1px solid #cfbba426;border-radius:10px;background:linear-gradient(130deg,#cfbba40a,#cfbba402)}
.gallery-material-panel>.eyebrow{font-size:9px;letter-spacing:.16em;color:#c4a995;margin:0 0 17px}
.gallery-material-panel .material-benefits{margin:0}
.gallery-material-panel .material-benefit-heading{font-size:24px}
.gallery-material-panel .material-benefit-intro{max-width:none}
.gallery-material-panel .material-benefit-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px;margin:24px 0}
.gallery-material-panel .material-benefit-list li{align-items:flex-start}
.gallery-material-panel .material-benefit-list strong{font-size:14px}
.gallery-material-panel .material-benefit-list small{font-size:12px}
.gallery-material-panel .production-origin{margin:0 0 16px;background:#0002}
.gallery-material-panel>a{display:inline-block;text-underline-offset:4px}
@media(min-width:761px) and (max-width:1000px){.gallery-material-panel{padding:20px}.gallery-material-panel .material-benefit-list{grid-template-columns:1fr}}
@media(max-width:760px){.product-layout>.product-gallery{grid-column:1;grid-row:1}.product-layout>.product-info{grid-column:1;grid-row:2}.gallery-material-panel{grid-column:1;grid-row:3;padding:22px}.gallery-material-panel .material-benefit-list{gap:18px}}
@media(max-width:480px){.gallery-material-panel .material-benefit-list{grid-template-columns:1fr}}
@media(max-width:380px){.material-purchase-cards label{gap:10px;padding:14px}.material-purchase-cards .material-swatch{flex-basis:25px}.material-purchase-cards strong,.material-purchase-cards b{font-size:12px}}
