/* ========== WC Cannabis Shop — Modern CSS (v2) ========== */



/* ── Variables ── */
:root {
    --wccs-primary:       #1D9E75;
    --wccs-primary-light: #E1F5EE;
    --wccs-primary-mid:   #5DCAA5;
    --wccs-primary-dark:  #0F6E56;
    --wccs-primary-text:  #085041;

    --wccs-bg:        #f4f6f3;
    --wccs-surface:   #ffffff;
    --wccs-surface-2: #f0f2ef;
    --wccs-border:    rgba(0, 0, 0, .08);
    --wccs-border-md: rgba(0, 0, 0, .14);
    --wccs-text:      #1a1c18;
    --wccs-muted:     #6b7068;
    --wccs-subtle:    #9aa096;

    --wccs-radius-sm: 6px;
    --wccs-radius:    10px;
    --wccs-radius-lg: 16px;
    --wccs-radius-xl: 24px;

    --wccs-shadow-sm: 0 1px 3px rgba(0,0,0,.06);
    --wccs-shadow:    0 4px 14px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
    --wccs-shadow-lg: 0 12px 32px rgba(0,0,0,.11), 0 2px 6px rgba(0,0,0,.05);

    --wccs-tr: .18s cubic-bezier(.4, 0, .2, 1);

    --wccs-indica:  #7F77DD;
    --wccs-sativa:  #378ADD;
    --wccs-hybrid:  #EF9F27;
    --wccs-cbd:     #639922;
}

@media (prefers-color-scheme: dark) {
    :root {
        --wccs-primary:       #5DCAA5;
        --wccs-primary-light: #04342C;
        --wccs-primary-mid:   #1D9E75;
        --wccs-primary-dark:  #9FE1CB;
        --wccs-primary-text:  #E1F5EE;

        --wccs-bg:        #111310;
        --wccs-surface:   #1b1e1a;
        --wccs-surface-2: #23261f;
        --wccs-border:    rgba(255,255,255,.07);
        --wccs-border-md: rgba(255,255,255,.13);
        --wccs-text:      #e6ebe3;
        --wccs-muted:     #8a9087;
        --wccs-subtle:    #60645e;

        --wccs-shadow-sm: 0 1px 3px rgba(0,0,0,.35);
        --wccs-shadow:    0 4px 14px rgba(0,0,0,.4);
        --wccs-shadow-lg: 0 12px 32px rgba(0,0,0,.5);
    }
}

/* ── Reset ── */
.wccs-shop *, .wccs-shop *::before, .wccs-shop *::after {
    box-sizing: border-box;
}

/* ══════════════════════════════════════════
   WRAPPER  —  vertical stack:
   [category bar]
   [sidebar | main]
══════════════════════════════════════════ */
.wccs-shop {
    display: flex;
    flex-direction: column;   /* stack cat-bar on top, then row below */
    gap: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    font-size: 14px;
    color: var(--wccs-text);
    background: var(--wccs-bg);
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px;
    min-height: 100vh;
}

/* Inner row that holds sidebar + main */
.wccs-shop > .wccs-sidebar,
.wccs-shop > .wccs-main {
    /* these two become a flex-row via the inner wrapper below */
}

/* We need a flex-row wrapper for sidebar + main.
   Since the PHP doesn't have one, we use a CSS trick:
   make .wccs-sidebar + .wccs-main sit side-by-side
   by switching the shop back to a partial-row layout. */
.wccs-shop {
    display: grid;
    grid-template-areas:
        "cats  cats"
        "side  main";
    grid-template-columns: 230px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    row-gap: 20px;
}

/* ══════════════════════════════════════════
   CATEGORY BAR  (top, full width)
══════════════════════════════════════════ */
.wccs-category-icons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    background: #f5f5f5;
    border: 1px solid var(--wccs-border);
    border-radius: var(--wccs-radius-lg);
    padding: 12px 16px;
    box-shadow: var(--wccs-shadow-sm);
    width-max: 1200px;
}

.wccs-cat-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    width: 68px;
    transition: all var(--wccs-tr);
}

.wccs-cat-icon img,
.wccs-cat-placeholder {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: var(--wccs-surface-2);
    border: 2.5px solid transparent;
    transition: all var(--wccs-tr);
    overflow: hidden;
    flex-shrink: 0;
}

