@charset "utf-8";

/* Main page: its sections. Fonts, colors, the header and the footer are in site.css; the base, buttons, section
   headings, product cards, the cup, the toast and the cookie notice — in shop.css */

/* FIRST SCREEN: photo and heading; the banners overlap its bottom. The height keeps the top of the banners above
   the fold, so it's clear the page goes on */

/* background: the same dark teal as behind the tea table in the photo, so the photo's left edge melts into it
   seamlessly. The height follows the viewport with a cap: search bots render the page in a window as tall as the page */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(540px,calc(100svh - var(--top-h) - var(--bar-h) - var(--nav-h) - 96px),900px);overflow:hidden;background:radial-gradient(900px 620px at 72% 18%,#10242b,transparent 70%),linear-gradient(180deg,#0a171c 0%,#081215 55%,#060c0e 100%);color:var(--cream);}
/* the photo spans from the middle of the page to the right edge. On wide screens the heading is bigger, so the
   photo moves further right to keep the heading off the gaiwan */
.hero-pic{position:absolute;top:0;right:0;bottom:0;left:calc(50% - 120px + max(0px,(100vw - 1600px) * .3));z-index:-2;display:block;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%);mask-image:linear-gradient(90deg,transparent,#000 18%);}
/* anchored right: the crop takes the left edge with the chahai, which fades out anyway; the figurine stays in frame */
.hero-bg{width:100%;height:100%;object-fit:cover;object-position:100% 50%;}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,14,16,.55) 0%,rgba(13,14,16,.18) 42%,transparent 62%),linear-gradient(0deg,rgba(13,14,16,.6) 0%,transparent 30%);}
.hero-in{padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(56px,6vw,96px);}
.hero-banners .hero-in{padding-bottom:calc(clamp(56px,6vw,96px) + 64px);}
.hero h1{max-width:11.5em;font-family:var(--serif);font-weight:600;font-size:clamp(42px,4vw + 14px,90px);line-height:.98;letter-spacing:-.015em;color:#fff;text-wrap:balance;}
.hero-lead{max-width:34em;margin-top:24px;color:rgba(241,233,218,.86);font-size:clamp(16px,.35vw + 14.5px,19px);line-height:1.6;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;}
.hero-facts{display:flex;flex-wrap:wrap;gap:14px 48px;max-width:640px;margin-top:40px;padding-top:26px;border-top:1px solid rgba(241,233,218,.2);}
.hero-facts li{display:flex;flex-direction:column;color:rgba(241,233,218,.72);font-size:14px;}
.hero-facts b{color:#fff;font-family:var(--serif);font-weight:600;font-size:36px;line-height:1.1;font-variant-numeric:lining-nums;}

/* BANNERS: scrolling snaps to slides; swiped by finger, moved by the buttons and on their own every 5 s (home.js) */

.slider{position:relative;z-index:2;margin-top:-64px;}
.slider-box{position:relative;overflow:hidden;border-radius:var(--r);background:var(--paper-2);box-shadow:0 28px 60px -26px rgba(8,17,14,.6);}
/* isolated: the z-index of the slide text stays inside the strip, under the arrows (otherwise the text covers the left
   one and takes its clicks), and the slides don't need GPU layers of their own */
.slides{isolation:isolate;display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;}
.slides::-webkit-scrollbar{display:none;}
.slider-btn{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:var(--shadow);color:var(--ink);opacity:0;transition:opacity .2s,color .2s;}
.slider-btn:hover{color:var(--jade);}
.slider-btn .ic{width:22px;height:22px;stroke-width:2;}
.slider-prev{left:14px;}
.slider-next{right:14px;}
.slider-box:hover .slider-btn,.slider-btn:focus-visible{opacity:1;}
/* dots on a dark backing: white dots get lost on a light banner */
.slider-dots{position:absolute;bottom:10px;left:50%;display:flex;padding:0 4px;border-radius:12px;background:rgba(10,20,16,.4);transform:translateX(-50%);}
.slider-dots button{width:24px;height:24px;padding:8px;background:rgba(255,255,255,.65);background-clip:content-box;border-radius:12px;transition:width .25s,background-color .25s;}
.slider-dots button[aria-current="true"]{width:42px;background-color:#fff;}

/* a slide: a 4:1 frame with everything inside sized in fractions of its width (cqw), so it scales as a whole. The
   product photo is on white: multiply dissolves the white into the paper, leaving the heap of leaves; narrow slides
   keep only the title and the price */
.slide{position:relative;display:flex;flex:0 0 100%;align-items:center;aspect-ratio:4/1;overflow:hidden;container-type:inline-size;scroll-snap-align:start;color:var(--ink);background:linear-gradient(100deg,var(--paper) 30%,var(--paper-2));}
.st-text{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;max-width:60%;padding-left:6cqw;}
.st-text .eyebrow{font-size:max(10px,.95cqw);}
.st-title{margin-top:.7cqw;font-family:var(--serif);font-weight:600;font-size:5.4cqw;line-height:.92;letter-spacing:-.015em;}
.st-lead{max-width:36em;margin-top:1.1cqw;color:var(--ink-2);font-size:1.3cqw;line-height:1.45;}
.st-brew{display:flex;gap:1.8cqw;margin-top:1.1cqw;color:var(--ink-2);font-size:1.05cqw;font-weight:600;}
.st-brew span{display:inline-flex;align-items:center;gap:.45cqw;white-space:nowrap;}
.st-brew .ic{width:1.35cqw;height:1.35cqw;color:var(--copper);}
.st-buy{display:flex;align-items:center;gap:2cqw;margin-top:1.8cqw;}
.st-price{display:flex;align-items:baseline;gap:.6cqw;color:var(--ink-2);font-size:1.15cqw;white-space:nowrap;}
.st-price b{color:var(--ink);font-family:var(--serif);font-weight:600;font-size:3.1cqw;line-height:1;font-variant-numeric:lining-nums;}
/* the ruble sign in the text font: the heading font has no such glyph, and the fallback one came out big and bold */
.st-price .rub{margin-left:.16em;font-family:var(--sans);font-weight:500;font-size:.6em;}
.st-price s{color:var(--ink-3);font-size:1.5cqw;}
.st-buy .btn{min-height:3.7cqw;padding:0 2.1cqw;gap:.8cqw;font-size:1.12cqw;}
.st-buy .btn .ic{width:1.35cqw;height:1.35cqw;}
/* the whole banner is the link: the button responds to hovering anywhere on it */
.slide:hover .btn-jade{background:var(--jade-2);}
.slide:hover .btn .ic{transform:translateX(3px);}
/* product photos sit on near-white, which multiply would reveal as a square: the photo is a bit brighter, so the
   near-white turns white */
.slide .st-pic{position:absolute;top:50%;right:5cqw;width:auto;height:88%;aspect-ratio:1;object-fit:contain;filter:brightness(1.04);mix-blend-mode:multiply;transform:translateY(-50%);pointer-events:none;}
/* a slide with a regular photo instead of a product: nothing to dissolve, so a rounded card */
.slide-photo .st-pic{height:82%;border-radius:2cqw;object-fit:cover;filter:none;mix-blend-mode:normal;box-shadow:0 1.2cqw 3cqw rgba(40,30,15,.2);}
@container (max-width:860px){
	.st-lead,.st-brew{display:none;}
	.st-title{font-size:6.4cqw;}
	.st-price b{font-size:3.8cqw;}
}
@container (max-width:560px){
	.st-text .eyebrow,.st-buy .btn{display:none;}
	.st-title{margin-top:0;font-size:7.2cqw;}
	.st-buy{margin-top:1.6cqw;}
	.st-price{font-size:max(10px,2.6cqw);}
	.st-price b{font-size:5cqw;}
	/* no price on a photo slide: the button stays, otherwise it isn't clear where the slide leads */
	.slide-photo .st-buy .btn{display:inline-flex;min-height:max(26px,7cqw);padding:0 max(10px,3cqw);gap:max(5px,1.4cqw);font-size:max(11px,2.9cqw);}
	.slide-photo .st-buy .btn .ic{width:max(13px,3.4cqw);height:max(13px,3.4cqw);}
}

/* PERKS */

.perks{padding-top:40px;}
.perks-in{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.perk{display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);transition:border-color .25s,box-shadow .25s,transform .25s var(--ease);}
.perk:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px);}
.perk .ic{width:46px;height:46px;padding:11px;border-radius:50%;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--jade);stroke-width:1.6;}
.perk span{display:flex;flex-direction:column;color:var(--ink-2);font-size:13.5px;line-height:1.4;}
.perk b{color:var(--ink);font-size:15px;}

