/* ===== کاروسل محصولات پرفروش ===== */
.carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}

.carousel-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 10px 2px;
}

/* اسکرول‌بار رو مخفی می‌کنیم چون با فلش کنترل می‌شه */
.carousel-track::-webkit-scrollbar {
    display: none;
}
.carousel-track {
    scrollbar-width: none;
}

.carousel-item {
    flex: 0 0 calc((100% - 40px) / 3);
    scroll-snap-align: start;
}

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

.carousel-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-maroon);
    color: var(--color-cream);
    border: 2px dashed var(--color-cream);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.carousel-arrow:hover {
    transform: scale(1.08);
}

@media (max-width: 900px) {
    .carousel-item {
        flex: 0 0 calc((100% - 20px) / 2);
    }
}

@media (max-width: 560px) {
    .carousel-item {
        flex: 0 0 100%;
    }
}

/* ===== دکمه افزودن به سبد ===== */
.add-cart-btn {
    width: 100%;
    margin-top: 10px;
    font-family: 'Portada', sans-serif;
    font-size: 12.5px;
    padding: 9px;
    background-color: var(--color-maroon);
    color: var(--color-cream);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.add-cart-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* ===== دکمه قلب علاقه‌مندی رو تامب محصول ===== */
.wishlist-heart-form {
    position: absolute;
    top: 10px;
    left: 10px;
}

.wishlist-heart-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255,255,255,0.85);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.wishlist-heart-btn:hover {
    transform: scale(1.1);
}
/* ===== گرید علاقه‌مندی‌ها ===== */
.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.wishlist-grid .product-card {
    background-color: #fff;
    border: 2px solid var(--color-maroon);
    border-radius: 14px;
    padding: 14px;
}

.wishlist-grid .product-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background-color: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 10px;
}

.wishlist-grid .product-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wishlist-grid .product-thumb-icon {
    font-size: 34px;
}

@media (max-width: 560px) {
    .wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ===== گرید دسته‌بندی صفحه فروشگاه ===== */
.shop-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 920px;
    margin: 0 auto;
}

.shop-cat-card {
    position: relative;
    display: block;
    background-color: var(--color-cream);
    border: 2px solid var(--color-maroon);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 3px 0 rgba(109, 0, 26, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shop-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(28, 26, 24, 0.18);
}

.shop-cat-thumb {
    position: relative;
    height: 92px;
    overflow: hidden;
}

.shop-cat-bg {
    position: absolute;
    inset: -12%;
    width: 124%;
    height: 124%;
    background-size: cover;
    background-position: center;
    filter: blur(3px);
    transition: transform 0.3s ease;
}

.shop-cat-card:hover .shop-cat-bg {
    transform: scale(1.06);
}

.shop-cat-bg-fallback {
    background-image: radial-gradient(circle at 30% 30%, rgba(255, 243, 225, 0.3) 0%, transparent 55%),
                       linear-gradient(160deg, var(--color-maroon) 0%, #3a0010 100%);
}

.shop-cat-body {
    padding: 12px 12px 14px 12px;
    text-align: center;
}

.shop-cat-title {
    font-family: 'Morabba', sans-serif;
    font-size: 13.5px;
    color: var(--color-black);
    margin-bottom: 4px;
}

.shop-cat-desc {
    font-family: 'Portada', sans-serif;
    font-size: 10.5px;
    color: var(--color-black);
    opacity: 0.55;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 950px) {
    .shop-cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: 420px) {
    .shop-cat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}

/* ===== کاشی دسته‌بندی (اشتراکی بین صفحه اصلی و فروشگاه) ===== */
.shop-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 18px;
}

.shop-cat-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background-color: var(--color-cream);
    border: 2px dashed var(--color-maroon);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 6px 6px 0 var(--color-maroon);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.shop-cat-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--color-maroon);
}

.shop-cat-card.is-active {
    border-style: solid;
    box-shadow: 9px 9px 0 var(--color-maroon);
}

.shop-cat-thumb {
    position: relative;
    height: 130px;
    overflow: hidden;
}

.shop-cat-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: filter 0.35s ease, transform 0.35s ease;
}

.shop-cat-bg-fallback {
    background-color: var(--color-maroon);
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 243, 225, 0.07) 0 10px,
        transparent 10px 20px
    );
}

/* روی hover عکس بلر می‌شه و اسم دسته‌بندی میاد جلو */
.shop-cat-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background-color: rgba(28, 26, 24, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.shop-cat-card:hover .shop-cat-bg {
    filter: blur(5px);
    transform: scale(1.08);
}

.shop-cat-card:hover .shop-cat-overlay { opacity: 1; }

.shop-cat-overlay-name {
    font-family: 'Morabba', sans-serif;
    font-size: 19px;
    color: var(--color-cream);
    text-align: center;
    padding: 0 10px;
    text-shadow: 2px 2px 0 var(--color-maroon);
}

.shop-cat-overlay-count {
    font-size: 12px;
    color: var(--color-cream);
    opacity: 0.85;
}

.shop-cat-body { padding: 13px 15px 16px 15px; }

.shop-cat-title {
    font-family: 'Morabba', sans-serif;
    font-size: 17px;
    color: var(--color-black);
    margin-bottom: 5px;
}

/* توضیح در حد نیم خط - حداکثر دو خط */
.shop-cat-desc {
    font-family: 'Portada', sans-serif;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--color-black);
    opacity: 0.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== کارت محصول ===== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 18px;
}

.product-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background-color: var(--color-cream);
    border: 2px solid var(--color-maroon);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 6px 6px 0 var(--color-maroon);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--color-maroon);
}

.product-card-thumb {
    position: relative;
    height: 175px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

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

.product-card-off {
    position: absolute;
    top: 9px;
    left: 9px;
    background-color: var(--color-maroon);
    color: var(--color-cream);
    font-family: 'Morabba', sans-serif;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
}

.product-card-soldout {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(28, 26, 24, 0.55);
    color: var(--color-cream);
    font-family: 'Morabba', sans-serif;
    font-size: 16px;
}

.product-card-body {
    padding: 12px 14px 15px 14px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-card-name {
    font-family: 'Portada', sans-serif;
    font-weight: bold;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--color-black);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-short {
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--color-black);
    opacity: 0.6;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
}

.product-card-price .was {
    font-size: 11.5px;
    color: var(--color-black);
    opacity: 0.45;
    text-decoration: line-through;
}

.product-card-price .now {
    font-family: 'Morabba', sans-serif;
    font-size: 15px;
    color: var(--color-maroon);
}

/* ===== فیلتر و حالت خالی ===== */
.shop-filter-row { margin-bottom: 18px; text-align: center; }

.shop-filter-clear {
    display: inline-block;
    font-size: 12.5px;
    color: var(--color-cream);
    text-decoration: none;
    border: 1px dashed rgba(255, 243, 225, 0.4);
    border-radius: 999px;
    padding: 6px 16px;
    opacity: 0.8;
}

.shop-filter-clear:hover { opacity: 1; }

.shop-empty {
    text-align: center;
    font-size: 14px;
    color: var(--color-cream);
    opacity: 0.6;
    padding: 40px 0;
}

.section-more { text-align: center; margin-top: 28px; }

/* ===== نمونه‌رنگ روی گزینه‌های محصول ===== */
.option-pill span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.option-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 243, 225, 0.5);
    flex-shrink: 0;
}

.option-pill input:checked + span .option-dot {
    border-color: var(--color-maroon);
}

/* ===== سلول علاقه‌مندی: مینیمال ===== */
.wish-cell { position: relative; display: flex; }
.wish-cell > .product-card { width: 100%; }

/* توضیح کوتاه اینجا اضافه‌ست؛ فقط عکس و اسم و قیمت می‌مونه */
.wish-cell .product-card-short { display: none; }

.wish-remove-form { position: absolute; top: 7px; left: 7px; z-index: 2; }

