/* ==========================================================================
   Modeer — Public Storefront (store.css)
   Premium Apple-style · Light theme only · Minimalist
   ========================================================================== */

:root {
    --font-arabic: 'Tajawal', sans-serif;
    --font-latin: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-sans: var(--font-arabic), var(--font-latin);

    --bg:          #F5F5F7;
    --bg-card:     #FFFFFF;
    --bg-soft:     #F4F4F7;
    --bg-glass:    rgba(255,255,255,0.85);
    --text-primary:   #1D1D1F;
    --text-secondary: #6E6E73;
    --text-muted:     #AEAEB2;
    --border:         rgba(0,0,0,0.08);
    --border-strong:  rgba(0,0,0,0.13);

    --accent:       #6366F1;
    --accent-dark:  #4F46E5;
    --success:      #10B981;
    --danger:       #EF4444;
    --whatsapp:     #25D366;
    --whatsapp-dk:  #128C7E;

    --radius-sm:   10px;
    --radius:      16px;
    --radius-lg:   22px;
    --radius-pill: 9999px;

    --ease-out:    cubic-bezier(0.16,1,0.3,1);
    --ease-spring: cubic-bezier(0.34,1.56,0.64,1);

    --shadow-sm:   0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:   0 4px 16px -4px rgba(0,0,0,0.10);
    --shadow-lg:   0 12px 40px -10px rgba(0,0,0,0.16);
    --shadow-xl:   0 24px 60px -12px rgba(0,0,0,0.22);
}

/* ── Dark mode token overrides (Task 7) ── */
[data-bs-theme="dark"] {
    --bg:          #1C1C1E;
    --bg-card:     #2C2C2E;
    --bg-soft:     #3A3A3C;
    --bg-glass:    rgba(28,28,30,0.85);
    --text-primary:   #F5F5F7;
    --text-secondary: #AEAEB2;
    --text-muted:     #6E6E73;
    --border:         rgba(255,255,255,0.10);
    --border-strong:  rgba(255,255,255,0.16);
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.30);
    --shadow-md:   0 4px 16px -4px rgba(0,0,0,0.45);
    --shadow-lg:   0 12px 40px -10px rgba(0,0,0,0.55);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { overflow-x: hidden; }
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
    font-size: 15px;
    padding-bottom: 60px;
    /* No top padding — hero is not fixed */
}

/* ==========================================================================
   Sticky Mini Header
   ========================================================================== */
.store-header {
    position: sticky;
    top: 0;
    background: var(--bg-glass);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border);
    z-index: 100;
    padding: 10px 0;
}
.store-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.store-brand { display: flex; align-items: center; gap: 10px; }
.store-logo-mini {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg,#6366F1,#8B5CF6);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 14px; flex-shrink: 0;
    overflow: hidden;
}
.store-logo-mini img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
.store-header .store-name {
    font-size: 14px; font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 45vw;
}
.store-header-actions { display:flex; align-items:center; gap:10px; }

/* Task 7: Dark mode toggle button */
.theme-toggle-btn {
    position: relative; width: 40px; height: 40px; border-radius: 50%;
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-secondary); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; transition: all .25s var(--ease-out);
    box-shadow: var(--shadow-sm);
}
.theme-toggle-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-md); }

