/* ═══════════════════════════════════════════════════════════════════════ BLINGS ET'AL shared stylesheet for index.html and shop.html Palette is taken off their real shop: purple walls, mustard shelving, and the purple/yellow signboard above the door at Bengate Plaza. ═══════════════════════════════════════════════════════════════════════ */ :root{ --ink:#1C0E24; /* deep plum-black */ --ink-2:#26122F; --ink-3:#32173D; /* raised surface */ --plum:#4B1C62; /* their wall */ --plum-lt:#6B2B8A; --gold:#E3AE33; /* their shelving */ --gold-lt:#F3D07C; --bone:#F8F3EA; --bone-2:#EFE6D8; --mute:rgba(248,243,234,.52); --mute-2:rgba(248,243,234,.18); --line:rgba(248,243,234,.13); --serif:'Instrument Serif',Georgia,'Times New Roman',serif; --sans:'DM Sans',system-ui,-apple-system,sans-serif; --e:cubic-bezier(.22,1,.36,1); --pad:1.35rem; --r:14px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ font-family:var(--sans);font-size:16px;line-height:1.68;font-weight:300; background:var(--ink);color:var(--bone); overflow-x:hidden;-webkit-font-smoothing:antialiased; } body.lock{overflow:hidden} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} ::selection{background:var(--gold);color:var(--ink)} h1,h2,h3,h4{font-weight:400;line-height:1.02;letter-spacing:-.02em;font-family:var(--serif)} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} .wrap{padding-left:var(--pad);padding-right:var(--pad)} section{padding:4.6rem 0} .eyebrow{ font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500; color:var(--gold);display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem; flex-wrap:wrap; } .eyebrow::before{content:'';width:22px;height:1px;background:var(--gold);flex:none} .h2{font-size:2.65rem;letter-spacing:-.03em} .h2 em{font-style:italic;color:var(--gold-lt)} .lede{color:var(--mute);margin-top:1rem;max-width:44ch;font-size:1rem} [data-rv]{opacity:0;transform:translateY(26px);transition:opacity .85s var(--e),transform .85s var(--e)} [data-rv].in{opacity:1;transform:none} /* ── buttons ──────────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; min-height:50px;padding:.85rem 1.5rem;border-radius:100px; font-size:.82rem;font-weight:500;letter-spacing:.02em; transition:transform .4s var(--e),background .3s,color .3s,border-color .3s; } .btn:active{transform:scale(.96)} .btn-p{background:var(--gold);color:var(--ink);font-weight:700} .btn-o{border:1px solid var(--mute-2);color:var(--bone)} .btn-o:hover{border-color:var(--gold);color:var(--gold)} .btn-w{background:#25D366;color:#08321a;font-weight:700} .btn svg{width:16px;height:16px;flex:none} /* ── self-healing photo slot ──────────────────────────────────────────── */ .slot{ position:relative;overflow:hidden;background:var(--ink-3); display:flex;align-items:center;justify-content:center;isolation:isolate; } .slot::before{ content:'';position:absolute;inset:0;z-index:1; background: radial-gradient(90% 70% at 50% 0%,rgba(107,43,138,.55),transparent 70%), repeating-linear-gradient(135deg,rgba(248,243,234,.035) 0 1px,transparent 1px 9px); } .slot::after{ content:attr(data-slot);position:absolute;left:.7rem;right:.7rem;bottom:.65rem;z-index:3; font-size:.53rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute); text-align:center;line-height:1.5; } .slot .mono{ position:relative;z-index:3;font-family:var(--serif);font-size:2rem; color:var(--gold);letter-spacing:-.04em; } /* While a photo is still downloading the slot is just a quiet tile. The monogram, the texture and the filename caption only appear once the image has actually FAILED (.empty, set by its onerror), so a slow connection never flashes "P4.JPG" at a client mid-demo. */ .slot::before,.slot::after,.slot .mono,.slot .art{opacity:0;transition:opacity .25s ease} .slot.empty::before,.slot.empty .art{opacity:1} .slot.empty::after{opacity:1} .slot.empty .mono{opacity:.6} /* An image stays invisible until it has actually decoded. Between a .jpg 404 and the .webp retry the browser would otherwise paint alt text in a broken image box, the one thing a placeholder must never do. */ .slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:4;opacity:0} .slot.filled img{opacity:1} .slot.filled::before,.slot.filled::after,.slot.filled .mono{display:none} /* ── header ───────────────────────────────────────────────────────────── */ header{ position:fixed;top:0;left:0;right:0;z-index:120; padding:1rem var(--pad); display:flex;align-items:center;justify-content:space-between;gap:.6rem; transition:background .45s var(--e),padding .45s var(--e),box-shadow .45s; } header.stuck{ background:rgba(28,14,36,.94);padding:.6rem var(--pad); box-shadow:0 1px 0 var(--line); } @supports(backdrop-filter:blur(1px)){header.stuck{backdrop-filter:blur(14px)}} .brand{display:flex;align-items:center;gap:.6rem;min-height:44px} /* Their real wordmark is purple ink, so it sits on a bone chip to stay legible */ .brand .bmark{ height:38px;padding:0 .5rem;border-radius:9px;flex:none;position:relative;overflow:hidden; background:var(--bone);display:grid;place-items:center;min-width:38px; font-family:var(--serif);font-size:1.15rem;color:var(--plum); } .brand .bmark img{height:26px;width:auto;position:relative;opacity:0} .brand .bmark img.ok{opacity:1} .brand .bmark img.ok + .fallback,.brand .bmark img.ok ~ .fallback{display:none} .brand-txt b{display:block;font-family:var(--serif);font-size:1.12rem;font-weight:400;letter-spacing:-.01em;line-height:1} .brand-txt small{display:block;font-size:.44rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:.25rem} .hd-act{display:flex;align-items:center;gap:.35rem} .icb{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;position:relative; transition:background .3s} .icb:hover{background:rgba(248,243,234,.07)} .icb svg{width:21px;height:21px;stroke:var(--bone);stroke-width:1.5;fill:none} .cart-n{ position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px; background:var(--gold);color:var(--ink);border-radius:100px; font-size:.6rem;font-weight:700;display:grid;place-items:center;line-height:1; transform:scale(0);transition:transform .35s var(--e);font-style:normal; } .cart-n.on{transform:scale(1)} .navlinks{display:none} /* ── mobile menu ────────────────────────────────────────────────────────── Driven by a hidden checkbox, so it opens and closes on CSS alone. If app.js never runs (slow CDN, 404, script error, JS off) the menu still works. The script only adds niceties: scroll lock, Escape, and closing on link tap. */ .nav-toggle{ position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } .menu-btn{cursor:pointer} .menu-btn i{display:block;width:19px;height:1.5px;background:var(--bone);position:relative;transition:.4s var(--e)} .menu-btn i::before,.menu-btn i::after{ content:'';position:absolute;left:0;width:19px;height:1.5px;background:var(--bone);transition:.4s var(--e)} .menu-btn i::before{top:-6px}.menu-btn i::after{top:6px} #navToggle:checked ~ header .menu-btn i{background:transparent} #navToggle:checked ~ header .menu-btn i::before{top:0;transform:rotate(45deg)} #navToggle:checked ~ header .menu-btn i::after{top:0;transform:rotate(-45deg)} /* the real control is the visually hidden checkbox, so show its focus ring on the thing the user can actually see */ #navToggle:focus-visible ~ header .menu-btn{ outline:2px solid var(--gold);outline-offset:3px;border-radius:12px} #nav{ position:fixed;top:0;left:0;right:0;z-index:115; background:var(--ink-2);padding:5.4rem var(--pad) 2.2rem; transform:translateY(-101%);transition:transform .6s var(--e); border-bottom:1px solid var(--line); } #navToggle:checked ~ #nav{transform:none} #nav a{ display:flex;align-items:baseline;gap:.7rem; font-family:var(--serif);font-size:2rem;padding:.42rem 0; opacity:0;transform:translateY(14px);transition:opacity .5s var(--e),transform .5s var(--e),color .25s; } #navToggle:checked ~ #nav a{opacity:1;transform:none} /* stagger in CSS rather than from script, so it survives without JS */ #navToggle:checked ~ #nav a:nth-of-type(1){transition-delay:.10s} #navToggle:checked ~ #nav a:nth-of-type(2){transition-delay:.155s} #navToggle:checked ~ #nav a:nth-of-type(3){transition-delay:.21s} #navToggle:checked ~ #nav a:nth-of-type(4){transition-delay:.265s} #navToggle:checked ~ #nav a:nth-of-type(5){transition-delay:.32s} #nav a:hover{color:var(--gold)} #nav a span{font-family:var(--sans);font-size:.56rem;color:var(--gold);letter-spacing:.14em} .nav-foot{margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--line); font-size:.72rem;color:var(--mute);letter-spacing:.04em} .nav-foot a{font-size:.72rem!important;padding:0!important;font-family:var(--sans)!important;color:var(--gold)} /* ── hero ─────────────────────────────────────────────────────────────── */ .hero{ position:relative;min-height:100svh;display:flex;flex-direction:column; justify-content:flex-end;padding:7rem var(--pad) 2.4rem;overflow:hidden; } .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg .slot{position:absolute;inset:0} /* Two layers: a vertical gradient for the copy, plus a flat wash so the headline stays readable over a very busy shop photo on a cheap screen. */ .hero-bg::after{ content:'';position:absolute;inset:0;z-index:5; background: linear-gradient(180deg,rgba(28,14,36,.94) 0%,rgba(28,14,36,.55) 30%, rgba(28,14,36,.96) 68%,var(--ink) 93%), rgba(28,14,36,.28); } /* scrim behind the transparent header so nav links stay legible on the photo */ header::before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(28,14,36,.75),transparent); transition:opacity .45s var(--e); } header.stuck::before{opacity:0} .hero-in{position:relative;z-index:6} .hero h1{font-size:3.5rem;letter-spacing:-.035em;line-height:.95} .hero h1 .ln{display:block;overflow:hidden} .hero h1 .ln>span{display:block;transform:translateY(105%);transition:transform 1s var(--e)} .hero.go h1 .ln>span{transform:none} .hero h1 .ln:nth-child(2)>span{transition-delay:.1s} .hero h1 .ln:nth-child(3)>span{transition-delay:.2s} .hero h1 em{font-style:italic;color:var(--gold-lt)} .hero-sub{ margin-top:1.25rem;max-width:36ch;color:var(--mute);font-size:1.02rem; opacity:0;transform:translateY(16px);transition:opacity .8s var(--e) .45s,transform .8s var(--e) .45s; } .hero.go .hero-sub{opacity:1;transform:none} .hero-cta{ display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem; opacity:0;transform:translateY(16px);transition:opacity .8s var(--e) .6s,transform .8s var(--e) .6s; } .hero.go .hero-cta{opacity:1;transform:none} .hero-rate{ display:flex;align-items:center;gap:.55rem;margin-top:1.6rem;font-size:.78rem;color:var(--mute); opacity:0;transition:opacity .8s var(--e) .8s;flex-wrap:wrap; } .hero.go .hero-rate{opacity:1} .hero-rate b{font-weight:500;color:var(--bone)} .stars{color:var(--gold);letter-spacing:.12em;font-size:.8rem} .dot-sep{width:3px;height:3px;border-radius:50%;background:var(--mute);flex:none} /* page banner (shop.html) Only touch the vertical padding. A `padding` shorthand here would beat .wrap on source order and zero out the horizontal gutter, which lets the full-bleed filter row overshoot the viewport on mobile. */ .pbanner{padding-top:8rem;padding-bottom:2.4rem;position:relative} .pbanner h1{font-size:3rem;letter-spacing:-.03em} .pbanner h1 em{font-style:italic;color:var(--gold-lt)} /* marquee */ .mq{border-top:1px solid var(--line);border-bottom:1px solid var(--line); overflow:hidden;padding:.85rem 0;background:var(--ink-2)} .mq-t{display:flex;width:max-content;animation:mq 30s linear infinite} .mq-t span{ font-family:var(--serif);font-size:1.35rem;padding:0 1.5rem;white-space:nowrap;color:var(--bone-2); display:flex;align-items:center;gap:1.5rem} .mq-t span::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none} @keyframes mq{to{transform:translateX(-50%)}} /* ── category tiles ───────────────────────────────────────────────────── */ .cats{display:grid;gap:.65rem;margin-top:2.2rem} .cat{ position:relative;border:1px solid var(--line);border-radius:var(--r); padding:1.35rem 1.2rem;overflow:hidden;background:var(--ink-2); display:flex;align-items:center;gap:1rem;min-height:104px; transition:border-color .4s,transform .4s var(--e),background .4s; width:100%;text-align:left; } .cat:hover{border-color:rgba(227,174,51,.45);background:var(--ink-3)} .cat:active{transform:scale(.985)} .cat-ic{width:56px;height:56px;flex:none;position:relative} .cat h3{font-size:1.55rem;line-height:1} .cat p{font-size:.78rem;color:var(--mute);margin-top:.25rem;line-height:1.5} .cat .go{ margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%; border:1px solid var(--mute-2);display:grid;place-items:center;color:var(--gold);font-size:.8rem; transition:background .3s,color .3s} .cat:hover .go{background:var(--gold);color:var(--ink);border-color:var(--gold)} /* ── product grid ─────────────────────────────────────────────────────── */ .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:1.4rem} .card{ border:1px solid var(--line);border-radius:var(--r);overflow:hidden; background:var(--ink);display:flex;flex-direction:column; transition:opacity .45s var(--e),transform .45s var(--e),border-color .35s; } .card.hide{display:none} .card.out{opacity:0;transform:scale(.96)} .card:hover{border-color:rgba(227,174,51,.38)} .card-top{position:relative;aspect-ratio:1;overflow:hidden;background:var(--ink-3)} /* card-top supplies the quiet tile colour, so the slot itself stays clear while its photo downloads */ .card-top .slot{position:absolute;inset:0;background:transparent} .card-top .slot::after{left:.4rem;right:.4rem;bottom:.35rem;font-size:.45rem;letter-spacing:.1em} .card-top .slot.empty::after{opacity:.55} .card-body{padding:.8rem .8rem 1rem;display:flex;flex-direction:column;flex:1;gap:.15rem} .card-cat{font-size:.53rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:500} .card h4{font-family:var(--sans);font-size:.87rem;font-weight:500;line-height:1.3;letter-spacing:0} .card .price{font-size:.76rem;color:var(--mute);margin-top:.2rem;margin-bottom:.75rem} .card .price.set{color:var(--bone);font-weight:500} .add{ /* auto pushes the button to the card floor so a two-line product name never leaves one card's button hanging above its neighbour's */ margin-top:auto;min-height:44px;width:100%;border-radius:10px; border:1px solid var(--mute-2);font-size:.75rem;font-weight:500; display:flex;align-items:center;justify-content:center;gap:.4rem; transition:background .3s,color .3s,border-color .3s; } .add:hover{border-color:var(--gold);color:var(--gold)} .add.done{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:700} .shop-note{ margin-top:1.5rem;padding:1rem 1.1rem;border:1px dashed var(--mute-2);border-radius:var(--r); font-size:.8rem;color:var(--mute);line-height:1.6;display:flex;gap:.7rem;align-items:flex-start} .shop-note b{color:var(--gold);font-weight:500} .viewall{display:flex;justify-content:center;margin-top:1.6rem} .viewall .btn{min-width:min(100%,320px)} /* ── shop page: search + filters + sort ───────────────────────────────── */ .tools{margin-top:1.6rem} .searchbar{position:relative;display:flex;align-items:center} .searchbar svg{position:absolute;left:1rem;width:18px;height:18px;stroke:var(--mute); stroke-width:1.6;fill:none;pointer-events:none} #q{ width:100%;min-height:54px;background:var(--ink-2);border:1px solid var(--mute-2); border-radius:100px;padding:.9rem 3rem .9rem 2.9rem;font-size:.95rem; transition:border-color .3s} #q:focus{outline:none;border-color:var(--gold)} #q::placeholder{color:rgba(248,243,234,.34)} .qclear{ position:absolute;right:.5rem;width:40px;height:40px;border-radius:50%; display:none;place-items:center;color:var(--mute);font-size:1.1rem} .qclear.on{display:grid} .qclear:hover{color:var(--gold)} .filters{ display:flex;gap:.45rem;overflow-x:auto;margin:1rem calc(var(--pad)*-1) 0; padding:0 var(--pad) .5rem;scrollbar-width:none;-webkit-overflow-scrolling:touch} .filters::-webkit-scrollbar{display:none} .chip{ flex:none;min-height:44px;padding:.6rem 1.1rem;border-radius:100px; border:1px solid var(--mute-2);font-size:.78rem;white-space:nowrap;color:var(--mute); transition:background .3s,color .3s,border-color .3s} .chip.on{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:700} .resbar{ display:flex;align-items:center;justify-content:space-between;gap:1rem; margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);flex-wrap:wrap} .rescount{font-size:.78rem;color:var(--mute)} .rescount b{color:var(--bone);font-weight:500} .sortwrap{display:flex;align-items:center;gap:.5rem} .sortwrap label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)} #sort{ min-height:44px;background:var(--ink-2);border:1px solid var(--mute-2); border-radius:10px;padding:.5rem 2rem .5rem .8rem;font-size:.8rem;cursor:pointer; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%), linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px,5px 5px;background-repeat:no-repeat} #sort:focus{outline:none;border-color:var(--gold)} #sort option{background:var(--ink-2);color:var(--bone)} .nores{ display:none;text-align:center;padding:4rem 1rem;color:var(--mute);font-size:.9rem;line-height:1.7} .nores.on{display:block} .nores h3{font-size:1.9rem;color:var(--bone);margin-bottom:.6rem} .nores .btn{margin-top:1.3rem} /* ── CSS-drawn fallback art (shows only if a photo is missing) ────────── */ /* Lives inside .slot, which is `isolation:isolate`, so art and photo share one stacking context: art at 0, photo at 4. The photo always wins, and the art is only ever revealed by .slot.empty. */ .art{position:absolute;inset:0;z-index:0;display:grid;place-items:center} .art::before{content:'';position:absolute;inset:0; background:radial-gradient(72% 58% at 50% 42%,rgba(107,43,138,.5),transparent 72%)} .fig{position:relative;width:74px;height:74px} .fig i,.fig b,.fig u{position:absolute;display:block;border-style:solid;border-color:transparent} .a-candle i{left:19px;bottom:4px;width:36px;height:38px;background:var(--bone-2);border-radius:4px 4px 6px 6px} .a-candle b{left:29px;bottom:42px;width:16px;height:9px;background:#d9cdb8;border-radius:50%} .a-candle u{left:34px;bottom:47px;width:6px;height:14px;background:var(--gold); border-radius:50%;box-shadow:0 0 12px rgba(227,174,51,.7)} .a-vase i{left:31px;top:4px;width:12px;height:24px;background:var(--bone-2);border-radius:2px} .a-vase b{left:16px;bottom:4px;width:42px;height:48px;background:var(--bone-2); border-radius:44% 44% 38% 38%/54% 54% 46% 46%} .a-vase u{left:26px;top:2px;width:22px;height:7px;background:var(--bone-2);border-radius:50%} .a-gift i{left:11px;bottom:8px;width:52px;height:36px;background:var(--plum-lt);border-radius:4px} .a-gift b{left:11px;bottom:38px;width:52px;height:13px;background:var(--gold);border-radius:4px} .a-gift u{left:32px;bottom:8px;width:10px;height:43px;background:var(--gold-lt)} .a-gift::after{content:'';position:absolute;left:23px;bottom:47px;width:28px;height:14px; border:4px solid var(--gold);border-radius:50% 50% 0 0/100% 100% 0 0} .a-hoop i{left:6px;top:18px;width:32px;height:32px;border:4px solid #D6D8DC;border-radius:50%} .a-hoop b{left:34px;top:30px;width:32px;height:32px;border:4px solid #EDEFF2;border-radius:50%} .a-snake i{left:20px;bottom:2px;width:34px;height:22px;background:#B9663A;border-radius:2px 2px 7px 7px} .a-snake b{left:29px;bottom:20px;width:7px;height:48px;background:#3F7A46;border-radius:50% 50% 0 0; transform:rotate(-9deg);transform-origin:bottom} .a-snake u{left:39px;bottom:20px;width:7px;height:42px;background:#4F9256;border-radius:50% 50% 0 0; transform:rotate(11deg);transform-origin:bottom} .a-snake::after{content:'';position:absolute;left:34px;bottom:20px;width:6px;height:52px; background:#5CA463;border-radius:50% 50% 0 0} .a-ficus i{left:22px;bottom:2px;width:30px;height:21px;background:#B9663A;border-radius:2px 2px 7px 7px} .a-ficus b{left:34px;bottom:20px;width:5px;height:30px;background:#5B4630} .a-ficus u{left:12px;bottom:32px;width:50px;height:34px;background:#3F7A46; border-radius:52% 52% 46% 46%/62% 62% 38% 38%} .a-ficus::after{content:'';position:absolute;left:24px;bottom:44px;width:26px;height:20px; background:#5CA463;border-radius:50%} .cat-ic .fig{width:56px;height:56px;transform:scale(.78);transform-origin:center} /* ── bag drawer ───────────────────────────────────────────────────────── */ .scrim{position:fixed;inset:0;z-index:190;background:rgba(10,4,14,.72); opacity:0;pointer-events:none;transition:opacity .45s var(--e)} .scrim.on{opacity:1;pointer-events:auto} #cart{ position:fixed;top:0;right:0;bottom:0;z-index:200;width:min(410px,90vw); background:var(--ink-2);border-left:1px solid var(--line); transform:translateX(101%);transition:transform .55s var(--e); display:flex;flex-direction:column} #cart.on{transform:none} .cart-hd{padding:1.15rem var(--pad);border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;flex:none} .cart-hd h3{font-size:1.5rem} .cart-body{flex:1;overflow-y:auto;padding:1rem var(--pad)} .cart-empty{text-align:center;padding:3.5rem .5rem;color:var(--mute);font-size:.88rem} .cart-empty .fig{margin:0 auto 1.2rem;opacity:.5} .ci{display:flex;gap:.8rem;padding:.85rem 0;border-bottom:1px solid var(--line)} .ci-art{width:58px;height:58px;flex:none;border-radius:9px;overflow:hidden;position:relative;background:var(--ink-3)} .ci-art .fig{transform:scale(.62)} .ci-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:4;opacity:0} .ci-art img.ok{opacity:1} .ci-in{flex:1;min-width:0} .ci-in h5{font-size:.84rem;font-weight:500;line-height:1.35} .ci-in .p{font-size:.74rem;color:var(--mute);margin-top:.1rem} .qty{display:flex;align-items:center;gap:.2rem;margin-top:.45rem} .qty button{width:32px;height:32px;border-radius:8px;border:1px solid var(--mute-2); display:grid;place-items:center;font-size:.9rem;line-height:1; transition:border-color .25s,color .25s} .qty button:hover{border-color:var(--gold);color:var(--gold)} .qty span{min-width:30px;text-align:center;font-size:.8rem;font-weight:500} .ci-rm{margin-left:auto;font-size:.68rem;color:var(--mute);text-decoration:underline;align-self:flex-start; min-height:44px;display:flex;align-items:flex-start;padding-top:.1rem} .ci-rm:hover{color:var(--gold)} .cart-ft{padding:1.1rem var(--pad) calc(1.1rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line);flex:none;background:var(--ink-3)} .cart-tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.85rem;gap:1rem} .cart-tot span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)} .cart-tot b{font-family:var(--serif);font-size:1.5rem;font-weight:400;text-align:right} .cart-ft .btn{width:100%} .cart-ft small{display:block;text-align:center;margin-top:.65rem;font-size:.68rem;color:var(--mute);line-height:1.5} .cf-in{width:100%;min-height:48px;background:var(--ink);border:1px solid var(--mute-2); border-radius:10px;padding:.7rem .9rem;font-size:.85rem;margin-bottom:.6rem} .cf-in::placeholder{color:rgba(248,243,234,.32)} .cf-in:focus{outline:none;border-color:var(--gold)} /* ── gift box builder ─────────────────────────────────────────────────── */ .gb{background:linear-gradient(175deg,var(--plum) 0%,var(--ink-2) 62%)} .gb-shell{margin-top:2rem;border:1px solid rgba(248,243,234,.16);border-radius:20px; background:rgba(28,14,36,.62);overflow:hidden} @supports(backdrop-filter:blur(1px)){.gb-shell{backdrop-filter:blur(8px)}} .gb-bar{display:flex;gap:.3rem;padding:1rem var(--pad) 0} .gb-bar i{flex:1;height:3px;border-radius:2px;background:var(--mute-2);overflow:hidden;position:relative} .gb-bar i::after{content:'';position:absolute;inset:0;background:var(--gold); transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e)} .gb-bar i.on::after{transform:none} .gb-step{padding:1.3rem var(--pad) 1.5rem;display:none} .gb-step.on{display:block;animation:fade .5s var(--e)} @keyframes fade{from{opacity:0;transform:translateY(12px)}} .gb-n{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem} .gb-step h3{font-size:1.85rem;line-height:1.05} .gb-step p.sub{font-size:.82rem;color:var(--mute);margin-top:.4rem} .opts{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-top:1.1rem} .opt{min-height:52px;padding:.75rem .85rem;border-radius:11px;border:1px solid var(--mute-2); font-size:.8rem;text-align:left;line-height:1.35; transition:background .3s,border-color .3s,color .3s;display:flex;align-items:center;gap:.5rem} .opt:hover{border-color:rgba(227,174,51,.5)} .opt.on{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:700} .opt.wide{grid-column:1/-1} .gb-in{width:100%;background:rgba(28,14,36,.75);border:1px solid var(--mute-2);border-radius:11px; padding:.85rem .95rem;font-size:.9rem;margin-top:.7rem;min-height:50px} .gb-in:focus{outline:none;border-color:var(--gold)} .gb-in::placeholder{color:rgba(248,243,234,.3)} textarea.gb-in{min-height:86px;resize:vertical;line-height:1.55} .gb-nav{display:flex;gap:.5rem;margin-top:1.3rem} .gb-nav .btn{flex:1} .gb-back{flex:0 0 auto!important;width:52px;padding:0!important} .box{position:relative;width:150px;height:120px;margin:.4rem auto 1.2rem} .box-lid{position:absolute;left:0;top:14px;width:150px;height:24px;border-radius:5px; background:linear-gradient(180deg,var(--gold-lt),var(--gold));z-index:6; transition:transform .6s var(--e);transform-origin:center bottom} .box.open .box-lid{transform:translateY(-26px) rotate(-7deg)} .box-bow{position:absolute;left:59px;top:-4px;width:32px;height:18px;z-index:7; border:5px solid var(--gold);border-radius:50% 50% 0 0/100% 100% 0 0;border-bottom:0; transition:transform .6s var(--e)} .box.open .box-bow{transform:translateY(-26px) rotate(-7deg)} .box-b{position:absolute;left:6px;top:36px;width:138px;height:80px;border-radius:5px; background:linear-gradient(180deg,var(--plum-lt),var(--plum));z-index:5; box-shadow:inset 0 8px 18px rgba(10,4,14,.42)} /* pips sit just above the rim so they read as items standing IN the open box: .box-b (z5) crops their base, the lifted lid (z6) their top */ .box-fill{position:absolute;left:10px;right:10px;top:-4px;height:44px;z-index:4; display:flex;flex-wrap:wrap;align-content:flex-end;justify-content:center;gap:3px} .pip{width:26px;height:26px;border-radius:7px;background:rgba(248,243,234,.13); border:1px solid rgba(227,174,51,.42);position:relative;overflow:hidden; animation:pop .45s var(--e) backwards} .pip .fig{transform:scale(.35)} @keyframes pop{from{transform:translateY(-26px) scale(.4);opacity:0}} .box-cnt{text-align:center;font-size:.72rem;color:var(--mute);letter-spacing:.1em;text-transform:uppercase} .recap{margin-top:1.1rem;border:1px solid var(--mute-2);border-radius:13px;overflow:hidden} .recap .r{display:flex;gap:.9rem;padding:.7rem .95rem;border-bottom:1px solid var(--line);font-size:.85rem} .recap .r:last-child{border-bottom:0} .recap .r span{flex:0 0 88px;color:var(--mute);font-size:.66rem;letter-spacing:.11em; text-transform:uppercase;padding-top:.22rem} .recap .r b{font-weight:400;flex:1;line-height:1.5} .recap .r b.em{font-family:var(--serif);font-size:1.05rem} /* ── plants / gallery / reviews / visit ───────────────────────────────── */ .plants-q{margin-top:1.6rem;font-family:var(--serif);font-size:1.5rem;line-height:1.25;color:var(--gold-lt); border-left:2px solid var(--gold);padding-left:1rem;font-style:italic} .plants-q cite{display:block;font-family:var(--sans);font-style:normal;font-size:.62rem; letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:.7rem} .gal{display:grid;gap:.55rem;grid-template-columns:repeat(2,1fr);margin-top:1.7rem} .gal .slot{aspect-ratio:1;border-radius:12px} .gal .slot.wide{grid-column:1/-1;aspect-ratio:16/11} .rev{background:var(--ink-2)} .score{display:flex;align-items:center;gap:1.1rem;margin-top:1.6rem;padding:1.2rem 1.3rem; border:1px solid var(--line);border-radius:var(--r);background:var(--ink)} .score .n{font-family:var(--serif);font-size:3.2rem;line-height:.85;color:var(--gold)} .score .m .stars{font-size:1rem} .score .m p{font-size:.78rem;color:var(--mute);margin-top:.25rem} .quotes{display:grid;gap:.65rem;margin-top:.9rem} .q{border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.25rem;background:var(--ink)} .q blockquote{font-family:var(--serif);font-size:1.2rem;line-height:1.4;letter-spacing:-.01em} .q footer{margin-top:.85rem;display:flex;align-items:center;gap:.6rem; font-size:.72rem;color:var(--mute);letter-spacing:.06em} .q footer i{width:26px;height:26px;border-radius:50%;background:var(--plum);flex:none; display:grid;place-items:center;font-style:normal;font-size:.72rem;color:var(--gold-lt);font-family:var(--serif)} .visit-card{margin-top:1.7rem;border:1px solid var(--line);border-radius:var(--r); overflow:hidden;background:var(--ink-2)} .visit-card .slot{aspect-ratio:4/5} .rows{padding:.3rem 1.2rem 1.2rem} .row{display:flex;gap:.9rem;padding:.95rem 0;border-bottom:1px solid var(--line);align-items:flex-start} .row:last-child{border-bottom:0} .row .k{flex:0 0 74px;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);padding-top:.3rem} .row .v{flex:1;font-size:.95rem;line-height:1.6} .row .v small{display:block;font-size:.8rem;color:var(--mute);margin-top:.15rem} .row .v a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold)} .open-now{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;color:#6EE7A0} .open-now i{width:6px;height:6px;border-radius:50%;background:#6EE7A0; box-shadow:0 0 0 3px rgba(110,231,160,.18)} .open-now.shut{color:var(--mute)} .open-now.shut i{background:var(--mute);box-shadow:none} /* ── footer ─────────────────────────────────────────────────────────────── Scoped to the page footer only. As a bare `footer` type selector this also hit the