@charset "utf-8";

/* Catalog: a section with its filters in the address. The kinds of the section as photos, the filters in a row
   with drop-down lists (on phones — a sheet from below), the cards with promo tiles, the section's text. Filtering and
   sorting redraw the page without reloading it (catalog.js). The base, cards, breadcrumbs and articles are in shop.css */

/* the glow at the top: amber, or the drink of the chosen kind, of the whole section for coffee (--tint, set by the
   template) */
.cat{--tint:var(--amber);padding-bottom:var(--sec);}

/* TOP: breadcrumbs, the heading and the kinds */

.cat-top{position:relative;isolation:isolate;padding-bottom:30px;overflow:clip;}
.cat-top::before{content:"";position:absolute;top:-300px;right:calc(50% - 900px);z-index:-1;width:1100px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--tint) 34%,transparent),color-mix(in srgb,var(--tint) 10%,transparent) 55%,transparent);pointer-events:none;}
.cat-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;}
.cat h1{font-family:var(--serif);font-weight:600;font-size:clamp(42px,2.6vw + 22px,74px);line-height:1;letter-spacing:-.015em;text-wrap:balance;}
.cat h1:focus{outline:none;}
.cat-count{color:var(--ink-3);font-size:15px;}
.cat-count b{color:var(--ink);font-family:var(--serif);font-weight:600;font-size:27px;font-variant-numeric:lining-nums;}

/* the kinds: a photo of the kind's best seller filling a square rounded like a card's photo (a circle cut off the
   products' edges); the chosen one is in a jade ring, "All" takes the kind off */
