/*
 * "Verslo dovanos" — B2B gift enquiry landing page.
 *
 * Loaded only by template-parts/business-gifts.php, and every rule below is
 * scoped to #business-gifts so nothing here can reach the rest of the site.
 *
 * Colours, radii, button and input specs follow design-reference.txt. The page
 * uses no serif face: the theme is DM Sans throughout, so heading hierarchy is
 * carried by size and weight instead.
 *
 * Breakpoints match the theme: 1023px is the desktop/tablet switch, 767px the
 * mobile refinement.
 */

/* This file is only ever enqueued on this page, so the global selector is safe */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

#business-gifts {
    /* Local tints, all derived from the theme palette */
    --wl-bg-band: rgba(204, 155, 106, 0.10);   /* warm beige band, from --bg-2 */
    --wl-bg-line: rgba(72, 91, 72, 0.18);      /* hairline, from --accent-1 */
    --wl-bg-tint: rgba(72, 91, 72, 0.06);
    --wl-bg-ink: #2d261e;                      /* warm near-black, hero overlay */
    --wl-bg-pad: 72px;                         /* section rhythm */

    width: 100%;
    display: flex;
    flex-direction: column;
}

    #business-gifts .business-gifts__inner {
        margin: 0 auto;
        width: var(--inner-width);
    }

    /* Icons inherit the colour of whatever block they sit in */
    #business-gifts .business-gifts__icon {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }


/* ─────────────────────────────────────────────
   SHARED — headings, lists, buttons
   ───────────────────────────────────────────── */

#business-gifts .business-gifts__heading {
    margin-bottom: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

    #business-gifts .business-gifts__eyebrow {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--font-2);
    }

    #business-gifts .business-gifts__title {
        font-size: 36px;
        font-weight: 500;
        line-height: 1.25;
        color: var(--font-1);
    }

    #business-gifts .business-gifts__heading-sep {
        width: 100px;
        height: 2px;
        background-color: var(--accent-1);
    }

/* Checkmark lists (hero + enquiry aside) */
#business-gifts .business-gifts__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    #business-gifts .business-gifts__list > li {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        font-weight: 400;
    }

    #business-gifts .business-gifts__list .business-gifts__icon {
        width: 20px;
        height: 20px;
    }

    #business-gifts .business-gifts__list-light > li {
        color: var(--font-3);
    }

/* Buttons follow the theme spec: 48px, 2px radius, uppercase 15/600 */
#business-gifts .business-gifts__button {
    padding: 0 32px;
    width: fit-content;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 2px;
    box-shadow: var(--button-shadow);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

    #business-gifts .business-gifts__button > img {
        width: 32px;
        height: 32px;
        object-fit: contain;
    }

    /* Outlined, for use on the dark hero photo */
    #business-gifts .business-gifts__button-ghost {
        border: 1px solid rgba(255, 255, 255, 0.7);
        background-color: rgba(255, 255, 255, 0.06);
        color: var(--font-3);
    }

    #business-gifts .business-gifts__button-ghost:hover {
        border-color: var(--font-3);
        background-color: rgba(255, 255, 255, 0.16);
    }

    #business-gifts .business-gifts__button:focus-visible {
        outline: 2px solid var(--font-3);
        outline-offset: 2px;
    }


/* ─────────────────────────────────────────────
   1. HERO
   ───────────────────────────────────────────── */

#business-gifts .business-gifts__hero {
    position: relative;
    width: 100%;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

    #business-gifts .business-gifts__hero-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Warm dark wash so white text stays legible over any photo */
    #business-gifts .business-gifts__hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            100deg,
            rgba(45, 38, 30, 0.86) 0%,
            rgba(45, 38, 30, 0.68) 45%,
            rgba(45, 38, 30, 0.34) 100%
        );
    }

    #business-gifts .business-gifts__hero-inner {
        position: relative;
        z-index: 1;
        margin: 0 auto;
        padding: 72px 0;
        width: var(--inner-width);
    }

    #business-gifts .business-gifts__hero-content {
        /* Nudged in from the container edge so the copy sits away from the very
           left without drifting towards the centre. Scales with the viewport
           and stops growing on wide screens. */
        margin-left: clamp(0px, 6vw, 96px);
        max-width: 560px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    #business-gifts .business-gifts__hero-title {
        font-size: 48px;
        font-weight: 500;
        line-height: 1.1;
        color: var(--font-3);
    }

    #business-gifts .business-gifts__hero-text {
        max-width: 420px;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.88);
    }

    #business-gifts .business-gifts__hero .business-gifts__button {
        margin-top: 8px;
    }


