/**
 * Bộ cấu hình bàn modun.
 *
 * Bản gốc trong BTNTT config 4/styles.css đặt html, body { height: 100% } và .app
 * { height: 100% }. Dán vào WordPress thì 100% tính theo container của theme — iframe sập
 * xuống 0 pixel, và hai dòng kia đè lên chính theme. Toàn bộ file này vì vậy nằm trong
 * .lsk-cfg và không chạm một selector toàn cục nào. Xem docs/adr/0005 quyết định 2.
 */

.lsk-cfg {
    /*
     * DUNG CHUNG bo bien voi [lsk_3d_catalog] — cung ten, cung gia tri du phong, va cung
     * duoc in de tu 3D Labs → Catalog Settings. Hai khoi thuong nam chung mot trang; moi
     * ben mot bang mau thi nhin ra hai san pham khac nhau.
     */
    --lsk-cat-bg: #f2f5f8;
    --lsk-cat-panel: #ffffff;
    --lsk-cat-text: #1e1e1e;
    --lsk-cat-muted: #5a6169;
    --lsk-cat-accent: #116d96;
    --lsk-cat-vien: #e1e4e8;
    --lsk-cat-stage: #91c03e;
    /* Bo góc chung với catalog.css. Đổi ở đây thì phải đổi cả bên đó. */
    --lsk-cat-bo: 10px;
    --lsk-cat-o-nhap: #fff;
    --lsk-cat-o-trong: #eef1f4;
    --lsk-cat-noi: #f7f9fa;
    --lsk-cat-di-qua: #f0f6fa;
    --lsk-cat-dang-chon: #e8f4fa;
    --lsk-cat-vien-chon: #116d96;
    --lsk-cat-vien-manh: #b9c2cb;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
    margin: 0 0 32px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--lsk-cat-text);
}

/* Có nhiều sản phẩm thì thêm cột chọn bên trái — một trang cho cả dòng sản phẩm, thay vì
   mỗi sản phẩm một trang với một shortcode riêng. */
.lsk-cfg.has-products {
    grid-template-columns: 220px minmax(0, 1fr) 320px;
}

/* ── Bố cục PHỦ: hai phần, bảng chọn nổi đè lên khung 3D ─────────────────────────────
 *
 * Mặc định từ 1.21.0. Kiểu ba cột ở trên vẫn giữ, gọi bằng layout="cot".
 *
 * Lý do đổi: ở màn hình 1320px, chia ba cột thì khung 3D chỉ còn 620px — chưa tới một
 * nửa màn hình dành cho đúng thứ khách vào để xem. Bỏ cột thứ ba đi thì khung 3D lấy
 * được toàn bộ phần còn lại.
 */
.lsk-cfg.is-phu,
.lsk-cfg.is-phu.has-products {
    grid-template-columns: minmax(0, 1fr);
}

.lsk-cfg.is-phu.has-products {
    grid-template-columns: 220px minmax(0, 1fr);
}

/* Khung 3D cao theo màn hình chứ không theo tỉ lệ 4/3.
 *
 * ⚠️ ĐẶT CHIỀU CAO THẲNG, đừng quay lại aspect-ratio. aspect-ratio là ràng buộc hai
 * chiều: nó suy ngược từ chiều cao ra chiều rộng và làm khung tràn khỏi cột — lỗi đã gặp
 * một lần, ghi ở khối .lsk-cfg__stage bên dưới. */
.lsk-cfg.is-phu .lsk-cfg__stage {
    aspect-ratio: auto;
    height: clamp(460px, calc(100vh - 150px), 820px);
    min-height: 0;
}

/*
 * Cột nổi. Nằm TRONG .lsk-cfg__stage nên bị cắt theo bo góc của khung 3D.
 *
 * inset đặt cả bốn cạnh rồi để `left: auto` — như vậy chiều cao đã bị khoá bằng
 * top/bottom, và bảng dài bao nhiêu cũng cuộn bên trong chứ không đội khung 3D cao lên.
 */