.header-cart-btn {
    position: relative; width: 40px; height: 40px; border-radius: 50%;
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-primary); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; transition: all .2s var(--ease-out);
    box-shadow: var(--shadow-sm);
}
.header-cart-btn:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.cart-badge {
    position: absolute; top: -4px; inset-inline-end: -4px;
    min-width: 18px; height: 18px; border-radius: var(--radius-pill);
    background: linear-gradient(135deg,#6366F1,#8B5CF6);
    color: #fff; font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 5px; border: 2px solid var(--bg);
    animation: badge-pop .4s var(--ease-spring);
}
@keyframes badge-pop { from{transform:scale(0);opacity:0;} to{transform:scale(1);opacity:1;} }

/* ==========================================================================
   Hero — Banner + Logo Overlap
   ========================================================================== */
.store-hero-wrap {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.store-banner {
    position: relative;
    width: 100%;
    height: 240px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #4c1d95 100%);
    margin-bottom: 0;
}
@media (max-width: 768px) { .store-banner { height: 170px; border-radius: 0; } }

.store-banner-img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
/* Task 3: Banner overlay removed — no dark tint, banner shows clean */

/* Profile area overlapping banner bottom */
.store-profile-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 8px;
    /* Pulls logo up over banner */
    margin-top: -52px;
    position: relative;
    z-index: 2;
}

.store-logo-wrap {
    margin-bottom: 14px;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.18));
}
.store-logo {
    width: 96px; height: 96px;
    border-radius: 24px;
    background: linear-gradient(135deg,#6366F1,#8B5CF6);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 900; font-size: 36px;
    border: 4px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    position: relative;
}
.store-logo img {
    width:100%; height:100%; object-fit:cover; border-radius:20px;
    pointer-events: none; -webkit-user-drag: none;
}
@media (max-width: 600px) {
    .store-logo { width:76px; height:76px; font-size:28px; border-radius:20px; }
    .store-profile-area { margin-top: -38px; }
}

.store-info-block {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    width: 100%; max-width: 560px;
}
.store-name-hero {
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 800; letter-spacing: -.025em;
    color: var(--text-primary); margin: 0; line-height: 1.2;
}

/* Task 1: Store bio */
.store-bio-hero {
    font-size: 14px; line-height: 1.6; color: var(--text-secondary);
    margin: 0; max-width: 420px; text-align: center;
}

/* Social icons row */
.store-social-row {
    display: flex; align-items: center; gap: 8px;
}
.store-social-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg-card); border: 1px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-secondary); font-size: 14px;
    text-decoration: none;
    transition: all .2s var(--ease-out);
    box-shadow: var(--shadow-sm);
}
.store-social-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--text-primary); }
.store-social-btn .fa-facebook-f  { color: #1877F2; }
.store-social-btn .fa-instagram   { color: #E4405F; }
.store-social-btn .fa-x-twitter   { color: #000; }

/* Search bar in hero */
.store-search-wrap {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
}
.store-search {
    flex: 1;
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: all .2s var(--ease-out);
}
.store-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}
.store-search i { color: var(--text-muted); font-size: 14px; flex-shrink:0; }
.store-search input {
    flex: 1; border: none; outline: none;
    background: transparent; font-family: inherit;
    font-size: 14px; color: var(--text-primary); min-width:0;
}
.store-search input::placeholder { color: var(--text-muted); }
/* Task 4: English numerals utility */
.en-numbers {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    display: inline-block;
}

/* ==========================================================================
   Category Pills Navigation
   ========================================================================== */
.category-nav-wrap {
    max-width: 1180px;
    margin: 20px auto 0;
    padding: 0 20px;
    overflow: hidden;
}
.category-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}
.category-nav::-webkit-scrollbar { display: none; }
.cat-pill {
    display: inline-flex; align-items: center;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border-strong);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: all .2s var(--ease-out);
    box-shadow: var(--shadow-sm);
}
.cat-pill:hover { border-color: var(--accent); color: var(--accent); }
.cat-pill.active {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: #fff;
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Products Grid
   ========================================================================== */
.store-products {
    max-width: 1180px;
    margin: 24px auto 0;
    padding: 0 20px;
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
    gap: 20px;
}

.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .2s;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    animation: card-in .5s var(--ease-out) both;
}
@keyframes card-in { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
.product-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }

.product-img-wrap {
    position: relative; width:100%; aspect-ratio:1/1;
    overflow:hidden;
    background: linear-gradient(135deg,#f5f5f7 0%,rgba(99,102,241,.04) 100%);
}
.product-img-wrap img {
    width:100%; height:100%; object-fit:cover;
    transition: transform .6s var(--ease-out); display:block;
    pointer-events:none; -webkit-user-drag:none;
}
.product-card:hover .product-img-wrap img { transform:scale(1.05); }
.product-img-placeholder {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); font-size:36px; opacity:.3;
}
.product-sale-badge {
    position:absolute; top:10px; inset-inline-start:10px;
    padding:4px 10px; border-radius:var(--radius-pill);
    background: linear-gradient(135deg,#EF4444,#DC2626);
    color:#fff; font-size:10.5px; font-weight:700;
    box-shadow:0 4px 10px -2px rgba(239,68,68,.4);
}
.product-category-chip {
    position:absolute; top:10px; inset-inline-end:10px;
    padding:3px 9px; border-radius:var(--radius-pill);
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(8px);
    color:var(--text-secondary); font-size:10px; font-weight:600;
    border: 1px solid var(--border);
}

.product-body {
    padding: 16px 18px 18px;
    display:flex; flex-direction:column; gap:8px; flex:1;
}
.product-name {
    font-size:15.5px; font-weight:700; color:var(--text-primary);
    letter-spacing:-.01em; line-height:1.35; margin:0;
    overflow:hidden; display:-webkit-box;
    -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
/* Task 5: product description removed from card — hidden */
.product-desc { display: none; }
.product-price-row {
    display:flex; align-items:baseline; gap:10px; margin-top:4px; flex-wrap:wrap;
}
.product-price-now {
    font-size:21px; font-weight:800; color:var(--text-primary);
    letter-spacing:-.025em; font-variant-numeric:tabular-nums; line-height:1;
    display:inline-flex; align-items:baseline; gap:4px; direction:ltr;
}
.product-price-now.has-sale { color: var(--danger); }
.product-price-old {
    font-size:13px; color:var(--text-muted);
    text-decoration:line-through; text-decoration-thickness:1.5px;
    display:inline-flex; align-items:baseline; gap:3px; direction:ltr;
}

/* Currency label — left of number in LTR direction */
.price-cur {
    font-size:11.5px; font-weight:600;
    color:var(--text-muted);
    letter-spacing:0;
    order: -1;
}
.product-price-now.has-sale .price-cur { color: var(--danger); opacity: .75; }
/* Task 5: Redesigned pill add-to-cart button */
.add-to-cart-btn {
    margin-top: 12px; width: 100%; padding: 10px 14px;
    background: var(--text-primary); color: var(--bg-card);
    border: none; border-radius: var(--radius-pill); font-family: inherit;
    font-size: 13px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    transition: all .25s var(--ease-out);
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    letter-spacing: -.01em;
}
.add-to-cart-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -4px rgba(0,0,0,.22); }
.add-to-cart-btn:active { transform: scale(.97); }
.add-to-cart-btn.added { background: var(--success); color: #fff; box-shadow: 0 4px 12px rgba(16,185,129,.35); }

/* Skeleton */
.skeleton-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); aspect-ratio:3/4;
    position:relative; overflow:hidden; box-shadow:var(--shadow-sm);
}
.skeleton-card::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.05) 50%,transparent 100%);
    animation:shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { 0%{transform:translateX(100%);} 100%{transform:translateX(-100%);} }

/* State blocks */
.state-block { text-align:center; padding:80px 20px; color:var(--text-secondary); grid-column:1/-1; }
.state-icon {
    width:72px; height:72px; margin:0 auto 16px; border-radius:50%;
    background:var(--bg-card); border:1px solid var(--border);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:26px; color:var(--text-muted);
}
.state-title { font-size:18px; font-weight:700; color:var(--text-primary); margin-bottom:6px; }
.state-text { font-size:14px; }

/* ==========================================================================
   Cart Offcanvas
   ========================================================================== */
/* ── Cart Offcanvas Header ── */
.cart-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.cart-offcanvas-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.cart-close-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: all .2s;
    flex-shrink: 0;
}
.cart-close-btn:hover { background: var(--border); color: var(--text-primary); }

