/**
 * E-Commerce Plugin - Frontend Styles
 *
 * Styles for the shop pages (product grid, cart, checkout).
 * Designed to work with the theme's existing styles.
 *
 * @package Ecommerce
 * @version 1.0.0
 */

/* ============================================================================
   THEME COLORS

   These used to be the gallery's gold, hard-coded, which is why the studio's
   Add to Cart button was still gold on 2026-09-04 after the whole front end had
   moved to the Stackhouse palette: the plugin was painting over the theme.

   They now READ the host theme's action colour and fall back to the old gold
   when no theme defines one, so the plugin still looks right standing alone.
   The theme sets --action in assets/css/studio.css.
   ============================================================================ */

:root {
    --primary-color:       var(--action, #b8860b);
    --primary-color-dark:  var(--action-dark, #8b6508);
    --primary-color-light: var(--action-lift, #d4a84b);

    /* Override Bootstrap's primary colour variables */
    --bs-primary: var(--action, #b8860b);
    --bs-primary-rgb: var(--action-rgb, 184, 134, 11);
    --bs-link-color: var(--action-ink, #8b6508);
    --bs-link-hover-color: var(--action, #b8860b);
}

/* ============================================================================
   BOOTSTRAP OVERRIDES - Global Button Styles
   ============================================================================ */

/* Primary buttons - GLOBAL override (no parent class required) */
.btn-primary {
    background-color: var(--action, #b8860b) !important;
    border-color: var(--action, #b8860b) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--action-dark, #8b6508) !important;
    border-color: var(--action-dark, #8b6508) !important;
    color: #fff !important;
}

.btn-primary:focus,
.btn-primary:focus-visible {
    background-color: var(--action, #b8860b) !important;
    border-color: var(--action, #b8860b) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--action-rgb, 184, 134, 11), 0.5) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--action-lift, #d4a84b) !important;
    border-color: var(--action-lift, #d4a84b) !important;
}

/* Outline primary buttons - GLOBAL override */
.btn-outline-primary {
    color: var(--action, #b8860b) !important;
    border-color: var(--action, #b8860b) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--action, #b8860b) !important;
    border-color: var(--action, #b8860b) !important;
    color: #fff !important;
}

.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--action-rgb, 184, 134, 11), 0.5) !important;
}

/* Form label color - GLOBAL */
.form-label,
label.form-label {
    color: #a38628;
}

/* Form controls focus states - GLOBAL */
.form-control:focus,
.form-select:focus {
    border-color: var(--action, #b8860b) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--action-rgb, 184, 134, 11), 0.15) !important;
}

/* Accordion styles - gold highlights - GLOBAL */
.accordion-button:not(.collapsed) {
    background-color: rgba(var(--action-rgb, 184, 134, 11), 0.1) !important;
    color: var(--action-dark, #8b6508) !important;
}

.accordion-button:focus {
    border-color: var(--action, #b8860b) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--action-rgb, 184, 134, 11), 0.25) !important;
}

/* Pagination active state */
.page-item.active .page-link {
    background-color: var(--action, #b8860b) !important;
    border-color: var(--action, #b8860b) !important;
}

.page-link {
    color: var(--action-dark, #8b6508) !important;
}

.page-link:hover {
    color: var(--action, #b8860b) !important;
}

/* Badge primary */
.badge.bg-primary {
    background-color: var(--action, #b8860b) !important;
}

/* ============================================================================
   SHOP GRID
   ============================================================================ */

.ecommerce-shop .gallery-main {
    padding: 2rem 0;
}

.ecommerce-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

.ecommerce-product-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ecommerce-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ecommerce-product-card-image {
    aspect-ratio: 1;
    overflow: hidden;
}

.ecommerce-product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.ecommerce-product-card-body {
    padding: 1rem;
}

.ecommerce-product-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.ecommerce-product-card-title a {
    color: inherit;
    text-decoration: none;
}

.ecommerce-product-card-title a:hover {
    color: var(--primary-color, #667eea);
}

.ecommerce-product-card-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
}

.ecommerce-product-card-price-from {
    font-size: 0.875rem;
    font-weight: 400;
    color: #666;
}

/* Artist sale (F12) — strikethrough list + emphasised sale price + corner badge */
.ecommerce-price-original {
    font-size: 0.95rem;
    font-weight: 400;
    color: #888;
    text-decoration: line-through;
    margin-right: 0.4rem;
}

.ecommerce-price-sale {
    color: #c0392b;
    font-weight: 700;
}

.ecommerce-sale-badge {
    background-color: #c0392b;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ============================================================================
   PRODUCT PAGE
   ============================================================================ */

.ecommerce-product {
    padding: 2rem 0;
}

.ecommerce-product-gallery {
    position: sticky;
    top: 2rem;
}

.ecommerce-product-main-image {
    border-radius: 4px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.ecommerce-product-main-image img {
    max-width: 85%;
    max-height: 500px;
    height: auto;
    width: auto;
    border: 6px solid #000000;
    outline: 2px solid hsl(44 71% 49% / 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 1.25), 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.ecommerce-product-thumbnails {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ecommerce-product-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.ecommerce-product-thumbnail.active,
.ecommerce-product-thumbnail:hover {
    border-color: var(--primary-color, #667eea);
}

.ecommerce-product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ecommerce-product-info {
    padding: 1rem 0;
}

.ecommerce-product-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.ecommerce-product-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
}

.ecommerce-product-description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Variant Selector */
.ecommerce-variant-selector {
    margin-bottom: 1.5rem;
}

.ecommerce-variant-selector label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.ecommerce-variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ecommerce-variant-option {
    padding: 0.5rem 1rem;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}

.ecommerce-variant-option:hover {
    border-color: var(--primary-color, #667eea);
}

.ecommerce-variant-option.selected {
    border-color: var(--primary-color, #667eea);
    background-color: var(--primary-color, #667eea);
    color: #fff;
}

.ecommerce-variant-option.out-of-stock {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Cascading Dropdown Variant Selector */
.ecommerce-variant-selector .form-select {
    max-width: 100%;
    padding: 0.75rem 2.25rem 0.75rem 0.75rem;
    font-size: 1rem;
    border: 2px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.2s ease;
}

.ecommerce-variant-selector .form-select:focus {
    border-color: var(--primary-color, #667eea);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
    outline: none;
}

.ecommerce-variant-selector .form-label {
    color: #333;
    margin-bottom: 0.5rem;
}

/* Stock status text colors inside stock status div */
.ecommerce-stock-status .in-stock {
    color: #28a745;
}

.ecommerce-stock-status .low-stock {
    color: #ffc107;
}

.ecommerce-stock-status .out-of-stock {
    color: #dc3545;
}

/* Add to Cart */
.ecommerce-add-to-cart {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.ecommerce-quantity-input {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.ecommerce-quantity-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 1.25rem;
    transition: background 0.2s ease;
}

.ecommerce-quantity-btn:hover {
    background: #e0e0e0;
}

.ecommerce-quantity-input input {
    width: 60px;
    height: 40px;
    border: none;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
}

.ecommerce-add-to-cart-btn {
    flex: 1;
    padding: 0.75rem 2rem;
    background-color: var(--primary-color, #667eea);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ecommerce-add-to-cart-btn:hover {
    background-color: var(--primary-color-dark, #5a6fd6);
}

.ecommerce-add-to-cart-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Stock Status */
.ecommerce-stock-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.ecommerce-stock-status.in-stock {
    color: #28a745;
}

.ecommerce-stock-status.low-stock {
    color: #ffc107;
}

.ecommerce-stock-status.out-of-stock {
    color: #dc3545;
}

/* ============================================================================
   CART
   ============================================================================ */

.ecommerce-cart {
    padding: 2rem 0;
}

.ecommerce-cart-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: #f9f9f9;
    border-radius: 8px;
}

.ecommerce-cart-table {
    width: 100%;
    border-collapse: collapse;
}

.ecommerce-cart-table th {
    text-align: left;
    padding: 1rem;
    border-bottom: 2px solid #ddd;
    font-weight: 600;
}

.ecommerce-cart-table td {
    padding: 1rem;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

input.ecommerce-cart-quantity {
    min-width: 4rem !important;
    width: 4rem !important;
    text-align: center;
    -moz-appearance: textfield;
}

input.ecommerce-cart-quantity::-webkit-outer-spin-button,
input.ecommerce-cart-quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ecommerce-cart-item-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.ecommerce-cart-item-name {
    font-weight: 600;
}

.ecommerce-cart-item-variant {
    font-size: 0.875rem;
    color: #666;
}

.ecommerce-cart-remove {
    color: #dc3545;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0.5rem;
}

.ecommerce-cart-remove:hover {
    text-decoration: underline;
}

.ecommerce-cart-summary {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 1.5rem;
}

.ecommerce-cart-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.ecommerce-cart-summary-row.total {
    font-size: 1.25rem;
    font-weight: 700;
    border-top: 2px solid #ddd;
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.ecommerce-checkout-btn {
    display: block;
    width: 100%;
    padding: 1rem;
    background-color: var(--primary-color, #667eea);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    margin-top: 1rem;
    transition: background-color 0.2s ease;
}

.ecommerce-checkout-btn:hover {
    background-color: var(--primary-color-dark, #5a6fd6);
    color: #fff;
}

.ecommerce-checkout-btn:disabled,
.ecommerce-checkout-btn.disabled {
    background-color: #d1d5db !important;
    border-color: #d1d5db !important;
    color: #9ca3af !important;
    cursor: not-allowed;
    opacity: 1 !important;
}

/* ============================================================================
   DISCOUNT CODE
   ============================================================================ */

.ecommerce-discount-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ecommerce-discount-input {
    flex: 1;
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.ecommerce-discount-btn {
    padding: 0.5rem 1rem;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}

.ecommerce-discount-applied {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #d4edda;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.ecommerce-discount-remove {
    color: #dc3545;
    cursor: pointer;
    background: none;
    border: none;
}

/* ============================================================================
   SHOP FILTER BAR
   ============================================================================ */

.shop-filter-bar {
    border: 1px solid #e0e0e0;
}

.shop-filter-bar .form-select,
.shop-filter-bar .form-control {
    font-size: 0.9rem;
}

.shop-filter-bar .input-group-text {
    border-color: #dee2e6;
}

.shop-filter-bar .form-control:focus {
    border-color: var(--primary-color, #667eea);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
}

.shop-filter-bar .form-select:focus {
    border-color: var(--primary-color, #667eea);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
}

/* Search clear button */
#search-clear {
    background: #fff;
    border-color: #dee2e6;
    color: #6c757d;
    padding: 0.375rem 0.75rem;
}

#search-clear:hover {
    background: #f8f9fa;
    color: #dc3545;
}

/* ============================================================================
   SHIPPING OPTIONS
   ============================================================================ */

.shipping-group.card {
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.shipping-group .card-body {
    padding: 1.25rem;
}

.shipping-group-header {
    border-bottom-color: #e9ecef !important;
}

.shipping-group-header h6 {
    font-size: 1rem;
    color: #333;
}

.shipping-rate-option {
    cursor: pointer;
    transition: all 0.15s ease;
    background: #fff;
}

.shipping-rate-option:hover {
    background: #f8f9fa;
    border-color: var(--primary-color, #667eea) !important;
}

.shipping-rate-option.selected {
    border-color: var(--primary-color, #667eea) !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(102, 126, 234, 0.02) 100%);
    box-shadow: 0 0 0 1px var(--primary-color, #667eea);
}

.shipping-rate-option.recommended {
    border-color: #28a745 !important;
}

.shipping-rate-option.recommended.selected {
    border-color: var(--primary-color, #667eea) !important;
}

.shipping-rate-price {
    min-width: 70px;
}

.shipping-combined-total {
    color: var(--primary-color, #667eea);
}

.production-time-notice {
    font-size: 0.9rem;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .ecommerce-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .ecommerce-add-to-cart {
        flex-direction: column;
    }

    .ecommerce-add-to-cart-btn {
        width: 100%;
    }

    .ecommerce-cart-table {
        display: block;
    }

    .ecommerce-cart-table thead {
        display: none;
    }

    .ecommerce-cart-table tr {
        display: block;
        padding: 1rem;
        border-bottom: 1px solid #eee;
    }

    .ecommerce-cart-table td {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border: none;
    }

    .ecommerce-cart-table td::before {
        content: attr(data-label);
        font-weight: 600;
    }

    /* Cart items table — mobile card stack.
       The <table class="ecommerce-cart-items"> and its tbody MUST be block-ified, or
       the table formatting context keeps its desktop min-width and the row clips off
       the right edge. (The old rule set display:block on ".ecommerce-cart-table" — a
       class the cart markup never uses — so it silently did nothing and the row stayed
       a cramped, clipping table.) Each row becomes a 2-line grid that fits any phone:
           [ image ]  details        (remove)
           [ image ]  qty            total
       Same 5 cells drive both the primary items and the greeting-card add-on rows. */
    .ecommerce-cart-items,
    .ecommerce-cart-items tbody {
        display: block;
    }

    .ecommerce-cart-items thead {
        display: none;
    }

    .ecommerce-cart-items .ecommerce-cart-item {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "img details remove"
            "img qty     total";
        align-items: center;
        column-gap: 0.75rem;
        row-gap: 0.55rem;
        padding: 0.85rem 0.75rem;
        border-bottom: 1px solid #eee;
    }

    .ecommerce-cart-items .ecommerce-cart-item td {
        padding: 0;
        border: 0 !important;
    }

    .ecommerce-cart-items .ecommerce-cart-item td:nth-child(1) { grid-area: img; }
    .ecommerce-cart-items .ecommerce-cart-item td:nth-child(2) { grid-area: details; min-width: 0; }
    .ecommerce-cart-items .ecommerce-cart-item td:nth-child(3) { grid-area: qty; }
    .ecommerce-cart-items .ecommerce-cart-item td:nth-child(4) {
        grid-area: total;
        text-align: right;
        font-weight: 600;
    }
    .ecommerce-cart-items .ecommerce-cart-item td:nth-child(5) {
        grid-area: remove;
        text-align: right;
    }

    /* Quantity stepper: left-aligned in its cell, capped so it never crowds the total. */
    .ecommerce-cart-items .ecommerce-cart-item td:nth-child(3) .input-group {
        max-width: 120px !important;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    .ecommerce-product-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   LIMITED EDITION BADGES & DISPLAYS
   ============================================================================ */

/* Edition Info Box - Product Page */
.ecommerce-edition-info {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.ecommerce-edition-info.scarcity {
    background: linear-gradient(135deg, #fff3cd 0%, #fff 100%);
    border-color: #ffc107;
}

.ecommerce-edition-info.sold-out {
    background: linear-gradient(135deg, #fff3cd 0%, #fff 100%);
    border-color: var(--action, #b8860b);
}

.ecommerce-edition-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #495057;
}

.ecommerce-edition-badge i {
    color: #6c757d;
}

.ecommerce-edition-details {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #666;
}

.ecommerce-edition-details .edition-remaining {
    font-weight: 600;
    color: #333;
}

.ecommerce-edition-scarcity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fff3cd;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #856404;
}

.ecommerce-edition-scarcity i {
    color: #ffc107;
}

.ecommerce-edition-complete {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fff3cd;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #856404;
}

.ecommerce-edition-complete i {
    color: var(--action, #b8860b);
}

/* Scarcity Badge on Product Cards - Top Middle */
.ecommerce-scarcity-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    z-index: 5;
}

.ecommerce-scarcity-badge span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #dc3545;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
}

.ecommerce-scarcity-badge span i {
    font-size: 0.75rem;
}

/* Edition badge on product card (top corner) */
.ecommerce-edition-corner-badge {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
}

/* Sold Out Overlay */
.ecommerce-sold-out-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.ecommerce-sold-out-overlay span {
    background: #3541dc;
    color: #fff;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================================
   PRODUCT TYPE BADGES (Original / Reproduction)
   ============================================================================ */

.ecommerce-type-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 3px;
    margin-bottom: 0.5rem;
}

.ecommerce-badge-original {
    background: linear-gradient(135deg, #c9a227 0%, #d4af37 100%);
    color: #1a1a1a;
}

.ecommerce-badge-reproduction {
    background: #6e654b;
    color: #ffffff;
}

/* ============================================================================
   SHOP PAGE MOBILE — Scrollable pills, compact layout
   ============================================================================ */

/* Art taxonomy filter bar (item 12) — L2 Type + L3 Subject rows.
   Labeled rows of readable gold-accented pills, in line with the gallery theme. */
.shop-taxonomy-bar {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 1.25rem 0 2.5rem;
}
.shop-taxonomy-bar .tax-row {
    display: flex;
    align-items: baseline;
    gap: 0.45rem 0.85rem;
}
.shop-taxonomy-bar .tax-row-label {
    flex: 0 0 auto;
    min-width: 62px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gallery-text-muted, #8a8682);
    padding-top: 0.15rem;
}
.shop-taxonomy-bar .tax-options {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.shop-taxonomy-bar .tax-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.95rem;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: #ffffff;
    /* The gallery theme paints <a> text via -webkit-text-fill-color, which beats
       plain `color`; override it so the white pill text actually renders. */
    -webkit-text-fill-color: #ffffff;
    background: #7a7a7a;
    border: 1px solid var(--gallery-border, #e8e6e3);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.shop-taxonomy-bar .tax-pill:hover {
    background: #8a8a8a;
    border-color: var(--gallery-gold, var(--action, #b8860b));
}
.shop-taxonomy-bar .tax-pill.active {
    background: var(--gallery-gold, var(--action, #b8860b));
    border-color: var(--gallery-gold, var(--action, #b8860b));
    color: #fff;
    /* Match the base rule's text-fill override (else the base #000 would win here). */
    -webkit-text-fill-color: #fff;
}
/* Checkbox-style options for the multi-select Tags (L3) row — visually distinct
   from the single-select Medium/Type pills so it's obvious you can pick several
   (and that one artwork can carry several tags). Still anchor links (toggle a tag
   in/out of the URL); the box just makes the multi-select affordance clear. */
.shop-taxonomy-bar .tax-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.2rem;
    font-size: 0.9rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--gallery-text, #2c2825);
    text-decoration: none;
}
.shop-taxonomy-bar .tax-check .tax-box {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--gallery-border, #d8d5d0);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.shop-taxonomy-bar .tax-check:hover .tax-box {
    border-color: var(--gallery-gold, var(--action, #b8860b));
}
.shop-taxonomy-bar .tax-check.active {
    font-weight: 600;
}
.shop-taxonomy-bar .tax-check.active .tax-box {
    background: var(--gallery-gold, var(--action, #b8860b));
    border-color: var(--gallery-gold, var(--action, #b8860b));
}
/* Tag cap: once the maximum number of tags is selected the rest render as inert
   spans rather than links, so there is nothing left to click OR to crawl. Muted
   and not-allowed so it reads as temporarily unavailable, not broken. */
.shop-taxonomy-bar .tax-check.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.shop-taxonomy-bar .tax-cap-note {
    font-size: 0.85em;
    color: #777;
    font-style: italic;
    align-self: center;
    margin-left: 0.5rem;
}
/* "Showing N of M" — sits beside the artist grid heading (one clear total, next to
   the title), so overlapping tag counts don't make the catalogue look bigger than it
   is. Sized down + muted so it reads as a subtitle of the bold heading. */
.ap-showing {
    /* Easy sans font (matches the shop), sized relative to the heading: 0.6em − 10%. */
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.9em;
    font-weight: 600;
    color: #b38416;
    vertical-align: middle;
    margin-left: 0.5rem;
    white-space: nowrap;
}

/* Subcategory pills — scrollable row with arrow indicators */
.shop-pills-wrapper {
    position: relative;
    margin-bottom: 1rem;
}

/* Scroll arrow buttons — full-height dark rectangles with gold chevrons */
.shop-pills-wrapper .scroll-arrow-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    padding: 0;
    border: 0;
    background: #b2862a;
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.shop-pills-wrapper .scroll-arrow-btn:hover,
.shop-pills-wrapper .scroll-arrow-btn:focus {
    background: #8f6a1e;
    color: #fff;
    outline: none;
}
.shop-pills-wrapper .scroll-arrow-prev { left: 0; opacity: 0; pointer-events: none; border-radius: 0 6px 6px 0; }
.shop-pills-wrapper .scroll-arrow-next { right: 0; opacity: 1; border-radius: 6px 0 0 6px; }

.shop-pills-wrapper.scrolled-start .scroll-arrow-prev { opacity: 0; pointer-events: none; }
.shop-pills-wrapper.scrolled-start .scroll-arrow-next { opacity: 1; pointer-events: auto; }
.shop-pills-wrapper.scrolled-middle .scroll-arrow-prev,
.shop-pills-wrapper.scrolled-middle .scroll-arrow-next { opacity: 1; pointer-events: auto; }
.shop-pills-wrapper.scrolled-end .scroll-arrow-prev { opacity: 1; pointer-events: auto; }
.shop-pills-wrapper.scrolled-end .scroll-arrow-next { opacity: 0; pointer-events: none; }
.shop-pills-wrapper.no-overflow .scroll-arrow-prev,
.shop-pills-wrapper.no-overflow .scroll-arrow-next { opacity: 0; pointer-events: none; }

.shop-subcategory-pills {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0;
}

.shop-subcategory-pills::-webkit-scrollbar {
    display: none;
}

.shop-subcategory-pills .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Clear filters × button */
.shop-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #dee2e6;
    color: #6c757d;
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.shop-clear-btn:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

/* Shop title bar */
.shop-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 576px) {
    /* The title and the controls cannot share a phone-width row. With the
       originals artist filter present there are two auto-width selects plus the
       clear button, which squeezed the heading to ~97px (a six-line wrap) and
       pushed the document 95-110px wider than a 352px viewport — making the
       full-bleed header and the gallery banner look inset against the widened
       page. Stack for every shop view, not just the category one: the same
       squeeze hits the reproductions heading, just without the overflow. */
    .shop-title-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .shop-title-bar > div:last-child {
        width: 100%;
    }

    /* Let the selects share the row and shrink. flex-basis beats the inline
       width:auto for a flex item, so no !important is needed. */
    .shop-title-bar #filter-artist,
    .shop-title-bar #filter-sort {
        flex: 1 1 0;
        min-width: 0;
    }

    .shop-title-bar-stacked > div:last-child {
        align-self: flex-end;
    }

    .shop-page-title {
        font-size: 1.25rem;
    }

    #filter-sort,
    #filter-artist {
        font-size: 0.75rem;
    }
}

/* Delivery Method Selector */
.delivery-method-option {
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}

.delivery-method-option:hover {
    border-color: var(--primary-color, #667eea);
    background: #f8f9ff;
}

.delivery-method-option.selected {
    border-color: var(--primary-color, #667eea);
    background: #f0f2ff;
    box-shadow: 0 0 0 1px var(--primary-color, #667eea);
}

.delivery-method-option .form-check-input {
    display: none;
}

.shipping-rate-option {
    cursor: pointer;
    transition: all 0.15s ease;
}

.shipping-rate-option:hover {
    background-color: #f8f9fa;
}

.shipping-rate-option.selected {
    border-color: var(--primary-color, #667eea) !important;
    background-color: #f0f2ff;
}