.lsk-cfg.is-phu .lsk-cfg__overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: auto;
    z-index: 3;
    width: min(320px, calc(100% - 20px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/*
 * Nền MỜ CÓ BLUR, không phải trong suốt hoàn toàn.
 *
 * Trang production để chữ trần chỉ có text-shadow. Trên nền xanh lá thì tạm đọc được,
 * nhưng model xoay ra chỗ sáng là chữ chìm hẳn — đo trên trang thật của công ty: nhãn
 * #666 nằm trên nền xanh nhạt, tương phản dưới ngưỡng. Nền mờ giữ được cả hai: vẫn nhìn
 * xuyên thấy model, mà chữ thì đọc được ở mọi góc xoay.
 */
.lsk-cfg.is-phu .lsk-cfg__panel,
.lsk-cfg.is-phu .lsk-cfg__colors {
    background: color-mix(in srgb, var(--lsk-cat-panel) 92%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(12, 20, 30, 0.16);
    margin-top: 0;
}

/* Trình duyệt không có color-mix thì rơi về nền đặc — thà đặc còn hơn chữ chìm. */
@supports not (background: color-mix(in srgb, #fff 92%, transparent)) {
    .lsk-cfg.is-phu .lsk-cfg__panel,
    .lsk-cfg.is-phu .lsk-cfg__colors {
        background: var(--lsk-cat-panel);
    }
}

/* Bảng chọn co theo nội dung, dải màu bám đáy — thứ tự đọc giống production: chọn kiểu
   trước, chọn màu sau. */
.lsk-cfg.is-phu .lsk-cfg__panel { flex: 0 1 auto; }
.lsk-cfg.is-phu .lsk-cfg__colors { flex: 0 0 auto; }

/*
 * Điện thoại: THÔI PHỦ, trả bảng về nằm dưới khung 3D.
 *
 * Màn hình 375px mà để bảng nổi 320px thì nó che gần kín model — khách bấm mà không thấy
 * mình đang đổi cái gì, đúng thứ bố cục này sinh ra để tránh.
 */
@media (max-width: 900px) {
    /*
     * ⚠️ PHẢI GẤP CỘT LẠI NGAY TẠI ĐÂY.
     *
     * Khối 900px ở cuối file gấp bằng `.lsk-cfg.has-products` — độ ưu tiên (0,2,0), thua
     * luật hai cột của kiểu phủ ở trên vốn đạt (0,3,0). Không viết lại ở đây thì trên điện
     * thoại vẫn còn cột trái 220px, khung 3D teo lại một dải hẹp bên phải — đã đo thấy
     * đúng như vậy ở màn hình 375px.
     */
    .lsk-cfg.is-phu,
    .lsk-cfg.is-phu.has-products {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    /*
     * ⚠️ GHIM CÁI STAGE, ĐỪNG GHIM CẢ .lsk-cfg__viewer.
     *
     * Khối 900px ở cuối file ghim .lsk-cfg__viewer, đúng cho kiểu ba cột vì ở đó bảng
     * chọn là anh em của viewer. Ở kiểu phủ thì bảng nằm TRONG viewer — ghim viewer là
     * ghim luôn cả bảng, và không còn gì cuộn được nữa.
     */
    .lsk-cfg.is-phu .lsk-cfg__viewer {
        position: static;
    }

    .lsk-cfg.is-phu .lsk-cfg__stage {
        position: sticky;
        top: 0;
        z-index: 2;
        height: 52vh;
        min-height: 260px;
    }

    .lsk-cfg.is-phu .lsk-cfg__overlay {
        position: static;
        width: auto;
        margin-top: 10px;
        overflow: visible;
    }

    /* Hết phủ thì nền mờ không còn việc gì — trả về nền đặc cho chữ rõ nhất. */
    .lsk-cfg.is-phu .lsk-cfg__panel,
    .lsk-cfg.is-phu .lsk-cfg__colors {
        background: var(--lsk-cat-panel);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
    }
}

.lsk-cfg__products {
    position: sticky;
    top: 20px;
    align-self: start;
    border: 1px solid var(--lsk-cat-vien);
    border-radius: var(--lsk-cat-bo);
    background: var(--lsk-cat-panel);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.lsk-cfg__products-title {
    margin: 0;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lsk-cat-muted);
    background: var(--lsk-cat-noi);
    border-bottom: 1px solid var(--lsk-cat-vien);
}

.lsk-cfg__product-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lsk-cfg__product-list li {
    margin: 0;
}

.lsk-cfg__product {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font: inherit;
    font-size: 14px;
    text-align: left;
    color: var(--lsk-cat-text);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--lsk-cat-vien);
    cursor: pointer;
}

.lsk-cfg__product:hover {
    background: var(--lsk-cat-di-qua);
}

.lsk-cfg__product.is-active {
    font-weight: 700;
    color: var(--lsk-cat-accent);
    background: var(--lsk-cat-dang-chon);
    box-shadow: inset 3px 0 0 var(--lsk-cat-accent);
}

.lsk-cfg__panel-title {
    margin: 0;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 700;
    background: var(--lsk-cat-noi);
    border-bottom: 1px solid var(--lsk-cat-vien);
}

/* ── Khối xem: khung 3D + dải màu, được GHIM ──────────────────────────────────────── */
/*
 * Đo trên trang thật: bảng chọn của bàn áp tường cao 3.478px trên màn hình 910px — 3,8
 * lần. Cuộn tới nhóm thứ mười là khung 3D đã trôi khỏi tầm mắt, khách bấm mà không thấy
 * mình đang đổi cái gì.
 *
 * Ghim khối này sửa đúng chỗ đó. Thu gọn riêng phần màu thì KHÔNG đủ: năm hàng màu chỉ
 * chiếm 285px, tức 8% của bảng — bỏ hết đi vẫn còn 3,2 lần màn hình.
 *
 * position: sticky cần nút cha không đặt overflow ẩn, và cần align-items: start ở lưới —
 * cả hai đã có. Nếu sau này ai thêm overflow: hidden vào .lsk-cfg thì ghim sẽ chết im.
 */
.lsk-cfg__viewer {
    position: sticky;
    top: 20px;
    min-width: 0;
    align-self: start;
}

.lsk-cfg__capture {
    position: absolute;
    z-index: 5;
    left: 12px;
    bottom: 64px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    background: var(--lsk-cat-stage) !important;
    color: #17210d;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    cursor: pointer;
}

.lsk-cfg__capture svg {
    width: 23px;
    height: 23px;
    fill: currentColor;
}

.lsk-cfg__capture:hover { filter: brightness(1.06); }
.lsk-cfg__capture:disabled { cursor: wait; opacity: 0.65; }
.lsk-cfg__capture:focus-visible { outline: 3px solid rgba(22, 131, 165, 0.5); }

/* ── Dải màu dưới khung 3D ────────────────────────────────────────────────────────── */

.lsk-cfg__colors {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--lsk-cat-panel);
    border: 1px solid var(--lsk-cat-vien);
    border-radius: var(--lsk-cat-bo);
}

.lsk-cfg__colors[hidden] {
    display: none;
}

.lsk-cfg__color {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.lsk-cfg__color[hidden] {
    display: none;
}

.lsk-cfg__color-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--lsk-cat-muted);
    white-space: nowrap;
}

.lsk-cfg__color .lsk-cfg__swatches {
    gap: 5px;
}

.lsk-cfg__color .lsk-cfg__swatch {
    width: 22px;
    height: 22px;
}

/* ── Khung nhúng ──────────────────────────────────────────────────────────────────── */

.lsk-cfg__stage {
    position: relative;

    /*
     * width: 100% là BẮT BUỘC, đừng bỏ.
     *
     * aspect-ratio là ràng buộc hai chiều. Không ghim chiều rộng thì min-height ép chiều
     * cao lên 380px, rồi tỉ lệ 4/3 suy NGƯỢC ra chiều rộng 507px — rộng hơn cột lưới
     * (đo được 331px) nên khung 3D tràn ra và đè lên bảng chọn. Ghim chiều rộng thì
     * aspect-ratio chỉ còn suy ra chiều cao, và min-height làm đúng việc của nó là sàn.
     */
    width: 100%;
    min-width: 0;
    aspect-ratio: 4 / 3;
    min-height: 320px;
    /* Cùng màu nền mà datNen() sẽ đặt cho khung nhúng, để lúc Sketchfab còn đang tải thì ô
       trống không loé lên một màu khác rồi mới nhảy sang màu thật. */
    background: var(--lsk-cat-stage);
    border-radius: var(--lsk-cat-bo);
    overflow: hidden;
}

.lsk-cfg__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/*
 * Logo công ty phủ GIỮA khung nhúng — chép đúng cách của [lsk_3d_catalog]
 * (.lsk-lab-watermark trong style.css), để hai khối trên cùng một trang trông như một.
 *
 * Đặt giữa cũng tránh góc dưới–trái, chỗ của logo Sketchfab; che chỗ đó vi phạm điều
 * khoản của họ (docs/adr/0005). pointer-events: none để không nuốt thao tác xoay model.
 */
.lsk-cfg__watermark {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: min(46%, 420px);
}

/* ── Bảng chọn ────────────────────────────────────────────────────────────────────── */

.lsk-cfg__panel {
    border: 1px solid var(--lsk-cat-vien);
    border-radius: var(--lsk-cat-bo);
    background: var(--lsk-cat-panel);
    overflow: hidden;
}

.lsk-cfg__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--lsk-cat-vien);
}

