/* ==========================================================================
   PRODUCTS PAGES: Archive (archive-products.php) + Category (taxonomy-product_category.php)

   Sections:
   1. Buttons (shared)
   2. Hero: archive (base) + category (--category modifier)
   3. Archive: layout, sidebar, search, category cards, trust strip, bottom
   4. Category: layout, left image + product cards, CTA
   5. Accessibility + motion
   6. Responsive
   ========================================================================== */


/* ==========================================================================
   1. BUTTONS (shared)
   ========================================================================== */
.btn-fill,
.btn-line,
.btn-white,
.btn-ghost {
    display: block;
    margin-top: 10px;
    padding: 12px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.btn-fill  { background: var(--color-primary); color: #fff; }
.btn-line  { background: #fff; color: var(--color-primary); border: 1px solid var(--color-primary); }
.btn-white { background: #fff; color: var(--color-primary); }
.btn-ghost { color: #fff; border: 1px solid #fff; }


/* ==========================================================================
   2. HERO
   ========================================================================== */

/* ---------- Archive hero (base) ---------- */
.vwt-pa-hero {
    background: #f3f7fb;
}

.vwt-pa-hero-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 30px;
    align-items: center;
    padding: var(--space-3) 0 var(--space-1);
}

.vwt-pa-hero-text {
    padding: 0 0 0 40px;
}

.vwt-pa-hero-img {
    position: relative;
}
.vwt-pa-hero-img img {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}
.vwt-pa-hero-img::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, #f3f7fb 0%, rgba(243, 247, 251, 0) 25%);
    pointer-events: none;
}

.vwt-pa-hero h1 {
    margin: 0 0 12px;
    font-size: 44px;
    line-height: 1.1;
    color: var(--color-primary);
}

.vwt-pa-sub {
    margin: 0 0 24px;
    font-size: 17px;
    color: var(--text-dark);
}
/* Paragraphs jo wpautop() se .vwt-pa-sub ke andar aate hain */
.vwt-pa-sub p {
    margin: 0 0 1em;
}
.vwt-pa-sub p:last-child {
    margin-bottom: 0;
}


/* ---------- Category hero (modifier: .vwt-pa-hero--category) ---------- */
.vwt-pa-hero--category {
    padding: var(--space-2) 0 var(--space-3);
    background: linear-gradient(180deg, #e8f1fb 0%, var(--color-secondary) 100%);
}
.vwt-pa-hero--category .vwt-pa-hero-grid {
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-6);
}

.vwt-pa-hero-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.vwt-pa-hero-left h1 {
    margin: 0 0 var(--space-3);
    font-size: clamp(34px, 4.2vw, 56px);
    line-height: 1.12;
    font-weight: var(--fw-bold);
    color: var(--color-primary);
}
.vwt-pa-hero-left .vwt-pa-sub {
    max-width: 600px;
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--text-muted);
}

.vwt-pa-hero-form {
    width: 100%;
    max-width: 435px;
    margin-left: auto;
    padding: var(--space-2) 30px;
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(26, 60, 101, 0.14);
}


/* ==========================================================================
   3. ARCHIVE PAGE
   ========================================================================== */

/* ---------- Layout: sidebar + main ---------- */
.vwt-pa-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 26px;
    align-items: start;
    padding: 25px 0;
}

/* ---------- Sidebar ---------- */
.vwt-pa-side-box {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.vwt-pa-side-box > h3 {
    margin: 0;
    padding: 16px 18px;
    background: var(--color-primary);
    color: #fff;
    font-size: 17px;
}
.vwt-pa-side-box ul {
    margin: 0;
    padding: 6px 10px;
    list-style: none;
}
.vwt-pa-side-box li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    color: #333;
    text-decoration: none;
    font-size: 14px;
}
.vwt-pa-side-box li:last-child a {
    border: 0;
}
.vwt-pa-side-box li.active a,
.vwt-pa-side-box li a:hover {
    background: #e6f0fb;
    color: var(--color-primary);
    border-radius: 6px;
}
.vwt-pa-side-box em {
    padding: 3px 10px;
    background: #eef1f5;
    border-radius: 20px;
    font-style: normal;
    font-size: 12px;
}

.vwt-pa-help {
    margin: 10px;
    padding: 16px;
    background: #f7f9fc;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.vwt-pa-help h4 {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--color-primary);
}
.vwt-pa-help p {
    margin: 0 0 14px;
    font-size: 13px;
}

/* ---------- Search ---------- */
.vwt-pa-search input {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 22px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
}

/* ---------- Shared card base (archive + product cards) ---------- */
.vwt-pa-card,
.vwt-pc-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
    transition: transform .25s, box-shadow .25s;
}
.vwt-pa-card:hover,
.vwt-pa-card:focus-within,
.vwt-pc-card:hover,
.vwt-pc-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(13, 74, 143, .15);
}

/* ---------- Category cards ---------- */
.vwt-pa-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.vwt-pa-card-img {
    position: relative;
    height: 200px;
    background: #e8eef5;
}
.vwt-pa-card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vwt-pa-badge {
    position: absolute;
    left: 16px;
    bottom: -22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--c);
    color: #fff;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}