/* CATEGORIES */

/* category tiles as a bento grid: one big, one tall (portrait photo) and six regular; captions along the bottom */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,15vw,230px);grid-template-areas:"a a b c" "a a b d" "e f g h";gap:16px;}
.tile{position:relative;isolation:isolate;display:block;overflow:hidden;border-radius:var(--r);background:var(--night);color:#fff;}
.tile-a{grid-area:a;}
.tile-b{grid-area:b;}
.tile-c{grid-area:c;}
.tile-d{grid-area:d;}
.tile-e{grid-area:e;}
.tile-f{grid-area:f;}
.tile-g{grid-area:g;}
.tile-h{grid-area:h;}
.tile img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform 1.2s var(--ease);}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,17,14,0) 30%,rgba(8,17,14,.8) 100%);}
.tile:hover img{transform:scale(1.06);}
.tile-t{position:absolute;right:72px;bottom:20px;left:22px;font-family:var(--serif);font-weight:600;font-size:clamp(22px,.8vw + 15px,30px);line-height:1.02;text-shadow:0 2px 18px rgba(0,0,0,.35);}
.tile-a .tile-t{bottom:28px;left:30px;font-size:clamp(30px,2vw + 14px,50px);}
/* what people buy most in the category, as a line under the title */
.tile-t small{display:block;max-width:30em;margin-top:7px;color:rgba(241,233,218,.9);font:500 13.5px/1.4 var(--sans);text-shadow:0 1px 12px rgba(0,0,0,.5);}
.tile-a .tile-t small{max-width:26em;margin-top:10px;font-size:15.5px;}
.tile-go{position:absolute;right:18px;bottom:18px;width:40px;height:40px;padding:10px;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:rgba(255,255,255,.16);color:#fff;transition:background-color .25s,border-color .25s,color .25s,transform .25s var(--ease);}
.tile:hover .tile-go{border-color:var(--amber);background:var(--amber);color:var(--ink);transform:translateX(3px);}

/* DAILY AND WEEKLY DEALS */

.deals-in{display:grid;grid-template-columns:minmax(250px,1fr) 3fr;gap:16px;}
.deals-intro{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:14px;overflow:hidden;padding:32px 30px;border-radius:var(--r);background:var(--night);color:var(--cream);}
.deals-intro::before{content:"";position:absolute;inset:auto -30% -40% auto;z-index:-1;width:120%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(232,167,74,.28),transparent);}
.deals-intro .eyebrow{color:var(--gold);}
.deals-intro h2{color:#fff;font-size:clamp(30px,1vw + 22px,40px);}
.deals-intro p{color:rgba(241,233,218,.82);}
.deals-intro .more{margin-top:auto;color:var(--amber);}
.deals .row{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}

/* BESTSELLERS: a tab per category; without JS all categories follow one another */

.row-grid{grid-template-columns:repeat(5,1fr);}
.sec-head-tabs{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;}
.tabs{display:none;gap:4px;max-width:100%;padding:5px;overflow-x:auto;border-radius:999px;background:var(--paper-2);scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.js .tabs{display:flex;}
.tabs [role="tab"]{padding:9px 18px;border-radius:999px;color:var(--ink-2);font-weight:600;font-size:14.5px;white-space:nowrap;transition:background-color .2s,color .2s;}
.tabs [role="tab"]:hover{color:var(--ink);}
.tabs [role="tab"][aria-selected="true"]{background:var(--card);box-shadow:0 1px 3px rgba(30,25,15,.14);color:var(--ink);}
.js .tab-panel.is-off{display:none;}
.panel-h{margin:36px 0 16px;font-family:var(--serif);font-weight:600;font-size:30px;}
.js .panel-h{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.tab-panel .more{margin-top:24px;}

/* "CHOOSE BY TASTE": a window onto tea hills: the full-screen photo stays put while the page scrolls over it (see
   MOTION below); the band crops it: clip-path clips fixed elements too, overflow doesn't */

.band{position:relative;isolation:isolate;margin-top:var(--sec);overflow:hidden;clip-path:inset(0);background:var(--night);color:var(--cream);}
.band-pic{position:absolute;inset:0;z-index:-2;display:block;}
.band-bg{width:100%;height:100%;object-fit:cover;object-position:50% 50%;}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,17,14,.82) 0%,rgba(8,17,14,.45) 50%,rgba(8,17,14,.12) 100%);}
.band-in{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;min-height:clamp(440px,64vh,640px);padding-top:80px;padding-bottom:80px;}
.band .eyebrow{color:var(--gold);}
.band h2{max-width:9em;font-family:var(--serif);font-weight:600;font-size:clamp(42px,3.4vw + 18px,84px);line-height:.98;letter-spacing:-.015em;color:#fff;text-wrap:balance;}
.band p{max-width:30em;color:rgba(241,233,218,.88);font-size:clamp(16px,.4vw + 14px,19.5px);}
.band .btn{margin-top:10px;}

/* HOW TO BREW: a cup seen from above: porcelain, water and tea, which "brews" once the block is scrolled into
   view: the color spreads from the center with a swirl (shop.css) */

.brew{position:relative;padding:var(--sec) 0;background:radial-gradient(1100px 520px at 12% 0%,rgba(207,168,98,.13),transparent 62%),radial-gradient(900px 500px at 100% 100%,rgba(31,91,74,.35),transparent 60%),var(--night);color:var(--cream);}
.brew .sec-head h2{color:#fff;}
.brew .sec-sub{color:rgba(241,233,218,.76);}
.brew-list{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;}
.brew-item{position:relative;display:flex;flex-direction:column;align-items:center;padding:30px 14px 24px;border:1px solid var(--night-line);border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));text-align:center;transition:border-color .3s,background-color .3s;}
.brew-item:hover{border-color:rgba(241,233,218,.32);background-color:rgba(255,255,255,.03);}
.brew-item h3{margin:22px 0 12px;font-family:var(--serif);font-weight:600;font-size:30px;line-height:1;color:#fff;}
.brew-item h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit;}
.brew-item h3 a:hover{color:var(--amber);}
/* the list is as wide as its longest line and centered in the card; its lines start at one edge */
.brew-item dl{display:grid;gap:8px;}
.brew-item dl div{display:flex;align-items:center;gap:9px;font-size:14px;}
.brew-item dt .ic{width:17px;height:17px;color:var(--gold);}
.brew-item dd{font-weight:600;white-space:nowrap;}