.wish-remove {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    color: var(--color-cream);
    background-color: rgba(28, 26, 24, 0.55);
    backdrop-filter: blur(2px);
    transition: background-color 0.2s ease;
}

.wish-remove:hover { background-color: var(--color-maroon); }

/* ===== سبد خرید: رنگ متن‌ها ===== */
/* کارت سبد پس‌زمینه‌ی کرم داره ولی body رنگ متن رو کرم گذاشته،
   پس هر چیزی که رنگ صریح نداشته باشه نامرئی می‌شه */
.cart-row,
.cart-row-name,
.cart-row-price,
.cart-row-subtotal,
.cart-total-row,
.checkout-row {
    color: var(--color-black);
}

.cart-row-name {
    font-weight: bold;
    font-size: 14px;
}

.cart-row-price { font-size: 13px; opacity: 0.75; }

.cart-row-subtotal {
    font-family: 'Morabba', sans-serif;
    font-size: 15px;
    color: var(--color-maroon);
}

.cart-row-opts span {
    background-color: rgba(28, 26, 24, 0.07);
    color: var(--color-black);
}

.cart-row-was { color: var(--color-black); }

.cart-total-num {
    font-family: 'Morabba', sans-serif;
    color: var(--color-maroon);
}

.qty-value { color: var(--color-black); }

.cart-row-warn { color: #a63f3f; }

/* ===== سربرگ صفحه‌ی یک دسته‌بندی ===== */
.cat-hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid var(--color-maroon);
    box-shadow: 6px 6px 0 var(--color-maroon);
    min-height: 150px;
    display: flex;
    align-items: flex-end;
    background-color: var(--color-maroon);
}

/* عکس دسته پشت متن، تار و تیره تا متن خونده شه */
.cat-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(3px) brightness(0.42);
    transform: scale(1.06);
}

.cat-hero-body {
    position: relative;
    padding: 22px 26px;
    width: 100%;
}

.cat-hero-back {
    display: inline-block;
    font-size: 12px;
    color: var(--color-cream);
    opacity: 0.8;
    text-decoration: none;
    margin-bottom: 8px;
}

.cat-hero-back:hover { opacity: 1; text-decoration: underline; }

.cat-hero-title {
    font-family: 'Portada', sans-serif;
    font-weight: bold;
    font-size: 26px;
    line-height: 1.5;
    color: var(--color-cream);
    margin-bottom: 4px;
}

.cat-hero-desc {
    font-size: 13px;
    line-height: 1.9;
    color: var(--color-cream);
    opacity: 0.85;
    max-width: 620px;
}

.cat-hero-count {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--color-cream);
    background-color: rgba(255, 243, 225, 0.16);
    border-radius: 999px;
    padding: 3px 13px;
}

/* ===== کارت دسته‌بندی: تمیزتر ===== */
.shop-cat-card {
    border-style: solid;
    border-width: 2px;
    box-shadow: 5px 5px 0 var(--color-maroon);
}

.shop-cat-card:hover { box-shadow: 8px 8px 0 var(--color-maroon); }

.shop-cat-title {
    font-family: 'Portada', sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 1.6;
}

.shop-cat-overlay-name {
    font-family: 'Portada', sans-serif;
    font-weight: bold;
    font-size: 16px;
    text-shadow: none;
}

/* ===== کارت محصول: عنوان بدون افکت، قیمت خواناتر ===== */
.product-card { box-shadow: 5px 5px 0 var(--color-maroon); }
.product-card:hover { box-shadow: 8px 8px 0 var(--color-maroon); }

.product-card-name {
    font-family: 'Portada', sans-serif;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.7;
}

.product-card-price .now {
    font-family: 'Portada', sans-serif;
    font-weight: bold;
    font-size: 14.5px;
    color: var(--color-maroon);
}

/* برچسب درصد تخفیف: ساده و خوانا، بدون فونت تزئینی */
.product-card-off {
    font-family: 'Portada', sans-serif;
    font-weight: bold;
    font-size: 11.5px;
    line-height: 1.6;
    padding: 2px 9px;
}

/* ===== نمونه‌رنگ کنار گزینه‌ی محصول ===== */
.option-dot {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    margin-left: 7px;
    vertical-align: -2px;
    border: 1px solid rgba(28, 26, 24, 0.35);
}

.option-pill.has-color span {
    display: inline-flex;
    align-items: center;
}

/* ===== وسط‌چین کردن شبکه‌ها =====
   auto-fill ستون‌های خالی می‌ساخت و آیتم‌ها می‌چسبیدن به یک لبه.
   auto-fit + justify-content وسط، کارت‌ها رو با هر تعدادی وسط نگه می‌داره. */
.products-grid,
.shop-cat-grid {
    grid-template-columns: repeat(auto-fit, minmax(215px, 250px));
    justify-content: center;
}

/* پرفروش‌های هفته: دقیقاً سه‌تا و وسط */
.products-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(230px, 270px));
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}

/* ===== اسلایدر دسته‌بندی‌ها ===== */
.cat-rotator {
    position: relative;
    display: grid;          /* همه‌ی صفحه‌ها روی هم؛ فقط فعال دیده می‌شه */
}

.cat-rotator-page {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 250px));
    justify-content: center;
    gap: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}

.cat-rotator-page.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* نقطه‌های پایین اسلایدر */
.cat-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 20px;
}

/* هم‌شکل نشانگر بنر: میله‌ی باریک، نه توپ گرد */
.cat-dot {
    width: 20px;
    height: 3px;
    padding: 0;
    border: none;
    border-radius: 2px;
    background-color: rgba(255, 243, 225, 0.3);
    cursor: pointer;
    transition: background-color 0.25s ease, width 0.25s ease;
}

.cat-dot:hover { background-color: rgba(255, 243, 225, 0.55); }

.cat-dot.is-active {
    width: 36px;
    background-color: var(--color-cream);
}

/* ===== نوار تخفیف‌ها ===== */
.deals-strip-wrap {
    max-width: 1200px;
    margin: 0 auto 70px auto;
    padding: 0 30px;
}

.deals-strip {
    display: flex;
    align-items: stretch;
    gap: 0;
    background-color: var(--color-maroon);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 7px 7px 0 rgba(109, 0, 26, 0.35);
}

/* ستون سمت راست: عنوان و لینک همه */
.deals-side {
    flex-shrink: 0;
    width: 168px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 14px;
    text-decoration: none;
    color: var(--color-cream);
    background-image: linear-gradient(180deg, rgba(255, 243, 225, 0.12), transparent 70%);
    transition: background-color 0.2s ease;
}

.deals-side:hover { background-color: rgba(255, 243, 225, 0.07); }

.deals-percent {
    font-family: 'Morabba', sans-serif;
    font-size: 38px;
    line-height: 1;
}

.deals-title {
    font-family: 'Portada', sans-serif;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
}

.deals-more {
    font-size: 11.5px;
    opacity: 0.85;
    background-color: rgba(255, 243, 225, 0.15);
    border-radius: 999px;
    padding: 3px 12px;
    margin-top: 4px;
}

/* ریل افقی محصولات تخفیف‌دار */
.deals-track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    background-color: var(--color-cream);
    scrollbar-width: thin;
}

.deal-card {
    flex: 0 0 168px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 14px 10px;
    text-decoration: none;
    border-left: 1px solid rgba(28, 26, 24, 0.1);
    transition: background-color 0.2s ease;
}

.deal-card:last-child { border-left: none; }
.deal-card:hover { background-color: rgba(109, 0, 26, 0.05); }

.deal-thumb {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    background-color: #fff;
}

.deal-thumb img { width: 100%; height: 100%; object-fit: cover; }

.deal-name {
    font-family: 'Portada', sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-black);
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
}

.deal-prices {
    display: flex;
    align-items: center;
    gap: 6px;
}

.deal-off {
    background-color: var(--color-maroon);
    color: var(--color-cream);
    font-family: 'Portada', sans-serif;
    font-weight: bold;
    font-size: 11px;
    border-radius: 999px;
    padding: 1px 8px;
}

