/* =====================================================================
   蜂蜜產品頁 設計規範（只由 products.html 載入；共用元件在 style.css）
   ---------------------------------------------------------------------
   文字層級（只用這 6 級）
     H2 區塊標題   襯線 30px 深綠          （手機 26px）
     H3 商品名稱   襯線 24px 深綠（購買區與贈禮卡相同）
     導言          15px 灰
     內文          14px 灰
     次要資訊      13px 灰（規格、適合對象、標示欄位）
     眉標          12px 金、字距 .25em —— 只出現在區塊標題上方（沿用 .section-label）
   顏色
     深綠＝標題與主要按鈕；灰＝內文；金＝眉標、細線、「已選取」；褐金＝只用於價格
   價格
     褐金 24px（購買區與贈禮卡相同）
   元件
     按鈕    主要：深綠實心／次要：深綠外框；高 48px；圓角 6px
     容器    商品一律放在白底卡片（圓角＋淡陰影），購買區與贈禮卡相同
     照片    商品主圖一律用明亮的型錄情境照，不混用暗棚拍
     選取    白底＋金框（容量、送禮對象一致）
     膠囊    只給「可以點的篩選」；不可點的資訊一律用文字，以「・」或空格分隔
     分隔    1px 金色細線（--hairline）
   間距
     8 的倍數；區塊上下 96px（手機 64px）；卡片內距 28px（手機 22px）
   商品卡固定順序
     圖 → 名稱 → 規格 → 一句描述 → 次要資訊 → 價格＋按鈕（貼齊卡片底部）
   ===================================================================== */
.page-products{
  --fs-h2:30px; --fs-h3:24px; --fs-lead:15px; --fs-body:14px; --fs-meta:13px;
  --pad-section:96px; --pad-card:28px; --h-btn:48px;
}
.page-products [hidden]{display:none!important;}
.page-products .section{padding:var(--pad-section) 0;}
.page-products .section h2{font-size:var(--fs-h2);line-height:1.35;margin-bottom:14px;}
.page-products .lead{font-size:var(--fs-lead);margin-bottom:48px;}
.page-products .anchor{scroll-margin-top:160px;}

/* ---------- 頁內導覽（固定在頁首下方）＋訂購清單 ---------- */
.sub-nav{position:sticky;top:88px;z-index:40;background:rgba(246,241,231,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline);}
.sub-nav-in{display:flex;justify-content:space-between;align-items:center;height:56px;gap:12px;}
.sub-links{display:flex;gap:32px;overflow-x:auto;scrollbar-width:none;}
.sub-links::-webkit-scrollbar{display:none;}
.sub-links a{font-size:var(--fs-body);color:var(--muted);letter-spacing:.06em;padding:17px 0 15px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .25s,border-color .25s;}
.sub-links a:hover{color:var(--green);}
.sub-links a.on{color:var(--green);border-bottom-color:var(--gold);}

/* ---------- 按鈕 ---------- */
.btn-add{display:inline-flex;align-items:center;justify-content:center;min-height:var(--h-btn);padding:0 24px;border:1px solid var(--green);border-radius:var(--radius);
  background:var(--green);color:var(--ivory);font:inherit;font-size:var(--fs-body);letter-spacing:.12em;cursor:pointer;transition:background .25s,color .25s,transform .15s;}
