/* ==========================================================================
   Key Features Block — key-features.css
   Child theme: shoptimizer-child
   Browser support: Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+, iOS 10.3+
   ========================================================================== */



/* Header bar + title */
.wc-key-features__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 1.5rem;
}



.wc-key-features__header-bar {
    width: 4px;
    height: 1.1em;
    background: #1845b8;
    border-radius: 2px;
    margin-right: .75rem;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}



.wc-key-features__title {
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    margin: 0;
}



/* Intro paragraph */
.wc-key-features__intro {
    font-size: 1rem;
    font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
    color: #5a5a5a;
    margin-top: 0;
    margin-bottom: 2rem;
    max-width: 65ch;
    line-height: 1.7;
}



/* Grid */
.wc-key-features__grid {
    display: -ms-grid;
    display: grid;
    width: 100%;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1rem;
}



.wc-key-features__grid.kf-cols-2 {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: repeat(2, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}



.wc-key-features__grid.kf-cols-3 {
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}



.wc-key-features__grid.kf-cols-4 {
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: repeat(4, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}



/* Card */
.wc-feature-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: 1rem;
    padding: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: .75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
    -webkit-transition: box-shadow 180ms, -webkit-transform 180ms;
            transition: box-shadow 180ms, transform 180ms;
    box-sizing: border-box;
}



.wc-feature-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
    -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
            transform: translateY(-2px);
}



/* Icon */
.wc-feature-card__icon {
    color: #ef6c00;
    width: 50px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}



.wc-feature-card__icon svg {
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    overflow: visible;
    display: block;
}


.wc-feature-card__icon svg path,
.wc-feature-card__icon svg circle,
.wc-feature-card__icon svg rect,
.wc-feature-card__icon svg line,
.wc-feature-card__icon svg polyline,
.wc-feature-card__icon svg polygon {
    fill: none;
}



/* PNG / WebP / SVG-as-img icon — matches inline SVG sizing */
.wc-feature-card__icon-img {
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    display: block;
    -o-object-fit: contain;
       object-fit: contain;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}



/* Text */
.wc-feature-card__name {
    font-size: .9375rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin: 0;
}



.wc-feature-card__desc {
    font-size: .8125rem;
    color: #5a5a5a;
    line-height: 1.6;
    margin: 0;
}



/* List (multi-line descriptions) */
.wc-feature-card__list {
    margin: 0;
    padding-left: 1.1rem;
    list-style: disc;
}



.wc-feature-card__list li {
    font-size: 0.9375rem;
    color: #5a5a5a;
    line-height: 1.7;
    padding-left: .2rem;
}



/* gap fallback for flex cards — Safari < 14.1 */
.wc-feature-card > * + * {
    margin-top: .75rem;
}
@supports (gap: 1rem) {
    .wc-feature-card > * + * {
        margin-top: 0;
    }
}



/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wc-feature-card {
        -webkit-transition: none;
                transition: none;
    }
    .wc-feature-card:hover {
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }
}



/* ── Mobile: single column ───────────────────────────────────── */
@media (max-width: 767px) {
    .wc-key-features__grid,
    .wc-key-features__grid.kf-cols-2,
    .wc-key-features__grid.kf-cols-3,
    .wc-key-features__grid.kf-cols-4 {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }



    .wc-feature-card {
        padding: 1rem;
    }
}



/* ==========================================================================
   Product Page — Global H2 header-bar style
   Applies to all H2 headings inside WooCommerce product tab panels
   ========================================================================== */



.woocommerce-Tabs-panel h2,
.woocommerce-tabs .panel h2,
.single-product .entry-content h2,
.woocommerce-product-details__short-description h2,
.commercekit-Tabs-panel h2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 1.25rem;
}



.woocommerce-Tabs-panel h2::before,
.woocommerce-tabs .panel h2::before,
.single-product .entry-content h2::before,
.woocommerce-product-details__short-description h2::before,
.commercekit-Tabs-panel h2::before {
    content: "";
    display: inline-block;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    width: 4px;
    height: 1.1em;
    background: #1845b8;
    border-radius: 2px;
    margin-right: .65rem;
    -webkit-align-self: center;
        -ms-flex-item-align: center;
            align-self: center;
}



/* Exclude .wc-key-features__title — already has its own bar div */
.wc-key-features__title::before {
    display: none !important;
}