.deal-was {
    font-size: 11px;
    color: var(--color-black);
    opacity: 0.45;
    text-decoration: line-through;
}

.deal-now {
    font-family: 'Portada', sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: var(--color-maroon);
}

@media (max-width: 720px) {
    .deals-strip { flex-direction: column; }
    .deals-side { width: 100%; flex-direction: row; gap: 10px; padding: 12px; }
    .deals-percent { font-size: 24px; }
    .deals-more { margin-top: 0; margin-right: auto; }
}

/* ===== صفحه ۴۰۴ ===== */
.notfound { text-align: center; padding-top: 40px; }

.notfound-code {
    font-family: 'Morabba', sans-serif;
    font-size: clamp(70px, 14vw, 130px);
    line-height: 1;
    background: linear-gradient(135deg, var(--c-amber), var(--c-hot));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 10px;
}

.notfound-title {
    font-family: 'Portada', sans-serif;
    font-weight: bold;
    font-size: var(--fs-xl);
    color: var(--color-cream);
    margin-bottom: 10px;
}

.notfound-text {
    font-size: var(--fs-sm);
    line-height: 2;
    color: var(--ink-dim);
    max-width: 440px;
    margin: 0 auto 26px auto;
}

.notfound-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ===== خبرنامه و خروج ===== */
.newsletter-done {
    font-size: 11.5px;
    color: var(--c-lime);
    margin-top: 8px;
    line-height: 1.8;
}

/* استایل دکمه‌ی خروج رفت به theme.css، چون این فایل توی همه‌ی صفحه‌ها
   لود نمی‌شه و دکمه فقط توی چند صفحه درست دیده می‌شد. */

/* ===== چیدمان فروشگاه با ستون فیلتر ===== */
.shop-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.shop-filters {
    position: sticky;
    top: 90px;
}
.filter-form {
    background-color: var(--surface);
    border: 2px solid rgba(255, 243, 225, 0.14);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255, 243, 225, 0.14);
}
.filter-head-title {
    font-size: var(--fs-sm);
    font-weight: bold;
    color: var(--c-amber);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    background-color: var(--c-amber);
    color: var(--color-black);
    font-size: 11px;
    font-weight: bold;
}
.filter-clear {
    font-size: var(--fs-xs);
    color: var(--c-tangerine);
    text-decoration: none;
    border-bottom: 1px solid rgba(232, 106, 51, 0.5);
}
.filter-clear:hover { color: var(--c-amber); border-bottom-color: var(--c-amber); }
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.filter-label {
    font-size: var(--fs-xs);
    font-weight: bold;
    color: var(--ink-dim);
}

.filter-search {
    display: flex;
    gap: 7px;
}
.filter-search input {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--color-cream);
    padding: 10px 12px;
    border: 1px solid rgba(255, 243, 225, 0.2);
    border-radius: 11px;
    background-color: rgba(0, 0, 0, 0.3);
}
.filter-search input::placeholder { color: rgba(255, 243, 225, 0.35); }
.filter-search input:focus { outline: none; border-color: var(--c-amber); }
.filter-search button {
    border: 1px solid rgba(255, 243, 225, 0.2);
    background-color: rgba(255, 243, 225, 0.08);
    border-radius: 11px;
    padding: 0 12px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}
.filter-search button:hover { background-color: rgba(255, 243, 225, 0.15); }

.filter-radios {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
}
.filter-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    color: var(--color-cream);
    padding: 6px 8px;
    border-radius: 9px;
    cursor: pointer;
}
.filter-radio:hover { background-color: rgba(255, 243, 225, 0.07); }
.filter-radio input { accent-color: var(--c-amber); }
.filter-radio span { flex: 1; }
.filter-radio em {
    font-style: normal;
    font-size: 11px;
    color: var(--ink-faint);
}
.filter-radio:has(input:checked) {
    background-color: rgba(255, 243, 225, 0.1);
    color: var(--c-amber);
}

.filter-price {
    display: flex;
    align-items: center;
    gap: 7px;
}
.filter-price input {
    width: 100%;
    min-width: 0;
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--color-cream);
    padding: 10px 11px;
    border: 1px solid rgba(255, 243, 225, 0.2);
    border-radius: 11px;
    background-color: rgba(0, 0, 0, 0.3);
}
.filter-price input::placeholder { color: rgba(255, 243, 225, 0.35); }
.filter-price input:focus { outline: none; border-color: var(--c-amber); }
.filter-price-sep { color: var(--ink-faint); }

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 170px;
    overflow-y: auto;
}
.filter-tag {
    font-size: 11.5px;
    color: var(--color-cream);
    padding: 6px 11px;
    border-radius: 999px;
    background-color: rgba(255, 243, 225, 0.07);
    border: 1px solid rgba(255, 243, 225, 0.14);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.filter-tag:hover { background-color: rgba(255, 243, 225, 0.15); }
.filter-tag input { display: none; }
.filter-tag.is-on {
    background-color: var(--c-amber);
    border-color: var(--c-amber);
    color: var(--color-black);
}

.filter-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--fs-xs);
    color: var(--color-cream);
    cursor: pointer;
}
.filter-check input { width: 16px; height: 16px; accent-color: var(--c-amber); }

.filter-apply {
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--c-amber), var(--c-tangerine));
    color: var(--color-black);
    font-family: inherit;
    font-weight: bold;
    font-size: var(--fs-sm);
    padding: 12px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.filter-apply:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35); }
.filter-apply:active { transform: translateY(1px); box-shadow: none; }

/* ===== نوار ابزار نتایج ===== */
.shop-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.shop-filter-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 243, 225, 0.2);
    background-color: var(--surface);
    color: var(--color-cream);
    border-radius: 11px;
    padding: 9px 14px;
    font-family: inherit;
    font-size: var(--fs-xs);
    cursor: pointer;
}
.shop-filter-toggle:hover { background-color: var(--surface-2); }
.shop-result-count {
    font-size: var(--fs-xs);
    color: var(--ink-dim);
    margin-inline-end: auto;
}
.shop-sort {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-xs);
}
.shop-sort span { color: var(--ink-dim); }
.shop-sort select {
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--color-cream);
    padding: 9px 12px;
    border: 1px solid rgba(255, 243, 225, 0.2);
    border-radius: 11px;
    background-color: var(--surface);
    cursor: pointer;
}
.shop-sort select option { background-color: var(--surface); color: var(--color-cream); }
.shop-sort select:focus { outline: none; border-color: var(--c-amber); }

.shop-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}
.shop-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    padding: 6px 12px;
    border-radius: 999px;
    background-color: rgba(255, 243, 225, 0.08);
    border: 1px solid rgba(255, 243, 225, 0.16);
    color: var(--color-cream);
    text-decoration: none;
}
.shop-chip:hover { background-color: rgba(255, 243, 225, 0.16); }
.shop-chip b { color: var(--c-tangerine); font-weight: normal; }
.shop-empty-link {
    display: inline-block;
    margin-top: 8px;
    text-decoration: underline;
}

@media (max-width: 860px) {
    .shop-layout { grid-template-columns: 1fr; }
    .shop-filters {
        position: static;
        display: none;
    }
    .shop-filters.is-open { display: block; margin-bottom: 16px; }
    .shop-filter-toggle { display: inline-flex; }
}

/* ===== نوار «تازه رسیده‌ها» ===== */
/* همون اسکلت نوار تخفیف‌هاست؛ فقط ستون کناری کهربایی می‌شه تا دو نوارِ
   پشت‌سرهم از هم قابل تشخیص باشن. */
.strip-new {
    box-shadow: 7px 7px 0 rgba(242, 179, 61, 0.28);
}
.strip-new .deals-side {
    background-image: linear-gradient(180deg, var(--c-amber), var(--c-tangerine));
    color: #231f20;
}
.strip-new .deals-side:hover { background-color: rgba(255, 243, 225, 0.12); }
.strip-new .deals-more {
    background-color: rgba(35, 31, 32, 0.15);
    color: #231f20;
}

