/* ============================================================
   BACKYARD BLENDZ
   HOME V2
   ============================================================

   CONTENT ORDER

   01. Page shell
   02. Hero
   03. Trust strip
   04. Choose Your Flavour
   05. Core range
   06. Value packs
   07. Why BackYard Blendz
   08. BYB Engage signup
   09. Tablet
   10. Mobile

   ============================================================ */


/* ============================================================
   01. PAGE SHELL
   ============================================================ */

.elementor-2027 .section-pad > .e-con-inner {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
}


/* ============================================================
   02. HERO
   ============================================================ */

/*
 * Elementor inserts .e-con-inner between the hero container
 * and the two child columns. Control that wrapper directly.
 */

.byb-home-hero > .e-con-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 3.5rem;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
}

/* Override Elementor column widths now that CSS Grid owns layout */
.byb-home-hero > .e-con-inner > .e-con {
    width: 100% !important;
    max-width: none !important;
}


/* Hero eyebrow */
.byb-home-hero .bb-overline .elementor-heading-title {
    color: var(--bb-green) !important;
}


/* Conversion headline */
.byb-home-hero h1.elementor-heading-title {
    font-family: var(--font-heading) !important;
    font-size: clamp(2.6rem, 4vw, 3.4rem) !important;
    font-weight: var(--fw-bold) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.015em !important;
    text-transform: none !important;
    color: var(--bb-charcoal) !important;
    margin-bottom: var(--space-3) !important;
    max-width: 620px;
}


/* Supporting copy */
.byb-hero-copy {
    max-width: 590px;
}

.byb-hero-copy p {
    color: #666;
    font-size: var(--text-md);
    line-height: var(--lh-relaxed);
    margin-bottom: 0;
}


/* Product proof beneath CTA */
.byb-hero-proof {
    margin-top: var(--space-2);
}

.byb-hero-proof p {
    color: #777;
    font-size: var(--text-sm);
    line-height: 1.6;
    margin: 0;
}

.byb-hero-proof strong {
    color: var(--bb-charcoal);
}


/* Hero product visual */
.byb-home-hero .elementor-widget-image img {
    width: 100%;
    height: auto;
}


/* ============================================================
   03. TRUST STRIP
   ============================================================ */

.byb-home-trust > .e-con-inner {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;

    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: var(--space-4);
}

.byb-home-trust .elementor-heading-title {
    margin: 0 !important;
    text-align: center;
}


/* ============================================================
   04. CHOOSE YOUR FLAVOUR
   ============================================================ */

/* Parent containing both cards */
.elementor-2027 .byb-flavour-card {
    height: 100%;
}


/*
 * Critical:
 * the actual content is inside Elementor's .e-con-inner,
 * so that wrapper must become the flex column.
 */
.byb-flavour-card > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
}


/* Remove card padding around image so it can run edge to edge */
.byb-flavour-card {
    overflow: hidden;
}


/* Category imagery */
.byb-flavour-card__image {
    margin:
            calc(var(--space-8) * -1)
            calc(var(--space-8) * -1)
            var(--space-6);
}

.byb-flavour-card__image img {
    display: block;
    width: 100%;
    height: 245px;
    object-fit: cover;
}


/* Allow copy to consume flexible middle space */
.byb-flavour-card .elementor-widget-text-editor {
    flex: 1;
}


/* Force both CTAs to same baseline */
.byb-flavour-card__cta {
    margin-top: auto !important;
}


/* ============================================================
   05. CORE RANGE
   ============================================================ */

/*
 * The previous grid rule targeted the outer Elementor container.
 * The five mini cards actually sit inside its .e-con-inner.
 */

.byb-flavour-strip > .e-con-inner {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--space-4);

    width: 100% !important;
    max-width: none !important;
}


/* Remove Elementor percentage widths */
.byb-flavour-strip .byb-flavour-mini {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}


/* Individual flavour card */
.byb-flavour-mini {
    background: var(--el-white);
    border: 1px solid var(--bb-border);
    border-radius: var(--radius-lg);
    text-align: center;
    padding: var(--space-4);

    transition:
            transform var(--transition-base),
            box-shadow var(--transition-base),
            border-color var(--transition-base);
}