/* STORE AND MAP */

.visit{padding-bottom:var(--sec);}
.visit-in{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:stretch;}
.visit-about{max-width:36em;margin-top:18px;color:var(--ink-2);}
.visit-about + .visit-about{margin-top:12px;}
.contacts{display:grid;gap:12px;margin-top:26px;}
.contacts li{display:flex;align-items:center;gap:12px;font-weight:600;}
.contacts .ic{width:40px;height:40px;padding:10px;border-radius:50%;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--jade);}
.contacts a:hover{color:var(--jade);}
.visit-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
.visit-map{position:relative;min-height:460px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);box-shadow:var(--shadow);}
/* a photo while the map loads and in case it doesn't */
.visit-map-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.visit-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.visit-map-show{display:none;}

/* MOTION, only if the visitor hasn't turned it off in the system.
   First screen: the text appears like ink on paper; on scroll the photo moves slower than the page through a
   scroll-driven animation (animation-timeline); where there is none (Firefox), the photo just stays. The band is a
   window onto a still photo. Tiles and cups appear once scrolled into view.
   Keeping it light for the graphics card: one-off animations fill backwards, not both, since an animation holding
   its last frame keeps its element on a layer of its own. Whatever moves with the scroll sits under a clip: the
   browser assumes a moving element may cover anything drawn after it and puts each such element on a layer too */