/* ── Cart Empty State ── */
.cart-empty {
    text-align:center; padding:40px 20px; color:var(--text-secondary);
}
.cart-empty-icon {
    width:80px; height:80px; margin:0 auto 16px; border-radius:50%;
    background:var(--bg-soft); display:inline-flex; align-items:center;
    justify-content:center; font-size:28px; color:var(--text-muted);
}
.cart-empty h3 { font-size:17px; font-weight:700; color:var(--text-primary); margin-bottom:6px; }
.cart-empty p { font-size:13px; margin-bottom:16px; }

/* ── Cart Items ── */
.cart-items { padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }
@keyframes cart-item-in { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

.cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-soft);
    border-radius: 16px;
    border: none;
    animation: cart-item-in .3s var(--ease-out);
}

/* RTL: image on right, details on left */
.cart-item-img {
    width: 60px; height: 60px;
    border-radius: 12px;
    background: var(--bg-card);
    overflow: hidden;
    flex-shrink: 0;
    order: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.cart-item-img img { width:100%; height:100%; object-fit:cover; }
.cart-item-img-placeholder {
    width:100%; height:100%; display:flex; align-items:center;
    justify-content:center; color:var(--text-muted); font-size:18px; opacity:.4;
}

.cart-item-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; order: 0; }
.cart-item-name {
    font-size: 13.5px; font-weight: 600; color: var(--text-primary); line-height: 1.35;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cart-item-price {
    font-size: 12px; color: var(--text-secondary);
}
.cart-item-price strong { color: var(--text-primary); font-weight: 700; }

.cart-item-controls {
    display: flex; align-items: center; justify-content: space-between; margin-top: 4px;
}

/* Pill qty stepper */
.qty-stepper {
    display: inline-flex; align-items: center;
    background: var(--bg-card);
    border-radius: 999px;
    border: 1px solid var(--border);
    padding: 1px;
    gap: 0;
}
.qty-btn {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: transparent; border: none;
    color: var(--text-primary); cursor: pointer; font-size: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.qty-btn:hover { background: var(--bg-soft); color: var(--accent); }
.qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.qty-value {
    min-width: 24px; text-align: center;
    font-size: 13px; font-weight: 700; color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

/* Trash button */
.cart-item-remove {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: transparent; border: none;
    color: var(--text-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; transition: all .2s;
}
.cart-item-remove:hover { background: rgba(239,68,68,.10); color: var(--danger); }

/* ── Cart Footer ── */
.cart-footer {
    padding: 14px 16px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: 0 -6px 24px rgba(0,0,0,.06);
    border-radius: 0 0 20px 20px;
}

.cart-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cart-total-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.cart-total-amount {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -.03em;
    font-family: 'Inter', sans-serif;
    direction: ltr;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}

.cart-total-amount .cur {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Footer action row: checkout btn + trash icon side by side */
.cart-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* WhatsApp checkout — compact, rounded, dominant */
.cart-checkout-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 18px;
    border-radius: 12px;
    border: none;
    background: #1DB954;
    color: #fff;
    font-family: 'Tajawal', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, transform .15s, box-shadow .18s;
    box-shadow: 0 3px 10px rgba(29,185,84,.30);
    white-space: nowrap;
}

.cart-checkout-btn i {
    font-size: 15px;
    flex-shrink: 0;
}

.cart-checkout-btn:hover {
    background: #17a349;
    box-shadow: 0 5px 16px rgba(29,185,84,.40);
    transform: translateY(-1px);
}

.cart-checkout-btn:active {
    transform: scale(0.975);
    transition-duration: 0.08s;
}

/* Trash — subtle icon-only pill */
.cart-clear-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1.5px solid var(--border-strong);
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all .18s;
}

.cart-clear-btn:hover {
    border-color: rgba(239,68,68,.35);
    background: rgba(239,68,68,.07);
    color: var(--danger);
}

.cart-clear-btn:active {
    transform: scale(0.92);
    transition-duration: 0.08s;
}

/* Dark mode */
[data-bs-theme="dark"] .cart-footer {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: 0 -6px 24px rgba(0,0,0,.25);
}

[data-bs-theme="dark"] .cart-clear-btn {
    border-color: var(--border-strong);
    color: var(--text-muted);
}

[data-bs-theme="dark"] .cart-clear-btn:hover {
    border-color: rgba(239,68,68,.50);
    background: rgba(239,68,68,.12);
    color: var(--danger);
}

/* ==========================================================================
   Toast
   ========================================================================== */
.store-toast {
    position:fixed; bottom:24px; left:50%;
    transform:translateX(-50%) translateY(80px);
    background:var(--text-primary); color:var(--bg-card);
    padding:10px 20px; border-radius:var(--radius-pill);
    font-size:13px; font-weight:600;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
    opacity:0; transition:opacity .25s var(--ease-out), transform .4s var(--ease-spring);
    z-index:300; pointer-events:none;
    display:inline-flex; align-items:center; gap:8px;
}
.store-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ==========================================================================
   Footer
   ========================================================================== */
.store-footer {
    max-width:1180px; margin:60px auto 0; padding:24px 20px;
    text-align:center; font-size:12px; color:var(--text-muted);
    border-top:1px solid var(--border);
}
.store-footer a { color:var(--accent); text-decoration:none; font-weight:600; }
.store-footer a:hover { text-decoration:underline; }

/* ==========================================================================
   Product Details Modal (PDM) — Premium 2-column
   ========================================================================== */
/* ==========================================================================
   Product Details Modal (PDM) — Premium redesign
   ========================================================================== */
.pdm-dialog {
    max-width: 820px;
}

.pdm-content {
    border: none;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 32px 80px -16px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.06);
    position: relative;
    background: var(--bg-card);
}

/* Close button — top corner, glassy */
.pdm-close {
    position: absolute; top: 14px; inset-inline-end: 14px; z-index: 10;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    color: var(--text-secondary); cursor: pointer; font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .18s ease;
}
.pdm-close:hover {
    background: var(--border);
    color: var(--text-primary);
    transform: rotate(90deg);
}

/* Two-column grid */
.pdm-body {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 500px;
}

@media (max-width: 680px) {
    .pdm-body { grid-template-columns: 1fr; }
    .pdm-dialog { max-width: 100%; margin: 0; }
    .pdm-content { border-radius: 24px 24px 0 0; }
}

/* ── Image column ── */
.pdm-image-col {
    position: relative;
    background: var(--bg-soft);
    overflow: hidden;
    border-inline-end: 1px solid var(--border);
    min-height: 420px;
}

@media (max-width: 680px) {
    .pdm-image-col { min-height: 260px; border-inline-end: none; border-bottom: 1px solid var(--border); }
}

.pdm-image-wrap {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
}

.pdm-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none; -webkit-user-drag: none; user-select: none;
    transition: transform .35s ease;
}
.pdm-img:hover { transform: scale(1.04); }

.pdm-img-placeholder {
    position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 52px; opacity: .18;
}

.pdm-discount-badge {
    position: absolute; top: 14px; inset-inline-start: 14px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--danger);
    color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(239,68,68,.35);
}