.lsk-cfg__row[hidden] {
    display: none;
}

/*
 * Nhóm con thụt vào và có vạch dọc, để thấy ngay nó phụ thuộc dòng ngay trên. Model có
 * ba tầng — Modun đầu bàn › Bồn rửa › Số lượng bồn — nên mỗi tầng thụt thêm một nấc,
 * nếu không thì "Số lượng bồn" trông như ngang hàng với "Bồn rửa".
 */
.lsk-cfg__row.is-child {
    background: var(--lsk-cat-noi);
    box-shadow: inset 3px 0 0 var(--lsk-cat-vien-manh);
}

.lsk-cfg__row[data-depth="1"] { padding-left: 26px; }
.lsk-cfg__row[data-depth="2"] { padding-left: 40px; background: var(--lsk-cat-noi); }
.lsk-cfg__row[data-depth="3"] { padding-left: 54px; background: var(--lsk-cat-noi); }

/*
 * flex-basis 0, KHÔNG phải 130px.
 *
 * Với 130px thì nhãn nở ra chiếm trọn 280px của cột rộng 320px, đẩy ô chọn xuống dòng —
 * đo được hàng chọn cao 76px trong khi hàng công tắc chỉ 42px. Basis 0 thì nhãn nhận phần
 * còn lại sau ô chọn, hai thứ nằm chung một hàng.
 */