/* نشان «جدید» مطلق می‌شینه، پس قاب عکس باید نسبی باشه */
.deal-thumb { position: relative; }

/* کشیدن با موس روی نوارها (js/drag-rail.js) */
.deals-track { cursor: grab; scroll-behavior: smooth; }
.deals-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.deals-track.is-dragging a { pointer-events: none; }

/* سوالات متداول ته صفحه‌ی اصلی */
.home-faq { margin-top: 34px; }
.home-faq .about-section { margin-bottom: 0; }

/* ===== انتخابگر مرتب‌سازی داخل ستون فیلتر ===== */
.filter-select {
    width: 100%;
    font-family: 'Portada', sans-serif;
    font-size: var(--fs-xs);
    color: var(--color-cream);
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 243, 225, 0.2);
    border-radius: 11px;
    padding: 10px 12px;
    cursor: pointer;
}
.filter-select:focus { outline: none; border-color: var(--c-amber); }
.filter-select option { background-color: var(--surface); color: var(--color-cream); }

/* ===== ریل افقی پیشنهادها ===== */
.product-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px;
    cursor: grab;
    scroll-behavior: smooth;
    /* نوار اسکرول باریک و کم‌رنگ، تا ریل شلوغ به نظر نرسه */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 243, 225, 0.25) transparent;
}
.product-rail.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.product-rail.is-dragging a { pointer-events: none; }

.rail-card {
    flex: 0 0 168px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px;
    border-radius: 14px;
    background-color: var(--surface);
    border: 1px solid rgba(255, 243, 225, 0.12);
    color: var(--color-cream);
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease;
}
.rail-card:hover { transform: translateY(-3px); border-color: var(--c-amber); }

.rail-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rail-thumb img { width: 100%; height: 100%; object-fit: cover; }

.rail-name {
    font-size: 12.5px;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rail-price { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.rail-price .was { text-decoration: line-through; color: var(--ink-faint); font-size: 11px; }
.rail-price .now { color: var(--c-amber); }

/* ===== ریسپانسیو فروشگاه ===== */
@media (max-width: 860px) {
    /* ستون فیلتر روی موبایل کشوییه؛ مرتب‌سازی هم داخل همونه، پس نوار
       ابزار فقط دکمه‌ی فیلتر و تعداد نتیجه رو نگه می‌داره */
    .shop-toolbar { gap: 8px; }
    .rail-card { flex-basis: 150px; }
}

@media (max-width: 560px) {
    .rail-card { flex-basis: 132px; padding: 8px; }
    .rail-name { font-size: 11.5px; }
    .deal-card { flex-basis: 140px; }
    .deals-side { width: 128px; padding: 14px 10px; }
    .deals-title { font-size: 13px; }
}

/* ===================================================
   رتروی آرام
   ===================================================
   درس onlite: تمیزی از «کم بودن تزئین» و «زیاد بودن فاصله» میاد،
   نه از نبودن شخصیت. پس رترو می‌مونه ولی به‌جای اینکه روی همه‌ی
   سطح‌ها پخش شه، به سه تا امضا محدود می‌شه:

     ۱. سطح کرم با سایه‌ی سختِ زرشکی (بدون بلور)
     ۲. تیتر با فونت مربع
     ۳. یک نشان گردِ کج، فقط جایی که واقعاً تأکید لازمه

   هر چیز دیگه‌ای — بافت نقطه‌ای روی همه‌جا، لبه‌ی کنگره‌ای،
   سایه‌ی دولایه‌ی تیترها، کج‌کردن همه‌ی آیکن‌ها — حذف شد.
   اونا با هم جمع می‌شدن و صفحه رو شلوغ می‌کردن.
=================================================== */

/* ----- فاصله: مهم‌ترین تغییر -----
   بخش‌ها باید نفس بکشن. onlite بین هر بخش فضای زیادی می‌ذاره. */
.section { margin-bottom: 90px; }
.section-head { margin-bottom: 32px; }
.deals-strip-wrap { margin-bottom: 90px; }
.about-box { margin-bottom: 90px; }

/* ----- تیتر: ساده و خوانا -----
   یک سایه‌ی نازک برای عمق، نه دو تا. */
.section-title {
    text-shadow: 2px 2px 0 rgba(118, 16, 31, 0.9);
}

/* ----- کارت محصول: یک قاب تمیز -----
   امضای رترو فقط سایه‌ی سخته. بدون خط‌چین داخلی، بدون بافت. */
.product-card {
    border-radius: 8px;
    border: 2px solid var(--color-maroon);
    box-shadow: 5px 5px 0 var(--color-maroon);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.product-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--color-maroon);
}

/* نشان تخفیف: تنها عنصر کج صفحه — چون تنهاست، به چشم میاد */
.product-card-off {
    border: 2px solid var(--color-black);
    transform: rotate(-6deg);
}

.product-card-soldout {
    border: 2px solid var(--color-black);
    letter-spacing: 1px;
}

/* ----- نوارها: آرام‌تر ----- */
.deals-strip {
    border-radius: 8px;
    border: 2px solid var(--color-cream);
    box-shadow: 6px 6px 0 var(--color-black);
}

.strip-new { box-shadow: 6px 6px 0 var(--color-black); }

/* ریل با آیتم کم هم کل عرض رو پر کنه، وگرنه نصف نوار خالی می‌مونه */
.deals-track {
    flex: 1;
    min-width: 0;
    background-color: var(--color-cream);
}

.deals-side { border-left: 2px solid rgba(255, 243, 225, 0.25); }
.strip-new .deals-side { border-left-color: rgba(35, 31, 32, 0.22); }

.deals-percent {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-cream);
    color: var(--color-maroon);
    border: 2px solid var(--color-black);
    font-size: 24px;
}

.strip-new .deals-percent {
    background-color: var(--color-maroon);
    color: var(--color-cream);
    font-size: 20px;
}

.deal-card {
    border-left: 1px solid rgba(118, 16, 31, 0.15);
    transition: background-color 0.2s ease;
}

.deal-card:hover { background-color: rgba(242, 179, 61, 0.1); }

.deal-thumb {
    border-radius: 6px;
    border: 2px solid var(--color-black);
    background-color: var(--color-cream);
}

.deal-now {
    font-family: 'Morabba', sans-serif;
    font-size: 15px;
}

.deal-off {
    border: 2px solid var(--color-black);
    transform: rotate(-5deg);
}

/* ----- کاشی دسته‌بندی ----- */
.shop-cat-card {
    border-radius: 8px;
    border: 2px solid var(--color-maroon);
    box-shadow: 5px 5px 0 var(--color-maroon);
}

.shop-cat-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--color-maroon);
}

/* ----- نوار مزیت‌ها: صاف و ساده ----- */
.hero-feature-icon {
    border: 2px solid var(--color-black);
}

/* ----- جعبه‌ی «زیگو چیه؟» ----- */
.about-box-inner {
    border-radius: 8px;
    border: 2px solid var(--color-cream);
    box-shadow: 6px 6px 0 var(--color-maroon);
}

.about-box-title { font-family: 'Morabba', sans-serif; }

.about-box-cta {
    border: 2px solid var(--color-black);
    border-radius: 999px;
}

@media (max-width: 720px) {
    .section,
    .deals-strip-wrap,
    .about-box { margin-bottom: 56px; }

    .section-title { text-shadow: 1.5px 1.5px 0 rgba(118, 16, 31, 0.9); }

    /* سایه‌ی سخت روی موبایل نازک‌تر، وگرنه از لبه می‌زنه بیرون */
    .product-card,
    .shop-cat-card { box-shadow: 4px 4px 0 var(--color-maroon); }
    .deals-strip,
    .strip-new     { box-shadow: 4px 4px 0 var(--color-black); }
    .about-box-inner { box-shadow: 4px 4px 0 var(--color-maroon); }

    /* جابه‌جایی هاور روی لمسی معنی نداره */
    .product-card:hover,
    .shop-cat-card:hover { transform: none; }
}

