/* =============================================
   JVS DECKING WIDGETS — Responsive CSS v2.0
   Covers all decking + product page widgets
   ============================================= */

/* ── Full-width breakout ── */
.jvs-hero-fw,.jvs-sg-fw,.jvs-ss-fw,.jvs-std-fw,.jvs-store-fw,.jvs-spec-fw,.jvs-uc-fw,
.jvs-phv2-fw,.jvs-ic-fw,.jvs-fc-fw,.jvs-sc2-fw,.jvs-sb-fw,.jvs-cs-fw,.jvs-jc-fw,.jvs-nl-fw,.jvs-ctav2-fw {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    box-sizing: border-box;
}

/* ── Elementor parent overflow ── */
.elementor-widget:has(.jvs-hero-fw),.elementor-widget:has(.jvs-sg-fw),.elementor-widget:has(.jvs-ss-fw),
.elementor-widget:has(.jvs-std-fw),.elementor-widget:has(.jvs-store-fw),.elementor-widget:has(.jvs-spec-fw),
.elementor-widget:has(.jvs-uc-fw),.elementor-widget:has(.jvs-phv2-fw),.elementor-widget:has(.jvs-ic-fw),
.elementor-widget:has(.jvs-fc-fw),.elementor-widget:has(.jvs-sc2-fw),.elementor-widget:has(.jvs-sb-fw),
.elementor-widget:has(.jvs-cs-fw),.elementor-widget:has(.jvs-jc-fw),.elementor-widget:has(.jvs-nl-fw),
.elementor-widget:has(.jvs-ctav2-fw) {
    overflow: visible !important;
}
.elementor-widget:has(.jvs-hero-fw) .elementor-widget-container,
.elementor-widget:has(.jvs-sg-fw) .elementor-widget-container,
.elementor-widget:has(.jvs-ss-fw) .elementor-widget-container,
.elementor-widget:has(.jvs-std-fw) .elementor-widget-container,
.elementor-widget:has(.jvs-store-fw) .elementor-widget-container,
.elementor-widget:has(.jvs-spec-fw) .elementor-widget-container,
.elementor-widget:has(.jvs-uc-fw) .elementor-widget-container,
.elementor-widget:has(.jvs-phv2-fw) .elementor-widget-container,
.elementor-widget:has(.jvs-ic-fw) .elementor-widget-container,
.elementor-widget:has(.jvs-fc-fw) .elementor-widget-container,
.elementor-widget:has(.jvs-sc2-fw) .elementor-widget-container,
.elementor-widget:has(.jvs-sb-fw) .elementor-widget-container,
.elementor-widget:has(.jvs-cs-fw) .elementor-widget-container,
.elementor-widget:has(.jvs-jc-fw) .elementor-widget-container,
.elementor-widget:has(.jvs-nl-fw) .elementor-widget-container,
.elementor-widget:has(.jvs-ctav2-fw) .elementor-widget-container {
    overflow: visible !important;
}

/* ── Inner wrapper default padding ── */
.jvs-inner { padding: 30px 28px; box-sizing: border-box; }
.jvs-hero-inner { padding: 40px 28px 35px; }

/* ═══════════════════════════════════
   GRID DEFAULTS (desktop)
   ═══════════════════════════════════ */
.jvs-sg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.jvs-sg-grid[data-cols="1"] { grid-template-columns: 1fr; }
.jvs-ss-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.jvs-std-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.jvs-std-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.jvs-std-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.jvs-store-grid { display: grid; grid-template-columns: 1fr 320px; }
.jvs-uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.jvs-uc-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.jvs-uc-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.jvs-spec-row { display: grid; }

/* New widget grids */
.jvs-ic-grid { display: grid; gap: 24px; }
.jvs-ic-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.jvs-ic-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.jvs-ic-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.jvs-sc2-grid { display: grid; gap: 20px; }
.jvs-sc2-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.jvs-sc2-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.jvs-sc2-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.jvs-nl-grid { display: grid; gap: 20px; }
.jvs-nl-grid[data-cols="1"] { grid-template-columns: 1fr; }
.jvs-nl-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.jvs-nl-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }

