/* ============================================================ THE EVEREST TANDOORI — light / warm / premium Himalayan system Fonts: Cormorant Garamond (display) + Outfit (body) Scoped by ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Outfit:wght@200;300;400;500;600;700&display=swap'); :root{ --bg:#F7F0E2; --bg-soft:#FFFDF8; --surface:#FFFDF8; --surface-2:#EFE4D1; --burgundy:#7A1830; --burgundy-deep:#5A1022; --gold:#B07D24; --gold-bright:#E0A93C; --gold-deep:#8A5F18; --orange:#C0561C; --peak:#9CA9B2; --on-dark:#F6ECDA; --cream:#2A1A16; /* strong / heading text (dark) */ --text:#4C3B33; --text-dim:#6E5B50; --text-faint:#9A8676; --line:rgba(74,42,30,.16); --line-soft:rgba(74,42,30,.08); --shadow:0 24px 60px -28px rgba(90,16,34,.22); --shadow-sm:0 10px 26px -14px rgba(90,16,34,.15); --glow:0 12px 30px -8px rgba(176,125,36,.4); --r-sm:8px; --r-md:14px; --r-lg:22px; --maxw:1200px; --font-display:'Cormorant Garamond',Georgia,serif; --font-body:'Outfit',system-ui,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--font-body);font-weight:300;color:var(--text);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden} body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E")} main,header,footer,section{position:relative;z-index:1} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.04;letter-spacing:.005em;color:var(--cream)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .section-pad{padding:120px 0} .eyebrow{font-family:var(--font-body);font-weight:500;font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:12px} .eyebrow::before{content:"\25B2";font-size:.6em;color:var(--gold);transform:translateY(-1px)} /* buttons */ .btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-body);font-weight:500;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;padding:15px 30px;border-radius:2px;border:none;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s,color .3s,border-color .3s} .btn-primary{background:var(--burgundy);color:var(--on-dark)} .btn-primary:hover{background:var(--burgundy-deep);transform:translateY(-2px);box-shadow:var(--shadow-sm)} .btn-gold{background:var(--gold-bright);color:#3a2407} .btn-gold:hover{background:#ecb84e;transform:translateY(-2px);box-shadow:var(--glow)} .btn-ghost{background:transparent;color:var(--burgundy);border:1px solid var(--line)} .btn-ghost:hover{border-color:var(--burgundy);color:var(--burgundy);transform:translateY(-2px)} /* header / nav */ .site-header{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .4s,backdrop-filter .4s,border-color .4s,box-shadow .4s;border-bottom:1px solid transparent} .site-header.solid{background:rgba(247,240,226,.85);backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:var(--line);box-shadow:var(--shadow-sm)} .nav{display:flex;align-items:center;justify-content:space-between;height:88px} .brand{display:flex;align-items:center;gap:12px} .brand img{height:56px;width:auto;transition:transform .3s} .brand:hover img{transform:scale(1.04)} .nav-links{display:flex;align-items:center;gap:36px} .nav-links a{font-family:var(--font-body);font-weight:400;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);position:relative;padding:8px 0;transition:color .25s} .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .3s} .nav-links a:hover,.nav-links a.active{color:var(--burgundy)} .nav-links a:hover::after,.nav-links a.active::after{width:100%} .nav-cta{display:flex;align-items:center;gap:14px} .menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px} .menu-toggle span{display:block;width:26px;height:1.5px;background:var(--burgundy);margin:6px 0;transition:.3s} /* footer (rich burgundy on light site) */ .site-footer{background:var(--burgundy-deep);color:rgba(246,236,218,.78);padding:90px 0 36px;position:relative;overflow:hidden} .site-footer a{color:var(--gold-bright)} .footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:56px;position:relative} .footer-grid h4{color:#fff;font-family:var(--font-body);font-weight:500;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:22px} .footer-brand .wordmark{font-family:var(--font-display);font-weight:500;font-size:2rem;color:#fff;line-height:1.1} .footer-brand .wordmark span{display:block;font-family:var(--font-body);font-weight:400;font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-bright);margin-top:8px} .footer-brand p{color:rgba(246,236,218,.6);max-width:36ch;margin-top:22px;font-size:.95rem;font-weight:300} .footer-col p,.footer-col a{display:block;color:rgba(246,236,218,.7);margin-bottom:12px;font-size:.95rem;font-weight:300} .footer-col a:hover{color:#fff} .footer-bottom{border-top:1px solid rgba(246,236,218,.16);margin-top:64px;padding-top:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:rgba(246,236,218,.5);font-size:.82rem;letter-spacing:.04em} /* chips */ .chip-mild{color:#8A6B1F;border-color:rgba(138,107,31,.45)} .chip-medium{color:#B96D14;border-color:rgba(185,109,20,.5)} .chip-hot{color:#B5401B;border-color:rgba(181,64,27,.5)} .chip-vhot{color:#8E1F0A;border-color:rgba(142,31,10,.55)} .chip{font-family:var(--font-body);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:2px;display:inline-block;vertical-align:middle;border:1px solid transparent} .chip-dry{color:#7A6A3F;border-color:rgba(122,106,63,.4)} .chip-v{color:#4E7A34;border-color:rgba(78,122,52,.45)} .chip-vegan{color:#2F7A4E;border-color:rgba(47,122,78,.45)} .chip-gf{color:#6A5AA8;border-color:rgba(106,90,168,.45)} .chip-df{color:#2F6B87;border-color:rgba(47,107,135,.45)} /* reveal */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)} .reveal.in{opacity:1;transform:none} /* inner page hero */ .page-hero{padding:190px 0 110px;text-align:center;position:relative;overflow:hidden;background:radial-gradient(110% 90% at 50% -10%,#FCEFD3 0%,var(--bg) 58%)} .page-hero h1{font-size:clamp(2.8rem,6vw,4.8rem);font-weight:500;margin:20px 0 18px} .page-hero p{color:var(--text-dim);max-width:54ch;margin:0 auto;font-size:1.1rem;font-weight:300} .page-hero .eyebrow{justify-content:center} .sec-head{text-align:center;max-width:640px;margin:0 auto 70px} .sec-head h2{font-size:clamp(2.4rem,4.5vw,3.6rem);margin:18px 0} .sec-head p{color:var(--text-dim);font-size:1.08rem;font-weight:300} /* ===================== HOME ===================== */ .page-home .hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 0;overflow:hidden;background:radial-gradient(120% 80% at 50% 6%,#FDF3DB 0%,#FBEFD2 38%,var(--bg) 76%)} .page-home .hero::after{content:"";position:absolute;left:50%;top:12%;transform:translateX(-50%);width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(224,169,60,.18),transparent 62%);pointer-events:none} .page-home .hero-inner{position:relative;z-index:3;text-align:center;max-width:920px;margin:0 auto;padding-bottom:60px} .page-home .hero-logo{height:120px;width:auto;margin:0 auto 30px;filter:drop-shadow(0 14px 30px rgba(90,16,34,.22))} .page-home .hero h1{font-size:clamp(3rem,8vw,6.4rem);font-weight:500;line-height:.98;margin:8px 0 26px} .page-home .hero h1 em{font-style:italic;color:var(--gold)} .page-home .hero .lead{font-size:1.2rem;color:var(--text-dim);font-weight:300;max-width:50ch;margin:0 auto 40px} .page-home .hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} .page-home .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);position:relative;z-index:4} .page-home .strip-inner{display:grid;grid-template-columns:repeat(3,1fr)} .page-home .strip-inner div{display:flex;gap:16px;align-items:center;padding:30px 28px;border-right:1px solid var(--line)} .page-home .strip-inner div:last-child{border-right:none} .page-home .strip-inner .ic{width:44px;height:44px;flex:none;display:grid;place-items:center;color:var(--gold);border:1px solid var(--line);border-radius:50%} .page-home .strip-inner b{display:block;font-family:var(--font-body);font-weight:500;font-size:.95rem;color:var(--cream);letter-spacing:.02em} .page-home .strip-inner span{font-size:.85rem;color:var(--text-faint);font-weight:300} .page-home .intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center} .page-home .intro-copy h2{font-size:clamp(2.2rem,4.5vw,3.4rem);margin:18px 0 24px} .page-home .intro-copy p{color:var(--text-dim);margin-bottom:20px;font-size:1.08rem;font-weight:300} .page-home .intro-copy em{color:var(--gold);font-style:italic;font-family:var(--font-display);font-size:1.1em} .page-home .intro-stats{display:flex;gap:48px;margin-top:38px;padding-top:32px;border-top:1px solid var(--line)} .page-home .intro-stats b{font-family:var(--font-display);font-size:2.6rem;color:var(--gold);display:block;line-height:1;font-weight:500} .page-home .intro-stats span{font-size:.74rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.18em} .page-home .sig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .page-home .sig-card{background:var(--surface);padding:48px 38px;transition:background .4s,transform .4s;position:relative} .page-home .sig-card:hover{background:#fff;transform:translateY(-4px)} .page-home .sig-card .num{font-family:var(--font-display);font-size:1rem;color:var(--gold);letter-spacing:.2em} .page-home .sig-card h3{font-size:1.7rem;margin:18px 0 14px} .page-home .sig-card p{color:var(--text-dim);font-size:.96rem;font-weight:300;margin-bottom:22px} .page-home .sig-card .price{font-family:var(--font-display);font-style:italic;color:var(--gold);font-size:1.3rem} .page-home .band{background:linear-gradient(180deg,var(--surface),var(--surface-2));border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center} .page-home .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:64px} .page-home .feat .ic{width:72px;height:72px;margin:0 auto;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold);background:var(--surface)} .page-home .feat h3{font-size:1.5rem;margin:24px 0 12px} .page-home .feat p{color:var(--text-dim);font-size:.96rem;font-weight:300} .page-home .cta-final{text-align:center;background:radial-gradient(80% 120% at 50% 120%,rgba(224,169,60,.16),transparent 60%)} .page-home .cta-final h2{font-size:clamp(2.6rem,6vw,4.4rem);margin-bottom:22px} .page-home .cta-final p{color:var(--text-dim);font-size:1.15rem;font-weight:300;max-width:46ch;margin:0 auto 38px} .page-home .cta-final .hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} /* ===================== MENU ===================== */ .menu-toolbar{position:sticky;top:88px;z-index:60;background:rgba(247,240,226,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0} .toolbar-inner{display:flex;align-items:center;gap:20px;flex-wrap:nowrap} .cat-nav{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--gold) transparent} .cat-nav::-webkit-scrollbar{height:4px}.cat-nav::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px} .cat-nav a{white-space:nowrap;font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);padding:9px 16px;border-radius:2px;border:1px solid transparent;transition:.25s} .cat-nav a:hover,.cat-nav a.active{color:var(--burgundy);border-color:var(--line)} .veg-toggle{display:flex;align-items:center;gap:10px;font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);cursor:pointer;white-space:nowrap;user-select:none} .veg-toggle input{display:none} .veg-toggle .sw{width:40px;height:22px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);position:relative;transition:.25s} .veg-toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text-faint);transition:.25s} .veg-toggle input:checked + .sw{background:rgba(78,122,52,.25)} .veg-toggle input:checked + .sw::after{transform:translateX(18px);background:#4E7A34} .menu-section{padding:90px 0 0;scroll-margin-top:170px} .menu-section .ms-head{display:flex;align-items:baseline;gap:24px;margin-bottom:14px} .menu-section .ms-num{font-family:var(--font-display);font-style:italic;font-size:1.5rem;color:var(--gold)} .menu-section h2{font-size:clamp(2rem,4vw,3rem);font-weight:500;white-space:nowrap} .menu-section .ms-rule{flex:1;height:1px;background:var(--line)} .menu-section .ms-blurb{color:var(--text-dim);font-weight:300;max-width:64ch;margin-bottom:40px;font-size:1rem} .menu-list{display:grid;grid-template-columns:1fr 1fr;gap:0 64px} .m-item{padding:22px 0;border-bottom:1px solid var(--line-soft)} .m-item .m-top{display:flex;align-items:baseline;gap:14px} .m-item .m-name{font-family:var(--font-body);font-weight:500;font-size:1.08rem;color:var(--cream);letter-spacing:.01em;display:flex;flex-wrap:wrap;gap:9px;align-items:center} .m-item .m-dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);min-width:20px} .m-item .m-price{font-size:1.28rem;white-space:nowrap} .m-item .m-desc{font-size:.9rem;color:var(--text-faint);font-weight:300;margin-top:6px;max-width:52ch} .m-variants{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px} .m-variants span{font-size:.74rem;color:var(--text-dim);border:1px solid var(--line);border-radius:2px;padding:3px 9px;font-weight:300} .m-variants b{font-size:1rem} .allergen{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-md);padding:26px 30px;margin-top:70px;color:var(--text-dim);font-weight:300;font-size:.95rem;background:var(--surface)} .allergen svg{flex:none;color:var(--gold);margin-top:3px} .allergen b{color:var(--cream);font-weight:500} .menu-foot{text-align:center;padding:90px 0} .menu-foot p{color:var(--text-dim);margin-bottom:26px;font-family:var(--font-display);font-style:italic;font-size:1.6rem} .menu-foot .btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} /* ===================== ORDER ===================== */ .order-layout{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:start;padding:50px 0 120px} .fulfil{display:flex;gap:0;border:1px solid var(--line);border-radius:2px;margin:36px 0 8px;max-width:360px;overflow:hidden;background:var(--surface)} .fulfil button{flex:1;border:none;background:transparent;padding:14px;font-family:var(--font-body);font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);cursor:pointer;transition:.25s} .fulfil button.on{background:var(--burgundy);color:var(--on-dark)} .order-tools{position:sticky;top:88px;z-index:50;background:rgba(247,240,226,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0} .ot-inner{display:flex;gap:16px;align-items:center} .cat-tabs{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:thin;transition:opacity .25s} .cat-tabs::-webkit-scrollbar{height:4px}.cat-tabs::-webkit-scrollbar-thumb{background:var(--gold)} .cat-tabs a{white-space:nowrap;font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);padding:9px 15px;border:1px solid transparent;border-radius:2px} .cat-tabs a.active,.cat-tabs a:hover{color:var(--burgundy);border-color:var(--line)} .o-section{padding:50px 0 6px;scroll-margin-top:170px} .o-section h2{font-size:1.9rem;font-weight:500;margin-bottom:6px} .o-section>p{color:var(--text-dim);font-weight:300;font-size:.95rem;margin-bottom:26px;max-width:70ch} .o-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .o-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;display:flex;flex-direction:column;gap:12px;transition:border-color .3s,transform .3s,box-shadow .3s} .o-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow-sm)} .o-card .o-name{font-family:var(--font-body);font-weight:500;font-size:1.05rem;color:var(--cream);display:flex;gap:8px;flex-wrap:wrap;align-items:center} .o-card .o-desc{font-size:.85rem;color:var(--text-faint);font-weight:300;flex:1} .o-card select{font-family:var(--font-body);font-size:.85rem;padding:9px 11px;border:1px solid var(--line);border-radius:2px;background:var(--bg);color:var(--text);width:100%} .o-card .o-foot{display:flex;align-items:center;justify-content:space-between;gap:10px} .o-card .o-price{font-family:var(--font-display);font-style:italic;color:var(--gold);font-size:1.35rem} .add-btn{background:transparent;color:var(--burgundy);border:1px solid var(--line);font-family:var(--font-body);font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:10px 18px;border-radius:2px;cursor:pointer;transition:.25s} .add-btn:hover{background:var(--burgundy);color:var(--on-dark)} .cart{position:sticky;top:112px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm)} .cart-head{padding:22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)} .cart-head h3{font-size:1.4rem;font-weight:500} .cart-head .count{background:var(--gold-bright);color:#3a2407;font-family:var(--font-body);font-weight:600;font-size:.72rem;border-radius:999px;padding:2px 9px;margin-left:8px} .cart-head .ch-total{font-family:var(--font-display);font-style:italic;color:var(--gold);font-size:1.3rem} .cart-body{max-height:42vh;overflow-y:auto;padding:6px 22px} .cart-empty{text-align:center;color:var(--text-faint);padding:46px 10px;font-weight:300;font-size:.92rem} .cart-empty svg{opacity:.5;margin-bottom:14px;color:var(--gold)} .ci{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line-soft);align-items:flex-start} .ci-main{flex:1} .ci-name{font-weight:500;font-size:.92rem;color:var(--cream)} .ci-var{font-size:.74rem;color:var(--text-faint)} .ci-price{font-family:var(--font-display);font-style:italic;color:var(--gold);font-size:1.05rem;white-space:nowrap} .qty{display:inline-flex;align-items:center;margin-top:10px;border:1px solid var(--line);border-radius:2px;overflow:hidden} .qty button{width:28px;height:26px;border:none;background:var(--bg);color:var(--burgundy);font-size:1rem;cursor:pointer;line-height:1} .qty button:hover{background:var(--surface-2)} .qty span{min-width:30px;text-align:center;font-weight:500;font-size:.85rem;color:var(--cream)} .cart-foot{padding:22px;border-top:1px solid var(--line)} .cart-row{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:10px;color:var(--text-dim);font-weight:300} .cart-row.total{font-family:var(--font-display);font-size:1.5rem;color:var(--cream);margin-top:12px;padding-top:14px;border-top:1px solid var(--line)} .cart-row.total span:last-child{color:var(--gold);font-style:italic} .cart-foot .btn{width:100%;justify-content:center;margin-top:14px} .minice{font-size:.78rem;color:var(--orange);text-align:center;margin-top:10px;font-weight:300} .modal-bg{position:fixed;inset:0;background:rgba(42,16,12,.55);backdrop-filter:blur(6px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px} .modal-bg.open{display:flex} .modal{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);max-width:520px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow)} .modal-head{padding:24px 28px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center} .modal-head h3{font-size:1.6rem;font-weight:500} .modal-head button{background:none;border:none;font-size:1.7rem;cursor:pointer;color:var(--text-dim);line-height:1} .modal-head button:hover{color:var(--burgundy)} .modal-body{padding:28px} .field{margin-bottom:18px} .field label{display:block;font-family:var(--font-body);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;color:var(--text-dim)} .field input,.field textarea,.field select{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:2px;font-family:var(--font-body);font-weight:300;font-size:.95rem;background:var(--surface);color:var(--text);transition:border-color .25s} .field input::placeholder,.field textarea::placeholder{color:var(--text-faint)} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .note-box{border:1px solid var(--line);background:rgba(224,169,60,.09);border-radius:var(--r-sm);padding:14px 16px;font-size:.82rem;color:var(--text-dim);font-weight:300;margin-bottom:22px;line-height:1.6} .note-box b{color:var(--gold-deep);font-weight:600} .dev-flag{font-size:.78rem;border:1px dashed var(--line);color:var(--text-faint);border-radius:var(--r-sm);padding:12px 14px;margin-top:18px;text-align:left;font-weight:300;line-height:1.6} .dev-flag b{color:var(--gold-deep)} .confirm{text-align:center;padding:24px 6px} .confirm .tick{width:74px;height:74px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;margin:0 auto 20px} .confirm h3{font-size:1.9rem;font-weight:500;margin-bottom:12px} .confirm p{color:var(--text-dim);margin-bottom:8px;font-weight:300} .modal .btn{width:100%;justify-content:center;margin-top:8px} /* ===================== BOOK ===================== */ .page-book .book-wrap{display:grid;grid-template-columns:1fr 1.05fr;min-height:100vh} .page-book .book-side{padding:170px 60px 80px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(165deg,var(--burgundy),var(--burgundy-deep));color:var(--on-dark)} .page-book .book-side .eyebrow{color:var(--gold-bright)} .page-book .book-side .eyebrow::before{color:var(--gold-bright)} .page-book .book-side h1{font-size:clamp(2.4rem,4.5vw,3.6rem);font-weight:500;margin:18px 0 20px;position:relative;color:#fff} .page-book .book-side>p{color:rgba(246,236,218,.82);font-weight:300;max-width:42ch;margin-bottom:36px;position:relative} .page-book .b-info{position:relative;display:flex;flex-direction:column;gap:22px} .page-book .b-info div{display:flex;gap:16px;align-items:center} .page-book .b-info .ic{width:42px;height:42px;border-radius:50%;border:1px solid rgba(246,236,218,.3);display:grid;place-items:center;color:var(--gold-bright);flex:none} .page-book .b-info b{display:block;color:#fff;font-family:var(--font-body);font-weight:500;font-size:.95rem} .page-book .b-info span{color:rgba(246,236,218,.6);font-size:.88rem;font-weight:300} .page-book .book-form{padding:170px 60px 80px;display:flex;flex-direction:column;justify-content:center;background:var(--bg)} .page-book .form-card{max-width:520px;width:100%;margin:0 auto} .page-book .book-form h2{font-size:2.2rem;font-weight:500;margin-bottom:8px} .page-book .book-form .sub{color:var(--text-dim);font-weight:300;margin-bottom:30px} .party-pick{display:flex;gap:8px;flex-wrap:wrap} .party-pick button{flex:1;min-width:44px;padding:12px;border:1px solid var(--line);background:var(--surface);border-radius:2px;font-family:var(--font-body);font-weight:500;cursor:pointer;color:var(--text-dim);transition:.25s} .party-pick button.on{background:var(--burgundy);color:var(--on-dark);border-color:var(--burgundy)} .page-book .book-form .btn{width:100%;justify-content:center;margin-top:10px} .book-confirm{display:none;text-align:center;animation:fade .5s} @keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1}} .book-confirm .tick{width:80px;height:80px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;margin:0 auto 22px} .book-confirm h2{font-size:2.2rem} .book-confirm .summary{border:1px solid var(--line);border-radius:var(--r-md);padding:24px;margin:24px 0;text-align:left;background:var(--surface)} .book-confirm .summary div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:.95rem;font-weight:300} .book-confirm .summary div:last-child{border:none} .book-confirm .summary span:first-child{color:var(--text-faint)} .book-confirm .summary span:last-child{color:var(--cream);font-weight:500} /* ===================== ABOUT ===================== */ .page-about .story{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .page-about .story h2{font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:500;margin-bottom:22px} .page-about .story p{color:var(--text-dim);margin-bottom:18px;font-size:1.06rem;font-weight:300} .page-about .story em{color:var(--gold);font-style:italic} .page-about .values{background:linear-gradient(180deg,var(--surface),var(--surface-2));border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .page-about .val-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:64px} .page-about .val{background:var(--surface);padding:42px;display:flex;gap:24px;align-items:flex-start} .page-about .val .ic{width:54px;height:54px;flex:none;border-radius:50%;border:1px solid var(--line);color:var(--gold);display:grid;place-items:center} .page-about .val h3{font-size:1.5rem;font-weight:500;margin-bottom:10px} .page-about .val p{color:var(--text-dim);font-size:.96rem;font-weight:300} .page-about .timeline{max-width:760px;margin:64px auto 0} .page-about .tl{display:flex;gap:28px;padding:0 0 44px;position:relative} .page-about .tl:not(:last-child)::before{content:"";position:absolute;left:25px;top:54px;bottom:-4px;width:1px;background:var(--line)} .page-about .tl .dot{width:52px;height:52px;flex:none;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-family:var(--font-display);font-style:italic;font-size:1.3rem;background:var(--bg);z-index:1} .page-about .tl h3{font-size:1.4rem;font-weight:500;margin-bottom:6px} .page-about .tl p{color:var(--text-dim);font-weight:300} .page-about .band{background:linear-gradient(180deg,var(--surface),var(--surface-2));border-top:1px solid var(--line);text-align:center} .page-about .band .btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:8px} /* ===================== CONTACT ===================== */ .page-contact .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .info-card{border:1px solid var(--line);border-radius:var(--r-md);padding:34px;margin-bottom:24px;background:var(--surface)} .info-card h3{font-size:1.5rem;font-weight:500;margin-bottom:22px} .info-row{display:flex;gap:18px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line-soft)} .info-row:last-child{border:none} .info-row .ic{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line);color:var(--gold);display:grid;place-items:center} .info-row b{display:block;color:var(--cream);font-family:var(--font-body);font-weight:500;font-size:.95rem;margin-bottom:2px} .info-row span,.info-row a{color:var(--text-dim);font-size:.94rem;font-weight:300} .info-row a:hover{color:var(--burgundy)} .hours-table{width:100%;border-collapse:collapse} .hours-table td{padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:.95rem;font-weight:300;color:var(--text-dim)} .hours-table td:last-child{text-align:right;color:var(--gold-deep);font-weight:400} .hours-table tr:last-child td{border:none} .map-embed{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;height:300px} .map-embed iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.25) contrast(1.02)} .csent{display:none;border:1px solid rgba(78,122,52,.4);background:rgba(78,122,52,.1);color:#3f6b2c;border-radius:var(--r-md);padding:22px;text-align:center;font-weight:400} /* ---------- PRICES ---------- Every price on the site renders the same way: Cormorant italic, gold, with lining tabular figures so columns of prices line up. Individual rules above only set size. ---------------------------------- */ .page-home .sig-card .price, .m-item .m-price, .m-variants b, .o-card .o-price, .cart-head .ch-total, .ci-price, .cart-row.total span:last-child, .cb-total{ font-family:var(--font-display); font-style:italic; font-weight:500; color:var(--gold); font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; } /* subtotal / delivery stay in the body font on purpose so the TOTAL leads, but their figures still align in a column */ .cart-row span:last-child{font-variant-numeric:lining-nums tabular-nums} /* ===================== RESPONSIVE ===================== */ @media (max-width:980px){ .order-layout{grid-template-columns:1fr} .o-grid{grid-template-columns:1fr} .cart{position:fixed;left:0;right:0;bottom:0;top:auto;border-radius:var(--r-lg) var(--r-lg) 0 0;z-index:120;transform:translateY(calc(100% - 70px));transition:transform .4s;max-height:85vh} .cart.open{transform:none} .cart-head{cursor:pointer} } @media (max-width:880px){ .section-pad{padding:80px 0} .nav-links{position:fixed;inset:88px 0 auto 0;flex-direction:column;background:rgba(247,240,226,.98);backdrop-filter:blur(16px);padding:20px 28px;gap:0;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .4s;align-items:stretch} .nav-links.open{transform:none} .nav-links a{padding:18px 4px;border-bottom:1px solid var(--line-soft)} .menu-toggle{display:block} .nav-cta .btn-ghost{display:none} .page-home .intro-grid,.page-home .sig-grid,.page-home .feat-grid, .page-about .story,.page-about .val-grid,.page-contact .contact-grid{grid-template-columns:1fr;gap:48px} .page-home .sig-grid,.page-about .val-grid{gap:1px} .page-home .strip-inner{grid-template-columns:1fr} .page-home .strip-inner div{border-right:none;border-bottom:1px solid var(--line)} .page-home .strip-inner div:last-child{border-bottom:none} .page-book .book-wrap{grid-template-columns:1fr} .page-book .book-side{padding:130px 28px 70px} .page-book .book-form{padding:70px 28px} .menu-list{grid-template-columns:1fr;gap:0} .field-row{grid-template-columns:1fr} body.page-order{padding-bottom:80px} } /* pull-quote card — replaces the old logo-on-burgundy panels */ .pull-quote{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold); border-radius:var(--r-md);padding:56px 48px;position:relative;box-shadow:var(--shadow-sm)} .pull-quote .pq-mark{font-family:var(--font-display);font-size:5rem;color:var(--gold);opacity:.5;line-height:.6;display:block;margin-bottom:8px} .pull-quote p{font-family:var(--font-display);font-style:italic;font-weight:400; font-size:clamp(1.7rem,2.6vw,2.4rem);color:var(--cream);line-height:1.25;margin-bottom:22px} .pull-quote .pq-by{font-family:var(--font-body);font-weight:500;font-size:.7rem;letter-spacing:.26em; text-transform:uppercase;color:var(--text-faint)} /* ============================================================ Search boxes (menu + order) ============================================================ */ .searchbox{position:relative;display:flex;align-items:center;flex:none;width:270px} .searchbox svg{position:absolute;left:12px;color:var(--text-faint);pointer-events:none} .searchbox input{width:100%;font-family:var(--font-body);font-weight:300;font-size:.88rem; padding:10px 32px 10px 34px;border:1px solid var(--line);border-radius:2px; background:var(--surface);color:var(--text);transition:border-color .25s} .searchbox input::placeholder{color:var(--text-faint)} .searchbox input:focus{outline:none;border-color:var(--gold)} .searchbox input::-webkit-search-cancel-button{display:none} .sb-clear{position:absolute;right:6px;background:none;border:none;font-size:1.25rem;line-height:1; color:var(--text-faint);cursor:pointer;padding:4px 6px} .sb-clear:hover{color:var(--burgundy)} .menu-toolbar .tools{display:flex;align-items:center;gap:16px;flex:none} .search-count{font-size:.78rem;color:var(--text-faint);letter-spacing:.06em;padding:18px 0 0;font-weight:300} .no-results{text-align:center;padding:70px 20px;color:var(--text-dim)} .no-results .nr-title{font-family:var(--font-display);font-size:1.9rem;color:var(--cream);margin-bottom:8px} .no-results p{font-weight:300;font-size:.95rem} /* spice + variant selects on order cards */ .o-opts{display:flex;gap:8px;flex-wrap:wrap} .o-opts select{flex:1 1 140px;min-width:0} .spice-sel{color:var(--text-dim)} .add-btn.added{background:var(--burgundy);color:var(--on-dark);border-color:var(--burgundy)} /* ============================================================ Live open / closed status chip ============================================================ */ .open-status{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);font-weight:500; font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:7px 13px;border-radius:99px; border:1px solid var(--line);white-space:nowrap} .open-status i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;position:relative} .open-status em{font-style:normal;font-weight:300;letter-spacing:.04em;text-transform:none;opacity:.8} .open-status.is-open{color:#4E7A34;border-color:rgba(78,122,52,.4);background:rgba(78,122,52,.08)} .open-status.is-open i{animation:ettPulse 2.4s ease-out infinite} .open-status.is-shut{color:var(--text-faint);border-color:var(--line);background:rgba(74,42,30,.04)} @keyframes ettPulse{ 0%{box-shadow:0 0 0 0 rgba(78,122,52,.55)} 70%{box-shadow:0 0 0 7px rgba(78,122,52,0)} 100%{box-shadow:0 0 0 0 rgba(78,122,52,0)} } /* contact page hours: highlight today */ .hours-table tr.is-today td{color:var(--cream);font-weight:400} .hours-table tr.is-today td:first-child::after{content:"Today";font-size:.6rem;letter-spacing:.16em; text-transform:uppercase;color:var(--gold);border:1px solid var(--line);border-radius:99px; padding:2px 7px;margin-left:10px;vertical-align:middle} .hours-table tr.is-today td:last-child{color:var(--gold-deep);font-weight:500} @media (max-width:1080px){ .searchbox{width:200px} } @media (max-width:880px){ .nav-cta .open-status{display:none} .menu-toolbar .toolbar-inner{flex-wrap:wrap} .menu-toolbar .tools{width:100%;justify-content:space-between} .searchbox{flex:1;width:auto} .ot-inner{flex-wrap:wrap} .ot-inner .searchbox{width:100%} .cat-tabs{width:100%;flex:none} } /* ============================================================ Sticky basket bar (order page) — always reachable ============================================================ */ .cart-bar{position:fixed;left:0;right:0;bottom:0;z-index:130; background:rgba(255,253,248,.97);backdrop-filter:blur(16px) saturate(1.2); border-top:1px solid var(--line);box-shadow:0 -12px 34px -18px rgba(90,16,34,.4); transition:transform .38s cubic-bezier(.2,.8,.2,1)} .cart-bar.tucked{transform:translateY(115%)} .cart-bar-inner{display:flex;align-items:center;gap:16px;max-width:var(--maxw);margin:0 auto;padding:12px 28px} .cb-main{flex:1;min-width:0;display:flex;align-items:center;gap:14px;background:none;border:none; cursor:pointer;text-align:left;font-family:var(--font-body);padding:4px 0} .cb-icon{position:relative;width:40px;height:40px;flex:none;border:1px solid var(--line);border-radius:50%; display:grid;place-items:center;color:var(--burgundy);transition:border-color .3s,color .3s} .cart-bar.has-items .cb-icon{border-color:var(--gold);color:var(--gold-deep)} .cb-icon b{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:99px; background:var(--surface-2);color:var(--text-faint);font-family:var(--font-body);font-size:.64rem;font-weight:700; display:grid;place-items:center;transition:background .3s,color .3s,transform .3s} .cart-bar.has-items .cb-icon b{background:var(--gold-bright);color:#3a2407} .cb-icon b.bump{transform:scale(1.35)} .cb-text{min-width:0;overflow:hidden} .cb-text b{display:block;font-family:var(--font-body);font-weight:500;font-size:.94rem;color:var(--ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cb-text span{font-size:.78rem;color:var(--text-faint);font-weight:300; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} .cb-total{font-family:var(--font-display);font-style:italic;font-size:1.5rem;color:var(--gold); font-variant-numeric:tabular-nums;flex:none} .cart-bar .btn{flex:none} .cart-bar .btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none} body.page-order{padding-bottom:80px} @media (max-width:980px){ /* the bar replaces the old peeking cart panel */ .cart{transform:translateY(100%)} .cart.open{transform:none} .cart-bar-inner{padding:10px 18px;gap:12px} .cb-total{font-size:1.25rem} } @media (max-width:560px){ .cb-text span{display:none} .cart-bar .btn{padding:13px 18px;letter-spacing:.1em} } /* ===================================================================== SUNDAY BUFFET ===================================================================== */ .buffet-band{background:linear-gradient(145deg,var(--burgundy),var(--burgundy-deep)); border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden} .buffet-band::after{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%; background:radial-gradient(circle,rgba(224,169,60,.22),transparent 62%);pointer-events:none} .bb-inner{display:flex;align-items:center;justify-content:space-between;gap:44px;padding:56px 0;position:relative;z-index:1} .bb-copy{max-width:none} .bb-copy .eyebrow{color:var(--gold-bright)} .bb-copy .eyebrow::before{color:var(--gold-bright)} .bb-copy h2{color:#fff;font-size:clamp(2.2rem,4vw,3.2rem);margin:14px 0 10px} .bb-copy h2 em{font-style:italic;color:var(--gold-bright)} .bb-tag{color:rgba(246,236,218,.78);font-weight:300;font-size:1.05rem;margin-bottom:22px} .bb-sittings{display:flex;flex-direction:column;border:1px solid rgba(246,236,218,.22);border-radius:10px;overflow:hidden;max-width:430px} .bb-row{display:grid;grid-template-columns:86px 1fr auto;gap:14px;align-items:baseline;padding:13px 18px;border-bottom:1px solid rgba(246,236,218,.12)} .bb-row:last-child{border-bottom:none} .bb-row.is-child{background:rgba(224,169,60,.10)} .bb-row b{color:#fff;font-family:var(--font-body);font-weight:500;font-size:.92rem} .bb-row span{color:rgba(246,236,218,.6);font-size:.85rem;font-weight:300} .bb-row .bb-price{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--gold-bright); font-size:1.2rem;font-variant-numeric:lining-nums tabular-nums} .bb-facts{display:flex;gap:14px;flex-wrap:wrap} .bb-fact{display:flex;align-items:center;gap:10px;border:1px solid rgba(246,236,218,.24);border-radius:99px; padding:9px 18px;color:var(--on-dark);font-size:.9rem;font-weight:300} .bb-fact svg{color:var(--gold-bright);flex:none} .bb-fact b{font-weight:500;font-family:var(--font-body)} .bb-price{font-family:var(--font-display);font-style:italic;color:var(--gold-bright);font-size:1.15rem; font-variant-numeric:lining-nums tabular-nums} .bb-cta{flex:none;display:flex;flex-direction:column;gap:12px} /* menu-page buffet card */ .buffet-card{border:1px solid var(--gold);border-left:3px solid var(--gold);border-radius:var(--r-md); background:linear-gradient(120deg,rgba(224,169,60,.10),var(--surface) 70%); padding:30px 34px;margin-top:46px;display:flex;align-items:center;justify-content:space-between;gap:28px} .buffet-card h3{font-size:1.7rem;margin-bottom:6px} .buffet-card h3 em{font-style:italic;color:var(--gold)} .buffet-card p{color:var(--text-dim);font-weight:300;font-size:.95rem} .buffet-card .bc-price{font-family:var(--font-display);font-style:italic;color:var(--gold);font-size:1.2rem;margin-top:8px; font-variant-numeric:lining-nums tabular-nums} .buffet-card .btn{flex:none} /* booking page note when a buffet day is picked */ .buffet-note{display:none;margin-top:10px;border:1px solid var(--line);border-left:3px solid var(--gold); border-radius:var(--r-sm);background:rgba(224,169,60,.08);padding:12px 15px;font-size:.85rem; color:var(--text-dim);font-weight:300;line-height:1.6} .buffet-note.show{display:block} .buffet-note b{color:var(--gold-deep);font-weight:600} @media (max-width:880px){ .bb-inner{flex-direction:column;align-items:flex-start;gap:28px;padding:48px 0} .bb-cta{width:100%} .bb-cta .btn{width:100%;justify-content:center} .buffet-card{flex-direction:column;align-items:flex-start;gap:18px} .buffet-card .btn{width:100%;justify-content:center} } /* ---- collection offer ---- */ .offer-line{margin:12px 0 0;font-size:.86rem;font-weight:300;color:var(--text-dim)} .offer-line b{color:var(--gold-deep);font-weight:600} .hero-offer{display:inline-flex;align-items:center;gap:9px;margin:0 auto 22px; border:1px solid var(--gold);border-radius:99px;padding:7px 18px;background:rgba(224,169,60,.13); font-size:.76rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)} .hero-offer::before{content:"\1F6CD";filter:grayscale(.2)} /* ---- delivery postcode check ---- */ .pc-check{margin-top:16px;max-width:460px;border:1px solid var(--line);border-left:3px solid var(--gold); border-radius:var(--r-sm);background:var(--surface);padding:16px 18px} .pc-check[hidden]{display:none} .pc-check label{display:block;font-size:.84rem;font-weight:300;color:var(--text-dim);margin-bottom:10px} .pc-check label b{color:var(--gold-deep);font-weight:600} .pc-row{display:flex;gap:8px} .pc-row input{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--line);border-radius:2px; font-family:var(--font-body);font-weight:300;font-size:.92rem;background:var(--bg);color:var(--text); text-transform:uppercase} .pc-row input::placeholder{text-transform:none;color:var(--text-faint)} .pc-row input:focus{outline:none;border-color:var(--gold)} .pc-row .btn{flex:none;padding:11px 18px} .pc-result{margin-top:10px;font-size:.84rem;font-weight:400;min-height:1.2em} .pc-result.good{color:#3F7A34} .pc-result.warn{color:var(--gold-deep)} .pc-result.bad{color:var(--orange)} /* ---- legal / policy pages ---- */ .legal-hero{padding:150px 0 40px;text-align:center;border-bottom:1px solid var(--line)} .legal-hero .eyebrow{color:var(--gold-deep)} .legal-hero h1{font-size:clamp(2.4rem,5vw,3.6rem);margin:14px 0 10px} .legal-hero p{color:var(--text-faint);font-weight:300;font-size:.9rem} .legal-body{max-width:760px;margin:0 auto;padding:50px 0 80px} .legal-body h2{font-size:1.6rem;margin:40px 0 12px;padding-top:8px} .legal-body h2:first-child{margin-top:0} .legal-body h3{font-size:1.15rem;font-family:var(--font-body);font-weight:600;color:var(--ink);margin:24px 0 8px} .legal-body p,.legal-body li{color:var(--text);font-weight:300;line-height:1.75;font-size:1rem} .legal-body p{margin-bottom:14px} .legal-body ul{margin:0 0 16px 22px} .legal-body li{margin-bottom:7px} .legal-body a{color:var(--burgundy);text-decoration:underline;text-underline-offset:2px} .legal-body a:hover{color:var(--gold-deep)} .legal-body strong{font-weight:600;color:var(--ink)} .legal-note{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r-sm); background:var(--surface);padding:16px 20px;margin:20px 0;font-size:.92rem;color:var(--text-dim)} .legal-toc{display:flex;flex-wrap:wrap;gap:8px 18px;margin:26px 0 6px;padding-bottom:26px;border-bottom:1px solid var(--line)} .legal-toc a{font-size:.86rem;color:var(--text-dim);text-decoration:none;font-weight:400} .legal-toc a:hover{color:var(--burgundy)} .footer-legal{display:flex;gap:18px;flex-wrap:wrap} .footer-legal a{font-size:.82rem;color:var(--text-dim)} .footer-legal a:hover{color:var(--gold-bright)} /* ---- add-ons at checkout ---- */ .upsell-intro{font-size:.9rem;color:var(--text-dim);font-weight:300;margin-bottom:16px} .upsell-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px} .upsell-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;position:relative; border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface); padding:14px 15px;cursor:pointer;text-align:left;font-family:var(--font-body); transition:border-color .2s,background .2s} .upsell-card:hover{border-color:var(--gold);background:var(--surface-2)} .upsell-card .u-name{font-size:.9rem;font-weight:400;color:var(--cream);line-height:1.3;padding-right:20px} .upsell-card .u-price{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--gold); font-size:1.05rem;font-variant-numeric:lining-nums tabular-nums} .upsell-card .u-plus{position:absolute;top:10px;right:12px;width:22px;height:22px;border-radius:50%; background:var(--burgundy);color:var(--on-dark);display:grid;place-items:center; font-size:.95rem;line-height:1;font-weight:500} .upsell-card.added{border-color:#3F7A34;background:rgba(63,122,52,.08)} .upsell-card.added .u-plus{background:#3F7A34} @media (max-width:480px){ .upsell-grid{grid-template-columns:1fr} }