/* =====================================================================
   NEXPERS — DESIGN ENHANCEMENTS (loaded last, additive overrides)
   Scope: variation option cards, single-product price box,
          category banner arrangement, "Why Us" feature cards, nav polish.
   Safe to remove this file + its enqueue to fully revert.
===================================================================== */

/* =====================================================================
   1) SELECTED-VARIATION PRICE BOX (single product)
   Make the price that appears after picking an option feel like a
   confident "summary" panel (inspired by the glass checkout).
===================================================================== */
.nexpers-single-product-container .single_variation_wrap .single_variation {
    margin-bottom: 14px;
}
/* Price summary card: label + accent bar on one side, big price on the other */
.nexpers-single-product-container .woocommerce-variation-price {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    margin-bottom: 14px;
    background:
        linear-gradient(135deg, rgba(59,130,246,0.08), rgba(37,99,235,0.05)),
        #fff;
    border: 1px solid rgba(59,130,246,0.18);
    border-radius: var(--radius-md, 14px);
    box-shadow: 0 10px 26px -18px rgba(59,130,246,0.5);
    overflow: hidden;
    animation: bvcFade .35s ease;
}
/* Accent edge bar (start side) */
.nexpers-single-product-container .woocommerce-variation-price::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 5px;
    background: var(--gradient-primary, linear-gradient(135deg,#3b82f6,#3b82f6));
}
/* Label */
.nexpers-single-product-container .woocommerce-variation-price::before {
    content: "Total price";
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--text-secondary, #64748b);
}
[dir="rtl"] .nexpers-single-product-container .woocommerce-variation-price::before {
    content: "قیمت قابل پرداخت";
}
.nexpers-single-product-container .woocommerce-variation-price .price {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 28px;
    font-weight: 900;
    background: var(--gradient-primary, linear-gradient(135deg,#3b82f6,#3b82f6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.05;
    white-space: nowrap;
}
.nexpers-single-product-container .woocommerce-variation-price .price del {
    -webkit-text-fill-color: var(--text-muted, #94a3b8);
    font-size: 16px;
    font-weight: 600;
    opacity: 0.7;
}
.nexpers-single-product-container .woocommerce-variation-availability {
    font-weight: 700;
    color: #16a34a;
}
@media (max-width: 520px) {
    .nexpers-single-product-container .woocommerce-variation-price {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}
@keyframes bvcFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   3) CATEGORY BANNERS — balanced "justified" rows (e.g. 4 top / 3 bottom)
   Flexbox auto-fills each row and the LAST row stretches its items to fill
   the width, so there's never a lonely orphan and the block looks split
   into tidy rows instead of one crowded grid.
===================================================================== */
.cat-banners-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}
.cat-banners-grid > .cat-banner-card {
    flex: 1 1 240px;          /* ~4 per row on desktop -> 7 items = 4 + 3 */
    min-width: 240px;
    margin: 0 !important;
}
@media (max-width: 900px) {
    .cat-banners-grid > .cat-banner-card { flex-basis: 280px; min-width: 260px; }
}
@media (max-width: 600px) {
    .cat-banners-grid { gap: 14px !important; }
    .cat-banners-grid > .cat-banner-card { flex: 1 1 100%; min-width: 0; }
}
/* inner .cat-banner-inner keeps its natural 2/1 ratio from main.css */

/* =====================================================================
   4) "WHY US" FEATURE CARDS — richer, per-card accent + gradient tiles
===================================================================== */
.features-grid .feature-card {
    --fc1: #3b82f6;
    --fc2: #3b82f6;
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
    border-color: var(--border-light, #eef2f7);
}
.features-grid .feature-card:nth-child(1) { --fc1:#3b82f6; --fc2:#3b82f6; }
.features-grid .feature-card:nth-child(2) { --fc1:#f59e0b; --fc2:#ef4444; }
.features-grid .feature-card:nth-child(3) { --fc1:#3b82f6; --fc2:#3b82f6; }
.features-grid .feature-card:nth-child(4) { --fc1:#22c55e; --fc2:#16a34a; }

/* Per-card top accent + hover glow tinted to the card's own colors */
.features-grid .feature-card::before {
    background: linear-gradient(135deg, var(--fc1), var(--fc2));
}
.features-grid .feature-card::after {
    background: linear-gradient(135deg, var(--fc1), var(--fc2));
}
.features-grid .feature-card:hover {
    box-shadow: 0 22px 50px -18px color-mix(in srgb, var(--fc1) 55%, transparent);
}

/* Icon tile takes the card's accent gradient permanently (softly),
   then turns fully solid on hover */
.features-grid .feature-card .feature-icon {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--fc1) 14%, #fff),
        color-mix(in srgb, var(--fc2) 12%, #fff));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc1) 16%, transparent);
}
.features-grid .feature-card:hover .feature-icon {
    background: linear-gradient(135deg, var(--fc1), var(--fc2));
    box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--fc1) 60%, transparent);
}
.features-grid .feature-card .feature-icon::after {
    background: linear-gradient(135deg, var(--fc1), var(--fc2));
}

/* Fallback for browsers without color-mix() */
@supports not (color: color-mix(in srgb, red, blue)) {
    .features-grid .feature-card:hover { box-shadow: 0 22px 50px -18px rgba(59,130,246,0.4); }
    .features-grid .feature-card .feature-icon {
        background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(37,99,235,0.10));
    }
}

/* =====================================================================
   5) HEADER NAV — light polish (icons + clearer hover pill)
   The theme already supports inline icons (.wd-nav-img); this just
   firms up spacing and the active/hover treatment.
===================================================================== */
.nav-menu { gap: 2px; }
.nav-menu > li > a { padding-block: 10px; }
.nav-menu > li > a:hover {
    box-shadow: inset 0 0 0 1px rgba(59,130,246,0.12);
}
.nav-menu li a .wd-nav-img,
.nav-menu li a img:not(.logo-img) { width: 17px; height: 17px; }

/* =====================================================================
   6) HOMEPAGE — a little creative polish (section headers)
   Additive only: gradient underline accent, richer badge, soft glow.
===================================================================== */

/* Badge: gradient hairline border + soft glow */
.section-badge {
    background:
        linear-gradient(rgba(59,130,246,0.09), rgba(37,99,235,0.06)) padding-box,
        linear-gradient(135deg, rgba(59,130,246,0.55), rgba(37,99,235,0.35)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 6px 18px -10px rgba(59,130,246,0.5);
}

/* Centered titles get an animated gradient underline accent */
.section-header.text-center .section-title {
    position: relative;
    padding-bottom: 18px;
}
.section-header.text-center .section-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 64px;
    height: 4px;
    border-radius: 99px;
    background: var(--gradient-primary, linear-gradient(135deg,#3b82f6,#3b82f6));
    background-size: 200% 100%;
    animation: bvcShimmer 3.5s ease-in-out infinite;
}
@keyframes bvcShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Soft glow on gradient words in titles */
.section-title .gradient-text {
    filter: drop-shadow(0 4px 18px rgba(59,130,246,0.18));
}

/* Slightly stronger, smoother lift on the product/category cards */
.cat-banner-card { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
    .section-header.text-center .section-title::after { animation: none; }
}

/* =====================================================================
   8) LATEST BLOG POSTS GRID (homepage, below articles banner)
===================================================================== */
.blog-grid-section { padding-top: 0; }

/* Blog category / tag / archive listing — white card-grid page */
.blog-archive-section { background: #fff; padding-top: 48px; }
.blog-archive-section .pagination {
    display: flex; justify-content: center; margin-top: 40px;
}
.blog-archive-section .pagination .nav-links {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.blog-archive-section .pagination a,
.blog-archive-section .pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    border-radius: 12px; font-size: 14px; font-weight: 700;
    border: 1px solid var(--border-light, #eef2f7);
    color: var(--text-secondary, #64748b);
    transition: all .2s ease;
}
.blog-archive-section .pagination a:hover {
    color: var(--primary, #2563eb);
    border-color: color-mix(in srgb, var(--primary, #2563eb) 40%, transparent);
}
.blog-archive-section .pagination .page-numbers.current {
    background: var(--gradient-primary, linear-gradient(135deg,#3b82f6,#3b82f6));
    color: #fff; border-color: transparent;
}
.blog-archive-section .no-posts {
    text-align: center; padding: 60px 20px; color: var(--text-muted, #94a3b8);
}

/* Header bar: title + icon on the right, "view all" on the left (RTL) */
.blog-grid-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}
.blog-grid-head__title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.blog-grid-head__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: 14px;
    color: var(--primary, #2563eb);
    background: color-mix(in srgb, var(--primary, #2563eb) 12%, transparent);
}
.blog-grid-head__heading {
    margin: 0;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--text-primary, #1e293b);
}
.blog-grid-head__all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary, #64748b);
    padding: 9px 16px;
    border-radius: 99px;
    border: 1px solid var(--border-light, #eef2f7);
    transition: color .2s ease, border-color .2s ease, background .2s ease, gap .2s ease;
    white-space: nowrap;
}
.blog-grid-head__all:hover {
    color: var(--primary, #2563eb);
    border-color: color-mix(in srgb, var(--primary, #2563eb) 40%, transparent);
    background: color-mix(in srgb, var(--primary, #2563eb) 6%, transparent);
    gap: 10px;
}
[dir="rtl"] .blog-grid-head__all svg { transform: scaleX(-1); }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 0;
}
.blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border-light, #eef2f7);
    border-radius: 18px;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 46px -22px rgba(59,130,246,.35);
    border-color: transparent;
}
.blog-card-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-secondary, #f4f2fb);
}
.blog-card-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.blog-card:hover .blog-card-thumb img { transform: scale(1.06); }
.blog-card-badge {
    position: absolute; top: 12px; inset-inline-end: 12px;
    padding: 5px 12px; border-radius: 99px;
    background: rgba(15,23,42,.72);
    backdrop-filter: blur(8px);
    color: #fff; font-size: 11.5px; font-weight: 700;
    border: 1px solid rgba(255,255,255,.14);
}
.blog-card-body {
    display: flex; flex-direction: column;
    gap: 8px; padding: 16px 18px 18px; flex: 1;
}
.blog-card-title {
    font-size: 15.5px; font-weight: 800; line-height: 1.55;
    margin: 0; letter-spacing: -.2px;
}
.blog-card-title a { color: var(--text-primary, #1e293b); transition: color .2s ease; }
.blog-card-title a:hover { color: var(--primary, #2563eb); }
.blog-card-excerpt {
    font-size: 13px; color: var(--text-secondary, #64748b);
    line-height: 1.85; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-meta {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto; padding-top: 12px;
    border-top: 1px dashed var(--border, #e6e3f0);
}
.blog-card-date {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--text-muted, #94a3b8);
}
.blog-card-date svg { opacity: .7; }
.blog-card-more {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 800; color: var(--primary, #2563eb);
    transition: gap .2s ease;
}
.blog-card-more:hover { gap: 8px; }
[dir="rtl"] .blog-card-more svg,
[dir="rtl"] .blog-grid-all svg { transform: scaleX(-1); }
.blog-grid-foot { text-align: center; margin-top: 34px; }
.blog-grid-foot--mobile { display: none; }
.blog-grid-all {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 26px; border-radius: 99px;
    background: var(--gradient-primary, linear-gradient(135deg,#3b82f6,#3b82f6));
    color: #fff; font-size: 14px; font-weight: 800;
    box-shadow: 0 12px 26px -10px rgba(59,130,246,.5);
    transition: transform .25s ease, box-shadow .25s ease;
}
.blog-grid-all:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(59,130,246,.6); }

@media (max-width: 1100px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 782px) {
    .blog-grid-head__all { display: none; }
    .blog-grid-head { margin-bottom: 22px; }
    .blog-grid-head__icon { width: 40px; height: 40px; }
    .blog-grid-foot--mobile { display: block; }
}
@media (max-width: 560px) {
    .blog-grid { grid-template-columns: 1fr; gap: 16px; max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* =====================================================================
   9) PERFORMANCE — skip rendering offscreen sections until scrolled near.
   Big win for initial paint on a long homepage. contain-intrinsic-size
   reserves space so the scrollbar/CLS stays stable.
===================================================================== */
.ps-section,
.cat-row-section,
.cat-strip-section,
.blog-grid-section,
.articles-banner-section,
.promo-banners-section,
.faq-section,
.cta-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
}

/* =====================================================================
   10) CATEGORY BANNER STRIPS — interleaved pairs between product rows
   2 side-by-side; a lone leftover banner is centred at half width
   (so it never stretches/distorts like the old full-width block did).
===================================================================== */
.cat-strip-section { padding: 26px 0; }
.cat-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.cat-strip > .cat-banner-card { margin: 0; }
.cat-strip > .cat-banner-card:only-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 10px);
    max-width: 560px;
}
@media (max-width: 700px) {
    .cat-strip { grid-template-columns: 1fr; gap: 14px; }
    .cat-strip > .cat-banner-card:only-child { width: 100%; max-width: none; }
}

/* =====================================================================
   9) PRODUCT ROW (.ps-grid) — graceful partial rows
   The product grid is forced to a fixed column count via Customizer
   "Additional CSS" using !important (6 cols >1400px, 4 cols ≤1400px,
   3 cols ≤900px, 2 cols ≤600px). When a section has fewer products than
   the column count (e.g. On Sale = 1, Best Sellers = 4) the empty cells
   leave an awkward left gap in RTL. Here we cap the columns to the actual
   item count and center the row so it reads as intentional.
   Must use !important + higher specificity to beat the Customizer rules.
   Breakpoints mirror the Customizer breakpoints exactly.
===================================================================== */
/* ≥1401px: base grid is 6 columns */
@media (min-width: 1401px) {
    .ps-section .ps-grid { justify-content: center; }
    .ps-section .ps-grid[data-count="1"] { grid-template-columns: repeat(1, minmax(0, 220px)) !important; }
    .ps-section .ps-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 220px)) !important; }
    .ps-section .ps-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 220px)) !important; }
    .ps-section .ps-grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 220px)) !important; }
    .ps-section .ps-grid[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 220px)) !important; }
}
/* 901–1400px: base grid is 4 columns */
@media (min-width: 901px) and (max-width: 1400px) {
    .ps-section .ps-grid { justify-content: center; }
    .ps-section .ps-grid[data-count="1"] { grid-template-columns: repeat(1, minmax(0, 220px)) !important; }
    .ps-section .ps-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 220px)) !important; }
    .ps-section .ps-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 220px)) !important; }
}
/* 601–900px: base grid is 3 columns */
@media (min-width: 601px) and (max-width: 900px) {
    .ps-section .ps-grid { justify-content: center; }
    .ps-section .ps-grid[data-count="1"] { grid-template-columns: repeat(1, minmax(0, 220px)) !important; }
    .ps-section .ps-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 220px)) !important; }
}