/* ── Hover effects ── */
.jvs-sg-card { transition: box-shadow .25s, transform .2s; }
.jvs-sg-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.12); transform: translateY(-3px); }
.jvs-ic-card:hover { border-color: #C48B6E !important; transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.jvs-ic-card:hover > div:first-child { transform: scaleX(1) !important; }
.jvs-sc2-card:hover { border-color: #C48B6E !important; transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.jvs-sc2-card:hover img { transform: scale(1.08); }
.jvs-nl-card:hover { border-color: #C48B6E !important; }
.jvs-fc-item:hover { background: #161616; border-color: #2E2420 !important; }

/* ── Hero ── */
.jvs-hero { overflow: hidden; }
.jvs-hero h1 { word-wrap: break-word; overflow-wrap: break-word; }
.jvs-phv2 { overflow: hidden; }
.jvs-phv2 h1 { word-wrap: break-word; overflow-wrap: break-word; }

/* ═══════════════════════════════════
   TABLET (max 1024px)
   ═══════════════════════════════════ */
@media (max-width: 1024px) {
    /* Existing widgets */
    .jvs-sg-grid { grid-template-columns: 1fr !important; }
    .jvs-ss-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .jvs-std-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .jvs-store-grid { grid-template-columns: 1fr !important; }
    .jvs-uc-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* New widgets */
    .jvs-phv2-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
    .jvs-phv2-grid > div:last-child { order: -1; }
    .jvs-ic-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .jvs-fc-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
    .jvs-sc2-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .jvs-cs-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
    .jvs-jc-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
    .jvs-sb-inner { justify-content: flex-start !important; gap: 24px !important; }
}

/* ═══════════════════════════════════
   MOBILE (max 768px)
   ═══════════════════════════════════ */
@media (max-width: 768px) {
    .jvs-inner { padding-left: 20px !important; padding-right: 20px !important; }

    /* Hero V1 */
    .jvs-hero h1 { font-size: 30px !important; }
    .jvs-hero-desc { font-size: 14px !important; }
    .jvs-hero-stats { gap: 20px !important; }
    .jvs-hero-stat-num { font-size: 24px !important; }
    .jvs-hero-tag { font-size: 11px !important; padding: 5px 12px !important; }
    .jvs-hero-btn { padding: 10px 20px !important; font-size: 13px !important; }
    .jvs-hero-eyebrow { font-size: 10px !important; }

    /* Hero V2 */
    .jvs-phv2-heading { font-size: 28px !important; }
    .jvs-phv2-sub { font-size: 14px !important; }
    .jvs-phv2-stat-num { font-size: 24px !important; }
    .jvs-phv2-btn { padding: 12px 24px !important; font-size: 13px !important; }

    /* Species Grid */
    .jvs-sg-heading { font-size: 24px !important; }
    .jvs-sg-header { flex-direction: column !important; align-items: flex-start !important; }
    .jvs-sg-card-img { height: 200px !important; }
    .jvs-sg-card-body { padding: 18px 16px 16px !important; }

    /* Stats */
    .jvs-ss-heading { font-size: 24px !important; }
    .jvs-ss-num { font-size: 26px !important; }

    /* Standards */
    .jvs-std-heading { font-size: 24px !important; }

    /* Store CTA */
    .jvs-store-heading { font-size: 24px !important; }

    /* Spec Table */
    .jvs-spec-heading { font-size: 22px !important; }
    .jvs-spec-row { grid-template-columns: 1fr !important; }
    .jvs-spec-key { padding-bottom: 2px !important; }
    .jvs-spec-val { padding-top: 2px !important; }

    /* Use Cases */
    .jvs-uc-heading { font-size: 22px !important; }
    .jvs-uc-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Icon Cards */
    .jvs-ic-heading { font-size: 24px !important; }
    .jvs-ic-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Features Checklist */
    .jvs-fc-heading { font-size: 24px !important; }
    .jvs-fc-visual { aspect-ratio: 16/9 !important; }

    /* Species Cards V2 */
    .jvs-sc2-heading { font-size: 24px !important; }
    .jvs-sc2-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .jvs-sc2-img { height: 160px !important; }

    /* Content Split */
    .jvs-cs-heading { font-size: 24px !important; }

    /* Janka Chart */
    .jvs-jc-heading { font-size: 22px !important; }
    .jvs-jc-label { width: 80px !important; font-size: .75rem !important; }

    /* Numbered List */
    .jvs-nl-heading { font-size: 24px !important; }
    .jvs-nl-grid { grid-template-columns: 1fr !important; }

    /* CTA V2 */
    .jvs-ctav2-heading { font-size: 24px !important; }
    .jvs-ctav2-btns { flex-direction: column; align-items: center; }
    .jvs-ctav2-btn { width: 100%; max-width: 320px; justify-content: center; box-sizing: border-box; }
    .jvs-ctav2-strip { flex-direction: column; align-items: center !important; gap: 16px !important; }

    /* Spec Bar */
    .jvs-sb-inner { flex-direction: column; align-items: flex-start !important; gap: 16px !important; }
}

/* ═══════════════════════════════════
   SMALL MOBILE (max 480px)
   ═══════════════════════════════════ */
@media (max-width: 480px) {
    .jvs-inner { padding-left: 16px !important; padding-right: 16px !important; }

    /* Hero V1 */
    .jvs-hero h1 { font-size: 26px !important; }
    .jvs-hero-stats { flex-direction: column; gap: 14px !important; }
    .jvs-hero-tags { gap: 6px !important; }
    .jvs-hero-btn { width: 100%; justify-content: center; box-sizing: border-box; }

    /* Hero V2 */
    .jvs-phv2-heading { font-size: 24px !important; }
    .jvs-phv2-btn { width: 100%; justify-content: center; box-sizing: border-box; }
    .jvs-phv2-img { aspect-ratio: 16/9 !important; }

    /* All grids 1 column */
    .jvs-sg-grid,.jvs-ss-grid,.jvs-std-grid,.jvs-uc-grid,
    .jvs-ic-grid,.jvs-sc2-grid,.jvs-nl-grid { grid-template-columns: 1fr !important; }

    /* Buttons full width */
    .jvs-store-btn,.jvs-phv2-btn,.jvs-ctav2-btn { width: 100%; justify-content: center; text-align: center; box-sizing: border-box; }

    /* Features checklist items compact */
    .jvs-fc-item { padding: 12px !important; gap: 12px !important; }

    /* Janka chart stacked */
    .jvs-jc-label { width: 70px !important; }
    .jvs-jc-score { width: 35px !important; }
}