/* ─────────────────────────────────────────────
   2. BENEFITS
   ───────────────────────────────────────────── */

#business-gifts .business-gifts__benefits {
    padding: 56px 0;
    width: 100%;
    background-color: #fff;
}

    #business-gifts .business-gifts__benefits-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px 24px;
    }

    #business-gifts .business-gifts__benefit {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
    }

    #business-gifts .business-gifts__benefit .business-gifts__icon {
        color: var(--accent-1);
    }

    #business-gifts .business-gifts__benefit-title {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--font-1);
    }

    #business-gifts .business-gifts__benefit-text {
        max-width: 260px;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.6;
        color: var(--font-2);
    }


/* ─────────────────────────────────────────────
   3. WHAT WE OFFER — product cards
   ───────────────────────────────────────────── */

/* Continues the white surface started by the benefits row, with a hairline to
   mark where one section ends and the next begins. */
#business-gifts .business-gifts__offer {
    padding: var(--wl-bg-pad) 0;
    width: 100%;
    border-top: 1px solid var(--wl-bg-line);
    background-color: #fff;
}

    /* Product names read as labels rather than headings, matching the badge and
       button treatment used elsewhere in the theme */
    #business-gifts .business-gifts__offer .business-gifts__card-title {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }


/* ─────────────────────────────────────────────
   4. GIFT SETS — ready-made combinations
   ───────────────────────────────────────────── */

/* Sits on the cream page background, between the two white card sections */
#business-gifts .business-gifts__sets {
    padding: var(--wl-bg-pad) 0;
    width: 100%;
}

    /* Set names and their one-line descriptions read as captions under the
       photo, so this row centres where the other two align left */
    #business-gifts .business-gifts__sets .business-gifts__card {
        align-items: center;
        text-align: center;
    }

    #business-gifts .business-gifts__sets .business-gifts__card-text {
        max-width: 260px;
    }

    #business-gifts .business-gifts__sets-note {
        margin: 48px auto 0;
        max-width: 640px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.6;
        text-align: center;
        color: var(--font-1);
    }


/* ─────────────────────────────────────────────
   5. CATEGORY CARDS — who the gift is for
   ───────────────────────────────────────────── */

/* Illustrated with icons rather than photos: these are audience categories, and
   a second photo grid right under the product rows read as more of the same. */
#business-gifts .business-gifts__categories {
    padding: var(--wl-bg-pad) 0;
    width: 100%;
    background-color: #fff;
}

    #business-gifts .business-gifts__categories .business-gifts__card {
        align-items: center;
        gap: 14px;
        text-align: center;
    }

    #business-gifts .business-gifts__card-icon {
        margin-bottom: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--accent-1);
    }

    #business-gifts .business-gifts__card-icon .business-gifts__icon {
        width: 40px;
        height: 40px;
    }

    #business-gifts .business-gifts__categories .business-gifts__card-title {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    #business-gifts .business-gifts__categories .business-gifts__card-text {
        max-width: 280px;
    }

    #business-gifts .business-gifts__cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    #business-gifts .business-gifts__card {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #business-gifts .business-gifts__card-image {
        margin-bottom: 4px;
        width: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border-radius: 8px;
        background-color: var(--wl-bg-tint);
    }

    #business-gifts .business-gifts__card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: var(--transition);
    }

    #business-gifts .business-gifts__card:hover .business-gifts__card-image img {
        transform: scale(1.03);
    }

    #business-gifts .business-gifts__card-title {
        font-size: 18px;
        font-weight: 500;
        color: var(--font-1);
    }

    #business-gifts .business-gifts__card-text {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.6;
        color: var(--font-2);
    }


/* ─────────────────────────────────────────────
   6. ORDERING PROCESS
   ───────────────────────────────────────────── */