/* ── Info column ── */
.pdm-info-col {
    background: var(--bg-card);
    padding: 28px 24px 24px;
    display: flex; flex-direction: column;
    overflow-y: auto;
}

@media (max-width: 680px) { .pdm-info-col { padding: 22px 18px; } }

/* Category pill */
.pdm-category-tag {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(99,102,241,.10); color: var(--accent);
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    margin-bottom: 10px; align-self: flex-start;
}

/* Product name */
.pdm-name {
    font-size: clamp(17px, 2.5vw, 22px);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -.025em;
    line-height: 1.3;
    margin-bottom: 12px;
}

/* Price block — currency left, number right in LTR */
.pdm-price-block {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    direction: ltr;
    justify-content: flex-end;
}

.pdm-price-currency {
    font-size: 14px; font-weight: 600; color: var(--text-muted);
    line-height: 1; padding-bottom: 2px;
    order: 0;
}

.pdm-price-now {
    font-size: 32px; font-weight: 900; color: var(--text-primary);
    letter-spacing: -.04em; font-family: 'Inter', sans-serif;
    line-height: 1;
    order: 1;
}

.pdm-price-old {
    font-size: 14px; color: var(--text-muted);
    text-decoration: line-through; text-decoration-thickness: 1.5px;
    font-family: 'Inter', sans-serif;
    order: 2;
    direction: ltr;
}