.wccs-cat-icon span {
    font-size: 10px;
    font-weight: 700;
    color: var(--wccs-muted);
    text-align: center;
    letter-spacing: .02em;
    line-height: 1.3;
}

.wccs-cat-icon:hover img,
.wccs-cat-icon:hover .wccs-cat-placeholder {
    border-color: var(--wccs-primary-mid);
    background: var(--wccs-primary-light);
    transform: scale(1.06);
    box-shadow: 0 4px 12px rgba(29,158,117,.18);
}

.wccs-cat-icon:hover span { color: var(--wccs-primary-dark); }

.wccs-cat-icon.active img,
.wccs-cat-icon.active .wccs-cat-placeholder {
    border-color: var(--wccs-primary);
    background: var(--wccs-primary-light);
    box-shadow: 0 0 0 3px rgba(29,158,117,.18);
}

.wccs-cat-icon.active span { color: var(--wccs-primary-text); font-weight: 800; }

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.wccs-sidebar {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: start;
    position: sticky;
    top: 20px;
}

/* Search */
.wccs-search-wrap {
    position: relative;
}

.wccs-search-wrap input {
    width: 100%;
    padding: 10px 38px 10px 38px;
    background: var(--wccs-surface);
    border: 1px solid var(--wccs-border);
    border-radius: var(--wccs-radius);
    font-size: 13px;
    color: var(--wccs-text);
    outline: none;
    transition: border-color var(--wccs-tr), box-shadow var(--wccs-tr);
    box-shadow: var(--wccs-shadow-sm);
}

.wccs-search-wrap input::placeholder { color: var(--wccs-subtle); }

.wccs-search-wrap input:focus {
    border-color: var(--wccs-primary);
    box-shadow: 0 0 0 3px rgba(29,158,117,.15);
}

.wccs-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    pointer-events: none;
    opacity: .45;
}

.wccs-search-clear {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: none;
    background: var(--wccs-surface-2);
    color: var(--wccs-muted);
    border-radius: 50%;
    font-size: 10px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: background var(--wccs-tr), color var(--wccs-tr);
}

.wccs-search-clear:hover { background: var(--wccs-primary); color: #fff; }
.wccs-search-clear.visible { display: flex; }

/* Filter panels */
.wccs-filter-group {
    background: var(--wccs-surface);
    border: 1px solid var(--wccs-border);
    border-radius: var(--wccs-radius);
    padding: 14px 16px;
    box-shadow: var(--wccs-shadow-sm);
}

.wccs-filter-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wccs-subtle);
    margin-bottom: 12px;
}

/* Clear (top) */
.wccs-clear-filters {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border: 1px solid var(--wccs-border-md);
    border-radius: 20px;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--wccs-muted);
    cursor: pointer;
    transition: all var(--wccs-tr);
}
.wccs-clear-filters:hover {
    background: #FCEBEB;
    border-color: #E24B4A;
    color: #A32D2D;
}

/* Strain buttons */
.wccs-strain-buttons,
.wccs-potency-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wccs-strain-btn,
.wccs-potency-btn {
    padding: 5px 12px;
    border: 1px solid var(--wccs-border-md);
    border-radius: 20px;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--wccs-muted);
    cursor: pointer;
    transition: all var(--wccs-tr);
}

.wccs-strain-btn:hover,
.wccs-potency-btn:hover {
    background: var(--wccs-primary-light);
    border-color: var(--wccs-primary-mid);
    color: var(--wccs-primary-dark);
}

