/**
 * DefCMS – Shop Stylesheet
 * DefenTek Company - Riyadh, Saudi Arabia
 * Covers: listing, product detail, cart, checkout, order success, wishlist, auth
 */

/* ── Shop-specific CSS variables ─────────────────────────── */
:root {
    /* The storefront is a light "Amazon-style" design (see .shop-section
       --s-* palette). Cart/checkout/account use these --shop-* tokens, so
       keep them on the SAME light palette for a consistent light shop. */
    --shop-primary:   #C4A035;
    --shop-accent:    #C4A035;
    --shop-bg:        #f3f4f6;
    --shop-surface:   #ffffff;
    --shop-elevated:  #eef0f4;
    --shop-border:    #e5e7eb;
    --shop-text:      #0f1722;
    --shop-muted:     #6b7280;
    --shop-radius:    12px;
    --shop-radius-sm: 8px;
    --shop-shadow:    0 1px 3px rgba(16,23,34,0.08);
    --shop-transition:0.2s ease;
    /* Some cart/checkout rules use bare --surface/--text/--text-muted/--primary
       (undefined on the public site → fell back to dark #1e1e1e/#eee). Map them
       to the light shop palette so cart & checkout stay consistently light. */
    --surface:        #ffffff;
    --text:           #0f1722;
    --text-muted:     #6b7280;
    --primary:        #C4A035;
}

/* ── Shared Utilities ─────────────────────────────────────── */
.shop-container,
.cart-container,
.checkout-container,
.success-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ─────────────────────────────────────────────────────────── */
/* SHOP LISTING                                                */
/* ─────────────────────────────────────────────────────────── */
.shop-section {
    padding: 100px 20px 60px;
    min-height: 80vh;
    position: relative;
    z-index: 1;
}

.shop-container {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

/* Sidebar */
.shop-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    padding: 20px;
    position: sticky;
    top: 90px;
}

.sidebar-title {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shop-accent);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--shop-border);
}

.filter-group {
    margin-bottom: 20px;
}

.filter-group h4 {
    font-size: 0.85rem;
    color: var(--shop-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cat-list li { margin: 2px 0; }

.cat-list a {
    display: block;
    padding: 6px 10px;
    border-radius: var(--shop-radius-sm);
    color: var(--shop-text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background var(--shop-transition), color var(--shop-transition);
}

.cat-list a:hover,
.cat-list a.active {
    background: var(--shop-primary);
    color: #fff;
}

.search-input {
    width: 100%;
    padding: 8px 12px;
    background: var(--shop-elevated);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-sm);
    color: var(--shop-text);
    font-size: 0.9rem;
    margin-bottom: 8px;
    outline: none;
    transition: border-color var(--shop-transition);
}

.search-input:focus { border-color: var(--shop-accent); }

/* Main area */
.shop-main { flex: 1; min-width: 0; }

.shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.shop-results h2 {
    font-size: 1.4rem;
    margin-bottom: 2px;
}

.result-count {
    font-size: 0.85rem;
    color: var(--shop-muted);
}

.sort-form { display: flex; align-items: center; gap: 8px; }

.sort-select {
    background: var(--shop-elevated);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-sm);
    color: var(--shop-text);
    padding: 7px 12px;
    font-size: 0.9rem;
    cursor: pointer;
    outline: none;
}

/* Product Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.products-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.products-list .product-card {
    flex-direction: row;
    align-items: center;
}

.products-list .product-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Product Card */
.product-card {
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--shop-transition), box-shadow var(--shop-transition), border-color var(--shop-transition);
    position: relative;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shop-shadow);
    border-color: var(--shop-primary);
}

.product-card.is-featured {
    border-color: var(--shop-accent);
}

.product-image-link {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--shop-elevated);
    aspect-ratio: 1;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
    display: block;
}

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

/* Badges */
.badge-sale,
.badge-oos,
.badge-featured {
    position: absolute;
    top: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    z-index: 1;
    text-transform: uppercase;
}

.badge-sale  { left: 8px; background: #e53935; color: #fff; }
.badge-oos   { right: 8px; background: rgba(0,0,0,0.7); color: #aaa; }
.badge-featured { left: 8px; background: var(--shop-accent); color: #000; }

[dir="rtl"] .badge-sale  { left: auto; right: 8px; }
[dir="rtl"] .badge-oos   { right: auto; left: 8px; }
[dir="rtl"] .badge-featured { left: auto; right: 8px; }

/* Product Info */
.product-info {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.product-cat {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--shop-accent);
}

.product-name {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.product-name a {
    color: var(--shop-text);
    text-decoration: none;
    transition: color var(--shop-transition);
}

.product-name a:hover { color: var(--shop-accent); }

.product-desc {
    font-size: 0.82rem;
    color: var(--shop-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Prices */
.product-price {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.price-regular { font-size: 1rem; font-weight: 700; color: var(--shop-text); }
.price-old     { font-size: 0.85rem; color: var(--shop-muted); text-decoration: line-through; }
.price-sale    { font-size: 1rem; font-weight: 700; color: #4caf50; }
.discount-badge {
    font-size: 0.7rem;
    background: #e53935;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

/* Product Actions */
.product-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 8px;
}

.btn-toggle-wish {
    background: transparent;
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-sm);
    color: var(--shop-muted);
    cursor: pointer;
    padding: 7px 10px;
    font-size: 0.9rem;
    transition: color var(--shop-transition), border-color var(--shop-transition);
}

.btn-toggle-wish:hover { color: #e53935; border-color: #e53935; }

.btn-disabled {
    background: var(--shop-elevated);
    border: 1px solid var(--shop-border);
    color: var(--shop-muted);
    padding: 8px 14px;
    border-radius: var(--shop-radius-sm);
    cursor: not-allowed;
    font-size: 0.875rem;
    flex: 1;
}

/* Pagination */
.shop-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 36px;
    flex-wrap: wrap;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--shop-radius-sm);
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    color: var(--shop-text);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background var(--shop-transition), border-color var(--shop-transition);
}

.page-link:hover,
.page-link.active {
    background: var(--shop-primary);
    border-color: var(--shop-primary);
    color: #fff;
}

/* Empty state */
.empty-shop, .empty-cart {
    text-align: center;
    padding: 60px 20px;
    color: var(--shop-muted);
}

.empty-shop p, .empty-cart p { font-size: 1.1rem; margin-bottom: 16px; }

/* Cart Toast */
.cart-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--shop-primary);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--shop-radius);
    font-size: 0.9rem;
    box-shadow: var(--shop-shadow);
    z-index: 9999;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

[dir="rtl"] .cart-toast { right: auto; left: 24px; }

.cart-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────── */
/* PRODUCT DETAIL                                              */
/* ─────────────────────────────────────────────────────────── */
.product-detail {
    padding: 100px 20px 60px;
    position: relative;
    z-index: 1;
}

.product-detail-container { max-width: 1100px; margin: 0 auto; }

/* Breadcrumb */
.breadcrumb {
    font-size: 0.82rem;
    color: var(--shop-muted);
    margin-bottom: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.breadcrumb a {
    color: var(--shop-muted);
    text-decoration: none;
    transition: color var(--shop-transition);
}

.breadcrumb a:hover { color: var(--shop-accent); }

/* Product layout */
.product-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

/* Gallery */
.gallery-main {
    background: var(--shop-surface);
    border-radius: var(--shop-radius);
    overflow: hidden;
    aspect-ratio: 1;
    border: 1px solid var(--shop-border);
}

.main-product-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.gallery-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.thumb {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border-radius: var(--shop-radius-sm);
    border: 2px solid var(--shop-border);
    cursor: pointer;
    transition: border-color var(--shop-transition);
    opacity: 0.75;
}

.thumb:hover, .thumb.active {
    border-color: var(--shop-accent);
    opacity: 1;
}

/* Product info */
.product-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.25;
}

.product-short-desc {
    color: var(--shop-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.product-price-box {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--shop-elevated);
    border-radius: var(--shop-radius);
    border: 1px solid var(--shop-border);
}

.product-price-box .price-regular,
.product-price-box .price-sale {
    font-size: 1.6rem;
}

.product-price-box .price-old {
    font-size: 1rem;
}

/* Stock status */
.stock-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.stock-status.in-stock  { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.3); }
.stock-status.out-of-stock { background: rgba(229,57,53,0.1); color: #e53935; border: 1px solid rgba(229,57,53,0.3); }

/* Add to Cart form */
.add-to-cart-form { margin-bottom: 16px; }

.qty-selector { margin-bottom: 14px; }

.qty-selector label {
    display: block;
    font-size: 0.82rem;
    color: var(--shop-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.qty-controls {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-sm);
    overflow: hidden;
}

.qty-btn {
    background: var(--shop-elevated);
    border: none;
    color: var(--shop-text);
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background var(--shop-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover { background: var(--shop-primary); }

.qty-input {
    width: 56px;
    text-align: center;
    background: transparent;
    border: none;
    color: var(--shop-text);
    font-size: 1rem;
    padding: 0;
    outline: none;
    -moz-appearance: textfield;
}

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

.btn-lg { padding: 12px 28px !important; font-size: 1rem !important; }
.btn-cart { width: 100%; justify-content: center; }

/* Attributes */
.product-attributes { margin-top: 20px; }

.product-attributes h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--shop-muted);
    margin-bottom: 10px;
}

.attrs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.attrs-table th,
.attrs-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--shop-border);
    text-align: left;
}

[dir="rtl"] .attrs-table th,
[dir="rtl"] .attrs-table td { text-align: right; }

.attrs-table th {
    color: var(--shop-muted);
    font-weight: 500;
    width: 40%;
    background: var(--shop-elevated);
}

/* SKU, Tags */
.product-sku,
.product-tags {
    font-size: 0.82rem;
    color: var(--shop-muted);
    margin-top: 12px;
}

.product-tags a.tag,
.tag {
    display: inline-block;
    padding: 3px 10px;
    background: var(--shop-elevated);
    border: 1px solid var(--shop-border);
    border-radius: 20px;
    font-size: 0.78rem;
    color: var(--shop-muted);
    text-decoration: none;
    margin: 2px;
    transition: border-color var(--shop-transition), color var(--shop-transition);
}

.tag:hover { border-color: var(--shop-accent); color: var(--shop-accent); }

/* Full Description */
.product-description {
    margin: 32px 0;
    padding: 28px;
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
}

.product-description h2 {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    color: var(--shop-accent);
}

.product-description-content {
    color: var(--shop-muted);
    line-height: 1.8;
    font-size: 0.95rem;
}

/* Related / Upsell */
.related-products,
.upsell-products {
    margin-top: 40px;
}

.related-products h2,
.upsell-products h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--shop-border);
}

.related-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* ─────────────────────────────────────────────────────────── */
/* CART                                                        */
/* ─────────────────────────────────────────────────────────── */
.cart-section {
    padding: 100px 20px 60px;
    position: relative;
    z-index: 1;
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: flex-start;
}

.cart-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--shop-surface);
    border-radius: var(--shop-radius);
    overflow: hidden;
    border: 1px solid var(--shop-border);
}

