/* ============================================
   豪野農場 — Design Tokens
   ============================================ */
:root{
  /* Brand colors — picked from reference photos */
  --pink-50:  #fff5f3;
  --pink-100: #ffe8e3;
  --pink-200: #fecbc1;
  --pink-300: #fba59a;
  --pink-400: #f87171;
  --rose-500: #e94e6a;
  --rose-600: #d63a59;
  --rose-700: #b8254a;
  --berry:    #a51c3f;

  --peach-50:  #fff7f0;
  --peach-200: #ffd2b8;
  --peach-300: #ffb38a;
  --peach-400: #ff8d5c;

  --green-100:#e7f3d8;
  --green-300:#9ec76a;
  --green-500:#5fa040;
  --green-700:#356a26;

  --brown-300:#d6a674;
  --brown-500:#a06a3b;
  --brown-700:#6b3d1c;

  --cream:    #fdf8f0;
  --paper:    #fffafc;
  --ink:      #2a1a1f;
  --ink-soft: #6b4f56;
  --line:     #f3d9d4;

  /* Typography */
  --font-sans:  "Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --font-serif: "Noto Serif TC","Songti TC",serif;
  --font-round: "Zen Maru Gothic","Noto Sans TC",sans-serif;

  /* UI */
  --radius-sm: 12px;
  --radius:    20px;
  --radius-lg: 32px;
  --shadow-1:  0 8px 24px rgba(214,58,89,.08);
  --shadow-2:  0 18px 50px rgba(214,58,89,.15);
  --shadow-3:  0 28px 80px rgba(184,37,74,.18);

  --max-w: 1180px;
  --pad-x: clamp(20px, 4vw, 56px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, #ffe8eb 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 30%, #fff0e6 0%, transparent 60%),
    var(--paper);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
.container{ max-width:var(--max-w); margin:0 auto; padding:0 var(--pad-x); }

/* ============================================
   Buttons
   ============================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-weight:700; font-size:16px;
  letter-spacing:.04em;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  border:none;
}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--rose-500),var(--berry));
  box-shadow:0 12px 28px rgba(214,58,89,.35);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 36px rgba(214,58,89,.45); }
.btn-ghost{
  background:#fff;
  color:var(--rose-600);
  border:2px solid var(--pink-200);
}
.btn-ghost:hover{ background:var(--pink-50); border-color:var(--rose-500); }
.btn-line{
  background:linear-gradient(135deg,#06c755,#04a043);
  color:#fff;
  box-shadow:0 12px 28px rgba(6,199,85,.35);
}
.btn-line:hover{ transform:translateY(-2px); }
.btn.block{ display:flex; width:100%; }

/* ============================================
   Navbar (e-commerce style — 對齊 rich8888-2.easy.co)
   ============================================ */
.navbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max-w);
  margin:0 auto; padding:14px var(--pad-x);
  display:grid;
  grid-template-columns:auto 1fr auto;   /* 左選單依內容撐開(不換行)、品牌置中於剩餘空間、右側圖示 */
  align-items:center;
  gap:12px;
}
.nav-left{
  display:flex; align-items:center; flex-wrap:nowrap; gap:10px 14px;
  justify-content:flex-start;
}
.nav-left a{
  color:var(--green-500); font-weight:600; font-size:14px;
  white-space:nowrap;
}
.nav-left a:hover, .nav-left a.active{ color:var(--green-700); }
.nav-drop{ position:relative; }
.nav-drop > a{ display:inline-flex; align-items:center; gap:4px; }
.caret{ font-size:10px; }
.drop-panel{
  position:absolute; top:100%; left:-12px;
  margin-top:2px;                 /* 緊貼父連結，避免 hover 經過空隙就消失而點不到 */
  background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:8px;
  min-width:180px; display:none;
  box-shadow:var(--shadow-2);
  z-index:60;
}
/* 透明橋接：補上連結與面板間的間距，讓滑鼠移過去 hover 不中斷（不影響排版對齊）*/
.nav-drop::after{ content:''; position:absolute; top:100%; left:0; right:0; height:12px; }
.drop-panel a{
  display:block; padding:10px 14px; border-radius:8px;
  color:var(--ink); font-size:14.5px;
}
.drop-panel a:hover{ background:var(--green-100); color:var(--green-700); }
.nav-drop:hover .drop-panel,
.nav-drop.open .drop-panel{ display:block; }   /* hover(桌機) 或 點擊開啟(.open，手機/觸控) 都顯示 */

.brand{
  display:flex; justify-content:center; align-items:center;
  text-decoration:none;
}
/* 上傳的品牌 Logo（自動取代蔬果卡通版） */
.brand-logo-img{
  max-height:110px; width:auto; max-width:340px;
  display:block; object-fit:contain;
  /* 實際高度由 admin 設定的 brand.logoHeight 用 inline style 覆寫 */
}
.navbar:has(.brand-logo-img){ /* navbar 內含 logo 圖時自動撐開高度 */
  padding-top:6px; padding-bottom:6px;
}
@media (max-width:560px){
  .brand-logo-img{ max-height:64px !important; max-width:200px !important; }
}
.logo-circle.mini{
  width:auto; height:80px; aspect-ratio:auto;
  border:none; border-radius:0;
  padding:0; box-shadow:none;
  background:transparent;
  display:flex; flex-direction:column; align-items:center;
  gap:0;
}
.logo-circle.mini .logo-fruits{
  font-size:24px; gap:2px;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.08));
}
.logo-circle.mini .fruit{ animation:none; }
.logo-circle.mini .logo-name{
  font-size:24px; margin-top:0;
  letter-spacing:.05em;
}
.logo-circle.mini .logo-bridge{
  display:flex; gap:2px; margin-top:2px;
}
.logo-circle.mini .logo-bridge span{
  display:block; width:18px; height:14px;
  background:linear-gradient(180deg,var(--brown-300),var(--brown-700));
  border-radius:14px 14px 0 0;
}

.nav-right{
  display:flex; justify-content:flex-end; align-items:center; gap:14px;
}
.nav-icon{
  position:relative;
  width:38px; height:38px; border-radius:50%;
  background:transparent; border:none; cursor:pointer;
  color:var(--ink); display:grid; place-items:center;
  transition:background .2s, color .2s;
}
.nav-icon:hover{ background:var(--pink-50); color:var(--rose-600); }
.cart-link.active{ color:var(--rose-600); }
.cart-badge{
  position:absolute; top:-2px; right:-2px;
  min-width:20px; height:20px; padding:0 5px;
  background:#000; color:#fff; border-radius:999px;
  font-size:11px; font-weight:700;
  display:none; place-items:center;
  border:2px solid #fff;
}

