.product-hero {
    padding: 0;
    background-color: #ffffff;
    overflow: hidden;
}

.product-hero.start .product-hero-content {
    justify-content: flex-start;
}


.product-hero.bg-white {
    background-color: #ffffff;
}

.product-hero.bg-grey {
    background-color: #F0F0F0;
}

.product-hero-container {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.product-hero-grid {
    display: grid;
    grid-template-columns: 0.96fr 1.04fr;
    gap: 0;
    align-items: stretch;
}

.product-hero-grid.is-layout-image-right {
    grid-template-columns: 1.04fr 0.96fr;
}

.product-hero-image-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(var(--space) * 60);
    padding-bottom: calc(var(--space) * 60);
    box-sizing: border-box;
}

.product-hero-grid.is-layout-image-right .product-hero-content {
    padding-left: calc(max(calc(var(--space) * 10), calc((100vw - var(--size)) / 2 + var(--space) * 10)));
    padding-right: calc(var(--space) * 30);
}

.product-hero-grid:not(.is-layout-image-right) .product-hero-content {
    padding-right: calc(max(calc(var(--space) * 10), calc((100vw - var(--size)) / 2 + var(--space) * 10)));
    padding-left: calc(var(--space) * 30);
}

.editor-styles-wrapper .product-hero-grid.is-layout-image-right .product-hero-content {
    padding-left: calc(var(--space) * 10) !important;
    padding-right: calc(var(--space) * 10) !important;
}

.editor-styles-wrapper .product-hero-grid:not(.is-layout-image-right) .product-hero-content {
    padding-left: calc(var(--space) * 10) !important;
    padding-right: calc(var(--space) * 10) !important;
}

.product-hero-subtitle {
    display: block;
    font-size: var(--fs-14, 0.875rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1d9b18;
    /* Branded green */
    margin-bottom: calc(var(--space) * 8);
}

.single-content h2.product-hero-title,
.editor-styles-wrapper .block-editor-block-list__layout h2.product-hero-title,
.single-content h1.product-hero-title,
.editor-styles-wrapper .block-editor-block-list__layout h1.product-hero-title,
.product-hero-title {
    font-size: var(--fs-48);
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 calc(var(--space) * 8) 0;
}

.product-hero-title {
    color: var(--cl-black);
}

.product-hero-desc {
    font-size: var(--fs-18);
    color: var(--cl-grey-dark);
    line-height: 1.444444444;
    margin-bottom: calc(var(--space) * 12);
}

.product-hero-badge {
    margin: 24px 0;
    border-left: 3px solid #1D9B18;
    background: linear-gradient(to right, rgba(29, 155, 24, 0.08), rgba(29, 155, 24, 0));
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
}

.product-hero-badge-number {
    font-size: var(--fs-44);
    font-weight: 500;
    color: #1D9B18;
    line-height: 1.2;
    margin-bottom: calc(var(--space) * 6);
}

.product-hero-badge-label {
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--cl-black);
    text-transform: uppercase;
}

.single-content ul.product-hero-list,
.single-content ol.product-hero-list,
.product-hero-list {
    list-style-type: disc;
    margin: 0 0 calc(var(--space) * 20) calc(var(--space) * 12);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-hero-item {
    font-size: var(--fs-18);
    line-height: 1.5;
    color: var(--cl-black-darked);
}

.product-hero-btn-wrap {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: calc(var(--space) * 12);
    align-items: flex-start;
    width: 100%;
    max-width: 23rem;
}

.product-hero-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background-color: #00cc11;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 9999px;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 204, 17, 0.2);
    text-align: center;
}

.product-hero-btn:hover {
    background-color: #00ad0e;
    box-shadow: 0 6px 18px rgba(0, 204, 17, 0.3);
    transform: translateY(-1px);
}

.product-hero-btn--download {
    background-color: transparent;
    color: #00cc11;
    border: 1px solid #00cc11;
    box-shadow: none;
}

.product-hero-btn--download:hover {
    background-color: #00cc11;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 204, 17, 0.2);
    transform: translateY(-1px);
}

