/**
 * ویترینو (Vitrino) — Core Frontend CSS
 *
 * Shared layout + base styles for every demo. Per-demo overrides live in
 * /assets/css/demos/demo-XX-name.css (loaded conditionally per widget).
 *
 * @package Vitrino\ProductWidget
 */

/* ===== Variables (sane defaults — themes/demos override) ===== */
:root {
        --jespw-radius: 8px;
        --jespw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
        --jespw-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08);
        --jespw-shadow-lg: 0 16px 50px rgba(0, 0, 0, 0.16);
        --jespw-accent: #ff6a3d;
        --jespw-text: #2a2d34;
        --jespw-muted: #7c8087;
        --jespw-bg: #ffffff;
        --jespw-bg-soft: #f6f7f9;
        --jespw-gap: 20px;
        --jespw-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Wrapper ===== */
.jespw-widget {
        visibility: visible;
        width: 100%;
        box-sizing: border-box;
        color: var(--jespw-text);
        font-family: 'Vazirmatn', 'IRANSans', 'Tahoma', sans-serif;
        line-height: 1.6;
}
.jespw-widget *,
.jespw-widget *::before,
.jespw-widget *::after { box-sizing: border-box; }

/* ===== Layout containers ===== */
.jespw-grid {
        display: grid;
        gap: var(--jespw-gap);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        list-style: none;
        margin: 0;
        padding: 0;
}
.jespw-list-container {
        display: flex;
        flex-direction: column;
        gap: var(--jespw-gap);
}
.jespw-masonry-container .jespw-item {
        break-inside: avoid;
        margin-bottom: var(--jespw-gap);
}
.jespw-masonry-container {
        display: block;
        column-count: 3;
        column-gap: var(--jespw-gap);
}
.jespw-metro-container {
        display: grid;
        gap: var(--jespw-gap);
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 1fr;
}
.jespw-metro-container .jespw-item:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }

/* Slider */
.jespw-slider.swiper { overflow: hidden; padding: 0 2px; }
.jespw-slider .swiper-slide { height: auto; }

/* Equal height */
.jespw-equal-height .jespw-card { height: 100%; display: flex; flex-direction: column; }
.jespw-equal-height .jespw-content { flex: 1; display: flex; flex-direction: column; }

/* ===== Card base =====
 * Polished default: subtle border + soft shadow. Per-demo CSS layers on top.
 */
.jespw-card {
        position: relative;
        display: flex;
        flex-direction: column;
        background: var(--jespw-bg);
        border: 1px solid #eef0f3;
        border-radius: var(--jespw-radius);
        overflow: hidden;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s, border-color 0.3s;
        box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
        isolation: isolate;
}
.jespw-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 40px rgba(16, 24, 40, 0.12);
        border-color: #e1e5ea;
}

/* ===== Image ===== */
.jespw-image {
        position: relative;
        display: block;
        overflow: hidden;
        background: var(--jespw-bg-soft);
        aspect-ratio: 1 / 1;
}
.jespw-image-link {
        display: block;
        width: 100%;
        height: 100%;
}
.jespw-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s;
}
.jespw-img-secondary {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.5s;
}
.jespw-card:hover .jespw-img-secondary { opacity: 1; }

/* Image hover effects */
.jespw-image-hover-zoom .jespw-img-primary { transition: transform 0.6s ease; }
.jespw-card:hover .jespw-image-hover-zoom .jespw-img-primary { transform: scale(1.08); }
.jespw-card:hover .jespw-image-hover-grayscale .jespw-img-primary { filter: grayscale(100%); }
.jespw-card:hover .jespw-image-hover-blur .jespw-img-primary { filter: blur(3px); }
.jespw-image-hover-brighten .jespw-img-primary { filter: brightness(0.85); transition: filter 0.4s; }
.jespw-card:hover .jespw-image-hover-brighten .jespw-img-primary { filter: brightness(1.05); }
.jespw-card:hover .jespw-image-hover-rotate .jespw-img-primary { transform: rotate(-3deg) scale(1.05); }
.jespw-card:hover .jespw-image-hover-slide_up .jespw-img-primary { transform: translateY(-12px); }