/* ===================================================
   قاب‌های دسته‌بندی — رترو
   ===================================================
   این قاعده‌ها توی shop.css نوشته شدن نه home.css، چون shop.css بعد از
   home.css لود می‌شه و قاعده‌های .shop-cat-card اینجا وگرنه روی .cat-wide
   سوار می‌شدن.
=================================================== */
.shop-cat-card.cat-wide {
    border-radius: 10px;
    border: 2px solid var(--color-cream);
    box-shadow: 5px 5px 0 var(--color-maroon);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.shop-cat-card.cat-wide:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--color-maroon);
}

/* اسم دسته با فونت تیتر برند */
.cat-wide-fa {
    font-family: 'Morabba', sans-serif;
    font-size: 21px;
    text-shadow: 2px 2px 0 rgba(118, 16, 31, 0.85);
}

/* خط انگلیسی: کهربایی و ریزتر، مثل زیرنویس پوستر قدیمی */
.cat-wide-en {
    color: var(--c-amber);
    font-size: 11.5px;
    opacity: 1;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}

/* تعداد محصول: برچسبِ کج — تنها عنصر چرخیده‌ی این قاب */
.cat-wide-count {
    background-color: var(--color-cream);
    color: var(--color-maroon);
    border: 2px solid var(--color-black);
    font-weight: bold;
    opacity: 1;
    transform: rotate(-5deg);
    /* بلور پس‌زمینه هم مدرن بود هم روی موبایل سنگین */
    backdrop-filter: none;
}

/* سایه‌ی روی عکس ملایم‌تر، چون حالا اسم خودش سایه‌ی سخت داره */
.cat-wide-shade {
    background: linear-gradient(
        to left,
        rgba(0, 0, 0, 0.68) 0%,
        rgba(0, 0, 0, 0.38) 42%,
        rgba(0, 0, 0, 0.08) 75%,
        transparent 100%
    );
}

/* نقطه‌های چرخونک: مربعِ کوچک به‌جای دایره */
.cat-dots .cat-dot,
.cat-dot {
    border-radius: 2px;
    border: 1.5px solid rgba(255, 243, 225, 0.5);
}

.cat-dot.is-active {
    background-color: var(--c-amber);
    border-color: var(--c-amber);
}

/* ----- کاشی دسته‌بندی صفحه‌ی فروشگاه ----- */
.shop-cat-card:not(.cat-wide) .shop-cat-thumb {
    border-bottom: 2px solid var(--color-maroon);
}

.shop-cat-overlay-name { font-family: 'Morabba', sans-serif; }

@media (max-width: 860px) {
    .shop-cat-card.cat-wide { box-shadow: 4px 4px 0 var(--color-maroon); }
    .shop-cat-card.cat-wide:hover { transform: none; box-shadow: 4px 4px 0 var(--color-maroon); }
    .cat-wide-fa { font-size: 17px; }
}

/* ===================================================
   نوارهای «تخفیف‌ها» و «تازه رسیده‌ها» — هم‌تراز با دسته‌بندی‌ها
   ===================================================
   بعد از رترو شدن قاب‌های دسته‌بندی، این دو نوار عقب افتاده بودن.
   همون سه امضا اینجا هم اعمال می‌شه: قاب کرم، سایه‌ی سخت، برچسب کج.
=================================================== */
.deals-strip {
    border-radius: 10px;
}

/* ستون کناری: عنوان با فونت تیتر و جداکننده‌ی خط‌چین */
.deals-title {
    font-family: 'Morabba', sans-serif;
    font-size: 17px;
    letter-spacing: 0.5px;
}

.deals-side {
    border-left: 2px dashed rgba(255, 243, 225, 0.35);
}

.strip-new .deals-side {
    border-left-color: rgba(35, 31, 32, 0.28);
}

/* دکمه‌ی «مشاهده همه» مثل بقیه‌ی دکمه‌های سایت */
.deals-more {
    border: 1.5px solid currentColor;
    border-radius: 999px;
    padding: 4px 13px;
}

/* ----- کارت داخل نوار ----- */
.deal-card {
    padding: 16px 12px;
    transition: background-color 0.2s ease, transform 0.18s ease;
}

.deal-card:hover {
    background-color: rgba(242, 179, 61, 0.12);
    transform: translateY(-3px);
}

.deal-thumb {
    border-radius: 8px;
    border: 2px solid var(--color-black);
    box-shadow: 3px 3px 0 rgba(118, 16, 31, 0.45);
}

.deal-name {
    font-weight: bold;
    color: var(--color-black);
}

/* برچسب درصد تخفیف: همون استیکر کرمِ قاب‌های دسته‌بندی */
.deal-off {
    background-color: var(--color-cream);
    color: var(--color-maroon);
    border: 2px solid var(--color-black);
    transform: rotate(-6deg);
    padding: 2px 9px;
}

/* نشان «جدید» روی عکس تازه‌رسیده‌ها: همون زبان، رنگ برعکس */
.new-badge {
    background-color: var(--color-maroon);
    color: var(--color-cream);
    border: 2px solid var(--color-black);
    border-radius: 999px;
    font-weight: bold;
    transform: rotate(-8deg);
}

/* قیمت نهایی با فونت تیتر — مثل کارت محصول */
.deal-now {
    font-family: 'Morabba', sans-serif;
    font-size: 16px;
}

.deal-was {
    opacity: 0.55;
}

@media (max-width: 720px) {
    .deals-title  { font-size: 15px; }
    .deal-card    { padding: 13px 10px; }
    .deal-card:hover { transform: none; }
}


/* ===================================================
   کارت محصول: عکس بزرگ‌تر و متن جمع‌وجورتر
   ===================================================
   ارتفاع ثابت ۱۷۵ پیکسل باعث می‌شد عکس روی کارت‌های عریض کوچک بمونه.
   نسبت ثابت یعنی عکس با عرض کارت بزرگ می‌شه و توی هر چیدمانی
   (۲ ستونه‌ی موبایل تا ۴ ستونه‌ی دسکتاپ) پر و درست دیده می‌شه.
=================================================== */
.product-card-thumb {
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: var(--color-cream);
    border-bottom: 2px solid var(--color-maroon);
}

/* اسم محصول با فونت تیتر — مهم‌ترین متن کارته */
.product-card-name {
    font-family: 'Morabba', sans-serif;
    font-size: 15.5px;
    line-height: 1.6;
    margin-bottom: 5px;
}

/* توضیح کوتاه: کم‌رنگ‌تر و فشرده‌تر تا با اسم رقابت نکنه */
.product-card-short {
    font-size: 11px;
    line-height: 1.9;
    opacity: 0.55;
    margin-bottom: 12px;
}

/* قیمت: بزرگ‌ترین عدد کارت، ته کارت و چسبیده به پایین */
.product-card-price {
    margin-top: auto;
    gap: 8px;
}

.product-card-price .now {
    font-family: 'Morabba', sans-serif;
    font-size: 17px;
    color: var(--color-maroon);
}

.product-card-price .was {
    font-size: 11.5px;
    opacity: 0.5;
}

.product-card-body { padding: 14px 14px 16px 14px; }

/* ===================================================
   نوارها: یک پله رتروتر
=================================================== */

/* ستون کناری راه‌راه — مثل نوارِ کناری بلیط‌های قدیمی */
.deals-side {
    background-image:
        linear-gradient(180deg, rgba(255, 243, 225, 0.14), transparent 70%),
        repeating-linear-gradient(
            45deg,
            rgba(255, 243, 225, 0.06) 0 8px,
            transparent 8px 16px
        );
}

.strip-new .deals-side {
    background-image:
        linear-gradient(180deg, var(--c-amber), var(--c-tangerine)),
        repeating-linear-gradient(
            45deg,
            rgba(35, 31, 32, 0.08) 0 8px,
            transparent 8px 16px
        );
}

