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

        .page-shell {
            max-width: 1180px;
            padding-top: 18px;
            padding-bottom: 46px;
        }

        .hero {
            position: relative;
            overflow: hidden;
            padding: 24px;
            border: 1px solid var(--line);
            border-radius: 28px;
            background:
                radial-gradient(420px 180px at 100% 0, rgba(255, 213, 106, .20), transparent 70%),
                linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(245, 250, 255, .94));
            box-shadow: var(--shadow);
        }

        .hero::before {
            content: "";
            position: absolute;
            width: 170px;
            height: 170px;
            left: -72px;
            top: -88px;
            border-radius: 50%;
            background: rgba(47, 115, 214, .08);
        }

        .eyebrow {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 6px 10px;
            border-radius: 999px;
            color: #815c00;
            background: rgba(255, 213, 106, .22);
            font-size: .76rem;
            font-weight: 900;
            letter-spacing: .04em;
        }

        .hero h1 {
            position: relative;
            margin: 11px 0 5px;
            color: #0b3268;
            font-size: clamp(1.55rem, 4vw, 2.45rem);
            font-weight: 900;
            letter-spacing: -.02em;
        }

        .hero p {
            position: relative;
            margin: 0;
            color: var(--muted);
            font-weight: 600;
        }

        .hero-metrics {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 18px;
        }

        .metric {
            min-width: 140px;
            padding: 10px 13px;
            border: 1px solid var(--line);
            border-radius: 17px;
            background: rgba(255, 255, 255, .78);
        }

        .metric-label {
            color: var(--muted);
            font-size: .74rem;
            font-weight: 700;
        }

        .metric-value {
            margin-top: 2px;
            color: #0b3268;
            font-size: 1.08rem;
            font-weight: 900;
        }

        .filter-panel {
            margin-top: 14px;
            padding: 14px;
            border: 1px solid var(--line);
            border-radius: 22px;
            background: var(--surface);
            box-shadow: 0 12px 32px rgba(18, 50, 92, .09);
        }

        .search-input {
            min-height: 48px;
            border: 1px solid rgba(13, 43, 82, .14);
            border-radius: 15px;
            padding-left: 43px;
            font-weight: 700;
        }

        .search-input:focus {
            border-color: rgba(215, 164, 35, .75);
            box-shadow: 0 0 0 4px rgba(255, 213, 106, .20);
        }

        .search-wrap {
            position: relative;
        }

        .search-wrap>i {
            position: absolute;
            left: 16px;
            top: 50%;
            z-index: 2;
            color: #66809f;
            transform: translateY(-50%);
        }

        .btn-gold,
        .btn-navy,
        .btn-soft {
            min-height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            border-radius: 15px;
            font-weight: 900;
        }

        .btn-gold {
            border: 0;
            color: #251900;
            background: linear-gradient(135deg, var(--gold-1), var(--gold-2) 42%, var(--gold-3));
        }

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

        .btn-soft {
            color: #174577;
            border: 1px solid var(--line);
            background: #fff;
        }

        .type-scroller {
            display: flex;
            gap: 8px;
            margin-top: 12px;
            padding-bottom: 2px;
            overflow-x: auto;
            scrollbar-width: thin;
        }

        .type-chip {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 40px;
            padding: 0 13px;
            border: 1px solid var(--line);
            border-radius: 999px;
            color: #174577;
            background: #fff;
            font-weight: 800;
        }

        .type-chip.active {
            color: #251900;
            border-color: rgba(215, 164, 35, .45);
            background: linear-gradient(135deg, #fff9dc, #ffe38e);
        }

        .type-count {
            padding: 2px 7px;
            border-radius: 999px;
            background: rgba(13, 43, 82, .08);
            font-size: .72rem;
        }

        .result-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin: 22px 2px 12px;
        }

        .result-title {
            color: #0b3268;
            font-size: 1rem;
            font-weight: 900;
        }

        .result-note {
            color: var(--muted);
            font-size: .76rem;
            font-weight: 600;
            text-align: right;
        }

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

        .product-card {
            position: relative;
            min-width: 0;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 21px;
            background: rgba(255, 255, 255, .96);
            box-shadow: 0 12px 30px rgba(18, 50, 92, .10);
            transition: transform .16s ease, box-shadow .16s ease;
        }

        .product-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 18px 40px rgba(18, 50, 92, .15);
        }

        .photo-button {
            position: relative;
            width: 100%;
            display: block;
            padding: 0;
            border: 0;
            overflow: hidden;
            color: inherit;
            background: #eff5fb;
            cursor: pointer;
        }

        .product-photo,
        .photo-empty {
            width: 100%;
            aspect-ratio: 1 / 1;
            display: block;
        }

        .product-photo {
            object-fit: cover;
        }

        .photo-empty {
            display: grid;
            place-items: center;
            color: #55749a;
            font-size: 2.4rem;
            background: linear-gradient(135deg, #edf5ff, #fff6d1);
        }

        .photo-shade {
            position: absolute;
            inset: auto 0 0;
            height: 42%;
            background: linear-gradient(transparent, rgba(8, 24, 45, .62));
            pointer-events: none;
        }

        .photo-cta {
            position: absolute;
            left: 9px;
            bottom: 9px;
            display: inline-flex;
            gap: 5px;
            align-items: center;
            color: #fff;
            font-size: .69rem;
            font-weight: 800;
        }

        .available-badge {
            position: absolute;
            top: 9px;
            right: 9px;
            padding: 5px 9px;
            border-radius: 999px;
            color: #0c6a3c;
            background: rgba(239, 255, 247, .94);
            border: 1px solid rgba(12, 106, 60, .15);
            font-size: .67rem;
            font-weight: 900;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
        }

        .photo-count {
            position: absolute;
            left: 9px;
            top: 9px;
            padding: 4px 8px;
            border-radius: 999px;
            color: #fff;
            background: rgba(8, 24, 45, .72);
            font-size: .66rem;
            font-weight: 800;
        }

        .product-body {
            padding: 11px;
        }

        .product-name {
            min-height: 2.45em;
            color: #0b3268;
            font-size: .91rem;
            line-height: 1.23;
            font-weight: 900;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .product-code {
            margin-top: 5px;
            color: var(--muted);
            font-size: .68rem;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .product-facts {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 7px;
            margin-top: 10px;
        }

        .fact {
            min-width: 0;
            padding: 8px;
            border: 1px solid rgba(13, 43, 82, .08);
            border-radius: 13px;
            background: linear-gradient(180deg, #f8fbff, #fff);
        }

        .fact-label {
            color: var(--muted);
            font-size: .62rem;
            font-weight: 700;
        }

        .fact-value {
            margin-top: 2px;
            color: #143e70;
            font-size: .78rem;
            font-weight: 900;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .price-row {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 8px;
            margin-top: 11px;
            padding-top: 10px;
            border-top: 1px dashed rgba(13, 43, 82, .15);
        }

        .price-label {
            color: var(--muted);
            font-size: .65rem;
            font-weight: 700;
        }

        .price-value {
            color: #a16a00;
            font-size: 1rem;
            font-weight: 900;
            white-space: nowrap;
        }

        .empty-state,
        .error-state {
            padding: 42px 20px;
            border: 1px solid var(--line);
            border-radius: 24px;
            background: rgba(255, 255, 255, .92);
            text-align: center;
            box-shadow: var(--shadow);
        }

        .empty-icon {
            width: 66px;
            height: 66px;
            display: grid;
            place-items: center;
            margin: 0 auto 12px;
            border-radius: 22px;
            color: #174577;
            font-size: 1.8rem;
            background: linear-gradient(135deg, #edf5ff, #fff2b7);
        }

        .pagination {
            gap: 5px;
        }

        .pagination .page-link {
            min-width: 40px;
            min-height: 40px;
            display: grid;
            place-items: center;
            border: 1px solid var(--line);
            border-radius: 13px !important;
            color: #174577;
            background: #fff;
            font-weight: 800;
        }

        .pagination .active .page-link {
            color: #fff;
            border-color: var(--navy-2);
            background: var(--navy-2);
        }

        .page-footer {
            margin-top: 28px;
            padding: 18px;
            color: var(--muted);
            text-align: center;
            font-size: .78rem;
            font-weight: 600;
        }

        @media (min-width: 576px) {
            .product-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 14px;
            }

            .product-body {
                padding: 14px;
            }

            .product-name {
                font-size: 1rem;
            }
        }

        @media (min-width: 992px) {
            .product-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 17px;
            }

            .hero {
                padding: 30px;
            }
        }

        @media (max-width: 575.98px) {
            .container {
                padding-left: 10px;
                padding-right: 10px;
            }

            .page-shell {
                padding-top: 11px;
            }

            .hero {
                padding: 17px;
                border-radius: 22px;
            }

            .hero p {
                font-size: .82rem;
            }

            .hero-metrics {
                gap: 7px;
            }

            .metric {
                min-width: 0;
                flex: 1 1 calc(50% - 7px);
                padding: 9px;
            }

            .metric-value {
                font-size: .91rem;
            }

            .filter-panel {
                padding: 10px;
                border-radius: 18px;
            }

            .search-input,
            .btn-gold,
            .btn-navy,
            .btn-soft {
                min-height: 43px;
                font-size: .83rem;
            }

            .product-grid {
                gap: 8px;
            }

            .product-card {
                border-radius: 17px;
            }

            .product-body {
                padding: 9px;
            }

            .product-name {
                font-size: .79rem;
            }

            .product-code {
                font-size: .59rem;
            }

            .product-facts {
                gap: 5px;
                margin-top: 8px;
            }

            .fact {
                padding: 6px;
                border-radius: 10px;
            }

            .fact-label {
                font-size: .55rem;
            }

            .fact-value {
                font-size: .67rem;
            }

            .price-row {
                margin-top: 8px;
                padding-top: 8px;
            }

            .price-label {
                font-size: .57rem;
            }

            .price-value {
                font-size: .88rem;
            }

            .available-badge {
                top: 6px;
                right: 6px;
                padding: 4px 6px;
                font-size: .57rem;
            }

            .photo-count {
                top: 6px;
                left: 6px;
                font-size: .57rem;
            }

            .photo-cta {
                left: 7px;
                bottom: 7px;
                font-size: .59rem;
            }

            .result-note {
                max-width: 56%;
                font-size: .62rem;
            }
        }

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                scroll-behavior: auto !important;
                transition: none !important;
            }
        }