/* Extracted from product_detail.php — page-specific layout only. Shared theme/navbar lives in store_theme.css. */

        .page-wrap {
            padding: 16px 0 24px;
        }

        .breadcrumb-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 12px;
        }

        .btn-back-store {
            min-height: 42px;
            padding: 0 .9rem;
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            border-radius: 999px;
            color: #0b2e63;
            background: rgba(255, 255, 255, .94);
            border: 1px solid rgba(11, 46, 99, .12);
            box-shadow: var(--shadow-soft);
            text-decoration: none;
            font-weight: 1000;
        }

        .detail-shell {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
            gap: 16px;
            align-items: start;
        }

        .gallery-card,
        .info-card,
        .error-card {
            border-radius: var(--radius-xl);
            border: 1px solid rgba(10, 35, 71, .09);
            background: rgba(255, 255, 255, .94);
            box-shadow: var(--shadow-main);
            backdrop-filter: blur(12px);
        }

        .gallery-card {
            padding: 14px;
            position: sticky;
            top: 88px;
        }

        .main-image-button {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            padding: 0;
            display: block;
            overflow: hidden;
            border-radius: 22px;
            border: 1px solid rgba(10, 35, 71, .10);
            background: #f2f5f9;
            cursor: zoom-in;
        }

        .main-image {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
            background: #f6f8fb;
        }

        .image-empty {
            width: 100%;
            aspect-ratio: 1 / 1;
            display: grid;
            place-items: center;
            border-radius: 22px;
            color: #94a3b8;
            background: linear-gradient(180deg, #f8fafc, #eef2f7);
            border: 1px dashed #cbd5e1;
            font-weight: 900;
        }

        .image-empty i {
            display: block;
            margin-bottom: 6px;
            font-size: 3rem;
        }

        .main-image-error {
            position: absolute;
            inset: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
            aspect-ratio: auto;
            border: 0;
            border-radius: 0;
            align-content: center;
            justify-items: center;
            padding: 18px;
            text-align: center;
        }

        .main-image-error small {
            display: block;
            margin-top: 4px;
            color: #7b8798;
            font-size: .78rem;
            font-weight: 900;
        }

        .thumb-button.is-image-error {
            display: none;
        }

        .modal-image-error {
            min-height: min(72vh, 680px);
            border: 0;
            border-radius: 0;
            color: #aebbd0;
            background: #050d19;
        }

        .thumb-strip {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 8px;
            margin-top: 10px;
        }

        .thumb-button {
            width: 100%;
            aspect-ratio: 1 / 1;
            padding: 2px;
            overflow: hidden;
            border-radius: 14px;
            border: 2px solid transparent;
            background: #eef2f7;
            cursor: pointer;
        }

        .thumb-button.is-active {
            border-color: var(--gold-3);
            box-shadow: var(--ring);
        }

        .thumb-button img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            border-radius: 10px;
        }

        .info-card {
            overflow: hidden;
        }

        .info-head {
            position: relative;
            padding: 19px 18px 16px;
            overflow: hidden;
            background:
                radial-gradient(430px 190px at 95% -40px, rgba(246, 216, 120, .32), transparent 65%),
                radial-gradient(390px 170px at 0% 0%, rgba(99, 180, 255, .18), transparent 64%),
                #fff;
            border-bottom: 1px solid #edf2f8;
        }

        .type-pill,
        .available-pill {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: 7px 11px;
            border-radius: 999px;
            font-size: .78rem;
            font-weight: 1000;
        }

        .type-pill {
            color: #654500;
            background: linear-gradient(135deg, #fff9e7, #f7dc86);
            border: 1px solid rgba(217, 173, 50, .22);
        }

        .available-pill {
            color: #075f35;
            background: #eafaf1;
            border: 1px solid rgba(22, 128, 58, .18);
        }

        .product-title {
            margin: 12px 0 0;
            color: #0b2e63;
            font-size: clamp(1.35rem, 4vw, 2rem);
            line-height: 1.2;
            font-weight: 1000;
        }

        .product-code {
            margin-top: 6px;
            color: var(--muted);
            font-size: .88rem;
            font-weight: 900;
        }

        .price-panel {
            margin-top: 15px;
            padding: 14px;
            border-radius: 20px;
            background: linear-gradient(135deg, rgba(255, 249, 231, .98), rgba(247, 220, 134, .52));
            border: 1px solid rgba(217, 173, 50, .20);
        }

        .price-label {
            color: #765500;
            font-size: .82rem;
            font-weight: 1000;
        }

        .price-value {
            margin-top: 2px;
            color: #3b2800;
            font-size: clamp(1.65rem, 6vw, 2.45rem);
            line-height: 1;
            font-weight: 1000;
        }

        .gold-status {
            margin-top: 9px;
            display: flex;
            align-items: center;
            gap: 7px;
            color: #806221;
            font-size: .78rem;
            font-weight: 900;
            line-height: 1.4;
        }

        .gold-dot {
            width: 9px;
            height: 9px;
            flex: 0 0 9px;
            border-radius: 999px;
            background: #d9ad32;
            box-shadow: 0 0 0 5px rgba(217, 173, 50, .15);
        }

        .gold-dot.is-ready {
            background: #16a05d;
            box-shadow: 0 0 0 5px rgba(22, 160, 93, .14);
        }

        .gold-dot.is-error {
            background: #dc3545;
            box-shadow: 0 0 0 5px rgba(220, 53, 69, .12);
        }

        .info-body {
            padding: 16px 18px 18px;
        }

        .spec-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 9px;
        }

        .spec-item {
            min-width: 0;
            padding: 11px 12px;
            border-radius: 16px;
            background: #f8fbff;
            border: 1px solid #e4edf9;
        }

        .spec-label {
            color: #72809a;
            font-size: .76rem;
            font-weight: 900;
        }

        .spec-value {
            margin-top: 3px;
            color: #153665;
            font-size: .94rem;
            line-height: 1.35;
            font-weight: 1000;
            overflow-wrap: anywhere;
        }

        .action-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 9px;
            margin-top: 14px;
        }

        .action-btn {
            min-height: 52px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            border-radius: 17px;
            text-decoration: none;
            font-weight: 1000;
            border: 0;
        }

        .action-btn.ask {
            color: #2b1b00;
            background: linear-gradient(135deg, var(--gold-1), var(--gold-2), var(--gold-3));
            box-shadow: 0 12px 24px rgba(167, 119, 6, .15);
        }

        .action-btn.share {
            color: #fff;
            background: linear-gradient(135deg, var(--navy-3), var(--navy-2));
            box-shadow: 0 12px 24px rgba(13, 43, 82, .17);
        }

        .error-card {
            padding: 26px 18px;
            text-align: center;
            color: #64748b;
            font-weight: 900;
        }

        .error-card i {
            display: block;
            margin-bottom: 10px;
            color: #9aa8bc;
            font-size: 3rem;
        }

        .store-footer {
            padding: 18px 0 calc(18px + env(safe-area-inset-bottom));
            text-align: center;
        }

        .footer-pill {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding: 10px 16px;
            border-radius: 999px;
            color: #765500;
            background: rgba(255, 255, 255, .9);
            border: 1px solid rgba(10, 35, 71, .08);
            box-shadow: var(--shadow-soft);
            font-weight: 1000;
        }

        .image-modal .modal-content {
            border: 0;
            border-radius: 24px;
            overflow: hidden;
            background: #071529;
            box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
        }

        .image-modal .modal-header {
            border: 0;
            color: #fff;
            background: linear-gradient(135deg, var(--navy-3), var(--navy-1));
        }

        .image-modal .modal-body {
            padding: 0;
            background: #050d19;
        }

        .modal-image {
            width: 100%;
            max-height: 82vh;
            display: block;
            object-fit: contain;
        }

        .copy-helper {
            position: fixed;
            left: -9999px;
            width: 1px;
            height: 1px;
            opacity: 0;
        }

        .toast-lite {
            position: fixed;
            left: 50%;
            bottom: calc(18px + env(safe-area-inset-bottom));
            z-index: 2100;
            transform: translate(-50%, 14px);
            padding: 10px 15px;
            border-radius: 999px;
            color: #fff;
            background: rgba(6, 18, 38, .92);
            box-shadow: 0 14px 32px rgba(0, 0, 0, .24);
            font-weight: 900;
            opacity: 0;
            pointer-events: none;
            transition: .18s ease;
        }

        .toast-lite.is-show {
            opacity: 1;
            transform: translate(-50%, 0);
        }

        @media (max-width: 991.98px) {
            .detail-shell {
                grid-template-columns: 1fr;
            }

            .gallery-card {
                position: static;
            }
        }

        @media (max-width: 575.98px) {
.page-wrap {
                padding-top: 12px;
            }

            .gallery-card,
            .info-card {
                border-radius: 22px;
            }

            .gallery-card {
                padding: 10px;
            }

            .main-image-button,
            .image-empty {
                border-radius: 18px;
            }

            .thumb-strip {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }

            .info-head {
                padding: 16px 14px 14px;
            }

            .info-body {
                padding: 14px;
            }

            .spec-grid {
                grid-template-columns: 1fr 1fr;
                gap: 7px;
            }

            .spec-item {
                padding: 10px;
            }

            .action-grid {
                grid-template-columns: 1fr;
            }

        }

/* clip_used / แหนบมือ2 dimensions */
.clip-spec-item {
    background:
        radial-gradient(180px 70px at 100% 0%, rgba(246, 216, 120, .16), transparent 70%),
        linear-gradient(180deg, #ffffff, #f7fbff);
    border-color: rgba(47, 115, 214, .12) !important;
}

.clip-spec-item .spec-label {
    color: #52647b;
}

.clip-spec-item .spec-value {
    color: #0b2e63;
}