/* عکس داخل نوار هم بزرگ‌تر */
.deal-thumb {
    width: 120px;
    height: 120px;
}

.deal-card { flex-basis: 190px; }

/* اسم محصول داخل نوار با فونت تیتر */
.deal-name {
    font-family: 'Morabba', sans-serif;
    font-size: 13.5px;
    min-height: 44px;
}

/* خط‌چین جداکننده‌ی کارت‌ها، مثل پرفراژ بلیط */
.deal-card + .deal-card {
    border-left: none;
    border-right: 2px dashed rgba(118, 16, 31, 0.22);
}

@media (max-width: 900px) {
    .product-card-name { font-size: 14px; }
    .product-card-price .now { font-size: 15px; }
}

@media (max-width: 720px) {
    .deal-thumb { width: 100px; height: 100px; }
    .deal-card  { flex-basis: 160px; }
}

/* ----- متن قاب دسته‌بندی: پایین-چپ ----- */
/* عمداً از left/bottom فیزیکی استفاده شده نه inline-start/end: صفحه RTLه
   و خاصیت‌های منطقی برعکس می‌شن، که همین قبلاً باعث سردرگمی شد. */
.cat-wide-label {
    top: auto;
    bottom: 22px;
    left: 26px;
    right: auto;
    transform: none;
    align-items: flex-start;
    text-align: left;
    padding: 0;
    max-width: 60%;
}

/* سایه از گوشه‌ی پایین-چپ پررنگ‌تر می‌شه تا متن همون‌جا خونده بشه */
.cat-wide-shade {
    background:
        linear-gradient(to top right, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.3) 45%, transparent 75%),
        linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 50%);
}

@media (max-width: 860px) {
    .cat-wide-label { left: 16px; bottom: 16px; max-width: 65%; }
}

/* ===================================================
   کارت محصول — اندازه‌ی فروشگاهی
   ===================================================
   نسخه‌ی قبلی عکس رو ۴:۵ کرده بود که هر کارت خیلی بلند می‌شد و
   توی هر ردیف کم می‌نشست. فروشگاه‌های واقعی (دیجی‌کالا، onlite)
   کارت جمع‌وجور و ردیف پر دارن: عکس مربع، متن کم، تعداد بیشتر در دید.
=================================================== */
.products-grid {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 18px;
}

.products-grid-3 {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.product-card {
    background-color: var(--color-cream);
    border: 2px solid var(--color-black);
    border-radius: 6px;
    box-shadow: 5px 5px 0 var(--color-maroon);
    padding: 0;
    overflow: hidden;
}

.product-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--color-maroon);
}

/* عکس مربع: استاندارد فروشگاه‌ها، و کارت رو بلند نمی‌کنه */
.product-card-thumb {
    aspect-ratio: 1 / 1;
    height: auto;
    border: none;
    border-bottom: 2px solid var(--color-black);
    border-radius: 0;
}

.product-card-body {
    padding: 10px 11px 12px 11px;
    text-align: center;
    align-items: center;
}

.product-card-name {
    font-size: 13.5px;
    -webkit-line-clamp: 2;
    min-height: 2.9em;
    margin-bottom: 8px;
}

.product-card-short { display: none; }

.product-card-price {
    justify-content: center;
    gap: 7px;
    margin-top: auto;
    background: none;
    padding: 0;
}

.product-card-price .now {
    font-family: 'Morabba', sans-serif;
    font-size: 15px;
    color: var(--color-maroon);
}

.product-card-price .was {
    font-size: 11px;
    color: var(--color-black);
    opacity: 0.45;
}

/* ===================================================
   دسته‌بندی: فقط عکس با اسم روش
   ===================================================
   جعبه‌ی متنِ زیر عکس حذف شد. کل کاشی یک عکسه و اسم دسته روش
   می‌شینه — همون الگویی که توی نمونه‌ای که فرستادی هست.
=================================================== */
.shop-cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.shop-cat-card:not(.cat-wide) {
    border: 2px solid var(--color-black);
    border-radius: 6px;
    box-shadow: 5px 5px 0 var(--color-maroon);
    padding: 0;
    overflow: hidden;
}

.shop-cat-card:not(.cat-wide):hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--color-maroon);
}

.shop-cat-card:not(.cat-wide) .shop-cat-thumb {
    height: auto;
    aspect-ratio: 16 / 10;
    border: none;
    border-radius: 0;
}

/* بلور حذف شد؛ عکس باید واضح باشه */
.shop-cat-card:not(.cat-wide) .shop-cat-bg { filter: none; }
.shop-cat-card:not(.cat-wide):hover .shop-cat-bg { filter: none; transform: scale(1.05); }

/* اسم همیشه روی عکس دیده می‌شه، نه فقط موقع hover */
.shop-cat-card:not(.cat-wide) .shop-cat-overlay {
    opacity: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.5) 100%);
}

.shop-cat-card:not(.cat-wide):hover .shop-cat-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.62) 100%);
}

.shop-cat-card:not(.cat-wide) .shop-cat-overlay-name {
    font-size: 20px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

.shop-cat-card:not(.cat-wide) .shop-cat-overlay-count {
    color: var(--color-cream);
    opacity: 0.85;
}

/* جعبه‌ی متن زیر عکس دیگه لازم نیست */
.shop-cat-card:not(.cat-wide) .shop-cat-body { display: none; }

@media (max-width: 560px) {
    .products-grid,
    .products-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .shop-cat-grid   { grid-template-columns: 1fr; }

    .product-card,
    .shop-cat-card:not(.cat-wide) { box-shadow: 4px 4px 0 var(--color-maroon); }
    .product-card:hover,
    .shop-cat-card:not(.cat-wide):hover { transform: none; box-shadow: 4px 4px 0 var(--color-maroon); }
    .product-card-name { font-size: 12.5px; }
}

/* ===================================================
   دسته‌بندی فروشگاه: بزرگ‌تر، کج، با سایه‌ی کرم
=================================================== */
.shop-cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 30px;
}

.shop-cat-card:not(.cat-wide) {
    /* کج‌شدگی خیلی کم — به‌اندازه‌ای که کاشی «چسبانده‌شده» به نظر برسه
       نه کج‌ومعوج. یکی درمیون به دو طرف می‌چرخن تا ردیف یکنواخت نشه. */
    transform: rotate(-1deg);
    box-shadow: 7px 7px 0 var(--color-cream);
    border-color: var(--color-cream);
}

.shop-cat-card:not(.cat-wide):nth-child(even) {
    transform: rotate(1deg);
}

.shop-cat-card:not(.cat-wide):hover {
    transform: rotate(0deg) translate(-3px, -3px);
    box-shadow: 11px 11px 0 var(--color-cream);
}

/* عکس بلندتر: نسبت ۳:۲ به‌جای ۱۶:۱۰ */
.shop-cat-card:not(.cat-wide) .shop-cat-thumb {
    aspect-ratio: 3 / 2;
}

/* متن باید بزنه تو چشم: بزرگ‌تر، با سایه‌ی سختِ زرشکی پشتش */
.shop-cat-card:not(.cat-wide) .shop-cat-overlay-name {
    font-size: 30px;
    color: var(--color-cream);
    text-shadow: 3px 3px 0 var(--color-maroon);
    letter-spacing: 0.5px;
}

.shop-cat-card:not(.cat-wide) .shop-cat-overlay-count {
    font-size: 14px;
    background-color: var(--color-cream);
    color: var(--color-maroon);
    border: 2px solid var(--color-black);
    border-radius: 999px;
    padding: 3px 12px;
    margin-top: 8px;
    opacity: 1;
}

/* سایه‌ی روی عکس کمی پررنگ‌تر تا اسم درشت خونده بشه */
.shop-cat-card:not(.cat-wide) .shop-cat-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.58) 100%);
}

