:root {
        --shop-gold: #cda429;
        --shop-gold-light: #ffd873;
        --shop-card-bg: #14141c;
        --shop-border: rgba(205, 164, 41, 0.18);
    }
    .shop-wrap { padding: 1.5rem 0 3rem; min-height: 60vh; }
    .shop-breadcrumb { font-size: .8rem; color: #9a8f6f; margin-bottom: 1rem; }
    .shop-breadcrumb a { color: var(--shop-gold-light); text-decoration: none; }
    .shop-title { color: #fff; font-weight: 800; font-size: 1.4rem; margin: 0; }
    .shop-title small { display:block; font-size:.7rem; letter-spacing:2px; color: var(--shop-gold); text-transform: uppercase; }

    /* Toolbar */
    .shop-toolbar { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin: 1rem 0; }
    .shop-search { flex:1 1 240px; }
    .shop-search input, .shop-select {
        width:100%; background: var(--shop-card-bg); border:1px solid var(--shop-border);
        color:#fff; border-radius: 10px; padding:.55rem .9rem; font-size:.85rem;
    }
    .shop-select { width:auto; }

    /* Category chips */
    .shop-cats { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
    .shop-chip {
        padding:.4rem .9rem; border-radius:20px; font-size:.8rem; text-decoration:none;
        border:1px solid var(--shop-border); color:#cdbf8e; background: rgba(255,255,255,.02);
    }
    .shop-chip.active, .shop-chip:hover { background: linear-gradient(310deg,#442a14,#e5c325); color:#1a1a1a; font-weight:700; }

    /* Grid + card */
    .shop-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:14px; }
    .shop-card {
        display:block; background: var(--shop-card-bg); border:1px solid var(--shop-border);
        border-radius:14px; overflow:hidden; text-decoration:none; transition:.2s;
    }
    .shop-card:hover { transform: translateY(-3px); border-color: var(--shop-gold); box-shadow:0 8px 24px rgba(0,0,0,.4); }
    .shop-card-img { position:relative; aspect-ratio:1/1; background:#0e0e14; }
    .shop-card-img img { width:100%; height:100%; object-fit:cover; }
    .shop-badge-discount { position:absolute; top:8px; left:8px; background:#e52525; color:#fff; font-size:.7rem; font-weight:700; padding:2px 7px; border-radius:6px; }
    .shop-badge-oos { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); color:#fff; font-weight:700; }
    .shop-card-body { padding:.6rem .7rem .8rem; }
    .shop-card-name { color:#eee; font-size:.85rem; line-height:1.3; height:2.3em; overflow:hidden; }
    .shop-card-price { margin-top:.4rem; }
    .price-now { color: var(--shop-gold-light); font-weight:800; font-size:1rem; }
    .price-old { color:#777; text-decoration:line-through; font-size:.78rem; margin-left:5px; }
    .shop-card-meta { display:flex; align-items:center; gap:8px; margin-top:.35rem; font-size:.72rem; color:#8d8260; }
    .shop-card-meta .fa-star { color: var(--shop-gold); }

    /* Alerts */
    .shop-alert { border-radius:12px; font-size:.85rem; border:none; }
    .shop-alert-success { background: rgba(46,160,67,.15); color:#7fe39a; border:1px solid rgba(46,160,67,.4); }
    .shop-alert-error { background: rgba(229,37,37,.12); color:#ff9b9b; border:1px solid rgba(229,37,37,.4); }

    /* Buttons */
    .shop-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border:none; cursor:pointer;
        border-radius:12px; padding:.7rem 1.3rem; font-weight:700; font-size:.9rem; text-decoration:none; }
    .shop-btn-gold { background: linear-gradient(310deg,#442a14,#e5c325); color:#1a1a1a; }
    .shop-btn-outline { background:transparent; border:1px solid var(--shop-gold); color:var(--shop-gold-light); }
    .shop-btn-block { width:100%; }
    .shop-btn:disabled { opacity:.5; cursor:not-allowed; }

    /* Panels (product / cart / checkout) */
    .shop-panel { background: var(--shop-card-bg); border:1px solid var(--shop-border); border-radius:16px; padding:1.2rem; margin-bottom:1rem; }
    .shop-panel h3 { color:#fff; font-size:1rem; font-weight:700; margin-bottom:.9rem; }

    /* Product detail */
    .pd-gallery-main { aspect-ratio:1/1; background:#0e0e14; border:1px solid var(--shop-border); border-radius:16px; overflow:hidden; }
    .pd-gallery-main img { width:100%; height:100%; object-fit:contain; }
    .pd-thumbs { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
    .pd-thumb { width:64px; height:64px; border-radius:8px; overflow:hidden; border:2px solid transparent; cursor:pointer; }
    .pd-thumb.active { border-color: var(--shop-gold); }
    .pd-thumb img { width:100%; height:100%; object-fit:cover; }
    .pd-name { color:#fff; font-size:1.4rem; font-weight:800; }
    .pd-price { color: var(--shop-gold-light); font-size:1.8rem; font-weight:800; margin:.5rem 0; }
    .pd-price .old { color:#777; text-decoration:line-through; font-size:1rem; margin-left:8px; }
    .pd-variant-btn {
        border:1px solid var(--shop-border); background:rgba(255,255,255,.03); color:#ddd;
        border-radius:10px; padding:.5rem .9rem; cursor:pointer; font-size:.85rem; margin:0 6px 6px 0;
    }
    .pd-variant-btn.active { border-color: var(--shop-gold); background: rgba(205,164,41,.15); color: var(--shop-gold-light); }
    .pd-variant-btn:disabled { opacity:.4; cursor:not-allowed; text-decoration:line-through; }
    .qty-box { display:inline-flex; align-items:center; border:1px solid var(--shop-border); border-radius:10px; overflow:hidden; }
    .qty-box button { background:rgba(255,255,255,.05); color:#fff; border:none; width:36px; height:38px; font-size:1.1rem; cursor:pointer; }
    .qty-box input { width:50px; height:38px; text-align:center; background:transparent; border:none; color:#fff; }

    /* Cart / checkout rows */
    .shop-line { display:flex; gap:12px; align-items:center; padding:.8rem 0; border-bottom:1px solid var(--shop-border); }
    .shop-line:last-child { border-bottom:none; }
    .shop-line img { width:64px; height:64px; object-fit:cover; border-radius:10px; }
    .shop-line .ln-name { color:#eee; font-size:.9rem; }
    .shop-line .ln-variant { color:#8d8260; font-size:.75rem; }
    .summary-row { display:flex; justify-content:space-between; color:#cdbf8e; font-size:.9rem; padding:.3rem 0; }
    .summary-row.total { color: var(--shop-gold-light); font-weight:800; font-size:1.2rem; border-top:1px solid var(--shop-border); padding-top:.6rem; margin-top:.4rem; }

    .addr-card, .pay-card { border:1px solid var(--shop-border); border-radius:12px; padding:.8rem 1rem; margin-bottom:.6rem; cursor:pointer; color:#ddd; }
    .addr-card.active, .pay-card.active { border-color: var(--shop-gold); background: rgba(205,164,41,.08); }

    .shop-form-label { color:#cdbf8e; font-size:.8rem; margin-bottom:.2rem; }
    .shop-input { width:100%; background:#0e0e14; border:1px solid var(--shop-border); color:#fff; border-radius:10px; padding:.55rem .8rem; font-size:.85rem; }

    .shop-status { display:inline-block; padding:3px 12px; border-radius:20px; font-size:.78rem; font-weight:700; }
    .shop-empty { text-align:center; color:#8d8260; padding:3rem 1rem; }
    .shop-empty i { font-size:3rem; color:#3a3522; display:block; margin-bottom:1rem; }

    /* ===== Self-contained grid/flex =====
       The theme's app.css defines `.row > * { width:100% }` and loads AFTER the
       Bootstrap CDN, while the responsive `.col-lg-*` width rules were stripped by
       PurgeCSS. That collapses every column to full width. We re-assert the layout
       scoped under .shop-wrap (higher specificity + !important + injected last in <head>). */
    .shop-wrap .row { display:flex !important; flex-wrap:wrap !important; }
    .shop-wrap .row > * { max-width:100%; }
    .shop-wrap .col-12 { width:100% !important; }
    @media (min-width: 768px) {
        .shop-wrap .col-md-6 { width:50% !important; }
    }
    @media (min-width: 992px) {
        .shop-wrap .col-lg-4 { width:33.3333% !important; }
        .shop-wrap .col-lg-5 { width:41.6667% !important; }
        .shop-wrap .col-lg-7 { width:58.3333% !important; }
        .shop-wrap .col-lg-8 { width:66.6667% !important; }
    }
    /* flex/spacing utilities guard (in case any were purged from the theme build) */
    .shop-wrap .d-flex { display:flex !important; }
    .shop-wrap .d-block { display:block !important; }
    .shop-wrap .d-inline { display:inline !important; }
    .shop-wrap .flex-wrap { flex-wrap:wrap !important; }
    .shop-wrap .flex-grow-1 { flex:1 1 auto !important; }
    .shop-wrap .align-items-center { align-items:center !important; }
    .shop-wrap .align-items-start { align-items:flex-start !important; }
    .shop-wrap .justify-content-between { justify-content:space-between !important; }
    .shop-wrap .gap-2 { gap:.5rem !important; }
    .shop-wrap .gap-3 { gap:1rem !important; }
    .shop-wrap .text-end { text-align:right !important; }
    .shop-wrap .text-center { text-align:center !important; }
    .shop-wrap .ms-auto { margin-left:auto !important; }
    .shop-wrap .w-100 { width:100% !important; }
    /* NB: do NOT add `gap` to .row — Bootstrap gutters are internal padding (border-box),
       so col widths already sum to ~100%; a gap would push them over and wrap. */

    /* ===== Product detail — richer card layout ===== */
    .pd-info { background: linear-gradient(180deg, #181820, #111118); border:1px solid var(--shop-border);
        border-radius:18px; padding:1.5rem 1.6rem; box-shadow:0 10px 40px rgba(0,0,0,.35); }
    .pd-cat { display:inline-block; font-size:.72rem; color:var(--shop-gold); border:1px solid var(--shop-border);
        padding:3px 12px; border-radius:20px; margin-bottom:.7rem; letter-spacing:.3px; }
    .pd-name { color:#fff; font-size:1.55rem; font-weight:800; line-height:1.3; margin:0 0 .6rem; }
    .pd-subrow { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:.82rem; color:#9a8f6f;
        padding-bottom:1rem; border-bottom:1px solid var(--shop-border); }
    .pd-subrow .stars { color:var(--shop-gold); letter-spacing:1px; }
    .pd-subrow .sep { color:#3f3b2c; }
    .pd-price-box { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
        background:linear-gradient(135deg, rgba(205,164,41,.14), rgba(205,164,41,.02));
        border:1px solid rgba(205,164,41,.3); border-radius:14px; padding:1rem 1.2rem; margin:1.1rem 0; }
    .pd-price { color:var(--shop-gold-light); font-size:2.1rem; font-weight:800; line-height:1; }
    .pd-price .old { color:#7d7355; text-decoration:line-through; font-size:1rem; font-weight:500; margin-left:10px; }
    .pd-off { background:linear-gradient(135deg,#e5523f,#e52525); color:#fff; font-weight:800; font-size:.85rem;
        padding:4px 11px; border-radius:9px; }
    .pd-label { color:#cdbf8e; font-size:.85rem; font-weight:700; margin-bottom:.6rem; display:block; }
    .pd-variant-btn { font-weight:600; padding:.55rem 1rem; }
    .pd-buy { box-shadow:0 8px 24px rgba(205,164,41,.28); font-size:1rem; padding:.85rem 1.3rem; }
    .pd-benefits { list-style:none; padding:1rem 0 0; margin:1.1rem 0 0; border-top:1px dashed var(--shop-border);
        display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
    .pd-benefits li { display:flex; align-items:center; gap:.55rem; font-size:.8rem; color:#bdb290; }
    .pd-benefits i { color:var(--shop-gold); width:20px; text-align:center; font-size:.95rem; }
    .pd-stock-pill { font-size:.82rem; color:#7fe39a; font-weight:600; }
    .pd-section-title { display:flex; align-items:center; gap:.5rem; color:#fff; font-size:1.05rem; font-weight:700; margin-bottom:1rem; }
    .pd-section-title::before { content:''; width:4px; height:18px; border-radius:3px; background:linear-gradient(180deg,var(--shop-gold-light),var(--shop-gold)); }
    .review-item { display:flex; gap:12px; padding:.9rem 0; border-bottom:1px solid var(--shop-border); }
    .review-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#442a14,#cda429);
        display:flex; align-items:center; justify-content:center; color:#1a1a1a; font-weight:800; flex-shrink:0; }
    @media (max-width: 575px){ .pd-benefits { grid-template-columns:1fr; } .pd-price { font-size:1.7rem; } }