.cart-table th,
.cart-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--shop-border);
    font-size: 0.9rem;
}

[dir="rtl"] .cart-table th,
[dir="rtl"] .cart-table td { text-align: right; }

.cart-table th {
    background: var(--shop-elevated);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--shop-muted);
}

.cart-table tr:last-child td { border-bottom: none; }

.cart-product {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cart-product img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--shop-radius-sm);
    border: 1px solid var(--shop-border);
}

.cart-product-name { font-weight: 600; font-size: 0.9rem; }

.cart-product-attrs { font-size: 0.78rem; color: var(--shop-muted); }

.qty-value {
    display: inline-block;
    min-width: 36px;
    text-align: center;
    padding: 4px 8px;
    background: var(--shop-elevated);
    border-radius: var(--shop-radius-sm);
    border: 1px solid var(--shop-border);
}

.item-total { font-weight: 600; }

.cart-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

/* Cart summary / coupon */
.cart-summary {
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    padding: 22px;
    position: sticky;
    top: 90px;
}

.cart-summary h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--shop-border);
}

.summary-lines { margin-bottom: 16px; }

.summary-line {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font-size: 0.9rem;
    color: var(--shop-muted);
    border-bottom: 1px solid var(--shop-border);
}

.summary-line:last-child { border-bottom: none; }

.summary-total {
    font-size: 1rem;
    font-weight: 700;
    color: var(--shop-text);
}

.coupon-form {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.coupon-form input {
    flex: 1;
    padding: 8px 12px;
    background: var(--shop-elevated);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-sm);
    color: var(--shop-text);
    font-size: 0.875rem;
    outline: none;
}

.coupon-form input:focus { border-color: var(--shop-accent); }

/* ─────────────────────────────────────────────────────────── */
/* CHECKOUT                                                    */
/* ─────────────────────────────────────────────────────────── */
.checkout-section {
    padding: 100px 20px 60px;
    position: relative;
    z-index: 1;
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: flex-start;
}

.checkout-card {
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    padding: 24px;
    margin-bottom: 20px;
}

.checkout-card h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--shop-accent);
    margin-bottom: 18px;
}

.checkout-fields .form-group { margin-bottom: 14px; }

.checkout-fields label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--shop-muted);
    margin-bottom: 5px;
}

.checkout-fields input,
.checkout-fields select,
.checkout-fields textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--shop-elevated);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-sm);
    color: var(--shop-text);
    font-size: 0.9rem;
    outline: none;
    transition: border-color var(--shop-transition);
}

.checkout-fields input:focus,
.checkout-fields select:focus,
.checkout-fields textarea:focus { border-color: var(--shop-accent); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Payment gateways */
.gateway-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gateway-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--shop-elevated);
    border: 2px solid var(--shop-border);
    border-radius: var(--shop-radius);
    cursor: pointer;
    transition: border-color var(--shop-transition), background var(--shop-transition);
}

.gateway-option:has(input:checked) {
    border-color: var(--shop-accent);
    background: rgba(196,160,53,0.08);
}

.gateway-option input[type="radio"] {
    accent-color: var(--shop-accent);
    width: 16px;
    height: 16px;
}

.gateway-label {
    font-size: 0.9rem;
    font-weight: 600;
}

.secure-note {
    font-size: 0.78rem;
    color: var(--shop-muted);
    margin-top: 10px;
    text-align: center;
}

.badge-test {
    display: inline-block;
    font-size: 0.65rem;
    padding: 2px 6px;
    background: rgba(255,152,0,0.2);
    color: #ff9800;
    border: 1px solid rgba(255,152,0,0.4);
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Checkout summary */
.checkout-summary {
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    padding: 22px;
    position: sticky;
    top: 90px;
}

.btn-block { width: 100%; display: block; text-align: center; }

/* ─────────────────────────────────────────────────────────── */
/* ORDER SUCCESS                                               */
/* ─────────────────────────────────────────────────────────── */
.order-success-section {
    padding: 100px 20px 60px;
    position: relative;
    z-index: 1;
}

.success-header {
    text-align: center;
    margin-bottom: 40px;
}

.success-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 12px;
}

.success-header h1 { font-size: 1.8rem; margin-bottom: 8px; }

.success-header p { color: var(--shop-muted); }

.success-email-note {
    font-size: 0.85rem;
    color: var(--shop-muted);
    margin-top: 6px;
}

.success-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.success-card {
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    padding: 20px;
}

.success-card h3 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--shop-accent);
    margin-bottom: 14px;
}

.success-card p {
    font-size: 0.9rem;
    color: var(--shop-muted);
    margin-bottom: 6px;
}

.success-card strong { color: var(--shop-text); }

