@charset "utf-8";

/* Pages of the new design (home, product), on top of site.css (fonts, colors, the header and the footer): the base,
   buttons, section headings, product cards with the "add to cart" button, the tea cup, the toast and the cookie notice */
:root{--sec:clamp(64px,7vw,112px);}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
/* rice paper grain: SVG noise, rendered once as a tile */
body{margin:0;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .24 0 0 0 0 .14 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button,input{font:inherit;color:inherit;}
button{padding:0;border:0;background:none;cursor:pointer;}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;}
::selection{background:var(--jade);color:#fff;}

.vh{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font-weight:700;font-size:15px;line-height:1.2;white-space:nowrap;transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s,transform .25s var(--ease);}
.btn .ic{width:18px;height:18px;transition:transform .25s var(--ease);}
.btn:hover .ic{transform:translateX(3px);}
.btn-amber{background:var(--amber);box-shadow:0 12px 32px -14px rgba(232,167,74,.75);color:var(--ink);}
.btn-amber:hover{background:var(--amber-2);transform:translateY(-1px);}
.btn-ghost{border:1.5px solid rgba(241,233,218,.45);color:var(--cream);}
.btn-ghost:hover{border-color:var(--cream);background:rgba(241,233,218,.08);}
.btn-jade{background:var(--jade);color:#fff;}
.btn-jade:hover{background:var(--jade-2);}
.btn-line{border:1.5px solid var(--line-2);background:var(--card);color:var(--ink);}
.btn-line:hover{border-color:var(--ink);}
.btn-light{background:#fff;box-shadow:var(--shadow);color:var(--ink);}
.btn-light:hover{color:var(--jade);}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--copper);}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--jade);}
.more .ic{width:18px;height:18px;transition:transform .25s var(--ease);}
.more:hover .ic{transform:translateX(4px);}

/* SECTIONS */

.sec{padding-top:var(--sec);}
.sec-head{margin-bottom:32px;}
.sec-head h2,.sec-title{font-family:var(--serif);font-weight:600;font-size:clamp(34px,1.8vw + 22px,56px);line-height:1.04;letter-spacing:-.012em;text-wrap:balance;}
.eyebrow + h2{margin-top:10px;}
.sec-sub{max-width:44em;margin-top:12px;color:var(--ink-2);}

/* PRODUCT CARDS */

