/*
Theme Name: Daifu Custom
Theme URI: https://daifu.com.sg
Author: Daifu
Description: Custom theme that replicates the existing daifu.com.sg static site design, ported into WordPress for ongoing content/theme management.
Version: 1.2
Text Domain: daifu-custom
*/

:root{
  --paper:#F2EAD8;
  --paper-2:#EADFC6;
  --kraft:#E4D6BB;
  --ink:#2A1C13;
  --ink-soft:#6A5540;
  --seal:#BE2A1E;
  --seal-deep:#921D1D;
  --line:#D8C9AB;
  --cream:#F4E9D2;
  --energy:#CBA176;
  --sleep:#4D312A;
  --liver:#921D1D;
  --digest:#ED6B23;
  --shadow:0 18px 40px -22px rgba(42,28,19,.55);
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"DM Sans",system-ui,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(rgba(139,110,74,.05) 1px,transparent 1px);
  background-size:22px 22px;
}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.08;letter-spacing:-.01em;margin:0}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.serif{font-family:"Fraunces",Georgia,serif}
.zh{font-family:"Noto Serif SC","Fraunces",serif;font-weight:900}
.eyebrow{font-size:.82rem;letter-spacing:.16em;font-weight:600;color:var(--seal-deep);text-transform:none}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;border:none;
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:1rem;
  padding:.85rem 1.5rem;border-radius:999px;text-decoration:none;transition:transform .12s ease,background .2s ease,color .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--seal);color:#fff}