.btn-add:hover{background:var(--green-soft);border-color:var(--green-soft);}
.btn-add:active{transform:scale(.98);}
.btn-add.added{background:var(--gold);border-color:var(--gold);color:#fff;}
.btn-add.ghost{background:transparent;color:var(--green);}
.btn-add.ghost:hover{background:var(--green);color:var(--ivory);}
.btn-add:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- 次要資訊清單（購買區、產品標示共用） ---------- */
.info-list{display:grid;grid-template-columns:5.5em 1fr;gap:8px 16px;font-size:var(--fs-meta);line-height:1.75;}
.info-list dt{color:var(--green);font-weight:500;}
.info-list dd{color:var(--muted);}

/* ---------- 獨享：日常龍眼花蜜購買區 ---------- */
.buy{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:start;
  background:#fff;border-radius:var(--radius);box-shadow:0 8px 30px rgba(13,28,15,.05);padding:var(--pad-card);}
.buy-media{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse at 50% 60%,#FBF8F1 0%,var(--paper) 75%);}
.buy-media .bgx{transition:opacity .45s ease;}
.buy-jar{position:absolute;inset:auto 0 15% 0;margin:0 auto;z-index:1;max-width:70%;max-height:min(72%,400px);object-fit:contain;object-position:50% 100%;
  opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease;filter:drop-shadow(0 1px 2px rgba(13,28,15,.12));}
.buy-media::after{content:'';position:absolute;left:50%;bottom:calc(15% - 10px);width:40%;height:20px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(13,28,15,.32),rgba(13,28,15,.12) 55%,transparent);opacity:0;transition:opacity .45s ease;pointer-events:none;}
.buy-media.show-jar .bgx{opacity:0;}
.buy-media.show-jar .buy-jar{opacity:1;transform:none;}
.buy-media.show-jar::after{opacity:1;}
.buy-info h3{font-size:var(--fs-h3);color:var(--green);line-height:1.3;margin-bottom:12px;}
.buy-desc{font-size:var(--fs-lead);color:var(--muted);margin-bottom:32px;}
.field-label{display:block;font-size:var(--fs-meta);color:var(--green);font-weight:500;letter-spacing:.08em;margin-bottom:10px;}
.size-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.size-picker button{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-width:0;padding:16px 4px 12px;isolation:isolate;
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);font:inherit;color:var(--ink);cursor:pointer;transition:border-color .25s,box-shadow .25s;}
.size-picker button:hover{border-color:var(--gold);}
.size-picker button.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);}
.sp-visual{position:relative;height:112px;width:100%;display:flex;align-items:flex-end;justify-content:center;margin-bottom:10px;}
.sp-visual::after{content:'';position:absolute;left:50%;bottom:-4px;z-index:-1;width:58%;height:9px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(13,28,15,.26),rgba(13,28,15,.08) 60%,transparent);pointer-events:none;}
.sp-visual .jar-photo,.sp-visual .jar{height:calc(100% * var(--k));max-height:100%;width:auto;max-width:100%;object-fit:contain;transition:transform .3s;}
.sp-visual .jar-photo{filter:drop-shadow(0 1px 1px rgba(13,28,15,.12));}
.sp-visual .jar{fill:none;stroke:var(--gold);stroke-width:1.4;overflow:visible;}
.size-picker button:hover .jar-photo,.size-picker button.on .jar-photo{transform:translateY(-3px);}
.size-picker button.on .jar{fill:rgba(193,164,94,.25);}
.sp-size{font-size:var(--fs-body);font-weight:600;color:var(--green);}
.sp-price{font-size:12px;color:var(--muted);white-space:nowrap;}
.buy-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:28px 0 16px;}
.price-big{font-size:24px;font-weight:600;color:var(--clay);line-height:1.2;}
.price-unit{font-size:var(--fs-meta);color:var(--muted);}
.buy-actions{display:flex;gap:12px;}
.buy-actions .btn-add{flex:1;}
.qty{display:flex;align-items:center;flex:0 0 auto;height:var(--h-btn);border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;}
.qty button{width:40px;height:100%;border:0;background:none;font-size:18px;color:var(--green);cursor:pointer;}
.qty input{width:40px;text-align:center;border:0;background:transparent;font:inherit;font-size:var(--fs-lead);color:var(--ink);-moz-appearance:textfield;appearance:textfield;}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.buy-info>.info-list{margin-top:32px;padding-top:24px;border-top:1px solid var(--hairline);}

