/* Trang sản phẩm /san-pham/<slug> và trang "không tìm thấy" do máy chủ dựng (store_pages.py), theo thiết kế "Bàn làm việc" (ADR-0045, Đợt A Task 4):
   màu, phông và khung của thiết kế, cấu trúc giữ nguyên (hình lớn 16:9 bên trái, khung mua bên phải, dải hình phụ, nội dung giới thiệu, hộp phóng to).
   Thay web/stage-product.css. Mọi luật nằm dưới <main class="store-product">. Token ở tokens.css (cỡ chữ nhân --d-text-scale nên nút "Aa" tới được), nút ở public-ui.css. */

/* ---- Khung trang và đường dẫn ---- */
.store-product { box-sizing: border-box; max-width: 1180px; margin: auto; padding: 20px 16px 40px; color: var(--d-ink); font: 400 var(--d-fs-body) / var(--d-lh-body) var(--d-font-sans); }
.store-product .store-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-bottom: 6px; color: var(--d-muted); font: 600 var(--d-fs-caption) / 1.4 var(--d-font-sans); }
.store-product .store-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--d-control-s); color: var(--d-brand-deep); font-weight: 700; }
.store-product .product-detail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 28px; margin: 0; padding: 10px 0 24px; }

/* ---- Hình lớn: khung 16:9 như bìa của thẻ bài, ảnh nằm trọn (không cắt) dù cao, rộng hay hỏng, nên trang không dịch khi ảnh về ---- */
.store-product .product-media { position: relative; align-self: start; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border: 2px solid var(--d-line); border-radius: 26px; background: #FFF4DC; }
.store-product .product-media img, .store-product .product-zoom { display: block; width: 100%; height: 100%; }
.store-product .product-media img { object-fit: contain; }
/* Nhân vật thay ảnh (chưa có ảnh, hoặc ảnh hỏng thì JS thêm lớp này): luôn giữa khung dù nằm trực tiếp trong khung hay trong nút phóng to. */
.store-product .product-media img.is-fallback { position: absolute; left: 50%; top: 50%; width: auto; height: 72%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.store-product .product-zoom { position: relative; padding: 0; border: 0; background: none; cursor: zoom-in; }
/* Giấy nhớ "Phóng to", chỉ khi nút đang bật: máy chủ dựng nút tắt, store-page.js bật nó từ 901px rộng và 590px cao (từ đó hộp phóng to mới lớn hơn hình
   trong trang). Nút tắt (điện thoại, máy tính bảng dọc, cửa sổ thấp, không có JavaScript, ảnh hỏng) không có giấy nhớ và không hứa phóng to. */
.store-product .product-zoom::before { content: "Phóng to"; position: absolute; right: 12px; bottom: 12px; padding: 4px 12px; border-radius: 4px 4px 4px 14px; background: var(--d-sun-tint); color: var(--d-sun-ink);
  font: 700 var(--d-fs-badge) / var(--d-lh-badge) var(--d-font-sans); transform: rotate(-1.5deg); }
/* Khung có overflow:hidden cắt vòng focus ở ngoài: vòng nằm trong khung, mực ngoài, dải trắng, mực trong, để thấy trên ảnh sáng lẫn tối. */
.store-product .product-zoom:focus-visible { outline: 3px solid var(--d-ink); outline-offset: -3px; }
.store-product .product-zoom:focus-visible::after { content: ""; position: absolute; inset: 3px; border: 3px solid #fff; box-shadow: inset 0 0 0 2px var(--d-ink); pointer-events: none; }
.store-product .product-zoom:disabled { cursor: default; opacity: 1; }  /* button:disabled của styles.css làm mờ: đây chỉ là hình, không phải nút hỏng */
.store-product .product-zoom:disabled::before { display: none; }

/* ---- Hình phụ (tối đa 3, do người bán đưa lên HocAI): thêm thông tin, không che thông tin chính. Thứ tự trong trang: hình lớn, khung mua, rồi dải hình phụ; nên trên một
   cột tên và giá ở đúng chỗ của trang không có hình phụ, và trình đọc màn hình đọc bìa, thông tin, rồi hình phụ. has-previews chỉ có khi trang có hình phụ: một cột theo thứ
   tự đó; từ 901px rộng dải nằm ở cột trái ngay dưới hình lớn, khung mua ở cột phải trải hai hàng (hàng hai là 1fr nên khung mua dài không đẩy dải xuống). ---- */
.store-product .product-detail.has-previews { grid-template-columns: 1fr; grid-template-areas: "media" "summary" "gallery"; }
.store-product .has-previews > .product-media { grid-area: media; }
.store-product .has-previews > .product-summary { grid-area: summary; }
.store-product .has-previews > .product-gallery { grid-area: gallery; min-width: 0; }
@media (min-width: 901px) { .store-product .product-detail.has-previews { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "media summary" "gallery summary"; row-gap: 14px; } }
.store-product .product-previews { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
/* Các ô chia đều hàng; một hay hai hình thì mỗi ô không rộng quá nửa hàng. */
.store-product .product-previews li { flex: 1 1 0; min-width: 0; max-width: calc(50% - 6px); }
.store-product .product-preview { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 2px solid var(--d-line); border-radius: var(--d-radius-md); background: #FFF4DC; cursor: zoom-in; }
.store-product .product-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.store-product .product-preview:disabled { cursor: default; opacity: 1; }
.store-product .product-preview:focus-visible { outline: 3px solid var(--d-ink); outline-offset: -3px; }
.store-product .product-preview:focus-visible::after { content: ""; position: absolute; inset: 3px; border: 3px solid #fff; box-shadow: inset 0 0 0 2px var(--d-ink); pointer-events: none; }
/* Không phóng to được (cùng điều kiện với store-page.js): ô nhỏ không đọc được chữ trong hình, nên hình phụ xếp một cột, mỗi hình rộng hết khung. */
@media not all and (min-width: 901px) and (min-height: 590px) { .store-product .product-previews { flex-direction: column; } .store-product .product-previews li { flex: none; max-width: none; } }
/* Từ 4 hình phụ (HocAI gửi tối đa 8, vài slide của bài): khi phóng to được, ba ô một hàng và xuống hàng; ở mọi nơi khác (điện thoại) một hàng VUỐT NGANG, mỗi hình gần rộng
   hết khung, để trang không dài thêm 8 hình. store-page.js cho hàng nhận tiêu điểm (phím mũi tên cuộn) và thêm dòng "Vuốt sang ngang…". 1 đến 3 hình giữ bố cục cũ. */
.store-product .product-previews:has(> li:nth-child(4)) { flex-wrap: wrap; }
.store-product .product-previews:has(> li:nth-child(4)) > li { flex: 0 0 calc((100% - 24px) / 3); max-width: none; }
@media not all and (min-width: 901px) and (min-height: 590px) {
  .store-product .product-previews:has(> li:nth-child(4)) { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 2px 2px 8px; }
  .store-product .product-previews:has(> li:nth-child(4)) > li { flex: 0 0 86%; scroll-snap-align: start; }
  .store-product .product-previews:focus-visible { outline: 3px solid var(--d-ink); outline-offset: 2px; }
}
.store-product .product-previews-hint { margin: 6px 0 0; color: var(--d-ink-soft, #43564e); font-size: 15px; }
.store-product .product-lightbox-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.store-product .product-lightbox-nav[hidden] { display: none; }
.store-product .product-lightbox:has(.product-lightbox-nav:not([hidden])) img { touch-action: pan-y; }  /* vuốt ngang trên hình là sang hình khác, không phải cuộn hộp */
.store-product .product-lightbox-nav .d-btn { justify-self: auto; min-height: 44px; }
.store-product .product-lightbox-nav [data-zoom-count] { font-weight: 800; }

/* ---- Khung mua: nhãn loại, tên (Lora), lớp · môn, mô tả, gói bán ---- */
.store-product .product-summary { min-width: 0; overflow-wrap: anywhere; }
.store-product .product-summary .eyebrow { margin: 0; color: var(--d-brand-deep); letter-spacing: 0; text-transform: none; font: 700 var(--d-fs-caption) / 1.3 var(--d-font-sans); }
.store-product .product-summary h1 { margin: 8px 0 10px; color: var(--d-ink); letter-spacing: 0; font: 700 var(--d-fs-title-l) / 1.3 var(--d-font-display); }
.store-product .product-where { margin: 0 0 10px; color: var(--d-muted); font: 700 var(--d-fs-caption) / 1.4 var(--d-font-sans); }
.store-product .product-lead { max-width: 62ch; margin: 0 0 14px; color: var(--d-ink-soft); font: 400 var(--d-fs-body) / var(--d-lh-body) var(--d-font-sans); }
.store-product .product-offers h2 { margin: 18px 0 8px; color: var(--d-ink); font: 700 var(--d-fs-title-s) / var(--d-lh-title-s) var(--d-font-display); }
.store-product .product-soon { margin: 8px 0 0; color: var(--d-muted); font-weight: 700; }
.store-product .offer-list { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.store-product .offer-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 56px; padding: 12px 16px;
  border: 2px solid var(--d-line); border-radius: var(--d-radius-lg); background: var(--d-surface); font-size: var(--d-fs-body); }
.store-product .offer-name { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.store-product .offer-prefix { color: var(--d-muted); font-weight: 600; }
.store-product .offer-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 8px; min-width: 0; margin-left: auto; overflow-wrap: anywhere; }
.store-product .offer-price strong { color: var(--d-brand); font: 700 var(--d-fs-title-s) / 1.3 var(--d-font-display); }
.store-product .offer-price .is-free { color: var(--d-brand-deep); }
.store-product .offer-price s { color: var(--d-muted); font-size: var(--d-fs-caption); }
.store-product .offer-list small { flex-basis: 100%; color: var(--d-muted); font-size: var(--d-fs-caption); }
.store-product .offer-list .d-btn { flex: 1 1 100%; }
.store-product .product-notice { margin: 14px 0 0; padding: 12px 16px; border-radius: 4px 4px 4px 18px; background: var(--d-sun-tint); color: var(--d-sun-ink); font: 700 var(--d-fs-line) / 1.45 var(--d-font-sans); }

/* ---- Nội dung giới thiệu do HocAI soạn. overflow-wrap: break-word, không phải anywhere: `anywhere` làm cỡ tối thiểu của ô bảng chỉ một ký tự, nên bảng nhiều cột trên
   điện thoại bị bẻ từng chữ ("Tu/ần"); với break-word các từ giữ nguyên và bảng cuộn ngang trong chính nó. max-width chỉ giữ độ dài dòng: khối nằm sát trái, thẳng hàng
   với đường dẫn và hình. ---- */
.store-product .product-content { max-width: 820px; margin: 8px 0 40px; overflow-wrap: break-word; font: 400 var(--d-fs-body) / 1.7 var(--d-font-sans); }
.store-product .product-content :is(p, li, blockquote) { max-width: 62ch; }
.store-product .product-content :is(h2, h3, h4) { margin: 1.4em 0 .5em; font-family: var(--d-font-display); font-weight: 700; line-height: 1.3; }
.store-product .product-content img { max-width: 100%; height: auto; }
.store-product .product-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.store-product .product-content :is(th, td) { padding: 6px 10px; border: 1px solid var(--d-line-strong); }

/* ---- Hộp phóng to: <dialog> gốc, Esc đóng, phần còn lại của trang bị khóa khi mở. Chiều rộng xác định để hình luôn được phóng lên, kể cả ảnh nhỏ. ---- */
.store-product .product-lightbox { box-sizing: border-box; width: 100%; max-width: min(96vw, 1100px); max-height: calc(100% - 16px); padding: 12px; border: 2px solid var(--d-line); border-radius: var(--d-radius-xl);
  background: var(--d-surface); color: var(--d-ink); box-shadow: none; }
.store-product .product-lightbox:not([open]) { display: none; }
.store-product .product-lightbox[open] { display: grid; gap: 10px; overflow: auto; }
.store-product .product-lightbox::backdrop { background: rgb(29 43 40 / .78); backdrop-filter: none; }  /* nền mực phẳng, không làm mờ */
.store-product .product-lightbox .d-btn { justify-self: end; }
.store-product .product-lightbox img { display: block; width: 100%; height: auto; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); object-fit: contain; border-radius: var(--d-radius-sm); background: #fff; }

/* ---- Không tìm thấy sản phẩm ---- */
.store-product .store-missing { max-width: 560px; margin: 48px auto; text-align: center; }
.store-product .store-missing img { display: block; width: 140px; height: 140px; margin: 0 auto 12px; }
.store-product .store-missing h1 { margin: 0 0 10px; font: 700 var(--d-fs-title-l) / 1.3 var(--d-font-display); }
.store-product .store-missing p { max-width: 62ch; margin: 0 auto 20px; color: var(--d-ink-soft); }

@media (max-width: 900px) { .store-product .product-detail { grid-template-columns: 1fr; } }
@media (forced-colors: active) {
  .store-product :is(.product-media, .product-preview, .offer-list li) { border-color: CanvasText; }
  .store-product .product-zoom::before { border: 1px solid CanvasText; transform: none; }
}
.store-product .product-lightbox:has(.product-lightbox-nav:not([hidden])) img { max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); }