.lsk-cfg__label {
    font-weight: 600;
    flex: 1 1 0;
    min-width: 0;
}

.lsk-cfg__row.is-child .lsk-cfg__label {
    font-weight: 500;
    color: var(--lsk-cat-muted);
}

/* ── Công tắc bật/tắt ─────────────────────────────────────────────────────────────── */

.lsk-cfg__switch {
    position: relative;
    flex: 0 0 auto;
    cursor: pointer;
}

.lsk-cfg__switch input {
    position: absolute;
    opacity: 0;
    width: 44px;
    height: 24px;
    margin: 0;
    cursor: pointer;
}

.lsk-cfg__track {
    display: block;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--lsk-cat-vien-manh);
    transition: background 0.15s ease;
}

.lsk-cfg__track::after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin: 3px;
    border-radius: 50%;
    background: var(--lsk-cat-panel);
    transition: transform 0.15s ease;
}

.lsk-cfg__switch input:checked + .lsk-cfg__track {
    background: var(--lsk-cat-accent);
}

.lsk-cfg__switch input:checked + .lsk-cfg__track::after {
    transform: translateX(20px);
}

.lsk-cfg__switch input:focus-visible + .lsk-cfg__track {
    outline: 2px solid var(--lsk-cat-accent);
    outline-offset: 2px;
}

