/* ============================================================ Atelier Oak — Botanical / Organic Serif design system Tokens drive every page; change here, the whole site shifts. ============================================================ */ :root{ --paper:#F9F8F4; /* page — warm alabaster / rice paper */ --surface:#FFFFFF; /* cards */ --surface-2:#F2F0EB; /* soft clay surface */ --ink:#2D3A31; /* deep forest green — primary text */ --muted:#6E786A; /* muted sage-grey */ --sage:#8C9A84; /* primary accent */ --sage-deep:#6E7C64; --clay:#DCCFC2; /* soft clay / mushroom */ --terracotta:#C27B66; /* interactive pop / CTA */ --terracotta-deep:#A8654F; --stone:#E6E2DA; /* borders */ --line:rgba(45,58,49,.10); --line-strong:rgba(45,58,49,.20); --shadow-sm:0 4px 6px -1px rgba(45,58,49,.05); --shadow-md:0 10px 22px -8px rgba(45,58,49,.10); --shadow-lg:0 24px 48px -18px rgba(45,58,49,.14); --shadow-xl:0 30px 60px -16px rgba(45,58,49,.20); --shadow:var(--shadow-lg); --serif:"Playfair Display",Georgia,serif; --sans:"Source Sans 3",system-ui,sans-serif; --r:24px; /* rounded-3xl */ } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--sans); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; line-height:1.6; background-image:radial-gradient(130% 90% at 50% -20%, #FEFDFB 0%, var(--paper) 48%, #F4F2EC 100%); min-height:100vh; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ::selection{background:var(--sage);color:#fff} :focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:6px} /* paper grain — the tactile soul of the whole aesthetic */ .grain{ pointer-events:none;position:fixed;inset:0;z-index:60;opacity:.02; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat:repeat; } /* scroll reveal */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)} .reveal.is-in{opacity:1;transform:none} /* ---- shell ---- */ .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)} .eyebrow{font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--terracotta);font-weight:600} /* ---- sticky top bar ---- */ /* the whole header follows on scroll — sticky on #site-header (its parent is , so it can travel the full page; sticky on .topbar did nothing because #site-header is only as tall as the header) */ #site-header{position:sticky;top:0;z-index:40;transition:transform .3s ease} @media(max-width:860px){#site-header.nav-hidden{transform:translateY(-100%)}} /* mobile: hide on scroll-down, reveal on scroll-up */ .topbar{background:rgba(249,248,244,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .topbar .nav{border:0} /* ---- promo / urgency bar ---- */ .promo{background:var(--ink);color:#F2EFE9;font-size:.76rem;letter-spacing:.06em;text-align:center;padding:9px 16px} .promo b{color:var(--clay);font-weight:600} .promo .dot{opacity:.4;margin:0 10px} /* ---- nav ---- */ header.site,.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0;position:relative} .wrap>header.site{border-bottom:1px solid var(--line)} .brand{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:-.01em;line-height:1} .brand em{font-style:italic;color:var(--terracotta)} .brand small{display:block;font-family:var(--sans);font-weight:600;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:5px} nav.site,.nav-links{font-size:.82rem;letter-spacing:.03em;color:var(--muted);display:flex;gap:30px;align-items:center} nav.site a:hover,.nav-links a:hover{color:var(--ink)} .nav-links a{position:relative;padding:4px 0} .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--terracotta);transition:right .35s cubic-bezier(.2,.8,.2,1)} .nav-links a:hover::after{right:0} .nav-cta{display:flex;gap:12px;align-items:center} .menu-btn{display:none;background:none;border:0;cursor:pointer;color:var(--ink);padding:6px} /* ---- buttons ---- */ .btn{font:inherit;font-weight:600;font-size:.9rem;border-radius:100px;padding:14px 26px;cursor:pointer;border:1px solid var(--ink); background:var(--ink);color:#F7F5F0;transition:transform .3s,background .3s,box-shadow .3s,color .3s,border-color .3s; text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:10px;line-height:1} .btn:hover{background:var(--terracotta);border-color:var(--terracotta);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn.sec{background:transparent;color:var(--ink);border-color:var(--sage)} .btn.sec:hover{background:var(--sage);border-color:var(--sage);color:#fff} .btn.wide{text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:600;padding:14px 24px} .btn.sm{padding:11px 20px;font-size:.8rem} /* ---- hero ---- */ .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(36px,6vw,84px) 0 clamp(30px,5vw,64px)} .hero-copy .eyebrow{margin-bottom:22px;display:inline-block} .hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.7rem,6.4vw,5.3rem);line-height:1.02;letter-spacing:-.02em} .hero h1 em{font-style:italic;font-weight:500;color:var(--terracotta)} .hero p{margin-top:26px;max-width:44ch;color:#55605A;font-size:clamp(1.02rem,1.3vw,1.16rem)} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} .hero-trust{display:flex;align-items:center;gap:14px;margin-top:30px;color:var(--muted);font-size:.84rem} .hero-trust .avatars{display:flex} .hero-trust .avatars span{width:34px;height:34px;border-radius:50%;border:2px solid var(--paper);margin-left:-10px;background:var(--clay) center/cover} .hero-trust .avatars span:first-child{margin-left:0} .hero-media{position:relative} .arch{border-radius:1000px 1000px var(--r) var(--r);overflow:hidden} .hero-media .frame{position:relative;aspect-ratio:4/5;background:radial-gradient(80% 70% at 50% 30%,#fff 0%,#EBE6DC 100%);border:1px solid var(--stone); box-shadow:var(--shadow-xl)} .hero-media .frame img{width:100%;height:100%;object-fit:contain;padding:8% 10% 4%;transition:transform 1s cubic-bezier(.2,.8,.2,1)} .hero-media:hover .frame img{transform:scale(1.05)} .float-card{position:absolute;left:-6%;bottom:9%;background:rgba(255,255,255,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.6);border-radius:20px;padding:14px 18px;box-shadow:var(--shadow-lg);display:flex;gap:12px;align-items:center;max-width:230px} .float-card .fc-icon{width:40px;height:40px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--sage-deep);flex:none} .float-card b{font-family:var(--serif);font-size:1.25rem;font-weight:600;display:block;line-height:1} .float-card small{font-size:.72rem;color:var(--muted)} .leaf-tag{position:absolute;top:6%;right:-4%;background:var(--sage);color:#fff;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600; padding:9px 16px;border-radius:100px;box-shadow:var(--shadow-md);transform:rotate(4deg)} /* ---- stat bar ---- */ .stat-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);padding:clamp(30px,4vw,50px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stat{text-align:center} .stat .n{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,3.4vw,2.7rem);letter-spacing:-.01em;line-height:1} .stat .n em{font-style:italic;color:var(--terracotta)} .stat .l{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px} /* ---- section headings ---- */ .section{padding:clamp(56px,9vw,120px) 0} .section-head{max-width:60ch;margin-bottom:clamp(32px,4vw,56px)} .section-head.center{margin-left:auto;margin-right:auto;text-align:center} .section-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-.02em;margin-top:16px} .section-head h2 em{font-style:italic;color:var(--terracotta)} .section-head p{color:#55605A;margin-top:16px;font-size:1.05rem} /* ---- toolbar / category filters ---- */ .toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:2px 0 26px} .filters{display:flex;gap:9px;flex-wrap:wrap} .chip{border:1px solid var(--line-strong);background:transparent;border-radius:100px;padding:8px 17px;font:inherit;font-size:.82rem; cursor:pointer;color:var(--muted);transition:.25s;white-space:nowrap} .chip:hover{color:var(--ink);border-color:var(--sage);background:var(--surface)} .chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)} .count{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} /* ---- catalogue grid ---- */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px);padding:6px 0 20px} .card{ position:relative;display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--stone);border-radius:var(--r);overflow:hidden; transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .5s; } .card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--clay)} .card .stage{position:relative;aspect-ratio:4/3.5;background:radial-gradient(80% 72% at 50% 30%,#fff 0%,#EEE9DF 100%);overflow:hidden} .card model-viewer{width:100%;height:100%;--poster-color:transparent;pointer-events:none} .card .stage img{width:100%;height:100%;object-fit:contain;padding:18px 18px 8px;transition:transform .7s cubic-bezier(.2,.8,.2,1)} .card:hover .stage img{transform:scale(1.06)} .card .tag{position:absolute;top:14px;left:14px;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); border:1px solid var(--line);border-radius:100px;padding:5px 11px;background:rgba(255,255,255,.72);backdrop-filter:blur(4px)} .badge{position:absolute;top:14px;right:14px;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:6px 11px;border-radius:100px;box-shadow:var(--shadow-sm)} .badge.sale{background:var(--terracotta);color:#fff} .badge.new{background:var(--sage);color:#fff} .card .ar-chip{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:6px;font-size:.68rem;letter-spacing:.04em; color:var(--ink);background:rgba(255,255,255,.82);backdrop-filter:blur(4px);border:1px solid var(--line);border-radius:100px;padding:6px 12px; opacity:0;transform:translateY(6px);transition:.4s} .card:hover .ar-chip{opacity:1;transform:none} .card .meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 20px;border-top:1px solid var(--line)} .card .meta h3{font-family:var(--serif);font-weight:600;font-size:1.28rem;letter-spacing:-.01em;line-height:1.1} .stars{display:flex;align-items:center;gap:6px;margin-top:7px;color:var(--terracotta)} .stars svg{width:13px;height:13px} .stars em{font-style:normal;color:var(--muted);font-size:.76rem;letter-spacing:.02em} .card .price{font-family:var(--serif);font-weight:600;font-variant-numeric:tabular-nums;font-size:1.18rem;white-space:nowrap;text-align:right;line-height:1.3} .card .was{display:block;font-family:var(--sans);font-weight:400;font-size:.8rem;color:var(--muted);text-decoration:line-through;text-align:right} .empty{grid-column:1/-1;color:var(--muted);padding:40px 0;font-family:var(--serif);font-style:italic;text-align:center} /* ---- collapsed grid: show 6, blur-fade the rest, reveal on click ---- */ .collection-wrap{position:relative} .grid.collapsed .card:nth-child(n+7){display:none} .grid-veil{position:absolute;left:0;right:0;bottom:0;height:clamp(150px,20vh,220px);pointer-events:none; background:linear-gradient(to bottom,rgba(249,248,244,0) 0%,rgba(249,248,244,.55) 45%,var(--paper) 88%); backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%);mask-image:linear-gradient(to bottom,transparent,#000 40%)} .more-row{display:flex;justify-content:center;margin-top:24px} .more-btn{min-width:230px} .more-btn[hidden]{display:none} /* the .btn display: rule was overriding the UA [hidden] rule, so it never hid */ /* ---- features ---- */ .features{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)} .feature{background:var(--surface);border:1px solid var(--stone);border-radius:var(--r);padding:34px 30px;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s} .feature:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .feature .f-icon{width:60px;height:60px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--sage-deep);margin-bottom:22px} .feature h3{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:-.01em} .feature p{color:#55605A;margin-top:12px;font-size:.98rem} .features>.feature:nth-child(2){transform:translateY(28px)} .features>.feature:nth-child(2):hover{transform:translateY(22px)} /* ---- testimonials ---- */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)} .quote{background:var(--surface-2);border-radius:var(--r);padding:34px 30px;display:flex;flex-direction:column;gap:18px} .quote .stars{margin:0} .quote p{font-family:var(--serif);font-style:italic;font-size:1.28rem;line-height:1.42;color:var(--ink)} .quote .who{display:flex;align-items:center;gap:12px;margin-top:auto} .quote .who .av{width:44px;height:44px;border-radius:50%;background:var(--clay);display:grid;place-items:center;font-family:var(--serif);color:var(--ink);font-size:1.05rem} .quote .who b{font-weight:600;font-size:.92rem} .quote .who small{color:var(--muted);font-size:.78rem;display:block} .quotes>.quote:nth-child(2){transform:translateY(28px)} /* ---- newsletter ---- */ .newsletter{background:var(--ink);border-radius:40px;padding:clamp(40px,6vw,72px) clamp(24px,5vw,72px);text-align:center;color:#F2EFE9;position:relative;overflow:hidden} .newsletter::before,.newsletter::after{content:"";position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(140,154,132,.5),transparent 70%);pointer-events:none} .newsletter::before{width:340px;height:340px;top:-140px;right:-80px} .newsletter::after{width:300px;height:300px;bottom:-150px;left:-70px;background:radial-gradient(circle at 30% 30%,rgba(194,123,102,.4),transparent 70%)} .newsletter .eyebrow{color:var(--clay)} .newsletter h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4vw,3rem);line-height:1.06;margin:16px auto 0;max-width:18ch;position:relative} .newsletter h2 em{font-style:italic;color:var(--clay)} .newsletter p{color:#C9CEC3;margin:16px auto 0;max-width:44ch;position:relative} .nl-form{display:flex;gap:10px;max-width:480px;margin:32px auto 0;position:relative;flex-wrap:wrap;justify-content:center} .nl-form input{flex:1;min-width:220px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:15px 22px;font:inherit;color:#fff} .nl-form input::placeholder{color:#A9B0A6} .nl-form input:focus{outline:none;border-color:var(--sage);background:rgba(255,255,255,.12)} .nl-form .btn{background:var(--terracotta);border-color:var(--terracotta);color:#fff} .nl-form .btn:hover{background:#fff;border-color:#fff;color:var(--ink)} .nl-note{font-size:.76rem;color:#A9B0A6;margin-top:16px;position:relative} /* ---- footer ---- */ .footer{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,80px);padding:clamp(48px,6vw,80px) 0 40px;color:var(--muted);font-size:.86rem} .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px)} .footer-brand .brand{color:var(--ink)} .footer-brand p{margin-top:16px;max-width:34ch;line-height:1.7} .footer-col h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:16px;font-weight:700} .footer-col a{display:block;padding:6px 0;transition:color .25s} .footer-col a:hover{color:var(--terracotta)} .socials{display:flex;gap:10px;margin-top:20px} .socials a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--ink);transition:.3s} .socials a:hover{background:var(--sage);border-color:var(--sage);color:#fff;transform:translateY(-3px)} .footer-vine{margin:44px 0 24px;color:var(--stone)} .footer-bot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:.78rem} .footer-bot a{text-decoration:underline;text-underline-offset:2px} /* legacy footer (product page uses footer.site) */ footer.site{border-top:1px solid var(--line);padding:34px 0 60px;color:var(--muted);font-size:.8rem;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between} footer.site .credits{max-width:60ch;line-height:1.7} footer.site a{text-decoration:underline;text-underline-offset:2px} /* ---- mobile nav overlay ---- */ .mobile-nav{position:fixed;inset:0;z-index:70;background:var(--paper);display:flex;flex-direction:column;padding:26px clamp(20px,6vw,40px); transform:translateY(-100%);transition:transform .5s cubic-bezier(.2,.8,.2,1);visibility:hidden} .mobile-nav.open{transform:none;visibility:visible} .mobile-nav .mn-top{display:flex;justify-content:space-between;align-items:center} .mobile-nav .mn-links{display:flex;flex-direction:column;gap:6px;margin-top:14vh} .mobile-nav .mn-links a{font-family:var(--serif);font-size:2.4rem;font-weight:500;padding:10px 0;border-bottom:1px solid var(--line)} .mobile-nav .mn-links a em{font-style:italic;color:var(--terracotta)} .mobile-nav .btn{margin-top:30px} /* ============================================================ PRODUCT PAGE ============================================================ */ .pback{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.84rem;margin:20px 0 6px} .pback:hover{color:var(--terracotta)} .product{display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(22px,4vw,64px);padding:14px 0 80px;align-items:start} .viewer-panel{position:sticky;top:20px} .viewer-shell{position:relative;background:radial-gradient(75% 70% at 50% 30%,#fff 0%,#EBE6DC 100%); border:1px solid var(--stone);border-radius:40px;overflow:hidden;aspect-ratio:1/1;box-shadow:var(--shadow-lg)} #mv{width:100%;height:100%;--poster-color:transparent} .spin-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);pointer-events:none} .panel .eyebrow{display:inline-block;margin-bottom:6px} .panel h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.1rem,3.8vw,3rem);line-height:1.03;letter-spacing:-.02em;margin:10px 0 8px} .panel .price{font-family:var(--serif);font-weight:600;font-size:1.5rem;font-variant-numeric:tabular-nums} .panel .desc{color:#55605A;margin:18px 0 26px;max-width:42ch;font-size:1.02rem} .opt{margin:24px 0} .opt .label{display:flex;justify-content:space-between;align-items:baseline;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px} .opt .label b{font-weight:600;color:var(--ink);letter-spacing:0;text-transform:none;font-size:.92rem} .swatches{display:flex;flex-wrap:wrap;gap:11px} .sw{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);cursor:pointer; position:relative;transition:transform .25s;box-shadow:inset 0 0 0 3px var(--surface)} .sw:hover{transform:scale(1.1)} .sw[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--surface),0 0 0 2px var(--ink)} .pills{display:flex;gap:9px;flex-wrap:wrap} .pill{border:1px solid var(--line-strong);background:transparent;border-radius:100px;padding:10px 18px;font:inherit; font-size:.86rem;cursor:pointer;color:var(--muted);transition:.25s} .pill[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)} .pill:hover{color:var(--ink);border-color:var(--sage)} .dims{display:flex;gap:28px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:22px 0} .dims div{font-size:.8rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase} .dims div b{display:block;font-family:var(--serif);font-size:1.4rem;color:var(--ink);font-weight:600;margin-top:4px;letter-spacing:0;text-transform:none} .actions{display:flex;flex-direction:column;gap:12px;margin-top:26px} .btn.ar{background:var(--terracotta);border-color:var(--terracotta);color:#fff} .btn.ar:hover{background:var(--terracotta-deep);border-color:var(--terracotta-deep);transform:translateY(-2px)} .btn.buy{background:transparent;color:var(--ink);border-color:var(--ink)} .btn.buy:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} .ar-note{font-size:.78rem;color:var(--muted);text-align:center;margin-top:2px} .trust-row{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:22px;font-size:.8rem;color:var(--muted)} .trust-row span{display:inline-flex;align-items:center;gap:7px} .trust-row svg{color:var(--sage-deep)} /* ============================================================ ADMIN ============================================================ */ .admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 0 10px} .admin-head h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,3vw,2.6rem);letter-spacing:-.02em} .admin-head p{color:var(--muted);font-size:.88rem;margin-top:8px;max-width:52ch} .admin-actions{display:flex;gap:10px;flex-wrap:wrap} .abtn{font:inherit;font-size:.85rem;font-weight:600;border-radius:100px;padding:12px 20px;cursor:pointer;border:1px solid var(--ink);background:transparent;color:var(--ink);transition:.25s} .abtn:hover{background:var(--ink);color:var(--paper)} .abtn.primary{background:var(--terracotta);border-color:var(--terracotta);color:#fff} .abtn.primary:hover{background:var(--terracotta-deep);border-color:var(--terracotta-deep)} .abtn.ghost{border-color:var(--line-strong);color:var(--muted)} .admin-grid{display:grid;grid-template-columns:300px 1fr;gap:26px;padding:16px 0 80px;align-items:start} .admin-list-wrap{position:sticky;top:16px} .admin-search{width:100%;padding:12px 16px;border:1px solid var(--line-strong);border-radius:100px;font:inherit;background:var(--surface);margin-bottom:12px} .admin-search:focus{outline:none;border-color:var(--sage)} .admin-list{display:flex;flex-direction:column;gap:4px;max-height:70vh;overflow:auto} .admin-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:14px;cursor:pointer;border:1px solid transparent;text-align:left;background:none;font:inherit;color:inherit} .admin-item:hover{background:var(--surface)} .admin-item[aria-current="true"]{background:var(--surface);border-color:var(--stone)} .admin-item img{width:44px;height:44px;object-fit:contain;background:var(--surface-2);border-radius:12px;flex:none} .admin-item .ai-name{font-size:.92rem;line-height:1.15} .admin-item .ai-sub{font-size:.74rem;color:var(--muted)} .editor{background:var(--surface);border:1px solid var(--stone);border-radius:var(--r);padding:24px;display:none} .editor.on{display:grid;grid-template-columns:300px 1fr;gap:24px} .editor .prev{background:radial-gradient(75% 70% at 50% 32%,#fff 0%,#EBE6DC 100%);border:1px solid var(--stone);border-radius:18px;aspect-ratio:1/1;overflow:hidden} .editor .prev model-viewer{width:100%;height:100%;--poster-color:transparent} .field{margin-bottom:15px} .field label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .field input,.field select,.field textarea{width:100%;padding:11px 14px;border:1px solid var(--line-strong);border-radius:12px;font:inherit;background:var(--surface)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sage)} .field textarea{resize:vertical;min-height:64px} .field.row{display:flex;gap:14px}.field.row>div{flex:1} .field.check{display:flex;align-items:center;gap:8px}.field.check input{width:auto} .amats{font-size:.76rem;color:var(--muted);margin-top:4px;word-break:break-word} .editor-foot{display:flex;gap:10px;margin-top:8px} /* ---- import ---- */ .import{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start;background:var(--surface);border:1px solid var(--stone);border-radius:var(--r);padding:20px;margin:8px 0 6px} .import-drop{display:flex;flex-direction:column;gap:6px;justify-content:center;min-height:150px;padding:22px;border:2px dashed var(--line-strong);border-radius:18px;cursor:pointer;transition:.2s;background:var(--paper)} .import-drop:hover,.import-drop.over{border-color:var(--sage);background:var(--surface-2)} .import-drop strong{font-family:var(--serif);font-weight:600;font-size:1.3rem} .import-drop span{font-size:.82rem;color:var(--muted);max-width:46ch} .import-drop code{background:var(--surface-2);padding:1px 6px;border-radius:5px;font-size:.9em} .import-file-name{font-weight:600;color:var(--ink)!important} .import-form{display:flex;flex-direction:column;gap:0} .import-form .field{margin-bottom:11px} .import-form .abtn{margin-top:2px} .import-status{grid-column:1/-1;font-size:.84rem;color:var(--muted);min-height:1.1em} .import-status.ok{color:var(--sage-deep)} .import-status.err{color:#B4402A} .import-hint{font-size:.84rem;color:var(--muted);background:var(--surface);border:1px solid var(--stone);border-radius:14px;padding:14px 16px;margin:8px 0} .import-hint code{background:var(--surface-2);padding:1px 6px;border-radius:5px} /* ---- toast ---- */ .toast{position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper); padding:18px 30px;border-radius:20px;font-size:1.05rem;font-weight:500;line-height:1.4;text-align:center;max-width:min(88vw,520px); opacity:0;pointer-events:none;transition:.35s;z-index:200;box-shadow:var(--shadow-xl)} /* z:200 so it clears the enlarged viewer (z:120) */ .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ============================================================ CART (nav button + slide-in drawer) ============================================================ */ .cart-btn{position:relative;background:none;border:0;cursor:pointer;color:var(--ink);padding:6px;display:grid;place-items:center} .cart-btn:hover{color:var(--terracotta)} .cart-count{position:absolute;top:-3px;right:-3px;background:var(--terracotta);color:#fff;font-size:.62rem;font-weight:700;min-width:17px;height:17px;border-radius:100px;display:grid;place-items:center;padding:0 4px} .drawer-scrim{position:fixed;inset:0;background:rgba(45,58,49,.34);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.4s;z-index:90} .drawer-scrim.on{opacity:1;visibility:visible} .cart-drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,94vw);background:var(--paper);z-index:95;display:flex;flex-direction:column;transform:translateX(101%);transition:transform .45s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow-xl)} .cart-drawer.open{transform:none} .cd-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)} .cd-head h3{font-family:var(--serif);font-weight:600;font-size:1.5rem} .cd-items{flex:1;overflow:auto;padding:8px 24px} .cd-empty{color:var(--muted);text-align:center;padding:44px 0;font-family:var(--serif);font-style:italic;line-height:2} .cd-empty a{color:var(--terracotta)} .cd-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)} .cd-item img{width:72px;height:72px;object-fit:contain;background:var(--surface-2);border-radius:14px;flex:none} .cd-info{flex:1;display:flex;flex-direction:column;gap:3px} .cd-info b{font-family:var(--serif);font-weight:600;font-size:1.06rem;line-height:1.15} .cd-price{color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums} .cd-qty{display:flex;align-items:center;gap:9px;margin-top:8px} .cd-qty button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;font-size:1rem;line-height:1;color:var(--ink);transition:.2s} .cd-qty button:hover{border-color:var(--sage);color:var(--terracotta)} .cd-qty>span{min-width:18px;text-align:center;font-variant-numeric:tabular-nums} .cd-rm{width:auto!important;height:auto!important;border:0!important;background:none!important;color:var(--muted)!important;font-size:.76rem!important;margin-left:auto;text-decoration:underline;text-underline-offset:2px} .cd-rm:hover{color:var(--terracotta)!important} .cd-foot{padding:20px 24px;border-top:1px solid var(--line)} .cd-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px} .cd-total b{font-family:var(--serif);font-size:1.5rem;font-weight:600} .cd-note{font-size:.72rem;color:var(--muted);text-align:center;margin-top:12px} /* ============================================================ SUB-PAGES (shop / about / contact / success) ============================================================ */ .page-hero{text-align:center;padding:clamp(38px,7vw,88px) 0 clamp(16px,3vw,36px);max-width:62ch;margin:0 auto} .page-hero .eyebrow{display:inline-block;margin-bottom:16px} .page-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem,5.5vw,4rem);line-height:1.03;letter-spacing:-.02em} .page-hero h1 em{font-style:italic;color:var(--terracotta)} .page-hero p{color:#55605A;margin-top:18px;font-size:1.1rem} /* about */ .about-lead{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(20px,3vw,44px) 0} .about-media .frame{position:relative;aspect-ratio:4/5;background:radial-gradient(80% 70% at 50% 30%,#fff 0%,#EBE6DC 100%);border:1px solid var(--stone);box-shadow:var(--shadow-lg);overflow:hidden} .about-media .frame img{width:100%;height:100%;object-fit:contain;padding:8% 10%} .prose h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.08;letter-spacing:-.02em} .prose h2 em{font-style:italic;color:var(--terracotta)} .prose p{color:#55605A;font-size:1.08rem;margin-top:16px;max-width:60ch;line-height:1.75} /* contact */ .contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,60px);padding:clamp(16px,3vw,40px) 0 40px;align-items:start} .contact-form{display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid var(--stone);border-radius:var(--r);padding:clamp(24px,3vw,40px);box-shadow:var(--shadow-md)} .contact-form .fld label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px} .contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:13px 16px;border:1px solid var(--line-strong);border-radius:14px;font:inherit;background:var(--paper);color:var(--ink)} .contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:none;border-color:var(--sage);background:var(--surface)} .contact-form textarea{min-height:130px;resize:vertical} .contact-form .btn{margin-top:6px} .form-status{font-size:.88rem;min-height:1.1em} .form-status.ok{color:var(--sage-deep)} .form-status.err{color:#B4402A} .contact-info{display:flex;flex-direction:column;gap:24px;padding-top:6px} .contact-info .ci{display:flex;gap:15px;align-items:flex-start} .contact-info .ci-ic{width:48px;height:48px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--sage-deep);flex:none} .contact-info h4{font-family:var(--serif);font-weight:600;font-size:1.2rem} .contact-info p,.contact-info a{color:var(--muted);font-size:.96rem;line-height:1.6} .contact-info a:hover{color:var(--terracotta)} /* success */ .success{max-width:560px;margin:0 auto;text-align:center;padding:clamp(56px,10vw,120px) 0} .success .ok-ic{width:88px;height:88px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--sage-deep);margin:0 auto 28px} .success h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,4vw,3rem);letter-spacing:-.02em} .success h1 em{font-style:italic;color:var(--terracotta)} .success p{color:#55605A;margin-top:16px} .success .btn{margin-top:30px} /* home featured teaser CTA */ .shop-cta{text-align:center;margin-top:40px} /* ---- live showroom ---- */ .showroom{display:grid;grid-template-columns:1fr 330px;gap:24px;padding:8px 0 90px;align-items:start} .room-tabs{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px} .rtab{border:1px solid var(--line-strong);background:transparent;border-radius:100px;padding:11px 22px;font:inherit;font-size:.88rem;cursor:pointer;color:var(--muted);transition:.25s} .rtab[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)} .rtab:hover{color:var(--ink);border-color:var(--sage)} .room-stage{position:relative;background:radial-gradient(75% 70% at 50% 38%,#fff 0%,#EBE6DC 100%);border:1px solid var(--stone);border-radius:28px;overflow:hidden;aspect-ratio:16/11;box-shadow:var(--shadow-lg)} #room-mv{width:100%;height:100%;--poster-color:transparent} .room-hint{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:.74rem;letter-spacing:.05em;color:var(--muted);pointer-events:none;background:linear-gradient(transparent,rgba(249,248,244,.7));padding-top:20px} .room-panel{position:sticky;top:16px;background:var(--surface);border:1px solid var(--stone);border-radius:24px;padding:24px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:22px} .seg-label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:11px} .chips{display:flex;flex-wrap:wrap;gap:8px} .mchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);background:var(--paper);border-radius:100px;padding:6px 13px 6px 6px;font:inherit;font-size:.8rem;cursor:pointer;color:var(--ink);transition:.2s} .mchip .sw{width:20px;height:20px;border-radius:50%;border:1px solid rgba(45,58,49,.12);flex:none} .mchip:hover{border-color:var(--sage)} .mchip[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)} @media(max-width:860px){.showroom{grid-template-columns:1fr}.room-panel{position:static}.room-stage{aspect-ratio:4/3}} /* ---- room designer (three.js configurator) ---- */ .preset-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 18px} .ptab{border:1px solid var(--line-strong);background:var(--paper);border-radius:100px;padding:9px 18px;font:inherit;font-size:.86rem;color:var(--muted);cursor:pointer;transition:.2s;white-space:nowrap} .ptab:hover{border-color:var(--sage);color:var(--ink)} .ptab.on{background:var(--ink);border-color:var(--ink);color:#fff} .designer{display:grid;grid-template-columns:1fr 340px;gap:24px;padding:8px 0 90px;align-items:start} .designer>*{min-width:0} /* grid items must shrink below content, else the accordion's chip row forces the panel wider than the screen */ .stage3d{position:relative;background:linear-gradient(#f3eee4,#ddd3c2);border:1px solid var(--stone);border-radius:28px;overflow:hidden;aspect-ratio:16/11;box-shadow:var(--shadow-lg);touch-action:none} .stage3d canvas{display:block;width:100%!important;height:100%!important} .stage-hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:.72rem;letter-spacing:.05em;color:var(--muted);pointer-events:none;z-index:2;text-shadow:0 1px 2px rgba(255,255,255,.5)} .stage-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.9rem;letter-spacing:.1em;z-index:1} .design-panel{position:sticky;top:16px;background:var(--surface);border:1px solid var(--stone);border-radius:24px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;max-height:calc(100vh - 32px)} .dp-scroll{padding:4px 20px 16px;overflow-y:auto;flex:1 1 auto;min-height:0} /* collapsible accordion rows: just labels until you tap one open */ .acc{border-top:1px solid var(--stone)} .dp-scroll > .acc:first-child{border-top:none} .acc-head{display:flex;align-items:center;gap:10px;width:100%;padding:15px 2px;background:none;border:none;font:inherit;cursor:pointer;text-align:left;color:var(--ink)} .acc-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:none} .acc-current{margin-left:auto;font-size:.84rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px} .acc-caret{flex:none;color:var(--muted);font-size:.6rem;transition:transform .2s} .acc.open .acc-caret{transform:rotate(180deg)} .acc-body{display:none;padding:2px 2px 16px} .acc.open .acc-body{display:block} /* persistent colour bar — always recolour the open piece, no hunting */ .color-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:13px 20px;border-top:1px solid var(--stone);transition:opacity .2s} .color-bar.dim{opacity:.32;pointer-events:none} .cb-label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:2px} .color-bar .sw{width:27px;height:27px;border:1px solid var(--line-strong)} .seg.is-selected .seg-label{color:var(--terracotta)} .chips.thumbs{gap:9px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;scroll-snap-type:x proximity} .chips.thumbs::-webkit-scrollbar{height:5px} .chips.thumbs::-webkit-scrollbar-thumb{background:var(--stone);border-radius:9px} .chips.thumbs .mchip{flex:0 0 90px;flex-direction:column;align-items:stretch;width:90px;padding:0;border-radius:14px;overflow:hidden;gap:0;text-align:center;scroll-snap-align:start} .chips.thumbs .mchip img{width:100%;height:64px;object-fit:cover;background:var(--surface-2)} .chips.thumbs .mchip span{padding:5px 4px;font-size:.66rem;line-height:1.15;color:var(--muted)} .chips.thumbs .mchip .none{display:flex;align-items:center;justify-content:center;height:64px;font-size:.8rem;color:var(--muted);background:var(--surface-2)} .mchip.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)} .chips.thumbs .mchip.on span{color:var(--ink);font-weight:600} .design-bar{border-top:1px solid var(--stone);padding:16px 22px;display:flex;flex-direction:column;gap:12px} .db-total{display:flex;justify-content:space-between;align-items:baseline} .db-total span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .db-total strong{font-family:var(--serif);font-size:1.5rem;color:var(--ink)} .btn-primary{background:var(--terracotta);color:#fff;border:none;border-radius:100px;padding:13px;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;transition:.2s} .btn-primary:hover{background:var(--terracotta-deep)} .btn-ghost{display:block;width:100%;text-align:center;border:1px solid var(--line-strong);background:none;border-radius:100px;padding:11px;font:inherit;font-size:.82rem;color:var(--ink);text-decoration:none;cursor:pointer;transition:.2s} .btn-ghost:hover{border-color:var(--terracotta);color:var(--terracotta)} /* AR call-to-action: bigger, wider, harder to miss */ /* bold, filled AR CTA that stands out; hover DARKENS + lifts (never washes to white) */ #ar-room{padding:16px 20px;font-size:1rem;font-weight:600;letter-spacing:.01em;border:1.5px solid var(--terracotta);background:var(--terracotta);color:#fff;box-shadow:0 8px 20px -8px rgba(194,123,102,.7)} #ar-room:hover{background:var(--terracotta-deep);border-color:var(--terracotta-deep);color:#fff;box-shadow:0 11px 26px -8px rgba(168,101,79,.85);transform:translateY(-1px)} /* enlarge (focus) mode — the viewer grows in place to near-fullscreen: JS animates the 4 edges (top/right/bottom/left) from the stage's current on-screen rect, each edge at its own speed, so it grows from exactly where it is (not a centred pop). Sidebar hidden; controls pinned/hover as below. */ .stage-expand{position:absolute;top:12px;right:12px;z-index:6;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(255,255,255,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:.18s} .stage-expand:hover{background:#fff;border-color:var(--ink);transform:scale(1.07)} body.designer-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden} /* pin the page (top set inline to -scrollY) so it can't clamp/jump; restored on exit */ body.designer-lock .topbar{visibility:hidden} .designer.big{position:fixed;z-index:120;margin:0;padding:0;gap:0;grid-template-columns:1fr;grid-template-rows:1fr;align-items:stretch} .designer.big .design-panel{display:none} .designer.big .stage-expand{display:none} .designer.big .stage3d{aspect-ratio:auto;height:100%;border-radius:24px;box-shadow:0 30px 90px -30px rgba(20,18,14,.55)} .designer.big .stage-hint{display:none} /* top toolbar inside the enlarged stage — hidden until the pointer is near the top */ .focus-bar{position:absolute;top:0;left:0;right:0;z-index:7;display:none;align-items:center;gap:8px;padding:12px clamp(96px,24vw,210px) 12px 14px;background:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.72) 55%,rgba(255,255,255,0));transform:translateY(-100%);opacity:0;transition:transform .25s ease,opacity .25s ease} .designer.big .focus-bar{display:flex} .focus-bar.show,.focus-bar:focus-within{transform:none;opacity:1} .focus-tabs{display:flex;gap:8px;flex:1 1 auto;overflow-x:auto;scrollbar-width:none} .focus-tabs::-webkit-scrollbar{display:none} .focus-tabs .ptab{padding:7px 15px;font-size:.8rem;background:rgba(255,255,255,.85);box-shadow:0 1px 4px rgba(20,18,14,.08)} .focus-tabs .ptab.on{background:var(--ink);color:#fff} /* Exit + View-in-AR: pinned top-right, always visible while enlarged */ .focus-actions{position:absolute;top:12px;right:14px;z-index:9;display:none;align-items:center;gap:10px} .designer.big .focus-actions{display:flex} .focus-ar{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--terracotta-deep);background:rgba(255,255,255,.92);color:var(--terracotta-deep);border-radius:100px;padding:11px 22px;font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;transition:.2s;white-space:nowrap} .focus-ar:hover{background:var(--terracotta);color:#fff} .focus-exit{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(255,255,255,.92);color:var(--ink);font-size:1.05rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s;flex:none} .focus-exit:hover{background:var(--ink);color:#fff;border-color:var(--ink)} @media(max-width:860px){.designer{grid-template-columns:1fr}.design-panel{position:static;max-height:none}.stage3d{aspect-ratio:4/3} /* enlarge (focus) mode on mobile — no hover: categories stay pinned top (left of the exit); exit sits top-right ON TOP in a readable dark colour; View-in-AR drops to the right, just below the categories. */ .designer.big .focus-bar{transform:none;opacity:1;padding:9px 56px 9px 10px} /* always visible; right gutter clears only the exit */ .designer.big .focus-actions{display:contents} /* let exit + AR place independently */ .designer.big .focus-exit{position:absolute;top:9px;right:10px;z-index:11;width:38px;height:38px;background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 3px 10px -2px rgba(20,18,14,.4)} .designer.big .focus-ar{position:absolute;top:54px;right:10px;z-index:10;padding:9px 16px;font-size:.8rem;box-shadow:0 4px 14px -4px rgba(20,18,14,.35)} } /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:960px){ .hero{grid-template-columns:1fr;gap:36px} .hero-media{max-width:460px} .footer-top{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1/-1} } @media(max-width:860px){ .nav-links,.nav-cta .btn{display:none} .menu-btn{display:block} .grid{grid-template-columns:repeat(2,1fr)} .contact-grid,.about-lead{grid-template-columns:1fr} .about-media{max-width:440px} .features,.quotes{grid-template-columns:1fr} .features>.feature:nth-child(2),.quotes>.quote:nth-child(2){transform:none} .stat-bar{grid-template-columns:repeat(2,1fr);gap:28px 16px} .product{grid-template-columns:1fr;gap:26px} .viewer-panel{position:static} .admin-grid{grid-template-columns:1fr}.editor.on{grid-template-columns:1fr}.admin-list-wrap{position:static}.import{grid-template-columns:1fr} } @media(max-width:520px){ .grid{grid-template-columns:1fr} .float-card{left:0} .newsletter{border-radius:28px} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} } /* ---- real-world results: video strip + masonry photo gallery ---- */ .results .section-head{margin-bottom:34px} .films{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 auto 44px;max-width:820px} .film{position:relative;margin:0;border-radius:22px;overflow:hidden;background:#1c211d;aspect-ratio:4/5;box-shadow:var(--shadow-lg)} .film video{width:100%;height:100%;object-fit:cover;display:block} .film figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 13px;color:#fff;font-size:.8rem;font-weight:600;letter-spacing:.03em;background:linear-gradient(transparent,rgba(20,26,22,.72));pointer-events:none} .gallery{columns:4 210px;column-gap:16px} /* zig-zag masonry — varied heights */ .gallery.collapsed{display:none} /* hidden until "See the real installs" is clicked */ .shot{margin:0 0 16px;break-inside:avoid;position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-md)} .shot img{width:100%;display:block;transition:transform .5s ease} .shot:hover img{transform:scale(1.04)} .shot figcaption{position:absolute;left:12px;bottom:12px;color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 13px;background:rgba(45,58,49,.62);border-radius:100px;opacity:0;transform:translateY(6px);transition:.28s} .shot:hover figcaption{opacity:1;transform:none} .results-badge{margin:42px auto 0;max-width:720px;text-align:center;font-size:1rem;color:var(--muted);border-top:1px solid var(--stone);padding-top:28px} .results-badge span{display:block;font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--terracotta);font-weight:600;margin-bottom:10px} .results-badge b{color:var(--ink);font-family:var(--serif);font-size:1.35rem;font-weight:600} @media(max-width:760px){ .films{grid-template-columns:1fr 1fr;gap:12px} .films .film:nth-child(3){display:none} /* mobile: show only the first 2 videos */ .gallery{columns:2 140px;column-gap:12px} .shot figcaption{opacity:1;transform:none} } @media(max-width:440px){.films{grid-template-columns:1fr;max-width:360px}}