/*
 * Product detail: preserve the storefront's yellow accent and original product assets.
 * Shape scale: media 16px, controls 8px, status/tag labels full pill.
 * Layer scale: shared header 50, mobile purchase bar 40, shared dialogs above 50.
 * Light surfaces are intentional, as requested for this redesign.
 */
.commidity-detail {
    --cd-bg: #fafbfc;
    --cd-surface: #fefefe;
    --cd-tint: #f0f2f4;
    --cd-ink: #252a30;
    --cd-muted: #59616c;
    --cd-line: #dce1e6;
    --cd-accent: #f2cc45;
    --cd-accent-ink: #51410c;
    --cd-accent-soft: #fff8dc;
    color-scheme: light;
    background: var(--cd-bg);
    color: var(--cd-ink);
    font-family: "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
    padding: 0 0 80px;
}
.commidity-detail [v-cloak] { display: none; }
.commidity-detail .cd-container { max-width: 1180px; padding-inline: 32px; }
.cd-page-nav { display: flex; align-items: center; min-height: 56px; }
.cd-breadcrumb { display: flex; align-items: center; gap: 12px; color: var(--cd-muted); font-size: 13px; }
.cd-breadcrumb a { color: var(--cd-muted); text-decoration: none; }
.cd-breadcrumb a:hover { color: var(--cd-ink); text-decoration: underline; text-underline-offset: 4px; }
.cd-breadcrumb [aria-current] { color: var(--cd-ink); }
.cd-product, .cd-loading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.cd-gallery, .cd-info { min-width: 0; }
.cd-main-image { height: clamp(360px, 37vw, 480px); padding: 24px; display: block; overflow: hidden; border: 1px solid var(--cd-line); border-radius: 16px; background: var(--cd-surface); }
.cd-main-image > img { width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: contain; }
.cd-image-empty { height: 100%; min-height: 240px; display: grid; align-content: center; gap: 8px; text-align: center; color: var(--cd-muted); }
.cd-image-empty small { font-size: 13px; }
.cd-thumbnails { display: flex; gap: 12px; overflow-x: auto; margin-top: 16px; padding: 3px; scroll-snap-type: x proximity; }
.cd-thumbnail { flex: 0 0 76px; height: 76px; padding: 5px; border: 1px solid var(--cd-line); border-radius: 8px; background: var(--cd-surface); scroll-snap-align: start; }
.cd-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.cd-thumbnail span { color: var(--cd-muted); font-size: 11px; }
.cd-thumbnail.is-selected { border: 2px solid var(--cd-accent-ink); background: var(--cd-accent-soft); }
.cd-thumbnail:hover { border-color: var(--cd-accent-ink); }
.cd-info h1 { font: 650 clamp(26px, 2.3vw, 30px)/1.4 "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; letter-spacing: -.035em; margin: 0; overflow-wrap: anywhere; }
.cd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cd-tags span { padding: 4px 12px; border-radius: 999px; background: var(--cd-tint); color: var(--cd-muted); font-size: 12px; line-height: 1.5; }
.cd-facts { margin: 16px 0; display: grid; gap: 6px; font-size: 13px; line-height: 1.5; }
.cd-facts > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
.cd-facts dt { color: var(--cd-muted); font-weight: 400; }
.cd-facts dd { margin: 0; overflow-wrap: anywhere; }
.cd-purchase { padding-top: 16px; border-top: 1px solid var(--cd-line); }
.cd-specs { padding: 0; margin: 0; border: 0; min-width: 0; }
.cd-specs legend { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; margin-bottom: 10px; float: none; width: auto; }
.cd-specs legend span { color: var(--cd-muted); font-weight: 400; font-size: 13px; }
.cd-spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cd-spec { min-height: 42px; padding: 9px 12px; border: 1px solid var(--cd-line); border-radius: 8px; background: var(--cd-surface); color: var(--cd-ink); font-size: 14px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; overflow-wrap: anywhere; }
.cd-spec:hover { border-color: var(--cd-accent-ink); }
.cd-spec.is-selected { border: 2px solid var(--cd-accent-ink); padding: 8px 11px; background: var(--cd-accent-soft); color: var(--cd-accent-ink); font-weight: 650; }
.cd-spec.is-sold-out { color: var(--cd-muted); }
.cd-spec small { font-size: 11px; font-weight: 400; }
.cd-price-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.cd-price-label { color: var(--cd-muted); font-size: 12px; margin-bottom: 2px; }
.cd-price { font-size: 32px; font-weight: 650; letter-spacing: -.035em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.cd-price > span { font-size: 16px; font-weight: 500; letter-spacing: 0; }
.cd-original { color: var(--cd-muted); font-size: 12px; text-decoration: line-through; margin-top: 4px; }
.cd-stock { color: var(--cd-accent-ink); background: var(--cd-accent-soft); border-radius: 999px; font-size: 12px; padding: 5px 12px; white-space: nowrap; }
.cd-stock.is-sold-out { color: var(--cd-muted); background: var(--cd-tint); }
.cd-order-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-top: 16px; }
.cd-quantity { display: grid; gap: 6px; line-height: 1.5; }
.cd-quantity label { color: var(--cd-ink); font-size: 13px; }
.cd-quantity select { width: 112px; height: 44px; padding: 8px 12px; border-radius: 8px; border: 1px solid #a5aeb8; background: var(--cd-surface); color: var(--cd-ink); font: inherit; }
.cd-total { display: flex; gap: 14px; align-items: baseline; font-size: 13px; padding-bottom: 10px; }
.cd-total span { color: var(--cd-muted); }
.cd-total strong { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cd-helper, .cd-muted { color: var(--cd-muted); font-size: 12px; line-height: 1.6; }
.cd-helper { margin: 6px 0 10px; }
.cd-button { min-height: 50px; padding: 13px 24px; border: 1px solid var(--cd-accent); border-radius: 8px; background: var(--cd-accent); color: var(--cd-ink); font-size: 15px; font-weight: 650; white-space: nowrap; }
.cd-button:hover:not(:disabled) { background: #e8be2c; border-color: #e8be2c; color: var(--cd-ink); }
.cd-button:disabled { background: var(--cd-tint); color: var(--cd-muted); border-color: var(--cd-line); cursor: not-allowed; }
.cd-add { width: 100%; }
.cd-mobile-total { display: none; }
.cd-cart-error { font-size: 14px; padding: 12px 16px; background: var(--cd-accent-soft); border-left: 3px solid var(--cd-accent-ink); color: var(--cd-accent-ink); line-height: 1.7; }
.cd-inline-error { padding: 16px; margin-bottom: 20px; background: var(--cd-accent-soft); border-radius: 8px; font-size: 14px; color: var(--cd-accent-ink); }
.cd-inline-error p { margin: 0 0 8px; }
.cd-inline-error button { text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.cd-details { margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--cd-line); }
.cd-details h2 { margin: 0 0 24px; font: 650 24px/1.4 "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; letter-spacing: -.025em; }
.cd-tabs { display: flex; gap: 32px; border-bottom: 1px solid var(--cd-line); margin-bottom: 32px; overflow-x: auto; }
.cd-tabs button { position: relative; padding: 0 0 16px; color: var(--cd-muted); font-size: 15px; white-space: nowrap; min-height: 44px; }
.cd-tabs button.is-active { color: var(--cd-ink); font-weight: 650; }
.cd-tabs button.is-active::after { content: ""; position: absolute; height: 3px; inset: auto 0 0; background: var(--cd-accent); }
.cd-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; align-items: start; }
.cd-panel { min-width: 0; scroll-margin-top: 100px; }
.cd-description-image { width: 100%; height: auto; border-radius: 16px; margin-bottom: 24px; }
.cd-copy { display: grid; gap: 20px; }
.cd-copy p { margin: 0; color: var(--cd-ink); font-size: 15px; line-height: 1.9; white-space: pre-line; overflow-wrap: anywhere; }
.cd-panel-empty { padding: 32px; border-radius: 16px; background: var(--cd-tint); color: var(--cd-muted); font-size: 14px; line-height: 1.8; }
.cd-reminder { overflow: hidden; border-radius: 16px; background: var(--cd-tint); }
.cd-reminder > img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.cd-reminder > div { padding: 24px; }
.cd-reminder h3 { font-size: 16px; color: var(--cd-ink); margin-bottom: 12px; }
.cd-reminder p { color: var(--cd-muted); font-size: 13px; line-height: 1.9; margin-bottom: 24px; }
.cd-reminder a { font-size: 13px; color: var(--cd-ink); text-decoration: underline; text-underline-offset: 5px; }
.cd-reminder a span { margin-left: 8px; }
.cd-state { padding: 80px 24px; display: grid; justify-items: center; gap: 20px; text-align: center; }
.cd-state h1 { font-size: 26px; color: var(--cd-ink); }
.cd-state p { color: var(--cd-muted); margin: 0; }
.cd-state > a { color: var(--cd-muted); font-size: 14px; text-decoration: underline; }
.cd-loading-info { padding-top: 12px; }
.cd-loading-info p { color: var(--cd-muted); font-size: 14px; }
.cd-skeleton { background: #e7ebef; border-radius: 8px; }
.cd-skeleton--image { height: clamp(360px, 37vw, 480px); border-radius: 16px; }
.cd-skeleton--title { height: 70px; margin-bottom: 24px; }
.cd-skeleton--line { height: 90px; width: 75%; margin-bottom: 24px; }
.cd-skeleton--options { height: 160px; margin-bottom: 24px; }
.cd-skeleton--button { height: 50px; }
/* Keep feedback quiet; no automatic animations on a purchase surface. */
.commidity-detail button { transition: transform .15s ease; }
.commidity-detail button:active:not(:disabled) { transform: scale(.98); }
.commidity-detail :focus-visible { outline: 2px solid var(--cd-accent-ink); outline-offset: 4px; }
/* The shared shell follows the same accessible accent on this page. */
body:has(.commidity-detail) #loginModal.front-login-modal { --login-modal-accent: #51410c; }
body:has(.commidity-detail) #loginModal .front-login-modal__submit { background: #f2cc45 !important; color: #252a30 !important; }
body:has(.commidity-detail) #loginModal .front-login-modal__submit:hover { background: #e8be2c !important; }
body:has(.commidity-detail) #drawer[aria-hidden="true"] { visibility: hidden; }
@media (min-width: 768px) and (max-width: 1199px) {
    .commidity-detail .cd-container { padding-right: 80px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .cd-product, .cd-loading { gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cd-main-image { padding: 16px; }
    .cd-detail-layout { grid-template-columns: minmax(0, 1fr) 230px; gap: 32px; }
    .cd-total { flex-direction: column; gap: 2px; }
}
@media (max-width: 767px) {
    .commidity-detail { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
    .commidity-detail .cd-container { width: 100%; padding-inline: 20px; }
    .cd-page-nav { min-height: 60px; }
    .cd-product, .cd-loading { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .cd-main-image { height: auto; aspect-ratio: 1; padding: 20px; }
    .cd-skeleton--image { height: auto; aspect-ratio: 1; }
    .cd-main-image > img { max-height: none; }
    .cd-thumbnails { margin-top: 12px; }
    .cd-thumbnail { flex-basis: 64px; height: 64px; }
    .cd-info h1 { font-size: 26px; line-height: 1.45; }
    .cd-facts { margin: 20px 0; }
    .cd-purchase { padding-top: 20px; }
    .cd-buy-bar { position: fixed; inset: auto 0 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 1fr); align-items: center; gap: 16px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cd-line); background: var(--cd-surface); box-shadow: 0 -6px 24px rgb(37 42 48 / 5%); }
    .cd-mobile-total { display: grid; gap: 2px; }
    .cd-mobile-total span { font-size: 11px; color: var(--cd-muted); }
    .cd-mobile-total strong { font-size: 18px; color: var(--cd-ink); font-variant-numeric: tabular-nums; }
    .cd-buy-bar .cd-add { grid-column: 2; }
    .cd-buy-bar .cd-cart-error { grid-column: 1 / -1; margin: 0; padding: 8px 12px; font-size: 13px; }
    .cd-details { margin-top: 36px; padding-top: 28px; }
    .cd-details h2 { font-size: 22px; margin-bottom: 20px; }
    .cd-tabs { gap: 24px; margin-bottom: 24px; }
    .cd-tabs button { font-size: 14px; }
    .cd-detail-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .cd-copy p { font-size: 14px; }
    .cd-reminder { display: grid; grid-template-columns: 100px minmax(0, 1fr); }
    .cd-reminder > img { height: 100%; aspect-ratio: auto; }
    .cd-reminder > div { padding: 20px; }
    .cd-reminder p { margin-bottom: 16px; }
    .cd-panel-empty { padding: 24px; }
    .cd-state { padding: 48px 0; }
    /* Keep contact links accessible at the footer without covering product controls. */
    body:has(.commidity-detail) .social-floating { position: static; flex-direction: row; justify-content: flex-end; padding: 20px; margin-bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) {
    .commidity-detail button { transition: none; }
    .commidity-detail button:active:not(:disabled) { transform: none; }
}