.order-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--shop-surface);
    border-radius: var(--shop-radius);
    overflow: hidden;
    border: 1px solid var(--shop-border);
    margin-bottom: 20px;
}

.order-items-table th,
.order-items-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--shop-border);
}

[dir="rtl"] .order-items-table th,
[dir="rtl"] .order-items-table td { text-align: right; }

.order-items-table th {
    background: var(--shop-elevated);
    color: var(--shop-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.total-row td {
    font-weight: 700;
    color: var(--shop-text);
    font-size: 1rem;
    border-top: 2px solid var(--shop-border);
}

.order-status-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.status-badge {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.05em;
}

.status-badge[class*="order-pending"],
.status-badge[class*="payment-pending"]  { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.3); }
.status-badge[class*="order-processing"] { background: rgba(33,150,243,0.15); color: #2196f3; border: 1px solid rgba(33,150,243,0.3); }
.status-badge[class*="order-delivered"],
.status-badge[class*="payment-paid"]     { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.3); }
.status-badge[class*="order-cancelled"],
.status-badge[class*="payment-failed"]   { background: rgba(229,57,53,0.1); color: #e53935; border: 1px solid rgba(229,57,53,0.3); }
.status-badge[class*="order-shipped"]    { background: rgba(156,39,176,0.15); color: #9c27b0; border: 1px solid rgba(156,39,176,0.3); }

.success-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* ─────────────────────────────────────────────────────────── */
/* WISHLIST                                                    */
/* ─────────────────────────────────────────────────────────── */
.wishlist-section {
    padding: 100px 20px 60px;
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────── */
/* CUSTOMER AUTH (Register / Login)                           */
/* ─────────────────────────────────────────────────────────── */
.auth-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 60px;
    position: relative;
    z-index: 1;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    padding: 36px;
    box-shadow: var(--shop-shadow);
}

.auth-card h2 {
    font-size: 1.5rem;
    margin-bottom: 6px;
    text-align: center;
}

.auth-card .auth-subtitle {
    text-align: center;
    color: var(--shop-muted);
    font-size: 0.88rem;
    margin-bottom: 28px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--shop-muted);
    font-size: 0.8rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--shop-border);
}

.btn-google {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 20px;
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-radius: var(--shop-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow var(--shop-transition);
}

.btn-google:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

.auth-form .form-group { margin-bottom: 16px; }

.auth-form label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--shop-muted);
    margin-bottom: 5px;
}

.auth-form input {
    width: 100%;
    padding: 10px 14px;
    background: var(--shop-elevated);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-sm);
    color: var(--shop-text);
    font-size: 0.9rem;
    outline: none;
    transition: border-color var(--shop-transition);
}

.auth-form input:focus { border-color: var(--shop-accent); }

.auth-footer-link {
    text-align: center;
    font-size: 0.85rem;
    color: var(--shop-muted);
    margin-top: 20px;
}

.auth-footer-link a {
    color: var(--shop-accent);
    text-decoration: none;
}

.auth-error {
    background: rgba(229,57,53,0.1);
    border: 1px solid rgba(229,57,53,0.3);
    color: #e53935;
    padding: 10px 14px;
    border-radius: var(--shop-radius-sm);
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.auth-success {
    background: rgba(76,175,80,0.1);
    border: 1px solid rgba(76,175,80,0.3);
    color: #4caf50;
    padding: 10px 14px;
    border-radius: var(--shop-radius-sm);
    font-size: 0.875rem;
    margin-bottom: 16px;
}

/* ─────────────────────────────────────────────────────────── */
/* CUSTOMER ACCOUNT PANEL                                      */
/* ─────────────────────────────────────────────────────────── */
.account-section {
    padding: 100px 20px 60px;
    position: relative;
    z-index: 1;
}

.account-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: flex-start;
}

.account-sidebar {
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    padding: 20px;
    position: sticky;
    top: 90px;
}

.account-sidebar .account-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--shop-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 auto 12px;
    color: #fff;
}

.account-sidebar .account-name {
    text-align: center;
    font-weight: 600;
    margin-bottom: 4px;
}

.account-sidebar .account-email {
    text-align: center;
    font-size: 0.8rem;
    color: var(--shop-muted);
    margin-bottom: 20px;
    word-break: break-all;
}

.account-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--shop-border);
    padding-top: 14px;
}

.account-nav li { margin: 2px 0; }

.account-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--shop-radius-sm);
    color: var(--shop-text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background var(--shop-transition);
}

.account-nav a:hover,
.account-nav a.active {
    background: var(--shop-elevated);
    color: var(--shop-accent);
}

.account-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.account-card {
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    padding: 24px;
}

.account-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--shop-border);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─────────────────────────────────────────────────────────── */
/* SHOP NAV ADDITIONS (cart & wishlist badges)                 */
/* ─────────────────────────────────────────────────────────── */
.shop-nav-icons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.shop-nav-icon {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--shop-text);
    text-decoration: none;
    font-size: 1.25rem;
    transition: color var(--shop-transition);
}

.shop-nav-icon:hover { color: var(--shop-accent); }