#business-gifts .business-gifts__process {
    padding: var(--wl-bg-pad) 0;
    width: 100%;
    background-color: var(--wl-bg-band);
}

    /* Side padding keeps the first and last step off the container edges, so the
       row reads as evenly inset rather than running out of room on the right */
    #business-gifts .business-gifts__steps {
        list-style: none;
        padding: 0 24px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px 24px;
    }

    /* Centred columns: with left-aligned text the last step's shorter copy left
       an obvious hole at the end of the row */
    #business-gifts .business-gifts__step {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
    }

    /* Curved dashed connector, sitting in the gap at icon height. Inlined as a
       data URI so the page still adds no new files to assets/icons/. */
    #business-gifts .business-gifts__step:not(:last-child)::after {
        content: "";
        position: absolute;
        /* Sits a touch above the icons' centre line (which would be 26px): the
           curve rises to the right, so centring it optically reads low */
        top: 20px;
        left: 100%;
        margin-left: -16px;
        width: 56px;
        height: 20px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='20' viewBox='0 0 56 20' fill='none'%3E%3Cpath d='M2 14C14 4 36 7 47 11' stroke='%23cc9b6a' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='3 5'/%3E%3Cpath d='M42.7 12.7L48 11.4L44.8 7' stroke='%23cc9b6a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
    }

    #business-gifts .business-gifts__step-head {
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    #business-gifts .business-gifts__step-icon {
        width: 72px;
        height: 72px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border: 1px solid var(--border-1);
        border-radius: 50%;
        background-color: #fff;
        color: var(--accent-1);
    }

    #business-gifts .business-gifts__step-icon .business-gifts__icon {
        width: 32px;
        height: 32px;
    }

    #business-gifts .business-gifts__step-text {
        max-width: 280px;
    }

    #business-gifts .business-gifts__step-number {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--bg-2);
    }

    #business-gifts .business-gifts__step-title {
        font-size: 18px;
        font-weight: 500;
        color: var(--font-1);
    }

    #business-gifts .business-gifts__step-text {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.6;
        color: var(--font-2);
    }


/* ─────────────────────────────────────────────
   7. ENQUIRY FORM
   ───────────────────────────────────────────── */

#business-gifts .business-gifts__enquiry {
    width: 100%;
    display: grid;
    grid-template-columns: 40% 60%;
    scroll-margin-top: 24px;
}

    #business-gifts .business-gifts__enquiry-aside {
        position: relative;
        padding: 64px 48px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }

    #business-gifts .business-gifts__enquiry-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    #business-gifts .business-gifts__enquiry-aside::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            180deg,
            rgba(45, 38, 30, 0.72) 0%,
            rgba(45, 38, 30, 0.58) 100%
        );
    }

    #business-gifts .business-gifts__enquiry-aside-content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    #business-gifts .business-gifts__enquiry-title {
        font-size: 36px;
        font-weight: 500;
        line-height: 1.2;
        color: var(--font-3);
    }

    #business-gifts .business-gifts__enquiry-text {
        max-width: 380px;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.88);
    }

    #business-gifts .business-gifts__enquiry-form {
        padding: 64px 48px;
        display: flex;
        align-items: center;
        background-color: #fff;
    }

    #business-gifts .business-gifts__enquiry-form .wpcf7 {
        width: 100%;
    }


/* --- Contact Form 7 -------------------------------------------------------
   main.css strips border/background off every input and button globally, so
   each control has to be re-declared here in full. */

#business-gifts .bgf__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

    #business-gifts .bgf__field--full {
        grid-column: 1 / -1;
    }

    /* CF7 wraps each control in a span; it has to become a block to fill the cell */
    #business-gifts .wpcf7-form-control-wrap {
        display: block;
        width: 100%;
    }

    /* CF7 also runs an autop pass that puts a <p> between the wrapper div and
       the control. Neutralise it so it adds no box of its own. */
    #business-gifts .bgf__field > p,
    #business-gifts .bgf__consent > p {
        margin: 0;
    }

    #business-gifts .bgf__submit > p {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

#business-gifts .wpcf7-form input[type="text"],
#business-gifts .wpcf7-form input[type="email"],
#business-gifts .wpcf7-form input[type="tel"],
#business-gifts .wpcf7-form select,
#business-gifts .wpcf7-form textarea {
    padding: 0 16px;
    width: 100%;
    height: 48px;
    border: 1px solid var(--border-1);
    border-radius: 2px;
    background-color: #fff;
    font-family: "DM Sans", sans-serif;
    /* 16px keeps iOS Safari from zooming in on focus */
    font-size: 16px;
    font-weight: 400;
    color: var(--font-1);
    transition: var(--transition);
}

#business-gifts .wpcf7-form textarea {
    padding: 14px 16px;
    height: auto;
    min-height: 132px;
    resize: vertical;
    line-height: 1.5;
}

#business-gifts .wpcf7-form input::placeholder,
#business-gifts .wpcf7-form textarea::placeholder {
    color: var(--font-2);
    opacity: 1;
}