/* ── Chọn kiểu ────────────────────────────────────────────────────────────────────── */
/*
 * Dropdown, KHÔNG dàn nút ra. Có nhóm mười lựa chọn ("Hộc tủ 1" của bàn áp tường) — dàn
 * thành mười nút thì một dòng chiếm nửa màn hình, trên điện thoại thì bảng chọn dài hơn
 * cả trang.
 */
/*
 * Ô chọn nằm CÙNG HÀNG với nhãn, không xuống dòng.
 *
 * Đo trên trang thật: bàn áp tường bật hết ra 20 hàng, bảng chọn cao 2.268px — khoảng
 * 113px mỗi hàng, vì nhãn chiếm một dòng rồi ô chọn chiếm dòng nữa. Cho hai thứ chung một
 * hàng thì hàng còn chừng một nửa, mà không giấu đi thông tin nào.
 */
.lsk-cfg__select {
    flex: 0 1 58%;
    max-width: 58%;
    padding: 6px 28px 6px 9px;
    font: inherit;
    font-size: 14px;
    line-height: 1.3;
    color: var(--lsk-cat-text);
    background-color: #fff;
    border: 1px solid var(--lsk-cat-vien);
    border-radius: 6px;
    cursor: pointer;

    /* Mũi tên tự vẽ bằng SVG nội tuyến: nút chọn mặc định của mỗi hệ điều hành một kiểu,
       và CSP của trang không cho tải ảnh từ máy chủ ngoài. */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6169' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 11px;
}

.lsk-cfg__select:hover {
    border-color: var(--lsk-cat-accent);
}

.lsk-cfg__select:focus-visible {
    outline: 2px solid var(--lsk-cat-accent);
    outline-offset: 1px;
}

/* ── Ô màu ────────────────────────────────────────────────────────────────────────── */

.lsk-cfg__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 0 0 auto;
}

.lsk-cfg__swatch {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--lsk-cat-vien-manh);
    border-radius: 50%;
    cursor: pointer;
}

.lsk-cfg__swatch:hover {
    transform: scale(1.1);
}

.lsk-cfg__swatch.is-on {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lsk-cat-accent);
}

/* ── Khối gửi cấu hình ────────────────────────────────────────────────────────────── */

.lsk-cfg__share {
    padding: 14px;
    background: var(--lsk-cat-noi);
}

/* Tóm tắt gập lại, mặc định gập — xem lý do trong configurator.js. */
.lsk-cfg__share-details {
    margin-bottom: 10px;
}

.lsk-cfg__share-title {
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    padding: 4px 0;
}

.lsk-cfg__share-title::-webkit-details-marker {
    display: none;
}

/* Mũi tên tự vẽ, để cùng một hình dạng trên mọi trình duyệt. */
.lsk-cfg__share-title::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 7px;
    border-left: 5px solid #5a6169;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease;
}

.lsk-cfg__share-details[open] .lsk-cfg__share-title::before {
    transform: rotate(90deg);
}

.lsk-cfg__share-details[open] .lsk-cfg__share-title {
    margin-bottom: 6px;
}

.lsk-cfg__summary {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.lsk-cfg__summary li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    border-bottom: 1px dotted var(--lsk-cat-vien);
}

.lsk-cfg__summary-name {
    color: var(--lsk-cat-muted);
}

.lsk-cfg__summary-value {
    font-weight: 600;
    text-align: right;
}

.lsk-cfg__summary-empty {
    display: block;
    color: var(--lsk-cat-muted);
    font-style: italic;
    border-bottom: 0;
}

.lsk-cfg__copy {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--lsk-cat-accent);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

/* Tối đi từ chính màu nhấn, thay vì một mã màu riêng — đổi màu nhấn ở Catalog Settings
   thì hover đi theo, không bị lệch tông. */
.lsk-cfg__copy:hover {
    filter: brightness(0.9);
}

.lsk-cfg__copy.is-done {
    background: #2e7d32;
}

