/* ═══════════════════════════════════════════════════
   shop.css — فروشگاه (overrides on top of shop-home.css)
   ═══════════════════════════════════════════════════ */

body.shop-page {
    padding-top: 68px;
    background: #f5f5f7;
}

/* ═══════════════════════════════════════════════════
   SEARCH BAR — Sticky below navbar
   ═══════════════════════════════════════════════════ */
.shop-search-bar {
    position: sticky;
    top: 68px;
    z-index: 80;
    background: rgba(245,245,247,.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 12px 16px;
    transition: box-shadow .3s;
}
.shop-search-bar.shadow {
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
.shop-search-inner {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
}
.shop-search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px; height: 20px;
    color: #A8A29E;
    pointer-events: none;
    transition: color .2s;
}
.shop-search-field {
    width: 100%;
    padding: 13px 44px 13px 44px;
    border: 1.5px solid #E7E5E4;
    border-radius: 14px;
    background: #fff;
    font-family: inherit;
    font-size: .92rem;
    color: #1a1a2e;
    outline: none;
    transition: all .25s;
    box-sizing: border-box;
}
.shop-search-field::placeholder { color: #A8A29E; }
.shop-search-field:focus {
    border-color: var(--sh-primary);
    box-shadow: 0 0 0 3px rgba(123,58,237,.1);
}
.shop-search-field:focus ~ .shop-search-icon { color: var(--sh-primary); }

.shop-search-clear {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    border: none;
    background: #F5F5F4;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    color: #78716C;
    font-size: .85rem;
    transition: background .15s;
    font-family: inherit;
    line-height: 1;
}
.shop-search-clear:hover { background: #E7E5E4; }
.shop-search-field.has-val ~ .shop-search-clear { display: flex; }

/* Live search dropdown */
.shop-search-results {
    position: absolute;
    top: calc(100% + 6px);
    right: 0; left: 0;
    background: #fff;
    border: 1px solid #E7E5E4;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.1);
    max-height: 380px;
    overflow-y: auto;
    display: none;
    z-index: 90;
}
.shop-search-results.open {
    display: block;
    animation: srFadeIn .2s ease;
}
@keyframes srFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sr-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; cursor: pointer;
    transition: background .12s;
    text-decoration: none; color: inherit;
}
.sr-item:hover, .sr-item.focused { background: #F5F3FF; }
.sr-item + .sr-item { border-top: 1px solid #F5F5F4; }
.sr-item-img {
    width: 44px; height: 44px; border-radius: 10px;
    overflow: hidden; flex-shrink: 0;
    background: #F5F5F4;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
}
.sr-item-img img { width: 100%; height: 100%; object-fit: cover; }
.sr-item-info { flex: 1; min-width: 0; }
.sr-item-name {
    font-size: .86rem; font-weight: 600; color: #1a1a2e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-item-name mark { background: #EDE9FE; color: var(--sh-primary); border-radius: 2px; padding: 0 1px; }
.sr-item-meta { font-size: .72rem; color: #A8A29E; margin-top: 1px; }
.sr-item-price { font-size: .82rem; font-weight: 700; color: var(--sh-primary); white-space: nowrap; flex-shrink: 0; }
.sr-empty { padding: 28px 16px; text-align: center; color: #A8A29E; font-size: .86rem; }
.sr-count { padding: 8px 14px; text-align: center; font-size: .75rem; color: #A8A29E; border-top: 1px solid #F5F5F4; }

/* ═══════════════════════════════════════════════════
   CATEGORIES — Visual card carousel (like Okala)
   ═══════════════════════════════════════════════════ */
.shop-cats-section {
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px 16px 8px;
}
.shop-cats-carousel {
    position: relative;
}
.shop-cats-scroll {
    display: flex; gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 8px;
    scroll-behavior: smooth;
}
.shop-cats-scroll::-webkit-scrollbar { display: none; }

.cat-card {
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
    min-width: 90px; max-width: 100px;
    padding: 10px 6px 8px;
    border-radius: 14px;
    text-decoration: none; color: #44403C;
    transition: all .2s; cursor: pointer;
    flex-shrink: 0; text-align: center;
}
.cat-card:hover { background: rgba(123,58,237,.06); }
.cat-card.active .cat-card-name { color: var(--sh-primary); font-weight: 800; }
.cat-card.active .cat-card-img {
    border-color: var(--sh-primary);
    box-shadow: 0 0 0 3px rgba(123,58,237,.15);
}

.cat-card-img {
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 2px solid #E7E5E4;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    background: #fff;
    transition: all .2s;
    flex-shrink: 0;
}
.cat-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.cat-card:hover .cat-card-img {
    border-color: rgba(123,58,237,.35);
}

.cat-card-name {
    font-size: .78rem; font-weight: 600;
    color: #57534E; line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Carousel arrows */
.cats-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    z-index: 5;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #E7E5E4;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
    color: #57534E;
}
.cats-arrow:hover {
    border-color: var(--sh-primary);
    color: var(--sh-primary);
    box-shadow: 0 4px 16px rgba(123,58,237,.15);
}
.cats-arrow svg { width: 18px; height: 18px; }
.cats-arrow-next { right: -4px; }
.cats-arrow-prev { left: -4px; }

/* ═══════════════════════════════════════════════════
   PRODUCT ROW — Horizontal carousel per category
   ═══════════════════════════════════════════════════ */
.shop-grid-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

/* Row: horizontal scroll */
.sp-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 12px;
    scroll-behavior: smooth;
}
.sp-row::-webkit-scrollbar { display: none; }

/* Card fixed width in row */
.sp-row .sp-item {
    flex: 0 0 calc((100% - 72px) / 7);
    min-width: 140px;
    max-width: 200px;
    display: flex;
}
.sp-row .sp-item .sh-prod-card { width: 100%; height: 100%; }

/* ── Compact images ── */
.sp-row .sh-prod-img {
    height: 160px;
    font-size: 2.2rem;
    background: #fff;
}
.sp-row .sh-prod-img img { transition: transform .3s; object-fit: contain; width: 100%; height: 100%; }
.sp-row .sh-prod-card:hover .sh-prod-img img { transform: scale(1.04); }

/* ── Product name: 2 lines, not bold ── */
.sp-row .sh-prod-name {
    -webkit-line-clamp: 2;
    min-height: auto;
    margin-bottom: 4px;
    font-size: .8rem;
    font-weight: 500;
}

/* ── Compact body ── */
.sp-row .sh-prod-body {
    padding: 8px 10px 10px;
}
.sp-row .sh-prod-price-area {
    min-height: auto;
    margin-bottom: 4px;
}

/* ── Price color: black ── */
.sp-row .sh-prod-price { color: #1C1917; font-size: .82rem; }
.sp-row .sh-price-val { color: #1C1917; }
.sp-row .sh-prod-price-row { background: rgba(0,0,0,.03); }

/* ── See-more card at end of row ── */
.sp-see-more-card {
    flex: 0 0 100px;
    min-width: 100px;
    max-width: 120px;
    text-decoration: none;
    color: var(--sh-primary);
}
.sp-see-more-inner {
    width: 100%;
    height: 100%;
    background: #FAF5FF;
    border: 1.5px dashed rgba(123,58,237,.25);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 8px;
    transition: all .2s;
    text-align: center;
}
.sp-see-more-card:hover .sp-see-more-inner {
    background: #F3EAFF;
    border-color: var(--sh-primary);
}
.sp-see-more-icon {
    font-size: 1.4rem;
    line-height: 1;
}
.sp-see-more-text {
    font-size: .78rem;
    font-weight: 700;
}
.sp-see-more-count {
    font-size: .68rem;
    color: #A8A29E;
    font-weight: 500;
}

/* ── Category group headers ── */
.shop-cat-group {
    margin-bottom: 20px;
}
.shop-cat-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 0 8px;
    border-bottom: 1px solid #E7E5E4;
    margin-bottom: 10px;
}
.shop-cat-group-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.shop-cat-group-emoji {
    font-size: 1.2rem;
    line-height: 1;
}
.shop-cat-group-title {
    font-size: 1rem;
    font-weight: 800;
    color: #1C1917;
    margin: 0;
}
.shop-cat-group-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--sh-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: gap .2s;
}
.shop-cat-group-more:hover { gap: 8px; }
.shop-cat-group-more svg { flex-shrink: 0; }

/* ── Lazy image loading ── */
.lazy-img {
    opacity: 0;
    transition: opacity .3s;
}
.lazy-img.loaded {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════
   CATEGORY PAGE — Grid mode (when cat is selected)
   ═══════════════════════════════════════════════════ */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}
.sp-grid .sp-item { display: flex; min-width: 0; }
.sp-grid .sp-item .sh-prod-card { width: 100%; }
.sp-grid .sh-prod-img { height: 140px; font-size: 2.2rem; background: #fff; }
.sp-grid .sh-prod-img img { transition: transform .3s; object-fit: contain; width: 100%; height: 100%; }
.sp-grid .sh-prod-card:hover .sh-prod-img img { transform: scale(1.04); }
.sp-grid .sh-prod-name { -webkit-line-clamp: 2; min-height: auto; margin-bottom: 4px; font-size: .8rem; font-weight: 600; }
.sp-grid .sh-prod-body { padding: 8px 10px 10px; }
.sp-grid .sh-prod-price-area { min-height: auto; margin-bottom: 4px; }
.sp-grid .sh-prod-price { color: #1C1917; font-size: .82rem; }
.sp-grid .sh-price-val { color: #1C1917; }
.sp-grid .sh-prod-price-row { background: rgba(0,0,0,.03); }

/* Lazy hidden items in grid */
.sp-item.sp-lazy { display: none; }

/* Load more button */
.shop-load-more {
    display: block;
    width: 100%;
    margin: 14px 0 0;
    padding: 12px;
    border: 1.5px solid #E7E5E4;
    border-radius: 12px;
    background: #fff;
    color: #57534E;
    font-family: inherit;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all .2s;
}
.shop-load-more:hover {
    border-color: var(--sh-primary);
    color: var(--sh-primary);
    background: #FAF5FF;
}

.shop-cat-group-cnt {
    font-size: .78rem;
    color: #A8A29E;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════
   TAG FILTER BAR — category page
   ═══════════════════════════════════════════════════ */
.shop-tags-bar {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 0 14px;
    scroll-behavior: smooth;
}
.shop-tags-bar::-webkit-scrollbar { display: none; }

.shop-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 16px;
    border-radius: 50px;
    border: 1.5px solid #E7E5E4;
    background: #fff;
    color: #57534E;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all .18s;
}
.shop-tag:hover {
    border-color: rgba(123,58,237,.3);
    color: var(--sh-primary);
}
.shop-tag.active {
    background: var(--sh-primary);
    border-color: var(--sh-primary);
    color: #fff;
}
.shop-tag-count {
    font-size: .68rem;
    opacity: .6;
}
.shop-tag.active .shop-tag-count {
    opacity: .85;
}

/* Hidden by tag filter */
.sp-item.tag-hidden {
    display: none !important;
}

/* Fav badge update */
.sp-fav-badge {
    position: absolute; top: 10px; right: 10px;
    font-size: .72rem;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(4px);
    color: #dc2626;
    border: none;
    padding: 4px 10px; border-radius: 20px;
    font-weight: 700; z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Unavailable card */
/* ── Unavailable / out of stock: fully grayed ── */
.sp-card-unavailable { opacity: .5; }
.sp-card-unavailable .sh-prod-img { filter: grayscale(.8); }
.sp-card-unavailable .sh-prod-name { color: #A8A29E; }
.sp-card-unavailable .sh-prod-price,
.sp-card-unavailable .sh-price-val { color: #A8A29E; }
.sp-card-unavailable:hover { transform: none; box-shadow: none; }

/* No price */
.sp-no-price { font-size: .78rem; color: #9ca3af; font-style: italic; padding: 4px 0; }

/* No results */
.shop-no-results { text-align: center; padding: 72px 20px; color: #bbb; }
.shop-no-results span { font-size: 3rem; display: block; margin-bottom: 14px; opacity: .35; }
.shop-no-results p { font-size: .92rem; }

/* ═══════════════════════════════════════════════════
   ORDER STATUS BANNER
   ═══════════════════════════════════════════════════ */
.shop-order-banner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 16px 0;
}
.shop-order-banner-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: .82rem;
    font-weight: 600;
}
.shop-order-banner-inner svg { flex-shrink: 0; }
.banner-closed {
    background: #FEF2F2;
    color: #B91C1C;
    border: 1px solid #FECACA;
}
.banner-preorder {
    background: #FFFBEB;
    color: #92400E;
    border: 1px solid #FDE68A;
}
.banner-badge-pr {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 50px;
    background: #F59E0B;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}
.banner-hours {
    font-weight: 800;
    letter-spacing: .3px;
}
.shop-order-desc {
    font-size: .75rem;
    color: #A8A29E;
    margin: 6px 0 0 0;
    padding-right: 4px;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .sp-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 900px) {
    .sp-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .shop-search-bar { top: 58px; padding: 8px 12px; }
    .shop-search-field { padding: 11px 40px 11px 40px; font-size: .86rem; border-radius: 12px; }

    .sp-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }

    /* Carousel cards: mobile sizing */
    .sp-row .sp-item {
        flex: 0 0 38vw;
        min-width: 130px;
        max-width: 160px;
    }
    .sp-row .sh-prod-img { height: 110px !important; font-size: 2rem !important; }
    .sp-row .sh-prod-body { padding: 7px 8px 8px; }
    .sp-row .sh-prod-name { font-size: .76rem; }
    .sp-row .sh-prod-price { font-size: .78rem; }
    .sp-row .sh-price-val { font-size: .72rem; }
    .sp-row .sh-price-lbl { font-size: .66rem; }

    .shop-grid-wrap { padding: 0 10px 60px; }

    /* Category cards smaller on mobile */
    .shop-cats-section { padding: 14px 10px 4px; }
    .shop-cats-scroll { gap: 8px; }
    .cat-card { min-width: 72px; max-width: 80px; padding: 6px 4px; gap: 6px; }
    .cat-card-img { width: 56px; height: 56px; font-size: 1.6rem; }
    .cat-card-name { font-size: .7rem; }
    .cats-arrow { display: none; }

    .shop-cat-group-header { padding: 8px 0 6px; margin-bottom: 8px; }
    .shop-cat-group-title { font-size: .92rem; }
    .shop-cat-group { margin-bottom: 16px; }

    /* See-more card */
    .sp-see-more-card { flex: 0 0 90px; min-width: 90px; }
}

@media (max-width: 480px) {
    .sp-grid { grid-template-columns: repeat(2, 1fr); }
}