/* Trust tags */
.pdm-tags {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.pdm-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 11px; font-weight: 600;
}

/* Divider */
.pdm-divider {
    height: 1px; background: var(--border); margin-bottom: 14px;
}

/* Description */
.pdm-desc-area { margin-bottom: 16px; flex: 1; min-height: 0; }

.pdm-desc-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--text-muted); margin-bottom: 7px;
}

.pdm-desc {
    font-size: 13.5px; line-height: 1.8; color: var(--text-secondary);
    white-space: pre-wrap;
    max-height: 110px; overflow-y: auto;
}
.pdm-desc::-webkit-scrollbar { width: 3px; }
.pdm-desc::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

/* ── Qty + CTA ── */
.pdm-actions { margin-top: auto; padding-top: 4px; }

.pdm-qty-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-radius: 12px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    margin-bottom: 10px;
}

.pdm-qty-label {
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
}

.pdm-qty-ctrl {
    display: flex; align-items: center; gap: 16px;
}

.pdm-qty-btn {
    width: 30px; height: 30px; border-radius: 50%; border: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    flex-shrink: 0;
}

.pdm-qty-btn.dec {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1.5px solid var(--border-strong);
    box-shadow: none;
}
.pdm-qty-btn.dec:hover { border-color: var(--text-muted); background: var(--bg-soft); }

.pdm-qty-btn.inc {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 3px 10px rgba(99,102,241,.35);
}
.pdm-qty-btn.inc:hover { background: var(--accent-dark, #4F46E5); box-shadow: 0 4px 14px rgba(99,102,241,.45); }

.pdm-qty-btn:active { transform: scale(.9); transition-duration: .08s; }

.pdm-qty-val {
    font-size: 18px; font-weight: 800; min-width: 28px;
    text-align: center; color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

/* Add to cart CTA */
.pdm-add-btn {
    width: 100%; padding: 13px;
    background: var(--accent);
    color: #fff; border: none; border-radius: 12px;
    font-family: 'Tajawal', 'Inter', sans-serif;
    font-size: 15px; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px;
    transition: all .2s ease;
    box-shadow: 0 4px 14px rgba(99,102,241,.35);
    letter-spacing: -.01em;
}
.pdm-add-btn:hover {
    background: var(--accent-dark, #4F46E5);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px rgba(99,102,241,.45);
}
.pdm-add-btn:active { transform: scale(.98); transition-duration: .08s; }
.pdm-add-btn.added {
    background: #10B981;
    box-shadow: 0 4px 14px rgba(16,185,129,.38);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 600px) {
    .store-hero-wrap { padding: 0; }
    .store-profile-area { padding: 0 16px 8px; }
    .store-info-block { max-width: 100%; }
    .store-products { padding: 0 14px; }
    .category-nav-wrap { padding: 0 14px; }
    .products-grid { gap: 14px; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); }
    .product-body { padding: 12px 14px 14px; }
    .product-name { font-size: 14px; }
    .product-price-now { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* Image protection */
.protected-img, .product-img-wrap img, .cart-item-img img, .store-logo img {
    user-select:none; -webkit-user-drag:none;
    -webkit-touch-callout:none; pointer-events:none;
}

/* ==========================================================================
   Task 7: Dark mode — Bootstrap component overrides
   ========================================================================== */
[data-bs-theme="dark"] .cart-item {
    background: rgba(255,255,255,.05);
}
[data-bs-theme="dark"] .cart-item-img {
    background: rgba(255,255,255,.08);
}
[data-bs-theme="dark"] .qty-stepper {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.12);
}
[data-bs-theme="dark"] .qty-btn:hover {
    background: rgba(255,255,255,.12);
}
[data-bs-theme="dark"] .cart-close-btn {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.12);
    color: var(--text-secondary);
}
[data-bs-theme="dark"] .cart-close-btn:hover {
    background: rgba(255,255,255,.14);
    color: var(--text-primary);
}
[data-bs-theme="dark"] .offcanvas {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border);
}
[data-bs-theme="dark"] .offcanvas-header {
    border-color: var(--border) !important;
}
[data-bs-theme="dark"] .offcanvas-footer {
    border-color: var(--border) !important;
}
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .pdm-content {
    background: var(--bg-card);
    box-shadow: 0 32px 80px -16px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.07);
}
[data-bs-theme="dark"] .pdm-image-col {
    background: rgba(255,255,255,.04);
    border-color: var(--border);
}
[data-bs-theme="dark"] .pdm-info-col {
    background: var(--bg-card);
}
[data-bs-theme="dark"] .pdm-close {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.12);
    color: var(--text-secondary);
}
[data-bs-theme="dark"] .pdm-close:hover {
    background: rgba(255,255,255,.13);
    color: var(--text-primary);
}
[data-bs-theme="dark"] .pdm-qty-row {
    background: rgba(255,255,255,.05);
    border-color: var(--border);
}
[data-bs-theme="dark"] .pdm-qty-btn.dec {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.16);
    color: var(--text-primary);
}
[data-bs-theme="dark"] .pdm-qty-btn.dec:hover {
    background: rgba(255,255,255,.13);
}
[data-bs-theme="dark"] .pdm-tag {
    background: rgba(255,255,255,.06);
    border-color: var(--border);
}
[data-bs-theme="dark"] .btn-close {
    filter: invert(1);
}
[data-bs-theme="dark"] .product-card {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-bs-theme="dark"] .cat-pill {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-secondary);
}
[data-bs-theme="dark"] .cat-pill.active {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: #1C1C1E;
}
[data-bs-theme="dark"] .store-search {
    background: var(--bg-card);
    border-color: var(--border);
}

