/* 哩亞小舖㊣ — style.css V1.4 */
/* 01. 基礎 */
:root {
  font-family: system-ui, -apple-system, 'Noto Sans TC', sans-serif;
  color: #222;
  background: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; background: #222; color: #fff; padding: 12px 19px; border-radius: 9px; }
button:disabled { opacity: .4; cursor: not-allowed; }
.outline { background: #fff; border: 1px solid #ddd; color: #222; }
.wrap { max-width: 1080px; margin: auto; padding: 0 20px; }
.hidden { display: none !important; }
.muted { color: #777; }
small { color: #777; }
.tiny { font-size: 12px; }

/* 02. 導覽與首頁 */
header { border-bottom: 1px solid #eee; position: sticky; top: 0; background: #fffd; backdrop-filter: blur(12px); z-index: 10; }
header .wrap { height: 72px; display: flex; align-items: center; justify-content: space-between; }
h1 { font-size: clamp(30px, 5vw, 54px); letter-spacing: -1px; }
h2 { font-size: 27px; }
.hero { background: #f7f7f5; padding: 70px 0; text-align: center; }
.section { padding: 55px 0; }

/* 03. 商品與結帳 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.product, .panel, .review { border: 1px solid #ececec; border-radius: 14px; padding: 18px; background: #fff; }
.product img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fafafa; border-radius: 9px; }
.placeholder { aspect-ratio: 1; display: grid; place-items: center; background: #f5f5f5; color: #aaa; border-radius: 9px; }
.price { font-weight: 700; font-size: 21px; }
.cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 25px; }
input, textarea, select { border: 1px solid #ddd; padding: 11px; border-radius: 8px; width: 100%; background: #fff; }
label { display: block; margin: 12px 0 6px; font-size: 14px; }
textarea { min-height: 85px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.space { justify-content: space-between; }
.notice { padding: 12px; border-radius: 8px; background: #f3f3f3; margin: 12px 0; }
.qty { width: 70px; }

/* 04. 評價與跑馬燈 */
.marquee { overflow: hidden; border-block: 1px solid #eee; padding: 18px 0; background: #fafafa; }
.track { display: flex; width: max-content; gap: 18px; animation: scroll var(--speed, 32s) linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.review { width: 310px; flex: none; }
.stars { color: #b68a38; }
@keyframes scroll { to { transform: translateX(-50%); } }
footer { padding: 30px; text-align: center; color: #888; border-top: 1px solid #eee; }

/* 05. 後台 */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0; }
.tabs button { background: #eee; color: #222; }
.tabs button.active { background: #222; color: #fff; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.listrow { border-bottom: 1px solid #eee; padding: 14px 0; }
.pill { border-radius: 30px; padding: 4px 10px; background: #eee; font-size: 12px; }
#toast { position: fixed; bottom: 20px; right: 20px; background: #222; color: #fff; padding: 14px; border-radius: 9px; z-index: 99; display: none; }

/* 06. 頁尾 LINE QR Code */
.line-section { text-align: center; padding: 48px 20px 55px; }
.line-section img { max-width: 220px; width: 70vw; height: auto; aspect-ratio: 1; object-fit: contain; border: 1px solid #eee; border-radius: 12px; }
.line-button { display: inline-block; text-decoration: none; background: #06c755; color: #fff; padding: 12px 24px; border-radius: 24px; font-weight: 700; }
.line-button[hidden] { display: none !important; }

/* 07. LINE 客服懸浮按鈕：桌面與手機均為 84px */
.line-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 84px;
  height: 84px;
  min-width: 84px;
  min-height: 84px;
  padding: 8px;
  border-radius: 50%;
  background: #06c755;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
  overflow: visible;
  box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 0 18px rgba(6,199,85,.2);
  animation: liya-line-breathe 2.8s ease-in-out infinite;
  transition: filter .2s ease;
}
.line-float span { font-size: 12px; }
.line-float img, .line-float svg { width: 52px; height: 52px; max-width: 100%; object-fit: contain; }
.line-float:hover { filter: brightness(1.04); }
.line-float:focus-visible { outline: 3px solid #222; outline-offset: 4px; }
.line-float[hidden] { display: none !important; }

/* 右上角固定裝飾數字 99，並非真實未讀數 */
.line-float::after {
  content: '99';
  position: absolute;
  top: -5px;
  right: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #ff3040;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
  pointer-events: none;
}
@keyframes liya-line-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 0 12px rgba(6,199,85,.15); }
  50% { transform: scale(1.055); box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 0 28px rgba(6,199,85,.3); }
}

/* 08. 手機排版 */
@media (max-width: 680px) {
  .cols { grid-template-columns: 1fr; }
  .hero { padding: 45px 0; }
  .section { padding: 34px 0; }
  header .wrap { height: 62px; }
  .product { padding: 12px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product h3 { font-size: 15px; }
  .product button { width: 100%; padding: 10px 5px; }
  .line-float { right: 18px; bottom: 22px; }
}

/* 09. 減少動態效果偏好 */
@media (prefers-reduced-motion: reduce) {
  .line-float, .track { animation: none; }
}

/* V2 口味與組合選購 */
.variant-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:8px;margin:12px 0}
.variant-picker label{margin:0;border:1px solid #e4e4e4;padding:10px;border-radius:10px;display:flex;align-items:center;gap:6px;font-size:13px}
.variant-picker input{width:auto}
.bundle-panel{border:1px solid #d8eadc;border-radius:14px;background:#f7fcf8;padding:14px;margin-top:12px}
.bundle-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:9px 0}
.bundle-row input{width:72px}
.bundle-row select{max-width:175px}
.bundle-panel .muted{font-size:13px}
.product .buy-choice{margin:12px 0}
.product .buy-choice button{padding:9px 12px;margin:3px}
.product .buy-choice button.selected{background:#06a74a}
.variant-item{padding:12px;border-bottom:1px solid #eee}
@media(max-width:680px){.bundle-row{flex-wrap:wrap}.bundle-row select{max-width:100%}.variant-picker{grid-template-columns:1fr}}
/* LINE 84px */
.line-float{width:84px!important;height:84px!important;right:22px!important;bottom:22px!important;z-index:100!important;overflow:visible!important;background:#06c755!important;box-shadow:0 8px 25px #0003,0 0 18px #06c75530!important;animation:liyaBreath 3s ease-in-out infinite}
.line-float::after{content:'99';position:absolute;right:-5px;top:-5px;width:29px;height:29px;display:grid;place-items:center;background:#f33445;color:#fff;border:3px solid white;border-radius:50%;font-size:13px;font-weight:800;box-sizing:border-box}
@keyframes liyaBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.line-float{animation:none}}

/* V3 訂單明細與下單成功彈窗 */
.order-detail{margin:14px 0;padding:14px;background:#fafafa;border:1px solid #eee;border-radius:12px}.order-detail h4{margin:0 0 12px}.order-item-line{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #e8e8e8;font-size:14px}.order-totals{font-weight:700;text-align:right}.success-dialog{border:1px solid #e8e8e8;border-radius:20px;max-width:min(92vw,460px);width:100%;padding:28px;box-shadow:0 24px 80px #0003}.success-dialog::backdrop{background:rgba(0,0,0,.5)}.success-content{text-align:center}.success-content img{max-width:70%;height:auto;object-fit:contain}.success-message{white-space:pre-line;line-height:1.8}.success-check{margin:auto;background:#06c755;color:white;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:30px}.success-dialog form button{min-width:140px}@media(max-width:680px){.order-item-line{grid-template-columns:1fr auto}.order-item-line strong{grid-column:1/-1}.success-dialog{padding:20px}}

/* V4 single-product landing page: existing products, bundles and checkout preserved */
.hero{background-position:center;background-size:cover;background-repeat:no-repeat;min-height:390px;display:flex;align-items:center;justify-content:center}.hero .wrap{width:100%}.hero.hero-photo{color:#fff;text-shadow:0 2px 10px #0008}.hero.hero-photo .muted,.hero.hero-photo small{color:#fff}.hero.hero-photo a button{box-shadow:0 5px 18px #0004}
#productsGrid{display:grid;grid-template-columns:minmax(0,1fr);max-width:960px;margin:26px auto 0;gap:24px}#productsGrid>.product{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:38px;align-items:start;padding:28px;border-radius:20px;box-shadow:0 10px 36px #00000008}#productsGrid>.product>img,#productsGrid>.product>.placeholder{grid-column:1;grid-row:1 / span 12;width:100%;aspect-ratio:4/5;object-fit:contain;background:#fafafa;border-radius:14px;max-height:560px}#productsGrid>.product>h3,#productsGrid>.product>p,#productsGrid>.product>select,#productsGrid>.product>button,#productsGrid>.product>.price{grid-column:2;min-width:0}#productsGrid>.product>h3{font-size:clamp(24px,2.5vw,34px);line-height:1.35;margin:12px 0 0}#productsGrid>.product>p{line-height:1.85;white-space:pre-line;margin:8px 0 12px}#productsGrid>.product>select{margin:10px 0;width:100%}#productsGrid>.product>button{width:100%;margin-top:10px;min-height:48px}#productsGrid>.product>.outline{background:#fff;color:#222;border:1px solid #ddd}
@media(max-width:720px){.hero{min-height:310px;padding:48px 0}#productsGrid{grid-template-columns:1fr}#productsGrid>.product{display:flex;flex-direction:column;gap:8px;padding:16px}#productsGrid>.product>img,#productsGrid>.product>.placeholder{aspect-ratio:1;width:100%;max-height:none}#productsGrid>.product>h3,#productsGrid>.product>p,#productsGrid>.product>select,#productsGrid>.product>button,#productsGrid>.product>.price{width:100%;margin-top:4px}#productsGrid>.product>h3{font-size:23px}}