.btn-primary:hover{background:var(--seal-deep)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-cream:hover{background:#fff}
:focus-visible{outline:3px solid var(--seal);outline-offset:3px;border-radius:4px}

/* announcement */
.announce{background:var(--ink);color:var(--cream);text-align:center;font-size:.85rem;letter-spacing:.02em;padding:.55rem 1rem}
.announce strong{color:#fff}

/* header */
header.site{position:sticky;top:0;z-index:40;background:rgba(242,234,216,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:1.5rem;height:70px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:"Fraunces",serif;font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
.brand img{width:40px;height:40px}
.nav-links{display:flex;gap:1.6rem;margin-left:auto;font-size:.95rem;font-weight:500}
.nav-links a{text-decoration:none;color:var(--ink-soft);transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:.75rem}
.cart-btn{position:relative;background:none;border:none;cursor:pointer;color:var(--ink);padding:.35rem}
.cart-count{position:absolute;top:-6px;right:-6px;background:var(--seal);color:#fff;font-size:.68rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px;font-family:"DM Sans",sans-serif}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--ink)}

/* hero */
.hero{position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;padding-top:70px;padding-bottom:80px}
.hero-travel{display:flex;gap:1.1rem;color:var(--ink-soft);margin-bottom:1.4rem}
.hero-travel svg{width:26px;height:26px}
.hero h1{font-size:clamp(3.2rem,7vw,5.4rem);font-weight:600}
.hero .zh-title{font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--seal-deep);margin:.4rem 0 0}
.hero .lead{font-size:1.15rem;color:var(--ink-soft);max-width:34ch;margin:1.4rem 0 1.8rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-proof{margin-top:1.6rem;font-size:.92rem;color:var(--ink-soft);display:flex;align-items:center;gap:.5rem}
.stars{color:#C8901F;letter-spacing:.05em}
.hero-visual{position:relative;display:grid;place-items:center;min-height:360px}
.seal-hero{width:min(78%,340px);filter:drop-shadow(0 20px 30px rgba(146,29,29,.28))}
.formula-chips{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.6rem}
.chip-link{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-size:.9rem;font-weight:600;padding:.5rem .9rem;border-radius:999px;border:1.5px solid var(--line);background:var(--paper-2);transition:transform .12s,border-color .2s}
.chip-link:hover{transform:translateY(-2px)}
.chip-dot{width:12px;height:12px;border-radius:50%}

@keyframes stamp{0%{opacity:0;transform:scale(1.35) rotate(-9deg)}60%{opacity:1;transform:scale(.97) rotate(1.5deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.seal-hero{animation:stamp .9s cubic-bezier(.2,.9,.3,1) both}
@media (prefers-reduced-motion:reduce){.seal-hero{animation:none}}

/* stats bar */
.stats{background:var(--ink);color:var(--cream)}
.stats .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.2rem;padding:22px 24px}
.stat{display:flex;flex-direction:column;min-width:120px}
.stat b{font-family:"Fraunces",serif;font-size:1.5rem;font-weight:600;color:#fff}
.stat span{font-size:.82rem;color:#cbb89a;letter-spacing:.02em}

/* section shells */
section{padding:84px 0}
.section-head{max-width:60ch;margin-bottom:2.6rem}
.section-head h2{font-size:clamp(2.1rem,4vw,3rem)}
.section-head p{color:var(--ink-soft);font-size:1.1rem;margin-top:.7rem}

/* pillars */
.pillars{background:var(--paper-2)}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.pillar{border-top:2px solid var(--ink);padding-top:1.1rem}
.pillar h3{font-size:1.5rem;margin-bottom:.5rem}
.pillar .zh-sm{font-family:"Noto Serif SC",serif;font-weight:700;color:var(--seal-deep);font-size:1.05rem;display:block;margin-bottom:.2rem}
.pillar p{color:var(--ink-soft);margin:0}

/* trust */
.trust{background:var(--ink);color:var(--cream)}
.trust .section-head h2{color:#fff}
.trust .section-head p{color:#cbb89a}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.badge{display:flex;align-items:center;gap:.75rem;background:rgba(255,255,255,.05);border:1px solid rgba(244,233,210,.16);border-radius:14px;padding:1rem 1.1rem;font-weight:500}
.badge svg{width:26px;height:26px;flex:none;color:#E7B24A}

/* products */
.product{padding:0}
.product-inner{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;min-height:min(88vh,720px)}
.product-media{display:grid;place-items:center;padding:56px 24px}
.product-media img{width:min(80%,360px);border-radius:10px;box-shadow:var(--shadow)}
.product-body{padding:64px clamp(24px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.product-body .num{font-family:"Fraunces",serif;font-size:.95rem;opacity:.7;margin-bottom:.6rem;font-weight:500}
.product-body h2{font-size:clamp(2rem,3.4vw,2.8rem)}
.product-body .zh-name{font-family:"Noto Serif SC",serif;font-weight:900;font-size:1.5rem;margin-top:.35rem;opacity:.92}
.product-body .essence{font-style:italic;font-family:"Fraunces",serif;opacity:.72;margin:.2rem 0 1rem}
.product-body .desc{font-size:1.08rem;margin-bottom:1.2rem;max-width:46ch}
.benefits{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.5rem;max-width:48ch}
.benefits li{position:relative;padding-left:1.6rem;font-size:.98rem;line-height:1.45}
.benefits li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.5}
.spec{font-size:.9rem;line-height:1.5;opacity:.85;margin-bottom:1.4rem;max-width:52ch}
.spec b{font-weight:600;opacity:1}
.buybar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.seg{display:inline-flex;background:rgba(0,0,0,.08);border-radius:999px;padding:3px}
.seg button{border:none;background:none;cursor:pointer;font-family:inherit;font-weight:600;font-size:.85rem;padding:.45rem .9rem;border-radius:999px;color:inherit;opacity:.72}
.seg button.active{background:var(--cream);color:var(--ink);opacity:1}
.price{font-family:"Fraunces",serif;font-size:1.6rem;font-weight:600}
.product .detail-toggle{margin-top:1.2rem;font-size:.85rem;font-weight:600;background:none;border:none;cursor:pointer;color:inherit;opacity:.75;text-decoration:underline;text-underline-offset:3px;padding:0}
.detail-panel{margin-top:1rem;font-size:.85rem;line-height:1.55;opacity:.85;display:none;border-top:1px solid currentColor;padding-top:1rem}
.detail-panel.open{display:block}
.detail-panel .row{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin-bottom:.35rem}
.detail-panel .row b{opacity:.7;font-weight:600}

/* color themes for product sections */
.p-energy{background:var(--energy);color:#2E1F12}
.p-energy .seg button.active,.p-energy .btn-cream{background:#F6ECD8}
.p-sleep{background:var(--sleep);color:var(--cream)}
.p-sleep .seg{background:rgba(255,255,255,.12)}
.p-liver{background:var(--liver);color:var(--cream)}
.p-liver .seg{background:rgba(255,255,255,.14)}
.p-digest{background:var(--digest);color:#3A1D08}
.p-digest .seg button.active,.p-digest .btn-cream{background:#FBEFDD}
.p-sleep .btn-primary,.p-liver .btn-primary{background:var(--cream);color:var(--ink)}
.p-sleep .btn-primary:hover,.p-liver .btn-primary:hover{background:#fff}

/* tastes / packed */
.taste-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.taste-card{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:1.4rem}
.taste-card .k{font-family:"Fraunces",serif;font-size:1.25rem;margin-bottom:.15rem}
.taste-card .zh-sm{font-family:"Noto Serif SC",serif;font-weight:700;color:var(--seal-deep);font-size:.95rem}
.taste-notes{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.note{font-size:.82rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.28rem .7rem}
.packed{background:var(--paper-2)}
.packed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.packed-item{display:flex;gap:.8rem;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem}
.packed-item .emoji{font-size:1.5rem;line-height:1}
.packed-item b{display:block;font-family:"Fraunces",serif;font-weight:600;font-size:1.05rem;margin-bottom:.15rem}
.packed-item span{font-size:.85rem;color:var(--ink-soft)}

/* why */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.why{padding:1.4rem;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.why .icon{font-size:1.6rem;margin-bottom:.6rem}
.why h3{font-size:1.2rem;margin-bottom:.35rem}
.why p{color:var(--ink-soft);font-size:.95rem;margin:0}

/* reviews */
.reviews{background:var(--ink);color:var(--cream)}
.reviews .section-head h2{color:#fff}
.reviews .section-head p{color:#cbb89a}
.review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.review{background:rgba(255,255,255,.05);border:1px solid rgba(244,233,210,.16);border-radius:16px;padding:1.4rem}
.review .stars{margin-bottom:.6rem;display:block}
.review p{font-size:.95rem;margin-bottom:1rem}
.review .who{font-size:.85rem;color:#cbb89a;font-weight:500}

/* faq */
.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:"Fraunces",serif;font-weight:600;font-size:1.2rem;color:var(--ink);padding:1.3rem 2.5rem 1.3rem 0;position:relative;display:flex;justify-content:space-between;gap:1rem}
.faq-q .plus{flex:none;width:24px;height:24px;position:relative;transition:transform .25s}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--seal);border-radius:2px}
.faq-q .plus::before{top:11px;left:2px;right:2px;height:2px}
.faq-q .plus::after{left:11px;top:2px;bottom:2px;width:2px;transition:opacity .25s}
.faq-item[aria-expanded="true"] .plus::after{opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 0 1.3rem;color:var(--ink-soft);margin:0;max-width:70ch}

/* newsletter */
.news{background:var(--seal);color:#fff;border-radius:0}
.news .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.news h2{color:#fff;font-size:clamp(2rem,3.6vw,2.7rem)}
.news p{color:#f7dad6;margin-top:.6rem}
.news-form{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}
.news-form input{flex:1;min-width:220px;border:none;border-radius:999px;padding:.9rem 1.3rem;font-family:inherit;font-size:1rem}
.news .fine{font-size:.78rem;color:#f4cdc8;margin-top:.9rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.contact-card{display:flex;align-items:center;gap:.9rem;text-decoration:none;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:1.05rem 1.2rem;transition:transform .12s,border-color .2s;color:var(--ink)}
.contact-card:hover{transform:translateY(-2px);border-color:var(--seal)}
.contact-card .ci{width:38px;height:38px;flex:none;border-radius:10px;background:var(--seal);display:grid;place-items:center;color:#fff}
.contact-card .ci svg{width:20px;height:20px}
.contact-card b{font-size:.98rem}
.contact-card span{display:block;font-size:.83rem;color:var(--ink-soft)}

/* footer */
footer.site{background:var(--ink);color:#cbb89a;padding:64px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:2rem;margin-bottom:2.4rem}
footer .brand-block .brand{color:#fff;margin-bottom:.8rem}
footer .brand-block p{font-size:.9rem;max-width:34ch}
footer h4{color:#fff;font-family:"DM Sans",sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 1rem;font-weight:600}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
footer a{text-decoration:none;color:#cbb89a;font-size:.92rem}
footer a:hover{color:#fff}
.foot-badges{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0}
.foot-badges span{font-size:.78rem;border:1px solid rgba(244,233,210,.2);border-radius:999px;padding:.3rem .8rem}
.foot-bottom{border-top:1px solid rgba(244,233,210,.15);padding-top:1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.82rem}
.disclaimer{font-size:.78rem;color:#a08a68;max-width:80ch;margin-top:1.2rem;line-height:1.5}

/* cart drawer */
.overlay{position:fixed;inset:0;background:rgba(26,17,11,.5);opacity:0;visibility:hidden;transition:opacity .25s;z-index:60}
.overlay.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--paper);z-index:70;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-20px 0 50px -20px rgba(0,0,0,.4)}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1.3rem 1.4rem;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:1.4rem}
.drawer-close{background:none;border:none;cursor:pointer;font-size:1.5rem;line-height:1;color:var(--ink)}
.drawer-body{flex:1;overflow-y:auto;padding:1.2rem 1.4rem}
.cart-empty{text-align:center;padding:3rem 1rem;color:var(--ink-soft)}
.cart-empty .zh{font-size:2rem;color:var(--seal);display:block;margin-bottom:.6rem}
.cart-item{display:flex;gap:.9rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.cart-item img{width:56px;height:70px;object-fit:cover;border-radius:8px;flex:none}
.cart-item .ci-main{flex:1;min-width:0}
.cart-item b{font-size:.95rem;display:block}
.cart-item small{color:var(--ink-soft);font-size:.8rem}
.qty{display:inline-flex;align-items:center;gap:.6rem;margin-top:.5rem;border:1px solid var(--line);border-radius:999px;padding:.15rem .3rem}
.qty button{width:24px;height:24px;border:none;background:none;cursor:pointer;font-size:1rem;color:var(--ink)}
.qty span{font-size:.9rem;min-width:16px;text-align:center}
.ci-remove{background:none;border:none;color:var(--ink-soft);font-size:.78rem;cursor:pointer;text-decoration:underline;margin-top:.4rem;padding:0}
.ci-price{font-family:"Fraunces",serif;font-weight:600}
.ci-qty{display:inline-flex;align-items:center;gap:.1rem;margin-top:.35rem;border:1.5px solid var(--line);border-radius:999px;padding:.1rem;background:var(--paper)}
.ci-qty-btn{width:26px;height:26px;border:none;background:none;cursor:pointer;color:var(--ink);font-size:1rem;line-height:1;border-radius:50%;display:grid;place-items:center;font-family:inherit}
.ci-qty-btn:hover:not(:disabled){background:var(--paper-2)}
.ci-qty-btn:disabled{opacity:.45;cursor:default}
.ci-qty-num{min-width:1.6rem;text-align:center;font-weight:600;font-size:.88rem}
#continueShopping{width:100%;justify-content:center;margin-top:.5rem}

/* ---------- Order received / thank-you page ----------
   WooCommerce wraps the order details and customer details in <section>
   elements, which were picking up this theme's global "section{padding:84px
   0}" rule — that alone put ~170px of empty space between the order table
   and the addresses. Everything below just tightens the default spacing; no
   order data, totals or layout semantics are changed. */
.woocommerce-order section,
section.woocommerce-order-details,
section.woocommerce-customer-details,
section[class*="wc-block-order-confirmation"]{padding:0}
.woocommerce-order{max-width:860px;margin:0 auto}
.woocommerce-order .woocommerce-notice--success{margin:0 0 1.5rem}
.woocommerce-order-overview{
  display:flex;flex-wrap:wrap;gap:1.4rem 2rem;list-style:none;
  margin:0 0 2rem;padding:1.1rem 1.3rem;
  border:1px solid var(--line);border-radius:14px;background:var(--paper-2);
}
.woocommerce-order-overview li{
  margin:0;padding:0;border:0;
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
}
.woocommerce-order-overview li strong{
  display:block;margin-top:.25rem;
  font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink);
}
.woocommerce-order-details,
.woocommerce-customer-details{margin:2rem 0 0}
.woocommerce-order-details__title,
.woocommerce-column__title{font-size:1.35rem;margin:0 0 .8rem}
.woocommerce-order .woocommerce-columns--addresses{margin-top:.5rem}
.woocommerce-order address{font-style:normal;line-height:1.6}

/* The "additional information" block renders as a bare heading with nothing
   under it when no extra checkout fields are collected. */
.wc-block-order-confirmation-additional-fields-wrapper:not(:has(dl)),
.wp-block-woocommerce-order-confirmation-additional-fields-wrapper:not(:has(dl)){display:none}
.drawer-foot{border-top:1px solid var(--line);padding:1.3rem 1.4rem}
.subtotal{display:flex;justify-content:space-between;font-family:"Fraunces",serif;font-size:1.25rem;font-weight:600;margin-bottom:.3rem}
.ship-note{font-size:.82rem;color:var(--ink-soft);margin-bottom:1rem}
.drawer-foot .btn{width:100%;justify-content:center}
.secure-line{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.78rem;color:var(--ink-soft);margin-top:.7rem}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120%);background:var(--ink);color:var(--cream);padding:.8rem 1.3rem;border-radius:999px;font-size:.9rem;z-index:90;transition:transform .3s;box-shadow:var(--shadow)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* checkout modal */
.modal-wrap{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:20px;background:rgba(26,17,11,.55)}
.modal-wrap.open{display:grid}
.modal{background:var(--paper);border-radius:18px;max-width:440px;width:100%;padding:2rem;text-align:center}
.modal .zh{font-size:2rem;color:var(--seal)}
.modal h3{font-size:1.6rem;margin:.6rem 0}
.modal p{color:var(--ink-soft);font-size:.95rem}
.modal .btn{margin-top:1rem}
.stripe-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--ink-soft);margin-top:1rem}

@media(max-width:900px){
  .nav-links{display:none}
  .menu-toggle{display:block}
  .nav-links.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;background:var(--paper);border-bottom:1px solid var(--line);padding:1rem 24px;gap:1rem;margin:0}
  .hero .wrap{grid-template-columns:1fr;padding-bottom:56px}
  .hero-visual{order:-1;min-height:220px}
  .seal-hero{width:180px}
  .pillar-grid,.badges,.taste-grid,.packed-grid,.why-grid,.review-grid,.contact-grid,.foot-grid,.news .wrap{grid-template-columns:1fr}
  .product-inner{grid-template-columns:1fr}
  .product-media{padding:40px 24px 0}
  .taste-grid,.review-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .taste-grid,.review-grid,.foot-grid{grid-template-columns:1fr}
  section{padding:60px 0}
}

/* Compact social icons (contact) */
.social-row{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:.5rem}
.social-ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);border:1.5px solid var(--line);color:var(--ink);transition:transform .15s ease,background .2s ease,color .2s ease,border-color .2s ease}
.social-ico svg{width:24px;height:24px}
.social-ico:hover{transform:translateY(-3px);background:var(--seal);border-color:var(--seal);color:#fff}
.social-caption{text-align:center;color:var(--ink-soft);font-size:.9rem;margin-top:1.1rem}
.social-caption a{color:var(--seal-deep);font-weight:600}


/* Product photos + video */
.pm-stack{display:flex;flex-direction:column;gap:14px;width:100%;max-width:430px}
.pm-main{border:none;padding:0;margin:0;background:none;cursor:zoom-in;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.pm-main img{width:100%;display:block}
.thumbs{display:flex;gap:8px}
.thumb{flex:1;border:2px solid rgba(0,0,0,.12);border-radius:9px;overflow:hidden;padding:0;background:none;cursor:pointer;aspect-ratio:1/1;transition:border-color .15s}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.is-active{border-color:var(--seal)}
.pvideo{margin-top:2px}
.pv{width:100%;max-width:260px;border-radius:12px;background:#000;display:block}
.pv-cap{font-size:.85rem;color:inherit;opacity:.82;margin-top:.45rem;font-weight:600}
.pvideo-multi{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:100%}
.pvideo-multi .pv{max-width:100%}
.pv-item .pv-cap{margin-top:.4rem}
.video-soon-block{border:1px dashed currentColor;opacity:.7;border-radius:12px;padding:1rem 1.2rem;text-align:center;font-size:.9rem}
/* Product info block (used where there's no video) */
.pinfo{border:1px solid currentColor;border-radius:14px;padding:1.1rem 1.2rem}
.pinfo h4{font-family:"Fraunces",serif;font-size:1.15rem;margin:0 0 .6rem}
.pinfo-block{margin-bottom:.6rem}
.pinfo-block b,.pinfo-grid b{display:block;font-size:.72rem;letter-spacing:.08em;margin-bottom:.2rem;opacity:.85}
.pinfo-block p{margin:0;font-size:.9rem;opacity:.92;line-height:1.45}
.pinfo-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:.4rem 0 .2rem}
.pinfo-grid ul{margin:.1rem 0 0;padding-left:1.05rem;font-size:.85rem;opacity:.92}
.pinfo-grid li{margin-bottom:.25rem;line-height:1.35}
.pinfo-note{font-size:.78rem;opacity:.72;margin:.6rem 0 0;line-height:1.4}


/* Gallery + lightbox (legacy, unused) */
.gallery{background:var(--paper)}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:2.2rem}
.gal-item{position:relative;border:none;padding:0;margin:0;cursor:zoom-in;border-radius:14px;overflow:hidden;background:var(--paper-2);aspect-ratio:3/4;box-shadow:var(--shadow)}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.85,.25,1)}
.gal-item:hover img{transform:scale(1.06)}
.lightbox{position:fixed;inset:0;z-index:95;display:none;place-items:center;padding:24px;background:rgba(26,17,11,.86)}
.lightbox.open{display:grid}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:12px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.lightbox .lb-close{position:absolute;top:18px;right:24px;background:none;border:none;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer}
@media(max-width:820px){.gal-grid{grid-template-columns:repeat(2,1fr)}}


/* ============ LIVELINESS LAYER ============ */
/* Video coming-soon badge on product images */
.media-wrap{position:relative;display:inline-block}
.video-soon{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(42,28,19,.85);color:var(--cream);font-family:"DM Sans",sans-serif;font-size:.72rem;letter-spacing:.02em;padding:.34rem .8rem;border-radius:999px;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* Subscribe & Save */
.subs{background:var(--paper-2)}
.sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.4rem}
.sub-card{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:1.8rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.45rem;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.sub-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.sub-card.pop{border-color:var(--seal)}
.sub-card.best{border-color:var(--ink)}
.sub-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.05em;padding:.32rem .95rem;border-radius:999px;white-space:nowrap;font-family:"DM Sans",sans-serif}
.sub-card.pop .sub-badge{background:var(--seal)}
.sub-card.best .sub-badge{background:var(--ink)}
.sub-term{font-family:"Fraunces",serif;font-size:1.35rem;font-weight:600}
.sub-price{font-family:"Fraunces",serif;font-size:2.3rem;font-weight:600;line-height:1;margin-top:.2rem}
.sub-per{color:var(--seal-deep);font-weight:600;font-size:.95rem}
.sub-meta{color:var(--ink-soft);font-size:.9rem;margin-bottom:.4rem}
.sub-card select{width:100%;padding:.6rem .7rem;border-radius:10px;border:1.5px solid var(--line);font-family:inherit;font-size:.92rem;background:var(--paper);color:var(--ink)}
.sub-card .btn{width:100%;justify-content:center;margin-top:.5rem}
.subs .fineprint{color:var(--ink-soft);font-size:.82rem;margin-top:1.6rem;text-align:center;max-width:60ch;margin-left:auto;margin-right:auto}
/* WooCommerce injects the "View cart" link straight after the Add to
   cart button on a successful AJAX add, as a plain sibling with no
   sizing of its own — inside .sub-actions' flex row that squeezes the
   two flex:1 buttons. Forcing it onto its own full-width row below
   keeps the buttons at their normal size. */
.sub-actions{flex-wrap:wrap}
.sub-actions .added_to_cart{order:3;flex:1 1 100%;text-align:center;margin-top:.5rem;font-size:.85rem;font-weight:600;color:var(--seal-deep);text-decoration:underline;text-underline-offset:3px}
.sub-actions .added_to_cart:hover{color:var(--seal)}
.buybar .added_to_cart{font-size:.85rem;font-weight:600;color:inherit;opacity:.85;text-decoration:underline;text-underline-offset:3px}

/* WooCommerce's block Checkout renders a per-unit price under the product
   name AND a line total on the right for every order-summary item. Both
   are kept, but labelled and sized distinctly (small "Unit price" caption
   vs. the large "Total" figure) so it's clear what each number is instead
   of reading as the same price shown twice. Scoped to the order-summary
   item specifically so the Cart page's own Price column is untouched. */
.wc-block-components-order-summary-item .wc-block-cart-item__prices{margin:.25rem 0}

/* Shared label styling: small uppercase caption stacked above its number. */
.wc-block-components-order-summary-item__individual-prices::before,
.wc-block-components-order-summary-item__total-price::before{
  display:block;
  margin-bottom:.1rem;
  font-family:"DM Sans",sans-serif;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
  opacity:.7;
}
.wc-block-components-order-summary-item__individual-prices::before{content:"Unit price"}
.wc-block-components-order-summary-item__total-price::before{content:"Total"}

.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__total-price{
  display:block;
}
.wc-block-components-order-summary-item__total-price{text-align:right}

/* Both figures are forced to one shared font/size. Without !important the
   theme's own site-wide .price rule (1.6rem Fraunces, meant for the big
   homepage product cards) wins here — which is what made the total render
   oversized and spill outside the Order summary card. */
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item__individual-prices .price,
.wc-block-components-order-summary-item__total-price .price,
.wc-block-components-order-summary-item__individual-prices .wc-block-components-product-price__value,
.wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value{
  font-family:"DM Sans",sans-serif !important;
  font-size:.92rem !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  color:var(--ink) !important;
  white-space:nowrap;
}
/* Give the checkout/cart order summary a bigger share of the row on wide
   screens. WooCommerce splits the layout 65/35, which leaves the summary
   column narrow enough that each product's name and description wrap into
   a very tall block.

   The container is "display:flex; flex-wrap:wrap" with both columns sized
   in percentages that add up to exactly 100%, so any sub-pixel rounding
   pushes the pair past the line and drops the summary underneath the form.
   Sizing the summary with a flex-basis and letting the form column flex
   into whatever is left — with wrapping disabled — keeps them side by side
   at any window width, while still scaling with the window. */
@media(min-width:1000px){
  .wc-block-components-sidebar-layout{
    flex-wrap:nowrap !important;
    flex-direction:row !important;
  }
  .wc-block-components-sidebar-layout > .wc-block-components-main{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
  }
  .wc-block-components-sidebar-layout > .wc-block-components-sidebar{
    flex:0 0 38% !important;
    width:38% !important;
    min-width:0 !important;
  }
}
.wc-block-components-order-summary-item__description{min-width:0}

/* The Checkout block renders the order summary twice: once in the sidebar
   (which on narrow screens moves to the top and becomes the collapsible
   "Order summary" dropdown) and once more in a "fill wrapper" that
   WooCommerce ships as display:none. When both end up visible the summary
   is repeated in a second box further down the page, so the duplicate is
   kept hidden here below the two-column breakpoint. */
@media(max-width:999px){
  .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper{display:none !important}
}

@media(max-width:820px){.sub-grid{grid-template-columns:1fr}}

/* Teddy-bear background pattern (subtle) */
.bears{position:relative}
.bears::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 64 70'%3E%3Cg fill='%232a1c13'%3E%3Ccircle cx='22' cy='10' r='6'/%3E%3Ccircle cx='42' cy='10' r='6'/%3E%3Ccircle cx='32' cy='21' r='13'/%3E%3Cellipse cx='32' cy='46' rx='16' ry='18'/%3E%3Cellipse cx='13' cy='41' rx='7' ry='10'/%3E%3Cellipse cx='51' cy='41' rx='7' ry='10'/%3E%3Cellipse cx='24' cy='63' rx='8' ry='8'/%3E%3Cellipse cx='40' cy='63' rx='8' ry='8'/%3E%3C/g%3E%3C/svg%3E");
  background-size:150px 150px}
.bears.on-dark::before{opacity:.06;filter:invert(1)}
.bears>*{position:relative;z-index:1}

/* Floating bob motifs */
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-16px) rotate(var(--r,0deg))}}
.floaty{animation:bob 4.2s ease-in-out infinite}
.bear-svg{width:46px;height:52px;color:var(--seal);opacity:.9}
.hero-visual .bear-svg{position:absolute}
.b1{top:6%;left:8%;--r:-10deg;animation-delay:.2s}
.b2{bottom:10%;right:10%;--r:12deg;color:var(--energy);animation-delay:1.1s}
.b3{top:14%;right:2%;--r:6deg;color:var(--digest);width:34px;height:38px;animation-delay:.6s}

/* Marquee */
.marquee{overflow:hidden;background:var(--ink);color:var(--cream);border-top:3px solid var(--seal);border-bottom:3px solid var(--seal)}
.marquee__track{display:flex;width:max-content;gap:0;animation:scrollx 30s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{font-family:"Fraunces",serif;font-size:1.15rem;padding:.85rem 0;display:inline-flex;align-items:center}
.marquee__item span{padding:0 1.6rem;white-space:nowrap}
.marquee__item .dot{color:var(--seal);font-size:1.4rem}
.marquee__item .zh{font-family:"Noto Serif SC",serif}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* Scroll reveals — pop + rise */
.reveal{opacity:0;transform:translateY(28px) scale(.97)}
.reveal.in{opacity:1;transform:none;transition:opacity .65s cubic-bezier(.2,.85,.25,1),transform .65s cubic-bezier(.2,.85,.25,1)}

/* Playful hovers */
.product-media img{transition:transform .55s cubic-bezier(.2,.85,.25,1)}
.product-media:hover img{transform:translateY(-12px) rotate(-2.5deg) scale(1.03)}
.btn{transition:transform .12s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.btn-primary:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.98)}
@keyframes wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}70%{transform:rotate(5deg)}}
.chip-link:hover{animation:wiggle .4s ease-in-out}
.taste-card{transition:transform .2s ease,box-shadow .2s ease}
.taste-card:hover{transform:translateY(-5px) rotate(.6deg);box-shadow:var(--shadow)}
.why{transition:transform .2s ease}
.why:hover{transform:translateY(-4px)}
.packed-item{transition:transform .2s ease}
.packed-item:hover{transform:translateY(-3px)}
.cart-btn:hover svg{transform:scale(1.08)}
.cart-btn svg{transition:transform .15s}

/* Cart count bump */
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.6)}100%{transform:scale(1)}}
.cart-count.bump{animation:bump .4s}

/* Meet-the-family band */
.family{background:var(--paper-2);text-align:center;position:relative;overflow:hidden}
.family-row{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin:2.4rem 0}
.fam{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-decoration:none;color:var(--ink);width:150px}
.fam img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;box-shadow:var(--shadow);transition:transform .4s cubic-bezier(.2,.85,.25,1)}
.fam:hover img{transform:translateY(-10px) rotate(-2deg) scale(1.04)}
.fam b{font-family:"Fraunces",serif;font-size:1.05rem;margin-top:.3rem}
.fam .zh{font-family:"Noto Serif SC",serif;font-weight:700;color:var(--seal-deep);font-size:.9rem}

@media (prefers-reduced-motion:reduce){
  .floaty,.marquee__track,.seal-hero{animation:none!important}
  .reveal{opacity:1;transform:none}
  .product-media:hover img,.fam:hover img{transform:none}
}