#business-gifts .wpcf7-form input:focus,
#business-gifts .wpcf7-form select:focus,
#business-gifts .wpcf7-form textarea:focus {
    border-color: var(--accent-1);
    box-shadow: 0 0 0 3px var(--wl-bg-tint);
    /* transparent outline keeps a focus ring in forced-colors mode */
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Native select arrow replaced with the theme icon */
#business-gifts .wpcf7-form select {
    padding-right: 44px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("../icons/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px;
    /* Muted until a real option is picked, so the first entry reads as a
       placeholder rather than an answer. Browsers without :has() simply keep
       the muted colour throughout. */
    color: var(--font-2);
    cursor: pointer;
}

#business-gifts .wpcf7-form select:has(option:not([value=""]):checked) {
    color: var(--font-1);
}

/* Consent checkbox */
#business-gifts .bgf__consent {
    margin-top: 20px;
}

    #business-gifts .bgf__consent .wpcf7-list-item {
        margin: 0;
    }

    #business-gifts .bgf__consent label {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.5;
        color: var(--font-2);
        cursor: pointer;
    }

    #business-gifts .bgf__consent input[type="checkbox"] {
        margin: 1px 0 0;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        appearance: none;
        -webkit-appearance: none;
        border: 1px solid var(--border-1);
        border-radius: 2px;
        background-color: #fff;
        cursor: pointer;
        transition: var(--transition);
    }

    #business-gifts .bgf__consent input[type="checkbox"]:checked {
        border-color: var(--accent-1);
        background-color: var(--accent-1);
    }

    /* Checkmark drawn with two borders so no extra asset is needed */
    #business-gifts .bgf__consent input[type="checkbox"]:checked::after {
        content: "";
        display: block;
        margin: 2px auto 0;
        width: 5px;
        height: 9px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    #business-gifts .bgf__consent input[type="checkbox"]:focus-visible {
        outline: 2px solid var(--accent-1);
        outline-offset: 2px;
    }

    #business-gifts .bgf__consent a {
        color: var(--font-1);
        text-decoration: underline;
    }

/* Submit */
#business-gifts .bgf__submit {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    #business-gifts .wpcf7-form input[type="submit"] {
        padding: 0 56px 0 32px;
        height: 48px;
        border: none;
        border-radius: 2px;
        background-color: var(--accent-1);
        background-image: url("../icons/arrow-right-w.svg");
        background-repeat: no-repeat;
        background-position: right 20px center;
        background-size: 22px;
        box-shadow: var(--button-shadow);
        font-family: "DM Sans", sans-serif;
        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--font-3);
        cursor: pointer;
        transition: var(--transition);
    }

    #business-gifts .wpcf7-form input[type="submit"]:hover {
        background-color: #3b4c3b;
    }

    #business-gifts .wpcf7-form input[type="submit"]:focus-visible {
        outline: 2px solid var(--font-1);
        outline-offset: 2px;
    }

/* Validation + response messages */
#business-gifts .wpcf7-not-valid-tip {
    margin-top: 6px;
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #c0392b;
}

#business-gifts .wpcf7-form .wpcf7-not-valid {
    border-color: #c0392b;
}

#business-gifts .wpcf7-response-output {
    margin: 24px 0 0;
    padding: 12px 16px;
    border: 1px solid var(--border-1);
    border-radius: 2px;
    font-size: 14px;
    line-height: 1.5;
}

#business-gifts .wpcf7-form.sent .wpcf7-response-output {
    border-color: var(--accent-1);
    background-color: var(--wl-bg-tint);
    color: var(--font-1);
}

/* CF7 signals every failure state with its own class. "unaccepted" is the one
   that fires when the consent box is left unticked, so it has to be covered
   here or that message would fall back to the plugin's yellow default. */
#business-gifts .wpcf7-form.invalid .wpcf7-response-output,
#business-gifts .wpcf7-form.unaccepted .wpcf7-response-output,
#business-gifts .wpcf7-form.failed .wpcf7-response-output,
#business-gifts .wpcf7-form.aborted .wpcf7-response-output,
#business-gifts .wpcf7-form.spam .wpcf7-response-output {
    border-color: #c0392b;
    background-color: rgba(192, 57, 43, 0.06);
    color: #c0392b;
}


/* ─────────────────────────────────────────────
   8. CONTACT STRIP
   ───────────────────────────────────────────── */