/* کارت محصول هم سایه‌ی کرم بگیره تا کل صفحه یک زبان داشته باشه */
.product-card {
    box-shadow: 5px 5px 0 var(--color-cream);
    border-color: var(--color-cream);
}

.product-card:hover {
    box-shadow: 8px 8px 0 var(--color-cream);
}

@media (max-width: 720px) {
    .shop-cat-grid { grid-template-columns: 1fr; gap: 24px; }

    /* روی موبایل کج‌شدگی برداشته می‌شه تا کاشی از لبه بیرون نزنه */
    .shop-cat-card:not(.cat-wide),
    .shop-cat-card:not(.cat-wide):nth-child(even) {
        transform: none;
        box-shadow: 5px 5px 0 var(--color-cream);
    }
    .shop-cat-card:not(.cat-wide):hover { transform: none; box-shadow: 5px 5px 0 var(--color-cream); }
    .shop-cat-card:not(.cat-wide) .shop-cat-overlay-name { font-size: 24px; }
    .product-card,
    .product-card:hover { box-shadow: 4px 4px 0 var(--color-cream); }
}

/* ===================================================
   قاب دسته‌بندی — چیدمان افقی
   ===================================================
   ساختار از نمونه‌ای که فرستادی گرفته شده: متن یک طرف، عکس بزرگ
   طرف دیگه، و اسم انگلیسی درشتِ کم‌رنگ پشت کار. رنگ‌ها ولی مال
   زیگو موندن (کرم/زرشکی/کهربایی) نه پالت روشنِ نمونه.
=================================================== */
.shop-cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
    gap: 26px;
}

.cat-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 210px;
    padding: 22px 26px;
    overflow: hidden;
    text-decoration: none;
    border: 2px solid var(--color-cream);
    border-radius: 10px;
    background-color: var(--surface);
    box-shadow: 7px 7px 0 var(--color-cream);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cat-panel:hover {
    transform: translate(-3px, -3px);
    box-shadow: 11px 11px 0 var(--color-cream);
}

.cat-panel.is-active { box-shadow: 11px 11px 0 var(--c-amber); border-color: var(--c-amber); }

/* پس‌زمینه: همون عکس، بلرِ زیاد — عمق می‌ده بدون اینکه متن رو کور کنه */
.cat-panel-blur {
    position: absolute;
    inset: -30px;
    background-size: cover;
    background-position: center;
    filter: blur(26px) brightness(0.45) saturate(1.2);
    transform: scale(1.1);
    z-index: 0;
}

.cat-panel::after {
    /* لایه‌ی تیره روی بلر تا متن همیشه خونا بمونه */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(28,26,24,0.82) 0%, rgba(28,26,24,0.45) 60%, transparent 100%);
    z-index: 1;
}

/* اسم انگلیسیِ درشتِ محو، پشت همه‌چیز */
.cat-panel-ghost {
    position: absolute;
    left: 16px;
    bottom: -14px;
    z-index: 1;
    font-family: 'Morabba', sans-serif;
    font-size: 62px;
    line-height: 1;
    letter-spacing: 2px;
    color: rgba(255, 243, 225, 0.09);
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.cat-panel-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 4px;
}

.cat-panel-kicker {
    font-size: 12px;
    color: var(--ink-dim);
}

.cat-panel-title {
    font-family: 'Morabba', sans-serif;
    font-size: 30px;
    color: var(--color-cream);
    line-height: 1.3;
    text-shadow: 2px 2px 0 var(--color-maroon);
}

.cat-panel-en {
    font-family: 'Morabba', sans-serif;
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--c-amber);
    text-transform: uppercase;
    direction: ltr;
    margin-bottom: 12px;
}

/* دکمه‌ی قرصی، مثل نمونه */
.cat-panel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--color-black);
    background-color: var(--color-cream);
    border: 2px solid var(--color-black);
    border-radius: 999px;
    padding: 7px 16px;
    transition: background-color 0.18s ease;
}

.cat-panel:hover .cat-panel-btn { background-color: var(--c-amber); }

/* عکس بزرگ سمت چپ */
.cat-panel-media {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 170px;
    height: 170px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--color-black);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
}

.cat-panel-media img { width: 100%; height: 100%; object-fit: cover; }

.cat-panel-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    font-size: 46px;
    background-color: var(--color-maroon);
}

@media (max-width: 720px) {
    .shop-cat-grid { grid-template-columns: 1fr; gap: 20px; }
    .cat-panel {
        min-height: 0;
        padding: 18px;
        box-shadow: 5px 5px 0 var(--color-cream);
    }
    .cat-panel:hover { transform: none; box-shadow: 5px 5px 0 var(--color-cream); }
    .cat-panel-title { font-size: 22px; }
    .cat-panel-ghost { font-size: 42px; }
    .cat-panel-media { width: 120px; height: 120px; }
}

/* ===================================================
   کارت محصول — الگوی نمونه‌ی اول
   ===================================================
   ساختار: قاب عکس با پس‌زمینه‌ی روشنِ جدا و حاشیه‌ی داخلی، برچسب
   گوشه‌ی بالا، اسم دو خطی وسط‌چین، و ردیف قیمت با قیمت قبلیِ
   خط‌خورده کنار قیمت جدید.
=================================================== */
.product-card {
    background-color: var(--color-cream);
    border: 2px solid var(--color-cream);
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--color-cream);
    padding: 10px 10px 0 10px;
    overflow: hidden;
}

.product-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--color-cream);
}

/* قاب عکس: پس‌زمینه‌ی روشن‌تر و گوشه‌ی گرد، جدا از بدنه‌ی کارت */
.product-card-thumb {
    aspect-ratio: 1 / 1;
    height: auto;
    border: none;
    border-radius: 10px;
    background-color: #ffffff;
    overflow: hidden;
}

.product-card-thumb img { object-fit: cover; }

/* برچسب تخفیف: گوشه‌ی بالا-چپ، تیره و توپر مثل نمونه */
.product-card-off {
    top: 8px;
    left: 8px;
    right: auto;
    background-color: var(--color-maroon);
    color: var(--color-cream);
    border: 2px solid var(--color-black);
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 11.5px;
    transform: none;
    z-index: 3;
}

.product-card-body {
    padding: 12px 6px 14px 6px;
    text-align: center;
    align-items: center;
}

.product-card-name {
    font-family: 'Portada', sans-serif;
    font-weight: bold;
    font-size: 13px;
    line-height: 1.9;
    color: var(--color-black);
    -webkit-line-clamp: 2;
    min-height: 3.8em;
    margin-bottom: 6px;
}

.product-card-short { display: none; }

/* ردیف قیمت: قیمت قبلی خط‌خورده و ریز، قیمت نهایی درشت و زرشکی */
.product-card-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    background: none;
    padding: 0;
}

.product-card-price .was {
    font-size: 11.5px;
    color: var(--color-black);
    opacity: 0.4;
    text-decoration: line-through;
}

.product-card-price .now {
    font-family: 'Morabba', sans-serif;
    font-size: 16px;
    color: var(--color-maroon);
}

@media (max-width: 560px) {
    .product-card { padding: 7px 7px 0 7px; box-shadow: 4px 4px 0 var(--color-cream); }
    .product-card:hover { transform: none; box-shadow: 4px 4px 0 var(--color-cream); }
    .product-card-name { font-size: 12px; }
    .product-card-price .now { font-size: 14px; }
}

/* ===================================================
   حذف سایه‌ی کرم + تعویض عکس روی hover
   ===================================================
   سایه‌ی سختِ کرم برداشته شد؛ فقط همون خط دور (استروک) می‌مونه.
=================================================== */
.product-card,
.product-card:hover,
.cat-panel,
.cat-panel:hover,
.cat-panel.is-active {
    box-shadow: none;
}

.product-card:hover { transform: translateY(-3px); }
.cat-panel:hover    { transform: translateY(-3px); }