.byb-flavour-mini:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
    border-color: var(--bb-green-light);
}


/* Elementor inner wrapper */
.byb-flavour-mini > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    height: 100%;
}


/* Pack image */
.byb-flavour-mini .elementor-widget-image {
    width: 100%;
}

.byb-flavour-mini .elementor-widget-image img {
    width: 100%;
    height: 145px;
    object-fit: contain;
}


/* Flavour name */
.byb-flavour-mini h4.elementor-heading-title {
    font-family: var(--font-heading) !important;
    font-size: var(--text-lg) !important;
    font-weight: var(--fw-bold) !important;
    color: var(--bb-charcoal) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin:
            var(--space-3)
            0
            var(--space-1) !important;
}


/* Heat descriptor */
.byb-flavour-mini p {
    color: #777;
    font-size: var(--text-sm);
    margin: 0;
}


/* ============================================================
   06. VALUE PACKS
   ============================================================ */

.byb-value-pack {
    height: 100%;
    overflow: hidden;
}


/*
 * Again, Elementor puts the card content inside .e-con-inner.
 */
.byb-value-pack > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
}


/* Pack imagery */
.byb-value-pack > .e-con-inner > .elementor-widget-image img {
    width: 100%;
    height: 225px;
    object-fit: cover;
}


/* Content body */
.byb-value-pack .bb-card__body {
    flex: 1;
}


/* Inner body wrapper */
.byb-value-pack .bb-card__body > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
    padding: var(--space-5);
}


/* Product heading */
.byb-value-pack h4.elementor-heading-title {
    font-family: var(--font-heading) !important;
    font-size: var(--text-xl) !important;
    font-weight: var(--fw-bold) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--bb-charcoal) !important;
}


/* Push button to foot of card */
.byb-value-pack .bb-card__body .elementor-widget-button {
    margin-top: auto !important;
}


/* ============================================================
   07. WHY BACKYARD BLENDZ
   ============================================================ */

.bb-feature-card > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
}

.bb-feature-card h4.elementor-heading-title {
    color: var(--bb-charcoal) !important;
}

/* ============================================================
   08. BYB ENGAGE SIGNUP
   ============================================================ */

.elementor-2027 .byb-home-signup-section .bb-signup {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-6) 0;
    text-align: center;
}

.elementor-2027 .byb-home-signup-section .bb-signup-intro {
    max-width: 680px;
    margin: 0 auto var(--space-5);
    text-align: center;
}

.elementor-2027 .byb-home-signup-section .bb-signup-icon {
    display: inline-block;
    margin-bottom: var(--space-2);
}

.elementor-2027 .byb-home-signup-section .bb-signup-eyebrow {
    display: block;
    margin-bottom: var(--space-2);

    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;

    color: var(--bb-green) !important;
}

.elementor-2027 .byb-home-signup-section .bb-signup .bb-signup-heading {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    font-family: var(--font-heading) !important;
    font-size: clamp(2rem, 3vw, 2.75rem) !important;
    font-weight: var(--fw-bold) !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;

    color: var(--bb-charcoal) !important;
    -webkit-text-fill-color: var(--bb-charcoal) !important;

    margin: 0 0 var(--space-2) !important;
}

.elementor-2027 .byb-home-signup-section .bb-signup-body {
    color: #777 !important;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
    margin: 0;
}

.elementor-2027 .byb-home-signup-section .bb-signup-form {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.elementor-2027
.byb-home-signup-section
#nf-form-2-cont
.nf-form-fields-required {
    display: none !important;
}

.elementor-2027
.byb-home-signup-section
#nf-field-12-container
.nf-field-label {
    display: none !important;
}

.elementor-2027
.byb-home-signup-section
#nf-form-2-cont
input[type="email"].ninja-forms-field {
    display: block !important;
    width: 100% !important;
    min-height: 50px !important;

    padding: 0.8rem 1rem !important;

    font-family: var(--font-body) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--fw-regular) !important;

    color: var(--bb-charcoal) !important;
    -webkit-text-fill-color: var(--bb-charcoal) !important;
    caret-color: var(--bb-charcoal) !important;

    background: var(--el-white) !important;

    border: 1.5px solid var(--bb-border) !important;
    border-radius: var(--radius-md) !important;

    opacity: 1 !important;
}