.wccs-strain-btn.active,
.wccs-potency-btn.active {
    background: var(--wccs-primary);
    border-color: var(--wccs-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(29,158,117,.28);
}

/* Strain-specific active colors */
.wccs-strain-btn[data-strain="indica"].active { background: var(--wccs-indica); border-color: var(--wccs-indica); box-shadow: 0 2px 8px rgba(127,119,221,.3); }
.wccs-strain-btn[data-strain="sativa"].active { background: var(--wccs-sativa); border-color: var(--wccs-sativa); box-shadow: 0 2px 8px rgba(55,138,221,.3); }
.wccs-strain-btn[data-strain="hybrid"].active { background: var(--wccs-hybrid); border-color: var(--wccs-hybrid); box-shadow: 0 2px 8px rgba(239,159,39,.3); }
.wccs-strain-btn[data-strain="cbd"].active    { background: var(--wccs-cbd);    border-color: var(--wccs-cbd);    box-shadow: 0 2px 8px rgba(99,153,34,.3); }

/* Price checkboxes */
.wccs-price-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wccs-price-checkbox,
.wccs-special-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--wccs-text);
    user-select: none;
    position: relative;
    padding: 4px 5px;
    margin: 0 -5px;
    border-radius: var(--wccs-radius-sm);
    transition: background var(--wccs-tr);
}

.wccs-price-checkbox:hover,
.wccs-special-checkbox:hover {
    background: var(--wccs-primary-light);
}

.wccs-price-checkbox input[type="checkbox"],
.wccs-special-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.wccs-custom-checkbox rect { transition: all var(--wccs-tr); }
.wccs-checkmark { opacity: 0; transition: opacity var(--wccs-tr); }

.wccs-price-checkbox input:checked + svg rect,
.wccs-special-checkbox input:checked + svg rect {
    fill: var(--wccs-primary);
    stroke: var(--wccs-primary);
}

.wccs-price-checkbox input:checked + svg .wccs-checkmark,
.wccs-special-checkbox input:checked + svg .wccs-checkmark { opacity: 1; }

.wccs-price-checkbox:hover svg rect,
.wccs-special-checkbox:hover svg rect { stroke: var(--wccs-primary); }

/* Clear All */
.wccs-clear-all {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--wccs-border-md);
    border-radius: 20px;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #A32D2D;
    cursor: pointer;
    transition: all var(--wccs-tr);
}

.wccs-clear-all:hover {
    background: #FCEBEB;
    border-color: #E24B4A;
    color: #791F1F;
}

/* ══════════════════════════════════════════
   MAIN AREA
══════════════════════════════════════════ */
.wccs-main {
    grid-area: main;
    min-width: 0;
}

/* Results bar */
.wccs-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--wccs-border);
}

.wccs-count {
    font-size: 13px;
    color: var(--wccs-muted);
}
.wccs-count strong { color: var(--wccs-text); font-weight: 600; }

.wccs-sort {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wccs-sort label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--wccs-muted);
    accent-color: var(--wccs-primary);
}

.wccs-sort select {
    border: 1px solid var(--wccs-border-md);
    border-radius: var(--wccs-radius-sm);
    padding: 6px 10px;
    font-size: 13px;
    background: var(--wccs-surface);
    color: var(--wccs-text);
    outline: none;
    cursor: pointer;
    transition: border-color var(--wccs-tr), box-shadow var(--wccs-tr);
}
.wccs-sort select:focus {
    border-color: var(--wccs-primary);
    box-shadow: 0 0 0 3px rgba(29,158,117,.12);
}

/* Product grid */
.wccs-grid {
    display: grid;
    grid-template-columns: repeat(var(--wccs-cols, 3), minmax(0, 1fr));
    gap: 16px;
}

/* ══════════════════════════════════════════
   PRODUCT CARD
══════════════════════════════════════════ */
.wccs-product-card {
    background: var(--wccs-surface);
    border: 1px solid var(--wccs-border);
    border-radius: var(--wccs-radius-lg);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform var(--wccs-tr), box-shadow var(--wccs-tr), border-color var(--wccs-tr);
    box-shadow: var(--wccs-shadow-sm);
}

.wccs-product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--wccs-shadow-lg);
    border-color: var(--wccs-border-md);
}

/* Strain badge */
.wccs-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: .08em;
    text-transform: uppercase;
    z-index: 1;
    box-shadow: 0 1px 5px rgba(0,0,0,.22);
}

/* Product image */
.wccs-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wccs-surface-2);
    padding: 22px;
    min-height: 168px;
    text-decoration: none;
    transition: background var(--wccs-tr);
    overflow: hidden;
}

.wccs-product-card:hover .wccs-product-image {
    background: var(--wccs-primary-light);
}

