/* ========================================================================== GIFT ZONE — London gift shop · Webukit-integrated storefront Design system: navy #0C2454 · British red #C8102E · butter yellow · rectangular ========================================================================== */ :root{ /* ── core palette (sampled from the brand logo) ── */ --navy:#0C2454; /* brand navy "GIFT" — primary ground */ --navy-900:#081A3D; /* deepest navy */ --navy-800:#102C63; /* raised navy */ --navy-700:#1A3C86; /* lightened navy */ --navy-600:#254CA6; --red:#C8102E; /* British red "ZONE" — primary accent */ --red-2:#E11B37; --red-600:#A50C24; --red-dark:#7C1220; /* partnerships ground */ --red-deep:#5A0D18; --butter:#F3DE9A; /* butter yellow */ --butter-2:#EBCB63; /* deeper butter */ --butter-pastel:#FBF3D6; /* wholesale ground (light pastel) */ --butter-ink:#5A4B12; /* readable text on butter */ --cream:#F7F4EC; --gold:#E7B324; /* ── surfaces ── */ --bg:#FFFFFF; --paper:#FFFFFF; --tile:#F1F4FA; /* cool off-white tile */ --ink:#0C1A33; /* body ink on light */ --muted:#5B6A88; --line:rgba(12,26,51,.13); --line-2:rgba(12,26,51,.07); /* ── CTA channel colours ── */ --rev-yellow:#F4B400; --fb-cyan:#1CA0E3; --call-green:#25D366; /* ── type ── */ --f-disp:'Archivo','Arial Narrow',system-ui,sans-serif; /* headings / nav / buttons / prices */ --f-body:'Inter',system-ui,-apple-system,sans-serif; /* body copy */ /* ── rhythm — deliberately rectangular ── */ --wrap:1220px; --r:4px; --r-lg:6px; --btn-r:2px; --sh:0 6px 22px rgba(12,26,51,.10); --sh-lg:0 20px 54px rgba(12,26,51,.20); --nav-h:72px; /* Union Jack (brand colours) — used by the shop loading animations */ --uk-flag:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2040%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%2260%22%20height%3D%2240%22%20fill%3D%22%230C2454%22%2F%3E%3Cg%20stroke%3D%22%23F7F4EC%22%20stroke-width%3D%229%22%3E%3Cpath%20d%3D%22M0%200%2060%2040M60%200%200%2040%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23C8102E%22%20stroke-width%3D%223.8%22%3E%3Cpath%20d%3D%22M0%200%2060%2040M60%200%200%2040%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23F7F4EC%22%20stroke-width%3D%2211%22%3E%3Cpath%20d%3D%22M30%200V40M0%2020H60%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23C8102E%22%20stroke-width%3D%226.5%22%3E%3Cpath%20d%3D%22M30%200V40M0%2020H60%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } *{box-sizing:border-box} /* overflow-x on (not body) clips sideways bleed WITHOUT making a scroll container — otherwise window scrolling / scrollIntoView (#links) break */ html{scroll-behavior:smooth;overflow-x:hidden} body{ margin:0;font-family:var(--f-body);color:var(--ink);background:var(--bg); font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--f-disp);font-weight:800;line-height:1.02;margin:0;letter-spacing:-.01em} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .eyebrow{font-family:var(--f-disp);font-weight:700;text-transform:uppercase;letter-spacing:.22em; font-size:.76rem;color:var(--red);display:inline-flex;align-items:center;gap:9px} .eyebrow::before{content:'';width:26px;height:2px;background:var(--red)} .eyebrow.on-dark{color:var(--butter)} .eyebrow.on-dark::before{background:var(--butter)} .sec{padding:82px 0;position:relative} .sec-head{max-width:760px;margin:0 auto 46px;text-align:center} .sec-head h2{font-size:clamp(1.9rem,4.4vw,3rem);text-transform:uppercase} .sec-head p{color:var(--muted);font-size:1.06rem;margin:16px 0 0} .sec-head.on-dark h2{color:#fff} .sec-head.on-dark p{color:rgba(255,255,255,.8)} .ms{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 40;-webkit-font-feature-settings:'liga'; vertical-align:middle;user-select:none} /* ── buttons ─────────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;border:0; font-family:var(--f-disp);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem; padding:14px 26px;border-radius:var(--btn-r);transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease; white-space:nowrap;line-height:1} .btn .ms{font-size:1.25em} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn-red{background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(200,16,46,.34)} .btn-red:hover{background:var(--red-2)} .btn-navy{background:var(--navy);color:#fff;box-shadow:0 8px 20px rgba(12,36,84,.3)} .btn-navy:hover{background:var(--navy-800)} .btn-white{background:#fff;color:var(--navy)} .btn-white:hover{background:var(--cream)} .btn-butter{background:var(--butter-2);color:var(--navy)} .btn-butter:hover{background:var(--butter)} .btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)} .btn-ghost:hover{background:rgba(255,255,255,.12)} .btn-ghost-navy{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)} .btn-ghost-navy:hover{background:var(--navy);color:#fff} .btn-lg{padding:17px 34px;font-size:1.02rem} .btn-block{width:100%} /* ── nav ─────────────────────────────────────────────────────────────────── */ .nav{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--nav-h); background:rgba(9,20,46,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.08);transition:background .25s ease} .nav.scrolled{background:var(--navy-900)} .nav-in{max-width:var(--wrap);margin:0 auto;height:100%;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px} .brand{display:flex;align-items:center;gap:11px} .brand img{height:42px;width:auto} .brand-txt{font-family:var(--f-disp);font-weight:800;font-size:1.24rem;letter-spacing:.02em;text-transform:uppercase;color:#fff;line-height:1} .brand-txt b{color:var(--red-2);font-weight:800} .nav-links{display:flex;align-items:center;gap:4px} .nav-links a{font-family:var(--f-disp);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.85rem; color:rgba(255,255,255,.82);padding:9px 14px;border-radius:var(--btn-r);transition:color .15s,background .15s} .nav-links a:hover{color:#fff;background:rgba(255,255,255,.09)} /* desktop "Categories" dropdown — every category page reachable from the bar */ .drop-wrap{position:relative} .drop-t{display:flex;align-items:center;gap:3px} .drop-t .ms{font-size:1.05rem;transition:transform .18s} .drop-wrap:hover .drop-t .ms{transform:rotate(180deg)} .drop{position:absolute;top:100%;left:0;min-width:268px;background:#fff;border-radius:var(--r);box-shadow:var(--sh-lg); padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;border-top:3px solid var(--red)} .drop-wrap:hover .drop{opacity:1;visibility:visible;transform:translateY(0)} .drop a{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--f-disp);font-weight:600; text-transform:none;letter-spacing:0;font-size:.88rem;padding:9px 11px;border-radius:var(--btn-r)} .drop a:hover{background:var(--tile);color:var(--red)} .drop a .ms{font-size:1.15rem;color:var(--red)} .drop a i{margin-left:auto;font-style:normal;font-size:.74rem;color:var(--muted);font-weight:700} .drop-all{border-top:1px solid var(--line-2);margin-top:4px;color:var(--navy)!important} .nav-cta{display:flex;align-items:center;gap:10px} .hamb{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:6px} .hamb .ms{font-size:2rem} /* mobile drawer */ .scrim{position:fixed;inset:0;background:rgba(6,14,32,.55);backdrop-filter:blur(3px);z-index:90;opacity:0;visibility:hidden;transition:.25s} .scrim.on{opacity:1;visibility:visible} .mob{position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);background:var(--navy-900);z-index:95; transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);padding:22px;display:flex;flex-direction:column;gap:6px;overflow-y:auto} .mob.on{transform:translateX(0)} .mob-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .mob-top img{height:38px} .mob-x{background:none;border:0;color:#fff;cursor:pointer} .mob-x .ms{font-size:1.9rem} .mob a{color:rgba(255,255,255,.92);font-family:var(--f-disp);font-weight:600;letter-spacing:.02em; font-size:.94rem;padding:11px 10px;border-radius:var(--btn-r);border-bottom:1px solid rgba(255,255,255,.07); display:flex;align-items:center;gap:11px} .mob a:hover{background:rgba(255,255,255,.08)} .mob a .ms{font-size:1.2rem;color:var(--butter);flex:none} .mob-lbl{font-family:var(--f-disp);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.66rem; color:var(--butter);margin:16px 0 6px;padding:0 10px} .mob-hero{background:var(--red);color:#fff!important;border:0!important;justify-content:center; font-weight:800;text-transform:uppercase;font-size:.92rem!important;padding:14px!important;margin-top:4px} .mob-hero .ms{color:#fff!important} .mob-cats{display:grid;grid-template-columns:1fr 1fr;gap:6px} .mob-cats a{flex-direction:column;align-items:flex-start;gap:3px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:10px 11px;position:relative} .mob-cats a .ms{font-size:1.3rem;color:var(--butter)} .mob-cats a b{font-size:.8rem;font-weight:700;line-height:1.15;text-transform:none;letter-spacing:0} .mob-cats a i{position:absolute;top:9px;right:10px;font-style:normal;font-size:.68rem;color:rgba(255,255,255,.55);font-weight:700} .mob-btns{margin-top:18px;display:flex;flex-direction:column;gap:8px} .mob-btns .btn{margin:0} /* ── hero (blurred cross-fading banner + navy overlay) ───────────────────── */ .hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center; overflow:hidden;margin-top:calc(var(--nav-h) * -1);padding:calc(var(--nav-h) + 30px) 22px 60px} .hero-slides{position:absolute;inset:0;z-index:0} .hero-slide{position:absolute;inset:0;background-size:cover;background-position:center; filter:blur(5px) saturate(1.05);transform:scale(1.1);opacity:0;transition:opacity 1.4s ease} .hero-slide.on{opacity:1} .hero-veil{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(9,20,46,.82) 0%,rgba(9,20,46,.76) 42%,rgba(9,20,46,.9) 100%)} .hero-veil::after{content:'';position:absolute;inset:0; background:radial-gradient(120% 80% at 50% 22%,transparent 40%,rgba(6,14,32,.5) 100%)} .hero-inner{position:relative;z-index:2;max-width:940px;animation:heroUp .9s cubic-bezier(.2,.7,.3,1) both} @keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .hero-logo{height:clamp(150px,23vw,238px);width:auto;margin:0 auto 22px;filter:drop-shadow(0 12px 30px rgba(0,0,0,.4))} .hero h1{font-size:clamp(2.3rem,6.2vw,4.2rem);color:#fff;text-transform:uppercase;line-height:.98} .hero h1 .zone{color:var(--red-2)} .hero-sub{color:rgba(255,255,255,.86);font-size:clamp(1.02rem,2.1vw,1.24rem);max-width:640px;margin:20px auto 0;line-height:1.55} .hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px} .hero-btns .btn{min-width:190px} .hero-badges{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:34px} .hero-badge{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.82);font-size:.86rem;font-weight:500} .hero-badge .ms{color:var(--butter);font-size:1.3rem} .hero-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:9px} .hero-dots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.4);cursor:pointer;transition:.3s} .hero-dots button.on{width:30px;background:var(--red-2)} .scroll-cue{position:absolute;bottom:22px;right:26px;z-index:3;color:rgba(255,255,255,.5);animation:bob 2s ease-in-out infinite} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}} /* ── "about the place" navy section: photo + 2x2 icon grid ───────────────── */ .place{background:linear-gradient(150deg,var(--navy) 0%,var(--navy-900) 100%);color:#fff;position:relative;overflow:hidden} .place::before{content:'';position:absolute;top:-140px;right:-120px;width:420px;height:420px; background:radial-gradient(circle,rgba(200,16,46,.22),transparent 70%);pointer-events:none} .place-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center;position:relative;z-index:1} .place-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg); border:1px solid rgba(255,255,255,.12);aspect-ratio:1080/1080} .place-photo img{width:100%;height:100%;object-fit:cover} .place-photo .tag{position:absolute;left:16px;bottom:16px;background:var(--red);color:#fff;font-family:var(--f-disp); font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;padding:8px 15px;border-radius:var(--btn-r); display:flex;align-items:center;gap:7px} .place-copy h2{font-size:clamp(1.9rem,4vw,2.8rem);text-transform:uppercase;color:#fff} .place-copy>p{color:rgba(255,255,255,.82);margin:16px 0 30px;max-width:520px} .icon2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .icon2 .cell{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);border-radius:var(--r); padding:22px 20px;transition:transform .18s,background .18s,border-color .18s} .icon2 .cell:hover{transform:translateY(-3px);background:rgba(255,255,255,.1);border-color:rgba(243,222,154,.4)} .icon2 .ic{width:50px;height:50px;border-radius:var(--r);display:grid;place-items:center;background:rgba(243,222,154,.16);margin-bottom:13px} .icon2 .ic .ms{font-size:1.7rem;color:var(--butter)} .icon2 h3{font-size:1.1rem;text-transform:uppercase;color:#fff;letter-spacing:.01em} .icon2 p{color:rgba(255,255,255,.7);font-size:.9rem;margin:6px 0 0;line-height:1.5} /* ── shop teaser (white): 6-category matrix + transparent tiles ──────────── */ .shopt{background:linear-gradient(180deg,#fff 0%,var(--tile) 100%)} .cat-matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .cat-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;box-shadow:0 2px 10px rgba(12,26,51,.05)} .cat-card:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--red)} .cat-strip{position:relative;height:150px;display:flex;align-items:flex-end;justify-content:center;gap:0; background:linear-gradient(180deg,var(--tile),#fff);overflow:hidden;padding:0 8px} .cat-strip .pcut{height:128px;width:auto;object-fit:contain;margin:0 -10px;filter:drop-shadow(0 8px 12px rgba(12,26,51,.16)); transition:transform .25s} .cat-strip .pcut:nth-child(1){transform:translateY(8px) rotate(-4deg) scale(.86);z-index:1} .cat-strip .pcut:nth-child(2){transform:translateY(-2px) scale(1.02);z-index:3} .cat-strip .pcut:nth-child(3){transform:translateY(8px) rotate(4deg) scale(.86);z-index:2} .cat-card:hover .cat-strip .pcut:nth-child(2){transform:translateY(-6px) scale(1.06)} .cat-b{padding:17px 18px 18px;display:flex;flex-direction:column;gap:3px;flex:1} .cat-b .cnt{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--red);font-family:var(--f-disp)} .cat-b h3{font-size:1.22rem;text-transform:uppercase;color:var(--navy)} .cat-b p{color:var(--muted);font-size:.88rem;margin:2px 0 15px;flex:1} .cat-b .btn{align-self:flex-start} .shopt-cta{text-align:center;margin-top:44px} .shopt-cta .btn{min-width:230px} /* transparent product tiles (shop grid + teaser marquee) — no card, no bg */ .marquee{position:relative;width:100%;overflow:hidden;margin-top:8px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .marquee-track{display:flex;gap:14px;width:max-content;animation:scroll-x 64s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} @keyframes scroll-x{to{transform:translateX(-50%)}} .pm{width:170px;flex:none;cursor:pointer} .pm-img{aspect-ratio:1;display:grid;place-items:center;position:relative} .pm-img img{max-height:88%;max-width:88%;object-fit:contain;animation:fadein .45s ease;transition:transform .25s} .pm:hover .pm-img img{transform:scale(1.07)} .pm-b{padding:8px 4px 2px;text-align:center} .pm-name{font-size:.82rem;font-weight:600;color:var(--ink);line-height:1.2;margin:0 0 3px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2em} .pm-price{font-family:var(--f-disp);font-weight:800;color:var(--red);font-size:.98rem} @keyframes fadein{from{opacity:0}to{opacity:1}} /* ── striped category sections ───────────────────────────────────────────── */ .stripes{padding:0} .stripe{position:relative;overflow:hidden;color:#fff} .stripe .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:46px;align-items:center;padding:62px 24px} .stripe.rev .wrap{grid-template-columns:.92fr 1.08fr} .stripe.rev .stripe-copy{order:2} .stripe-copy h2{font-size:clamp(1.8rem,3.8vw,2.7rem);text-transform:uppercase;color:#fff} .stripe-copy .eyebrow{color:rgba(255,255,255,.9)} .stripe-copy .eyebrow::before{background:rgba(255,255,255,.8)} .stripe-copy p{color:rgba(255,255,255,.85);margin:14px 0 22px;max-width:520px} .stripe-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px} .stripe-tags span{background:rgba(255,255,255,.16);padding:6px 13px;border-radius:var(--btn-r);font-size:.82rem;font-weight:600} .stripe-art{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)} .stripe-art-bg{position:absolute;inset:-6%;background-size:cover;background-position:center; filter:blur(3px) brightness(.62) saturate(1.08);transform:scale(1.1)} .stripe-art::after{content:'';position:absolute;inset:0;background:linear-gradient(140deg,rgba(8,18,46,.36),rgba(8,18,46,.58))} .stripe-art .pcut{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%); max-height:74%;max-width:70%;object-fit:contain;filter:drop-shadow(0 16px 26px rgba(0,0,0,.44))} .stripe-art .bigic{position:absolute;z-index:1;right:18px;bottom:10px;color:rgba(255,255,255,.16)} .stripe-art .bigic .ms{font-size:8rem} /* ── wholesale (butter pastel) ──────────────────────────────────────────── */ .wholesale{background:linear-gradient(165deg,var(--butter-pastel) 0%,#F6E9BE 100%);position:relative;overflow:hidden} .wholesale::before{content:'';position:absolute;top:-100px;left:-80px;width:360px;height:360px; background:radial-gradient(circle,rgba(231,179,36,.22),transparent 70%)} .wholesale .eyebrow{color:#9A7B12} .wholesale .eyebrow::before{background:#9A7B12} .wholesale .sec-head h2{color:var(--navy)} .wholesale .sec-head p{color:var(--butter-ink)} .wh-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 0 42px} .wh-cell{background:rgba(255,255,255,.62);border:1px solid rgba(154,123,18,.2);border-radius:var(--r);padding:24px 20px;text-align:left} .wh-cell .ic{width:52px;height:52px;border-radius:var(--r);background:var(--navy);display:grid;place-items:center;margin-bottom:14px} .wh-cell .ic .ms{color:var(--butter);font-size:1.7rem} .wh-cell h3{font-size:1.08rem;text-transform:uppercase;color:var(--navy)} .wh-cell p{color:var(--butter-ink);font-size:.9rem;margin:6px 0 0;line-height:1.5} .wh-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .wh-actions .btn{min-width:210px} /* ── partnerships (dark red) ─────────────────────────────────────────────── */ .partners{background:linear-gradient(160deg,var(--red-dark) 0%,var(--red-deep) 100%);color:#fff;position:relative;overflow:hidden} .partners::before{content:'';position:absolute;bottom:-120px;right:-100px;width:400px;height:400px; background:radial-gradient(circle,rgba(12,36,84,.5),transparent 70%)} .partners .eyebrow{color:var(--butter)} .partners .eyebrow::before{background:var(--butter)} .pt-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;position:relative;z-index:1} .pt-copy h2{font-size:clamp(1.9rem,4vw,2.8rem);text-transform:uppercase;color:#fff} .pt-copy>p{color:rgba(255,255,255,.85);margin:16px 0 26px;max-width:520px} .pt-list{display:flex;flex-direction:column;gap:14px;margin-bottom:30px} .pt-list li{list-style:none;display:flex;gap:13px;align-items:flex-start} .pt-list .ms{color:var(--butter);font-size:1.4rem;flex:none;margin-top:1px} .pt-list b{color:#fff;font-family:var(--f-disp);text-transform:uppercase;font-size:.98rem;letter-spacing:.01em} .pt-list span{display:block;color:rgba(255,255,255,.72);font-size:.9rem} .pt-actions{display:flex;gap:13px;flex-wrap:wrap} .pt-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);padding:34px} .pt-card h3{font-size:1.5rem;text-transform:uppercase;color:#fff;margin-bottom:8px} .pt-card p{color:rgba(255,255,255,.78);font-size:.94rem;margin:0 0 22px} .pt-card .btn{margin-bottom:10px} .pt-card .fine{font-size:.8rem;color:rgba(255,255,255,.6);margin-top:6px} /* ── about (white): blurred collage + logo overlay | text + reviews ──────── */ .about{background:#fff} .about-grid{display:grid;grid-template-columns:1fr 1.06fr;gap:52px;align-items:center} .collage{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg); display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:5px;aspect-ratio:1/1;background:var(--navy)} .collage img{width:100%;height:100%;object-fit:cover;filter:blur(1.5px) brightness(.82)} .collage::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,36,84,.28),rgba(9,20,46,.5))} .collage .badge{position:absolute;z-index:2;inset:0;margin:auto;width:min(64%,260px);height:auto; filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))} .about-copy .eyebrow{color:var(--red)} .about-copy h2{font-size:clamp(1.9rem,4vw,2.8rem);text-transform:uppercase;color:var(--navy)} .about-copy>p{color:var(--muted);margin:16px 0} .about-stats{display:flex;gap:26px;flex-wrap:wrap;margin:22px 0 26px} .about-stats .n{font-family:var(--f-disp);font-weight:800;font-size:2rem;color:var(--red);line-height:1} .about-stats .l{font-size:.82rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600} .review-strip{background:var(--tile);border:1px solid var(--line);border-left:4px solid var(--butter-2);border-radius:var(--r);padding:20px 22px;margin-top:10px} .review-strip .stars{color:var(--gold);font-size:1.05rem;letter-spacing:2px;margin-bottom:8px} .review-strip .q{font-size:1rem;color:var(--ink);font-style:italic;line-height:1.5;min-height:3em;transition:opacity .4s} .review-strip .by{margin-top:9px;font-size:.84rem;color:var(--muted);font-weight:600} /* ── CTA channel chips ───────────────────────────────────────────────────── */ .cta{background:linear-gradient(150deg,var(--navy) 0%,var(--navy-900) 100%);color:#fff} #links{scroll-margin-top:calc(var(--nav-h) + 8px)} .cta-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 26px} .chip{display:flex;align-items:center;gap:15px;padding:20px 22px;border-radius:var(--r);color:#fff; transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden} .chip:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)} .chip .ic{width:48px;height:48px;border-radius:var(--r);background:rgba(255,255,255,.22);display:grid;place-items:center;flex:none} .chip .ic .ms{font-size:1.7rem} .chip b{font-family:var(--f-disp);text-transform:uppercase;font-size:1.05rem;letter-spacing:.01em;display:block} .chip span{font-size:.84rem;opacity:.9} .chip-reviews{background:linear-gradient(135deg,var(--rev-yellow),#DB9A00);color:#3a2b00} .chip-reviews .ic{background:rgba(0,0,0,.14)} .chip-fb{background:linear-gradient(135deg,var(--fb-cyan),#127BB8)} .chip-call{background:linear-gradient(135deg,var(--call-green),#128C4B)} .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .cta-btns .btn{min-width:220px} /* ── map ─────────────────────────────────────────────────────────────────── */ .mapsec{position:relative;height:520px;background:var(--tile)} #map{position:absolute;inset:0;z-index:1} .leaflet-container{font-family:var(--f-body)} .find{position:absolute;z-index:2;top:50%;left:max(24px,calc((100vw - var(--wrap))/2 + 24px));transform:translateY(-50%); width:min(92vw,384px);background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:28px;border-top:5px solid var(--red)} .find h3{font-size:1.5rem;text-transform:uppercase;color:var(--navy);margin-bottom:4px} .find .addr{color:var(--muted);font-size:.95rem;margin-bottom:16px} .find .row{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line-2);font-size:.92rem} .find .row .ms{color:var(--red);font-size:1.2rem;flex:none} .find .row a:hover{color:var(--red)} .find .hours{display:flex;justify-content:space-between;font-size:.86rem;padding:3px 0;color:var(--muted)} .find .hours.today{color:var(--navy);font-weight:700} .find .hours .cl{color:var(--red);font-weight:600} .find .btn{margin-top:16px} /* ── footer ──────────────────────────────────────────────────────────────── */ .footer{background:var(--navy-900);color:rgba(255,255,255,.72);padding:56px 0 26px} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:40px} .foot-brand img{height:54px;width:auto;margin-bottom:16px} .foot-brand p{font-size:.9rem;max-width:280px;line-height:1.6} .foot-social{display:flex;gap:10px;margin-top:16px} .foot-social a{width:40px;height:40px;border-radius:var(--btn-r);background:rgba(255,255,255,.09);display:grid;place-items:center;transition:.16s} .foot-social a:hover{background:var(--red)} .foot-social .ms{font-size:1.25rem;color:#fff} .foot-col h4{font-family:var(--f-disp);text-transform:uppercase;color:#fff;font-size:.92rem;letter-spacing:.08em;margin-bottom:16px} .foot-col a{display:block;font-size:.9rem;padding:6px 0;transition:color .15s} .foot-col a:hover{color:var(--butter)} .foot-bar{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between; flex-wrap:wrap;gap:12px;font-size:.82rem;color:rgba(255,255,255,.5)} .foot-bar a:hover{color:#fff} .foot-bar .pw{color:var(--butter)} /* ── modal (enquiry — themable) ──────────────────────────────────────────── */ .modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px; background:rgba(6,14,32,.62);backdrop-filter:blur(5px)} .modal.on{display:flex;animation:fadein .2s ease} .modal-card{background:#fff;border-radius:var(--r-lg);width:min(96vw,560px);max-height:92vh;overflow-y:auto;box-shadow:var(--sh-lg); border-top:6px solid var(--red)} .modal-card.butter{border-top-color:var(--butter-2)} .modal-card.darkred{border-top-color:var(--red-dark)} .modal-head{padding:26px 28px 4px;position:relative} .modal-head .eyebrow{color:var(--red)} .modal-card.butter .modal-head{background:var(--butter-pastel)} .modal-card.butter .modal-head .eyebrow{color:#9A7B12} .modal-card.butter .modal-head .eyebrow::before{background:#9A7B12} .modal-card.darkred .modal-head{background:linear-gradient(160deg,var(--red-dark),var(--red-deep));color:#fff} .modal-card.darkred .modal-head h3{color:#fff} .modal-card.darkred .modal-head .eyebrow{color:var(--butter)} .modal-card.darkred .modal-head .eyebrow::before{background:var(--butter)} .modal-head h3{font-size:1.7rem;text-transform:uppercase;color:var(--navy);margin:8px 0 4px} .modal-head p{color:var(--muted);font-size:.92rem;margin:0} .modal-card.darkred .modal-head p{color:rgba(255,255,255,.8)} .modal-x{position:absolute;top:16px;right:16px;background:rgba(12,26,51,.08);border:0;width:34px;height:34px;border-radius:var(--btn-r); cursor:pointer;display:grid;place-items:center;transition:.15s} .modal-card.darkred .modal-x{background:rgba(255,255,255,.2)} .modal-card.darkred .modal-x .ms{color:#fff} .modal-x:hover{background:var(--red);color:#fff} .modal-x:hover .ms{color:#fff} .modal-body{padding:22px 28px 28px} .fld{margin-bottom:15px} .fld label{display:block;font-size:.82rem;font-weight:600;color:var(--navy);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;font-family:var(--f-disp)} .fld label .req{color:var(--red)} .fld input,.fld select,.fld textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--btn-r); font-family:var(--f-body);font-size:.95rem;color:var(--ink);background:#fff;transition:border-color .15s} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--red)} .fld textarea{resize:vertical;min-height:90px} .fld-row{display:grid;grid-template-columns:1fr 1fr;gap:13px} .chk-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .chk{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink);cursor:pointer;padding:7px 10px;border:1.5px solid var(--line);border-radius:var(--btn-r);transition:.15s} .chk:hover{border-color:var(--red)} .chk input{width:auto;margin:0} .chk.on{border-color:var(--red);background:rgba(200,16,46,.05)} .form-status{padding:12px 14px;border-radius:var(--btn-r);font-size:.9rem;margin-bottom:14px;display:none} .form-status.ok{display:block;background:rgba(37,211,102,.12);color:#128C4B;border:1px solid rgba(37,211,102,.3)} .form-status.err{display:block;background:rgba(200,16,46,.1);color:var(--red-600);border:1px solid rgba(200,16,46,.3)} .modal-foot-note{font-size:.78rem;color:var(--muted);margin-top:12px;text-align:center} /* ── generic inner-page scaffold (shop / wholesale / partnerships / seo / privacy) ── */ .page-hero{background:linear-gradient(150deg,var(--navy) 0%,var(--navy-900) 100%);color:#fff;padding:calc(var(--nav-h) + 54px) 0 56px;position:relative;overflow:hidden} .page-hero.butter{background:linear-gradient(150deg,#F3E1A6,#EAD07A);color:var(--navy)} .page-hero.darkred{background:linear-gradient(150deg,var(--red-dark),var(--red-deep))} .page-hero::after{content:'';position:absolute;inset:0;background-size:cover;background-position:center;opacity:.14;mix-blend-mode:luminosity} .page-hero>.wrap{position:relative;z-index:1} .crumb{font-size:.82rem;color:rgba(255,255,255,.66);margin-bottom:16px;font-weight:500} .page-hero.butter .crumb{color:rgba(12,36,84,.6)} .crumb a:hover{color:#fff} .page-hero.butter .crumb a:hover{color:var(--red)} .page-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);text-transform:uppercase} .page-hero.butter h1{color:var(--navy)} .page-hero .lead{font-size:1.1rem;color:rgba(255,255,255,.85);max-width:660px;margin:16px 0 0} .page-hero.butter .lead{color:var(--butter-ink)} .pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} .pill{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);padding:8px 15px;border-radius:99px;font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:7px} .pill .ms{font-size:1.05rem;color:var(--butter)} .page-hero.butter .pill{background:rgba(255,255,255,.5);border-color:rgba(154,123,18,.25);color:var(--navy)} .page-hero.butter .pill .ms{color:var(--red)} .prose-wrap{padding:70px 0} .content-2col{display:grid;grid-template-columns:1fr 320px;gap:52px;align-items:start} .prose h2{font-size:1.7rem;text-transform:uppercase;color:var(--navy);margin:38px 0 14px} .prose h2:first-child{margin-top:0} .prose h3{font-size:1.24rem;color:var(--navy);margin:26px 0 10px} .prose p{color:var(--ink);margin:0 0 15px;line-height:1.7} .prose ul{margin:0 0 18px;padding-left:0;list-style:none} .prose ul li{position:relative;padding-left:30px;margin-bottom:10px;color:var(--ink)} .prose ul li::before{content:'check_circle';font-family:'Material Symbols Rounded';position:absolute;left:0;top:1px;color:var(--red);font-size:1.15rem} .aside-card{background:var(--tile);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;position:sticky;top:92px} .aside-card h3{font-size:1.2rem;text-transform:uppercase;color:var(--navy);margin-bottom:14px} .aside-card .btn{margin-bottom:10px} .aside-card .meta{font-size:.86rem;color:var(--muted);display:flex;gap:9px;padding:8px 0;border-top:1px solid var(--line-2)} .aside-card .meta .ms{color:var(--red);font-size:1.1rem;flex:none} .faq{margin-top:14px} .faq-q{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden;background:#fff} .faq-q summary{padding:16px 20px;font-family:var(--f-disp);font-weight:600;text-transform:uppercase;font-size:.98rem;color:var(--navy); cursor:pointer;display:flex;justify-content:space-between;align-items:center;list-style:none;letter-spacing:.01em} .faq-q summary::-webkit-details-marker{display:none} .faq-q summary::after{content:'add';font-family:'Material Symbols Rounded';color:var(--red);font-size:1.35rem;transition:transform .2s} .faq-q[open] summary::after{transform:rotate(45deg)} .faq-q .a{padding:0 20px 18px;color:var(--muted);font-size:.94rem;line-height:1.65} /* bookable-service rows reuse the FAQ shell but never expand — no "+" affordance */ .bookrow,.bookrow summary{cursor:default} .bookrow summary::after{display:none} .bookrow summary{gap:12px} .bookrow summary .btn{padding:9px 16px;flex:none} .section-alt{background:var(--tile)} /* ── shop page ───────────────────────────────────────────────────────────── */ .shop-cats{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:var(--nav-h);z-index:40} .shop-cats-in{display:flex;gap:8px;overflow-x:auto;padding:14px 24px;max-width:var(--wrap);margin:0 auto;scrollbar-width:none} .shop-cats-in::-webkit-scrollbar{display:none} .shop-cats a{flex:none;font-family:var(--f-disp);font-weight:600;text-transform:uppercase;font-size:.82rem;letter-spacing:.02em; color:var(--navy);padding:9px 16px;border:1.5px solid var(--line);border-radius:var(--btn-r);white-space:nowrap;transition:.15s} .shop-cats a:hover{border-color:var(--red);color:var(--red)} .shop-cats a.on{background:var(--navy);color:#fff;border-color:var(--navy)} .shop-layout{display:grid;grid-template-columns:270px 1fr;gap:36px;padding:38px 0 70px} .shop-filters{position:sticky;top:calc(var(--nav-h) + 62px);align-self:start;max-height:calc(100vh - var(--nav-h) - 80px);overflow-y:auto;padding-right:6px} .fgroup{border-bottom:1px solid var(--line);padding:16px 0} .fgroup:first-child{padding-top:0} .fgroup h4{font-family:var(--f-disp);text-transform:uppercase;font-size:.86rem;letter-spacing:.05em;color:var(--navy); margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer} .fgroup h4 .ms{color:var(--muted);font-size:1.2rem;transition:transform .2s} .fgroup.collapsed h4 .ms{transform:rotate(-90deg)} .fgroup.collapsed .fopts{display:none} .fopt{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:.9rem;color:var(--ink);cursor:pointer} .fopt input{width:16px;height:16px;accent-color:var(--red);cursor:pointer} .fopt .c{margin-left:auto;font-size:.78rem;color:var(--muted)} .fopt .sw{width:13px;height:13px;border-radius:3px;border:1px solid var(--line)} .shop-main{min-width:0} .shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap} .shop-toolbar .cnt{font-size:.92rem;color:var(--muted)} .shop-toolbar .cnt b{color:var(--navy)} .shop-sort{padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--btn-r);font-family:var(--f-body);font-size:.9rem;color:var(--ink);background:#fff;cursor:pointer} .btn-filters{display:none} .chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px} .fchip{display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;font-size:.8rem;font-weight:600; padding:6px 8px 6px 12px;border-radius:99px} .fchip button{background:rgba(255,255,255,.24);border:0;width:18px;height:18px;border-radius:99px;color:#fff;cursor:pointer;display:grid;place-items:center;font-size:.7rem} .fchip.clear{background:transparent;color:var(--red);border:1px solid var(--red);cursor:pointer;padding:6px 12px} .prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .prod{position:relative;background:transparent;border:0;border-radius:var(--r);overflow:hidden;cursor:pointer; display:flex;flex-direction:column;transition:transform .18s} .prod:hover{transform:translateY(-4px)} .prod-img{aspect-ratio:1;display:grid;place-items:center;position:relative;padding:6px;background:transparent} .prod-img img{max-width:92%;max-height:92%;object-fit:contain;animation:fadein .4s ease;transition:transform .25s;filter:drop-shadow(0 8px 14px rgba(12,26,51,.14))} .prod:hover .prod-img img{transform:scale(1.07)} .p-sale{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-family:var(--f-disp);font-weight:700; font-size:.68rem;padding:3px 8px;border-radius:var(--btn-r);text-transform:uppercase;letter-spacing:.03em;z-index:2} .p-quick{position:absolute;left:0;right:0;bottom:0;background:var(--navy);color:#fff;text-align:center;font-family:var(--f-disp); font-weight:600;text-transform:uppercase;font-size:.76rem;letter-spacing:.03em;padding:8px;transform:translateY(100%);transition:transform .2s;z-index:2} .prod:hover .p-quick{transform:translateY(0)} @keyframes spin{to{transform:rotate(360deg)}} /* ── UK loading animation — a waving Union Jack with a shimmer sweep ──────── */ .p-spin{width:50px;height:33px;border:0;border-radius:2px;background:var(--uk-flag) center/cover no-repeat; box-shadow:0 3px 9px rgba(12,26,51,.24);position:relative;overflow:hidden;transform-origin:left center; animation:uk-wave 1.5s ease-in-out infinite} .p-spin::after{content:"";position:absolute;inset:0; background:linear-gradient(108deg,transparent 34%,rgba(255,255,255,.6) 50%,transparent 66%); transform:translateX(-130%);animation:uk-shimmer 1.5s ease-in-out infinite} @keyframes uk-wave{0%,100%{transform:skewY(-2.6deg) scaleY(1)}50%{transform:skewY(2.6deg) scaleY(.94)}} @keyframes uk-shimmer{0%{transform:translateX(-130%)}58%,100%{transform:translateX(130%)}} /* larger centred flag for the initial grid load */ .shop-loading{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:18px;padding:74px 20px;text-align:center} .uk-flag-lg{width:104px;height:69px;border-radius:3px;background:var(--uk-flag) center/cover no-repeat; box-shadow:0 12px 26px rgba(12,26,51,.28);position:relative;overflow:hidden;transform-origin:left center; animation:uk-wave 1.7s ease-in-out infinite} .uk-flag-lg::after{content:"";position:absolute;inset:0; background:linear-gradient(108deg,transparent 36%,rgba(255,255,255,.55) 50%,transparent 64%); transform:translateX(-130%);animation:uk-shimmer 1.7s ease-in-out infinite} .shop-loading p{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.06em;color:var(--navy);font-weight:700;font-size:.98rem;margin:0} .shop-loading .dots::after{content:"";animation:uk-dots 1.5s steps(1,end) infinite} @keyframes uk-dots{0%{content:"· "}33%{content:"·· "}66%{content:"···"}} .fload{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:.9rem;padding:8px 0} .fload .p-spin{width:38px;height:25px;flex:none} @media(prefers-reduced-motion:reduce){.p-spin,.p-spin::after,.uk-flag-lg,.uk-flag-lg::after{animation:none}.p-spin::after,.uk-flag-lg::after{display:none}} .prod-b{padding:6px 8px 12px;text-align:center;flex:1;display:flex;flex-direction:column} .prod-cat{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--red);font-family:var(--f-disp)} .prod-name{font-size:.85rem;font-weight:600;color:var(--ink);line-height:1.25;margin:3px 0 6px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.1em;flex:1} .prod-price{font-family:var(--f-disp);font-weight:800;color:var(--navy);font-size:1.04rem} .prod-price .was{font-size:.8rem;color:var(--muted);text-decoration:line-through;font-weight:600;margin-left:6px} .pagination{display:flex;gap:6px;justify-content:center;margin-top:40px;flex-wrap:wrap} .pagination button{min-width:40px;height:40px;border:1.5px solid var(--line);background:#fff;border-radius:var(--btn-r); font-family:var(--f-disp);font-weight:600;color:var(--navy);cursor:pointer;transition:.15s;padding:0 12px} .pagination button:hover{border-color:var(--red)} .pagination button.on{background:var(--navy);color:#fff;border-color:var(--navy)} .pagination button:disabled{opacity:.4;cursor:default} .shop-empty{text-align:center;padding:80px 20px;color:var(--muted)} .shop-empty .ms{font-size:3rem;color:var(--line);display:block;margin-bottom:10px} /* ── seo/stats page ──────────────────────────────────────────────────────── */ .stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-42px;position:relative;z-index:3} .stat-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh);border-top:4px solid var(--red)} .stat-card .n{font-family:var(--f-disp);font-weight:800;font-size:2.2rem;color:var(--navy);line-height:1} .stat-card .l{font-size:.84rem;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.04em;font-weight:600} .stat-card.red{border-top-color:var(--red)}.stat-card.navy{border-top-color:var(--navy)}.stat-card.butter{border-top-color:var(--butter-2)}.stat-card.green{border-top-color:var(--call-green)} .seo-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;box-shadow:var(--sh);margin-bottom:24px} .seo-card h3{font-size:1.4rem;text-transform:uppercase;color:var(--navy);margin-bottom:8px} .seo-card>p.sub{color:var(--muted);margin:0 0 24px} .bar-row{display:flex;align-items:center;gap:14px;margin-bottom:11px} .bar-row .lbl{width:min(38%,240px);font-size:.9rem;color:var(--ink);flex:none;text-align:right} .bar-track{flex:1;height:26px;background:var(--tile);border-radius:var(--btn-r);overflow:hidden;position:relative} .bar-fill{height:100%;border-radius:var(--btn-r);display:flex;align-items:center;justify-content:flex-end;padding-right:9px; color:#fff;font-family:var(--f-disp);font-weight:700;font-size:.8rem;transition:width 1s cubic-bezier(.2,.7,.3,1)} .bar-fill.shop{background:linear-gradient(90deg,var(--red-600),var(--red))} .bar-fill.book{background:linear-gradient(90deg,var(--navy-800),var(--navy-600))} .bar-fill.part{background:linear-gradient(90deg,#9A7B12,var(--butter-2))} .legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;font-size:.84rem;color:var(--muted)} .legend span{display:flex;align-items:center;gap:7px} .legend i{width:13px;height:13px;border-radius:3px;display:inline-block} .funnel{display:flex;flex-direction:column;gap:8px} .funnel .step{background:linear-gradient(90deg,var(--navy),var(--navy-700));color:#fff;border-radius:var(--btn-r);padding:15px 22px; display:flex;justify-content:space-between;align-items:center;margin:0 auto;font-family:var(--f-disp)} .funnel .step .k{text-transform:uppercase;font-size:.9rem;letter-spacing:.02em} .funnel .step .v{font-weight:800;font-size:1.2rem} .funnel .step:nth-child(1){width:100%}.funnel .step:nth-child(2){width:88%}.funnel .step:nth-child(3){width:74%;background:linear-gradient(90deg,var(--red-600),var(--red))} .funnel .step:nth-child(4){width:60%}.funnel .step:nth-child(5){width:46%;background:linear-gradient(90deg,#128C4B,var(--call-green))} .tree{font-family:var(--f-body);font-size:.9rem} .tree .root{background:var(--navy);color:#fff;padding:11px 18px;border-radius:var(--btn-r);font-family:var(--f-disp);text-transform:uppercase;display:inline-block;font-weight:700} .tree .branch{margin:10px 0 0 26px;padding-left:22px;border-left:2px solid var(--line)} .tree .node{background:var(--tile);border:1px solid var(--line);border-radius:var(--btn-r);padding:9px 14px;margin:8px 0;display:inline-block} .tree .node b{color:var(--navy);font-family:var(--f-disp);text-transform:uppercase;font-size:.85rem} .tree .node span{color:var(--muted);font-size:.82rem;margin-left:6px} .seo-table{width:100%;border-collapse:collapse;font-size:.9rem} .seo-table th{text-align:left;font-family:var(--f-disp);text-transform:uppercase;font-size:.78rem;letter-spacing:.04em;color:var(--red);padding:10px 12px;border-bottom:2px solid var(--line)} .seo-table td{padding:11px 12px;border-bottom:1px solid var(--line-2);color:var(--ink);vertical-align:top} .seo-table tr:hover td{background:var(--tile)} .compare{display:grid;grid-template-columns:1fr 1fr;gap:18px} .compare .col{border-radius:var(--r-lg);padding:26px} .compare .old{background:#F5F0F0;border:1px solid #E4D3D3} .compare .new{background:linear-gradient(160deg,var(--navy),var(--navy-900));color:#fff} .compare h4{font-family:var(--f-disp);text-transform:uppercase;font-size:1.1rem;margin-bottom:16px} .compare .old h4{color:var(--red-600)}.compare .new h4{color:var(--butter)} .compare li{list-style:none;display:flex;gap:10px;align-items:flex-start;margin-bottom:11px;font-size:.9rem} .compare .old li .ms{color:#B85B5B}.compare .new li .ms{color:var(--call-green)} .compare .new li{color:rgba(255,255,255,.9)} .revenue-note{font-size:.82rem;color:var(--muted);margin-top:14px;font-style:italic} /* ── reveal on scroll ────────────────────────────────────────────────────── */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)} .reveal.in{opacity:1;transform:none} /* ── responsive ──────────────────────────────────────────────────────────── */ @media(max-width:1000px){ .nav-links{display:none} .hamb{display:block} .nav-cta .btn:not(.hamb){display:none} .place-grid,.pt-grid,.about-grid{grid-template-columns:1fr;gap:34px} .stripe .wrap,.stripe.rev .wrap{grid-template-columns:1fr;gap:28px} .stripe.rev .stripe-copy{order:0} .wh-icons{grid-template-columns:1fr 1fr} .cat-matrix{grid-template-columns:1fr 1fr} .content-2col{grid-template-columns:1fr} .aside-card{position:static} .prod-grid{grid-template-columns:repeat(3,1fr)} .find{position:static;transform:none;width:auto;margin:0 24px;top:auto} .mapsec{height:auto} #map{position:relative;height:340px} } /* ── phone (≤680px) — compact, dense & readable: keep 2-col grids, shrink the vertical rhythm, and turn the tall category stripes into short rows ────── */ @media(max-width:680px){ body{font-size:15.5px} .wrap{padding:0 15px} .sec{padding:46px 0} .sec-head{margin-bottom:26px} .sec-head h2{font-size:1.6rem} .sec-head p{font-size:.95rem;margin-top:11px} .eyebrow{font-size:.68rem} /* hero — content-sized, no dead space. margin-top:0 because the base rule's negative pull only works when content is centred in a full-height hero; without it the logo tucks under the fixed nav. */ .hero{min-height:auto;margin-top:0;padding:calc(var(--nav-h) + 26px) 16px 40px} .hero-logo{height:132px;margin-bottom:16px} .hero h1{font-size:2.05rem} .hero-sub{font-size:.97rem;margin-top:13px} .hero-btns{margin-top:22px;gap:9px} .hero-btns .btn{width:100%;min-width:0;padding:14px 18px;font-size:.92rem} .hero-badges{margin-top:20px;gap:9px 16px} .hero-badge{font-size:.79rem} .hero-dots{bottom:12px} .scroll-cue{display:none} /* keep the dense 2-col grids on phone (do NOT collapse to 1) */ .icon2,.wh-icons,.cat-matrix,.stat-band{grid-template-columns:1fr 1fr;gap:9px} .cta-chips,.compare{grid-template-columns:1fr} /* the place / partnerships / about */ .place-grid,.pt-grid,.about-grid{gap:24px} .place-photo{aspect-ratio:4/3} .place-copy h2,.pt-copy h2,.about-copy h2{font-size:1.6rem} .place-copy>p,.pt-copy>p,.about-copy>p{font-size:.94rem;margin-bottom:20px} .icon2 .cell{padding:13px 11px} .icon2 .ic{width:38px;height:38px;margin-bottom:8px} .icon2 .ic .ms{font-size:1.3rem} .icon2 h3{font-size:.87rem} .icon2 p{font-size:.79rem;line-height:1.4;margin-top:4px} /* shop teaser */ .cat-strip{height:96px;padding:0 4px} .cat-strip .pcut{height:82px;margin:0 -6px} .cat-b{padding:10px 10px 12px} .cat-b .cnt{font-size:.66rem} .cat-b h3{font-size:.92rem;line-height:1.1} .cat-b p{display:none} /* long labels ("Shop Mugs & Kitchen") must wrap, not overflow the narrow card */ .cat-b .btn{padding:8px 6px;font-size:.7rem;width:100%;justify-content:center; white-space:normal;line-height:1.2;text-align:center} .cat-b .btn .ms{display:none} .shopt-cta{margin-top:26px} .pm{width:132px} .marquee-track{gap:10px} /* category stripes — short side-by-side rows (were ~730px each) */ .stripe .wrap,.stripe.rev .wrap{grid-template-columns:98px 1fr;gap:13px;padding:16px 15px;align-items:center} .stripe-art{aspect-ratio:1;border-radius:var(--r);box-shadow:none;order:-1} .stripe.rev .stripe-copy{order:0} .stripe-art .bigic{display:none} .stripe-art .pcut{max-height:84%;max-width:84%} .stripe-copy .eyebrow{font-size:.63rem} .stripe-copy .eyebrow::before{width:14px} .stripe-copy h2{font-size:1.06rem;line-height:1.08;margin-top:3px} .stripe-copy p{font-size:.79rem;line-height:1.35;margin:6px 0 8px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .stripe-tags{gap:5px;margin-bottom:10px} .stripe-tags span{font-size:.66rem;padding:3px 7px} .stripe-tags span:nth-child(n+4){display:none} .stripe-copy .btn{padding:8px 13px;font-size:.76rem} /* wholesale / partnerships */ .wh-cell{padding:14px 12px} .wh-cell .ic{width:40px;height:40px;margin-bottom:9px} .wh-cell .ic .ms{font-size:1.35rem} .wh-cell h3{font-size:.88rem} .wh-cell p{font-size:.79rem;line-height:1.4;margin-top:4px} .wh-actions,.pt-actions{gap:9px} .wh-actions .btn,.pt-actions .btn{width:100%;min-width:0} .pt-list li{gap:10px} .pt-list b{font-size:.9rem} .pt-list span{font-size:.82rem} .pt-card{padding:20px} .pt-card h3{font-size:1.2rem} /* about + reviews */ .about-stats{gap:16px;margin:16px 0 18px} .about-stats .n{font-size:1.5rem} .about-stats .l{font-size:.71rem} .review-strip{padding:15px 16px} .review-strip .q{font-size:.9rem;min-height:0} /* CTA */ .chip{padding:15px 16px;gap:12px} .chip .ic{width:40px;height:40px} .chip .ic .ms{font-size:1.4rem} .chip b{font-size:.95rem} .chip span{font-size:.8rem} .cta-btns{gap:9px} .cta-btns .btn{width:100%;min-width:0} /* map */ #map{height:250px} .find{margin:0 15px;padding:20px;border-radius:var(--r)} .find h3{font-size:1.25rem} .find .hours{font-size:.81rem} /* footer */ .foot-grid{grid-template-columns:1fr 1fr;gap:20px} .foot-brand{grid-column:1/-1} .foot-brand img{height:44px} .foot-brand p{font-size:.85rem;max-width:none} .foot-col h4{font-size:.78rem;margin-bottom:9px} .foot-col a{font-size:.84rem;padding:4px 0} .foot-bar{font-size:.77rem} /* inner pages */ .page-hero{padding:calc(var(--nav-h) + 32px) 0 34px} .page-hero h1{font-size:1.85rem} .page-hero .lead{font-size:.95rem} .pill{font-size:.76rem;padding:6px 12px} .prose-wrap{padding:40px 0} .prose h2{font-size:1.35rem;margin:26px 0 10px} .prose h3{font-size:1.08rem} .prose p,.prose ul li{font-size:.93rem} .aside-card{padding:20px} .faq-q summary{padding:13px 15px;font-size:.88rem} .faq-q .a{font-size:.89rem;padding:0 15px 14px} /* shop page — toolbar on one tidy row: [Filters] [Sort] then the count */ .prod-grid{grid-template-columns:1fr 1fr;gap:10px} .shop-layout{grid-template-columns:1fr;padding:18px 0 50px} .shop-cats-in{padding:10px 15px;gap:6px} .shop-cats a{font-size:.74rem;padding:7px 11px} .shop-toolbar{gap:8px;align-items:center;margin-bottom:12px} .btn-filters{order:1;flex:0 0 auto;padding:9px 14px;font-size:.79rem} .shop-sort{order:2;flex:1;min-width:0;font-size:.81rem;padding:9px 10px} .shop-toolbar .cnt{order:3;flex:1 0 100%;font-size:.85rem} .chip-row{margin-bottom:12px} .chip-row:empty{display:none} .shop-filters{display:none;position:fixed;inset:0;top:0;background:#fff;z-index:110;max-height:100vh;padding:20px;overflow-y:auto} .shop-filters.open{display:block} .btn-filters{display:inline-flex} .prod-name{font-size:.81rem} .prod-price{font-size:.96rem} /* seo page */ .stat-card{padding:16px} .stat-card .n{font-size:1.5rem} .stat-card .l{font-size:.72rem} .seo-card{padding:20px} .seo-card h3{font-size:1.2rem} .bar-row{gap:9px;margin-bottom:8px} .bar-row .lbl{width:42%;font-size:.75rem} .bar-track{height:22px} .bar-fill{font-size:.72rem} .funnel .step{padding:12px 15px;width:100%!important} .funnel .step .k{font-size:.79rem} .funnel .step .v{font-size:1rem} .seo-table{font-size:.81rem} .seo-table th,.seo-table td{padding:8px 7px} .tree .branch{margin-left:12px;padding-left:12px} .tree .node{padding:7px 10px;margin:5px 0} /* modals — full-screen sheets on phone */ .modal{padding:0} .modal-card{width:100%;max-height:100vh;border-radius:0} .modal-head{padding:20px 20px 4px} .modal-head h3{font-size:1.35rem} .modal-body{padding:18px 20px 24px} .fld-row,.chk-grid{grid-template-columns:1fr} } @media(max-width:400px){ .cat-matrix,.icon2,.wh-icons{gap:8px} .cat-b h3{font-size:.85rem} .stripe .wrap,.stripe.rev .wrap{grid-template-columns:84px 1fr} .hero h1{font-size:1.9rem} .hero-logo{height:118px} }