@media (prefers-reduced-motion:no-preference){
	/* without scroll-driven animations (Firefox) the band photo is simply fixed */
	.band-pic{position:fixed;}
	/* the heap of tea in the banner turns under the pointer like a dish */
	.slide .st-pic{transition:transform 1.4s var(--ease);}
	.slide:hover .st-pic{transform:translateY(-50%) rotate(16deg) scale(1.03);}
	.slide-photo:hover .st-pic{transform:translateY(-50%) rotate(-2deg) scale(1.02);}

	.hero-in > *{animation:ink 1.1s var(--ease) backwards;}
	.hero-in > :nth-child(2){animation-delay:.1s;}
	.hero-in > :nth-child(3){animation-delay:.22s;}
	.hero-in > :nth-child(4){animation-delay:.32s;}

	@supports (animation-timeline:scroll()){
		.hero-pic{animation:drift linear both;animation-timeline:scroll(root);animation-range:0 100vh;}
		.hero-in{animation:lift linear both;animation-timeline:scroll(root);animation-range:0 90vh;}
		/* the margin is room for the bottom row rising from below */
		.tiles{overflow:clip;overflow-clip-margin:40px;}
		.tile{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%;}
		/* the band photo: as tall as the screen and moved against the scroll as the band crosses it, so it stays put.
		   Fixed position would do the same, but a fixed element counts as covering the whole screen at all times */
		/* inset 0: by default the timeline leaves out the page's scroll padding (room for the sticky header), and the
		   photo would creep along at 6% of the scroll */
		.band{view-timeline-name:--band;view-timeline-inset:0;}
		.band-pic{position:absolute;animation:window linear both;animation-timeline:--band;}
		.band-bg{height:100vh;}
	}
}
@keyframes ink{from{opacity:0;filter:blur(10px);transform:translateY(18px);}to{opacity:1;filter:none;transform:none;}}
@keyframes drift{to{transform:translate3d(0,24vh,0) scale(1.06);}}
/* from "the band's top at the screen's bottom" to "its bottom at the screen's top": that is 100dvh plus the band's own
   height (100% of the photo's box, which spans the band) */