/* Badge icon crop na ho */
.vwt-pa-card-img .vwt-pa-badge img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.vwt-pa-card-body {
    flex: 1;
    padding: 32px 16px 12px;
}
.vwt-pa-card-body h3 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.25;
    color: var(--color-primary);
}
.vwt-pa-card-body p {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.55;
}

.vwt-pa-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
}
.vwt-pa-tags li::before {
    content: "\2713";
    margin-right: 5px;
    color: var(--c);
    font-weight: 700;
}

.vwt-pa-card-foot {
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}
.vwt-pa-card-foot a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Trust strip ---------- */
.vwt-pa-trust {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 18px;
    background: linear-gradient(90deg, var(--color-primary), #123d82);
    color: var(--white);
    font-size: 16px;
    text-align: center;
}

/* ---------- Bottom (FAQ) ---------- */
.vwt-pa-bottom {
    margin-bottom: 40px;
}


/* ==========================================================================
   4. CATEGORY PAGE
   ========================================================================== */

/* Layout (archive ke 2-column ko 1 column me badalta hai) */
.vwt-pa-layout-top {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 30px;
}

.vwt-pa-section-title {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-h3);
    color: var(--color-primary);
}

/* ---------- Left image + right cards ---------- */
.vwt-pa-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}
.vwt-pa-split.has-side-image {
    grid-template-columns: 340px minmax(0, 1fr);
}

.vwt-pa-split__img {
    position: sticky;
    top: calc(var(--header-height, 80px) + 60px);
    overflow: hidden;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.vwt-pa-split__img img {
    display: block;
    width: 100%;
    height: auto;
}

.vwt-pa-split__cards {
    min-width: 0;
}
.vwt-pa-split.has-side-image .vwt-pc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Product cards ---------- */
.vwt-pc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.vwt-pc-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 210px;
    padding: 16px;
    background: radial-gradient(circle at center, #fff 0%, #dce6f0 100%);
}
.vwt-pc-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

.vwt-pc-body {
    flex: 1;
    padding: 16px;
    text-align: center;
}
.vwt-pc-body h3 {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.3;
}
.vwt-pc-body h3 a {
    color: var(--color-primary);
    text-decoration: none;
}
.vwt-pc-body p {
    font-size: 13.5px;
    line-height: 1.55;
}

.vwt-pc-link {
    display: block;
    padding: 13px;
    text-align: center;
    text-decoration: none;
    border-top: 1px solid var(--border);
    background: var(--color-primary);
    color: var(--white);
    font-size: var(--fs-sm);
    transition: background-color .25s;
}
.vwt-pc-link:hover {
    background: var(--color-accent);
    color: var(--white);
}

/* ---------- CTA ---------- */
.vwt-pa-cta {
    padding: 24px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 8px;
}
.vwt-pa-cta h3 {
    margin: 0 0 10px;
    font-size: var(--fs-h2);
    color: #fff;
}
.vwt-pa-cta p {
    margin: 0 0 10px;
    font-size: var(--fs-base);
}

.vwt-pa-cta-wide {
    margin: 40px 0;
    text-align: center;
}
.vwt-pa-cta-wide .btn-white {
    display: inline-block;
    padding: 12px 32px;
}


/* ==========================================================================
   5. ACCESSIBILITY + MOTION
   ========================================================================== */
.vwt-pa a:focus-visible,
.vwt-pa input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.vwt-pc-link:focus-visible,
.btn-fill:focus-visible {
    outline-color: var(--color-accent, #f08a24);
}

@media (prefers-reduced-motion: reduce) {
    .vwt-pa-card,
    .vwt-pc-card,
    .vwt-pc-link {
        transition: none;
    }
    .vwt-pa-card:hover,
    .vwt-pa-card:focus-within,
    .vwt-pc-card:hover,
    .vwt-pc-card:focus-within {
        transform: none;
    }
}


/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .vwt-pa-layout { grid-template-columns: 1fr; }
    .vwt-pa-cards  { grid-template-columns: repeat(2, 1fr); }
    .vwt-pa-trust  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
    .vwt-pa-hero-grid,
    .vwt-pa-hero--category .vwt-pa-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    .vwt-pa-hero-form { margin: 0 auto; }

    .vwt-pc-grid { grid-template-columns: repeat(2, 1fr); }

    .vwt-pa-split.has-side-image { grid-template-columns: 1fr; }
    .vwt-pa-split__img {
        position: static;
        max-width: 420px;
    }
}

@media (max-width: 768px) {
    .vwt-pa-hero h1 { font-size: 30px; }
    .vwt-pa-cards   { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .vwt-pa-hero { padding: var(--space-3) 0 var(--space-5); }
    .vwt-pa-hero-form { padding: var(--space-3) 20px; }

    .vwt-pc-grid,
    .vwt-pa-split.has-side-image .vwt-pc-grid { grid-template-columns: 1fr; }
}