/* Image overlay */
.jespw-image-overlay {
        position: absolute;
        inset: 0;
        background: transparent;
        opacity: 0;
        transition: opacity 0.4s;
        pointer-events: none;
}
.jespw-card:hover .jespw-image-overlay { opacity: 1; }

/* ===== Badges ===== */
.jespw-badges {
        position: absolute;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 6px;
        pointer-events: none;
}
.jespw-badges-top-left { top: 10px; left: 10px; }
.jespw-badges-top-right { top: 10px; right: 10px; align-items: flex-end; }
.jespw-badges-bottom-left { bottom: 10px; left: 10px; }
.jespw-badges-bottom-right { bottom: 10px; right: 10px; align-items: flex-end; }

.jespw-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: #fff;
        background: var(--jespw-accent);
        border-radius: 4px;
        line-height: 1.4;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.jespw-badge-sale { background: #e53935; }
.jespw-badge-new { background: #2e7d32; }
.jespw-badge-outofstock { background: #6c757d; }
.jespw-badge-featured { background: #f9a825; color: #1a1a1a; }
.jespw-badge-hot { background: linear-gradient(135deg, #ff512f, #dd2476); }

/* ===== Content area ===== */
.jespw-content {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 18px;
        flex: 1;
}

.jespw-category {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--jespw-muted);
}
.jespw-category a { color: inherit; text-decoration: none; transition: color 0.25s; }
.jespw-category a:hover { color: var(--jespw-accent); }

.jespw-title {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        color: var(--jespw-text);
}
.jespw-title a {
        color: inherit;
        text-decoration: none;
        transition: color 0.25s;
}
.jespw-title a:hover { color: var(--jespw-accent); }

.jespw-rating {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: var(--jespw-muted);
}
.jespw-rating .star-rating { margin: 0; }
.jespw-rating-count { font-size: 11px; }

.jespw-price {
        font-size: 18px;
        font-weight: 700;
        color: var(--jespw-text);
}
.jespw-price del {
        color: var(--jespw-muted);
        font-weight: 400;
        text-decoration: line-through;
        margin-inline-end: 8px;
}
.jespw-price ins {
        background: none;
        text-decoration: none;
        color: var(--jespw-accent);
}
.jespw-discount-percent {
        display: inline-block;
        padding: 2px 8px;
        font-size: 11px;
        font-weight: 600;
        background: rgba(229, 57, 53, 0.12);
        color: #e53935;
        border-radius: 4px;
        margin-inline-start: 6px;
}

.jespw-excerpt {
        font-size: 13px;
        color: var(--jespw-muted);
        line-height: 1.6;
}

.jespw-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 12px;
        color: var(--jespw-muted);
}
.jespw-meta-sep { opacity: 0.5; }
.jespw-stock-in { color: #2e7d32; }
.jespw-stock-out { color: #e53935; }

/* ===== Sold count (number of purchases) ===== */
.jespw-sold-count {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--jespw-accent);
        background: rgba(255, 106, 61, 0.08);
        padding: 4px 10px;
        border-radius: 999px;
        line-height: 1.5;
        width: fit-content;
}
.jespw-sold-count .jespw-sold-icon {
        flex-shrink: 0;
        width: 1em;
        height: 1em;
        fill: currentColor;
}
.jespw-sold-count-text { white-space: nowrap; }
.jespw-sold-count-plus_label { color: #e53935; background: rgba(229, 57, 53, 0.08); }
.jespw-sold-count-k_format { color: #2e7d32; background: rgba(46, 125, 50, 0.08); }
.jespw-sold-count-number_only {
        background: transparent;
        padding-inline-start: 0;
        font-weight: 700;
}
.jespw-rtl .jespw-sold-count { flex-direction: row; }

/* ===== Swatches ===== */
.jespw-swatches { display: flex; flex-direction: column; gap: 6px; }
.jespw-swatch-group { display: flex; flex-wrap: wrap; gap: 6px; }
.jespw-swatch {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px; height: 22px;
        border-radius: 50%;
        border: 1px solid rgba(0, 0, 0, 0.12);
        font-size: 10px;
        cursor: pointer;
        transition: transform 0.2s;
}
.jespw-swatch:hover { transform: scale(1.15); }
.jespw-swatch-text { width: auto; padding: 0 8px; border-radius: 4px; }

/* ===== Stock progress bar ===== */
.jespw-stock-bar { font-size: 12px; }
.jespw-stock-bar-track {
        width: 100%;
        height: 6px;
        background: var(--jespw-bg-soft);
        border-radius: 3px;
        overflow: hidden;
        margin-bottom: 4px;
}
.jespw-stock-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--jespw-accent), #ff9b75);
        border-radius: 3px;
        transition: width 0.8s ease;
}
.jespw-stock-bar-text { color: var(--jespw-muted); }

/* ===== Countdown ===== */
.jespw-countdown {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
}
.jespw-countdown-box {
        flex: 1;
        min-width: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 6px 4px;
        background: var(--jespw-bg-soft);
        border-radius: 6px;
}
.jespw-cd-num { font-size: 16px; font-weight: 700; color: var(--jespw-text); }
.jespw-cd-label { font-size: 9px; text-transform: uppercase; color: var(--jespw-muted); letter-spacing: 0.5px; }

/* ===== Buttons =====
 * Clean, standard UI/UX. The buttons row is a single non-wrapping flex line:
 *  - Add-to-cart button + icon-buttons cluster sit on the same row.
 *  - Heights are consistent (sm=34, md=40, lg=48) across button + icons.
 *  - Width modes: auto (text-sized), flex (grows to fill), full (own row).
 *  - Alignment: start / center / end / stretch (when width != full).
 *  - Position: below (in content) / overlay (over image) / side (vertical).
 */
.jespw-buttons {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: auto;
        padding-top: 10px;
        flex-wrap: nowrap; /* No awkward wrapping — everything stays on one line. */
}

/* Width: auto — button is text-sized, icons cluster to the side. */
.jespw-buttons-width-auto .jespw-add-to-cart { flex: 0 0 auto; }
/* Width: flex — button grows to fill available space, icons stay compact. */
.jespw-buttons-width-flex .jespw-add-to-cart { flex: 1 1 auto; min-width: 0; }
/* Width: full — button takes 100% width, icons wrap to a new centered row. */
.jespw-buttons-width-full {
        flex-wrap: wrap;
        justify-content: center;
}
.jespw-buttons-width-full .jespw-add-to-cart { flex: 1 1 100%; }
.jespw-buttons-width-full .jespw-icon-buttons { flex: 1 1 100%; justify-content: center; }

/* Alignment (only meaningful when width is auto or flex). */
.jespw-buttons-align-start  { justify-content: flex-start; }
.jespw-buttons-align-center { justify-content: center; }
.jespw-buttons-align-end    { justify-content: flex-end; }
.jespw-buttons-align-stretch .jespw-add-to-cart { flex: 1 1 auto; }

/* Visibility: on_hover — slide up + fade in. */
.jespw-buttons-on_hover {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.3s, transform 0.3s;
        pointer-events: none;
}
.jespw-card:hover .jespw-buttons-on_hover,
.jespw-card:focus-within .jespw-buttons-on_hover {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
}

/* Position: overlay — centered over the image with a dark scrim. */
.jespw-buttons-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.35s;
        z-index: 3;
        padding: 16px;
}
.jespw-card:hover .jespw-buttons-overlay,
.jespw-card:focus-within .jespw-buttons-overlay { opacity: 1; }
.jespw-buttons-overlay .jespw-add-to-cart {
        background: #fff;
        color: #1a1d24;
}
.jespw-buttons-overlay .jespw-add-to-cart:hover { background: var(--jespw-accent); color: #fff; }
.jespw-buttons-overlay .jespw-btn { background: rgba(255, 255, 255, 0.15); color: #fff; backdrop-filter: blur(4px); }
.jespw-buttons-overlay .jespw-btn:hover { background: var(--jespw-accent); color: #fff; }

/* Position: side — vertical icon stack on the image edge. */
.jespw-buttons-side {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        opacity: 0;
        transition: opacity 0.35s, transform 0.35s;
        z-index: 3;
}
.jespw-card:hover .jespw-buttons-side,
.jespw-card:focus-within .jespw-buttons-side {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
}
.jespw-buttons-side .jespw-add-to-cart { display: none; } /* Side = icons only. */
.jespw-buttons-side .jespw-icon-buttons {
        flex-direction: column;
        gap: 8px;
        margin: 0;
}

/* ===== Add to cart button ===== */
.jespw-add-to-cart {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        background: var(--jespw-accent);
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        text-decoration: none;
        transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
        white-space: nowrap;
        line-height: 1;
        text-align: center;
}
.jespw-add-to-cart .jespw-atc-text { display: inline-block; }
.jespw-add-to-cart:hover {
        background: #e8552a;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(255, 106, 61, 0.32);
}
.jespw-add-to-cart.added { background: #2e7d32; }
.jespw-add-to-cart.added:hover { background: #256528; box-shadow: 0 6px 16px rgba(46, 125, 50, 0.32); }
.jespw-add-to-cart.loading { pointer-events: none; opacity: 0.85; }
.jespw-add-to-cart.loading::after {
        content: '';
        display: inline-block;
        width: 14px; height: 14px;
        margin-inline-start: 6px;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: jespw-spin 0.6s linear infinite;
}

/* Button sizes — consistent heights for button + icon buttons. */
.jespw-btn-size-sm { height: 32px; padding: 0 14px; font-size: 12px; }
.jespw-btn-size-md { height: 40px; padding: 0 18px; font-size: 13px; }
.jespw-btn-size-lg { height: 48px; padding: 0 24px; font-size: 15px; }

/* ===== Icon buttons (quick view / wishlist / compare) =====
 * Compact cluster that shares the same height as the add-to-cart button.
 * No margin juggling — gap comes from the parent .jespw-buttons.
 */
.jespw-icon-buttons {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
}
.jespw-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        background: var(--jespw-bg-soft);
        color: var(--jespw-text);
        cursor: pointer;
        transition: background 0.25s, color 0.25s, transform 0.2s, border-color 0.25s;
}
.jespw-btn:hover {
        background: var(--jespw-accent);
        color: #fff;
        border-color: var(--jespw-accent);
        transform: translateY(-1px);
}
.jespw-btn svg { display: block; }

/* Icon button sizes — match the add-to-cart height. */
.jespw-icon-buttons.jespw-btn-size-sm .jespw-btn { width: 32px; height: 32px; }
.jespw-icon-buttons.jespw-btn-size-sm .jespw-btn svg { width: 15px; height: 15px; }
.jespw-icon-buttons.jespw-btn-size-md .jespw-btn { width: 40px; height: 40px; }
.jespw-icon-buttons.jespw-btn-size-md .jespw-btn svg { width: 18px; height: 18px; }
.jespw-icon-buttons.jespw-btn-size-lg .jespw-btn { width: 48px; height: 48px; }
.jespw-icon-buttons.jespw-btn-size-lg .jespw-btn svg { width: 20px; height: 20px; }

/* ===== Toolbar ===== */
.jespw-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px;
        margin-bottom: 22px;
        padding: 14px 16px;
        background: var(--jespw-bg-soft);
        border-radius: 12px;
        border: 1px solid #eef0f3;
}
.jespw-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.jespw-filters-dropdown { display: block; }
.jespw-filter-item {
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 600;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 999px;
        color: var(--jespw-text);
        cursor: pointer;
        transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
        line-height: 1.4;
}
.jespw-filter-item:hover {
        border-color: var(--jespw-accent);
        color: var(--jespw-accent);
        transform: translateY(-1px);
}
.jespw-filter-item.active {
        background: var(--jespw-accent);
        border-color: var(--jespw-accent);
        color: #fff;
        box-shadow: 0 4px 12px rgba(255, 106, 61, 0.28);
}

.jespw-sorting { margin-inline-start: auto; }
.jespw-sorting select {
        padding: 8px 14px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        background: #fff;
        font-size: 13px;
        font-family: inherit;
        color: var(--jespw-text);
        cursor: pointer;
        transition: border-color 0.25s;
}
.jespw-sorting select:hover { border-color: var(--jespw-accent); }
.jespw-search { position: relative; }
.jespw-search-input {
        padding: 8px 14px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        font-size: 13px;
        font-family: inherit;
        min-width: 220px;
        background: #fff;
        color: var(--jespw-text);
        transition: border-color 0.25s;
}
.jespw-search-input:focus { outline: none; border-color: var(--jespw-accent); }
.jespw-search-results {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        background: #fff;
        border-radius: 10px;
        box-shadow: var(--jespw-shadow-lg);
        max-height: 360px;
        overflow-y: auto;
        z-index: 20;
        display: none;
        border: 1px solid #eef0f3;
}
.jespw-search-results.active { display: block; }
.jespw-search-result-item {
        display: flex;
        gap: 10px;
        padding: 10px 14px;
        border-bottom: 1px solid #f1f3f5;
        text-decoration: none;
        color: var(--jespw-text);
        font-size: 13px;
        transition: background 0.2s;
}
.jespw-search-result-item:last-child { border-bottom: 0; }
.jespw-search-result-item:hover { background: var(--jespw-bg-soft); }
.jespw-search-result-item img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }

.jespw-result-count { font-size: 13px; color: var(--jespw-muted); font-weight: 500; }

/* ===== Header ===== */
.jespw-header { margin-bottom: 24px; }
.jespw-header-title { margin: 0 0 6px; font-size: 26px; font-weight: 800; color: var(--jespw-text); line-height: 1.3; }
.jespw-header-subtitle { margin: 0; color: var(--jespw-muted); font-size: 14px; }
.jespw-view-all {
        display: inline-flex;
        align-items: center;
        margin-top: 12px;
        padding: 8px 18px;
        font-size: 13px;
        font-weight: 600;
        color: var(--jespw-accent);
        border: 1px solid var(--jespw-accent);
        border-radius: 999px;
        text-decoration: none;
        transition: background 0.25s, color 0.25s, transform 0.2s;
}
.jespw-view-all:hover { background: var(--jespw-accent); color: #fff; transform: translateY(-1px); }

/* ===== Pagination / load more ===== */
.jespw-load-more-wrap { display: flex; justify-content: center; margin-top: 28px; }
.jespw-load-more {
        padding: 12px 32px;
        font-size: 14px;
        font-weight: 600;
        background: var(--jespw-accent);
        color: #fff;
        border: 0;
        border-radius: 999px;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.25s, background 0.25s;
        font-family: inherit;
}
.jespw-load-more:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(255, 106, 61, 0.34);
        background: #e8552a;
}
.jespw-load-more.loading { opacity: 0.7; pointer-events: none; }

.jespw-infinite-scroll {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 30px 0;
        min-height: 60px;
}

.jespw-pagination { text-align: center; margin-top: 28px; }
.jespw-pagination .page-numbers {
        display: inline-block;
        padding: 8px 14px;
        margin: 0 3px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        color: var(--jespw-text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
        font-family: inherit;
}
.jespw-pagination .page-numbers:hover {
        border-color: var(--jespw-accent);
        color: var(--jespw-accent);
        transform: translateY(-1px);
}
.jespw-pagination .page-numbers.current {
        background: var(--jespw-accent);
        color: #fff;
        border-color: var(--jespw-accent);
        box-shadow: 0 4px 12px rgba(255, 106, 61, 0.28);
}

/* ===== Spinner ===== */
.jespw-spinner {
        display: inline-block;
        width: 24px; height: 24px;
        border: 3px solid rgba(0, 0, 0, 0.1);
        border-top-color: var(--jespw-accent);
        border-radius: 50%;
        animation: jespw-spin 0.8s linear infinite;
}
@keyframes jespw-spin { to { transform: rotate(360deg); } }

/* Loading overlay */
.jespw-loading-overlay {
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.7);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 50;
}
.jespw-widget.loading .jespw-loading-overlay { display: flex; }

/* Empty state */
.jespw-empty {
        grid-column: 1 / -1;
        text-align: center;
        padding: 60px 20px;
        color: var(--jespw-muted);
        font-size: 14px;
}

.jespw-notice { padding: 20px; background: #fff3cd; color: #856404; border-radius: 6px; }

/* ===== Entrance animations ===== */
.jespw-card.jespw-anim-pending { opacity: 0; }
.jespw-card.jespw-anim-fade { animation: jespw-fade 0.6s forwards; }
.jespw-card.jespw-anim-fade_up { animation: jespw-fade-up 0.6s forwards; }
.jespw-card.jespw-anim-fade_down { animation: jespw-fade-down 0.6s forwards; }
.jespw-card.jespw-anim-fade_left { animation: jespw-fade-left 0.6s forwards; }
.jespw-card.jespw-anim-fade_right { animation: jespw-fade-right 0.6s forwards; }
.jespw-card.jespw-anim-zoom { animation: jespw-zoom 0.6s forwards; }
.jespw-card.jespw-anim-bounce { animation: jespw-bounce 0.7s forwards; }
.jespw-card.jespw-anim-flip { animation: jespw-flip 0.7s forwards; }
.jespw-card.jespw-anim-rotate { animation: jespw-rotate 0.7s forwards; }

@keyframes jespw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jespw-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes jespw-fade-down { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes jespw-fade-left { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes jespw-fade-right { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes jespw-zoom { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes jespw-bounce { 0% { opacity: 0; transform: translateY(-40px); } 60% { opacity: 1; transform: translateY(8px); } 100% { transform: translateY(0); } }
@keyframes jespw-flip { from { opacity: 0; transform: perspective(800px) rotateY(80deg); } to { opacity: 1; transform: perspective(800px) rotateY(0); } }
@keyframes jespw-rotate { from { opacity: 0; transform: rotate(-15deg) scale(0.85); } to { opacity: 1; transform: rotate(0) scale(1); } }

/* ===== Slider arrows/dots ===== */
.jespw-widget .jespw-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 40px; height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.9);
        color: var(--jespw-text);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: var(--jespw-shadow-md);
        transition: var(--jespw-transition);
}
.jespw-widget .jespw-arrow:hover { background: var(--jespw-accent); color: #fff; }
.jespw-widget .jespw-arrow-prev { left: -10px; }
.jespw-widget .jespw-arrow-next { right: -10px; }
.jespw-widget .jespw-arrow svg { width: 18px; height: 18px; }

/* ===== Quick view modal ===== */
.jespw-qv-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
}
.jespw-qv-overlay.active { opacity: 1; visibility: visible; }
.jespw-qv-modal-inner {
        position: relative;
        background: #fff;
        border-radius: 12px;
        max-width: 900px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 30px;
        transform: scale(0.9);
        transition: transform 0.3s;
}
.jespw-qv-overlay.active .jespw-qv-modal-inner { transform: scale(1); }
.jespw-qv-close {
        position: absolute;
        top: 10px; right: 10px;
        width: 36px; height: 36px;
        border: 0;
        background: transparent;
        font-size: 26px;
        color: var(--jespw-text);
        cursor: pointer;
}
.jespw-qv-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
}
.jespw-qv-image img { width: 100%; border-radius: 8px; }
.jespw-qv-title { margin: 0 0 8px; font-size: 22px; }
.jespw-qv-price { font-size: 22px; font-weight: 700; color: var(--jespw-accent); margin: 10px 0; }
.jespw-qv-cat { font-size: 12px; color: var(--jespw-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.jespw-qv-excerpt { color: var(--jespw-muted); font-size: 14px; line-height: 1.7; margin: 14px 0; }
.jespw-qv-actions { display: flex; gap: 10px; margin-top: 16px; }
.jespw-qv-detail-btn {
        display: inline-block;
        padding: 10px 18px;
        border: 1px solid var(--jespw-accent);
        color: var(--jespw-accent);
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
}

/* ===== Toast notification ===== */
.jespw-toast {
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 100001;
        padding: 12px 18px;
        background: #2e7d32;
        color: #fff;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        box-shadow: var(--jespw-shadow-lg);
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s, transform 0.3s;
        pointer-events: none;
}
.jespw-toast.active { opacity: 1; transform: translateY(0); }

/* ===== Tilt (3D hover) ===== */
.jespw-tilt { transform-style: preserve-3d; transition: transform 0.15s ease-out; }
.jespw-tilt .jespw-content { transform: translateZ(40px); }

/* ===== Responsive defaults ===== */
@media (max-width: 1024px) {
        .jespw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .jespw-masonry-container { column-count: 2; }
        .jespw-qv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
        .jespw-grid { grid-template-columns: 1fr; }
        .jespw-masonry-container { column-count: 1; }
        .jespw-metro-container { grid-template-columns: repeat(2, 1fr); }
        .jespw-metro-container .jespw-item:nth-child(6n+1) { grid-column: span 2; grid-row: span 1; }
        .jespw-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
        .jespw-sorting { margin-inline-start: 0; }
        .jespw-sorting select { width: 100%; }
        .jespw-search-input { min-width: 0; width: 100%; }
        .jespw-load-more { width: 100%; }
        .jespw-widget .jespw-arrow { display: none; } /* arrows hidden on mobile (swipe) */

        /* Buttons: on mobile, default to full-width so touch targets are large. */
        .jespw-buttons-width-flex,
        .jespw-buttons-width-auto {
                flex-wrap: wrap;
                justify-content: center;
        }
        .jespw-buttons-width-flex .jespw-add-to-cart,
        .jespw-buttons-width-auto .jespw-add-to-cart {
                flex: 1 1 100%;
        }
        .jespw-buttons-width-flex .jespw-icon-buttons,
        .jespw-buttons-width-auto .jespw-icon-buttons {
                flex: 1 1 100%;
                justify-content: center;
        }
        /* Touch-friendly: bump all sizes up to lg on mobile. */
        .jespw-btn-size-sm, .jespw-btn-size-md { height: 44px; }
        .jespw-icon-buttons.jespw-btn-size-sm .jespw-btn,
        .jespw-icon-buttons.jespw-btn-size-md .jespw-btn { width: 44px; height: 44px; }

        .jespw-content { padding: 14px; }
        .jespw-header-title { font-size: 22px; }
}

/* ===== RTL specifics (Persian-first — widget is always RTL) ===== */
.jespw-rtl { direction: rtl; text-align: right; }
.jespw-rtl .jespw-card { text-align: right; }
.jespw-rtl .jespw-content { text-align: right; }
.jespw-rtl .jespw-title,
.jespw-rtl .jespw-title a { text-align: right; }
.jespw-rtl .jespw-price { text-align: right; flex-direction: row-reverse; }
.jespw-rtl .jespw-regular-price,
.jespw-rtl .jespw-sale-price { direction: rtl; }
.jespw-rtl .jespw-category { text-align: right; }
.jespw-rtl .jespw-excerpt { text-align: right; }

/* Horizontal card: image on right, content on left (RTL natural flow). */
.jespw-rtl .jespw-card[style*="flex-direction: row"],
.jespw-rtl .jespw-horizontal-card .jespw-card { flex-direction: row; }

/* Slider arrows — swapped for RTL. */
.jespw-rtl .jespw-arrow-prev { left: auto; right: -10px; }
.jespw-rtl .jespw-arrow-next { right: auto; left: -10px; }

/* Icon buttons cluster — in RTL, stays naturally to the left of the ATC button
   via flex flow; no margin override needed (gap handles spacing). */
.jespw-rtl .jespw-icon-buttons { margin-inline-start: 0; }

/* Badge positions — mirrored for RTL. */
.jespw-rtl .jespw-badges-top-left { left: auto; right: 10px; }
.jespw-rtl .jespw-badges-top-right { right: auto; left: 10px; align-items: flex-start; }
.jespw-rtl .jespw-badges-bottom-left { left: auto; right: 10px; }
.jespw-rtl .jespw-badges-bottom-right { right: auto; left: 10px; align-items: flex-start; }

/* Buttons row: in RTL, natural flex flow puts the ATC button on the right
   and icons on the left — which is the correct Persian layout. */
.jespw-rtl .jespw-buttons { flex-direction: row; }
.jespw-rtl .jespw-buttons-align-start  { justify-content: flex-start; }
.jespw-rtl .jespw-buttons-align-end    { justify-content: flex-end; }
/* Side position: icons appear on the LEFT edge of the image in RTL. */
.jespw-rtl .jespw-buttons-side { right: auto; left: 12px; }

/* Pagination: numbers flow right-to-left. */
.jespw-rtl .jespw-pagination-numbers { direction: rtl; }
.jespw-rtl .jespw-pagination .jespw-page-numbers { direction: rtl; }

/* Toolbar: filter tabs flow right-to-left. */
.jespw-rtl .jespw-toolbar { direction: rtl; }
.jespw-rtl .jespw-filter-tabs { direction: rtl; }
.jespw-rtl .jespw-filter-item { margin-inline-end: 0; margin-inline-start: 8px; }

/* Sort dropdown & search: right-aligned. */
.jespw-rtl .jespw-sort-select,
.jespw-rtl .jespw-search-input { text-align: right; direction: rtl; }

/* Stock bar: fills from right. */
.jespw-rtl .jespw-stock-bar-fill { margin-inline-start: auto; margin-inline-end: 0; }

/* Countdown: numbers flow right-to-left. */
.jespw-rtl .jespw-countdown { direction: rtl; }

/* Swatches: right-aligned. */
.jespw-rtl .jespw-swatch-item { margin-inline-end: 0; margin-inline-start: 6px; }

/* Meta row (SKU, stock, sold): right-aligned. */
.jespw-rtl .jespw-meta { text-align: right; }
.jespw-rtl .jespw-meta-item { margin-inline-end: 0; margin-inline-start: 12px; }

/* Header: right-aligned by default. */
.jespw-rtl .jespw-header { text-align: right; }
.jespw-rtl .jespw-header-title,
.jespw-rtl .jespw-header-subtitle { text-align: right; }

/* Entrance animations: flip direction for RTL lateral movements. */
.jespw-rtl .jespw-card.jespw-anim-fade_left { animation-name: jespw-fade-right; }
.jespw-rtl .jespw-card.jespw-anim-fade_right { animation-name: jespw-fade-left; }

/* Quick view modal: close button on the left in RTL. */
.jespw-rtl .jespw-quick-view-close { right: auto; left: 12px; }
.jespw-rtl .jespw-quick-view-content { direction: rtl; text-align: right; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
        .jespw-card,
        .jespw-img,
        .jespw-btn,
        .jespw-add-to-cart,
        .jespw-filter-item { transition: none !important; animation: none !important; }
        .jespw-card.jespw-anim-fade,
        .jespw-card.jespw-anim-fade_up,
        .jespw-card.jespw-anim-fade_down,
        .jespw-card.jespw-anim-fade_left,
        .jespw-card.jespw-anim-fade_right,
        .jespw-card.jespw-anim-zoom,
        .jespw-card.jespw-anim-bounce,
        .jespw-card.jespw-anim-flip,
        .jespw-card.jespw-anim-rotate { opacity: 1; transform: none; animation: none; }
}