.nav-burger{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-burger span{ display:block; width:26px; height:2px; background:var(--green-700); margin:5px 0; }

/* 搜尋功能尚未提供 → 隱藏導覽列放大鏡按鈕，避免顧客點了沒反應 */
button.nav-icon[aria-label="搜尋"]{ display:none; }

/* 超商取貨選門市 */
.cvs-block{ margin-top:12px; }
.cvs-block .btn-ghost{ width:100%; }
.cvs-selected{
  display:flex; flex-direction:column; gap:2px;
  border:1px solid var(--green-700, #2f7d4f); border-radius:10px;
  padding:12px 14px; background:#f3faf5;
}
.cvs-selected strong{ color:var(--green-700, #2f7d4f); }
.cvs-selected span{ font-size:13px; color:#555; }
.cvs-selected .cvs-change{
  align-self:flex-start; margin-top:6px; background:none; border:none;
  color:#2f7d4f; text-decoration:underline; cursor:pointer; padding:0; font-size:13px;
}

/* ============================================
   Banner (古早味手工醃脆桃)
   ============================================ */
.banner{
  width:100%; padding:0;
  background:#fff;
}
.banner-img{
  width:100%; aspect-ratio:5/1;
  background:
    linear-gradient(120deg,#1e7fb3 0%, #2a92c8 30%, #b96e3e 60%, #cc794a 100%);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.banner-img::before{
  content:""; position:absolute; left:5%; top:50%; transform:translateY(-50%);
  width:24%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #ffd9c2, #d99a76 60%, #8a4a2c);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  filter:blur(.3px);
}
.banner-img::after{
  content:""; position:absolute; right:5%; top:50%; transform:translateY(-50%);
  width:18%; aspect-ratio:1/1;
  background:linear-gradient(180deg,#1a8fd6,#1366a8);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.banner-strap{
  position:relative; z-index:2;
  background:#ffd530;
  border:3px solid #f0a020;
  border-radius:18px;
  padding:18px 60px;
  font-family:var(--font-serif);
  font-weight:900;
  font-size:clamp(22px, 3.6vw, 44px);
  color:#3a2510;
  letter-spacing:.04em;
  box-shadow:0 14px 30px rgba(0,0,0,.25);
  transform:rotate(-2deg);
}

/* ============================================
   Products Grid (當季最好吃的水果)
   ============================================ */
.products{ padding:80px 0; background:#fff; }
.products-title{
  text-align:center; font-weight:900;
  font-size:clamp(26px,3.2vw,36px); color:var(--ink);
  margin:0 0 50px;
}
.product-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
}
.product-card{
  position:relative; display:block;
  text-decoration:none; color:inherit;
  transition:transform .3s ease;
}
.product-card:hover{ transform:translateY(-4px); }
.pc-img{
  aspect-ratio:1/1;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:#f4f4f4;
  position:relative;
  margin-bottom:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.pc-tag, .pc-tag-pink{
  position:absolute; top:14px; left:14px;
  background:#fff; padding:6px 12px;
  border-radius:6px;
  font-family:var(--font-serif);
  font-weight:900; font-size:18px;
  color:var(--berry); writing-mode:vertical-rl;
  letter-spacing:.1em;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.pc-overlay{
  position:absolute; bottom:14px; left:14px; right:14px;
  background:rgba(0,0,0,.45); color:#fff;
  font-weight:900; font-size:18px; line-height:1.4;
  padding:10px 14px; border-radius:8px;
  text-align:center;
  font-family:var(--font-serif);
}
.pc-overlay span{ color:#ffd530; font-size:22px; }
.pc-overlay.yellow{
  background:#ffd530; color:#3a2510;
  border:3px solid #f0a020;
}
.pc-badge{
  position:absolute; top:0; right:14px; z-index:2;
  background:#000; color:#fff;
  padding:6px 14px;
  font-size:14px; font-weight:700;
  letter-spacing:.1em;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}

/* PC images */
.pc-peach{
  background:
    radial-gradient(circle at 30% 35%, #ffb0a3, transparent 30%),
    radial-gradient(circle at 60% 30%, #ff9088, transparent 28%),
    radial-gradient(circle at 50% 65%, #ff8a80, transparent 35%),
    linear-gradient(160deg,#fff5e6,#e6c39a 70%,#a87842);
}
.pc-plum{
  background:
    radial-gradient(circle at 30% 35%, #d8e07a, transparent 30%),
    radial-gradient(circle at 65% 35%, #b8c662, transparent 28%),
    radial-gradient(circle at 45% 70%, #a4b450, transparent 32%),
    linear-gradient(160deg,#e8f0c8,#7fa044 70%,#3f5a1c);
}
.pc-loquat{
  background:
    radial-gradient(circle at 35% 35%, #ffd366, transparent 25%),
    radial-gradient(circle at 65% 35%, #ffba3d, transparent 25%),
    radial-gradient(circle at 50% 70%, #6b3a1c, transparent 35%),
    linear-gradient(160deg,#fff0c2,#d68a3c 70%,#5a3014);
}
.pc-pickle{
  background:
    radial-gradient(circle at 30% 40%, #ffcab2, transparent 30%),
    radial-gradient(circle at 65% 35%, #ffaa88, transparent 28%),
    radial-gradient(circle at 50% 70%, #f0905c, transparent 35%),
    linear-gradient(160deg,#ffe6cc,#cc7846 70%,#6b3814);
}
.product-card h3{
  margin:0 0 10px; font-size:16px; font-weight:600;
  line-height:1.5; color:var(--ink);
  min-height:48px;
}
.pc-price{
  margin:0; font-size:15px; color:var(--ink);
}
.pc-price strong{ font-weight:700; }
.pc-price s{
  display:block; color:#999; font-weight:400; margin-top:4px; font-size:14px;
}

/* ============================================
   Hero
   ============================================ */
.hero{
  position:relative; overflow:hidden;
  padding:80px var(--pad-x) 100px;
}
.hero-grid{
  max-width:var(--max-w); margin:0 auto;
  display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center;
}
.hero-decor{ position:absolute; pointer-events:none; }
.decor-leaf-1{
  width:160px; height:160px; left:-40px; top:60px;
  background:radial-gradient(circle at 30% 30%, var(--green-300), transparent 60%);
  filter:blur(6px); opacity:.45;
}
.decor-leaf-2{
  width:240px; height:240px; right:-50px; bottom:-60px;
  background:radial-gradient(circle at 50% 50%, var(--pink-200), transparent 60%);
  filter:blur(10px); opacity:.6;
}
.decor-blob{
  width:520px; height:520px; right:-120px; top:-120px;
  background:radial-gradient(circle, rgba(255,210,184,.5), transparent 60%);
  border-radius:50%;
}

.eyebrow{
  display:inline-block; font-family:var(--font-serif);
  color:var(--rose-600); font-weight:700; letter-spacing:.4em;
  font-size:14px; margin-bottom:20px;
}
.hero-title{
  font-family:var(--font-serif); font-weight:900;
  font-size:clamp(48px, 7vw, 86px);
  line-height:1.05; margin:0 0 20px;
  color:var(--berry);
  text-shadow:0 4px 0 #fff, 0 8px 20px rgba(165,28,63,.12);
}
.title-main{ display:block; }
.title-line{
  display:block; width:180px; height:10px; margin-top:14px;
  background:linear-gradient(90deg,var(--rose-500),transparent);
  border-radius:6px;
}
.hero-sub{
  font-size:clamp(18px,2vw,22px);
  color:var(--ink-soft); font-weight:500;
  margin:0 0 28px;
}
.hero-tags{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 36px; }
.hero-tags li{
  background:#fff; color:var(--rose-700);
  border:1.5px solid var(--pink-200);
  padding:8px 16px; border-radius:999px;
  font-weight:600; font-size:14px;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-trust{ margin-top:28px; color:var(--ink-soft); font-size:14px; }
.hero-trust strong{ color:var(--rose-600); }

/* Hero visual — CSS-painted peaches */
.hero-visual{ position:relative; min-height:480px; }
.peach-stack{
  position:relative; width:100%; aspect-ratio:1/1;
  background:radial-gradient(circle at 50% 60%, #ffe7d8 0%, #fff5f3 60%, transparent 80%);
  border-radius:50%;
  display:grid; place-items:center;
}
.peach{
  position:absolute; border-radius:50%;
  background:
    radial-gradient(circle at 30% 28%, #fff 0%, transparent 25%),
    radial-gradient(circle at 70% 30%, #ffd5cc 0%, transparent 50%),
    linear-gradient(160deg, #ff9aa9 0%, #ff6f87 50%, #f04663 100%);
  box-shadow:
    inset -10px -16px 28px rgba(165,28,63,.35),
    inset 10px 12px 22px rgba(255,255,255,.5),
    0 22px 36px rgba(165,28,63,.25);
}
.peach::after{
  content:""; position:absolute; left:48%; top:0; bottom:0; width:3px;
  background:linear-gradient(to bottom, rgba(255,255,255,.55), transparent 60%);
  filter:blur(.5px);
}
.peach-a{ width:50%; height:50%; left:24%; top:18%; z-index:3; }
.peach-b{ width:38%; height:38%; left:5%;  top:42%; z-index:2; }
.peach-c{ width:42%; height:42%; right:0%; top:38%; z-index:2; }
.peach-d{ width:34%; height:34%; left:22%; bottom:4%; z-index:1; }
.peach-e{ width:30%; height:30%; right:14%; bottom:10%; z-index:1; }
.peach-leaf{
  position:absolute; width:80px; height:48px;
  background:linear-gradient(135deg,var(--green-500),var(--green-700));
  border-radius:0 100% 0 100%;
  transform-origin:bottom right;
}
.leaf-1{ left:34%; top:8%; transform:rotate(-30deg); z-index:4; }
.leaf-2{ left:60%; top:14%; transform:rotate(20deg); width:60px; height:36px; z-index:4; }
.leaf-3{ left:6%; top:36%; transform:rotate(-50deg); width:54px; height:32px; z-index:4; }
.peach-shine{
  position:absolute; left:34%; top:24%; width:34px; height:18px;
  background:rgba(255,255,255,.7); border-radius:50%;
  filter:blur(2px); z-index:5;
}
.hero-badge{
  position:absolute; right:-8px; top:14px;
  width:108px; height:108px; border-radius:50%;
  background:linear-gradient(135deg,var(--rose-500),var(--berry));
  color:#fff; display:grid; place-items:center; text-align:center;
  font-weight:700;
  box-shadow:0 14px 28px rgba(165,28,63,.35);
  transform:rotate(-12deg);
  animation:bobble 3.6s ease-in-out infinite;
}
.hero-badge span{ display:block; font-size:12px; letter-spacing:.18em; }
.hero-badge strong{ font-size:22px; }
@keyframes bobble{
  0%,100%{ transform:rotate(-12deg) translateY(0); }
  50%{ transform:rotate(-12deg) translateY(-8px); }
}

.scroll-cue{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  width:28px; height:46px; border:2px solid var(--rose-500); border-radius:14px;
}
.scroll-cue span{
  display:block; width:4px; height:8px; background:var(--rose-500);
  border-radius:2px; margin:8px auto;
  animation:scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes scroll-bounce{
  0%{ transform:translateY(0); opacity:1; }
  100%{ transform:translateY(18px); opacity:0; }
}

/* ============================================
   Problems
   ============================================ */
.problems{
  background:linear-gradient(180deg,#fff 0%, var(--pink-50) 100%);
  padding:90px 0;
  position:relative;
}
.section-title{
  font-family:var(--font-serif);
  font-size:clamp(34px,5vw,56px); font-weight:900;
  line-height:1.15; margin:0 0 50px;
}
.big-red{ display:block; color:var(--berry); }
.problem-list{
  max-width:760px; margin:0 auto 40px;
  display:grid; gap:18px;
}
.problem-list li{
  display:flex; align-items:center; gap:18px;
  background:#fff;
  border-radius:999px;
  padding:18px 28px;
  box-shadow:var(--shadow-1);
  border:1px solid var(--line);
}
.x-mark{
  flex:none;
  width:42px; height:42px; border-radius:50%;
  background:var(--rose-500); color:#fff;
  display:grid; place-items:center;
  font-weight:900; font-size:20px;
}
.problem-list h3{
  margin:0; font-size:20px; font-weight:800; color:var(--ink);
}
.problem-list p{ margin:2px 0 0; color:var(--ink-soft); font-size:15px; }
.problem-cta{
  text-align:center; font-family:var(--font-serif);
  font-size:clamp(22px,3vw,30px); font-weight:800; line-height:1.6;
  color:var(--ink); margin-top:50px;
}
.underline-red{
  color:var(--berry);
  background:linear-gradient(transparent 65%, var(--pink-200) 65%);
  padding:0 4px;
}

/* ============================================
   Product Info
   ============================================ */
.info{
  padding:90px 0; background:var(--paper);
}
.info-grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:60px; align-items:center;
}
.info-photo{ position:relative; }
.photo-frame{
  aspect-ratio:4/5; border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at 30% 30%, #ffe8e3, transparent 60%),
    radial-gradient(circle at 70% 70%, #ffd2b8, transparent 60%),
    linear-gradient(160deg,#fff5f3,#ffd2b8);
  box-shadow:var(--shadow-2);
  overflow:hidden; position:relative;
}
.photo-peach-1{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 35% 60%, rgba(255,150,170,.85) 0%, rgba(255,150,170,0) 28%),
    radial-gradient(circle at 70% 40%, rgba(255,120,140,.85) 0%, rgba(255,120,140,0) 24%),
    radial-gradient(circle at 55% 75%, rgba(245,90,120,.7) 0%, rgba(245,90,120,0) 22%),
    radial-gradient(circle at 25% 30%, rgba(255,200,180,.6) 0%, rgba(255,200,180,0) 30%);
}
.ribbon{
  position:absolute; left:-16px; top:30px;
  background:linear-gradient(135deg,var(--rose-500),var(--berry));
  color:#fff; padding:10px 22px;
  border-radius:8px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(214,58,89,.3);
}
.ribbon::before{
  content:""; position:absolute; left:0; bottom:-8px;
  border:8px solid transparent;
  border-top-color:var(--berry);
  border-right-color:var(--berry);
}

.info-card{
  background:#fff;
  border:2px dashed var(--pink-300);
  border-radius:var(--radius-lg);
  padding:40px 44px;
  box-shadow:var(--shadow-1);
}
.info-title{
  font-family:var(--font-serif);
  color:var(--berry);
  font-size:32px; font-weight:900; letter-spacing:.06em;
  margin:0 0 24px;
}
.info-list{ display:grid; gap:16px; }
.info-list li{
  display:flex; align-items:flex-start; gap:16px;
  padding:14px 18px; border-radius:var(--radius);
  background:var(--pink-50);
  border-left:5px solid var(--rose-500);
}
.info-icon{
  width:42px; height:42px; flex:none;
  background:#fff; border-radius:50%;
  display:grid; place-items:center;
  font-size:20px;
  box-shadow:0 4px 10px rgba(214,58,89,.15);
}
.info-list strong{ color:var(--berry); margin-right:6px; }

/* ============================================
   Shipping
   ============================================ */
.shipping{
  background:linear-gradient(180deg, var(--pink-50), #fff);
  padding:90px 0;
}
.shipping-banner{
  background:linear-gradient(135deg,var(--berry),var(--rose-500));
  color:#fff;
  padding:22px 32px;
  border-radius:999px;
  display:inline-flex; align-items:center; gap:14px;
  margin-bottom:40px;
  box-shadow:var(--shadow-2);
}
.shipping-banner h2{
  margin:0; font-family:var(--font-serif);
  font-size:clamp(20px,2.4vw,28px);
}
.truck{ font-size:28px; }
.shipping-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.ship-card{
  background:#fff;
  border:2px solid var(--green-300);
  border-radius:var(--radius);
  padding:30px 24px;
  position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
}
.ship-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); }
.ship-num{
  position:absolute; top:-18px; left:24px;
  background:var(--green-500); color:#fff;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-weight:900;
  box-shadow:0 6px 14px rgba(95,160,64,.4);
}
.ship-card h3{
  margin:18px 0 10px; font-size:20px; line-height:1.4;
  color:var(--green-700);
}
.ship-card p{ margin:0; color:var(--ink-soft); font-size:14.5px; }

/* ============================================
   Reviews
   ============================================ */
.reviews{
  background:
    radial-gradient(800px 400px at 90% 0%, var(--pink-100), transparent 70%),
    var(--paper);
  padding:90px 0;
}
.review-eyebrow{
  display:inline-block; background:#fff;
  border:2px solid var(--rose-500); color:var(--rose-600);
  padding:6px 18px; border-radius:999px;
  font-weight:700; font-size:14px;
  margin-bottom:18px;
}
.section-title-2{
  font-family:var(--font-serif);
  font-size:clamp(30px,4vw,46px); font-weight:900;
  line-height:1.25; margin:0 0 50px;
}
.section-title-2.center{ text-align:center; }
.review-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-bottom:40px;
}
.review-card{
  background:#fff;
  border-radius:var(--radius);
  padding:34px 30px 26px;
  box-shadow:var(--shadow-1);
  position:relative;
  border-top:5px solid var(--pink-300);
}
.review-card.featured{
  background:linear-gradient(160deg,#fff,#fff5f3);
  border-top-color:var(--rose-500);
  transform:translateY(-12px);
  box-shadow:var(--shadow-2);
}
.review-mark{
  position:absolute; top:-20px; left:22px;
  width:48px; height:48px; border-radius:50%;
  background:var(--rose-500); color:#fff;
  display:grid; place-items:center;
  font-family:var(--font-serif); font-size:36px; font-weight:900;
  line-height:0;
}
.review-card p{
  margin:0 0 22px; font-size:16px; color:var(--ink);
  line-height:1.85;
}
.review-card mark{
  background:linear-gradient(transparent 60%, var(--pink-200) 60%);
  color:var(--berry); padding:0 2px; font-weight:700;
}
.review-card footer{
  display:flex; justify-content:space-between;
  font-size:13px; color:var(--ink-soft);
  border-top:1px dashed var(--line);
  padding-top:14px;
}
.review-bullets{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  margin:0 0 18px;
}
.review-bullets li{
  background:#fff; border:1.5px solid var(--green-300);
  padding:8px 18px; border-radius:999px;
  font-weight:600; color:var(--green-700);
}
.review-foot{
  text-align:center; font-family:var(--font-serif);
  font-size:18px; color:var(--berry); font-weight:700;
}

/* ============================================
   Order
   ============================================ */
.order{
  padding:90px 0;
  background:linear-gradient(180deg,#fff,var(--pink-50));
}
.order-sub{
  text-align:center; color:var(--ink-soft); margin:-30px 0 50px;
}
.price-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  align-items:stretch;
}
.price-card{
  background:#fff; border-radius:var(--radius-lg);
  padding:36px 32px;
  box-shadow:var(--shadow-1);
  border:2px solid var(--line);
  position:relative;
  display:flex; flex-direction:column; gap:14px;
  transition:transform .3s, box-shadow .3s;
}
.price-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); }
.price-card.featured{
  border-color:var(--rose-500);
  background:linear-gradient(160deg,#fff,#fff5f3);
  box-shadow:var(--shadow-2);
  transform:translateY(-12px);
}
.ribbon-top{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--rose-500),var(--berry));
  color:#fff; padding:6px 18px; border-radius:999px;
  font-size:13px; font-weight:700; letter-spacing:.1em;
  box-shadow:0 8px 18px rgba(214,58,89,.35);
}
.box-art{
  aspect-ratio:5/3; border-radius:var(--radius);
  background:
    linear-gradient(180deg,#bce6e0 0%,#7fc7be 50%,transparent 50%),
    linear-gradient(180deg,transparent 50%,#e94e6a 50%,#b8254a 100%);
  position:relative;
  box-shadow:inset 0 -6px 18px rgba(0,0,0,.1), 0 8px 18px rgba(165,28,63,.18);
  overflow:hidden;
}
.box-art::before{
  content:"水蜜桃";
  position:absolute; left:50%; top:60%; transform:translateX(-50%);
  font-family:var(--font-serif); font-weight:900;
  color:#fff; font-size:28px; letter-spacing:.18em;
  text-shadow:0 2px 4px rgba(0,0,0,.25);
}
.box-art::after{
  content:""; position:absolute; left:0; right:0; top:35%;
  height:30%;
  background:
    radial-gradient(ellipse at 30% 50%, #ff8fa8 0%, transparent 50%),
    radial-gradient(ellipse at 70% 50%, #ff8fa8 0%, transparent 50%);
}
.price-card h3{
  margin:6px 0 0; font-size:24px; font-weight:900;
  color:var(--berry); font-family:var(--font-serif);
}
.serve{ margin:0; color:var(--ink-soft); font-size:14px; }
.price{
  display:flex; align-items:baseline; gap:6px;
  margin:6px 0;
}
.price span{ color:var(--ink-soft); font-size:14px; }
.price strong{
  font-family:var(--font-serif);
  font-size:48px; color:var(--berry); font-weight:900;
}
.price-card ul{ display:grid; gap:8px; margin-bottom:auto; }
.price-card ul li{
  position:relative; padding-left:22px; color:var(--ink-soft);
}
.price-card ul li::before{
  content:"✓"; position:absolute; left:0; color:var(--rose-500); font-weight:900;
}
.order-note{
  margin-top:30px; text-align:center; color:var(--ink-soft); font-size:13px;
}

/* ============================================
   Story
   ============================================ */
.story{
  padding:90px 0;
  background:linear-gradient(180deg,var(--pink-50),#fff);
}
.story-grid{
  display:grid; grid-template-columns:1fr 1.2fr; gap:60px; align-items:center;
}
.story-logo{ display:flex; justify-content:center; }
.logo-circle{
  width:min(420px,90%); aspect-ratio:1/1;
  background:#fff;
  border:6px dashed var(--green-300);
  border-radius:50%;
  display:grid; place-items:center; align-content:center;
  position:relative; padding:20px;
  box-shadow:var(--shadow-2);
}
.logo-fruits{
  display:flex; gap:6px; font-size:60px;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.12));
}
.fruit{ animation:float 3s ease-in-out infinite; }
.fruit-orange{ animation-delay:.3s; }
.fruit-lemon{ animation-delay:.6s; }
.fruit-pear{ animation-delay:.9s; }
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
.logo-name{
  font-family:var(--font-serif);
  color:var(--green-700); font-weight:900;
  font-size:48px; letter-spacing:.1em;
  margin-top:6px;
}
.logo-bridge{
  display:flex; gap:6px; margin-top:8px;
}
.logo-bridge span{
  display:block; width:50px; height:30px;
  background:linear-gradient(180deg,var(--brown-300),var(--brown-700));
  border-radius:30px 30px 0 0;
  box-shadow:inset -4px -4px 8px rgba(0,0,0,.15);
}

.story-copy h2{
  font-family:var(--font-serif);
  font-size:clamp(28px,3.6vw,40px);
  line-height:1.3; color:var(--ink);
  margin:8px 0 22px;
}
.story-copy p{
  color:var(--ink-soft); font-size:16px; margin:0 0 14px;
}
.story-pills{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;
}
.story-pills li{
  background:var(--green-100); color:var(--green-700);
  border:1.5px solid var(--green-300);
  padding:8px 16px; border-radius:999px;
  font-weight:600; font-size:14px;
}

/* ============================================
   Other Products
   ============================================ */
.others{
  padding:90px 0;
  background:#fff;
}
.other-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.other-card{
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  transition:transform .3s, box-shadow .3s;
}
.other-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); }
.other-img{
  aspect-ratio:1/1; border-radius:var(--radius-sm);
  margin-bottom:14px;
}
.other-pear{ background:radial-gradient(circle at 50% 60%, #d6e36b, #8eb53a 70%, #5fa040); }
.other-pickle{ background:radial-gradient(circle at 50% 50%, #fff0c0, #ffba63 70%, #d68545); }
.other-orange{ background:radial-gradient(circle at 50% 50%, #ffd28a, #ff9a3c 70%, #d96a14); }
.other-melon{ background:radial-gradient(circle at 50% 50%, #fff7c2, #f0d066 70%, #b59224); }
.other-card h4{ margin:0 0 4px; font-size:17px; color:var(--berry); }
.other-card p{ margin:0; color:var(--ink-soft); font-size:14px; }

/* ============================================
   Contact
   ============================================ */
.contact{
  padding:90px 0;
  background:linear-gradient(135deg,var(--berry),var(--rose-500));
  color:#fff;
}
.contact-grid{
  display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center;
}
.contact-copy h2{
  font-family:var(--font-serif);
  font-size:clamp(28px,3.6vw,42px); line-height:1.3;
  margin:0 0 16px;
}
.contact-copy p{
  margin:0 0 26px; opacity:.92;
}
.contact-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.contact-cta .btn-ghost{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.5);
}
.contact-cta .btn-ghost:hover{ background:rgba(255,255,255,.1); }
.contact-info{
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.25);
  border-radius:var(--radius);
  padding:30px;
  backdrop-filter:blur(10px);
}
.contact-info ul{ display:grid; gap:16px; }
.contact-info li{
  display:flex; justify-content:space-between; gap:14px;
  padding-bottom:14px;
  border-bottom:1px dashed rgba(255,255,255,.25);
}
.contact-info li:last-child{ border-bottom:none; padding-bottom:0; }
.contact-info strong{ font-size:14px; opacity:.85; letter-spacing:.04em; }
.contact-info span{ font-weight:700; }

/* ============================================
   Product Detail Page (PDP)
   ============================================ */
.pdp-page{ padding:30px 0 60px; background:#fff; }
.breadcrumb{
  display:flex; gap:8px; align-items:center;
  font-size:14px; color:var(--ink-soft);
  margin-bottom:24px;
}
.breadcrumb a{ color:var(--green-500); }
.breadcrumb a:hover{ color:var(--green-700); }
.breadcrumb span{ color:#bbb; }

.pdp-grid{
  display:grid; grid-template-columns:1.2fr 1fr; gap:50px;
  margin-bottom:60px;
}

/* Gallery */
.pdp-gallery{ display:flex; flex-direction:column; gap:14px; }
.pdp-main-img{
  aspect-ratio:1/1; border-radius:var(--radius-sm);
  background:#f4f4f4; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.pdp-bigtitle{
  position:relative; z-index:2;
  font-family:var(--font-serif); font-weight:900;
  color:#fff; text-align:center;
  font-size:clamp(34px,5vw,68px); line-height:1.1;
  text-shadow:0 4px 12px rgba(0,0,0,.45);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.25));
  padding:30px 60px; border-radius:18px;
}
.pdp-bigtitle small{ font-size:.55em; display:block; margin-top:6px; }

.pdp-img-peach{
  background:
    radial-gradient(circle at 30% 35%, #ffaaa0, transparent 28%),
    radial-gradient(circle at 65% 35%, #ff8a80, transparent 26%),
    radial-gradient(circle at 50% 70%, #f56068, transparent 35%),
    linear-gradient(160deg,#fff0e6,#e69a7c 65%,#7c3a24);
}
.pdp-img-plum{
  background:
    radial-gradient(circle at 30% 35%, #c8d860, transparent 30%),
    radial-gradient(circle at 65% 30%, #a0b840, transparent 28%),
    radial-gradient(circle at 50% 65%, #88a830, transparent 35%),
    linear-gradient(160deg,#e8f0c8,#5f8024 70%,#2a3e10);
}
.pdp-img-loquat{
  background:
    radial-gradient(circle at 35% 35%, #ffd366, transparent 25%),
    radial-gradient(circle at 65% 35%, #ffba3d, transparent 25%),
    radial-gradient(circle at 50% 70%, #6b3a1c, transparent 35%),
    linear-gradient(160deg,#fff0c2,#a06820 70%,#3a200a);
}
.pdp-img-pickle{
  background:
    radial-gradient(circle at 30% 35%, #ffc2a0, transparent 30%),
    radial-gradient(circle at 65% 35%, #ff9a72, transparent 28%),
    radial-gradient(circle at 50% 70%, #d6754a, transparent 32%),
    linear-gradient(160deg,#fff0e0,#a85a30 70%,#3e1a08);
}

.pdp-thumbs{ display:flex; gap:10px; }
.thumb{
  width:80px; height:80px; border-radius:8px;
  background:#f4f4f4; border:2px solid transparent;
  cursor:pointer; transition:border-color .2s;
}
.thumb.active{ border-color:var(--ink); }
.thumb-a{ background:linear-gradient(135deg,#cad94a,#5f8024); }
.thumb-b{ background:linear-gradient(135deg,#a8c84a,#3a5a18); }
.thumb-c{ background:linear-gradient(135deg,#e0e090,#6a8024); }

/* Side */
.pdp-side{
  background:#f7f7f7;
  border-radius:6px;
  padding:34px 32px;
  align-self:flex-start;
}
.pdp-name{
  font-size:24px; font-weight:700; line-height:1.4;
  margin:0 0 14px;
}
.pdp-price{
  display:flex; align-items:baseline; gap:6px;
  margin:0 0 22px;
}
.pdp-price span{ font-size:18px; color:var(--ink); }
.pdp-price strong{ font-size:32px; font-weight:700; }

.pdp-promise{
  display:grid; gap:12px; margin:0 0 28px;
  border-top:1px solid #e0e0e0;
  border-bottom:1px solid #e0e0e0;
  padding:18px 0;
}
.pdp-promise li{
  display:flex; align-items:center; gap:14px;
  color:var(--ink); font-size:15px;
}
.pdp-promise svg{ color:var(--ink); }

.variant-group{ margin-bottom:22px; }
.variant-label{
  display:block; font-size:14px; color:var(--ink);
  margin-bottom:10px;
}
.variant-options{ display:flex; flex-wrap:wrap; gap:10px; }
.variant-btn{
  padding:12px 22px;
  background:#fff; border:1.5px solid #d8d8d8;
  border-radius:6px; cursor:pointer;
  font-size:14px; color:var(--ink);
  transition:border-color .2s, background .2s;
}
.variant-btn:hover{ border-color:#888; }
.variant-btn.active{
  border-color:#000; border-width:2px;
  font-weight:600;
}

.qty-control{
  display:inline-flex; align-items:center;
  border:1.5px solid #d8d8d8; border-radius:6px;
  overflow:hidden;
}
.qty-btn{
  width:42px; height:42px; background:#fff; border:none;
  font-size:20px; cursor:pointer;
  transition:background .2s;
}
.qty-btn:hover{ background:#f0f0f0; }
.qty-input{
  width:60px; height:42px; text-align:center;
  border:none; border-left:1px solid #d8d8d8; border-right:1px solid #d8d8d8;
  font-size:15px; background:#fff;
}
.qty-input:focus{ outline:none; }

.btn-add-cart, .btn-buy-now{
  display:block; width:100%;
  padding:16px; border:none; border-radius:6px;
  font-size:16px; font-weight:600;
  cursor:pointer; margin-bottom:10px;
  transition:transform .2s, opacity .2s;
}
.btn-add-cart{
  background:#000; color:#fff;
}
.btn-add-cart:hover{ opacity:.85; }
.btn-buy-now{
  background:#fff; color:#000; border:1.5px solid #000;
}
.btn-buy-now:hover{ background:#000; color:#fff; }

.pdp-acc{
  border-top:1px solid #e0e0e0;
  padding:18px 0;
}
.pdp-acc summary{
  font-weight:600; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between;
}
.pdp-acc summary::after{ content:"+"; font-size:18px; }
.pdp-acc[open] summary::after{ content:"−"; }
.pdp-acc p{
  margin:14px 0 0; color:var(--ink-soft); font-size:14.5px; line-height:1.8;
}

/* PDP detail banners */
.pdp-detail{ padding:60px 0; }
.pdp-detail-title{
  text-align:center; font-size:24px; margin:0 0 30px;
}
.pdp-detail-banner{
  width:100%; aspect-ratio:5/3; border-radius:var(--radius);
  margin-bottom:20px; background:#eee;
}

/* 商品資訊卡（後台「商品資訊」欄位動態產生）*/
.pdp-infocard{ margin:10px 0 40px; }
.pdp-info-list{
  max-width:760px; margin:0 auto;
  border:1px dashed var(--rose-500, #e94e6a); border-radius:var(--radius);
  padding:22px; display:flex; flex-direction:column; gap:14px;
  background:linear-gradient(180deg,#fff,var(--pink-50,#fff5f7));
}
.pdp-info-row{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(90deg,var(--pink-50,#ffeef2),#fff);
  border-left:5px solid var(--rose-500, #e94e6a); border-radius:12px;
  padding:14px 18px;
}
.pdp-info-icon{
  flex-shrink:0; width:42px; height:42px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.pdp-info-label{ font-weight:800; color:var(--berry, #a51c3f); min-width:84px; }
.pdp-info-label::after{ content:"："; }
.pdp-info-value{ color:var(--ink, #333); flex:1; }
@media (max-width:560px){
  .pdp-info-label{ min-width:0; }
  .pdp-info-row{ flex-wrap:wrap; }
}
.pdp-detail-plum1{
  background:
    radial-gradient(circle at 30% 50%, #c8d860, transparent 30%),
    radial-gradient(circle at 70% 50%, #a0b840, transparent 30%),
    linear-gradient(135deg,#1a4d2e 0%,#2d6e3f 50%,#85a64a 100%);
}
.pdp-detail-plum2{
  background:linear-gradient(135deg,#e8f0c8,#a8c84a);
}
.pdp-detail-peach1{
  background:linear-gradient(135deg,#ffd2c2,#ff8a80);
}
.pdp-detail-peach2{
  background:linear-gradient(135deg,#fff0e0,#ffaa9a);
}
.pdp-detail-loquat1{ background:linear-gradient(135deg,#fff0c2,#d68a3c); }
.pdp-detail-loquat2{ background:linear-gradient(135deg,#ffd366,#a06820); }
.pdp-detail-pickle1{ background:linear-gradient(135deg,#ffe6cc,#d6754a); }
.pdp-detail-pickle2{ background:linear-gradient(135deg,#fff0e0,#a85a30); }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:80px; transform:translateX(-50%) translateY(20px);
  background:rgba(0,0,0,.88); color:#fff;
  padding:14px 26px; border-radius:999px;
  font-weight:600; font-size:15px;
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
  z-index:1000;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================
   Cart Page
   ============================================ */
.cart-page{ padding:50px 0 80px; background:#fff; min-height:60vh; }
.cart-title{
  font-size:32px; font-weight:900; margin:0 0 30px;
  text-align:center;
}
.cart-grid{
  display:grid; grid-template-columns:1fr 380px; gap:30px;
  align-items:start;
}
.cart-list-wrap{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.cart-list{ display:flex; flex-direction:column; }
.cart-item{
  display:grid;
  grid-template-columns:90px 1fr auto auto auto;
  gap:18px; align-items:center;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
}
.cart-item:last-child{ border-bottom:none; }
.ci-img{
  width:90px; height:90px; border-radius:8px;
  background:#f0f0f0;
}
.ci-info h3{
  margin:0 0 4px; font-size:15px; font-weight:600;
  line-height:1.4;
}
.ci-variant{ margin:0 0 4px; color:var(--ink-soft); font-size:13px; }
.ci-price{ margin:0; color:var(--ink); font-size:14px; }
.ci-qty{
  display:inline-flex; align-items:center;
  border:1px solid #d8d8d8; border-radius:6px;
}
.ci-qty .qty-btn{ width:32px; height:32px; font-size:16px; }
.ci-qty .qty-input{ width:40px; height:32px; font-size:14px; }
.ci-sub{ font-weight:700; min-width:90px; text-align:right; }
.ci-remove{
  background:none; border:none; cursor:pointer;
  width:32px; height:32px; border-radius:50%;
  color:var(--ink-soft); font-size:14px;
  transition:background .2s, color .2s;
}
.ci-remove:hover{ background:var(--pink-50); color:var(--rose-600); }

.cart-summary{
  background:#f7f7f7; border-radius:var(--radius); padding:26px;
  position:sticky; top:90px;
}
.cart-summary h3{
  margin:0 0 18px; font-size:18px; font-weight:700;
}
.sum-list{ display:grid; gap:10px; margin-bottom:20px; }
.sum-list li{
  display:flex; justify-content:space-between;
  font-size:15px; color:var(--ink);
}
.sum-list .ship-note{
  font-size:13px; color:var(--green-700); justify-content:flex-start;
}
.sum-list .grand{
  border-top:1px solid #d8d8d8; padding-top:12px; margin-top:6px;
  font-size:18px; font-weight:700;
}
.sum-list .grand strong{ color:var(--berry); font-size:22px; }
.cart-secure{
  text-align:center; font-size:13px; color:var(--ink-soft);
  margin:14px 0 0;
}

.cart-empty{
  grid-column:1/-1;
  text-align:center; padding:80px 20px;
}
.cart-empty-icon{ font-size:64px; opacity:.3; margin-bottom:14px; }
.cart-empty h2{ margin:0 0 10px; }
.cart-empty p{ color:var(--ink-soft); margin:0 0 30px; }

/* ============================================
   Checkout Page
   ============================================ */
.checkout-nav .nav-inner{ grid-template-columns:1fr; padding:18px var(--pad-x); }
.checkout-page{
  background:#fff; min-height:100vh; padding:0;
}
.checkout-grid{
  display:grid; grid-template-columns:1.3fr 1fr;
  max-width:1240px; margin:0 auto;
  min-height:calc(100vh - 90px);
}
.checkout-form{
  padding:50px clamp(24px,4vw,60px);
  background:#fff;
}
.checkout-summary{
  padding:50px clamp(24px,4vw,60px);
  background:#f7f7f7;
  border-left:1px solid var(--line);
}

.co-block{ margin-bottom:38px; }
.co-h{
  font-size:18px; font-weight:700; margin:0 0 18px;
  color:var(--ink);
}

.field{
  position:relative; margin-bottom:14px;
}
.field input, .field select, .checkout-form textarea{
  width:100%;
  padding:18px 14px 8px;
  border:1px solid #c9c9c9; border-radius:6px;
  font-size:15px; font-family:inherit;
  background:#fff; color:var(--ink);
  transition:border-color .15s;
}
.field input:focus, .field select:focus, .checkout-form textarea:focus{
  outline:none; border-color:var(--ink); border-width:2px;
  padding:17px 13px 7px;
}
.field input::placeholder{ color:transparent; }
.field-lbl{
  position:absolute; left:14px; top:14px;
  font-size:15px; color:#888;
  pointer-events:none; transition:all .15s;
  background:#fff; padding:0 4px;
}
.field input:focus + .field-lbl,
.field input:not(:placeholder-shown) + .field-lbl,
.field select:focus + .field-lbl,
.field select:valid + .field-lbl{
  top:-8px; font-size:12px; color:var(--ink);
}
.field-row{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.checkout-form textarea{
  padding:14px; resize:vertical; min-height:80px;
}
.check{
  display:flex; align-items:center; gap:8px;
  font-size:14px; color:var(--ink-soft);
  margin-top:6px;
}

/* 收件方式卡片 */
.ship-method{ display:grid; gap:10px; }
.ship-opt{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px; align-items:center;
  padding:16px 18px;
  border:1.5px solid #d8d8d8; border-radius:6px;
  cursor:pointer; transition:border-color .15s, background .15s;
}
.ship-opt:has(input:checked){
  border-color:#000; border-width:2px; padding:15px 17px;
}
.ship-opt input{ width:18px; height:18px; accent-color:#000; }
.ship-opt strong{ display:block; font-size:15px; }
.ship-opt p{ margin:2px 0 0; font-size:13px; color:var(--ink-soft); }
.ship-fee{ font-weight:700; font-size:14px; }

.hint{
  margin-top:12px; padding:10px 14px;
  background:#fff5cf; border-radius:6px;
  font-size:14px; color:#8a6d1c;
}

.radio-card{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; margin-bottom:8px;
  border:1.5px solid #d8d8d8; border-radius:6px;
  cursor:pointer; font-size:15px;
  transition:border-color .15s;
}
.radio-card:has(input:checked){
  border-color:#1aa3ff; background:#eaf6ff; color:#1377c4;
  border-width:2px; padding:13px 17px;
}
.radio-card input{ accent-color:#1aa3ff; }

.btn-checkout{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  background:#06c755; color:#fff;
  border:none; padding:18px;
  font-size:17px; font-weight:700;
  border-radius:6px; cursor:pointer;
  transition:background .2s, transform .15s;
  margin-top:10px;
}
.btn-checkout:hover{ background:#04a043; }
.btn-checkout:active{ transform:translateY(1px); }
.lock-icon{ font-size:14px; }

.terms{
  font-size:13px; color:var(--ink-soft); margin-top:18px; line-height:1.7;
}
.terms a{ color:#1aa3ff; }

/* 右側摘要 */
.cs-list{ margin-bottom:24px; }
.cs-empty{ color:var(--ink-soft); }
.cs-empty a{ color:var(--rose-600); font-weight:700; }
.cs-item{
  display:grid; grid-template-columns:64px 1fr auto;
  gap:14px; align-items:center;
  margin-bottom:16px;
}
.cs-img{
  position:relative;
  width:64px; height:64px; border-radius:8px;
  background:#eee; border:1px solid #d8d8d8;
}
.cs-qty{
  position:absolute; top:-6px; right:-6px;
  background:#777; color:#fff;
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  font-size:12px; font-weight:700;
  border:2px solid #f7f7f7;
}
.cs-meta strong{ display:block; font-size:14.5px; line-height:1.4; }
.cs-meta small{ color:var(--ink-soft); font-size:12.5px; }
.cs-price{ font-size:14px; font-weight:700; }

.cs-coupon{
  display:grid; grid-template-columns:1fr auto; gap:8px;
  margin-bottom:18px;
}
.cs-coupon input{
  padding:14px 12px; border:1px solid #c9c9c9; border-radius:6px;
  font-size:14px; background:#fff;
}
.cs-coupon button{
  background:#fff; border:1.5px solid #c9c9c9; border-radius:6px;
  padding:0 22px; cursor:pointer; font-weight:600;
}

.cs-totals{
  border-top:1px solid #d8d8d8; padding-top:18px;
  display:grid; gap:10px;
}
.cs-totals li{
  display:flex; justify-content:space-between;
  font-size:15px;
}
.cs-totals .grand{
  border-top:1px solid #d8d8d8; padding-top:14px; margin-top:6px;
  font-size:17px;
}
.cs-totals .grand strong{ font-size:22px; font-weight:700; }

.checkout-footer{
  text-align:center;
  padding:30px 20px;
  font-size:13px; color:var(--ink-soft);
  border-top:1px solid var(--line);
  background:#fff;
}
.checkout-footer .dot{ margin:0 8px; }
.checkout-footer a{ color:var(--ink-soft); margin:0 6px; }
.checkout-footer a:hover{ color:var(--ink); }

@media (max-width:880px){
  .checkout-grid{ grid-template-columns:1fr; }
  .checkout-summary{ border-left:none; border-top:1px solid var(--line); }
  .field-row{ grid-template-columns:1fr; }
}

/* ============================================
   Thank You Page
   ============================================ */
.thankyou-page{
  background:#fff; padding:50px 0 80px; min-height:80vh;
}
.ty-hero{
  text-align:center; max-width:600px; margin:0 auto 40px;
}
.ty-check{ margin-bottom:14px; }
.ty-hero h1{
  font-size:clamp(24px,3.4vw,34px); margin:0 0 14px;
  color:var(--ink);
}
.ty-hero p{ margin:0 0 8px; color:var(--ink); }
.ty-hero strong{ color:var(--berry); font-family:Menlo,monospace; }
.ty-sub{ color:var(--ink-soft); }

.ty-grid{
  display:grid; grid-template-columns:1.3fr 1fr; gap:24px;
  margin-bottom:40px;
}
.ty-card{
  background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:24px;
  margin-bottom:18px;
}
.ty-card h2{ margin:0 0 18px; font-size:18px; }
.ty-card h3{ margin:0 0 14px; font-size:16px; color:var(--ink); }
.ty-card p{ margin:0 0 8px; color:var(--ink); font-size:14.5px; }

.ty-items{ display:grid; gap:14px; margin-bottom:18px; }
.ty-items li{
  display:grid; grid-template-columns:60px 1fr auto;
  gap:14px; align-items:center;
  padding-bottom:14px; border-bottom:1px dashed var(--line);
}
.ty-items li:last-child{ border-bottom:none; padding-bottom:0; }
.ty-img{
  width:60px; height:60px; border-radius:8px;
  background:#f0f0f0;
}
.ty-img.pc-peach{ background:radial-gradient(circle,#ffa090,#cc4a3a); }
.ty-img.pc-plum{ background:radial-gradient(circle,#c8d860,#5f8024); }
.ty-img.pc-loquat{ background:radial-gradient(circle,#ffd366,#a06820); }
.ty-img.pc-pickle{ background:radial-gradient(circle,#ffb88c,#a85a30); }
.ty-meta strong{ display:block; font-size:14.5px; }
.ty-meta small{ color:var(--ink-soft); font-size:13px; }
.ty-itm-price{ font-weight:700; }

.ty-totals{ display:grid; gap:8px; padding-top:14px; border-top:1px solid var(--line); }
.ty-totals li{ display:flex; justify-content:space-between; }
.ty-totals .grand{
  border-top:1px solid var(--line); padding-top:10px; margin-top:6px;
  font-size:17px;
}
.ty-totals .grand strong{ color:var(--berry); font-size:22px; }

.ty-est{
  margin:14px 0 0 !important; padding-top:14px;
  border-top:1px dashed var(--line);
}
.ty-est strong{ color:var(--green-700); font-family:inherit; }
.ty-note{
  background:#fff5cf; padding:10px 12px; border-radius:8px;
  font-size:13px;
}

.ty-bank{
  background:#fff5cf; border-radius:10px;
  padding:16px 18px; margin-top:14px;
}
.ty-bank h4{ margin:0 0 10px; color:#8a6d1c; font-size:14px; }
.ty-bank p{ margin:0 0 6px !important; font-size:14px; }
.ty-bank-note{
  margin-top:10px !important; padding-top:10px;
  border-top:1px dashed #d6b250;
  color:#8a6d1c;
}
.ty-paid-tag{
  display:inline-block; background:#e0f5e6; color:#2d7a3e;
  padding:4px 12px; border-radius:999px;
  font-size:14px; font-weight:700;
}

.ty-line{ background:linear-gradient(135deg,#ffffff,#f0f9e8); border-color:#9ec76a; }

.ty-actions{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}

@media (max-width:880px){
  .ty-grid{ grid-template-columns:1fr; }
}

/* ============================================
   Legal Pages
   ============================================ */
.legal-page{ background:#fff; padding:50px 0 80px; }
.legal-page .container{
  display:grid; grid-template-columns:200px 1fr; gap:50px;
}
.legal-side{
  position:sticky; top:90px; align-self:start;
}
.legal-side h4{
  margin:0 0 14px; font-size:14px; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.1em;
}
.legal-side a{
  display:block; padding:10px 14px;
  color:var(--ink); border-radius:8px;
  font-size:14.5px;
  margin-bottom:4px;
  transition:background .15s;
}
.legal-side a:hover{ background:var(--pink-50); }
.legal-side a.active{
  background:var(--berry); color:#fff; font-weight:700;
}

.legal-body{
  max-width:780px; line-height:1.9;
  color:var(--ink);
}
.legal-body h1{
  font-size:32px; font-weight:900; margin:0 0 8px;
  color:var(--ink);
}
.legal-meta{
  color:var(--ink-soft); font-size:13.5px;
  padding-bottom:24px; border-bottom:1px solid var(--line);
  margin-bottom:30px;
}
.legal-body h2{
  font-size:20px; margin:36px 0 14px;
  color:var(--berry);
}
.legal-body p, .legal-body li{
  font-size:15px; color:var(--ink);
}
.legal-body ul, .legal-body ol{
  padding-left:22px; margin:0 0 16px;
}
.legal-body li{ margin-bottom:6px; }

.legal-alert{
  background:#fff5cf; border-left:5px solid #f0a020;
  padding:16px 20px; border-radius:8px;
  margin:20px 0 30px; font-size:14.5px;
  color:#6b4f1c;
}
.legal-alert strong{ color:#8a4a10; }

.legal-table{
  width:100%; border-collapse:collapse;
  margin:14px 0 24px; font-size:14px;
}
.legal-table th, .legal-table td{
  padding:10px 14px; text-align:left;
  border:1px solid var(--line);
}
.legal-table th{ background:var(--pink-50); font-weight:700; }

.legal-foot{
  margin-top:40px; padding-top:20px;
  border-top:1px dashed var(--line);
  color:var(--ink-soft); font-size:14px;
}
.legal-foot a{ color:var(--rose-600); font-weight:700; }
.legal-body hr{
  border:none; border-top:1px solid var(--line);
  margin:30px 0;
}

@media (max-width:880px){
  .legal-page .container{ grid-template-columns:1fr; gap:24px; }
  .legal-side{ position:static; }
  .legal-side a{ display:inline-block; margin:4px 6px 4px 0; }
}

/* ============================================
   Footer
   ============================================ */
.footer{
  background:#fff; color:var(--ink);
  padding:70px 0 30px;
  border-top:1px solid var(--line);
}
.footer-cols{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:48px;
  padding-bottom:40px;
  border-bottom:1px solid var(--line);
}
.foot-h{
  margin:0 0 22px; font-size:18px; font-weight:900;
  color:var(--ink); letter-spacing:.02em;
}
.foot-col p{ margin:0 0 10px; }

/* Follow us */
.social-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:18px; max-width:200px;
}
.social{
  width:38px; height:38px;
  display:grid; place-items:center;
  color:var(--ink);
  transition:color .2s, transform .2s;
}
.social:hover{ color:var(--rose-500); transform:translateY(-2px); }

/* We accept */
.pay-grid{ display:flex; flex-wrap:wrap; gap:8px; max-width:240px; }
.pay{
  width:54px; height:34px; border-radius:6px;
  background:#fff; border:1px solid #e3e3e3;
  display:flex; align-items:center; justify-content:center;
  font-family:Arial,sans-serif; font-weight:900;
  font-size:11px; letter-spacing:.04em;
  user-select:none; position:relative; overflow:hidden;
}
.pay-visa{ color:#1a1f71; font-style:italic; }
.pay-mc{ gap:0; }
.mc-c{ width:18px; height:18px; border-radius:50%; }
.mc-r{ background:#eb001b; margin-right:-6px; }
.mc-y{ background:#f79e1b; mix-blend-mode:multiply; }
.pay-amex{
  background:linear-gradient(135deg,#0078a9,#006fcf);
  color:#fff; border-color:#006fcf;
}
.pay-pp{ background:#fff; }
.pay-pp i{
  font-style:italic; font-weight:900; font-size:18px;
  font-family:Georgia,serif;
}
.pay-pp i:nth-child(1){ color:#003087; margin-right:-3px; }
.pay-pp i:nth-child(2){ color:#009cde; }
.pay-diners{ background:#fff; }
.dc-l, .dc-r{
  width:14px; height:18px; border-radius:50%;
}
.dc-l{ background:#0079be; margin-right:-4px; }
.dc-r{ background:#fff; border:2px solid #0079be; }
.pay-discover{
  color:#000; font-size:9px; gap:1px; padding:0 4px;
}
.pay-discover .orb{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#ff6b00; margin:0 1px;
}

/* Quick links */
.quick-links{ display:grid; gap:10px; }
.quick-links a{
  color:var(--ink); opacity:.8; font-size:15px;
}
.quick-links a:hover{ color:var(--rose-600); opacity:1; }

/* Our mission */
.mission-text{
  font-size:14.5px; color:var(--ink-soft); line-height:1.8;
}
.mission-en{
  font-size:14px; color:var(--ink); line-height:1.6;
  font-style:italic; opacity:.85;
}

/* Footer bottom */
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:26px; gap:20px; flex-wrap:wrap;
}
.foot-brand{ display:flex; align-items:center; gap:14px; }
.foot-brand small{ opacity:.65; font-weight:400; color:var(--ink-soft); }
.foot-copy{ font-size:13px; opacity:.65; color:var(--ink-soft); }

/* ============================================
   Announcement Banner（首頁頂部公告）
   ============================================ */
.announce-bar{ width:100%; }
.announce-item{
  padding:10px 20px; text-align:center;
  font-size:14px; font-weight:500;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.announce-item a{ text-decoration:underline; }
.announce-info{ background:#e0f5ff; color:#1a5a8a; }
.announce-info a{ color:#0c4070; }
.announce-warn{ background:#fff5cf; color:#8a6d1c; }
.announce-warn a{ color:#5a4710; }
.announce-promo{ background:linear-gradient(90deg,#a51c3f,#e94e6a); color:#fff; }
.announce-promo a{ color:#fff; }

/* ============================================
   Cookie Banner
   ============================================ */
.cookie-banner{
  position:fixed; bottom:0; left:0; right:0; z-index:9999;
  background:rgba(20,16,24,.96); color:#fff;
  padding:18px 20px;
  backdrop-filter:blur(8px);
  box-shadow:0 -8px 28px rgba(0,0,0,.25);
  animation:slideUp .4s ease;
}
@keyframes slideUp{
  from{ transform:translateY(100%); }
  to  { transform:translateY(0); }
}
.cookie-inner{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr auto; gap:24px;
  align-items:center;
}
.cookie-text strong{
  display:block; margin-bottom:6px; font-size:15px;
}
.cookie-text p{
  margin:0; font-size:13.5px; line-height:1.6; opacity:.85;
}
.cookie-text a{ color:#ffaaaa; text-decoration:underline; }
.cookie-actions{ display:flex; gap:10px; }
.cookie-btn{
  padding:10px 20px; border:none; border-radius:8px;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:transform .15s, opacity .15s;
}
.cookie-btn:hover{ transform:translateY(-1px); }
.cookie-essential{
  background:rgba(255,255,255,.15); color:#fff;
  border:1.5px solid rgba(255,255,255,.3);
}
.cookie-all{
  background:linear-gradient(135deg,var(--rose-500),var(--berry));
  color:#fff;
}
@media (max-width:680px){
  .cookie-inner{ grid-template-columns:1fr; }
  .cookie-actions{ justify-content:flex-end; }
}

/* ============================================
   Floating LINE
   ============================================ */
.float-line{
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:flex; align-items:center; gap:10px;
}
.float-line-bubble{
  background:#fff; color:var(--green-700);
  padding:8px 14px; border-radius:999px;
  font-weight:700; font-size:14px;
  box-shadow:var(--shadow-2);
  border:1.5px solid var(--green-300);
}
.float-line-icon{
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg,#06c755,#04a043);
  color:#fff; font-weight:900; font-size:26px;
  display:grid; place-items:center;
  box-shadow:0 12px 28px rgba(6,199,85,.45);
  animation:pulse 2.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}

/* ============================================
   Reveal animation
   ============================================ */
.reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.in{ opacity:1; transform:none; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width:980px){
  .nav-inner{
    grid-template-columns:auto 1fr auto;
  }
  .nav-left{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:#fff;
    border-top:1px solid var(--line);
    padding:14px 0;
    display:none;
  }
  .nav-left.open{ display:flex; }
  .nav-left a{ padding:12px var(--pad-x); width:100%; }
  /* 手機選單裡的「所有商品」下拉改為內嵌展開，不浮動 */
  .nav-drop{ width:100%; }
  .nav-drop .drop-panel{
    position:static; display:none; box-shadow:none; border:none;
    margin:0; padding:0 0 0 var(--pad-x); min-width:0;
  }
  .nav-drop.open .drop-panel{ display:block; }
  .nav-burger{ display:block; }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .pdp-grid{ grid-template-columns:1fr; }
  .cart-grid{ grid-template-columns:1fr; }
  .cart-summary{ position:static; }

  .hero-grid,
  .info-grid,
  .story-grid,
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .shipping-grid{ grid-template-columns:repeat(2,1fr); }
  .review-grid{ grid-template-columns:1fr; }
  .review-card.featured{ transform:none; }
  .price-grid{ grid-template-columns:1fr; }
  .price-card.featured{ transform:none; }
  .other-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-cols{ grid-template-columns:repeat(2,1fr); gap:36px; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}

@media (max-width:560px){
  .hero{ padding:60px var(--pad-x) 70px; }
  .info-card{ padding:30px 24px; }
  .shipping-grid{ grid-template-columns:1fr; }
  .other-grid{ grid-template-columns:1fr; }
  .float-line-bubble{ display:none; }
  .hero-badge{ width:88px; height:88px; }
  .hero-badge strong{ font-size:18px; }
  .footer-cols{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:1fr; }
  .logo-circle.mini{ height:60px; }
  .logo-circle.mini .logo-name{ font-size:18px; }
  .logo-circle.mini .logo-fruits{ font-size:18px; }
  .cart-item{ grid-template-columns:70px 1fr auto; gap:12px; row-gap:8px; }
  .cart-item .ci-qty{ grid-column:2/-1; }
  .cart-item .ci-sub{ grid-column:2/-1; text-align:left; }
  .cart-item .ci-remove{ position:absolute; top:10px; right:10px; }
  .cart-item{ position:relative; }
}

/* ===== 商品評論 / 客服 / 點數（A功能補充樣式）===== */
.pdp-reviews{ max-width:920px; margin:40px auto; padding:0 20px; }
.review-summary{ display:flex; align-items:center; gap:10px; margin:8px 0 20px; }
.review-summary strong{ font-size:24px; color:var(--berry,#a51c3f); }
.review-stars{ color:#f2b01e; letter-spacing:2px; }
.review-list{ display:flex; flex-direction:column; gap:14px; }
.review-item{ background:#fff; border:1px solid #f0e3e6; border-radius:14px; padding:14px 16px; }
.review-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.review-head .muted{ font-size:12px; }
.review-item p{ margin:0; color:#444; line-height:1.7; }
.review-form-wrap{ margin-top:22px; }
.review-form-wrap > summary{ display:inline-block; cursor:pointer; list-style:none; }
.review-form{ display:flex; flex-direction:column; gap:12px; margin-top:14px;
  background:#fff7f4; border:1px solid #f3d6dc; border-radius:14px; padding:16px; }
.review-form label{ display:flex; flex-direction:column; gap:4px; font-size:14px; font-weight:600; }
.review-form input, .review-form select, .review-form textarea{
  padding:9px 11px; border:1px solid #ddd; border-radius:8px; font:inherit; }
.review-hint{ font-size:12px; margin:0; }

/* 結帳：優惠券 / 點數 */
.discount-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.discount-row input{ flex:1; min-width:140px; padding:9px 11px; border:1px solid #ddd; border-radius:8px; font:inherit; }
.discount-msg{ font-size:13px; margin:6px 0 0; }
.discount-msg.ok{ color:#1a7f4b; }
.discount-msg.err{ color:#c0392b; }

/* 會員點數 */
.points-balance{ font-size:30px; font-weight:800; color:var(--berry,#a51c3f); }
.ledger-table{ width:100%; border-collapse:collapse; margin-top:12px; font-size:14px; }
.ledger-table th, .ledger-table td{ padding:8px 10px; border-bottom:1px solid #eee; text-align:left; }
.ledger-pos{ color:#1a7f4b; } .ledger-neg{ color:#c0392b; }

/* 客服聯絡表單 */
.support-form{ display:flex; flex-direction:column; gap:12px; max-width:560px; }
.support-form label{ display:flex; flex-direction:column; gap:4px; font-weight:600; }
.support-form input, .support-form textarea{ padding:10px 12px; border:1px solid #ddd; border-radius:8px; font:inherit; }

/* ===== #3 首頁圖片自適應:上傳自訂圖時隱藏預設裝飾形狀,容器隨螢幕縮放 ===== */
/* Banner 上傳真圖後,隱藏預設的肉色圓圈(::before)與藍色方塊(::after) */
.banner-img.has-custom-img::before,
.banner-img.has-custom-img::after{ display:none !important; }

/* Hero 上傳真圖後,隱藏 CSS 畫的水蜜桃裝飾,並改用方形比例自適應 */
.hero-visual.has-custom-img .peach-stack,
.hero-visual.has-custom-img .peach,
.hero-visual.has-custom-img .peach-leaf,
.hero-visual.has-custom-img .peach-shine{ display:none !important; }
.hero-visual.has-custom-img{
  min-height:0; width:100%; aspect-ratio:1/1;
  border-radius:var(--radius,20px); overflow:hidden;
}

/* 所有上傳圖容器:確保填滿不溢出、隨寬度縮放 */
.banner-img.has-custom-img,
.pc-img.has-custom-img{ background-size:cover !important; background-position:center !important; }

/* 窄螢幕 Hero 視覺不要過高 */
@media (max-width:768px){
  .hero-visual{ min-height:300px; }
  .hero-visual.has-custom-img{ min-height:0; }
}