.wccs-product-image img {
    max-height: 148px;
    width: 100%;
    object-fit: contain;
    transition: transform var(--wccs-tr);
}

.wccs-product-card:hover .wccs-product-image img {
    transform: scale(1.05);
}

/* Product info */
.wccs-product-info {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    border-top: 1px solid var(--wccs-border);
}

.wccs-product-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    line-height: 1.45;
    color: var(--wccs-text);
}

.wccs-product-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--wccs-tr);
}

.wccs-product-title a:hover { color: var(--wccs-primary); }

/* Price row */
.wccs-product-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wccs-qty {
    background: var(--wccs-primary-light);
    color: var(--wccs-primary-dark);
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

.wccs-price {
    font-weight: 700;
    font-size: 15px;
    color: var(--wccs-text);
}

/* Add to cart */
.wccs-add-to-cart {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--wccs-primary);
    border-radius: var(--wccs-radius);
    background: transparent;
    color: var(--wccs-primary);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--wccs-tr), color var(--wccs-tr), box-shadow var(--wccs-tr), transform var(--wccs-tr);
    margin-top: auto;
}

.wccs-add-to-cart:hover {
    background: var(--wccs-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(29,158,117,.3);
}

.wccs-add-to-cart:active {
    transform: scale(.98);
}

/* ══════════════════════════════════════════
   STATES
══════════════════════════════════════════ */
.wccs-loading {
    text-align: center;
    padding: 48px;
    color: var(--wccs-muted);
    font-size: 14px;
}

.wccs-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid var(--wccs-border);
    border-top-color: var(--wccs-primary);
    border-radius: 50%;
    animation: wccs-spin .7s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes wccs-spin { to { transform: rotate(360deg); } }

.wccs-no-results {
    text-align: center;
    padding: 64px 20px;
    color: var(--wccs-muted);
    font-size: 15px;
}

/* Pagination */
.wccs-pagination { text-align: center; margin-top: 28px; }

.wccs-load-more {
    padding: 12px 36px;
    border: 1px solid var(--wccs-border-md);
    border-radius: var(--wccs-radius);
    background: var(--wccs-surface);
    color: var(--wccs-text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    transition: all var(--wccs-tr);
    box-shadow: var(--wccs-shadow-sm);
}

.wccs-load-more:hover {
    background: var(--wccs-primary);
    color: #fff;
    border-color: var(--wccs-primary);
    box-shadow: 0 4px 16px rgba(29,158,117,.3);
}

.wccs-load-more[data-loading]::after { content: '…'; }

/* Hidden */
.wccs-product-card[hidden] { display: none !important; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

/* Medium screens — tighter sidebar */
@media (max-width: 1100px) {
    .wccs-shop {
        grid-template-columns: 210px 1fr;
        padding: 16px;
        column-gap: 18px;
    }
}

/* Tablet — collapse to single column, cat bar scrolls horizontally */
@media (max-width: 860px) {
    .wccs-shop {
        grid-template-areas:
            "cats"
            "side"
            "main";
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 14px;
    }

    .wccs-sidebar {
        position: static;   /* un-stick on mobile */
        width: 100%;
    }

    .wccs-category-icons {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 12px 16px;
        gap: 8px;
    }
    .wccs-category-icons::-webkit-scrollbar { display: none; }

    .wccs-cat-icon { flex: 0 0 auto; }
}

/* Small phones — 2-column product grid */
@media (max-width: 600px) {
    .wccs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .wccs-results-bar { flex-direction: column; align-items: flex-start; }
}

/* Very small phones — single column grid */
@media (max-width: 360px) {
    .wccs-grid { grid-template-columns: 1fr !important; }
}

/* ========== WC Cannabis Shop — Quick View Popup ========== */

/* ── Overlay ── */
.wccs-qv-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.wccs-qv-overlay.wccs-qv-active {
    display: flex;
}

/* Backdrop */
.wccs-qv-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: wccs-qv-fade-in .2s ease;
}

/* Modal */
.wccs-qv-modal {
    position: relative;
    background: #ffffff;
    border-radius: 18px;
    width: 100%;
    max-width: 780px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .22), 0 4px 16px rgba(0, 0, 0, .1);
    animation: wccs-qv-slide-up .25s cubic-bezier(.34, 1.56, .64, 1);
}

@media (prefers-color-scheme: dark) {
    .wccs-qv-modal {
        background: #1b1e1a;
        color: #e6ebe3;
    }
}

/* Close button */
.wccs-qv-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    /*width: 36px;*/
    height: 36px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 50%;
    background: #ffffff;
    color: #3a3a3a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    font-size: 0;
    line-height: 0;
}
.wccs-qv-close:hover {
    /*background: #f5f5f5;*/
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.wccs-qv-close svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}
@media (prefers-color-scheme: dark) {
    .wccs-qv-close {
        background: #23261f;
        border-color: rgba(255,255,255,.1);
        color: #e6ebe3;
    }
    .wccs-qv-close:hover { background: #2e312b; }
}

/* Inner layout — side by side */
.wccs-qv-inner {
    display: flex;
    gap: 0;
}

/* Image panel */
.wccs-qv-image-wrap {
    flex: 0 0 320px;
    position: relative;
    background: #f2f4f1;
    border-radius: 18px 0 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    min-height: 340px;
}
@media (prefers-color-scheme: dark) {
    .wccs-qv-image-wrap { background: #23261f; }
}

.wccs-qv-image {
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    display: block;
}

/* Strain badge */
.wccs-qv-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 11px;
    border-radius: 20px;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* Details panel */
.wccs-qv-details {
    flex: 1;
    padding: 36px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.wccs-qv-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: #1a1c18;
    margin: 0;
}
@media (prefers-color-scheme: dark) {
    .wccs-qv-title { color: #e6ebe3; }
}

/* Price row */
.wccs-qv-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.wccs-qv-price {
    font-size: 26px;
    font-weight: 800;
    color: #1D9E75;
    letter-spacing: -.02em;
}
.wccs-qv-unit {
    font-size: 13px;
    color: #9aa096;
}

/* Description */
.wccs-qv-description {
    font-size: 13px;
    line-height: 1.7;
    color: #6b7068;
    flex: 1;
    max-height: 180px;
    overflow-y: auto;
    margin-top: 8px;
}
.wccs-qv-description p { margin: 0 0 10px; }
.wccs-qv-description p:last-child { margin-bottom: 0; }
.wccs-qv-description ul, .wccs-qv-description ol {
    margin: 0 0 10px;
    padding-left: 20px;
}
.wccs-qv-description ul:last-child,
.wccs-qv-description ol:last-child { margin-bottom: 0; }
@media (prefers-color-scheme: dark) {
    .wccs-qv-description { color: #8a9087; }
}

/* ── Variation selectors ── */
.wccs-qv-variations {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wccs-qv-attr-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wccs-qv-attr-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9aa096;
    cursor: default;
}

.wccs-qv-attr-select {
    width: 100%;
    padding: 9px 36px 9px 12px;
    border: 1.5px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    background-color: #f5f6f4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa096' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 13px;
    font-weight: 500;
    color: #1a1c18;
    cursor: pointer;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.wccs-qv-attr-select:focus {
    border-color: #1D9E75;
    box-shadow: 0 0 0 3px rgba(29, 158, 117, .12);
}

.wccs-qv-attr-select:hover {
    border-color: rgba(0, 0, 0, .22);
}

.wccs-qv-loading-vars {
    font-size: 13px;
    color: #9aa096;
    font-style: italic;
    margin: 0;
}

@media (prefers-color-scheme: dark) {
    .wccs-qv-attr-select {
        background-color: #23261f;
        border-color: rgba(255, 255, 255, .12);
        color: #e6ebe3;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2360645e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    }
    .wccs-qv-attr-select:focus {
        border-color: #5DCAA5;
        box-shadow: 0 0 0 3px rgba(93, 202, 165, .15);
    }
    .wccs-qv-attr-select:hover {
        border-color: rgba(255, 255, 255, .22);
    }
}

/* ── Actions row ── */
.wccs-qv-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

/* Quantity control */
.wccs-qv-qty-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid rgba(0,0,0,.12);
    border-radius: 10px;
    overflow: hidden;
    background: #f4f6f3;
    flex-shrink: 0;
}
@media (prefers-color-scheme: dark) {
    .wccs-qv-qty-wrap {
        border-color: rgba(255,255,255,.1);
        background: #23261f;
    }
}

.wccs-qv-qty-btn {
    width: 42px;
    height: 44px;
    border: none;
    background: transparent;
    color: #1D9E75;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    font-size: 0;
    line-height: 0;
    padding: 0;
}
.wccs-qv-qty-btn svg {
    width: 14px;
    height: 14px;
    pointer-events: none;
}
.wccs-qv-qty-btn:hover:not(:disabled) { background: #E1F5EE; }
.wccs-qv-qty-btn:disabled { color: #ccc; cursor: not-allowed; }
.wccs-qv-qty-btn:not(:disabled) { color: #1D9E75; }
@media (prefers-color-scheme: dark) {
    .wccs-qv-qty-btn:hover:not(:disabled) { background: #04342C; }
    .wccs-qv-qty-btn:disabled { color: #444; }
    .wccs-qv-qty-btn:not(:disabled) { color: #5DCAA5; }
}

.wccs-qv-qty-display {
    min-width: 56px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #1a1c18;
    padding: 0 8px;
    border-left: 1px solid rgba(0,0,0,.08);
    border-right: 1px solid rgba(0,0,0,.08);
    line-height: 44px;
    user-select: none;
}
@media (prefers-color-scheme: dark) {
    .wccs-qv-qty-display {
        color: #e6ebe3;
        border-color: rgba(255,255,255,.08);
    }
}

/* Add to cart button */
.wccs-qv-atc {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: #1D9E75;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s, transform .12s, box-shadow .18s;
    box-shadow: 0 4px 14px rgba(29,158,117,.3);
    padding: 0 16px;
}
.wccs-qv-atc:hover {
    background: #0F6E56;
    box-shadow: 0 6px 20px rgba(29,158,117,.4);
    transform: translateY(-1px);
}
.wccs-qv-atc:active { transform: scale(.98); }
.wccs-qv-atc:disabled { opacity: .7; cursor: not-allowed; transform: none; }

.wccs-qv-atc.wccs-qv-loading { background: #0F6E56; }
.wccs-qv-atc.wccs-qv-added   { background: #085041; }

/* Body lock */
body.wccs-qv-open { overflow: hidden; }

/* ── Animations ── */
@keyframes wccs-qv-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes wccs-qv-slide-up {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Responsive ── */
@media (max-width: 680px) {
    .wccs-qv-inner {
        flex-direction: column;
    }
    .wccs-qv-image-wrap {
        flex: none;
        border-radius: 18px 18px 0 0;
        min-height: 220px;
        padding: 24px;
    }
    .wccs-qv-details {
        padding: 24px 20px 28px;
        gap: 14px;
    }
    .wccs-qv-title { font-size: 17px; }
    .wccs-qv-price { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════
   PERSISTENT CART BAR (Floating Bottom)
════════════════════════════════════════════════════════════ */

.wccs-cart-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99998;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    animation: wccs-cart-slide-up .3s cubic-bezier(.34,1.56,.64,1);
}

@keyframes wccs-cart-slide-up {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.wccs-cart-bar-btn {
    display: flex;
    align-items: center;
    background: #1a1c18;
    color: #ffffff;
    border: none;
    border-radius: 30px;
    padding: 12px 20px;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15);
    transition: all .2s cubic-bezier(.4,0,.2,1);
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.4;
}

.wccs-cart-bar-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2);
    background: #2d302a;
}

.wccs-cart-bar-btn:active {
    transform: translateY(0) scale(.98);
}

.wccs-cart-bar-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wccs-cart-bar-icon {
    flex-shrink: 0;
    opacity: .9;
}

.wccs-cart-bar-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    text-align: left;
}

.wccs-cart-bar-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
}

.wccs-cart-bar-subtitle {
    font-size: 12px;
    font-weight: 500;
    opacity: .75;
    line-height: 1.2;
}

/* Popup panel — full sidebar overlay */
.wccs-cart-popup-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99997;
    pointer-events: none;
    visibility: hidden;
}

.wccs-cart-popup-wrap.wccs-cart-open {
    pointer-events: auto;
    visibility: visible;
}

/* Backdrop */
.wccs-cart-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .3s ease;
}

.wccs-cart-popup-wrap.wccs-cart-open .wccs-cart-backdrop {
    opacity: 1;
}

/* Sidebar panel */
.wccs-cart-popup-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 85vw;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: -4px 0 24px rgba(0,0,0,.12);
}

.wccs-cart-popup-wrap.wccs-cart-open .wccs-cart-popup-inner {
    transform: translateX(0);
}

/* Sidebar header */
.wccs-cart-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #e8ede8;
    flex-shrink: 0;
}

.wccs-cart-popup-title {
    font-size: 17px;
    font-weight: 800;
    color: #1a1c18;
    margin: 0;
    letter-spacing: -.01em;
}

.wccs-cart-close {
    width: 36px;
    height: 36px;
    border: none;
    background: #f5f6f4;
    color: #6b7068;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    padding: 0;
    flex-shrink: 0;
}

.wccs-cart-close:hover {
    background: #e8ede8;
    color: #1a1c18;
}

/* Cart items */
.wccs-cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wccs-cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #f5f6f4;
    border-radius: 10px;
    transition: background .15s;
}

.wccs-cart-item:hover {
    background: #f0f2ef;
}

.wccs-cart-item-image {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #ffffff;
}

.wccs-cart-item-info {
    flex: 1;
    min-width: 0;
}

.wccs-cart-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1c18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.wccs-cart-item-qty-row {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 4px;
    border: 1px solid #e8ede8;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    width: fit-content;
}

.wccs-qty-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #1D9E75;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    padding: 0;
    flex-shrink: 0;
}

.wccs-qty-btn:hover {
    background: #E1F5EE;
}

.wccs-qty-btn:active {
    transform: scale(.9);
}

.wccs-qty-display {
    min-width: 24px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #1a1c18;
    line-height: 24px;
    user-select: none;
    border-left: 1px solid #e8ede8;
    border-right: 1px solid #e8ede8;
}

.wccs-cart-item-price {
    font-size: 14px;
    font-weight: 700;
    color: #1D9E75;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Remove item */
.wccs-cart-item-remove {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #9aa096;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all .15s;
    padding: 0;
}

.wccs-cart-item-remove:hover {
    background: #FCEBEB;
    color: #E24B4A;
}

/* Empty state */
.wccs-cart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    gap: 6px;
}

.wccs-cart-empty-state svg {
    opacity: .35;
    margin-bottom: 4px;
}

.wccs-cart-empty-state p {
    font-size: 14px;
    font-weight: 700;
    color: #1a1c18;
    margin: 0;
}

/* Cart footer */
.wccs-cart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e8ede8;
    background: #ffffff;
    flex-shrink: 0;
}

.wccs-cart-footer-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wccs-cart-footer-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6b7068;
}

.wccs-cart-footer-total {
    font-size: 18px;
    font-weight: 800;
    color: #1a1c18;
    font-variant-numeric: tabular-nums;
}

.wccs-cart-checkout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: #1D9E75;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 10px;
    transition: all .18s;
    box-shadow: 0 4px 14px rgba(29,158,117,.3);
    white-space: nowrap;
}

.wccs-cart-checkout-btn:hover {
    background: #0F6E56;
    box-shadow: 0 6px 20px rgba(29,158,117,.4);
    transform: translateY(-1px);
}

.wccs-cart-checkout-btn:active {
    transform: scale(.98);
}

/* Clear Cart button */
.wccs-cart-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - 40px);
    margin: 0 20px 20px;
    padding: 10px 16px;
    border: 1px solid #e8ede8;
    border-radius: 8px;
    background: transparent;
    color: #6b7068;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

.wccs-cart-clear-btn:hover {
    background: #FCEBEB;
    border-color: #E24B4A;
    color: #A32D2D;
}

.wccs-cart-clear-btn:active {
    transform: scale(.98);
}

/* Confirmation box */
.wccs-cart-confirm {
    margin: 0 20px 16px;
    padding: 14px 16px;
    background: #fff8f0;
    border: 1px solid #f0d9b5;
    border-radius: 8px;
    animation: wccs-confirm-in .2s ease;
}

@keyframes wccs-confirm-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wccs-cart-confirm p {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: #1a1c18;
    line-height: 1.4;
}

.wccs-cart-confirm-btns {
    display: flex;
    gap: 8px;
}

.wccs-cart-confirm-no,
.wccs-cart-confirm-yes {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}

.wccs-cart-confirm-no {
    background: #f5f6f4;
    color: #6b7068;
}

.wccs-cart-confirm-no:hover {
    background: #e8ede8;
    color: #1a1c18;
}

.wccs-cart-confirm-yes {
    background: #E24B4A;
    color: #ffffff;
}

.wccs-cart-confirm-yes:hover {
    background: #c73d3c;
}

/* ════════════════════════════════════════════════════════════
   MINI TOAST NOTIFICATION
════════════════════════════════════════════════════════════ */

.wccs-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 99999;
    padding: 10px 20px;
    background: #1a1c18;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
    white-space: nowrap;
}