.elementor-2027
.byb-home-signup-section
#nf-form-2-cont
input[type="email"].ninja-forms-field::placeholder {
    color: #999 !important;
    -webkit-text-fill-color: #999 !important;
    opacity: 1 !important;
}

.elementor-2027
.byb-home-signup-section
#nf-form-2-cont
.email-container
.nf-field-label label {
    color: #666 !important;
}

.elementor-2027
.byb-home-signup-section
#nf-form-2-cont
input[type="email"].ninja-forms-field:focus {
    border-color: var(--bb-green) !important;
    box-shadow: 0 0 0 3px rgba(47, 125, 50, 0.1) !important;
}

.elementor-2027
.byb-home-signup-section
#nf-form-2-cont
input[type="submit"].ninja-forms-field {
    width: 100% !important;
}

.elementor-2027
.byb-home-signup-section
#nf-form-2-cont {
    margin: 0;
}

/* ============================================================
   09. TABLET
   ============================================================ */

@media (max-width: 1024px) {

    /* Hero */
    .byb-home-hero > .e-con-inner {
        gap: var(--space-8);
    }

    .byb-home-hero h1.elementor-heading-title {
        font-size: clamp(2.35rem, 5vw, 2.8rem) !important;
    }


    /* Trust */
    .byb-home-trust > .e-con-inner {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--space-3);
    }


    /* Core products */
    .byb-flavour-strip > .e-con-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    .byb-flavour-card__image img {
        height: 215px;
    }


    .byb-value-pack > .e-con-inner > .elementor-widget-image img {
        height: 205px;
    }
}


/* ============================================================
   10. MOBILE
   ============================================================ */

@media (max-width: 767px) {

    /* Hero */
    .byb-home-hero > .e-con-inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .byb-home-hero h1.elementor-heading-title {
        font-size: 2.15rem !important;
        line-height: 1.08 !important;
    }

    .byb-hero-copy p {
        font-size: var(--text-base);
    }


    /* Trust */
    .byb-home-trust > .e-con-inner {
        grid-template-columns: 1fr 1fr;
    }

    .byb-home-trust .elementor-heading-title {
        font-size: var(--text-sm) !important;
    }


    /* Category cards */
    .byb-flavour-card__image img {
        height: 195px;
    }


    /* Five flavours */
    .byb-flavour-strip > .e-con-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }

    .byb-flavour-mini {
        padding: var(--space-3);
    }

    .byb-flavour-mini .elementor-widget-image img {
        height: 115px;
    }

    .byb-flavour-mini h4.elementor-heading-title {
        font-size: var(--text-base) !important;
    }


    /* Value pack cards */
    .byb-value-pack > .e-con-inner > .elementor-widget-image img {
        height: 210px;
    }


    /* Signup */
    .bb-signup-heading {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {

    .byb-flavour-card__image {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
        text-align: center;
    }

    .byb-flavour-card__image img {
        width: 96%;
        margin-inline: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
        object-position: center center;
    }
}

/* Small phones */
@media (max-width: 420px) {

    .byb-flavour-strip > .e-con-inner {
        grid-template-columns: 1fr 1fr;
    }

    .byb-home-trust > .e-con-inner {
        grid-template-columns: 1fr;
    }
}

/* Signup heading visibility */
.byb-home-signup-section .bb-signup-heading {
    color: var(--bb-charcoal) !important;
}

.byb-home-signup-section .bb-signup-heading,
.byb-home-signup-section .bb-signup-heading * {
    -webkit-text-fill-color: var(--bb-charcoal) !important;
}

.byb-home-signup-section {
    padding-top: 20px !important;
}

.byb-home-signup-section .bb-signup {
    margin-top: 0;
}