#business-gifts .business-gifts__contact {
    padding: 56px 0;
    width: 100%;
}

    #business-gifts .business-gifts__contact-grid {
        padding: 0 24px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px 24px;
    }

    /* Stacked and centred, matching the benefits and process rows. Icon beside
       text left the fourth column with a large trailing gap, because the four
       blocks are very different widths. */
    #business-gifts .business-gifts__contact-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
    }

    #business-gifts .business-gifts__contact-item .business-gifts__icon {
        width: 36px;
        height: 36px;
        color: var(--accent-1);
    }

    #business-gifts .business-gifts__contact-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    #business-gifts .business-gifts__contact-content h3 {
        margin-bottom: 2px;
        font-size: 14px;
        font-weight: 600;
        color: var(--font-1);
    }

    #business-gifts .business-gifts__contact-content p,
    #business-gifts .business-gifts__contact-content a {
        font-size: 14px;
        font-weight: 400;
        color: var(--font-2);
        text-decoration: none;
    }

    #business-gifts .business-gifts__contact-content a:hover {
        color: var(--accent-1);
        text-decoration: underline;
    }


/* ─────────────────────────────────────────────
   TABLET — 1023px, the theme's desktop/mobile switch
   ───────────────────────────────────────────── */

@media screen and (max-width: 1023px) {

    #business-gifts {
        --wl-bg-pad: 48px;
    }

    #business-gifts .business-gifts__hero {
        min-height: 460px;
    }

    #business-gifts .business-gifts__hero-inner {
        padding: 56px 0;
    }

    #business-gifts .business-gifts__hero-title {
        font-size: 36px;
    }

    #business-gifts .business-gifts__title,
    #business-gifts .business-gifts__enquiry-title {
        font-size: 30px;
    }

    #business-gifts .business-gifts__heading {
        margin-bottom: 32px;
    }

    #business-gifts .business-gifts__benefits-grid,
    #business-gifts .business-gifts__cards,
    #business-gifts .business-gifts__steps,
    #business-gifts .business-gifts__contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Connectors only make sense on a single row */
    #business-gifts .business-gifts__step::after {
        content: none;
    }

    /* The inset was there to balance a four-across row; at two columns it just
       eats width */
    #business-gifts .business-gifts__steps,
    #business-gifts .business-gifts__contact-grid {
        padding: 0;
    }

    /* Photo above, form below */
    #business-gifts .business-gifts__enquiry {
        grid-template-columns: 1fr;
    }

    #business-gifts .business-gifts__enquiry-aside {
        padding: 48px 32px;
        min-height: 320px;
    }

    #business-gifts .business-gifts__enquiry-form {
        padding: 48px 32px;
    }

    #business-gifts .business-gifts__enquiry-text {
        max-width: none;
    }
}


/* ─────────────────────────────────────────────
   MOBILE — 767px
   ───────────────────────────────────────────── */

@media screen and (max-width: 767px) {

    #business-gifts {
        --wl-bg-pad: 40px;
    }

    #business-gifts .business-gifts__hero {
        min-height: 420px;
    }

    #business-gifts .business-gifts__hero-inner {
        padding: 48px 0;
    }

    #business-gifts .business-gifts__hero-title {
        font-size: 30px;
    }

    #business-gifts .business-gifts__hero-text {
        font-size: 15px;
    }

    /* No room to inset the hero copy on a phone */
    #business-gifts .business-gifts__hero-content {
        margin-left: 0;
        gap: 20px;
    }

    #business-gifts .business-gifts__button {
        padding: 0 24px;
        width: 100%;
    }

    #business-gifts .business-gifts__title,
    #business-gifts .business-gifts__enquiry-title {
        font-size: 26px;
    }

    #business-gifts .business-gifts__benefits {
        padding: 40px 0;
    }

    #business-gifts .business-gifts__benefits-grid,
    #business-gifts .business-gifts__cards,
    #business-gifts .business-gifts__steps,
    #business-gifts .business-gifts__contact-grid,
    #business-gifts .bgf__grid {
        grid-template-columns: 1fr;
    }

    #business-gifts .business-gifts__benefit-text {
        max-width: none;
    }

    #business-gifts .business-gifts__enquiry-aside,
    #business-gifts .business-gifts__enquiry-form {
        padding: 40px 16px;
    }

    #business-gifts .business-gifts__enquiry-aside {
        min-height: 260px;
    }

    #business-gifts .wpcf7-form input[type="submit"] {
        width: 100%;
    }

    /* The autop <p> is the real flex parent here, so it has to stack too or the
       submit button would compete for width with the spinner. */
    #business-gifts .bgf__submit,
    #business-gifts .bgf__submit > p {
        flex-direction: column;
        align-items: stretch;
    }

    #business-gifts .business-gifts__contact {
        padding: 40px 0;
    }
}