@keyframes window{from{transform:translateY(-100dvh);}to{transform:translateY(100%);}}
@keyframes lift{to{opacity:.3;transform:translate3d(0,-7vh,0);}}
/* not from zero: a tile is never invisible, neither in screenshots nor to a search bot that doesn't scroll */
@keyframes rise{from{opacity:.35;transform:translate3d(0,40px,0) scale(.96);}to{opacity:1;transform:none;}}

/* WIDTHS */

@media (max-width:1199px){
	.row-grid{grid-template-columns:repeat(4,1fr);}
	/* 4 per row: 8 cards make exactly two rows */
	.row-grid > .card:nth-child(n+9){display:none;}
	.deals-in{grid-template-columns:1fr;}
	.deals .row{grid-template-columns:repeat(4,1fr);}
	.brew-list{grid-template-columns:repeat(3,1fr);}
	/* here the first-screen text covers almost half the photo: the gaiwan is just to its right, the figurine is cut off */
	.hero-bg{object-position:28% 50%;}
	/* a regular tile is narrower than 280 px: the caption would cover the photo, so only the title stays */
	.tile:not(.tile-a,.tile-b) .tile-t small{display:none;}
}

@media (max-width:999px){
	/* tablet and phone: the whole photo goes under the text, its top edge fading out (the table doesn't fit beside it) */
	.hero{flex-direction:column;align-items:stretch;min-height:0;}
	.hero::after{background:linear-gradient(0deg,rgba(13,14,16,.55) 0%,transparent 24%);}
	.hero-pic{position:relative;top:auto;right:auto;bottom:auto;left:auto;order:2;margin-top:-28px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);mask-image:linear-gradient(180deg,transparent,#000 30%);}
	.hero-bg{height:auto;aspect-ratio:16 / 9;object-position:50% 50%;}
	.hero-in{padding-top:56px;padding-bottom:0;}
	.hero-banners .hero-in{padding-bottom:0;}
	.perks-in{grid-template-columns:repeat(2,1fr);}
	.tile-t{right:60px;bottom:16px;left:18px;font-size:21px;}
	.tile-a .tile-t{bottom:20px;left:22px;font-size:34px;}
	.tile-go{right:14px;bottom:14px;width:34px;height:34px;padding:8px;}
	/* the number of deals varies: a scrolling strip, so there's no half-empty second row */
	.deals .row{display:flex;gap:16px;margin:0 -24px;padding:2px 24px 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;scrollbar-width:none;}
	.deals .row::-webkit-scrollbar{display:none;}
	.deals .row > .card{flex:0 0 calc((100% - 32px) / 3.3);scroll-snap-align:start;}
	.deals-intro{padding:26px 24px;}
	.row-grid{grid-template-columns:repeat(3,1fr);}
	.row-grid > .card:nth-child(n+9){display:flex;}
	.row-grid > .card:nth-child(n+10){display:none;}
	.visit-in{grid-template-columns:1fr;gap:32px;}
}

@media (max-width:760px){
	.hero-bg{aspect-ratio:3 / 2;}
	.hero-in{padding-top:40px;}
	.hero h1{font-size:clamp(36px,10vw,48px);}
	.hero-lead{margin-top:16px;font-size:15.5px;}
	.hero-cta{margin-top:26px;}
	.hero-cta .btn{flex:1 1 auto;}
	.hero-facts{gap:10px 26px;margin-top:30px;padding-top:20px;}
	.hero-facts b{font-size:27px;}
	.slider{margin-top:-34px;}
	/* the dots go under the banner: on a narrow banner a row of them would cover the price and the photo. So the frame
	   and the shadow move from the box to the slides, which clip to the radius themselves */
	.slider-box{overflow:visible;border-radius:0;background:none;box-shadow:none;}
	.slides{border-radius:14px;background:var(--paper-2);box-shadow:0 22px 44px -24px rgba(8,17,14,.6);}
	.slider-btn{display:none;}
	.slider-dots{position:static;justify-content:center;margin-top:6px;padding:0;background:none;transform:none;}
	.slider-dots button{width:18px;height:20px;padding:7px 5px;background-color:rgba(31,91,74,.28);}
	.slider-dots button[aria-current="true"]{width:30px;background-color:var(--jade);}

	.perks{padding-top:24px;}
	.perks-in{gap:10px;}
	.perk{flex-direction:column;align-items:flex-start;gap:10px;padding:14px;}
	.perk .ic{width:40px;height:40px;padding:9px;}
	.perk span{font-size:13px;}
	.perk b{font-size:14px;}

	/* bento in two columns: the big tile spans the full width, the tall one two rows */
	.tiles{grid-template-columns:1fr 1fr;grid-auto-rows:42vw;grid-template-areas:"a a" "b c" "b d" "e f" "g h";gap:10px;}
	.tile{border-radius:16px;}
	.tile-t{right:50px;bottom:12px;left:14px;font-size:19px;}
	.tile-a .tile-t{bottom:16px;left:16px;font-size:28px;}
	.tile-b .tile-t small{display:none;}
	.tile-a .tile-t small{margin-top:5px;font-size:12.5px;}
	.tile-go{right:10px;bottom:10px;width:30px;height:30px;padding:6px;}

	/* the deals strip: the phone's side padding and the cards of the shared strip (shop.css) */
	.deals .row{gap:10px;margin:0 -16px;padding:2px 16px 14px;scroll-padding:0 16px;}
	.deals .row > .card{flex-basis:46%;}
	.row-grid > .card:nth-child(n){display:flex;}

	.deals-intro{gap:10px;padding:22px 20px;}
	.deals-intro .more{margin-top:6px;}
	.sec-head-tabs{display:block;}
	.tabs{margin:16px -16px 0;padding:5px 16px;border-radius:0;background:none;}
	.tabs [role="tab"]{padding:9px 16px;background:var(--paper-2);}
	.tabs [role="tab"][aria-selected="true"]{background:var(--night);box-shadow:none;color:#fff;}
	.tab-panel .more{margin-top:10px;}

	.band-in{min-height:0;padding-top:64px;padding-bottom:64px;}
	.band::after{background:linear-gradient(180deg,rgba(8,17,14,.5) 0%,rgba(8,17,14,.78) 100%);}
	.band h2{font-size:clamp(38px,11vw,52px);}
	.band .btn{align-self:stretch;}

	.brew-list{grid-template-columns:repeat(2,1fr);gap:10px;}
	.brew-item{padding:22px 10px 18px;border-radius:16px;}
	.cup{width:96px;}
	.brew-item h3{margin:16px 0 10px;font-size:25px;}
	.brew-item dl div{font-size:13.5px;}

	/* the map on a button tap: phones don't download it on every page load */
	.visit-map{min-height:300px;}
	.visit-map-show{display:inline-flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
	.visit-map iframe{display:none;}
	.visit-map.is-on iframe{display:block;}
	.visit-map.is-on .visit-map-cover,.visit-map.is-on .visit-map-show{display:none;}
	.visit-cta .btn{flex:1 1 auto;}

}

@media (max-width:400px){
	.deals .row > .card{flex-basis:58%;}
	.hero-cta .btn{padding:0 20px;}
}