:root{--bg:#f5f1e7;--ink:#203729;--muted:#647063;--accent:#687b40;--line:#d9d6c7;--serif:Georgia,'Times New Roman',serif;--sans:Arial,sans-serif;--forest:#172d20;--cream:#f5f1e7}
body{background:var(--bg);color:var(--ink)}
.announcement,.journal-announcement{background:#102319;color:#ede9dc;letter-spacing:.12em}
header,.nav-wrap,.journal-header{background:#f5f1e7;color:#203729;border-color:#dedbcd}
h1,h2,.product-card h3,.category-card h3,.journal-card h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.035em}
.brand,.journal-brand{color:#24392b}.button,.journal-button{background:#233f2d;color:#fff9eb;border:1px solid #233f2d;border-radius:3px}.button:hover,.journal-button:hover{background:#3c5737;color:white;box-shadow:0 6px 18px #152e2020}.underlink{color:inherit}
.hero{background:radial-gradient(ellipse at 5% 5%,#415334 0,transparent 60%),#16291e;color:var(--cream);grid-template-columns:1fr 1fr;max-width:none;min-height:700px;overflow:hidden}
.hero-copy{padding:90px 9% 60px 12%;display:flex;justify-content:center;flex-direction:column;background:linear-gradient(135deg,#ffffff03,transparent)}
.hero h1{font-size:clamp(58px,6vw,100px);font-weight:400;line-height:1.02;color:var(--cream);letter-spacing:-.055em}.hero h1 em{color:#c7cc9e;font-weight:400}.hero .eyebrow{color:#c5c6a2;letter-spacing:.2em}.hero-copy>p{color:#dfdfce;font-size:16px;line-height:1.9;max-width:410px}.hero-meta{border-color:#ffffff28;color:#c2c5ae}.hero .button{background:#e7e4c9;color:#233526;border-color:#e7e4c9}.hero .underlink{color:#ede9dc}
.hero-image{background:#182d1e;min-height:700px}.hero-image>img{object-fit:contain;width:100%;height:100%;object-position:center;transform:none!important}.hero-stamp,.hero-caption{display:none}
.value-strip{background:#e6e7d6;border-color:#d4d8be;color:#30442d}.section{padding-block:85px}.section-heading h2{font-size:clamp(36px,4vw,58px)}.eyebrow{letter-spacing:.18em;color:#6a724e}
.product-photo,.category-card .product-photo{background-color:#e5e5d7;border-radius:6px;overflow:hidden}.product-card,.category-card{border-bottom:1px solid #d7d8c6;padding-bottom:18px}.product-card h3{font-size:25px;line-height:1.2}.product-tag{background:#f8f4e7ec;color:#35472f}.product-card-info{padding-top:10px}.category-card h3{font-size:25px}.category-card p{line-height:1.7;color:#66705d}.product-card:hover,.category-card:hover{color:#647a42}
.editorial{background:#203726;color:#f3f0df}.editorial-copy h2{font-size:clamp(40px,4vw,65px);color:#f3f0df}.editorial-copy p,.editorial-list{color:#d8dcc8}.editorial .eyebrow{color:#bdc69c}.editorial .button{background:#e5e5cd;color:#243c28}.editorial-list li{border-color:#ffffff26}.editorial-image{background:#1d3021}.editorial-image>img{object-fit:cover}
.cta{background:linear-gradient(110deg,#172c20,#394c2c);color:#f4efdd;padding-block:65px}.cta h2{color:#f5efdc;font-size:clamp(40px,4vw,64px)}.cta .eyebrow,.cta h2 em{color:#c7cba5}.cta .button{background:#eeead6;color:#263c2b}
footer,.journal-footer{background:#13271c;color:#e6e5d5;border:0}.footer-main .brand,footer a,.journal-footer a,.journal-footer .journal-brand{color:#ece9d9}.footer-main p,.footer-bottom,.reference-credit,.journal-footer p{color:#bdc4b0}.footer-main h3{color:#d2d7b7}.footer-bottom,.footer-main>div:last-child{border-color:#ffffff20}
.page-intro,.journal-intro{background:radial-gradient(ellipse at right,#415334,#1c3223);color:#f4f0dd;padding-block:70px}.page-intro h1,.journal-intro h1{color:#f4f0dd;font-size:clamp(44px,5vw,78px)}.page-intro .eyebrow,.journal-intro .eyebrow{color:#c4c9a3}.page-intro p,.journal-intro p{color:#d7ddc7}.chip{border-color:#c9cfba;color:#32482f}.chip.active{background:#28402c;color:#f4f1df}
.catalogue-note,.inquiry-summary,.buying-card,.menu-studio,.quote-label{background:#e8e8d9;border-color:#d2d7c2;color:#2e432e}.detail-photo{background:#e7e6d8}.detail-main-image{object-fit:contain!important}.detail-thumbnails button{background:#f1eddf;border-color:#cdd1bd}.detail-thumbnails button.active{border-color:#35522f}.detail-copy h1{font-size:clamp(38px,4vw,61px)}.detail-description{font-size:17px;line-height:1.8;white-space:pre-line}.use-tags span{background:#e6e9d8;color:#3e5638}.spec-table>div{border-color:#d5d9c7}
input,textarea,select{background:#fffdf5;color:#223d2a;border-color:#c8cfb9}input:focus,textarea:focus{outline-color:#65804e}dialog{background:#f9f5e9;color:#263c2b}.image-note{background:#183122dc;color:#eee9d9}.process-strip{border-color:#d5dac6}.step-number{color:#748451}
.journal-card{background:#faf7ee;border:1px solid #d9dccb;border-radius:5px;overflow:hidden}.journal-card-copy{padding:24px}.journal-card h2{color:#263d29;font-size:30px}.journal-photo{background:#e2e7d5}.journal-filters a[aria-current]{background:#29432e;color:#f3f0df}.article-heading{padding-block:65px;background:#e8e9da}.article-heading h1{font-size:clamp(40px,5vw,74px);color:#233b29}.article-body h2{font-size:34px}.article-body{line-height:1.85}.article-cta{background:#243e2b;color:#f3efdf}.article-cta h2,.article-cta p{color:inherit}
@media(max-width:900px){.hero-copy{padding:50px 8%}.hero,.hero-image{min-height:570px}.hero h1{font-size:60px}.section{padding-block:55px}}
@media(max-width:680px){.hero{grid-template-columns:1fr}.hero-copy{padding:45px 7% 35px}.hero h1{font-size:58px}.hero-copy>p{font-size:14px}.hero-image{min-height:0;aspect-ratio:4/5}.hero-image>img{position:relative;display:block}.hero-meta{flex-wrap:wrap}.page-intro,.journal-intro{padding:40px 6%}.product-card h3,.category-card h3{font-size:19px}.section{padding-block:45px}.editorial-copy{padding:40px 7%}.journal-card h2{font-size:26px}.cta{padding:40px 7%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* A translucent light veil over the hero, with independently animated type. */
.hero-copy{position:relative;isolation:isolate;overflow:hidden;background:transparent}
.hero-copy::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(125deg,rgba(248,246,218,.16),rgba(234,240,211,.055) 48%,rgba(255,255,245,.025));border:1px solid rgba(248,246,218,.12);box-shadow:inset 0 1px 0 #fff2;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.hero .veil-title .veil-line{display:block;animation:veil-enter 1.1s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--line-delay)}
.hero .veil-title em{display:inline-block;animation:veil-float 5s ease-in-out 1.3s infinite;transform-origin:left center}
.hero-copy>.eyebrow{animation:veil-enter 1s ease both}
.hero-copy>p{animation:veil-enter 1.2s .35s ease both}
@keyframes veil-enter{from{opacity:0;transform:translateY(22px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes veil-float{0%,100%{transform:translateY(0);color:#d2d5ac}50%{transform:translateY(-5px);color:#f0edd0}}
@media(max-width:680px){.hero .veil-title em{display:block}.hero-copy::before{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}}
@media(prefers-reduced-motion:reduce){.hero .veil-title .veil-line,.hero .veil-title em,.hero-copy>.eyebrow,.hero-copy>p{animation:none!important;opacity:1;filter:none;transform:none}}

.product-photo img[src*='generated/matcha-']{object-fit:contain!important;background:#203726}.detail-image-frame:has(img[src*='generated/matcha-']){aspect-ratio:4/5}.detail-image-frame img[src*='generated/matcha-']{height:100%;object-fit:contain!important}

/* Pale matcha hero and playful, staggered lettering. */
.hero{background:#dce6c4;color:#243c29}
.hero-copy{background:linear-gradient(135deg,#e7edcf 0%,#d7e3bc 55%,#c9dbad 100%)}
.hero-copy::before{background:linear-gradient(125deg,#ffffff38,#ffffff0a 60%,#f7ffe520);border-color:#ffffff40;box-shadow:inset 0 1px 0 #ffffff60}
.hero h1{color:#263e2a}.hero .eyebrow{color:#546841}.hero-copy>p{color:#3f5538}.hero-meta{color:#586b43;border-color:#57714036}.hero .underlink{color:#304b30}.hero .button{background:#304e34;color:#fffbed;border-color:#304e34}.hero .button:hover{background:#46663c;color:#fffbed}
.hero .veil-title .veil-line{animation:matcha-pop 3.6s cubic-bezier(.36,0,.32,1) infinite;animation-delay:var(--line-delay);transform-origin:20% 85%;opacity:1;filter:none}
.hero .veil-title em{color:#658240;animation:matcha-wiggle 3.6s ease-in-out .65s infinite;transform-origin:35% 85%}
@keyframes matcha-pop{0%,8%,45%,100%{transform:translateY(0) rotate(0) scale(1)}16%{transform:translateY(3px) scale(1.015,.965)}24%{transform:translateY(-10px) rotate(-1deg) scale(.99,1.025)}32%{transform:translateY(2px) rotate(.5deg) scale(1.01,.985)}39%{transform:translateY(-3px) rotate(0) scale(1)}}
@keyframes matcha-wiggle{0%,12%,65%,100%{transform:translateY(0) rotate(0);color:#658240}25%{transform:translateY(-7px) rotate(-4deg);color:#48692f}37%{transform:translateY(1px) rotate(3deg)}48%{transform:translateY(-3px) rotate(-2deg)}58%{transform:translateY(0) rotate(1deg)}}
@media(max-width:680px){.hero .veil-title .veil-line{transform-origin:25% 85%}}
@media(prefers-reduced-motion:reduce){.hero .veil-title .veil-line,.hero .veil-title em{animation:none!important;transform:none!important}}
/* One photographic hero: live animated text over the latte image. */
.hero{display:grid;grid-template-columns:1fr;position:relative;min-height:780px;background:#233424;isolation:isolate}
.hero>.hero-image{position:absolute;inset:0;min-height:0;aspect-ratio:auto;z-index:-2;overflow:hidden}
.hero>.hero-image>img{content:url('/assets/generated/matcha-latte-clean.png');width:100%;height:100%;object-fit:cover;object-position:center 53%;position:absolute;inset:0}
.hero>.hero-copy{width:100%;box-sizing:border-box;min-height:780px;padding:75px 8%;justify-content:flex-start;background:linear-gradient(90deg,#14291dd9 0%,#14291d96 42%,#14291d08 80%);overflow:hidden}
.hero-copy::before{background:linear-gradient(120deg,#e5efc912,#e5efc902);backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none}
.hero h1{color:#fff8e4;max-width:600px;font-size:clamp(60px,6vw,88px)}
.hero .eyebrow{color:#e0e7bf}.hero-copy>p{color:#f2f1df;max-width:430px;text-shadow:0 1px 12px #14291d80}.hero .underlink{color:#f5f2dc}.hero .button{background:#e5e9c7;color:#233c29;border-color:#e5e9c7}.hero-meta{color:#e5e7cc;border-color:#edf1d94d;max-width:500px}.hero .veil-title em{color:#dbe6af;animation-name:latte-wiggle}
@keyframes latte-wiggle{0%,12%,65%,100%{transform:translateY(0) rotate(0);color:#dbe6af}25%{transform:translateY(-7px) rotate(-4deg);color:#fff4ca}37%{transform:translateY(1px) rotate(3deg)}48%{transform:translateY(-3px) rotate(-2deg)}58%{transform:translateY(0) rotate(1deg)}}
@media(max-width:680px){.hero{min-height:900px}.hero>.hero-copy{min-height:900px;padding:35px 7%;background:linear-gradient(180deg,#14291dc9 0%,#14291d8c 34%,#14291d08 65%,#14291d50 100%)}.hero>.hero-image>img{object-position:center bottom}.hero h1{font-size:clamp(44px,10vw,58px);margin-bottom:18px}.hero .veil-title .veil-line{display:inline}.hero .veil-title .veil-line:first-child::after{content:' ';white-space:pre}.hero .veil-title em{display:inline-block}.hero-copy>p{font-size:13px;line-height:1.7;max-width:390px}.hero-actions{margin-top:10px;gap:16px}.hero-meta{margin-top:auto;font-size:7px;width:100%}}
@media(prefers-reduced-motion:reduce){.hero .veil-title em{animation:none!important}}
@media(max-width:680px){.hero .veil-title .veil-line{display:inline-block;margin-right:.15em}}
/* Restore the original poster wording as accessible live text; place the new copy below. */
.hero{min-height:1050px;display:flex;flex-direction:column;justify-content:space-between}
.latte-original-copy{position:relative;z-index:1;text-align:center;color:#fff9e7;padding:40px 5% 0;text-shadow:0 2px 20px #14271860}
.latte-original-copy>span{font:14px Arial,sans-serif;letter-spacing:.35em}
.latte-original-copy h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,4.8vw,68px);line-height:1.08;letter-spacing:-.025em;margin:26px 0 10px;color:#fff9e7}
.latte-original-copy p{font-size:16px;margin:0;color:#f2f0dd}
.hero>.hero-image>img{object-fit:cover;object-position:center 52%}
.hero>.hero-copy{min-height:0;width:100%;padding:38px 8% 28px;margin-top:360px;background:linear-gradient(180deg,#14291d00,#14291dc9 30%,#14291df0);justify-content:flex-end}
.hero-copy>.eyebrow{display:none}.hero h1{font-size:clamp(42px,4.5vw,64px);margin:0 0 16px;max-width:800px}.hero .veil-title .veil-line{display:inline-block;margin-right:.15em}.hero .veil-title em{display:inline-block}.hero-copy>p{max-width:620px;font-size:14px;line-height:1.7;margin:0 0 18px}.hero-actions{margin:0 0 20px}.hero-meta{margin-top:5px;max-width:620px}.hero-copy::before{background:none}
@media(max-width:680px){.hero{min-height:1010px}.latte-original-copy{padding:28px 5% 0}.latte-original-copy>span{font-size:11px;letter-spacing:.3em}.latte-original-copy h2{font-size:clamp(32px,8vw,46px);margin-top:25px}.latte-original-copy p{font-size:12px}.hero>.hero-copy{min-height:0;padding:40px 6% 25px;margin-top:340px;background:linear-gradient(180deg,#14291d00,#14291dd9 25%,#14291df5)}.hero h1{font-size:clamp(37px,9vw,49px);line-height:1.06}.hero-copy>p{font-size:12px;line-height:1.75;max-width:430px}.hero-actions{gap:14px;flex-wrap:wrap}.hero>.hero-image>img{object-position:center center}.hero-meta{margin-top:8px}.hero .veil-title .veil-line{display:inline-block}}
/* Compact the two text groups and restore the earlier stacked heading. */
.hero{min-height:860px;justify-content:flex-start}
.hero>.hero-copy{margin-top:28px;min-height:0;padding-top:26px;padding-bottom:30px;background:linear-gradient(90deg,#14291da6,#14291d55 58%,#14291d08)}
.hero .veil-title .veil-line{display:block;margin-right:0}
.hero .veil-title em{display:inline-block}
.hero h1{max-width:600px}
.hero-copy>p{max-width:430px}
@media(max-width:680px){.hero{min-height:900px}.hero>.hero-copy{margin-top:20px;padding:24px 6% 30px;background:linear-gradient(90deg,#14291db3,#14291d75 65%,#14291d20)}.hero .veil-title .veil-line{display:block;margin-right:0}.hero .veil-title em{display:block}.hero h1{font-size:clamp(44px,10vw,58px);line-height:1.02;margin-bottom:22px}.hero-copy>p{font-size:13px;line-height:1.75;max-width:390px}.hero-actions{margin-top:8px;margin-bottom:24px}.hero-meta{margin-top:8px}}

/* One centered copy group; retain existing title line breaks and animation. */
.hero{justify-content:center}
.hero>.hero-copy{margin-top:0;align-items:center;justify-content:center;text-align:center;width:100%;min-height:860px;padding:55px 7%;background:linear-gradient(180deg,#14291d55,#14291d88 48%,#14291d60)}
.hero h1{width:100%;max-width:700px;text-align:center}
.hero .veil-title .veil-line{display:block;margin-right:0;transform-origin:center bottom}
.hero .veil-title em{transform-origin:center bottom}
.hero-copy>p{margin-left:auto;margin-right:auto;max-width:470px}
.hero-actions{justify-content:center;width:100%}
.hero-meta{width:100%;max-width:540px;justify-content:center;gap:24px}
@media(max-width:680px){.hero{min-height:900px;justify-content:center}.hero>.hero-copy{min-height:900px;margin-top:0;padding:45px 7%;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,#14291d55,#14291d88 48%,#14291d60)}.hero .veil-title .veil-line{display:block;margin-right:0;transform-origin:center bottom}.hero .veil-title em{display:block;transform-origin:center bottom}.hero-copy>p{max-width:390px}.hero-actions{justify-content:center}.hero-meta{justify-content:center;flex-wrap:wrap;gap:10px 20px}}

/* Lower the supporting copy, compact the CTA, add a gentle playful bounce. */
.hero-copy>p{margin-top:34px;margin-bottom:24px;animation:matcha-copy-hop 4.8s ease-in-out .8s infinite;transform-origin:center center}
.hero .hero-actions .button{padding:12px 20px;font-size:12px;min-height:0;line-height:1.4}
.hero .hero-actions .underlink{font-size:12px;padding-bottom:5px}
.hero .hero-actions{gap:20px;margin-top:4px;margin-bottom:24px}
.hero .hero-actions .underlink{animation:matcha-link-hop 4.8s ease-in-out 1.1s infinite}
@keyframes matcha-copy-hop{0%,12%,46%,100%{transform:translateY(0) rotate(0)}22%{transform:translateY(-4px) rotate(-.35deg)}30%{transform:translateY(1px) rotate(.3deg)}38%{transform:translateY(-2px) rotate(0)}}
@keyframes matcha-link-hop{0%,16%,48%,100%{transform:translateY(0)}26%{transform:translateY(-3px)}34%{transform:translateY(1px)}41%{transform:translateY(-1px)}}
@media(max-width:680px){.hero-copy>p{margin-top:32px;margin-bottom:23px}.hero .hero-actions .button{padding:11px 17px;font-size:11px}.hero .hero-actions .underlink{font-size:11px}.hero .hero-actions{gap:17px;margin-top:4px;margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){.hero-copy>p,.hero .hero-actions .underlink{animation:none!important;transform:none!important}}

/* Larger typography throughout the photographic hero. */
.hero h1{font-size:clamp(64px,7vw,96px);max-width:850px;line-height:1.05}
.hero-copy>p{font-size:18px;line-height:1.8;max-width:620px}
.hero .hero-actions .button,.hero .hero-actions .underlink{font-size:15px}
.hero .hero-actions .button{padding:12px 21px}
.hero .hero-meta{font-size:10px;line-height:1.6;max-width:640px;letter-spacing:.08em}
@media(max-width:680px){.hero h1{font-size:clamp(50px,12vw,72px);line-height:1.05}.hero-copy>p{font-size:15px;line-height:1.75;max-width:430px}.hero .hero-actions .button,.hero .hero-actions .underlink{font-size:13px}.hero .hero-actions .button{padding:11px 18px}.hero .hero-meta{font-size:9px;line-height:1.6;gap:10px 16px}}

/* Fast right-to-left arrival with a compressed impact and diminishing rebound. */
.section:has(>.section-heading .collection-impact){overflow:hidden}
.collection-impact h2{cursor:pointer;transform-origin:left center}
.collection-impact h2:focus-visible{outline:2px solid #687b40;outline-offset:8px}
.collection-impact.impact-play h2{animation:collection-crash 1.05s both;will-change:transform}
.collection-impact.impact-play .eyebrow{animation:collection-crash .95s .06s both;transform-origin:left center}
.collection-impact.impact-play p{animation:collection-crash 1.08s .12s both;transform-origin:left center}
@keyframes collection-crash{
 0%{opacity:0;transform:translateX(min(75vw,900px)) scaleX(1.08);animation-timing-function:cubic-bezier(.6,0,1,.65)}
 38%{opacity:1;transform:translateX(0) scaleX(.84) scaleY(1.08);animation-timing-function:ease-out}
 57%{transform:translateX(35px) scaleX(1.035) scaleY(.98);animation-timing-function:ease-in}
 72%{transform:translateX(0) scaleX(.96) scaleY(1.025);animation-timing-function:ease-out}
 85%{transform:translateX(10px) scaleX(1.01);animation-timing-function:ease-in-out}
 100%{opacity:1;transform:translateX(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){.collection-impact.impact-play>*{animation:none!important;transform:none!important}}
/* Transparent menu inspiration section, tabs and copy panel. */
.tea-menu-section,.tea-menu-section .menu-studio,.tea-menu-section .menu-switcher,.tea-menu-section .menu-stage,.tea-menu-section .menu-content{background:transparent!important;background-image:none!important;box-shadow:none}
.tea-menu-section .menu-choice:not(.active){background:transparent}

/* ==========================================================================
   One tea-garden backdrop for the whole site (2026-10-26 review build)
   A single bright tea-field photograph sits behind every page; sections have
   no background of their own. Text sits on paper panels or deep-green bands.
   ========================================================================== */
:root{
  --garden-ink:#16301f;
  --garden-body:#2c4634;
  --garden-muted:#4a5f47;
  --garden-gold:#87682c;
  --garden-cream:#f8f1df;
  --garden-paper:rgba(248,241,223,.95);
  --garden-deep:rgba(9,30,19,.94);
  --garden-line:rgba(22,48,31,.16);
  --bg:#f2eee1;
}

html{background:#e9e6d6}
body{
  color:var(--garden-ink);
  background:#e9e6d6 url('/assets/backgrounds/tea-garden.webp') center 62%/cover no-repeat fixed;
}
@media(max-width:820px){ body{background-attachment:scroll;background-position:center 55%} }

/* --- top bars stay deep for contrast ------------------------------------- */
.announcement{background:var(--garden-deep);color:#efe8d3;border-bottom:1px solid rgba(211,190,139,.22)}
header{background:rgba(8,26,17,.88);color:var(--garden-cream);border-color:rgba(244,237,217,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
header a,.nav-actions .icon-button{color:var(--garden-cream)}
.nav-wrap{background:transparent!important;border-color:rgba(244,237,217,.14)}
.nav-wrap .brand,.nav-wrap a,.nav-wrap .icon-button{color:var(--garden-cream)}
.nav-wrap svg{stroke:currentColor;fill:none}
.brand{color:var(--garden-cream)}
.brand small{color:#c3cbb2}
.basket-count{background:var(--garden-cream);color:#16301f}
.nav-wrap .nav-quote,.nav-wrap a.button{background:var(--garden-cream)!important;color:#14301f!important;border-color:var(--garden-cream)!important}

/* --- buttons and links --------------------------------------------------- */
.button,.journal-button{background:#16301f;color:#f8f1df;border:1px solid #16301f;border-radius:3px}
.button:hover,.journal-button:hover{background:#22452f;color:#fbf6e6;box-shadow:0 10px 24px rgba(9,30,19,.28)}
.underlink{color:var(--garden-ink);border-color:rgba(22,48,31,.45)}
.underlink:hover{color:#22452f}
.text-button,.inline-link{color:var(--garden-gold)}

/* --- hero: unchanged photographic banner -------------------------------- */
.hero{background:#0c2016;color:#f5eeda}
.hero>.hero-copy{background:linear-gradient(90deg,rgba(7,20,13,.86) 0%,rgba(7,20,13,.6) 46%,rgba(7,20,13,.1) 82%)}
.hero h1{color:#fbf5e3}
.hero h1 em{color:#ded0a0}
.hero .eyebrow{color:#d6c794}
.hero-copy>p{color:#e8e3d0}
.hero .button{background:#f8f1df;color:#16301f;border-color:#f8f1df}
.hero .underlink{color:#f2ecda;border-color:rgba(244,237,217,.4)}
.hero-meta{color:#cfd8bb;border-color:rgba(244,237,217,.28)}

/* --- shared type on the garden ------------------------------------------ */
.section{background-color:transparent}
.section-heading h2,.section-title,.collection-impact h2{color:var(--garden-ink)}
.section-heading p,.section-text{color:var(--garden-body)}
.eyebrow{color:var(--garden-gold)}
.results-line,.sort-label,.breadcrumb,.breadcrumb a{color:var(--garden-body)}
.search-box{background:var(--garden-paper);border:1px solid rgba(22,48,31,.2);color:var(--garden-ink)}
.search-box input{background:transparent;color:var(--garden-ink);border:0}
.search-box input::placeholder{color:#6d7d63}
.sort-label select{background:var(--garden-paper);color:var(--garden-ink);border-color:rgba(22,48,31,.2)}

/* --- cards become paper panels on the field ----------------------------- */
.product-card,.category-card{
  background:var(--garden-paper);border:1px solid rgba(255,255,255,.6);border-radius:8px;
  padding:14px 14px 18px;box-shadow:0 18px 40px rgba(9,30,19,.18)}
.product-photo,.category-photo,.category-card .product-photo{background:#e7e2cf;border-radius:6px;overflow:hidden;box-shadow:none;border:0}
.product-card h3,.category-card h3{color:var(--garden-ink)}
.product-card p,.category-card p{color:var(--garden-body)}
.product-card:hover h3,.category-card:hover h3{color:#22452f}
.product-tag{background:rgba(9,30,19,.82);color:#f4eeda;border:1px solid rgba(244,237,217,.2)}
.category-arrow{color:var(--garden-gold)}
.card-caption{color:var(--garden-body)}

/* --- marquee band -------------------------------------------------------- */
.value-strip{background:rgba(9,30,19,.88);color:#f4eeda;border-color:rgba(244,237,217,.18)}
.value-strip *{color:inherit}

/* --- editorial: paper copy beside the brewing photograph ---------------- */
.editorial{background:transparent;color:var(--garden-ink)}
.editorial-image{background:#0a1d13;border-radius:8px;overflow:hidden}
.editorial-copy{
  background:var(--garden-paper);border:1px solid rgba(255,255,255,.6);border-radius:8px;
  box-shadow:0 22px 48px rgba(9,30,19,.2);padding:46px 44px}
.editorial-copy h2{color:var(--garden-ink)}
.editorial-copy p,.editorial-list{color:var(--garden-body)}
.editorial .eyebrow{color:var(--garden-gold)}
.editorial-list li{border-color:rgba(22,48,31,.16)}
.editorial .button{background:#16301f;color:#f8f1df}
.editorial .button:hover{background:#22452f}

/* --- closing call to action: deep band ---------------------------------- */
.cta{background:var(--garden-deep);color:#f7f1dd;border-radius:10px}
.cta h2{color:#fbf6e6}
.cta .eyebrow,.cta h2 em{color:#e0d3a5}
.cta .button{background:#f8f1df;color:#143020;border-color:#f8f1df}
.cta .underlink{color:#f2ecda}

/* --- page intros: paper strip ------------------------------------------- */
.page-intro{
  background:var(--garden-paper);color:var(--garden-ink);
  border:1px solid rgba(255,255,255,.6);border-radius:8px;box-shadow:0 18px 40px rgba(9,30,19,.16)}
.page-intro h1{color:var(--garden-ink)}
.page-intro .eyebrow{color:var(--garden-gold)}
.page-intro p{color:var(--garden-body)}

/* --- filters and chips --------------------------------------------------- */
.chip{background:rgba(248,241,223,.9);border-color:rgba(22,48,31,.2);color:var(--garden-ink)}
.chip.active{background:#16301f;color:#f8f1df;border-color:#16301f}
.journal-filters a{background:rgba(248,241,223,.9);border-color:rgba(22,48,31,.2);color:var(--garden-ink)}
.journal-filters a[aria-current]{background:#16301f;color:#f8f1df;border-color:#16301f}

/* --- paper panels -------------------------------------------------------- */
.buying-card,.catalogue-note,.inquiry-summary,.quote-label,.menu-studio,.contact-form-panel,.quality-copy,.menu-content{
  background:var(--garden-paper);color:var(--garden-ink);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 22px 48px rgba(9,30,19,.2);border-radius:8px}
.buying-card h2,.buying-card h3,.menu-content h2,.menu-content h3,.inquiry-summary h3,.catalogue-note h3,.contact-form-panel h2,.quality-copy h2{color:var(--garden-ink)}
.buying-card p,.menu-content p,.inquiry-summary p,.catalogue-note p,.quality-copy p{color:var(--garden-body)}
.catalogue-note a,.buying-card a{color:#2f5237}
.buying-card .underlink,.catalogue-note .underlink,.menu-content .underlink{color:#2f5237;border-color:rgba(22,48,31,.4)}
.menu-studio .menu-choice{background:transparent;color:#3c5238;border-color:rgba(24,47,32,.16)}
.menu-studio .menu-choice.active{background:#16301f;color:#f7f1df;border-color:#16301f}
.menu-studio .menu-photo{background:#0b1f15}
.menu-studio .eyebrow{color:var(--garden-gold)}
.menu-studio .button{background:#16301f;color:#f7f1df;border-color:#16301f}
.menu-studio .underlink{color:#2c4733;border-color:rgba(24,47,32,.35)}
.tea-menu-section .menu-studio{background:var(--garden-paper)!important;color:var(--garden-ink)!important;border:1px solid rgba(255,255,255,.6);box-shadow:0 22px 48px rgba(9,30,19,.2)}
.tea-menu-section .menu-content{background:transparent!important;color:var(--garden-ink)!important}
.tea-menu-section .menu-content h2,.tea-menu-section .menu-content h3{color:var(--garden-ink)!important}
.tea-menu-section .menu-content p{color:var(--garden-body)!important}
.tea-menu-section .menu-content .eyebrow{color:var(--garden-gold)!important}
.tea-menu-section .menu-choice{background:transparent!important;color:#3c5238;border-color:rgba(24,47,32,.18)}
.tea-menu-section .menu-choice.active{background:#16301f!important;color:#f7f1df}
.tea-menu-section .menu-switcher{background:transparent!important;border-color:rgba(24,47,32,.18)}
.tea-menu-section .menu-stage{background:#0b1f15}

/* --- product detail ------------------------------------------------------ */
.equipment-category-photo{background:#e7e2cf;border:1px solid rgba(22,48,31,.12);border-radius:8px}
.equipment-category-copy,.equipment-heading,.equipment-reference-note{color:var(--garden-body)}
.equipment-category-copy h2,.equipment-heading h2{color:var(--garden-ink)}
.detail-photo{background:#e7e2cf!important;border:1px solid rgba(22,48,31,.12);border-radius:8px}
.detail-image-frame{background:#e7e2cf}
.detail-thumbnails button{background:#efe9d7!important;border-color:rgba(22,48,31,.18)}
.detail-thumbnails button.active{border-color:#16301f}
.detail-copy h1,.detail-copy h2{color:var(--garden-ink)}
.detail-copy{background:var(--garden-paper);border:1px solid rgba(255,255,255,.6);border-radius:8px;padding:34px 34px 30px;box-shadow:0 22px 48px rgba(9,30,19,.16)}
.detail-description{color:var(--garden-body)}
.use-tags span{background:rgba(22,48,31,.07);color:#2b4432;border:1px solid rgba(22,48,31,.14)}
.spec-table>div{border-color:rgba(22,48,31,.14)}
.detail-copy .eyebrow{color:var(--garden-gold)}
.detail-copy .button,.detail-copy .button:hover{background:#16301f;color:#f8f1df;border-color:#16301f}
.detail-copy input,.detail-copy textarea{background:#fffdf6!important;color:#1b3223!important;border-color:rgba(22,48,31,.22)!important}
.detail-copy ::placeholder{color:#7d8873}
.detail-photo .detail-enlarge,.detail-enlarge{background:rgba(248,241,223,.94);color:#16301f;border:0}
.process-strip{border-color:rgba(22,48,31,.18)}
.step-number{color:var(--garden-gold)}
.faq-section details,.faq-section summary{color:var(--garden-ink);border-color:rgba(22,48,31,.16)}

/* --- journal chrome ------------------------------------------------------ */
.journal-header{background:rgba(8,26,17,.9)!important;color:var(--garden-cream)!important;border-color:rgba(244,237,217,.14)!important}
.journal-header .journal-brand,.journal-header .journal-brand small,.journal-header a{color:var(--garden-cream)!important}
.journal-header .journal-button{background:#f8f1df!important;color:#14301f!important;border-color:#f8f1df!important}
.journal-announcement{background:var(--garden-deep)!important;color:#efe8d3!important}
.journal-intro{background:var(--garden-paper);border:1px solid rgba(255,255,255,.6);border-radius:8px;color:var(--garden-ink)}
.journal-intro h1{color:var(--garden-ink)}
.journal-intro .eyebrow{color:var(--garden-gold)}
.journal-intro p{color:var(--garden-body)}
.journal-card{background:var(--garden-paper);border:1px solid rgba(255,255,255,.6);color:var(--garden-ink);box-shadow:0 18px 40px rgba(9,30,19,.18);border-radius:8px}
.journal-card h2,.journal-card h3{color:var(--garden-ink)}
.journal-card p{color:var(--garden-body)}
.journal-card .read-link,.journal-card .underlink{color:#2f5237;border-color:rgba(22,48,31,.4)}
.journal-card .eyebrow{color:var(--garden-gold)}
.home-journal a.journal-card,.home-journal .journal-card{color:var(--garden-ink)}
.journal-photo{background:#e7e2cf}
.journal-card>span.eyebrow{display:block;margin:22px 26px 0}
.journal-card>h3{margin:8px 26px 10px;font-size:29px;line-height:1.2;font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.03em}
.journal-card>p{margin:0 26px}
.journal-card>.underlink{display:inline-block;margin:14px 26px 24px}
.article-heading{background:var(--garden-paper);border-radius:8px}
.article-heading h1{color:var(--garden-ink)}
.article-deck{color:var(--garden-body)}
.article-meta,.journal-breadcrumb,.journal-breadcrumb a{color:var(--garden-body)}
.article-cover{background:#e7e2cf}
.article-body{color:var(--garden-body)}
.article-body h2,.article-body h3,.article-body h4{color:var(--garden-ink)}
.article-body a{color:#2f5237}
.article-cta{background:var(--garden-deep);border:1px solid rgba(244,237,217,.16);color:#f2ecda;border-radius:8px}
.article-cta h2,.article-cta p{color:#f2ecda}
.journal-empty,.journal-pagination a{color:var(--garden-body)}
.journal-pagination a[aria-current]{background:#16301f;color:#f8f1df}

/* --- contact ------------------------------------------------------------- */
.contact-form-panel{padding:32px 32px 36px}
.contact-layout .contact-line,.contact-layout .contact-line *,
.contact-layout .contact-codes,.contact-layout .contact-codes *{color:#26402f!important}
.contact-layout .contact-line strong{color:#14291c!important}
.contact-layout .eyebrow{color:var(--garden-gold)!important}

/* --- forms --------------------------------------------------------------- */
input,textarea,select{background:#fffdf6;color:#1b3223;border-color:rgba(22,48,31,.22)}
.contact-form-panel input,.contact-form-panel textarea,.contact-form-panel select{background:#fffdf6;border-color:#cfc9b2}
.contact-address{color:var(--garden-body)}
.contact-address strong{color:var(--garden-ink)}
dialog{background:var(--garden-cream);color:var(--garden-ink)}
.image-note{background:rgba(9,30,19,.9);color:#eee8d4;border-radius:4px}

/* --- footer -------------------------------------------------------------- */
footer,.journal-footer{background:rgba(6,22,14,.96);color:#e8e3d0;border:0;border-radius:0}
footer a,.journal-footer a,.footer-main .brand,.journal-footer .journal-brand{color:#f0ebd8}
.footer-main p,.footer-bottom,.reference-credit,.journal-footer p{color:#b7c3a6}
.footer-main h3{color:#e0d3a5}
.footer-bottom,.footer-main>div:last-child{border-color:rgba(244,237,217,.14)}
.footer-bottom::after{content:" · Tea garden photograph: Vyacheslav Argenberg / CC BY 4.0, via Wikimedia Commons";color:#8d9a80;font-size:11px}

/* --- small print --------------------------------------------------------- */
.reference-note,.shipping-footnote,.small-note,.empty-state{color:var(--garden-body)}

/* --- headings need a paper strip on the busy field ----------------------- */
.section-heading{
  background:rgba(248,241,223,.94);border:1px solid rgba(255,255,255,.62);border-radius:8px;
  padding:20px 26px;box-shadow:0 18px 40px rgba(9,30,19,.16)}
.section-heading h2{color:var(--garden-ink)!important}
.section-heading .eyebrow{color:var(--garden-gold)!important}
.catalogue-tools{
  background:rgba(248,241,223,.94);border:1px solid rgba(255,255,255,.62);border-radius:8px;
  padding:14px 18px;box-shadow:0 18px 40px rgba(9,30,19,.14)}
.results-line{color:var(--garden-body)!important}

/* --- equipment feature card + tighter heading strips --------------------- */
.equipment-category-feature{background:rgba(248,241,223,.95)!important;border:1px solid rgba(255,255,255,.6);border-radius:8px;box-shadow:0 20px 44px rgba(9,30,19,.18);overflow:hidden}
.equipment-category-copy{background:transparent!important}
.equipment-category-copy h2,.equipment-category-copy h3{color:var(--garden-ink)!important}
.equipment-category-copy p,.equipment-category-copy span,.equipment-category-copy li{color:var(--garden-body)!important}
.equipment-category-copy .eyebrow{color:var(--garden-gold)!important}
.equipment-category-copy .button{background:#16301f!important;color:#f8f1df!important;border-color:#16301f!important}
.section-heading{padding:16px 24px}
.section-heading h2{margin:2px 0 4px}

/* page intro becomes a deep band, not a giant paper sheet */
.page-intro{background:rgba(9,30,19,.9)!important;color:#f4eeda;border:0!important;border-radius:0;box-shadow:none}
.page-intro h1{color:#fbf6e6!important}
.page-intro .eyebrow{color:#e0d3a5!important}
.page-intro p{color:#cdd8bb!important}

/* breadcrumb on the field needs its own chip */
.breadcrumb{display:inline-block;background:rgba(248,241,223,.92);border:1px solid rgba(255,255,255,.6);border-radius:4px;padding:7px 12px;box-shadow:0 8px 20px rgba(9,30,19,.12)}
.breadcrumb a{color:#2f4a35}

/* mobile uses a portrait crop of the same garden, fixed so it never shows sky bands */
@media(max-width:820px){
  body{background-image:url('/assets/backgrounds/tea-garden-mobile.webp');background-size:cover;background-position:center 45%;background-attachment:fixed}
}

/* ==========================================================================
   Non-home pages: frosted glass panels over the same garden background.
   Home page (body:has(.hero)) keeps its opaque paper panels untouched.
   ========================================================================== */
body:not(:has(.hero)) .section-heading,
body:not(:has(.hero)) .catalogue-tools,
body:not(:has(.hero)) .product-card,
body:not(:has(.hero)) .category-card,
body:not(:has(.hero)) .journal-card,
body:not(:has(.hero)) .buying-card,
body:not(:has(.hero)) .catalogue-note,
body:not(:has(.hero)) .inquiry-summary,
body:not(:has(.hero)) .quote-label,
body:not(:has(.hero)) .menu-studio,
body:not(:has(.hero)) .contact-form-panel,
body:not(:has(.hero)) .quality-copy,
body:not(:has(.hero)) .menu-content,
body:not(:has(.hero)) .detail-copy,
body:not(:has(.hero)) .equipment-category-feature,
body:not(:has(.hero)) .article-heading,
body:not(:has(.hero)) .article-cta{
  background:rgba(248,241,223,.46)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  backdrop-filter:blur(16px) saturate(1.08);
  border:1px solid rgba(255,255,255,.42)!important;
  box-shadow:0 18px 40px rgba(9,30,19,.14)!important;
}

/* page intros become glass strips on inner pages */
body:not(:has(.hero)) .page-intro,
body:not(:has(.hero)) .journal-intro{
  background:rgba(248,241,223,.44)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  backdrop-filter:blur(18px) saturate(1.08);
  border:1px solid rgba(255,255,255,.42)!important;
  border-radius:8px;box-shadow:0 20px 44px rgba(9,30,19,.14)!important;
  color:var(--garden-ink)!important}
body:not(:has(.hero)) .page-intro h1,
body:not(:has(.hero)) .journal-intro h1{color:var(--garden-ink)!important}
body:not(:has(.hero)) .page-intro p,
body:not(:has(.hero)) .journal-intro p{color:var(--garden-body)!important}
body:not(:has(.hero)) .page-intro .eyebrow,
body:not(:has(.hero)) .journal-intro .eyebrow{color:var(--garden-gold)!important}

/* journal article body keeps readable glass paper */
body:not(:has(.hero)) .article-body{
  background:rgba(248,241,223,.5);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.38);border-radius:8px;padding:34px 38px}

/* product detail photo plate stays light glass instead of solid cream */
body:not(:has(.hero)) .detail-photo,
body:not(:has(.hero)) .equipment-category-photo,
body:not(:has(.hero)) .detail-image-frame{
  background:rgba(248,241,223,.34)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* tune the glass: a bit more body, a bit less blur */
body:not(:has(.hero)) .section-heading,
body:not(:has(.hero)) .catalogue-tools,
body:not(:has(.hero)) .product-card,
body:not(:has(.hero)) .category-card,
body:not(:has(.hero)) .journal-card,
body:not(:has(.hero)) .buying-card,
body:not(:has(.hero)) .catalogue-note,
body:not(:has(.hero)) .inquiry-summary,
body:not(:has(.hero)) .quote-label,
body:not(:has(.hero)) .menu-studio,
body:not(:has(.hero)) .contact-form-panel,
body:not(:has(.hero)) .quality-copy,
body:not(:has(.hero)) .menu-content,
body:not(:has(.hero)) .detail-copy,
body:not(:has(.hero)) .equipment-category-feature,
body:not(:has(.hero)) .article-heading,
body:not(:has(.hero)) .article-cta{
  background:rgba(248,241,223,.56)!important;
  -webkit-backdrop-filter:blur(11px) saturate(1.06);
  backdrop-filter:blur(11px) saturate(1.06)}
body:not(:has(.hero)) .page-intro,
body:not(:has(.hero)) .journal-intro{
  background:rgba(248,241,223,.55)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.06);
  backdrop-filter:blur(12px) saturate(1.06);
  border-radius:0!important;border-left:0!important;border-right:0!important}
body:not(:has(.hero)) .detail-photo,
body:not(:has(.hero)) .equipment-category-photo,
body:not(:has(.hero)) .detail-image-frame{background:rgba(248,241,223,.4)!important}
body:not(:has(.hero)) .spec-table{color:var(--garden-body)}
body:not(:has(.hero)) .spec-table>div>span:first-child{color:#3d5442}

/* final glass tuning: lighter blur, clearer garden behind */
body:not(:has(.hero)) .section-heading,
body:not(:has(.hero)) .catalogue-tools,
body:not(:has(.hero)) .product-card,
body:not(:has(.hero)) .category-card,
body:not(:has(.hero)) .journal-card,
body:not(:has(.hero)) .buying-card,
body:not(:has(.hero)) .catalogue-note,
body:not(:has(.hero)) .inquiry-summary,
body:not(:has(.hero)) .quote-label,
body:not(:has(.hero)) .menu-studio,
body:not(:has(.hero)) .contact-form-panel,
body:not(:has(.hero)) .quality-copy,
body:not(:has(.hero)) .menu-content,
body:not(:has(.hero)) .detail-copy,
body:not(:has(.hero)) .equipment-category-feature,
body:not(:has(.hero)) .article-heading,
body:not(:has(.hero)) .article-cta{
  background:rgba(248,241,223,.58)!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body:not(:has(.hero)) .page-intro,
body:not(:has(.hero)) .journal-intro{
  background:rgba(248,241,223,.5)!important;
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}

/* ==========================================================================
   Glass on every module box (home included) + glass backing for text-only
   blocks. The page-wide tea-garden background stays untouched.
   ========================================================================== */
.section-heading,.catalogue-tools,.product-card,.category-card,.journal-card,
.buying-card,.catalogue-note,.inquiry-summary,.quote-label,.menu-studio,
.contact-form-panel,.quality-copy,.menu-content,.detail-copy,
.equipment-category-feature,.article-heading,.article-cta,.editorial-copy,
.page-intro,.journal-intro{
  background:rgba(248,241,223,.52)!important;
  -webkit-backdrop-filter:blur(9px) saturate(1.05);
  backdrop-filter:blur(9px) saturate(1.05);
  border:1px solid rgba(255,255,255,.45)!important;
  box-shadow:0 18px 40px rgba(9,30,19,.15)!important;
}
.page-intro,.journal-intro{border-radius:0!important;border-left:0!important;border-right:0!important}
.editorial-copy{border-radius:8px!important}

/* text-only blocks get their own frosted backing */
.process-strip,.faq-section,.equipment-reference-note,.reference-note,
.shipping-footnote,.small-note,.journal-empty,.catalogue-note,
.results-line,.shipping-steps{
  background:rgba(248,241,223,.5)!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.38)!important;
  border-radius:6px;padding:14px 18px;box-shadow:0 12px 28px rgba(9,30,19,.12)}
.results-line{padding:9px 14px;display:inline-block}
.equipment-reference-note{display:inline-block}

/* keep glass text dark and crisp */
.section-heading h2,.section-heading p,.section-heading .eyebrow,
.editorial-copy h2,.editorial-copy p,.editorial-copy .eyebrow,.editorial-list,
.page-intro h1,.page-intro p,.page-intro .eyebrow,
.journal-intro h1,.journal-intro p,.journal-intro .eyebrow,
.process-strip,.faq-section,.equipment-reference-note,.reference-note,
.shipping-footnote,.small-note,.journal-empty,.results-line{
  color:var(--garden-ink)}
.section-heading p,.editorial-copy p,.page-intro p,.journal-intro p,
.process-strip,.faq-section,.equipment-reference-note,.reference-note,
.shipping-footnote,.small-note,.journal-empty,.results-line{color:var(--garden-body)}

/* readability pass on the glass: slightly denser panels, darker type */
.product-card,.category-card,.journal-card,.buying-card,.catalogue-note,
.inquiry-summary,.quote-label,.menu-studio,.contact-form-panel,.quality-copy,
.menu-content,.detail-copy,.equipment-category-feature,.article-heading,
.article-cta,.editorial-copy,.section-heading,.catalogue-tools{
  background:rgba(248,241,223,.64)!important}
.product-card h3,.category-card h3,.journal-card h2,.journal-card h3,
.buying-card h2,.buying-card h3,.catalogue-note h3,.inquiry-summary h3,
.detail-copy h1,.detail-copy h2,.article-heading h1,.editorial-copy h2,
.section-heading h2{color:#0f2a1a!important}
.product-card p,.category-card p,.journal-card p,.buying-card p,.catalogue-note p,
.inquiry-summary p,.detail-description,.article-deck,.editorial-copy p,
.section-heading p{color:#253d2c!important}
.product-card .product-card-info,.category-card .category-card p{color:#253d2c}
.product-card .eyebrow,.category-card .eyebrow,.journal-card .eyebrow{color:#7a5f28!important}
.process-strip,.faq-section,.equipment-reference-note,.reference-note,
.shipping-footnote,.small-note,.journal-empty,.results-line,.shipping-steps{
  background:rgba(248,241,223,.6)!important;color:#253d2c!important}

/* ==========================================================================
   Layout pass: panels get inner breathing room; grids reflow with the window.
   ========================================================================== */
.quality-copy{padding:clamp(22px,2.6vw,42px)}
.equipment-category-copy{padding:clamp(22px,2.8vw,46px)}
.detail-copy{padding:clamp(22px,2.6vw,36px)!important}
.quality-copy h2,.equipment-category-copy h2{max-width:22ch}
.section{padding-block:clamp(46px,5.6vw,85px)}
.section-heading{padding:clamp(14px,1.6vw,20px) clamp(18px,2vw,26px)}

@media (max-width:1200px){
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:1000px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .buying-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .home-journal .journal-grid,.journal-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tea-quality,.menu-stage,.equipment-category-feature,.contact-layout,
  .product-detail,.detail-grid{grid-template-columns:1fr!important}
  .quality-photo,.equipment-category-photo{min-height:340px}
  .menu-photo{min-height:320px}
  .quality-copy h2,.equipment-category-copy h2{max-width:none}
  .contact-codes{grid-template-columns:1fr!important}
}
@media (max-width:760px){
  .buying-grid{grid-template-columns:1fr!important}
  .tea-quality{gap:26px}
  .editorial-copy{padding:clamp(20px,4vw,32px)!important}
}
@media (max-width:560px){
  .product-grid,.category-grid{grid-template-columns:1fr!important}
  .journal-grid{grid-template-columns:1fr!important}
  .section-heading{padding:14px 16px}
  .quality-copy,.equipment-category-copy,.detail-copy{padding:18px 16px!important}
}

/* final layout polish */
.quality-copy a,.quality-copy .underlink{color:#2f5237!important;border-color:rgba(22,48,31,.4)!important}
.catalogue-note{padding:clamp(18px,2.2vw,30px)}
@media (max-width:1080px){
  .tea-quality,.menu-stage,.equipment-category-feature,.contact-layout,.product-detail,.detail-grid{grid-template-columns:1fr!important}
  .quality-photo,.equipment-category-photo{min-height:340px}
}
@media (max-width:1000px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .buying-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .home-journal .journal-grid,.journal-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .contact-codes{grid-template-columns:1fr!important}
}

/* small screens: one card per row (must stay last) */
@media (max-width:560px){
  .product-grid,.category-grid,.journal-grid,.buying-grid{grid-template-columns:1fr!important}
  .contact-codes{grid-template-columns:1fr!important}
  .product-grid{gap:18px}
}

/* stacked product photo should fill its frame instead of letterboxing */
@media (max-width:1080px){
  .detail-photo{padding:0!important;background:transparent!important;border:0!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
  .detail-main-image{object-fit:cover!important;width:100%!important;height:auto!important;display:block;border-radius:8px}
  .detail-image-frame{background:transparent}
  .detail-thumbnails button{background:#efe9d7!important}
}

/* stacked product photo: natural height, no letterbox bars */
@media (max-width:1080px){
  .detail-photo{background:#efe9d7!important;padding:0!important;border:1px solid rgba(22,48,31,.12)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .detail-main-image{object-fit:contain!important;width:100%!important;height:auto!important;display:block}
  .detail-image-frame{background:transparent}
}

/* stacked product photo: frame follows the image ratio */
@media (max-width:1080px){
  .detail-image-frame{height:auto!important;aspect-ratio:4/3;background:#efe9d7;overflow:hidden;border-radius:6px}
  .detail-main-image{object-fit:cover!important;width:100%!important;height:100%!important;display:block}
  .detail-photo{background:transparent!important;padding:0!important;border:0!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
}

/* ==========================================================================
   Pinned marquee announcement bar (all public pages)
   ========================================================================== */
:root{--ann-h:36px}
body{padding-top:var(--ann-h)!important}
.announcement,.journal-announcement{
  position:fixed;top:0;left:0;right:0;z-index:400;
  height:var(--ann-h);margin:0;padding:0!important;
  display:block!important;overflow:hidden;
  font-size:0!important;line-height:var(--ann-h);
  background:rgba(6,21,13,.96)!important;color:#efe8d3!important;
  border-bottom:1px solid rgba(211,190,139,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.announcement>span,.announcement>a{display:none!important}
.announcement::before,.journal-announcement::before{
  content:"Wholesale Bubble Tea Ingredients  ✳  Serving Tea Shops, Cafés & Restaurant Chains  ✳  Contact Us for Bulk Pricing & Product Details  ✳  Wholesale Bubble Tea Ingredients  ✳  Serving Tea Shops, Cafés & Restaurant Chains  ✳  Contact Us for Bulk Pricing & Product Details  ✳  ";
  position:absolute;top:0;left:0;height:100%;
  display:flex;align-items:center;width:max-content;
  white-space:nowrap;
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#f0e9d6;
  animation:ann-scroll 44s linear infinite}
@keyframes ann-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:680px){
  :root{--ann-h:32px}
  .announcement::before,.journal-announcement::before{font-size:9.5px;letter-spacing:.12em;animation-duration:32s}
}
@media(prefers-reduced-motion:reduce){
  .announcement::before,.journal-announcement::before{animation:none;padding-left:14px}
}
/* the poster carries its own concept note; drop the overlay badge */
.editorial-image .image-note{display:none!important}
/* editorial-portrait-poster */
.editorial{
  grid-template-columns:minmax(0,400px) minmax(0,1fr)!important;
  gap:0!important;
  padding:14px!important;
  align-items:center!important;
  max-width:1000px;
  margin-inline:auto!important;
  background:rgba(248,241,223,.72)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.05);
  backdrop-filter:blur(18px) saturate(1.05);
  border:1px solid rgba(255,255,255,.55);
  border-radius:10px!important;
  overflow:hidden}
.editorial-image{
  aspect-ratio:1122 / 1402;
  min-height:0!important;
  height:auto!important;
  border-radius:6px!important;
  align-self:center}
body .editorial .editorial-copy{
  background:none!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  padding:clamp(20px,2.4vw,34px)!important;
  max-width:520px}
@media (max-width:900px){
  .editorial{grid-template-columns:1fr!important;padding:12px!important;max-width:none}
  .editorial-image{aspect-ratio:1122 / 1402;min-height:0!important}
  body .editorial .editorial-copy{max-width:none}
}
/* editorial headline hops in letter by letter */
.editorial-copy.motion-reveal{
  opacity:1!important;
  translate:none!important;
  transform:none!important}
.editorial-copy.motion-reveal .motion-reveal{
  opacity:1!important;
  translate:none!important;
  transform:none!important}
.editorial-copy h2 .hop{
  display:inline-block;
  opacity:0;
  will-change:transform,opacity}
.editorial-copy.motion-reveal.is-revealed h2 .hop{
  animation:letter-hop var(--hdur,.8s) cubic-bezier(.22,.9,.28,1.06) var(--hd,0s) both}
@keyframes letter-hop{
  0%{opacity:0;transform:translate(2.4em,1.15em) rotate(var(--hr,5deg))}
  42%{opacity:1}
  68%{transform:translate(-0.05em,var(--hy,-14px)) rotate(calc(var(--hr,5deg) * -0.45))}
  85%{transform:translate(0.04em,0.14em) rotate(0deg)}
  100%{opacity:1;transform:translate(0,0) rotate(0)}}
@media (prefers-reduced-motion: reduce){
  .editorial-copy h2 .hop{opacity:1!important;animation:none!important;transform:none!important}
}