.product-hero.bg-green {
    background-color: var(--cl-green, #2D8C38);
}

.product-hero.bg-green .product-hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

.product-hero.bg-green .product-hero-title {
    color: #ffffff;
}

.product-hero.bg-green .product-hero-desc {
    color: rgba(255, 255, 255, 0.8);
}

.product-hero.bg-green .product-hero-item {
    color: #ffffff;
}

.product-hero.bg-green .product-hero-badge {
    border-left: 3px solid #00cc11;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 204, 17, 0.15)), to(rgba(0, 204, 17, 0)));
    background: -webkit-linear-gradient(left, rgba(0, 204, 17, 0.15), rgba(0, 204, 17, 0));
    background: linear-gradient(to right, rgba(0, 204, 17, 0.15), rgba(0, 204, 17, 0));
}

.product-hero.bg-green .product-hero-badge-number {
    color: #ffffff;
}

.product-hero.bg-green .product-hero-badge-label {
    color: #ffffff;
}

.product-hero.bg-green .product-hero-btn {
    background-color: #00cc11;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-hero.bg-green .product-hero-btn:hover {
    background-color: #00ad0e;
    color: #ffffff;
}

.product-hero.bg-green .product-hero-btn--download {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    box-shadow: none;
}

.product-hero.bg-green .product-hero-btn--download:hover {
    background-color: #ffffff;
    color: var(--cl-green, #2D8C38);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media (min-width: 992px) {
    .product-hero-grid.is-layout-image-right .product-hero-image-wrap {
        grid-column: 2;
    }

    .product-hero-grid.is-layout-image-right .product-hero-content {
        grid-column: 1;
        grid-row: 1;
    }
}

@media (max-width: 991px) {
    .product-hero {
        padding: 0;
    }


    .product-hero-container {
        max-width: var(--size);
        padding: 0;
        margin: 0 auto;
    }

    .product-hero.start {
        padding: calc(var(--space) * 30) 0;
    }

    .product-hero.start .product-hero-container {
        padding: 0 calc(var(--space) * 8);
    }

    .product-hero.start .product-hero-content {
        padding: 0 !important;
        order: 1;
    }

    .product-hero.start .product-hero-image-wrap {
        order: 2;
    }

    .product-hero-grid,
    .product-hero-grid.is-layout-image-right {
        grid-template-columns: 1fr;
        gap: calc(var(--space) * 20);
    }

    .product-hero-image-wrap {
        height: auto;
    }

    .product-hero-img {
        height: auto;
    }

    .product-hero-content {
        padding: 0 calc(var(--space) * 10) calc(var(--space) * 20) calc(var(--space) * 10) !important;
    }

    .product-hero-subtitle {
        font-size: var(--fs-12);
        margin-bottom: calc(var(--space) * 8);
    }

    .product-hero-desc {
        font-size: var(--fs-16);
    }

    .single-content h2.product-hero-title,
    .editor-styles-wrapper .block-editor-block-list__layout h2.product-hero-title,
    .single-content h1.product-hero-title,
    .editor-styles-wrapper .block-editor-block-list__layout h1.product-hero-title,
    .product-hero-title {
        font-size: var(--fs-32);
    }
}

/* Editor Mobile/Tablet Preview Fallbacks */
.is-mobile-preview .product-hero-grid,
.is-mobile-preview .product-hero-grid.is-layout-image-right,
.is-tablet-preview .product-hero-grid,
.is-tablet-preview .product-hero-grid.is-layout-image-right {
    grid-template-columns: 1fr !important;
    gap: calc(var(--space) * 20) !important;
}

.is-mobile-preview .product-hero-image-wrap,
.is-tablet-preview .product-hero-image-wrap {
    height: auto !important;
}

.is-mobile-preview .product-hero-img,
.is-tablet-preview .product-hero-img {
    height: auto !important;
}

.is-mobile-preview .product-hero-content,
.is-tablet-preview .product-hero-content {
    padding: 0 !important;
}