.shop-nav-count {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    background: var(--shop-accent);
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* ─────────────────────────────────────────────────────────── */
/* SHARED FORM / BUTTON UTILS (shop context)                  */
/* ─────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--shop-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: opacity var(--shop-transition), transform var(--shop-transition), background var(--shop-transition);
    white-space: nowrap;
}

.btn:hover { opacity: 0.88; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary  { background: var(--shop-primary);  color: #fff; }
.btn-secondary{ background: var(--shop-elevated); color: var(--shop-text); border: 1px solid var(--shop-border); }
.btn-outline  { background: transparent; color: var(--shop-text); border: 1px solid var(--shop-border); }
.btn-sm       { padding: 6px 12px; font-size: 0.8rem; }
.btn-danger   { background: rgba(229,57,53,0.15); color: #e53935; border: 1px solid rgba(229,57,53,0.3); }

/* ─────────────────────────────────────────────────────────── */
/* ALERTS                                                      */
/* ─────────────────────────────────────────────────────────── */
.shop-alert {
    padding: 12px 16px;
    border-radius: var(--shop-radius-sm);
    font-size: 0.875rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-alert-success { background: rgba(76,175,80,0.1); border: 1px solid rgba(76,175,80,0.3); color: #4caf50; }
.shop-alert-error   { background: rgba(229,57,53,0.1); border: 1px solid rgba(229,57,53,0.3); color: #e53935; }
.shop-alert-info    { background: rgba(33,150,243,0.1); border: 1px solid rgba(33,150,243,0.3); color: #2196f3; }

/* ─────────────────────────────────────────────────────────── */
/* RESPONSIVE — Tablet (≤ 900px)                              */
/* ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .shop-container      { flex-direction: column; }
    .shop-sidebar        { width: 100%; position: static; }
    .cat-list            { display: flex; flex-wrap: wrap; gap: 6px; }
    .cat-list li         { margin: 0; }

    .product-detail-layout { grid-template-columns: 1fr; }
    .gallery-main          { max-width: 420px; margin: 0 auto; }

    .cart-layout    { grid-template-columns: 1fr; }
    .cart-summary   { position: static; }

    .checkout-layout   { grid-template-columns: 1fr; }
    .checkout-summary  { position: static; }

    .success-layout { grid-template-columns: 1fr; }

    .account-layout { grid-template-columns: 1fr; }
    .account-sidebar { position: static; }

    .form-row { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────── */
/* RESPONSIVE — Mobile (≤ 600px)                              */
/* ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .shop-section,
    .product-detail,
    .cart-section,
    .checkout-section,
    .order-success-section,
    .wishlist-section,
    .auth-section,
    .account-section    { padding: 80px 12px 40px; }

    .products-grid      { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-info       { padding: 10px; }
    .product-name       { font-size: 0.85rem; }
    .product-actions    { flex-direction: column; }
    .product-actions .btn { width: 100%; }

    .product-title      { font-size: 1.3rem; }
    .product-price-box .price-regular,
    .product-price-box .price-sale { font-size: 1.3rem; }

    .gallery-thumbs .thumb { width: 52px; height: 52px; }

    .cart-table         { display: block; overflow-x: auto; }
    .cart-product       { flex-direction: column; align-items: flex-start; }

    .shop-toolbar       { flex-direction: column; align-items: flex-start; }
    .sort-form          { width: 100%; }
    .sort-select        { width: 100%; }

    .auth-card          { padding: 24px 16px; }
    .checkout-card      { padding: 16px; }
    .success-card       { padding: 14px; }

    .related-grid       { grid-template-columns: repeat(2, 1fr); }

    .success-actions    { flex-direction: column; }
    .success-actions .btn { width: 100%; }
}

/* ─────────────────────────────────────────────────────────── */
/* RTL OVERRIDES                                               */
/* ─────────────────────────────────────────────────────────── */
[dir="rtl"] .cart-toast { left: 24px; right: auto; }
[dir="rtl"] .badge-test { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .account-nav a { flex-direction: row-reverse; }
[dir="rtl"] .summary-line { flex-direction: row-reverse; }
[dir="rtl"] .shop-nav-count { right: auto; left: -8px; }

/* ── Checkout Progress Steps ─────────────────────────── */
.checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 20px 16px 0;
    max-width: 600px;
    margin: 0 auto;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 60px;
}
.step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border, #444);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-muted, #888);
    background: transparent;
    transition: all .3s;
}
.step.active .step-num {
    background: var(--primary, #8b6914);
    border-color: var(--primary, #8b6914);
    color: #fff;
}
.step.done .step-num {
    background: #27ae60;
    border-color: #27ae60;
    color: #fff;
}
.step-label {
    font-size: .7rem;
    color: var(--text-muted, #888);
    white-space: nowrap;
}
.step.active .step-label { color: var(--primary, #8b6914); font-weight: 600; }
.step.done .step-label   { color: #27ae60; }
.step-line {
    flex: 1;
    height: 2px;
    background: var(--border, #444);
    min-width: 24px;
    transition: background .3s;
}
.step-line.done { background: #27ae60; }

/* ── Cart Page Enhancements ──────────────────────────── */
.cart-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}
.cart-items-header h2 { margin: 0; display: flex; align-items: center; gap: 10px; }
.cart-count-badge {
    font-size: .75rem;
    background: var(--primary, #8b6914);
    color: #fff;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 400;
}
.cart-items-list { display: flex; flex-direction: column; gap: 12px; }
.cart-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface, #1e1e1e);
    border: 1px solid var(--border, #333);
    border-radius: 10px;
    padding: 14px;
    transition: opacity .3s;
}
.cart-img { width: 72px; height: 72px; flex-shrink: 0; border-radius: 8px; overflow: hidden; }
.cart-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg, #111); font-size: 1.8rem; border-radius: 8px; }
.cart-info { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 600; color: var(--text, #eee); text-decoration: none; display: block; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-name:hover { color: var(--primary, #8b6914); }
.cart-sku { color: var(--text-muted, #888); font-size: .75rem; display: block; }
.cart-price-original { text-decoration: line-through; color: var(--text-muted, #888); font-size: .8rem; }
.cart-price { color: var(--primary, #8b6914); font-weight: 700; font-size: 1rem; }
.cart-qty { flex-shrink: 0; }
.cart-line-total { min-width: 90px; text-align: right; font-weight: 600; font-size: 1rem; }
.cart-remove {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted, #888); font-size: 1rem; padding: 6px;
    border-radius: 4px; transition: color .2s, background .2s;
    flex-shrink: 0;
}
.cart-remove:hover { color: #e74c3c; background: rgba(231,76,60,.1); }

/* Trust Badges */
.trust-badges { display: flex; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.trust-badge {
    display: flex; align-items: center; gap: 6px;
    font-size: .78rem; color: var(--text-muted, #888);
}
.trust-badge span { font-size: 1rem; }

/* Coupon Section */
.coupon-section { margin-bottom: 16px; }
.coupon-label { font-size: .82rem; color: var(--text-muted, #888); display: block; margin-bottom: 6px; }
.coupon-input-row { display: flex; gap: 6px; }
.coupon-input-row input { flex: 1; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border, #444); background: var(--bg, #111); color: var(--text, #eee); font-size: .9rem; }
.coupon-input-row input:read-only { opacity: .7; }
.coupon-msg { font-size: .8rem; margin-top: 4px; min-height: 18px; }
.coupon-applied-badge { font-size: .8rem; color: #27ae60; margin-top: 6px; }
.free-shipping-hint { font-size: .78rem; color: var(--text-muted, #888); margin-top: 4px; }
.free-shipping-tag { color: #27ae60; font-weight: 600; }
.btn-ghost { background: transparent; border: 1px solid var(--border, #444); color: var(--text-muted, #888); }
.btn-ghost:hover { background: var(--surface, #1e1e1e); color: var(--text, #eee); }

/* ── Checkout Page Enhancements ──────────────────────── */
.auth-note {
    background: var(--surface, #1e1e1e);
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: .85rem;
    margin-bottom: 14px;
}
.auth-note a { color: var(--primary, #8b6914); }
.req { color: #e74c3c; }
.field-err { font-size: .78rem; color: #e74c3c; display: block; min-height: 16px; margin-top: 3px; }
.field-invalid { border-color: #e74c3c !important; }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .9rem; }
.checkbox-label input { width: 16px; height: 16px; }
.no-gateways { color: var(--text-muted, #888); font-style: italic; padding: 12px 0; }
.gateway-option {
    display: flex; align-items: center; gap: 12px;
    border: 2px solid var(--border, #333);
    border-radius: 10px; padding: 14px 16px; cursor: pointer;
    transition: border-color .2s, background .2s; margin-bottom: 10px;
}
.gateway-option:has(input:checked) { border-color: var(--primary, #8b6914); background: rgba(139,105,20,.06); }
.gateway-icon-wrap { font-size: 1.4rem; min-width: 28px; text-align: center; }
.gateway-label { flex: 1; }
.gateway-label strong { display: block; font-size: .95rem; }
.gateway-label small { display: block; color: var(--text-muted, #888); font-size: .8rem; margin-top: 2px; }
.badge-test { background: #f39c12; color: #000; font-size: .65rem; padding: 1px 5px; border-radius: 3px; vertical-align: middle; margin-left: 4px; }
.gateway-check { color: var(--primary, #8b6914); font-size: 1.1rem; opacity: 0; transition: opacity .2s; }
.gateway-option:has(input:checked) .gateway-check { opacity: 1; }

/* Checkout sidebar cart preview */
.summary-sticky { position: sticky; top: 20px; }
.checkout-cart-preview { border-bottom: 1px solid var(--border, #333); padding-bottom: 12px; margin-bottom: 12px; }
.summary-section-title { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--text-muted, #888); margin-bottom: 10px; font-weight: 600; }
.edit-cart-link { font-size: .8rem; color: var(--primary, #8b6914); text-decoration: none; }
.edit-cart-link:hover { text-decoration: underline; }
.checkout-item-list { display: flex; flex-direction: column; gap: 8px; }
.checkout-item { display: flex; align-items: center; gap: 10px; }
.checkout-item-img { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.checkout-item-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 1px solid var(--border, #333); }
.checkout-item-img-ph { width: 100%; height: 100%; background: var(--surface, #1e1e1e); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.checkout-item-qty { position: absolute; top: -6px; right: -6px; background: var(--primary, #8b6914); color: #fff; font-size: .62rem; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.checkout-item-name { flex: 1; font-size: .83rem; color: var(--text, #eee); line-height: 1.3; }
.checkout-item-price { font-size: .83rem; font-weight: 600; white-space: nowrap; }
.checkout-terms { font-size: .73rem; color: var(--text-muted, #888); text-align: center; margin-top: 8px; }
.checkout-terms a { color: var(--primary, #8b6914); }

/* ── Order Success Page ──────────────────────────────── */
.success-icon-wrap {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px; font-size: 2rem; color: #fff;
    box-shadow: 0 4px 20px rgba(39,174,96,.4);
    animation: pop .4s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success-order-num { font-size: 1.1rem; margin: 8px 0 4px; }
.success-email-note { font-size: .88rem; color: var(--text-muted, #888); }
.success-card-title { font-size: 1rem; font-weight: 700; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border, #333); }
.tfoot-subtle td { color: var(--text-muted, #888); font-size: .88rem; padding: 5px 10px; }
.order-status-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border, #333); }
.status-item { display: flex; align-items: center; gap: 6px; font-size: .84rem; }
.status-label { color: var(--text-muted, #888); }
.status-badge { padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600; }
.status-paid      { background: rgba(39,174,96,.15); color: #27ae60; }
.status-pending   { background: rgba(243,156,18,.15); color: #f39c12; }
.status-failed    { background: rgba(231,76,60,.15);  color: #e74c3c; }
.status-processing{ background: rgba(52,152,219,.15); color: #3498db; }
.status-shipped   { background: rgba(155,89,182,.15); color: #9b59b6; }
.status-delivered { background: rgba(39,174,96,.15);  color: #27ae60; }
.status-cancelled { background: rgba(149,165,166,.15);color: #95a5a6; }
.status-refunded  { background: rgba(230,126,34,.15); color: #e67e22; }
.status-neutral   { background: var(--surface, #1e1e1e); color: var(--text, #eee); }
.delivery-info p  { margin: 6px 0; font-size: .9rem; }
.delivery-info strong { color: var(--text-muted, #888); font-weight: 500; }
.whats-next { margin-top: 20px; background: var(--bg, #111); border-radius: 8px; padding: 14px 16px; }
.whats-next h4 { margin: 0 0 10px; font-size: .9rem; }
.next-steps { margin: 0; padding-left: 20px; }
.next-steps li { font-size: .85rem; color: var(--text-muted, #888); margin-bottom: 6px; line-height: 1.5; }
.success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* Loading spinner (small) */
.spinner-sm {
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── RTL adjustments ─────────────────────────────────── */
[dir="rtl"] .cart-line-total { text-align: left; }
[dir="rtl"] .next-steps { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .checkout-item-qty { right: auto; left: -6px; }
[dir="rtl"] .edit-cart-link { margin-right: auto; margin-left: 0; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 680px) {
    .cart-row { flex-wrap: wrap; }
    .cart-img  { width: 56px; height: 56px; }
    .cart-line-total { min-width: unset; }
    .checkout-steps { gap: 0; padding: 14px 8px 0; }
    .step-label { display: none; }
    .step-num   { width: 26px; height: 26px; font-size: .7rem; }
    .trust-badges { justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════
   CHECKOUT FLOW — Progress steps, cart enhancements,
   professional checkout, order confirmation
   DefenTek Company
   ═══════════════════════════════════════════════════════════ */

/* ── Progress Steps ──────────────────────────────────────── */
.checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 8px;
    max-width: 560px;
    margin: 0 auto;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 56px;
}
.step-num {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid var(--border, #444);
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700;
    color: var(--text-muted, #888);
    background: transparent;
    transition: all .25s;
}
.step.active .step-num  { background: var(--primary, #8b6914); border-color: var(--primary, #8b6914); color: #fff; }
.step.done   .step-num  { background: #27ae60; border-color: #27ae60; color: #fff; }
.step-label { font-size: .68rem; color: var(--text-muted, #888); white-space: nowrap; }
.step.active .step-label { color: var(--primary, #8b6914); font-weight: 600; }
.step.done   .step-label { color: #27ae60; }
.step-line {
    flex: 1; height: 2px; min-width: 20px;
    background: var(--border, #444);
    transition: background .25s;
}
.step-line.done { background: #27ae60; }

/* ── Cart Items (card style) ─────────────────────────────── */
.cart-items-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.cart-items-header h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.2rem; }
.cart-count-badge {
    font-size: .73rem; background: var(--primary, #8b6914);
    color: #fff; padding: 2px 10px; border-radius: 20px; font-weight: 400;
}
.cart-items-list { display: flex; flex-direction: column; gap: 12px; }
.cart-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface, #1e1e1e);
    border: 1px solid var(--border, #333);
    border-radius: 10px; padding: 14px;
    transition: opacity .25s, border-color .2s;
}
.cart-row:hover { border-color: var(--border-hover, #555); }
.cart-img { width: 72px; height: 72px; flex-shrink: 0; border-radius: 8px; overflow: hidden; }
.cart-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-img-placeholder {
    width: 100%; height: 100%; background: var(--bg, #111);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; border-radius: 8px;
}
.cart-info { flex: 1; min-width: 0; }
.cart-item-name {
    font-weight: 600; color: var(--text, #eee);
    text-decoration: none; display: block; margin-bottom: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .2s;
}
.cart-item-name:hover { color: var(--primary, #8b6914); }
.cart-sku  { color: var(--text-muted, #888); font-size: .73rem; display: block; margin-bottom: 2px; }
.cart-price-original { text-decoration: line-through; color: var(--text-muted, #888); font-size: .78rem; }
.cart-price { color: var(--primary, #8b6914); font-weight: 700; font-size: .95rem; }
.cart-qty   { flex-shrink: 0; }
.cart-line-total { min-width: 88px; text-align: right; font-weight: 600; font-size: .95rem; }
.cart-remove {
    background: none; border: none; cursor: pointer; padding: 6px 8px;
    color: var(--text-muted, #888); font-size: .95rem; border-radius: 4px;
    transition: color .2s, background .2s; flex-shrink: 0;
}
.cart-remove:hover { color: #e74c3c; background: rgba(231,76,60,.1); }

/* Summary card */
.summary-card {
    background: var(--surface, #1e1e1e);
    border: 1px solid var(--border, #333);
    border-radius: 12px; padding: 20px;
}
.summary-title { font-size: 1rem; font-weight: 700; margin: 0 0 16px; }

/* Coupon */
.coupon-section { margin-bottom: 16px; }
.coupon-label   { font-size: .81rem; color: var(--text-muted, #888); display: block; margin-bottom: 7px; }
.coupon-input-row { display: flex; gap: 7px; }
.coupon-input-row input {
    flex: 1; padding: 9px 12px; border-radius: 7px;
    border: 1px solid var(--border, #444);
    background: var(--bg, #111); color: var(--text, #eee);
    font-size: .88rem;
}
.coupon-input-row input:focus { border-color: var(--primary, #8b6914); outline: none; }
.coupon-input-row input[readonly] { opacity: .65; cursor: default; }
.coupon-msg          { font-size: .78rem; margin-top: 5px; min-height: 17px; }
.coupon-applied-badge{ font-size: .8rem; color: #27ae60; margin-top: 5px; }
.free-shipping-hint  { font-size: .77rem; color: var(--text-muted, #888); margin-top: 5px; }
.free-shipping-tag   { color: #27ae60; font-weight: 600; }

/* Trust badges */
.trust-badges { display: flex; gap: 18px; margin-top: 20px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border, #333); }
.trust-badge  { display: flex; align-items: center; gap: 6px; font-size: .77rem; color: var(--text-muted, #888); }
.trust-badge span { font-size: 1rem; }

/* Checkout CTA */
.btn-checkout {
    display: block; text-align: center; margin-top: 16px;
    font-size: 1rem; font-weight: 700; letter-spacing: .02em;
}
.secure-note { text-align: center; font-size: .75rem; color: var(--text-muted, #888); margin: 10px 0 0; }
.btn-ghost { background: transparent; border: 1px solid var(--border, #444); color: var(--text-muted, #888); }
.btn-ghost:hover { background: var(--surface, #1e1e1e); color: var(--text, #eee); border-color: var(--border-hover, #666); }

/* Empty cart */
.empty-cart { text-align: center; padding: 60px 20px; }
.empty-cart-icon { font-size: 4rem; margin-bottom: 16px; opacity: .5; }
.empty-cart h2   { margin: 0 0 10px; font-size: 1.4rem; }
.empty-cart p    { color: var(--text-muted, #888); margin-bottom: 24px; }

/* ── Checkout Page Enhancements ──────────────────────────── */
.auth-note {
    background: var(--bg, #111);
    border: 1px solid var(--border, #333);
    border-left: 3px solid var(--primary, #8b6914);
    border-radius: 6px; padding: 9px 13px;
    font-size: .85rem; margin-bottom: 14px;
}
.auth-note a { color: var(--primary, #8b6914); }
.req         { color: #e74c3c; margin-left: 2px; }
.field-err   { font-size: .76rem; color: #e74c3c; display: block; min-height: 16px; margin-top: 3px; }
input.field-invalid,
textarea.field-invalid { border-color: #e74c3c !important; box-shadow: 0 0 0 2px rgba(231,76,60,.15); }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .88rem; user-select: none; }
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary, #8b6914); cursor: pointer; }

/* Payment gateway cards */
.gateway-options { display: flex; flex-direction: column; gap: 10px; }
.gateway-option {
    display: flex; align-items: center; gap: 12px;
    border: 2px solid var(--border, #333); border-radius: 10px;
    padding: 13px 15px; cursor: pointer;
    transition: border-color .2s, background .2s;
}
.gateway-option:has(input:checked) {
    border-color: var(--primary, #8b6914);
    background: rgba(139,105,20,.07);
}
.gateway-option input[type="radio"] { display: none; }
.gateway-icon-wrap { font-size: 1.5rem; min-width: 30px; text-align: center; }
.gateway-label     { flex: 1; }
.gateway-label strong { display: block; font-size: .93rem; }
.gateway-label small  { display: block; color: var(--text-muted, #888); font-size: .78rem; margin-top: 2px; }
.gateway-check { font-size: 1rem; color: var(--primary, #8b6914); opacity: 0; transition: opacity .2s; margin-left: auto; }
.gateway-option:has(input:checked) .gateway-check { opacity: 1; }
.no-gateways { color: var(--text-muted, #888); font-style: italic; padding: 10px 0; }
.badge-test {
    background: #f39c12; color: #000; font-size: .63rem;
    padding: 1px 5px; border-radius: 3px; vertical-align: middle; margin-left: 5px;
}

/* Checkout sidebar — sticky cart preview */
.summary-sticky { position: sticky; top: 20px; }
.checkout-cart-preview { border-bottom: 1px solid var(--border, #333); padding-bottom: 14px; margin-bottom: 14px; }
.summary-section-title {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .82rem; color: var(--text-muted, #888);
    margin-bottom: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.edit-cart-link { font-size: .8rem; color: var(--primary, #8b6914); text-decoration: none; font-weight: 400; text-transform: none; letter-spacing: 0; }
.edit-cart-link:hover { text-decoration: underline; }
.checkout-item-list { display: flex; flex-direction: column; gap: 9px; }
.checkout-item { display: flex; align-items: center; gap: 10px; }
.checkout-item-img { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.checkout-item-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 1px solid var(--border, #333); }
.checkout-item-img-ph {
    width: 100%; height: 100%; background: var(--bg, #111);
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; border: 1px solid var(--border, #333);
}
.checkout-item-qty {
    position: absolute; top: -7px; right: -7px;
    background: var(--primary, #8b6914); color: #fff;
    font-size: .6rem; font-weight: 700; width: 18px; height: 18px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--surface, #1e1e1e);
}
.checkout-item-name  { flex: 1; font-size: .82rem; color: var(--text, #eee); line-height: 1.35; }
.checkout-item-price { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.checkout-terms { font-size: .72rem; color: var(--text-muted, #888); text-align: center; margin-top: 8px; line-height: 1.5; }
.checkout-terms a { color: var(--primary, #8b6914); }

/* ── Loading spinner ─────────────────────────────────────── */
.spinner-sm {
    display: inline-block; width: 15px; height: 15px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff; border-radius: 50%;
    animation: spin .65s linear infinite;
    vertical-align: middle; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Order Success Page ──────────────────────────────────── */
.success-icon-wrap {
    width: 74px; height: 74px; border-radius: 50%;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px; font-size: 2rem; color: #fff;
    box-shadow: 0 6px 24px rgba(39,174,96,.35);
    animation: pop .4s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success-order-num  { font-size: 1.05rem; margin: 8px 0 4px; }
.success-email-note { font-size: .86rem; color: var(--text-muted, #888); }
.success-card-title {
    font-size: .97rem; font-weight: 700; margin: 0 0 14px;
    padding-bottom: 11px; border-bottom: 1px solid var(--border, #333);
}

/* Order status strip */
.order-status-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border, #333); }
.status-item  { display: flex; align-items: center; gap: 6px; font-size: .83rem; }
.status-label { color: var(--text-muted, #888); }
.status-badge { padding: 3px 11px; border-radius: 20px; font-size: .77rem; font-weight: 600; }
.status-paid       { background: rgba(39,174,96,.15);  color: #27ae60; }
.status-pending    { background: rgba(243,156,18,.15); color: #f39c12; }
.status-failed     { background: rgba(231,76,60,.15);  color: #e74c3c; }
.status-processing { background: rgba(52,152,219,.15); color: #3498db; }
.status-shipped    { background: rgba(155,89,182,.15); color: #9b59b6; }
.status-delivered  { background: rgba(39,174,96,.15);  color: #27ae60; }
.status-cancelled  { background: rgba(149,165,166,.15);color: #95a5a6; }
.status-refunded   { background: rgba(230,126,34,.15); color: #e67e22; }
.status-neutral    { background: var(--surface, #1e1e1e); color: var(--text, #eee); border: 1px solid var(--border, #333); }

/* Delivery info */
.delivery-info p { margin: 7px 0; font-size: .88rem; }
.delivery-info strong { color: var(--text-muted, #888); font-weight: 500; min-width: 110px; display: inline-block; }

/* What happens next */
.whats-next { margin-top: 20px; background: var(--bg, #111); border-radius: 8px; padding: 14px 16px; border: 1px solid var(--border, #333); }
.whats-next h4 { margin: 0 0 10px; font-size: .88rem; }
.next-steps { margin: 0; padding-left: 18px; }
.next-steps li { font-size: .83rem; color: var(--text-muted, #888); margin-bottom: 7px; line-height: 1.55; }
.tfoot-subtle td { color: var(--text-muted, #888); font-size: .86rem; padding: 5px 10px; }
.success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ── RTL Additions ───────────────────────────────────────── */
[dir="rtl"] .cart-line-total   { text-align: left; }
[dir="rtl"] .cart-remove       { margin-left: 0; margin-right: auto; }
[dir="rtl"] .next-steps        { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .checkout-item-qty { right: auto; left: -7px; }
[dir="rtl"] .auth-note         { border-left: none; border-right: 3px solid var(--primary, #8b6914); }
[dir="rtl"] .req               { margin-left: 0; margin-right: 2px; }
[dir="rtl"] .spinner-sm        { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .delivery-info strong { display: inline; margin-left: 6px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 700px) {
    .cart-row       { flex-wrap: wrap; }
    .cart-img       { width: 60px; height: 60px; }
    .cart-line-total{ min-width: unset; flex-basis: 100%; text-align: right; padding-top: 6px; }
    .checkout-steps { padding: 14px 6px 4px; }
    .step-label     { display: none; }
    .step-num       { width: 28px; height: 28px; font-size: .7rem; }
    .trust-badges   { justify-content: center; }
    .gateway-option { padding: 11px 12px; }
    .success-actions{ flex-direction: column; align-items: center; }
    .success-actions .btn { width: 100%; max-width: 280px; }
    .order-status-strip { flex-direction: column; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MODERN STOREFRONT OVERHAUL (appended — DefenTek Company)
   Amazon-style catalog: light storefront surface, clean product cards,
   sticky filter sidebar. SVG icons (no emoji).
   ═══════════════════════════════════════════════════════════════════ */
.shop-section{
  --s-bg:#f3f4f6; --s-card:#ffffff; --s-text:#0f1722; --s-muted:#6b7280;
  --s-border:#e5e7eb; --s-accent:#C4A035; --s-accent-d:#9a7d22; --s-price:#0f1722; --s-sale:#c0392b;
  background:var(--s-bg); color:var(--s-text);
  padding:28px 20px 60px; min-height:60vh;
}
.shop-container{max-width:1280px; margin:0 auto; display:grid; grid-template-columns:248px 1fr; gap:28px; align-items:start;}
.shop-sidebar{position:sticky; top:90px; background:var(--s-card); border:1px solid var(--s-border); border-radius:14px; padding:18px; box-shadow:0 1px 2px rgba(16,23,34,.04);}
.shop-sidebar .filter-group{margin-bottom:18px;}
.shop-sidebar .filter-group:last-child{margin-bottom:0;}
.shop-sidebar h4{font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--s-muted); margin:0 0 10px;}
.cat-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
.cat-list a{display:block; padding:8px 12px; border-radius:9px; color:var(--s-text); font-size:.92rem; font-weight:500; transition:background .15s, color .15s;}
.cat-list a:hover{background:var(--s-bg);}
.cat-list a.active{background:var(--s-accent); color:#1a1205; font-weight:700;}
.sidebar-search{position:relative; display:flex; align-items:center;}
.sidebar-search .ssearch-ico{position:absolute; inset-inline-start:11px; color:var(--s-muted); display:flex;}
.sidebar-search .search-input{width:100%; padding:10px 12px; padding-inline-start:36px; border:1px solid var(--s-border); border-radius:9px; background:var(--s-bg); color:var(--s-text); font-size:.9rem; outline:none;}
.sidebar-search .search-input:focus{border-color:var(--s-accent); background:#fff;}

.shop-toolbar{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
.shop-results h2{font-size:1.5rem; font-weight:800; margin:0 0 2px; color:var(--s-text);}
.result-count{font-size:.85rem; color:var(--s-muted);}
.sort-form{display:flex; align-items:center; gap:8px;}
.sort-label{font-size:.85rem; color:var(--s-muted);}
.sort-select{padding:9px 12px; border:1px solid var(--s-border); border-radius:9px; background:var(--s-card); color:var(--s-text); font-size:.88rem; cursor:pointer;}

.product-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:20px;}
.product-card{display:flex; flex-direction:column; background:var(--s-card); border:1px solid var(--s-border); border-radius:14px; overflow:hidden; transition:transform .18s, box-shadow .18s, border-color .18s;}
.product-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px -16px rgba(16,23,34,.35); border-color:#d6dae0;}
.pc-media{position:relative; aspect-ratio:1/1; background:#fff; display:grid; place-items:center; overflow:hidden;}
.pc-img{width:100%; height:100%; object-fit:contain; padding:14px;}
.pc-ph{width:100%; height:100%; display:grid; place-items:center; color:#fff;}
.pc-ph[data-n="0"]{background:linear-gradient(135deg,#64748b,#94a3b8);}
.pc-ph[data-n="1"]{background:linear-gradient(135deg,#0ea5e9,#38bdf8);}
.pc-ph[data-n="2"]{background:linear-gradient(135deg,#6366f1,#818cf8);}
.pc-ph[data-n="3"]{background:linear-gradient(135deg,#10b981,#34d399);}
.pc-ph[data-n="4"]{background:linear-gradient(135deg,#f59e0b,#fbbf24);}
.pc-ph[data-n="5"]{background:linear-gradient(135deg,#ef4444,#f87171);}
.pc-badge{position:absolute; top:10px; inset-inline-start:10px; font-size:.72rem; font-weight:800; padding:4px 9px; border-radius:7px; color:#fff;}
.pc-badge-sale{background:var(--s-sale);}
.pc-badge-oos{background:#374151; inset-inline-start:auto; inset-inline-end:10px;}
.pc-wish{position:absolute; top:8px; inset-inline-end:8px; width:36px; height:36px; border-radius:50%; border:1px solid var(--s-border); background:rgba(255,255,255,.92); color:#9ca3af; cursor:pointer; display:grid; place-items:center; transition:color .15s, transform .15s;}
.pc-wish:hover{transform:scale(1.08); color:var(--s-sale);}
.pc-wish.active{color:var(--s-sale);} .pc-wish.active svg{fill:var(--s-sale);}
.pc-body{padding:14px 14px 6px; flex:1; display:flex; flex-direction:column; gap:5px;}
.pc-cat{font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--s-accent-d);}
.pc-name{font-size:.98rem; font-weight:650; line-height:1.35; margin:0;}
.pc-name a{color:var(--s-text);}
.pc-name a:hover{color:var(--s-accent-d);}
.pc-desc{font-size:.82rem; color:var(--s-muted); line-height:1.45; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.pc-price{display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:6px;}
.price-now{font-size:1.2rem; font-weight:800; color:var(--s-price);}
.price-was{font-size:.85rem; color:var(--s-muted); text-decoration:line-through;}
.pc-stock{display:flex; align-items:center; gap:5px; font-size:.78rem; font-weight:600; color:#059669; margin:2px 0 0;}
.pc-foot{padding:12px 14px 16px;}
.btn-add-cart{width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 14px; border:none; border-radius:10px; cursor:pointer; font-size:.9rem; font-weight:700; color:#1a1205;
  background:linear-gradient(180deg,#e7c25a,var(--s-accent)); transition:filter .15s, transform .15s, box-shadow .15s;}
.btn-add-cart:hover{filter:brightness(1.04); transform:translateY(-1px); box-shadow:0 8px 18px -8px rgba(196,160,53,.6);}
.btn-add-cart.is-disabled{background:#e5e7eb; color:#9ca3af; cursor:not-allowed; box-shadow:none; transform:none;}

.shop-pagination{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:34px;}
.shop-pagination .page-link{min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border:1px solid var(--s-border); border-radius:9px; background:var(--s-card); color:var(--s-text); font-weight:600; font-size:.9rem;}
.shop-pagination .page-link:hover{border-color:var(--s-accent);}
.shop-pagination .page-link.active{background:var(--s-accent); border-color:var(--s-accent); color:#1a1205;}

.empty-shop{background:var(--s-card); border:1px solid var(--s-border); border-radius:14px; padding:60px 20px; text-align:center; color:var(--s-muted);}

.cart-toast{position:fixed; inset-block-end:24px; inset-inline-end:24px; background:#111827; color:#fff; padding:14px 20px; border-radius:12px; font-weight:600; box-shadow:0 16px 40px -12px rgba(0,0,0,.5); opacity:0; transform:translateY(12px); transition:opacity .25s, transform .25s; z-index:9999;}
.cart-toast.show{opacity:1; transform:translateY(0);}

@media (max-width:880px){
  .shop-container{grid-template-columns:1fr;}
  .shop-sidebar{position:static;}
}
@media (max-width:520px){
  .product-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .pc-foot{padding:10px;}
}

/* ═══ Store header (Amazon/eBay-style, full width) ═══════════════════ */
.store-header{width:100%; background:linear-gradient(100deg,#10151c,#1b2430); color:#fff; border-bottom:3px solid var(--accent-amber,#C4A035);}
.store-header-inner{max-width:1320px; margin:0 auto; display:flex; align-items:center; gap:20px; padding:16px 24px;}
.store-brand{display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:1.15rem; white-space:nowrap; text-decoration:none;}
.store-brand:hover{color:#fff;}
.store-brand svg{color:var(--accent-amber,#C4A035);}
.store-search{flex:1; display:flex; align-items:stretch; background:#fff; border-radius:10px; overflow:hidden; max-width:760px; box-shadow:0 2px 10px rgba(0,0,0,.18);}
.store-search input{flex:1; border:none; outline:none; padding:12px 16px; font-size:.98rem; color:#111; background:#fff;}
.store-search button{border:none; cursor:pointer; padding:0 20px; display:grid; place-items:center; color:#1a1205; background:linear-gradient(180deg,#e7c25a,var(--accent-amber,#C4A035)); transition:filter .15s;}
.store-search button:hover{filter:brightness(1.05);}
.store-cart-pill{display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:700; padding:9px 16px; border:1px solid rgba(255,255,255,.18); border-radius:10px; white-space:nowrap; text-decoration:none; transition:background .15s;}
.store-cart-pill:hover{background:rgba(255,255,255,.08); color:#fff;}
.store-cart-pill .cart-count{min-width:22px; height:22px; display:inline-grid; place-items:center; padding:0 6px; border-radius:11px; background:var(--accent-amber,#C4A035); color:#1a1205; font-size:.8rem; font-weight:800;}
.store-deptbar{background:rgba(0,0,0,.22); border-top:1px solid rgba(255,255,255,.06);}
.store-deptbar-inner{max-width:1320px; margin:0 auto; display:flex; gap:4px; padding:0 18px; overflow-x:auto; scrollbar-width:none;}
.store-deptbar-inner::-webkit-scrollbar{display:none;}
.store-deptbar-inner a{color:#d6dbe2; font-size:.86rem; font-weight:600; padding:11px 14px; white-space:nowrap; text-decoration:none; border-bottom:2px solid transparent; transition:color .15s, border-color .15s;}
.store-deptbar-inner a:hover{color:#fff; border-bottom-color:var(--accent-amber,#C4A035);}

/* Wider, well-padded catalog + dropdown readability fixes */
.shop-section{padding-top:26px;}
.shop-container{max-width:1320px;}
.shop-section select,
.sort-select{color:#0f1722; background:#fff;}
.shop-section select option,
.store-header select option{background:#fff; color:#0f1722;}

@media (max-width:760px){
  .store-header-inner{flex-wrap:wrap; gap:12px; padding:12px 16px;}
  .store-brand{order:1;}
  .store-cart-pill{order:2; margin-inline-start:auto;}
  .store-search{order:3; flex-basis:100%; max-width:none;}
  .shop-section{padding-left:14px; padding-right:14px;}
}

/* Clear the fixed site nav (theme uses 70px) */
.store-header{ margin-top:70px; }
@media (max-width:760px){ .store-header{ margin-top:60px; } }

/* Keep the store search button on-brand (gold), overriding theme button styles */
.store-header .store-search button{ background:linear-gradient(180deg,#e7c25a,var(--accent-amber,#C4A035)) !important; color:#1a1205 !important; }

/* ═══ Wishlist page (reuses the modern product-card styles) ═════════ */
.wishlist-section .wishlist-wrap{max-width:1320px; margin:0 auto;}
.wishlist-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px;}
.wishlist-title{display:flex; align-items:center; gap:10px; font-size:1.6rem; font-weight:800; color:var(--s-text); margin:0;}
.wishlist-title small{font-size:.95rem; font-weight:500; color:var(--s-muted);}
.wishlist-heart{color:var(--s-sale); display:inline-flex;}
.wishlist-continue{font-weight:700; color:var(--s-accent-d); white-space:nowrap; text-decoration:none;}
.wishlist-continue:hover{text-decoration:underline;}
.pc-added{font-size:.74rem; color:var(--s-muted); margin:2px 0 0;}
.wishlist-section .pc-wish.btn-remove-wish{color:var(--s-sale); background:#fff;}
.wishlist-section .pc-wish.btn-remove-wish:hover{background:var(--s-sale); color:#fff;}

/* ═══════════════════════════════════════════════════════════════════
   Uniform light storefront
   The listing (.shop-section) sets its own light background, but the
   product / cart / checkout / account / success / auth pages had no
   background and fell through to the dark site <body>, so they rendered
   dark while the listing was light. The shop layout now adds .shop-body
   to <body>; give every shop page the same light surface and hide the
   dark grid overlay so the whole store is consistently light.
   ═══════════════════════════════════════════════════════════════════ */
body.shop-body { background: var(--shop-bg); }
body.shop-body .grid-bg { display: none; }

/* Give the LIGHT content pages dark text. The dark top nav & store-header
   keep their own light text — so we do NOT set a colour on <body> itself
   (that turned the nav's Sign-In button dark-on-dark). */
body.shop-body .product-detail,
body.shop-body .cart-section,
body.shop-body .checkout-section,
body.shop-body .order-success-section,
body.shop-body .wishlist-section,
body.shop-body .account-section,
body.shop-body .auth-section { color: var(--shop-text); }

/* The Sign-In button lives in the DARK top nav but uses the light-palette
   --shop-text by default, so it vanished. Force readable light styling. */
body.shop-body .nav .btn-outline { color:#fff; border-color:rgba(255,255,255,.40); }
body.shop-body .nav .btn-outline:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.70); color:#fff; }

/* The shop nav always sits over LIGHT content. The default theme makes the
   un-scrolled nav a semi-transparent dark→transparent GRADIENT with a heavy
   backdrop-blur — over the colourful product grid that smears into an ugly
   muddy/pink band when you scroll up. Force a solid opaque dark nav in both
   states, and make its wishlist/cart icons light so they don't vanish. */
body.shop-body .nav { background:#0a0c0f !important; background-image:none !important; }
body.shop-body .nav .shop-nav-icon,
body.shop-body .nav .shop-nav-icon svg { color: var(--text-primary, #e8e8e8); }
body.shop-body .nav .shop-nav-icon:hover { color:#fff; }

/* Inputs inside the LIGHT shop pages need dark text. The global enhance
   layer defaults all inputs to light (var(--text-primary)→#E8E8E8), which
   was invisible on the light store (e.g. the product quantity number).
   Scoped to the light sections so the dark store-header search keeps light. */
body.shop-body .shop-section input, body.shop-body .shop-section textarea, body.shop-body .shop-section select,
body.shop-body .product-detail input, body.shop-body .product-detail textarea, body.shop-body .product-detail select,
body.shop-body .cart-section input, body.shop-body .cart-section textarea, body.shop-body .cart-section select,
body.shop-body .checkout-section input, body.shop-body .checkout-section textarea, body.shop-body .checkout-section select,
body.shop-body .account-section input, body.shop-body .account-section textarea, body.shop-body .account-section select,
body.shop-body .auth-section input, body.shop-body .auth-section textarea, body.shop-body .auth-section select,
body.shop-body .wishlist-section input, body.shop-body .wishlist-section textarea, body.shop-body .wishlist-section select {
    color: var(--shop-text);
    background: var(--shop-surface, #fff);
    border: 1px solid var(--shop-border, #e5e7eb);
}
body.shop-body .shop-section input::placeholder, body.shop-body .product-detail input::placeholder,
body.shop-body .cart-section input::placeholder, body.shop-body .checkout-section input::placeholder,
body.shop-body .account-section input::placeholder, body.shop-body .auth-section input::placeholder,
body.shop-body .checkout-section textarea::placeholder { color: var(--shop-muted, #6b7280); }
/* Keep the focus ring on-brand for light inputs */
body.shop-body .auth-section input:focus, body.shop-body .checkout-section input:focus,
body.shop-body .account-section input:focus, body.shop-body .product-detail input:focus {
    border-color: var(--shop-accent, #C4A035);
    box-shadow: 0 0 0 3px rgba(196,160,53,.15);
}

/* No-image product placeholder is a dark PNG — invert it to a light
   wireframe so it blends with the light store instead of a black box. */
.main-product-img[src*="placeholder"] {
    filter: invert(1) brightness(1.7) contrast(.9);
    opacity: .55;
}