/* ==============================================
   public/front/assets/css/shop.css
   官網交易頁面：購物車、結帳、結帳結果、訂單明細（訪客訂單頁、會員中心我的訂單）、退貨申請
   沿用 base.css 的色票與元件（.hy-btn、.hy-form、.hy-input、.hy-panel、.hy-alert），這裡只放這幾頁自己的版面
   各頁用 @push('styles') 載入（見 front.layouts.app 檔頭的約定）
   ============================================== */

/* ── 兩欄版面（左表單／清單、右摘要） ── */
.hy-shop { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.hy-shop-aside { position: sticky; top: 120px; }
.hy-shop-section { background: var(--hy-surface); border: 1px solid var(--hy-line-2); padding: 32px; margin-bottom: 24px; }
.hy-shop-section > h2 { font-size: 18px; letter-spacing: .1em; margin-bottom: 20px; display: flex; align-items: baseline; gap: 12px; }
.hy-shop-section > h2 .hy-eyebrow { font-size: 12px; }

/* ── 購物車明細列 ── */
.hy-cart-list { display: grid; gap: 0; }
.hy-cart-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--hy-line-2); }
.hy-cart-line:first-child { padding-top: 0; }
.hy-cart-line .thumb { width: 96px; aspect-ratio: 4 / 5; background: var(--hy-bg-3); overflow: hidden; display: block; }
.hy-cart-line .thumb img { width: 100%; height: 100%; object-fit: cover; }
.hy-cart-line .thumb .placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--hy-serif); font-size: 32px; color: var(--hy-gold-soft); }
.hy-cart-line .name { font-family: var(--hy-serif); font-size: 17px; text-decoration: none; overflow-wrap: anywhere; }
.hy-cart-line .name:hover { color: var(--hy-gold-2); }
.hy-cart-line .jp { font-size: 11px; color: var(--hy-ink-3); letter-spacing: .15em; margin-top: 2px; }
.hy-cart-line .unit { font-size: 13px; color: var(--hy-ink-3); margin-top: 6px; }
.hy-cart-line .warn { font-size: 12px; color: var(--hy-danger); margin-top: 6px; }
.hy-cart-line .controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.hy-cart-line .hy-qty { width: 124px; height: 40px; }
.hy-cart-line .remove { background: none; border: 0; padding: 0; color: var(--hy-ink-3); font-size: 13px; cursor: pointer; text-decoration: underline; }
.hy-cart-line .remove:hover { color: var(--hy-danger); }
.hy-cart-line .total { font-family: var(--hy-serif); font-size: 17px; text-align: right; white-space: nowrap; }

/* ── 金額摘要 ── */
.hy-summary { background: var(--hy-surface); border: 1px solid var(--hy-line-2); padding: 32px; }
.hy-summary h2 { font-size: 18px; letter-spacing: .1em; margin-bottom: 20px; }
.hy-summary dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; margin: 0; font-size: 14px; }
.hy-summary dt { color: var(--hy-ink-2); }
.hy-summary dd { margin: 0; text-align: right; white-space: nowrap; }
.hy-summary dd.minus { color: var(--hy-danger); }
.hy-summary .grand { border-top: 1px solid var(--hy-line); padding-top: 14px; margin-top: 4px; font-family: var(--hy-serif); font-size: 18px; color: var(--hy-ink); }
.hy-summary .note { font-size: 12px; color: var(--hy-ink-3); margin-top: 14px; }
.hy-summary .hy-btn { margin-top: 24px; }
.hy-free-ship { margin: 18px 0 0; font-size: 13px; color: var(--hy-ink-2); }
.hy-free-ship .bar { height: 3px; background: var(--hy-line-2); margin-top: 8px; position: relative; overflow: hidden; }
.hy-free-ship .bar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--hy-gold-2); transition: width .4s var(--hy-ease); }

/* 結帳頁右側的商品小清單 */
.hy-mini-items { display: grid; gap: 14px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--hy-line-2); }
.hy-mini-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; }
.hy-mini-item .thumb { width: 56px; height: 56px; background: var(--hy-bg-3); overflow: hidden; position: relative; }
.hy-mini-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.hy-mini-item .qty { position: absolute; top: 2px; right: 2px; background: var(--hy-ink); color: var(--hy-bg); font-size: 10px; min-width: 18px; height: 18px; padding: 0 4px; display: flex; align-items: center; justify-content: center; }
.hy-mini-item .name { font-family: var(--hy-serif); overflow-wrap: anywhere; }
.hy-mini-item .price { white-space: nowrap; }

/* ── 結帳表單 ── */
.hy-choice-list { display: grid; gap: 10px; }
.hy-choice { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--hy-line); background: var(--hy-bg); cursor: pointer; font-size: 14px; }
.hy-choice input { accent-color: var(--hy-gold-2); width: 16px; height: 16px; flex-shrink: 0; }
.hy-choice.active { border-color: var(--hy-gold-2); background: var(--hy-surface); }
.hy-choice .sub { color: var(--hy-ink-3); font-size: 12px; margin-left: auto; text-align: right; }
.hy-coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.hy-coupon .hy-btn { min-height: 48px; padding: 0 20px; letter-spacing: .15em; }
.hy-coupon-applied { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed var(--hy-gold-2); font-size: 14px; }
.hy-coupon-applied button { background: none; border: 0; color: var(--hy-ink-3); text-decoration: underline; cursor: pointer; font-size: 13px; }
.hy-guest-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
[hidden] { display: none !important; }