/* ---------- 送禮：送禮對象篩選＋商品卡 ---------- */
.gift-finder{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:-16px 0 40px;}
.filter-label{font-size:var(--fs-meta);color:var(--muted);margin-right:8px;}
.gift-finder button{height:36px;padding:0 16px;border:1px solid var(--hairline);border-radius:18px;background:transparent;font:inherit;font-size:var(--fs-meta);color:var(--green);cursor:pointer;transition:.25s;}
.gift-finder button:hover{border-color:var(--gold);}
.gift-finder button[aria-pressed="true"]{background:#fff;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);}
.p-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;}
.p-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 30px rgba(13,28,15,.05);transition:opacity .3s,box-shadow .3s;}
.p-card .product-img{height:280px;}
.p-body{flex:1;display:flex;flex-direction:column;padding:var(--pad-card);}
.p-name{font-size:var(--fs-h3);color:var(--green);line-height:1.3;}
.p-spec{font-size:var(--fs-meta);color:var(--muted);letter-spacing:.04em;margin:4px 0 14px;}
.p-desc{font-size:var(--fs-lead);color:var(--ink);margin-bottom:8px;}
.p-meta{font-size:var(--fs-meta);color:var(--muted);}
.p-text{margin-bottom:24px;}
.p-buy{margin-top:auto;padding-top:20px;border-top:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;gap:16px;}
.p-price{font-size:24px;font-weight:600;color:var(--clay);}
.p-buy .btn-add{min-height:var(--h-btn);}
body.gf-active .gift-item:not(.match){opacity:.35;}
body.gf-active .gift-item.match{box-shadow:0 0 0 1px var(--gold),0 12px 32px rgba(13,28,15,.10);}

/* ---------- 產品標示（每個品項一份，預設收合） ---------- */
.spec{margin-top:16px;border-top:1px solid var(--hairline);}
.spec>summary{display:flex;justify-content:space-between;align-items:center;padding:14px 0 2px;list-style:none;cursor:pointer;
  font-size:var(--fs-meta);color:var(--green);font-weight:500;letter-spacing:.06em;}
.spec>summary::-webkit-details-marker{display:none;}
.spec>summary::after{content:'＋';color:var(--gold);transition:transform .25s;}
.spec[open]>summary::after{transform:rotate(45deg);}
.spec-body{display:grid;gap:20px;padding-top:16px;}
.buy-info .spec .info-list{margin-top:0;padding-top:0;border-top:0;}
/* 禮盒卡：標示列貼齊購買列上方，各卡的兩條線才會對齊（多的空白留在文字下方） */
.p-card .spec{margin:auto 0 0;}
.p-card .spec>summary{padding:14px 0;}
.p-card .spec + .p-buy{margin-top:0;}
.nutri{width:100%;border-collapse:collapse;font-size:var(--fs-meta);border:1.5px solid var(--green);}
.nutri th,.nutri td{padding:6px 12px;border-top:1px solid rgba(13,28,15,.15);text-align:right;}
.nutri th:first-child{text-align:left;font-weight:500;white-space:pre;}
.nutri tr:first-child td{text-align:left;line-height:1.7;}
.nutri tr:first-child b{color:var(--green);font-weight:600;}
.spec-note{font-size:12px;color:var(--muted);margin-top:8px;}

/* ---------- 訂購清單抽屜 ---------- */
body.cart-lock{overflow:hidden;}
.cart-scrim{position:fixed;inset:0;z-index:99;background:rgba(13,28,15,.45);opacity:0;transition:opacity .3s;}
.cart-scrim.open{opacity:1;}
.cart{position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(420px,100vw);display:flex;flex-direction:column;background:var(--cream);
  box-shadow:-12px 0 40px rgba(0,0,0,.16);transform:translateX(100%);transition:transform .3s ease;}