.lsk-cfg__hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--lsk-cat-muted);
}

.lsk-cfg__error {
    grid-column: 1 / -1;
    padding: 16px;
    color: #8a1f1f;
    background: #fdecec;
    border: 1px solid #f3c4c4;
    border-radius: 8px;
}

/* ── Máy tính bảng: bỏ cột phải xuống dưới ──────────────────────────────────────────
 *
 * ⚠️ CÙNG MỐC 1180px với catalog.css, và cùng cách gãy.
 *
 * Không có luật này thì trong khoảng 900–1180px catalog đã rơi về hai cột trong khi
 * configurator vẫn ba cột — đúng cái lệch vừa đi sửa ở bề rộng máy tính, chỉ dời sang một
 * khoảng bề rộng khác. Hai khối nằm chồng nhau trên một trang thì phải gãy cùng lúc.
 */
@media (max-width: 1180px) {
    .lsk-cfg { grid-template-columns: minmax(0, 1fr); }
    .lsk-cfg.has-products { grid-template-columns: 220px minmax(0, 1fr); }

    .lsk-cfg__panel {
        grid-column: 1 / -1;
    }
}

/* ── Điện thoại ───────────────────────────────────────────────────────────────────── */
/*
 * Cách của Catalog KHÔNG dùng lại được: dưới 900px Catalog ẩn hẳn khối Bộ phận. Ở đây
 * bảng tuỳ chọn CHÍNH LÀ sản phẩm — ẩn đi thì còn lại một bức ảnh. Nên: viewer dính trên
 * đỉnh, bảng chọn cuộn bên dưới, khách luôn thấy cái bàn đổi trong lúc bấm.
 */
@media (max-width: 900px) {
    .lsk-cfg,
    .lsk-cfg.has-products {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    /* Danh sách sản phẩm cuộn NGANG thành một hàng thẻ, đặt trên viewer. Xếp dọc thì
       khách phải cuộn qua cả danh sách mới thấy sản phẩm. */
    .lsk-cfg__products {
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: 10px 10px 0 0;
        border-bottom: 0;
    }

    .lsk-cfg__products-title {
        display: none;
    }

    .lsk-cfg__product-list {
        display: flex;
        gap: 0;
    }

    .lsk-cfg__product {
        white-space: nowrap;
        width: auto;
        border-bottom: 0;
        border-right: 1px solid var(--lsk-cat-vien);
    }

    .lsk-cfg__product.is-active {
        box-shadow: inset 0 -3px 0 var(--lsk-cat-accent);
    }

    .lsk-cfg.has-products .lsk-cfg__stage {
        border-radius: 0;
    }

    /* Trên điện thoại ghim CẢ khối xem: khung 3D cộng dải màu. Khung thấp hơn desktop
       một chút để dải màu có chỗ mà vẫn còn thấy được bảng chọn bên dưới. */
    .lsk-cfg__viewer {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--lsk-cat-panel);
    }

    .lsk-cfg__stage {
        aspect-ratio: auto;
        height: 46vh;
        min-height: 220px;
        border-radius: 10px 10px 0 0;
    }

    /* Cuộn NGANG, không xuống dòng: xuống dòng thì năm nhóm màu ăn hết phần ghim và
       không còn chỗ cho bảng chọn. */
    .lsk-cfg__colors {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-top: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .lsk-cfg__color {
        flex: 0 0 auto;
    }

    .lsk-cfg__color .lsk-cfg__swatch {
        width: 28px;
        height: 28px;
    }

    .lsk-cfg__panel {
        border-radius: 0 0 10px 10px;
        border-top: 0;
    }

    /* Ngón tay cần vùng bấm to hơn con trỏ chuột. iOS phóng to trang khi chạm vào ô nhập
       có cỡ chữ dưới 16px, nên ô chọn phải đúng 16px. */
    .lsk-cfg__select {
        padding: 10px 32px 10px 12px;
        font-size: 16px;
    }

    .lsk-cfg__swatch {
        width: 32px;
        height: 32px;
    }
}