[data-bs-theme="dark"] .store-social-btn {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-secondary);
}

/* ==========================================================================
   buttons-modern.css integration overrides
   ========================================================================== */

/* pdm-add-btn: let btn-modern-primary take full control, keep width & radius */
.pdm-add-btn.btn-modern {
    width: 100%;
    border-radius: 12px;
    padding: 13px;
    font-size: 15px;
    font-family: 'Tajawal', 'Inter', sans-serif;
}
.pdm-add-btn.btn-modern.added {
    background: #10B981;
    box-shadow: 0 4px 14px rgba(16,185,129,.38);
}

/* cart-checkout-btn: let btn-modern-whatsapp handle colors, keep flex:1 */
.cart-checkout-btn.btn-modern {
    flex: 1;
    border-radius: 12px;
    padding: 11px 18px;
    font-size: 14px;
    font-family: 'Tajawal', 'Inter', sans-serif;
}

/* pdm qty buttons: keep circular shape from pdm-qty-btn */
.pdm-qty-btn.btn-modern {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 0;
    font-size: 12px;
    flex-shrink: 0;
}
/* dec: ghost style with border */
.pdm-qty-btn.dec.btn-modern-ghost {
    border: 1.5px solid var(--border-strong);
    color: var(--text-primary);
}
.pdm-qty-btn.dec.btn-modern-ghost:hover {
    background: var(--bg-soft);
    border-color: var(--text-muted);
}
/* inc: primary accent */
.pdm-qty-btn.inc.btn-modern-primary {
    box-shadow: 0 3px 10px rgba(99,102,241,.35);
}

/* add-to-cart on product cards: keep existing card button sizing */
.add-to-cart-btn.btn-modern {
    width: 100%;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 13px;
    font-family: 'Tajawal', 'Inter', sans-serif;
    border: 1.5px solid var(--border-strong);
    color: var(--text-primary);
}
.add-to-cart-btn.btn-modern:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(99,102,241,.05);
    transform: none;
    box-shadow: none;
}
.add-to-cart-btn.btn-modern.added {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}