.kinds{display:flex;flex-wrap:wrap;gap:18px 4px;margin-top:30px;}
.kind{display:flex;flex-direction:column;align-items:center;gap:8px;width:92px;padding-top:4px;color:var(--ink-2);font-size:13.5px;font-weight:600;line-height:1.25;text-align:center;}
.kind-pic{display:grid;place-items:center;width:76px;height:76px;overflow:hidden;border-radius:var(--r-sm);background:#fff;box-shadow:0 0 0 1px var(--line),0 14px 22px -14px rgba(40,30,15,.45);transition:transform .35s var(--ease),box-shadow .35s;}
a.kind:hover .kind-pic{box-shadow:0 0 0 1px var(--line-2),0 20px 26px -14px rgba(40,30,15,.5);transform:translateY(-4px);}
.kind-pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
a.kind:hover .kind-pic img:only-child{transform:scale(1.05);}
.kind-pic b{color:var(--ink-3);font-family:var(--serif);font-weight:600;font-size:32px;}
.kind-t{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.kind-n{margin-top:-6px;color:var(--ink-3);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;}
.kind[aria-current]{color:var(--ink);}
.kind[aria-current] .kind-pic{box-shadow:0 0 0 2px var(--jade),0 0 0 6px color-mix(in srgb,var(--jade) 14%,transparent),0 14px 22px -14px rgba(40,30,15,.45);}
.kind[aria-current] .kind-t{color:var(--jade);}
/* "All": the first four kinds together, a quarter each */
.kind-pic.is-four{grid-template-columns:1fr 1fr;gap:2px;}

/* RESULTS: the filters in a row, the chosen ones, the cards */

.cat-tools{position:relative;z-index:5;display:flex;align-items:center;gap:10px;padding:16px 0;border-top:1px solid var(--line);}
.cat-panel{display:flex;flex:1;flex-wrap:wrap;align-items:center;gap:10px;}
.fg{position:relative;}
/* the kinds are above as a strip; in the phone's sheet they are a list like the others */
.fg-kind{display:none;}
.fg summary,.cat-avail,.cat-sort,.cat-open{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1.5px solid var(--line-2);border-radius:999px;background:var(--card);font-weight:600;font-size:14.5px;white-space:nowrap;cursor:pointer;transition:border-color .2s;}
/* phones only */
.cat-open{display:none;}
.fg summary{list-style:none;}
.fg summary::-webkit-details-marker{display:none;}
.fg summary:hover,.fg[open] summary,.cat-avail:hover,.cat-sort:hover{border-color:var(--ink);}
.fg summary b,.cat-open b{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--jade);color:#fff;font-size:11.5px;}
.fg summary .ic,.cat-sort .ic{width:16px;height:16px;margin-right:-4px;stroke-width:2;transition:transform .25s var(--ease);}
.fg[open] summary .ic{transform:rotate(180deg);}
.fg-list{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;max-height:min(60vh,440px);overflow:auto;padding:8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);box-shadow:var(--shadow);}
.fg-list.is-long{width:max-content;max-width:min(560px,calc(100vw - 48px));columns:2;column-gap:4px;}
.fg-list li{break-inside:avoid;}
.fg-list a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:14.5px;transition:background-color .15s;}
.fg-list a:hover{background:var(--paper);}
.fg-list i{display:grid;place-items:center;flex:none;width:20px;height:20px;border:1.5px solid var(--line-2);border-radius:6px;}
.fg-list .ic{width:14px;height:14px;color:#fff;stroke-width:2.6;opacity:0;}
.fg-list [aria-current] i{border-color:var(--jade);background:var(--jade);}
.fg-list [aria-current] .ic{opacity:1;}
.fg-list small{margin-left:auto;padding-left:12px;color:var(--ink-3);font-size:12.5px;font-variant-numeric:tabular-nums;}
/* "in stock only" is a switch */
.cat-avail i{position:relative;width:32px;height:18px;border-radius:999px;background:var(--line-2);transition:background-color .2s;}
.cat-avail i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .25s var(--ease);}
.cat-avail.is-on i{background:var(--jade);}
.cat-avail.is-on i::after{transform:translateX(14px);}
/* the order: a select dressed as the others; without JS there is no choosing */
.cat-sort{position:relative;display:none;margin-left:auto;padding:0;}
.js .cat-sort{display:inline-flex;}
.cat-sort select{height:100%;padding:0 42px 0 18px;border:0;border-radius:inherit;background:none;color:inherit;font:inherit;cursor:pointer;appearance:none;}
.cat-sort select:focus{outline:none;}
.cat-sort:focus-within{outline:2px solid var(--copper);outline-offset:3px;}
.cat-sort .ic{position:absolute;right:18px;pointer-events:none;}
/* the chosen filters: each comes off with a click */
.cat-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:4px;}
.cat-chips a{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 14px;border-radius:999px;background:color-mix(in srgb,var(--jade) 9%,#fff);color:var(--jade);font-weight:600;font-size:13.5px;transition:background-color .2s;}
.cat-chips a:hover{background:color-mix(in srgb,var(--jade) 16%,#fff);}
.cat-chips .ic{width:15px;height:15px;stroke-width:2.2;}
.cat-chips .cat-reset{padding:0 6px;background:none;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;}

.cat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:14px;transition:opacity .2s;}
/* the next page is on its way: a slow answer shows */
.cat[aria-busy] .cat-grid{opacity:.55;transition-delay:.15s;}
/* promo tiles among the cards: delivery and bonuses */
.cat-promo{display:flex;flex-direction:column;gap:10px;padding:24px 22px;border-radius:var(--r);color:rgba(241,233,218,.84);font-size:14px;line-height:1.5;transition:transform .25s var(--ease),box-shadow .25s;}
.cat-promo:hover{box-shadow:0 22px 36px -22px rgba(15,32,27,.7);transform:translateY(-3px);}
.cat-promo.is-night{background:radial-gradient(420px 300px at 100% 0%,color-mix(in srgb,var(--tint) 42%,transparent),transparent 70%),var(--night);}
.cat-promo.is-copper{background:radial-gradient(400px 300px at 0% 100%,rgba(232,167,74,.5),transparent 70%),var(--copper);color:rgba(255,255,255,.88);}
.cat-promo > .ic{width:46px;height:46px;padding:11px;border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:var(--gold);stroke-width:1.6;}
.cat-promo.is-copper > .ic{color:#fff;}
.cat-promo b{margin-top:auto;color:#fff;font-family:var(--serif);font-weight:600;font-size:28px;line-height:1.08;}
/* the arrow follows the words when they wrap in a narrow tile */
.cat-promo .more{display:block;margin-top:4px;color:var(--amber);}
.cat-promo .more .ic{display:inline-block;margin-left:6px;vertical-align:-3px;}
.cat-promo.is-copper .more{color:#fff;}
.cat-promo:hover .more .ic{transform:translateX(4px);}
/* nothing found: an empty cup and the ways out */
.cat-empty{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:520px;margin:48px auto 0;text-align:center;}
.cat-empty .cup{margin-bottom:6px;}
.cat-empty h2{font-family:var(--serif);font-weight:600;font-size:40px;line-height:1.05;}
.cat-empty p{color:var(--ink-2);}
.cat-empty a{color:var(--jade);font-weight:600;text-decoration:underline;text-underline-offset:3px;}

/* ABOUT: the section's text */

.cat-about .prose{margin-inline:auto;}

/* the button at hand — phones only; the sheet is a dialog, closed it is hidden anyway */
.cat-float{display:none;}

/* MOTION: after filtering or sorting the cards in view glide to their new places (catalog.js), the rest of the page
   cross-fades */

@media (prefers-reduced-motion:no-preference){
	::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.8,.2,1);}
}

/* WIDTHS */

@media (max-width:1199px){
	.cat-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}

@media (max-width:999px){
	.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (max-width:760px){
	.cat-top{padding-bottom:22px;}
	.cat-head{gap:6px 14px;}
	.cat h1{font-size:clamp(36px,10vw,48px);}
	.cat-count b{font-size:23px;}
	/* the kinds in a strip that scrolls sideways */
	.kinds{flex-wrap:nowrap;gap:0;margin:22px -16px 0;padding:0 12px 6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;}
	.kinds::-webkit-scrollbar{display:none;}
	.kind{flex:none;width:82px;font-size:12.5px;scroll-snap-align:start;}
	.kind-pic{width:62px;height:62px;border-radius:10px;}

	/* the row of filters goes into the sheet; here — the button that opens it, and the order */
	.cat-tools{padding:12px 0;}
	.js .cat-open{display:inline-flex;flex:1;justify-content:center;}
	.js .cat-tools > .cat-panel{display:none;}
	.cat-open .ic{width:18px;height:18px;}
	.cat-sort select{padding:0 38px 0 14px;}
	.cat-sort .ic{right:14px;}

	.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
	.cat-promo{gap:8px;padding:18px 16px;font-size:13px;}
	.cat-promo > .ic{width:40px;height:40px;padding:9px;}
	.cat-promo b{font-size:21px;}
	.cat-empty h2{font-size:32px;}

	.cat-sheet[open]{position:fixed;inset:auto 0 0;display:flex;flex-direction:column;width:100%;max-width:none;max-height:min(86vh,720px);margin:0;padding:0;border:0;border-radius:24px 24px 0 0;background:var(--paper);box-shadow:0 -20px 50px -20px rgba(0,0,0,.4);color:var(--ink);}
	.cat-sheet::backdrop{background:rgba(15,32,27,.45);}
	.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 8px;}
	.sheet-head h2{font-family:var(--serif);font-weight:600;font-size:27px;line-height:1.1;}
	.sheet-x{background:var(--paper-2);}
	.sheet-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:4px 20px 16px;}
	.sheet-foot{padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);}
	.sheet-go{width:100%;}
	/* in the sheet everything is a list, the kinds too */
	.cat-sheet .cat-panel{flex-direction:column;align-items:stretch;gap:18px;}
	.cat-sheet .fg-kind{display:block;}
	.cat-sheet .fg summary{height:auto;padding:0;border:0;background:none;font-family:var(--serif);font-size:22px;pointer-events:none;}
	.cat-sheet .fg summary .ic{display:none;}
	.cat-sheet .fg-list{position:static;width:auto;min-width:0;max-width:none;max-height:none;margin-top:6px;padding:0;border:0;background:none;box-shadow:none;columns:auto;}
	.cat-sheet .fg-list a{padding:10px 2px;}
	.cat-sheet .cat-avail{align-self:flex-start;}

	.js .cat-float{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;z-index:70;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;background:var(--night);box-shadow:0 14px 30px -10px rgba(0,0,0,.5);color:#fff;font-weight:700;font-size:14.5px;visibility:hidden;opacity:0;transform:translate(-50%,24px);transition:opacity .25s,transform .3s var(--ease),visibility .3s;}
	.cat-float .ic{width:18px;height:18px;}
	.cat-float.is-on{visibility:visible;opacity:1;transform:translate(-50%,0);}
}