/* ==========================================================================
   MODULE: CHECKOUT HEADER LAYOUT
   ========================================================================== */

/* 
 * Target: The specific group wrapper for the distraction-free header.
 * We use the class provided in your HTML snippet.
 */

/* --------------------------------------------------------------------------
   TABLET & MOBILE LAYOUT (Max Width: 1024px)
   --------------------------------------------------------------------------
   Goal: 
   Row 1: [Logo] [Space] [Secure Badge]
   Row 2: [Separator Line]
   Row 3: [Stepper (Centered)]
   -------------------------------------------------------------------------- */

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

    /* 1. Reset the Flex Container to allow wrapping */
    .wc-blocks-pattern-header-distraction-free .wp-block-group.is-layout-flex {
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 1rem !important;
        /* Vertical gap between rows */
    }

    /* 2. LOGO (Top Left) */
    .wc-blocks-pattern-header-distraction-free .wp-block-site-logo {
        order: 1;

        /* Don't grow, just take natural size */
        justify-content: left;
        /* Push everything else to the right */
    }

    /* 3. SECURE BADGE (Top Right) */
    .wc-blocks-pattern-header-distraction-free .secure-badge-wrapper {
        order: 2;
        flex: 0 1 auto;
        justify-content: right;
        /* Ensure it aligns right */
        margin-left: 0;
    }

    /* 4. STEPPER (Bottom Center) */
    .wc-blocks-pattern-header-distraction-free .checkout-stepper-wrapper {
        order: 3;

        /* Force full width to break into a new line */
        flex-basis: 100% !important;
        width: 100% !important;

        /* Centering */
        display: flex;
        justify-content: center;

        /* Spacing for the separator line */
        padding-top: 0.6rem !important;

        /* Relative positioning for the pseudo-element line */
        position: relative;
    }

    /* 5. THE SEPARATOR LINE (HR Simulation) */
    .wc-blocks-pattern-header-distraction-free .checkout-stepper-wrapper::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;

        /* Visuals */
        height: 1px;
        background-color: currentColor;
        /* Inherits text color */
        opacity: 0.15;
        /* Subtle line */
        width: 100%;
    }
}