/* Sân khấu: cửa hàng và thẻ sản phẩm. docs/superpowers/specs/2026-09-29-public-ui-redesign-design.md, mục 6.
   Mọi luật nằm dưới .stage. Cỡ chữ đi qua --s-fs, --s-fs-title, --s-fs-note, --s-fs-tag (web/site.css) để nút "Aa" tới được:
   không viết px cố định cho chữ. Chỉ chuyển động bằng transform/opacity (mục 10). */
/* Chỉ trang danh sách giữ chỗ cho thanh cuộn (trang ngắn lại lúc tải không làm bố cục trượt ngang). Không đặt cho mọi trang Sân khấu:
   làm vậy khiến tests/layout-stability.test.mjs lệch 15px ở 1440px vì Playwright ẩn thanh cuộn nhưng vẫn giữ chỗ. */
html:has(.store-listing){scrollbar-gutter:stable}
/* Dải xem trước (mục 6.1) dùng chung với trang sản phẩm: luật ở web/site.css. */

/* Danh sách: tiêu đề, bộ lọc luôn hiện (mục 6.2) */
.stage .store-listing{max-width:1180px;margin:0 auto;padding:24px 0 40px}
.stage .store-listing h1{font-size:clamp(28px,4vw,44px);line-height:1.3;margin:0 0 14px;font-weight:900;overflow-wrap:anywhere}
.stage .store-filters{display:grid;gap:12px;margin-bottom:18px}
/* Ô tìm: ở hero của trang chủ cửa hàng (home-parts.js) có lề trên dưới; trong bộ lọc của danh sách thì không. */
.stage .store-search{display:flex;flex-direction:row;gap:10px;max-width:none;margin:18px 0 14px}
.stage .store-filters .store-search{margin:0}
.stage .store-search input{flex:1;min-width:0;min-height:52px;padding:0 16px;border:2px solid var(--s-control);border-radius:12px;background:#fff;color:var(--s-ink);font:inherit;font-size:var(--s-fs-title)}
/* Chữ gợi ý, cho ô tìm của danh sách và của hero: nhãn "Tìm sản phẩm" chỉ dành cho trình đọc màn hình, nên chữ gợi ý là gợi ý duy nhất mắt thường thấy. Màu mặc định của trình duyệt
   (#757575) chỉ 4,61:1 trên nền trắng và Firefox còn làm nhạt nó (còn khoảng 3:1): màu chữ phụ (7:1 trên trắng) và opacity 1 viết rõ. */
.stage .store-search input::placeholder{color:var(--s-muted);opacity:1}
.stage .store-kinds{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:0;min-width:0}
.stage .store-tab{position:relative;display:inline-flex}
.stage .store-tab input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.stage .store-tab span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:2px solid var(--s-control);border-radius:99px;background:#fff;font-size:var(--s-fs);font-weight:800;line-height:1.4}
.stage .store-tab svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stage .store-tab:hover span{background:#edf6f1}
.stage .store-tab input:checked+span{background:var(--s-teal);color:#fff;box-shadow:var(--s-lift-sm)}
.stage .store-tab input:focus-visible+span{outline:3px solid var(--s-ink);outline-offset:3px}
.stage .store-selects{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:end}
.stage .store-selects label{display:grid;gap:2px;font-size:var(--s-fs-note);font-weight:800;line-height:1.5}
.stage .store-selects select{min-height:44px;padding:0 12px;border:2px solid var(--s-control);border-radius:10px;background:#fff;color:var(--s-ink);font:inherit;font-size:var(--s-fs);font-weight:700}

/* Vùng kết quả: giữ chiều cao khi tải (app.js đặt min-height); kết quả cũ mờ đi nếu sau 0,2 giây vẫn chờ (không nhấp nháy khi mạng
   nhanh, không có hiệu ứng mờ dần), rõ lại ngay khi kết quả mới về. */
.stage .store-results{min-height:320px;outline:none}
.stage .store-results[aria-busy=true]{opacity:.55;cursor:progress;transition:opacity 0s .2s}
.stage .store-count{margin:0 0 12px;font-weight:700;color:var(--s-muted)}

/* Folio: ảnh nguyên khung, gáy nhẹ; giá có hàng riêng dưới ảnh để không che tên khi chữ lớn. */
.stage .product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:24px}
.stage .product-card{display:flex;flex-direction:column;gap:4px;min-width:0;padding:10px 10px 14px;border:1px solid var(--s-line);border-radius:16px;background:#fff;color:var(--s-ink);text-decoration:none;box-shadow:var(--s-lift);transition:border-color .12s,box-shadow .12s}
.stage .product-card:hover,.stage .product-card:focus-visible{border-color:var(--s-teal);box-shadow:0 6px 18px #243c3514}
.stage .product-thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--s-paper);border:1px solid var(--s-line);border-radius:8px;overflow:hidden}
.stage .product-thumb::after{content:'';position:absolute;inset:0 auto 0 0;width:7px;border-right:1px solid #243c3526;background:#243c350d;pointer-events:none}
.stage .product-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.stage .product-thumb img.is-fallback{position:absolute;inset:0;width:auto;height:70%;margin:auto;aspect-ratio:1}
.stage .product-thumb:has(>img.is-fallback){background:var(--s-b3)}
.stage .product-thumb[data-kind=khoa-hoc]:has(>img.is-fallback){background:var(--s-b5)}
.stage .product-thumb[data-kind=credit]:has(>img.is-fallback){background:var(--s-b1)}
.stage .product-price-row{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 12px;min-width:0;margin:-6px 4px 2px;padding-left:4px}
.stage .product-tag{display:block;max-width:100%;padding:6px 12px;border:1px solid #ddce9f;border-radius:3px 3px 12px 3px;background:#fff1c9;color:var(--s-ink);font-size:var(--s-fs);font-weight:900;line-height:1.4;overflow-wrap:anywhere;box-shadow:0 3px 5px #243c3510}
.stage .product-tag.is-free{background:#e5f4eb;border-color:#b8d4c6}
.stage .product-tag.product-soon{background:var(--s-paper);border-color:var(--s-line);color:var(--s-muted)}
.stage .product-kind,.stage .product-name,.stage .product-where,.stage .product-action{padding-inline:8px}
.stage .product-kind{margin-top:4px;font-size:var(--s-fs-tag);font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;color:var(--s-teal-dark)}
/* Hai dòng thị giác, giữ đủ tên trong DOM; đệm trên bảo vệ dấu tiếng Việt. */
.stage .product-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-block:2px 0;font-size:var(--s-fs-title);line-height:1.35;font-weight:900;overflow-wrap:anywhere}
.stage .product-where,.stage .product-was{font-size:var(--s-fs-note);line-height:1.5;color:var(--s-muted);overflow-wrap:anywhere}
.stage .product-was{margin-right:auto;max-width:100%}
.stage .product-action{display:flex;align-items:center;gap:8px;min-height:44px;margin-top:auto;padding-top:8px;color:var(--s-teal);font-size:var(--s-fs);font-weight:800;line-height:1.4}
.stage .product-action>span{font-size:calc(var(--s-fs) + 4px)}

/* Chuyển trang: nút số từ 44px, trang đang xem ngọc/trắng để phân biệt ≥3:1. */
.stage .store-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:24px 0 4px}
.stage .store-pager>a,.stage .store-pager>span{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 12px;border:2px solid var(--s-control);border-radius:10px;background:#fff;color:var(--s-ink);font-size:var(--s-fs);font-weight:800;line-height:1.4;text-decoration:none}
.stage .store-pager>a:hover{background:#edf6f1}
.stage .store-pager>[aria-current=page]{background:var(--s-teal);border-color:var(--s-teal);color:#fff;box-shadow:var(--s-lift-sm)}
.stage .store-pager>.gap{min-width:24px;padding:0;border:0;background:transparent}
/* Màu hệ thống (Windows tương phản cao) bỏ các nền đánh dấu: viền Highlight giữ dấu hiệu thẻ Loại đang chọn và trang đang xem.
   Tab vào nhóm radio dừng ở thẻ đang chọn, nên vòng focus của nó (cùng độ ưu tiên, nằm trước) bị viền "đang chọn" đè mất: thẻ đang chọn
   mà có focus được viền kép dày hơn, khác viền đơn của riêng "đang chọn". */
@media(forced-colors:active){
  .stage .store-tab input:checked+span,.stage .store-pager>[aria-current=page]{outline:3px solid Highlight;outline-offset:2px}
  .stage .store-tab input:checked:focus-visible+span{outline-style:double;outline-width:6px}
}

/* Rỗng và lỗi: nhân vật mặc định, câu nói việc gì đã xảy ra, một nút để đi tiếp */
.stage .store-empty,.stage .store-error{display:grid;justify-items:center;gap:10px;padding:32px 16px;text-align:center}
.stage .store-empty p,.stage .store-error p{margin:0;max-width:62ch;font-weight:700}
.stage .store-error{max-width:640px;margin:40px auto}
.stage .store-inline-error{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;padding:10px 14px;border:2px solid var(--s-line);border-radius:12px;background:#ffe1d0;font-weight:700}

/* Các khối của trang chủ cửa hàng dùng chung thẻ ở trên */
.stage .store-section-head{border-bottom:1px solid var(--s-line)}
@media(max-width:600px){.stage .store-search{flex-wrap:wrap}.stage .store-search .btn{width:100%}}

/* Bám thẻ tập bài giảng đã chốt: tên bên trái nhãn giấy, metadata và link nhẹ bên dưới. */
.stage .product-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) fit-content(44%);grid-template-rows:auto auto auto auto 1fr;gap:4px 8px;align-content:start}
.stage .product-card .product-thumb{grid-column:1/-1;grid-row:1}
.stage .product-card .product-name{grid-column:1;grid-row:2;align-self:start;margin-top:6px;padding-right:0}
.stage .product-card .product-price-row{grid-column:2;grid-row:2;align-self:start;justify-content:flex-end;margin:-12px 3px 0 0;padding:0;z-index:1;gap:4px}
.stage .product-card .product-tag{font-size:var(--s-fs-title);padding:8px 10px;max-width:100%;border-radius:2px 2px 12px 3px;transform:rotate(-3deg)}
.stage .product-card .product-kind{grid-column:1/-1;grid-row:3;margin-top:5px}
.stage .product-card .product-where{grid-column:1/-1;grid-row:4}
.stage .product-card .product-action{grid-column:1/-1;grid-row:5;align-self:end;padding-right:52px;border:0;background:transparent;min-height:44px}
.stage .product-card::after{content:'';position:absolute;right:16px;bottom:14px;width:34px;height:40px;background:url('/assets/card-leaf-watercolor.webp') center/contain no-repeat;pointer-events:none;opacity:.8}
.stage .product-card .product-was{width:100%;text-align:right;margin:0}
@media(forced-colors:active){.stage .product-card .product-tag{transform:none}}

/* Chi tiết giấy/màu nước theo phản hồi: tranh ngang trọn chiều rộng, không crop. */
.stage .product-card{background-image:url('/assets/card-paper-grain.svg'),linear-gradient(145deg,#fff 60%,#fcf7e9);box-shadow:0 4px 18px #5c51320b}
.stage .product-card .product-thumb{aspect-ratio:16/9}
.stage .product-card .product-meta{grid-column:1/-1;grid-row:3/5;display:flex;gap:9px;align-items:center;margin:5px 8px 2px}
.stage .product-card .product-meta-copy{display:block;min-width:0}
.stage .product-card .product-meta .product-kind{display:block;margin:0;padding:0}
.stage .product-card .product-meta .product-where{display:block;padding:0}
.stage .product-card .product-type-icon{display:block;flex:none;width:27px;height:34px;color:var(--s-teal)}
.stage .product-type-icon svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.5;fill:none}
.stage .product-type-icon svg:has(path[fill]){stroke:none}
.stage .product-card .product-tag{background-image:url('/assets/card-paper-grain.svg')}
.stage .product-card::after{right:16px;bottom:13px;width:46px;height:65px;opacity:1}
.stage .product-card .product-action{padding-right:66px}

.stage .product-grid{align-items:stretch}

/* Kích thước chuẩn: bìa luôn 16:9; các hàng dùng cùng chiều cao trong một hàng thẻ. */
.stage .product-card{grid-template-rows:auto minmax(72px,auto) minmax(68px,auto) minmax(44px,auto)}
.stage .product-card .product-name{min-height:calc(var(--s-fs-title)*2.7 + 2px)}
.stage .product-card .product-meta{grid-row:3;margin:0 8px;align-self:start}
.stage .product-card .product-action{grid-row:4}
.stage .product-card .product-meta .product-kind{white-space:nowrap}
.stage .product-card .product-meta .product-where{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:calc(var(--s-fs-note)*3)}
@supports(grid-template-rows:subgrid){
 .stage .product-card{grid-row:span 4;grid-template-rows:subgrid;row-gap:4px}
}

.stage .product-card .product-meta{align-items:flex-start}
.stage .product-card .product-type-icon{margin-top:2px}

.stage .store-empty-filters>summary{cursor:pointer;min-height:44px;line-height:1.5;padding:10px 0;font-weight:700;color:var(--s-ink)}.stage .store-empty-filters>summary[hidden]{display:none}.stage .store-empty .btn{margin:4px}

/* Compact listing only: homepage keeps its illustrated104px level cards. */
.stage .store-listing{padding-top:12px}
.stage .store-listing h1{font-size:calc(var(--s-fs-title) + 6px);margin-bottom:12px}
.stage .store-listing .public-levels{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;overflow:visible;padding:0}
.stage .store-listing .public-levels .s-tile{flex:0 1 auto;justify-content:center;min-height:44px;padding:8px 14px;border-radius:99px;gap:6px}
.stage .store-listing .public-levels .level-art{display:none}
.stage .store-listing .public-levels .level-check{position:static;flex:none;width:18px;height:18px;display:none}
.stage .store-listing .public-levels .is-selected .level-check{display:flex}
.stage .store-listing .store-filters{grid-template-columns:minmax(220px,1fr) auto;align-items:end;gap:10px 12px;margin-bottom:12px}
.stage .store-listing .store-search{align-items:center;gap:8px}
.stage .store-listing .store-search input{min-height:44px;font-size:var(--s-fs);padding-inline:12px}
.stage .store-listing .store-search .btn{padding:8px 14px}
.stage .store-listing .store-kinds{grid-row:2;grid-column:1/-1}
.stage .store-listing .store-tab span{padding-inline:12px;gap:6px}
.stage .store-listing .store-advanced{grid-column:2;grid-row:1;min-width:0}
.stage .store-listing .store-advanced>summary{min-height:44px;padding:10px 12px;font-size:var(--s-fs);font-weight:800;cursor:pointer;overflow-wrap:anywhere;border:2px solid var(--s-control);border-radius:10px}
.stage .store-listing .store-selects{gap:8px}
.stage .store-listing .store-selects label{min-width:0}
.stage .store-listing .store-selects select{max-width:100%;padding-inline:8px}
@media(min-width:701px){
 .stage .store-listing .store-advanced>summary{display:none}
 /* Desktop exposes the same controls even after closing details on a phone and resizing. */
 .stage .store-listing .store-advanced::details-content{content-visibility:visible}
}
@media(max-width:1000px){
 .stage .store-listing .store-filters{grid-template-columns:1fr}
 .stage .store-listing .store-advanced{grid-column:1;grid-row:3}
 .stage .store-listing .store-kinds{grid-row:2}
}
@media(max-width:700px){
 .stage .store-listing .store-search{flex-wrap:nowrap}
 .stage .store-listing .store-search .btn{width:auto;flex:none}
 .stage .store-listing .store-advanced .store-selects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding-top:10px}
 .stage .store-listing .store-selects select{width:100%;min-width:0}
 .stage .store-listing .store-advanced summary:focus-visible{outline:3px solid var(--s-ink);outline-offset:3px}
}

/* Neutralize the global help-details spacing inside the listing controls. */
.stage .store-listing .store-empty-filters,.stage .store-listing .store-advanced{margin:0;padding:0;border:0}
.stage .store-listing .store-search{min-width:0}
.stage .store-listing .store-search input{width:0}