/* ── 結果頁 ── */
.hy-result { max-width: 760px; margin: 0 auto; }
.hy-result-head { text-align: center; margin-bottom: 40px; }
.hy-result-head .icon { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 32px; background: var(--hy-bg-2); color: var(--hy-gold-2); }
.hy-result-head .icon.fail { color: var(--hy-danger); }
.hy-result-head h1 { font-size: 34px; margin: 10px 0 12px; }
.hy-result-head p { color: var(--hy-ink-3); font-family: var(--hy-serif); }
.hy-pay-info { border: 1px solid var(--hy-gold-soft); background: var(--hy-surface); padding: 24px 28px; margin-bottom: 24px; }
.hy-pay-info h2 { font-size: 17px; letter-spacing: .1em; margin-bottom: 14px; }
.hy-pay-info dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; }
.hy-pay-info dt { color: var(--hy-ink-3); }
.hy-pay-info dd { margin: 0; overflow-wrap: anywhere; }
.hy-pay-info .big { font-family: var(--hy-mono); font-size: 18px; color: var(--hy-gold-2); letter-spacing: .06em; }
.hy-result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

/* ── 訂單明細（訪客訂單、會員訂單、結果頁共用） ── */
.hy-order-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0; font-size: 14px; }
.hy-order-meta dt { color: var(--hy-ink-3); font-size: 12px; letter-spacing: .1em; }
.hy-order-meta dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.hy-order-meta .full { grid-column: 1 / -1; }
.hy-status { display: inline-block; padding: 3px 10px; font-size: 12px; letter-spacing: .1em; border: 1px solid var(--hy-line); }
.hy-status.pending { border-color: var(--hy-gold-soft); color: var(--hy-gold-2); }
.hy-status.completed { border-color: var(--hy-success); color: var(--hy-success); }
.hy-status.shipped { border-color: var(--hy-gold-2); color: var(--hy-gold-2); background: var(--hy-bg-2); }
.hy-status.cancelled { border-color: var(--hy-danger); color: var(--hy-danger); }
.hy-order-items { display: grid; }
.hy-order-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hy-line-2); font-size: 14px; }
.hy-order-item .thumb { width: 64px; height: 64px; background: var(--hy-bg-3); overflow: hidden; }
.hy-order-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.hy-order-item .name { font-family: var(--hy-serif); overflow-wrap: anywhere; }
.hy-order-item .meta { color: var(--hy-ink-3); font-size: 12px; margin-top: 2px; }
.hy-order-item .price { white-space: nowrap; text-align: right; }

/* 會員中心訂單列表 */
.hy-order-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.hy-order-card { background: var(--hy-surface); border: 1px solid var(--hy-line-2); padding: 22px 24px; margin-bottom: 16px; }
.hy-order-card .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--hy-line-2); }
.hy-order-card .no { font-family: var(--hy-mono); font-size: 13px; }
.hy-order-card .date { color: var(--hy-ink-3); font-size: 12px; margin-left: 10px; }
.hy-order-card .bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; }
.hy-order-card .amount { font-family: var(--hy-serif); font-size: 17px; }
.hy-order-card .statuses { display: flex; gap: 6px; flex-wrap: wrap; }

/* 退貨申請 */
.hy-return-item { border: 1px solid var(--hy-line-2); background: var(--hy-surface); padding: 22px 24px; margin-bottom: 16px; }
.hy-return-item .top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hy-return-item .reason { color: var(--hy-ink-2); font-size: 14px; margin: 10px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.hy-return-item .reply { margin-top: 12px; padding: 12px 14px; background: var(--hy-bg-2); font-size: 13px; }

/* 訂閱（規格 12-D）：方案卡沿用商品卡 hy-pcard，會員中心沿用訂單卡 hy-order-card */
.hy-sub-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hy-plan-card { display: flex; flex-direction: column; }
.hy-plan-card .price small { font-size: 12px; color: var(--hy-ink-3); }
.hy-plan-card > .hy-btn { margin-top: auto; }
.hy-plan-save { font-size: 13px; color: var(--hy-gold-2); margin-top: 6px; }
.hy-plan-desc { font-size: 13px; color: var(--hy-ink-2); white-space: pre-line; margin: 10px 0 16px; overflow-wrap: anywhere; }
.hy-plan-note { text-align: center; font-size: 13px; color: var(--hy-ink-3); margin-top: 32px; }
.hy-plan-pack { font-size: 12px; color: var(--hy-ink-3); font-family: var(--hy-sans, inherit); }
.hy-sub-change { margin-top: 14px; padding: 14px 16px; background: var(--hy-bg-2); }
.hy-sub-change .hint { font-size: 13px; color: var(--hy-ink-3); margin-bottom: 8px; }
.hy-sub-change .hint:last-child { margin-bottom: 0; }
.hy-sub-change form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 8px; }
.hy-sub-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.hy-sub-actions form { margin: 0; }

@media (max-width: 990px) {
    .hy-sub-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hy-shop { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .hy-shop-aside { position: static; }
}
@media (max-width: 560px) {
    .hy-shop-section, .hy-summary { padding: 24px 18px; }
    .hy-cart-line { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
    .hy-cart-line .thumb { width: 72px; }
    .hy-cart-line .total { grid-column: 2; text-align: left; }
    .hy-order-meta { grid-template-columns: minmax(0, 1fr); }
    .hy-pay-info dl { grid-template-columns: minmax(0, 1fr); }
    .hy-coupon { grid-template-columns: minmax(0, 1fr); }
    .hy-sub-plans { grid-template-columns: minmax(0, 1fr); }
    .hy-sub-change form { grid-template-columns: minmax(0, 1fr); }
    .hy-sub-actions { justify-content: flex-start; }
}