/* استروک واضح‌تر، چون دیگه سایه‌ای پشتش نیست */
.product-card { border: 2px solid var(--color-cream); }
.cat-panel    { border: 2px solid var(--color-cream); }
.cat-panel.is-active { border-color: var(--c-amber); }

/* ----- تعویض عکس روی hover ----- */
/* عکس دوم روی اولی می‌شینه و با محو شدن جاش رو می‌گیره. چون هر دو
   absolute هستن، ارتفاع قاب ثابت می‌مونه و کارت نمی‌پره. */
.product-card-thumb .pc-img,
.product-card-thumb .pc-img-hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.35s ease, transform 0.5s ease;
}

.product-card-thumb .pc-img-hover { opacity: 0; }

.product-card:hover .pc-img       { opacity: 0; }
.product-card:hover .pc-img-hover { opacity: 1; transform: scale(1.03); }

/* روی لمسی hover معنی نداره، پس عکس دوم اصلاً لود و نمایش داده نشه */
@media (hover: none) {
    .product-card-thumb .pc-img-hover { display: none; }
    .product-card:hover .pc-img { opacity: 1; }
}

/* ===================================================
   ستون فیلتر — بازطراحی
   ===================================================
   هم‌زبان با بقیه‌ی صفحه: سطح تیره، استروک کرم، بدون سایه.
=================================================== */
.shop-filters {
    /* هدر چسبان ۹۰ پیکسل ارتفاع داره؛ فیلتر باید زیرش بشینه نه پشتش */
    top: 104px;
}

.filter-form {
    background-color: var(--surface);
    border: 2px solid var(--color-cream);
    border-radius: 10px;
    padding: 18px;
    gap: 20px;
}

.filter-head {
    padding-bottom: 14px;
    border-bottom: 2px dashed rgba(255, 243, 225, 0.25);
}

.filter-head-title {
    font-family: 'Morabba', sans-serif;
    font-size: 20px;
    color: var(--color-cream);
}

.filter-count {
    background-color: var(--c-amber);
    color: var(--color-black);
    border: 2px solid var(--color-black);
    font-weight: bold;
}

.filter-clear {
    font-size: 12px;
    color: var(--c-hot);
    border-bottom: 1px solid rgba(226, 62, 123, 0.5);
}
.filter-clear:hover { color: var(--c-amber); border-bottom-color: var(--c-amber); }

/* عنوان هر گروه با خط کوتاه کهربایی زیرش */
.filter-label {
    position: relative;
    font-family: 'Morabba', sans-serif;
    font-size: 15px;
    color: var(--color-cream);
    padding-bottom: 7px;
    margin-bottom: 2px;
}

.filter-label::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 2px;
    background-color: var(--c-amber);
}

/* ----- ورودی‌ها ----- */
.filter-select,
.filter-search input,
.filter-price input {
    background-color: rgba(0, 0, 0, 0.32);
    border: 1.5px solid rgba(255, 243, 225, 0.28);
    border-radius: 10px;
    color: var(--color-cream);
    font-family: 'Portada', sans-serif;
}

.filter-select {
    width: 100%;
    font-size: 13px;
    padding: 10px 12px;
    cursor: pointer;
}
.filter-select option { background-color: var(--surface); color: var(--color-cream); }

.filter-search button {
    border: 1.5px solid rgba(255, 243, 225, 0.28);
    background-color: rgba(255, 243, 225, 0.08);
    border-radius: 10px;
}
.filter-search button:hover { background-color: rgba(255, 243, 225, 0.18); }

/* ----- لیست دسته‌بندی: ناحیه‌ی کلیک بزرگ‌تر و حالت انتخاب‌شده ----- */
.filter-radios { gap: 2px; max-height: 220px; padding-left: 4px; }

.filter-radio {
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 13px;
}

.filter-radio:has(input:checked) {
    background-color: rgba(242, 179, 61, 0.16);
    color: var(--c-amber);
}

.filter-radio em {
    background-color: rgba(255, 243, 225, 0.1);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10.5px;
    color: var(--ink-dim);
}

/* ----- تگ‌ها ----- */
.filter-tags { max-height: 190px; padding-left: 4px; }

.filter-tag {
    border: 1.5px solid rgba(255, 243, 225, 0.2);
    padding: 6px 12px;
}

.filter-tag.is-on {
    background-color: var(--c-amber);
    border-color: var(--color-black);
    color: var(--color-black);
    font-weight: bold;
}

/* ----- وضعیت ----- */
.filter-check {
    padding: 7px 4px;
    font-size: 13px;
    border-radius: 8px;
}
.filter-check:hover { background-color: rgba(255, 243, 225, 0.06); }

/* ----- اسکرول‌بار لیست‌های بلند ----- */
.filter-radios::-webkit-scrollbar,
.filter-tags::-webkit-scrollbar { width: 6px; }

.filter-radios::-webkit-scrollbar-thumb,
.filter-tags::-webkit-scrollbar-thumb {
    background-color: rgba(255, 243, 225, 0.22);
    border-radius: 999px;
}

.filter-radios,
.filter-tags { scrollbar-width: thin; scrollbar-color: rgba(255,243,225,0.22) transparent; }

/* ----- دکمه‌ی اعمال ----- */
.filter-apply {
    border: 2px solid var(--color-black);
    font-size: 14px;
    padding: 11px;
}

@media (max-width: 860px) {
    /* روی موبایل ستون فیلتر تمام‌عرض و بدون چسبندگی */
    .shop-filters { top: auto; }
    .filter-form { padding: 16px; gap: 16px; }
    .filter-radios { max-height: 200px; }
    .filter-tags   { max-height: 160px; }
}
.shop-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:28px;font-family:Portada,sans-serif}
.shop-pagination>span{display:flex;align-items:center;gap:8px}.shop-pagination a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 12px;border:1px dashed #ab8c70;border-radius:8px;background:var(--color-cream);color:var(--color-maroon);text-decoration:none}.shop-pagination a[aria-current=page]{background:var(--color-maroon);color:var(--color-cream);border-color:var(--color-cream)}.pagination-gap{color:var(--color-cream)}
/* Selected categories lead directly to their products. */
.cat-hero:has(.cat-hero-back){min-height:0;padding:20px 24px;border:1px dashed rgba(255,243,225,.45);border-radius:12px;box-shadow:none;background:rgba(255,243,225,.04)}
.cat-hero:has(.cat-hero-back) .cat-hero-bg{display:none}.cat-hero:has(.cat-hero-back) .cat-hero-body{padding:0;position:relative}.cat-hero:has(.cat-hero-back) .cat-hero-title{font-size:clamp(24px,3vw,34px);margin:8px 0}.cat-hero:has(.cat-hero-back) .cat-hero-desc{margin:6px 0;max-width:65ch}.cat-hero:has(.cat-hero-back) .cat-hero-count{margin-top:8px}
@media(max-width:860px){.cat-hero:has(.cat-hero-back){padding:16px}.cat-hero:has(.cat-hero-back) .cat-hero-title{font-size:24px}.cat-hero:has(.cat-hero-back) .cat-hero-desc{font-size:13px;line-height:1.9}}

/* Uniform recommendation cards and desktop catalog columns. */
.product-rail > .rail-card {
    box-sizing: border-box;
    width: 168px;
    min-width: 0;
    max-width: 168px;
    flex: 0 0 168px;
}
.product-rail > .rail-card .rail-thumb {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}
.product-rail > .rail-card .rail-name {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.8;
    height: 3.6em;
    overflow: hidden;
}
.product-rail > .rail-card .rail-price { margin-top: auto; flex-wrap: wrap; }
.product-rail > .product-card { min-width: 0; box-sizing: border-box; }
.product-rail > .product-card .product-card-thumb { flex: none; aspect-ratio: 1; height: auto; }
@media (min-width: 1024px) {
    .shop-results > .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .product-rail > .rail-card { width: 145px; max-width: 145px; flex-basis: 145px; }
}