:root{
  --bg:#fffdf8; --ink:#1c1a17; --muted:#6f6a61; --brand:#a81f24;
  --brand2:#d9a441; --card:#ffffff; --line:#eadfce; --soft:#f7efe3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;color:var(--ink);background:var(--bg);line-height:1.75}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1120px,92%);margin:auto}
header{position:sticky;top:0;z-index:20;background:rgba(255,253,248,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:18px}
.brand{font-weight:900;font-size:1.24rem;letter-spacing:.05em}.brand span{color:var(--brand)}
nav{display:flex;gap:20px;flex-wrap:wrap;font-size:.95rem}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:999px;background:var(--brand);color:white;font-weight:800;border:1px solid var(--brand)}
.btn.alt{background:white;color:var(--brand)}
.hero{padding:88px 0 70px;background:radial-gradient(circle at 80% 20%,#f3d9b8 0,transparent 34%),linear-gradient(180deg,#fffaf1,#fffdf8)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.kicker{color:var(--brand);font-weight:900;letter-spacing:.13em;text-transform:uppercase}
h1{font-size:clamp(2.35rem,5vw,4.7rem);line-height:1.08;margin:.2em 0 .32em;letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.2;margin:0 0 18px}
h3{margin:0 0 8px;font-size:1.2rem}
.lead{font-size:1.16rem;color:var(--muted);max-width:760px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-card{background:linear-gradient(145deg,#8f191f,#c83b35);border-radius:28px;padding:34px;color:#fff;box-shadow:0 22px 70px rgba(98,43,23,.18)}
.hero-card strong{font-size:3.2rem;display:block;line-height:1}
.hero-card p{opacity:.88}
section{padding:76px 0}
.soft{background:var(--soft)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:25px}
.card .tag{font-size:.8rem;color:var(--brand);font-weight:900}
.card p{color:var(--muted);margin-bottom:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.stat{border:1px solid var(--line);background:white;border-radius:18px;padding:20px}.stat b{font-size:1.7rem;color:var(--brand);display:block}
.product-card{min-height:260px;display:flex;flex-direction:column;justify-content:space-between}
.product-icon{font-size:3rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:800}
.cta{background:#17120f;color:#fff;border-radius:30px;padding:44px}
footer{border-top:1px solid var(--line);padding:36px 0;color:var(--muted);font-size:.93rem}
.breadcrumb{font-size:.9rem;color:var(--muted);padding-top:28px}
.article{max-width:820px}
.article h1{font-size:clamp(2.2rem,4vw,3.8rem)}
.article h2{margin-top:42px}
.notice{border-left:4px solid var(--brand2);background:#fff8e9;padding:16px 18px;border-radius:10px}
ul.clean{padding-left:1.2rem}
@media(max-width:860px){
 .hero-grid,.grid4,.grid3,.stats{grid-template-columns:1fr 1fr}
 nav{display:none}
 .hero{padding-top:58px}
}
@media(max-width:560px){
 .hero-grid,.grid4,.grid3,.stats{grid-template-columns:1fr}
 h1{font-size:2.5rem}
 section{padding:54px 0}
}

.trustbar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}
.trustitem{padding:16px;border-radius:16px;background:#fff;border:1px solid var(--line);font-weight:800}
.water{background:linear-gradient(135deg,#f7efe3,#fff);border:1px solid var(--line);border-radius:30px;padding:38px}
.pill{display:inline-block;padding:6px 11px;border-radius:999px;background:#f7efe3;color:#8f191f;font-size:.82rem;font-weight:900;margin:3px 4px 3px 0}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px}
footer a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:860px){.trustbar,.contact-grid,.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.trustbar,.contact-grid,.footer-grid{grid-template-columns:1fr}}

/* ===== Visual upgrade ===== */
body{background:#fbfaf7}
header{background:#151515;color:#fff;border-bottom:0}
header .brand{font-size:1.45rem;letter-spacing:.11em}
header .brand span{color:#d7a746}
header nav a{color:#f5f3ee}
header nav a:hover{color:#d7a746}
header .btn{background:#c99a3c;border-color:#c99a3c;color:#151515}
.hero{padding:0;background:#f4efe6}
.hero-grid{width:min(100%,1400px);margin:auto;grid-template-columns:1fr 1fr;gap:0}
.hero-copy{padding:86px clamp(28px,6vw,96px);display:flex;flex-direction:column;justify-content:center}
.hero-visual{min-height:650px;background:url('hero-kimchi.jpg') center/cover no-repeat;position:relative}
.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,239,230,.05),rgba(0,0,0,.06))}
.hero h1{font-family:"Noto Serif TC","PMingLiU",serif;font-size:clamp(2.8rem,5.2vw,5.4rem);font-weight:800;letter-spacing:.03em}
.hero h1 em{font-style:normal;color:#b4822a}
.hero .lead{font-size:1.16rem}
.feature-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.feature-chip{border:1px solid #d7c6a7;background:rgba(255,255,255,.65);padding:9px 14px;border-radius:999px;font-weight:800;font-size:.9rem}
.badge-strip{background:#fff;border-top:1px solid #e8dfd1;border-bottom:1px solid #e8dfd1}
.badge-row{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.badge{padding:24px 18px;text-align:center;border-right:1px solid #eadfce}
.badge:last-child{border-right:0}
.badge b{display:block;font-size:1.05rem}
.badge small{color:var(--muted)}
.section-title{text-align:center;max-width:760px;margin:0 auto 34px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product-visual-card{background:#fff;border:1px solid #e7ded0;border-radius:20px;overflow:hidden;transition:.25s transform,.25s box-shadow}
.product-visual-card:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(41,31,19,.09)}
.product-visual-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.product-visual-card .content{padding:20px}
.product-visual-card .meta{font-size:.8rem;color:#a4721c;font-weight:900}
.story-split{display:grid;grid-template-columns:1.05fr .95fr;gap:0;background:#191816;color:#fff;border-radius:28px;overflow:hidden}
.story-image{min-height:430px;background:url('production-story.jpg') center/cover no-repeat}
.story-copy{padding:52px}
.story-copy p{color:#ddd5ca}
.water-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;background:#f1eadf;border-radius:28px;overflow:hidden;border:1px solid #e0d3bf}
.water-image{min-height:400px;background:url('baiguoshan-water-story.jpg') center/cover no-repeat}
.water-copy{padding:48px}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.trust-card{background:#fff;border:1px solid #eadfce;border-radius:18px;padding:25px;text-align:center}
.trust-card .icon{font-size:2rem;margin-bottom:8px}
footer{background:#151515;color:#ddd;border-top:0}
footer strong,footer a{color:#fff}
footer small{color:#aaa}
@media(max-width:900px){
 .hero-grid,.story-split,.water-split{grid-template-columns:1fr}
 .hero-visual{min-height:480px}
 .badge-row{grid-template-columns:repeat(2,1fr)}
 .product-grid,.trust-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
 .hero-copy{padding:52px 22px}
 .hero h1{font-size:2.6rem}
 .hero-visual{min-height:360px}
 .badge-row,.product-grid,.trust-grid{grid-template-columns:1fr}
}

/* Image crop correction */
.product-visual-card img{
  aspect-ratio:3/2;
  object-fit:cover;
  object-position:center center;
}
.hero-visual{
  background-position:center center;
}
.story-image{
  background-position:center center;
}
.water-image{
  background-position:center center;
}

.badge-row{grid-template-columns:repeat(6,1fr)}
@media(max-width:900px){.badge-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.badge-row{grid-template-columns:1fr}}

/* HD image assets */
.hero-visual{background-image:url('hero-kimchi-hd.jpg');background-position:center}
.story-image{background-image:url('production-hd.jpg');background-position:center}
.ro-hd-image{min-height:430px;background:url('ro-water-hd.jpg') center/cover no-repeat}
.source-split{display:grid;grid-template-columns:1.05fr .95fr;background:#f1eadf;border:1px solid #e0d3bf;border-radius:28px;overflow:hidden}
.source-hd-image{min-height:430px;background:url('baiguoshan-hd.jpg') center/cover no-repeat}
@media(max-width:900px){.source-split{grid-template-columns:1fr}.ro-hd-image,.source-hd-image{min-height:360px}}

.source-text-card{
 max-width:1000px;margin:auto;padding:46px 52px;
 background:#f1eadf;border:1px solid #e0d3bf;border-radius:28px;
}
.source-text-card .lead{max-width:850px}

/* ===== CLEAN IMAGE VERSION: no design-mockup background crops ===== */
.clean-hero{max-width:1440px;margin:auto;display:grid;grid-template-columns:1fr 1.15fr;background:#f6f0e7}
.clean-hero-copy{padding:72px clamp(28px,5vw,76px);display:flex;flex-direction:column;justify-content:center}
.clean-hero-copy h1{font-family:"Noto Serif TC","PMingLiU",serif;font-size:clamp(2.6rem,5vw,5rem);line-height:1.12}
.clean-hero-copy h1 em{font-style:normal;color:#34601f}
.clean-hero-photo{background:#eaf1e8;display:flex;align-items:center;justify-content:center;overflow:hidden}
.clean-hero-photo img{width:100%;height:auto;display:block;object-fit:contain}
.clean-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.clean-chips span{background:#fff;border:1px solid #ddd0bc;border-radius:999px;padding:8px 12px;font-size:.86rem;font-weight:800}
.clean-trust{background:#fff;border-top:1px solid #eadfce;border-bottom:1px solid #eadfce}
.clean-trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.clean-trust-grid>div{padding:22px;text-align:center;border-right:1px solid #eadfce}
.clean-trust-grid>div:last-child{border-right:0}
.clean-trust-grid b{display:block;font-size:1.35rem;color:#34601f}
.clean-trust-grid strong{display:block;margin:3px 0}
.clean-trust-grid small{color:#777}
.clean-section-title{text-align:center;margin:0 auto 34px;max-width:760px}
.clean-products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.clean-product-card{background:#fff;border:1px solid #e7dccb;border-radius:18px;overflow:hidden;display:block}
.clean-product-card img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:#f4f0e9}
.clean-card-body{padding:20px}
.clean-tag{font-size:.8rem;color:#a36b12;font-weight:900}
.clean-card-body h3{margin-top:5px}
.clean-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.clean-story{background:#fff;border:1px solid #e7dccb;border-radius:20px;padding:30px}
.clean-safety{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.clean-safety>div{text-align:center;border:1px solid #e7dccb;border-radius:20px;background:#fff;padding:28px}
.clean-safety span{font-size:1.8rem;color:#34601f;font-weight:900}
@media(max-width:900px){
 .clean-hero{grid-template-columns:1fr}
 .clean-trust-grid,.clean-products-grid,.clean-story-grid,.clean-safety{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
 .clean-trust-grid,.clean-products-grid,.clean-story-grid,.clean-safety{grid-template-columns:1fr}
 .clean-hero-copy{padding:48px 22px}
}

.lang-switch{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.82rem}
.lang-switch a{padding:5px 8px;border:1px solid rgba(128,128,128,.28);border-radius:999px;text-decoration:none}
header .lang-switch a{color:inherit}

/* ===== Header language switch alignment fix ===== */
header .nav{
  display:grid !important;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:24px;
}
header nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  flex-wrap:nowrap;
}
header .lang-switch{
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap !important;
  gap:6px;
  white-space:nowrap;
}
header .lang-switch a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
header .btn{
  white-space:nowrap;
}
@media (min-width:901px){
  header .nav{min-height:76px}
}
@media (max-width:1100px) and (min-width:901px){
  header .nav{gap:12px}
  header nav{gap:12px;font-size:.9rem}
  header .lang-switch{gap:4px}
  header .lang-switch a{padding:4px 6px}
}
@media (max-width:900px){
  header .nav{
    display:flex !important;
    flex-wrap:wrap;
  }
  header nav{
    order:3;
    width:100%;
    overflow-x:auto;
    justify-content:flex-start;
  }
  header .lang-switch{
    margin-left:auto;
  }
}

/* ===== REAL MOBILE OFF-CANVAS HAMBURGER MENU ===== */
.mobile-menu-btn,
.mobile-drawer,
.mobile-menu-overlay {
  display:none;
}

@media (max-width: 900px) {
  header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  header .nav {
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap !important;
    min-height:64px;
    gap:12px;
  }

  /* Desktop nav & language buttons are hidden on mobile.
     Their links are cloned into the slide-out drawer with JS. */
  header .nav > nav,
  header .nav > .lang-switch,
  header .nav > .btn {
    display:none !important;
  }

  header .brand {
    min-width:0;
    flex:1 1 auto;
  }

  .mobile-menu-btn {
    display:flex !important;
    width:46px;
    height:46px;
    flex:0 0 46px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#fff;
    cursor:pointer;
    position:relative;
    z-index:1202;
  }

  .mobile-menu-btn .bar {
    display:block;
    width:26px;
    height:2px;
    border-radius:4px;
    background:currentColor;
    transition:transform .28s ease, opacity .2s ease;
  }

  .mobile-menu-btn.is-open .bar:nth-child(1) {
    transform:translateY(7px) rotate(45deg);
  }
  .mobile-menu-btn.is-open .bar:nth-child(2) {
    opacity:0;
  }
  .mobile-menu-btn.is-open .bar:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg);
  }

  .mobile-menu-overlay {
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.48);
    opacity:0;
    visibility:hidden;
    transition:opacity .28s ease, visibility .28s ease;
    z-index:1198;
  }
  .mobile-menu-overlay.is-open {
    opacity:1;
    visibility:visible;
  }

  .mobile-drawer {
    display:flex;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(84vw,360px);
    flex-direction:column;
    background:#151515;
    color:#fff;
    transform:translateX(105%);
    transition:transform .3s ease;
    z-index:1199;
    box-shadow:-18px 0 45px rgba(0,0,0,.24);
    overflow-y:auto;
    padding:82px 24px 30px;
  }

  .mobile-drawer.is-open {
    transform:translateX(0);
  }

  .mobile-drawer .mobile-nav-links {
    display:flex;
    flex-direction:column;
    gap:0;
  }

  .mobile-drawer .mobile-nav-links a {
    color:#fff;
    font-size:1.05rem;
    font-weight:700;
    padding:16px 4px;
    border-bottom:1px solid rgba(255,255,255,.12);
    text-decoration:none;
  }

  .mobile-drawer .mobile-lang-title {
    margin-top:28px;
    margin-bottom:10px;
    color:#aaa;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .mobile-drawer .mobile-lang-links {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .mobile-drawer .mobile-lang-links a {
    color:#fff;
    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;
    padding:8px 11px;
    text-decoration:none;
    font-size:.9rem;
  }

  .mobile-drawer .mobile-cta {
    margin-top:28px;
  }

  .mobile-drawer .mobile-cta a {
    display:block;
    width:100%;
    text-align:center;
    padding:13px 16px;
    border-radius:999px;
    background:#c99a3c;
    color:#151515;
    font-weight:900;
    text-decoration:none;
  }

  body.mobile-menu-open {
    overflow:hidden;
  }
}

/* ===== SEO / B2B conversion pages ===== */
.seo-landing{max-width:900px}
.seo-landing h2{margin-top:42px}
.seo-trust-row{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 10px}
.seo-trust-row span{padding:7px 11px;border-radius:999px;background:#f1eadf;border:1px solid #e1d2bb;font-weight:800;font-size:.84rem}
.seo-cta{margin:46px 0;padding:30px;background:#171613;color:#fff;border-radius:22px}
.seo-cta h2{margin-top:0;color:#fff}.seo-cta p{color:#ddd}
.seo-cta .btn{margin:6px 8px 0 0}
.seo-related{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.seo-related-card{background:#fff;border:1px solid #e5dac8;border-radius:14px;padding:16px;font-weight:800}
.seo-guide-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.seo-guide-card{display:block;background:#fff;border:1px solid #e4d8c6;border-radius:20px;padding:26px}
.seo-guide-card span{font-size:.75rem;color:#a06c17;font-weight:900}.seo-guide-card h2{font-size:1.35rem;margin:8px 0}.seo-guide-card p{color:#716b62}
.seo-topics{background:#fff}
.seo-topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.seo-topic-grid a{border:1px solid #e5dac8;border-radius:16px;padding:18px;background:#fcfaf6}
.seo-topic-grid b{display:block;font-size:1.08rem}.seo-topic-grid span{display:block;color:#777;margin-top:5px;font-size:.9rem}
@media(max-width:900px){.seo-related,.seo-topic-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.seo-related,.seo-topic-grid,.seo-guide-grid{grid-template-columns:1fr}}

/* ===== Global width alignment ===== */
:root{
  --content-max:1180px;
  --reading-max:900px;
}

/* Make all primary site sections share one visual width */
.container{
  width:min(var(--content-max),92%) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Reading pages should not become overly wide */
.article,
.seo-landing{
  width:100%;
  max-width:var(--reading-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Product hero / general split sections align to the same grid width */
.hero-grid,
.clean-hero,
.story-split,
.water-split,
.source-split{
  width:min(var(--content-max),92%) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Prevent nested .container sections from visually expanding */
section > .container,
footer > .container,
header > .container{
  max-width:var(--content-max) !important;
}

/* Product detail image should align with the text column instead of spanning too wide */
.article img,
.seo-landing img{
  max-width:100%;
  height:auto;
}

/* Cards and content grids use the same outside edges */
.grid3,
.grid4,
.product-grid,
.clean-products-grid,
.clean-story-grid,
.clean-safety,
.seo-guide-grid,
.seo-topic-grid,
.seo-related,
.trust-grid,
.stats,
.badge-row{
  width:100%;
}

/* CTA blocks on content pages stay within reading width */
.article .cta,
.seo-landing .cta,
.seo-cta{
  width:100%;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* On product pages, keep the top image and hero content visually aligned */
.breadcrumb{
  width:min(var(--content-max),92%);
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:900px){
  :root{--content-max:100%;--reading-max:100%}
  .container,
  .hero-grid,
  .clean-hero,
  .story-split,
  .water-split,
  .source-split,
  .breadcrumb{
    width:92% !important;
  }
}

.product-photo-section{padding:28px 0 8px}
.product-photo-wrap{
  max-width:var(--reading-max) !important;
}
.product-photo-wrap img{
  width:100%;
  height:auto;
  max-height:none !important;
  object-fit:contain !important;
  border-radius:22px !important;
  display:block;
}

.seo-depth{margin-top:42px;padding-top:8px;border-top:1px solid #e8dfd2}
.seo-depth h2{margin-top:38px}
.seo-depth ol{padding-left:1.4em;line-height:1.9}
.info-table{margin:22px 0;border:1px solid #e4d9c8;border-radius:16px;overflow:hidden}
.info-table>div{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid #e8dfd2}
.info-table>div:last-child{border-bottom:0}
.info-table b,.info-table span{padding:13px 16px}
.info-table>div:first-child{background:#f4ecdf}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.compare-grid>div{padding:18px;border:1px solid #e4d9c8;border-radius:14px;background:#fcfaf7}
.compare-grid p{margin-bottom:0}
@media(max-width:600px){.info-table>div{grid-template-columns:1fr}.info-table>div span:first-child{font-weight:800;padding-bottom:2px}.compare-grid{grid-template-columns:1fr}}

/* ===== Homepage hero image: full bleed / no top-bottom whitespace ===== */
.clean-hero,.hero-grid{align-items:stretch!important}
.clean-hero img,.hero-grid img{
 display:block!important;width:100%!important;height:100%!important;
 object-fit:cover!important;object-position:center center!important;
 margin:0!important;padding:0!important
}
@media(min-width:901px){
 .clean-hero,.hero-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .clean-hero>*:has(img),.hero-grid>*:has(img){
   position:relative!important;align-self:stretch!important;overflow:hidden!important;
   padding:0!important;margin:0!important;min-height:100%!important
 }
 .clean-hero>*:has(img) img,.hero-grid>*:has(img) img{position:absolute!important;inset:0!important}
}
@media(max-width:900px){
 .clean-hero>*:has(img),.hero-grid>*:has(img){aspect-ratio:4/3!important;overflow:hidden!important;padding:0!important}
 .clean-hero>*:has(img) img,.hero-grid>*:has(img) img{width:100%!important;height:100%!important;object-fit:cover!important}
}



/* ===== BANDAU FIXED CONTACT — isolated component ===== */
#bandau-floating-contact{
  position:fixed !important;
  right:18px !important;
  bottom:20px !important;
  z-index:2147483000 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:10px !important;
  width:auto !important;
  height:auto !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:none !important;
}
#bandau-floating-contact .bandau-float-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  min-width:56px !important;
  min-height:52px !important;
  padding:0 16px !important;
  border-radius:999px !important;
  text-decoration:none !important;
  font-family:system-ui,-apple-system,"Noto Sans TC","Microsoft JhengHei",sans-serif !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:0 8px 28px rgba(0,0,0,.20) !important;
  border:1px solid rgba(255,255,255,.55) !important;
  box-sizing:border-box !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  transform:none;
}
#bandau-floating-contact .bandau-phone{
  background:#ffffff !important;
  color:#151515 !important;
}
#bandau-floating-contact .bandau-line{
  background:#06C755 !important;
  color:#ffffff !important;
}
#bandau-floating-contact .bandau-phone-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  height:28px !important;
  font-size:22px !important;
  color:#151515 !important;
}
#bandau-floating-contact .bandau-line-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:32px !important;
  height:32px !important;
  flex:0 0 32px !important;
  border-radius:50% !important;
  background:#ffffff !important;
  color:#06C755 !important;
  font-size:8px !important;
  font-weight:900 !important;
}
#bandau-floating-contact .bandau-float-text{
  display:inline !important;
  white-space:nowrap !important;
}
#bandau-floating-contact .bandau-float-btn:hover{
  transform:translateY(-2px) !important;
}
@media(max-width:640px){
  #bandau-floating-contact{
    right:12px !important;
    bottom:14px !important;
    gap:8px !important;
  }
  #bandau-floating-contact .bandau-float-btn{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
    padding:0 !important;
    border-radius:50% !important;
  }
  #bandau-floating-contact .bandau-float-text{
    display:none !important;
  }
}

/* Legacy floating buttons disabled; current #bandau-contact-fixed uses inline styles */
.floating-contact,#bandau-floating-contact{display:none!important}

/* Remove legacy standalone phone widgets. Keep #bandau-contact-fixed only. */
.phone-fab,.call-fab,.floating-call,.floating-phone,.phone-button,.call-button,
.fixed-phone,.sticky-phone,.phone-icon-large,.call-icon-large{
  display:none!important;
}

/* BANDAU FLOATING MOBILE POLISH */
@media(max-width:640px){
  #bandau-contact-fixed>a{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    min-height:50px!important;
    padding:0!important;
    border-radius:50%!important;
    border-width:1px!important;
    box-shadow:0 4px 14px rgba(0,0,0,.20)!important;
  }
  #bandau-contact-fixed .bandau-line-icon{
    width:26px!important;
    height:26px!important;
    flex:0 0 26px!important;
    font-size:7px!important;
  }
}

.floating-contact,#bandau-floating-contact,#bandau-contact-fixed{display:none!important}

/* ===== PACKAGING + LOGISTICS BLOCKS ===== */
.pack-spec{
  display:block;
  margin-top:7px;
  font-size:.82rem;
  font-weight:800;
  color:#4f4a43;
}
.product-pack-spec{
  display:inline-flex;
  margin:12px 0 8px;
  padding:8px 12px;
  border-radius:999px;
  background:#f3ecdf;
  border:1px solid #e4d6c2;
  color:#5d4a2d;
  font-size:.92rem;
}
.logistics-payment{
  background:#f7f2e9;
}
.logistics-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.logistics-card{
  background:#fff;
  border:1px solid #e5dac8;
  border-radius:18px;
  padding:22px;
}
.logistics-card b{
  display:block;
  margin-bottom:8px;
  font-size:1.02rem;
}
.logistics-card span{
  color:#5f5a52;
}
.logistics-note{
  margin:18px 0 0;
  text-align:center;
  color:#777067;
  font-size:.9rem;
}
@media(max-width:760px){
  .logistics-grid{grid-template-columns:1fr}
}

/* ===== HTML PRODUCT VISUAL V4 — controlled package/plate proportion ===== */
.product-visual{
  position:relative;
  width:100%;
  height:245px;
  overflow:hidden;
  background:
    radial-gradient(circle at 22% 82%, rgba(255,255,255,.98), rgba(255,255,255,0) 32%),
    linear-gradient(180deg,#f4eee5 0%,#ede3d6 100%);
  border-bottom:1px solid #e8ddcd;
}

/* 3kg pouch: intentionally tall and rectangular, no printed label */
.product-visual .pouch-shell{
  position:absolute;
  right:8%;
  top:5%;
  width:38%;
  height:83%;
  border-radius:5px 5px 10px 10px;
  overflow:hidden;
  background:rgba(255,255,255,.23);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 10px 22px rgba(77,58,35,.13);
  transform:perspective(700px) rotateY(-1.5deg);
}
/* subtle clear vacuum-plastic look */
.product-visual .pouch-shell::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.38),transparent 12%,transparent 84%,rgba(255,255,255,.28)),
    linear-gradient(180deg,rgba(255,255,255,.45),transparent 12%);
  border-top:7px double rgba(255,255,255,.55);
}
.product-visual .pouch-food{
  position:absolute;
  inset:5% 4% 3%;
  background-size:260% auto;
  background-position:center 44%;
  filter:saturate(1.04);
  border-radius:2px 2px 7px 7px;
}

/* Plate is purposely smaller than the pouch */
.product-visual .plate-shell{
  position:absolute;
  left:3%;
  bottom:2%;
  width:56%;
  height:58%;
  overflow:hidden;
  border-radius:50%;
  filter:drop-shadow(0 8px 8px rgba(74,54,34,.15));
}
.product-visual .plate-shell img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 47%!important;
  border-radius:50%!important;
  transform:scale(1.02);
}

/* Korean sauce uses 500g pouch, still rectangular but slightly shorter */
.product-visual-korean-sauce .pouch-shell{
  width:35%;
  height:72%;
  top:11%;
}
.product-visual-korean-sauce .plate-shell{
  width:52%;
  height:52%;
}

/* Yuzu: crop toward the white radish area; kelp/golden/taiwanese tuned separately */
.product-visual-yuzu-radish .pouch-food{background-position:center 58%;background-size:290% auto}
.product-visual-golden-kelp .pouch-food{background-position:center 52%;background-size:280% auto}
.product-visual-taiwanese-kimchi .pouch-food{background-position:center 48%;background-size:270% auto}
.product-visual-golden-kimchi .pouch-food{background-position:center 45%;background-size:260% auto}
.product-visual-korean-kimchi .pouch-food{background-position:center 48%;background-size:255% auto}

.pack-spec{
  display:block;
  margin-top:6px;
  font-size:.82rem;
  color:#7b5d2d;
  font-weight:800;
}
.product-detail-visual{
  max-width:760px;
  margin:18px 0 24px;
}
.product-detail-visual .product-visual{
  height:360px;
  border:1px solid #e8ddcd;
  border-radius:20px;
}
.product-detail-pack{
  margin-top:10px;
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:#f3ecdf;
  border:1px solid #e3d3bb;
  font-weight:800;
  color:#624d2e;
}

@media(max-width:700px){
  .product-visual{height:205px}
  .product-visual .pouch-shell{
    right:5%;
    width:40%;
    height:82%;
  }
  .product-visual .plate-shell{
    left:1%;
    width:58%;
    height:57%;
  }
  .product-detail-visual .product-visual{height:260px}
}

/* ===== FINAL REAL PRODUCT PHOTOS ===== */
.final-product-photo{
  width:100%;
  height:245px;
  overflow:hidden;
  background:#f4eee5;
  border-bottom:1px solid #e8ddcd;
}
.final-product-photo img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
}
.final-detail-photo{
  width:100%!important;
  height:auto!important;
  display:block!important;
  border-radius:20px!important;
  border:1px solid #e8ddcd;
}
@media(max-width:700px){
  .final-product-photo{height:205px}
}

/* ===== GLOBAL CONTENT IMAGE RATIO: LANDSCAPE 4:3 =====
   Applies to content/product/hero imagery only.
   Logos, icons, floating buttons and UI graphics are excluded.
*/
:root{
  --bandau-image-ratio: 4 / 3;
}

/* Product listing photos */
.clean-product-card > img,
.clean-product-card .final-product-photo,
.product-card > img,
.product-card .product-photo,
.product-photo-wrap,
.product-detail-visual,
.article > img:not(.logo):not(.icon),
.seo-landing > img:not(.logo):not(.icon),
.clean-hero-photo,
.hero-image,
.hero-media,
.story-image,
.source-image,
.water-image {
  aspect-ratio: var(--bandau-image-ratio) !important;
  width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
}

/* Actual images fill the 4:3 frame */
.clean-product-card > img,
.clean-product-card .final-product-photo > img,
.product-card > img,
.product-card .product-photo > img,
.product-photo-wrap > img,
.product-detail-visual > img,
.article > img:not(.logo):not(.icon),
.seo-landing > img:not(.logo):not(.icon),
.clean-hero-photo > img,
.hero-image > img,
.hero-media > img,
.story-image > img,
.source-image > img,
.water-image > img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: var(--bandau-image-ratio) !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Homepage product photo containers */
.final-product-photo{
  aspect-ratio:4 / 3 !important;
  height:auto !important;
}

/* Product detail main photo */
.final-detail-photo{
  aspect-ratio:4 / 3 !important;
  width:100% !important;
  height:auto !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* Keep UI graphics untouched */
.brand img,
.logo,
.logo img,
header img,
footer img.icon,
.icon img,
.floating-contact img,
#bandau-contact-final img,
#bandau-contact-fixed img,
svg {
  aspect-ratio:auto !important;
  object-fit:contain !important;
}

/* Mobile keeps the same 4:3 ratio */
@media(max-width:700px){
  .clean-product-card > img,
  .clean-product-card .final-product-photo,
  .product-card > img,
  .product-photo-wrap,
  .product-detail-visual,
  .clean-hero-photo,
  .hero-image,
  .hero-media {
    aspect-ratio:4 / 3 !important;
    height:auto !important;
  }
}