.cart.open{transform:none;}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 16px 24px;border-bottom:1px solid var(--hairline);}
.cart-head h3{font-size:20px;color:var(--green);}
.cart-close{width:40px;height:40px;border:0;background:none;font-size:28px;line-height:1;color:var(--green);cursor:pointer;}
.cart-list{list-style:none;flex:1;overflow:auto;padding:0 24px;}
.cart-list li{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(193,164,94,.25);}
.ci-img{width:56px;height:56px;border-radius:var(--radius);background:var(--paper) center/contain no-repeat;}
.ci-main b{display:block;font-size:var(--fs-body);color:var(--green);font-weight:600;}
.ci-main small{display:block;font-size:12px;color:var(--muted);}
.ci-qty{display:inline-flex;align-items:center;margin-top:8px;border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;}
.ci-qty button{width:32px;height:32px;border:0;background:none;color:var(--green);font-size:15px;cursor:pointer;}
.ci-qty span{min-width:24px;text-align:center;font-size:var(--fs-meta);}
.ci-side{text-align:right;}
.ci-sum{display:block;font-size:var(--fs-body);font-weight:600;color:var(--clay);}
.ci-del{margin-top:8px;border:0;background:none;font:inherit;font-size:12px;color:var(--muted);text-decoration:underline;cursor:pointer;}
.cart-empty{padding:48px 28px;text-align:center;font-size:var(--fs-body);color:var(--muted);}
.cart-foot{padding:20px 24px 24px;border-top:1px solid var(--hairline);background:var(--paper);}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-body);color:var(--green);}
.cart-total b{font-size:22px;font-weight:600;color:var(--clay);}
.cart-note{font-size:12px;color:var(--muted);margin:8px 0 16px;line-height:1.7;}
.cart-foot .btn-add{width:100%;}
.cart-foot .btn-add+.btn-add{margin-top:8px;}
.cart-foot [hidden]{display:none!important;}
.cart-foot .cart-note+.btn-add{margin-top:0;}

/* ---------- 加入後的提示 ---------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:98;transform:translate(-50%,16px);opacity:0;transition:.3s;
  max-width:calc(100vw - 32px);padding:12px 20px;border-radius:var(--radius);background:var(--green);color:var(--ivory);font-size:var(--fs-meta);box-shadow:0 10px 30px rgba(13,28,15,.3);}
.toast.show{opacity:1;transform:translate(-50%,0);}
.toast button{border:0;background:none;font:inherit;color:var(--amber);text-decoration:underline;cursor:pointer;}

/* ---------- 手機 ---------- */
@media(max-width:880px){
  .page-products{--fs-h2:26px;--fs-h3:22px;--pad-section:64px;--pad-card:22px;}
  .page-products .lead{margin-bottom:32px;}
  .page-products .anchor{scroll-margin-top:144px;}
  .sub-nav{top:80px;}
  .sub-nav-in{height:52px;}
  .sub-links{gap:20px;}
  .sub-links a{font-size:var(--fs-meta);padding:15px 0 13px;}
  .buy{grid-template-columns:1fr;gap:28px;}
  .buy-media{aspect-ratio:1/1;}
  .buy-desc{margin-bottom:24px;}
  .sp-visual{height:88px;}
  .sp-size{font-size:var(--fs-meta);}
  .sp-price{font-size:11px;}
  .gift-finder{margin:-8px 0 32px;}
  .p-grid{grid-template-columns:1fr;gap:24px;}
  .p-card .product-img{height:220px;}
  .p-buy .btn-add{padding:0 18px;}
}
@media(max-width:480px){
  .sub-links{gap:18px;}
  .buy-jar{max-height:min(66%,300px);}
}
/* 瓶型名稱與說明（依 DM） */
.sp-type{font-size:12px;color:var(--green);letter-spacing:.06em;}
.size-desc{font-size:var(--fs-meta);color:var(--muted);line-height:1.8;margin:-4px 0 18px;}
.size-desc b{display:block;color:var(--green);font-weight:600;letter-spacing:.04em;margin-bottom:2px;}
.size-picker{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr;}