/* Approved Matterdeck studio direction, 17 October 2026. */
:root{--sage:#f4eadc;--gutter:22px}
body{padding-bottom:88px;background:#101110}
.header{padding:23px var(--gutter) 0;gap:0 12px;align-items:center}
.wordmark{font-size:31px;line-height:1.15;letter-spacing:-.035em}
.language-control{height:35px;min-width:28px;font-size:11px;gap:4px;letter-spacing:0}
.language-control svg{display:none}
.discovery-toolbar{display:flex;align-items:center;gap:7px;flex-basis:100%;width:100%;margin-top:15px}
.header-search{height:42px;min-width:0;flex:1;padding:0 13px;gap:10px;margin:0;border-color:#a19d9180;background:#17181724;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.header-search svg{width:19px;height:19px}
.header-search input{font-size:12px;min-height:40px;appearance:none;-webkit-appearance:none}
.header-search input::placeholder{color:#a8a49b;opacity:.85}
.filters-trigger{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:1px solid #aaa497a6;border-radius:25px;padding:0 13px;font-size:12px;background:#16171544;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);white-space:nowrap}
.filters-trigger>svg{width:17px;height:17px}
.filter-badge{font-size:9px;line-height:16px;min-width:16px;height:16px;border-radius:50%;color:#141511;background:#f2e8d8;padding:0 3px;margin-left:-3px}
.hero{height:552px;overflow:hidden}
.hero-photo.single-photo.photo-cutout,.hero-photo.single-photo.photo-studio{background-size:auto 290px,cover;background-position:center 134px,center}
.hero-photo .swatch{top:137px;right:22px;width:29px;height:29px;border-width:1px}
.hero-photo.is-studio{background-image:radial-gradient(ellipse at 35% 42%,#d4662d9c,transparent 55%),radial-gradient(ellipse at 78% 44%,#a7496266,transparent 58%),linear-gradient(180deg,#181918 8%,#211b18 53%,#101110 89%);background-size:cover;background-position:center}
.studio-object{display:block;position:absolute;background-image:url('assets/studio-vases.png');background-size:300% 100%;background-position:var(--studio-x,0%) center;background-repeat:no-repeat;pointer-events:none;-webkit-box-reflect:below -22px linear-gradient(transparent 77%,#ffffff24)}
.hero .studio-object{width:min(87vw,354px);height:min(87vw,354px);left:50%;top:117px;transform:translateX(calc(-50% - 12px));filter:drop-shadow(0 15px 17px #0004)}
.hero-photo.is-studio:before{content:'';position:absolute;width:63%;height:30px;top:415px;left:19%;background:radial-gradient(ellipse,#6a351c4d,#0003 46%,transparent 72%);filter:blur(7px)}
.hero-shade{background:linear-gradient(180deg,transparent 65%,#10111018 78%,#101110 100%);pointer-events:none}
.hero-content{left:22px;right:22px;bottom:23px}
.hero .eyebrow{font-size:10px;letter-spacing:.2em;margin-bottom:7px}
.hero h1{font-size:44px;line-height:1.04;letter-spacing:-.04em;text-wrap:balance;max-width:100%}
.hero-subtitle{font-size:13px;line-height:1.4;margin-top:10px;color:#d4d0c9;letter-spacing:0}
.hero-subtitle span,.hero-subtitle span+*{display:none}
.hero .photo-peeks,.hero .hero-actions,.hero-pagination,.swipe-hint{display:none}
.studio-caption{position:absolute;right:22px;bottom:2px;font-size:8px;color:#bdb4a080;letter-spacing:.035em;pointer-events:none}
.product-reflection{position:absolute;width:100%;height:140px;top:405px;left:0;transform:scaleY(-1);background-image:var(--sheet);background-size:auto 290px;background-position:center bottom;background-repeat:no-repeat;opacity:.13;mask-image:linear-gradient(to top,#0005,transparent 72%);-webkit-mask-image:linear-gradient(to top,#0005,transparent 72%)}
.studio-inspiration{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 10px;margin:0 0 26px}
.inspiration-card{position:relative;aspect-ratio:.73;min-width:0;overflow:hidden;border-radius:21px;background:radial-gradient(ellipse at 30% 27%,color-mix(in srgb,var(--inspiration-a) 48%,transparent),transparent 77%),radial-gradient(ellipse at 75% 32%,color-mix(in srgb,var(--inspiration-b) 45%,transparent),transparent 77%),#1b1d1a;border:1px solid #e8dac715}
.inspiration-card button{position:absolute;inset:0;width:100%;padding:0;text-align:left}
.inspiration-card .studio-object{left:0;top:17%;width:100%;height:auto;aspect-ratio:1;-webkit-box-reflect:below -10px linear-gradient(transparent 75%,#ffffff20)}
.inspiration-card .swatch{background:var(--swatch-fill);width:29px;height:29px;top:12px;right:12px;border:1px solid #f7efe3}
.inspiration-label{position:absolute;bottom:17px;left:15px;right:15px;font-family:Editorial,Georgia,serif;font-size:23px;line-height:1.05}
.inspiration-label small{display:block;font-family:Interface,Arial,sans-serif;font-size:10px;color:#c7c4b9;margin-top:7px}
.catalog-summary{padding-top:0}
.shelf{gap:8px;padding-left:10px;padding-right:10px;scroll-padding-left:10px}
.shelf .card{flex-basis:calc(50% - 4px);aspect-ratio:.76;border-radius:18px}
.card .card-photo.photo-cutout img{height:88%;object-position:center 45%;padding:5px 5px 0}
.card .card-photo.print-preview img{height:89%;object-position:center 45%}
.card-copy{padding:14px 12px}
.card h3{font-size:24px}
.card .swatch{width:22px;height:22px;top:12px;right:12px}




.workspace{padding-top:146px}
.workspace h1{font-size:32px;margin-bottom:8px}
.results-heading{display:flex;gap:10px;align-items:center;justify-content:space-between}
.clear-search-filters{font-size:11px;color:#cfc8bd;white-space:nowrap;text-decoration:underline;min-height:40px}
.load-more{display:block;margin:25px auto}
.results-grid .card{border-radius:16px}
/* One native modal provides focus trapping and Escape support. */
#filter-dialog{position:fixed;inset:auto 0 0;width:100%;max-width:540px;height:min(640px,calc(100dvh - 150px));max-height:calc(100dvh - 100px);margin:0 auto;padding:0;border:1px solid #b4a59085;border-bottom:0;border-radius:23px 23px 0 0;background:linear-gradient(120deg,#242422f5,#1b1c1afc);box-shadow:0 -18px 70px #0004;overflow:hidden;overscroll-behavior:contain;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
#filter-dialog[open]{display:flex;flex-direction:column;animation:sheet-reveal .22s ease-out}
#filter-dialog::backdrop{background:#0007;backdrop-filter:none}
.filter-drag-handle{width:42px;height:4px;border-radius:8px;background:#97968f85;margin:10px auto 0;flex-shrink:0}
.filter-sheet-header{display:flex;align-items:center;gap:10px;padding:12px 18px 10px;flex-shrink:0}
.filter-sheet-header h2{font-size:31px;line-height:1.05;margin-right:auto}
#filters-reset{font-size:12px;color:#e1dace;min-height:36px;white-space:nowrap;padding:0}
.filter-close{width:28px;height:36px;padding:5px 0 5px 6px;flex-shrink:0}
.filter-close svg{width:22px;height:22px}
.filter-sheet-body{padding:0 18px 4px;overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:#8a867a55 transparent}
.filter-section{margin:0 0 15px;padding:0;border:0;min-width:0}
.filter-section legend,.filter-colours legend{font-size:12px;padding:0;margin-bottom:6px;line-height:1.4}
.filter-pills{display:flex;flex-wrap:wrap;gap:6px}
.filter-pill{display:flex;align-items:center;justify-content:center;gap:10px;min-height:34px;border:1px solid #b7afa36b;border-radius:22px;padding:5px 13px;font-size:12px;line-height:1.2;background:#1c1d1b44}
.filter-pill svg{width:14px;height:14px;flex-shrink:0}
.filter-pill.selected{background:#fbefdb;color:#171813;border-color:#fbefdb}
.category-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:94%}
.category-pills .filter-pill{padding-left:7px;padding-right:7px}
.category-pills .filter-pill svg{display:none}
.material-pills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.material-pills .filter-pill{padding-left:5px;padding-right:5px;gap:8px}
.material-pills:has([data-filter-material^="resin:"]){grid-template-columns:repeat(3,minmax(0,1fr))}
.material-pills:has([data-filter-material^="resin:"]) .filter-pill{font-size:11px}
.more-materials{margin-top:7px}
.more-materials summary{color:#bdb9af;font-size:10px;min-height:20px;display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none}
.more-materials summary svg{width:12px;height:12px}
.more-materials .filter-pills{margin-top:7px}
.filter-accordion{border-top:1px solid #c5bba238;min-width:0}
.filter-accordion:last-child{border-bottom:1px solid #c5bba238}
.filter-accordion summary{min-height:43px;display:flex;align-items:center;gap:10px;font-size:12px;cursor:pointer;list-style:none}
.filter-accordion summary::-webkit-details-marker,.more-materials summary::-webkit-details-marker{display:none}
.filter-current{margin-left:auto;text-align:right;color:#c9c4ba;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:47%}
.filter-accordion summary>svg{width:15px;height:15px;flex-shrink:0;transition:transform .15s}
.filter-accordion[open] summary>svg{transform:rotate(180deg)}
.filter-options{padding:1px 0 12px;display:flex;flex-wrap:wrap;gap:10px}
.filter-options label{display:block;flex:1;min-width:110px;color:#c9c4ba;font-size:11px}
.filter-options select{display:block;max-width:100%;width:100%;border:1px solid #b7afa36b;border-radius:12px;background:#232420;color:#f5eee2;font-size:12px;padding:11px 10px;margin-top:5px;min-width:0}
.filter-colours{display:flex;align-items:center;gap:8px;border:0;border-top:1px solid #c5bba238;margin:0;padding:13px 0;min-width:0;position:relative}
.filter-colours legend{float:left;margin:0;flex-shrink:0}
.colour-choices{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;min-width:0;padding:3px;margin-left:auto}
.colour-choices::-webkit-scrollbar{display:none}
.colour-filter{width:24px;height:24px;min-width:24px;border:1px solid #d9d4c9b3;border-radius:50%;background:var(--colour-choice);padding:3px;display:grid;place-items:center;box-shadow:inset 0 2px 5px #fff3;flex-shrink:0}
.colour-filter.selected{outline:2px solid #f7ebd9;outline-offset:2px}
.colour-filter svg{width:15px;height:15px;filter:drop-shadow(0 1px 1px #000);color:white}
.colour-clear{width:22px;height:26px;flex-shrink:0;padding:2px}
.colour-clear svg{width:17px;height:17px}
.filter-sheet-footer{padding:9px 17px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(#20211eee,#1c1d1b);flex-shrink:0}
.filter-sheet-footer .primary{width:100%;height:43px;font-size:12px;background:#fff0d8;min-width:0}
@keyframes sheet-reveal{from{opacity:.7;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:374px){.header{padding-left:18px;padding-right:18px}.wordmark{font-size:29px}.filters-trigger{gap:6px;padding:0 11px}.header-search{padding:0 11px;gap:7px}.hero{height:522px}.hero .studio-object{top:115px}.hero-photo.is-studio:before{top:388px}.hero h1{font-size:41px}.hero-content{left:20px;right:20px}.hero-photo .swatch{right:19px;top:134px}.inspiration-label{font-size:21px}.filter-pill{font-size:11px}.filter-sheet-header{padding-left:17px;padding-right:17px}}
@media(min-width:540px){.header{padding:26px 32px 0}.wordmark{font-size:36px}.discovery-toolbar{max-width:590px;margin-top:18px}.header-search{height:46px}.header-search input{font-size:14px}.filters-trigger{min-height:46px;font-size:14px;padding:0 19px}.hero{height:650px}.hero .studio-object{width:430px;height:430px;top:133px}.hero-photo.is-studio:before{top:503px}.hero-content{left:32px;bottom:20px}.hero h1{font-size:58px}.hero-subtitle{font-size:16px}.hero-photo .swatch{right:32px;top:160px;width:32px;height:32px}.studio-inspiration{max-width:760px;margin:0 auto 34px;padding:0 24px;gap:12px}.inspiration-card{aspect-ratio:.84}.shelf .card{flex-basis:31%;aspect-ratio:.85}.workspace{padding-top:160px}.studio-caption{right:32px}.inspiration-label{font-size:28px}.inspiration-label small{font-size:12px}}
@media(min-width:960px){.header{padding:28px 60px 0;align-items:center;gap:24px}.wordmark{font-size:36px;order:0}.language-control{order:2}.discovery-toolbar{order:1;flex-basis:470px;width:470px;margin:0}.hero{height:720px}.hero .studio-object{width:580px;height:580px;top:105px;left:69%;transform:translateX(-50%)}.hero-photo.is-studio{background-image:radial-gradient(ellipse at 65% 45%,#c9662780,transparent 52%),radial-gradient(ellipse at 85% 44%,#a7496259,transparent 58%),linear-gradient(180deg,#181918 8%,#211b18 53%,#101110 96%)}.hero-photo.is-studio:before{top:603px;left:48%;width:42%}.hero-content{left:60px;bottom:180px;max-width:43%}.hero h1{font-size:78px}.hero .eyebrow{font-size:12px}.hero-subtitle{font-size:19px}.hero-photo .swatch{top:135px;right:60px;width:34px;height:34px}.hero-photo.single-photo.photo-cutout,.hero-photo.single-photo.photo-studio{background-size:auto 550px,cover;background-position:80% 110px,center}.hero-photo.is-studio{background-size:cover;background-position:center}.studio-inspiration{max-width:1240px;padding:0 60px;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:40px}.inspiration-card{aspect-ratio:1.6;max-height:350px}.inspiration-card .studio-object{width:80%;left:10%;top:-12%}.inspiration-label{font-size:33px}.shelf{padding-left:60px;padding-right:60px;gap:16px}.shelf .card{flex-basis:28%;aspect-ratio:1}.workspace{padding-top:130px}.studio-caption{right:60px}.product-reflection{top:620px;background-size:auto 550px}.card .card-photo.print-preview img{height:91%}}
@media(prefers-reduced-motion:reduce){#filter-dialog[open]{animation:none}}

/* Keep the studio backdrop separate from the factual manufacturer photograph. */
.hero-photo.single-photo.is-studio{background-image:radial-gradient(ellipse at 36% 44%,#ce672ca8,transparent 53%),radial-gradient(ellipse at 80% 43%,#b8456366,transparent 56%),linear-gradient(180deg,#181918 8%,#231a16 53%,#101110 89%);background-size:cover;background-position:center}
.hero{--vase-size:min(79vw,330px);--vase-top:117px;--vase-center:50%;--vase-shift:calc(-50% - 12px)}
.hero .studio-object,.hero .studio-reflection{width:var(--vase-size);height:var(--vase-size);left:var(--vase-center)}
.hero .studio-object{top:var(--vase-top);transform:translateX(var(--vase-shift));-webkit-box-reflect:unset}
.studio-reflection{display:block;position:absolute;background-image:url('assets/studio-vases.png');background-size:300% 100%;background-position:var(--studio-x,0%) center;background-repeat:no-repeat;pointer-events:none;opacity:.17;mask-image:linear-gradient(to top,#0009,transparent 20%);-webkit-mask-image:linear-gradient(to top,#0009,transparent 20%)}
.hero .studio-reflection{top:calc(var(--vase-top) + var(--vase-size) * .928);transform:translateX(var(--vase-shift)) scaleY(-1)}
.hero-photo.is-studio:before{top:calc(var(--vase-top) + var(--vase-size) * .964 - 10px)}
.inspiration-card{container-type:inline-size}
.inspiration-card .studio-object{-webkit-box-reflect:unset}
.inspiration-card .studio-reflection{width:100%;height:100cqw;left:0;top:calc(17% + 92.8cqw);transform:scaleY(-1);opacity:.15}
.inspiration-label{z-index:1}
#filter-dialog{background:linear-gradient(120deg,#252521,#1d1e1b)}
.filter-sheet-footer{background:#1d1e1b}
@media(min-width:540px){.hero{--vase-size:390px;--vase-top:133px}}
@media(min-width:960px){.hero{--vase-size:550px;--vase-top:105px;--vase-center:69%;--vase-shift:-50%}.hero-photo.single-photo.is-studio{background-image:radial-gradient(ellipse at 65% 45%,#c9662780,transparent 52%),radial-gradient(ellipse at 85% 44%,#a7496259,transparent 58%),linear-gradient(180deg,#181918 8%,#211b18 53%,#101110 96%)}.inspiration-card .studio-reflection{width:80%;height:80cqw;left:10%;top:calc(-12% + 74.24cqw)}}