.wccs-toast.wccs-toast-enter {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.wccs-toast.wccs-toast-leave {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
}

.wccs-toast.wccs-toast-error {
    background: #E24B4A;
    color: #ffffff;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .wccs-toast {
        background: #ffffff;
        color: #111310;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .wccs-cart-bar-btn {
        background: #ffffff;
        color: #111310;
    }

    .wccs-cart-bar-btn:hover {
        background: #e8ede8;
    }

    .wccs-cart-popup-inner {
        background: #1b1e1a;
    }

    .wccs-cart-popup-header {
        border-color: rgba(255,255,255,.07);
    }

    .wccs-cart-popup-title {
        color: #e6ebe3;
    }

    .wccs-cart-close {
        background: #23261f;
        color: #8a9087;
    }

    .wccs-cart-close:hover {
        background: #2e312b;
        color: #e6ebe3;
    }

    .wccs-cart-item {
        background: #23261f;
    }

    .wccs-cart-item:hover {
        background: #2e312b;
    }

    .wccs-cart-item-image {
        background: #23261f;
    }

    .wccs-cart-item-name {
        color: #e6ebe3;
    }

    .wccs-cart-item-remove:hover {
        background: rgba(226,75,74,.15);
    }

    .wccs-cart-footer {
        background: #1b1e1a;
        border-color: rgba(255,255,255,.07);
    }

    .wccs-cart-footer-total {
        color: #e6ebe3;
    }

    .wccs-cart-empty-state p {
        color: #e6ebe3;
    }

    .wccs-cart-clear-btn {
        border-color: rgba(255,255,255,.1);
        color: #8a9087;
    }

    .wccs-cart-clear-btn:hover {
        background: rgba(226,75,74,.15);
        border-color: #E24B4A;
        color: #E24B4A;
    }

    .wccs-cart-confirm {
        background: #2e312b;
        border-color: rgba(255,255,255,.1);
    }

    .wccs-cart-confirm p {
        color: #e6ebe3;
    }

    .wccs-cart-confirm-no {
        background: #23261f;
        color: #8a9087;
    }

    .wccs-cart-confirm-no:hover {
        background: #2e312b;
        color: #e6ebe3;
    }

    .wccs-cart-item-qty-row {
        border-color: rgba(255,255,255,.1);
        background: #1b1e1a;
    }

    .wccs-qty-btn:hover {
        background: #04342C;
    }

    .wccs-qty-display {
        color: #e6ebe3;
        border-color: rgba(255,255,255,.1);
    }
}

/* Responsive */
@media (max-width: 480px) {
    .wccs-cart-bar {
        bottom: 16px;
        left: 16px;
        right: 16px;
        transform: none;
    }

    @keyframes wccs-cart-slide-up {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .wccs-cart-bar-btn {
        width: 100%;
    }

    .wccs-cart-popup-wrap {
        bottom: 76px;
        left: 16px;
        right: 16px;
        transform: none;
        width: auto;
    }

    @keyframes wccs-cart-popup-in {
        from { opacity: 0; transform: translateY(8px) scale(.96); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
}

/* Body padding for fixed cart bar */
body.wccs-cart-active {
    padding-bottom: 80px;
}

@media (max-width: 480px) {
    body.wccs-cart-active {
        padding-bottom: 72px;
    }
}