.row{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;}
/* a strip scrolled sideways; --card-w is the width of a card, the page sets it. On phones a .row is the same strip */
.strip{display:flex;gap:16px;margin:0 -24px;padding:4px 24px 18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 24px;scrollbar-width:none;}
.strip::-webkit-scrollbar{display:none;}
.strip > .card{flex:0 0 var(--card-w);scroll-snap-align:start;}
.card{position:relative;display:flex;flex-direction:column;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);transition:border-color .25s,box-shadow .25s,transform .25s var(--ease);}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-3px);}
.card-link{display:flex;flex:1;flex-direction:column;}
.card-img{display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--r-sm);}
.card-img img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease);}
.card:hover .card-img img{transform:scale(1.05);}
.card-title{display:-webkit-box;overflow:hidden;margin-top:12px;font-size:14.5px;font-weight:500;line-height:1.38;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.card-link:hover .card-title{color:var(--jade);}
.card-foot{margin-top:10px;}
.badge{position:absolute;top:22px;left:22px;z-index:1;padding:5px 10px;border-radius:999px;background:var(--copper);color:#fff;font-size:12px;font-weight:700;line-height:1.3;}
.pr{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;color:var(--ink-3);font-size:13px;}
.pr .now{color:var(--ink);font-size:18px;font-weight:800;}
.pr .old{text-decoration:line-through;}
.pr .old + .now{color:var(--copper);}
.buy{margin-top:12px;}
.buy-add{width:100%;height:42px;border:1.5px solid var(--jade);border-radius:999px;color:var(--jade);font-weight:700;font-size:14.5px;transition:background-color .2s,color .2s;}
.buy-add:hover{background:var(--jade);color:#fff;}
.buy-qty{display:none;align-items:center;justify-content:space-between;height:42px;border-radius:999px;background:var(--jade);color:#fff;}
.buy.is-in .buy-add{display:none;}
.buy.is-in .buy-qty{display:flex;}
.buy-qty button{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;transition:background-color .2s;}
.buy-qty button:hover{background:rgba(255,255,255,.16);}
.buy-qty .ic{width:18px;height:18px;stroke-width:2.2;}
.buy-n{font-weight:700;font-size:14.5px;}
.soldout{margin-top:12px;color:var(--ink-3);font-size:14px;}

/* A CUP OF TEA seen from above: porcelain, water and tea. The tea is water (shop.js): a click drops a droplet */

.cup{position:relative;width:min(120px,100%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0%,#f1ece2 46%,#d6cdbd 100%);box-shadow:0 28px 40px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);}
.cup::before,.cup::after,.cup-tea{content:"";position:absolute;border-radius:50%;}
.cup::before{inset:9%;background:radial-gradient(circle at 50% 42%,#fbf8f1 0%,#efe8da 64%,#dcd2c0 100%);box-shadow:inset 0 4px 10px rgba(60,40,10,.22);}
/* tea from above: deeper and darker in the middle, shallower and lighter toward the edges, as in a white cup */
.cup-tea{inset:14%;z-index:1;overflow:hidden;background:var(--tea);background:radial-gradient(circle,color-mix(in srgb,var(--tea) 78%,#000) 0%,var(--tea) 50%,color-mix(in srgb,var(--tea) 74%,#fff) 90%,color-mix(in srgb,var(--tea) 58%,#fff) 100%);box-shadow:inset 0 3px 7px rgba(0,0,0,.24),inset 0 0 0 1px rgba(0,0,0,.07);}
/* the swirl is a light band going round; it fades once the tea has settled */
.cup-tea::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 18%,rgba(255,255,255,.28) 30%,transparent 46% 66%,rgba(0,0,0,.14) 80%,transparent 92%);opacity:0;}
/* waves on the tea (shop.js): only light and shade of the slopes on top, the cup keeps its own color */
.cup-wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
/* the window highlight on the surface doesn't spin with the tea */
.cup::after{top:22%;left:27%;z-index:2;width:30%;height:13%;background:radial-gradient(closest-side,rgba(255,255,255,.62),transparent);transform:rotate(-24deg);}
/* the cups brew once scrolled into view (shop.js: data-steep), those in a row one after another (--i) */
@media (prefers-reduced-motion:no-preference){
	.js [data-steep]:not(.is-steeped) .cup-tea{opacity:0;transform:scale(.2);}
	[data-steep].is-steeped .cup-tea{animation:steep 2.1s var(--ease) backwards;animation-delay:calc(var(--i,0) * .15s);}
	[data-steep].is-steeped .cup-tea::before{animation:swirl 2.6s var(--ease) backwards;animation-delay:calc(var(--i,0) * .15s);}
}
@keyframes steep{0%{opacity:0;filter:blur(5px);transform:scale(.18) rotate(-50deg);}35%{opacity:.9;}100%{opacity:1;filter:none;transform:none;}}
@keyframes swirl{0%{opacity:0;transform:rotate(0);}25%{opacity:1;}100%{opacity:0;transform:rotate(260deg);}}

/* "Added to cart" shows under the header so it doesn't compete with the cookie notice at the bottom */

.toast{position:fixed;top:calc(var(--bar-h) + var(--nav-h) + 14px);right:24px;z-index:90;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);padding:10px 10px 10px 20px;border-radius:999px;background:var(--night);box-shadow:0 14px 34px rgba(0,0,0,.25);color:#fff;font-weight:600;font-size:14.5px;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .25s,transform .25s;}
.toast.is-on{opacity:1;pointer-events:auto;transform:none;}
.toast:empty{display:none;}
.toast a{padding:8px 16px;border-radius:999px;background:var(--amber);color:var(--ink);white-space:nowrap;}
.toast a:hover{background:var(--amber-2);}

/* cookie notice */
.cookies{position:fixed;right:20px;bottom:20px;left:20px;z-index:95;display:flex;align-items:center;gap:20px;max-width:760px;margin:0 auto;padding:16px 18px 16px 22px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:0 18px 44px -14px rgba(30,25,15,.4);font-size:14px;line-height:1.5;}
.cookies p{flex:1;}
.cookies a{text-decoration:underline;}
.cookies .buttons{display:flex;flex:none;gap:8px;}
.cookies button{height:42px;padding:0 18px;border:1.5px solid var(--line-2);border-radius:999px;font-weight:700;font-size:14px;}
.cookies button:hover{border-color:var(--ink);}
.cookies button.yes{border-color:var(--jade);background:var(--jade);color:#fff;}
.cookies button.yes:hover{background:var(--jade-2);}

/* WIDTHS */

@media (max-width:999px){
	.toast{right:16px;}
}

@media (max-width:760px){
	:root{--sec:60px;}
	.sec-head{margin-bottom:22px;}

	/* cards in a swipeable strip, with the next one peeking in */
	.row,.strip{display:flex;gap:10px;margin:0 -16px;padding:2px 16px 14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;}
	.row::-webkit-scrollbar{display:none;}
	.row > .card,.strip > .card{flex:0 0 46%;scroll-snap-align:start;}
	.card{padding:10px;border-radius:16px;}
	.card:hover{transform:none;}
	.card-img{border-radius:10px;}
	.card-title{margin-top:10px;font-size:13.5px;}
	.badge{top:16px;left:16px;font-size:11px;}
	.pr .now{font-size:16.5px;}
	.buy-add,.buy-qty{height:40px;}
	.buy-add{font-size:14px;}
	.buy-qty button{width:40px;height:40px;}
	.buy-n{font-size:13.5px;}

	.toast{right:16px;left:16px;justify-content:space-between;}
	.cookies{right:10px;bottom:10px;left:10px;flex-direction:column;align-items:stretch;gap:12px;padding:16px;}
	.cookies .buttons button{flex:1;}
}

@media (max-width:400px){
	.row > .card,.strip > .card{flex-basis:58%;}
}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto;}
	*,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}