/* Storefront P0 presentation fixes. This file changes layout only. */

/* Keep cart-row content in dedicated tracks inside the Flatsome cart drawer. */
.off-canvas-cart .cart-popup-inner,
.off-canvas-cart .widget_shopping_cart,
.off-canvas-cart .widget_shopping_cart_content,
.off-canvas-cart .woocommerce-mini-cart {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

.off-canvas-cart .woocommerce-mini-cart-item.mini_cart_item {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) 44px;
    grid-template-rows: minmax(44px, auto) auto;
    gap: 4px 10px;
    align-items: center;
    min-width: 0;
    min-height: 80px;
    padding: 12px 0 !important;
    overflow: hidden;
}

.off-canvas-cart .woocommerce-mini-cart-item.mini_cart_item > .remove.remove_from_cart_button {
    position: static !important;
    z-index: 2;
    display: inline-flex !important;
    grid-column: 3;
    grid-row: 1 / span 2;
    align-items: center;
    justify-content: center;
    align-self: start;
    justify-self: end;
    box-sizing: border-box;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.off-canvas-cart .woocommerce-mini-cart-item.mini_cart_item > a:not(.remove) {
    display: grid !important;
    grid-column: 1 / 3;
    grid-row: 1;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

.off-canvas-cart .woocommerce-mini-cart-item.mini_cart_item > a:not(.remove) > img,
.off-canvas-cart .woocommerce-mini-cart-item.mini_cart_item > .usa-cart-flow-2026__pro-thumbnail {
    box-sizing: border-box;
    grid-column: 1;
    width: 64px !important;
    min-width: 64px;
    max-width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    object-fit: contain;
}

.off-canvas-cart .woocommerce-mini-cart-item.mini_cart_item > .usa-cart-flow-2026__pro-thumbnail {
    grid-row: 1 / span 2;
}

.off-canvas-cart .woocommerce-mini-cart-item.mini_cart_item > .ux-mini-cart-qty {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

.off-canvas-cart .woocommerce-mini-cart-item.mini_cart_item .quantity,
.off-canvas-cart .woocommerce-mini-cart-item.mini_cart_item .subscription-details,
.off-canvas-cart .woocommerce-mini-cart-item.mini_cart_item .amount {
    white-space: normal;
}

/* Preserve the accessible label while ensuring it cannot become visible text. */
.off-canvas-cart .woocommerce-mini-cart-item.mini_cart_item .usa-commerce-flow__sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

/* Give every eligible loop card the same flexible content column. */
.products .product-small.col,
.products .product-small.col > .col-inner,
.products .product-small.box {
    min-width: 0;
}

.products .product-small.col > .col-inner,
.products .product-small.box {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.products .product-small.col > .col-inner,
.products .product-small.box {
    flex: 1 1 auto;
}

.products .product-small.box > .box-text.box-text-products {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.products .product-small.box > .box-text.box-text-products > .usa-option-c-merch--loop {
    margin-top: auto !important;
}

/* About adopts the same desktop header row already used by Shop and Standards. */
@media (min-width: 850px) {
    body.usa-company-about-page #header,
    body.usa-company-about-page #header .header-wrapper,
    body.usa-company-about-page #header .header-bottom,
    body.usa-company-about-page #header .header-bottom .header-inner {
        height: 74px !important;
        min-height: 74px !important;
    }

    body.usa-company-about-page #header .header-top,
    body.usa-company-about-page #header .header-main {
        display: none !important;
    }

    body.usa-company-about-page #header .header-bottom {
        display: block !important;
        border-top: 0;
        background: #fff;
    }
}

@media (max-width: 849px) {
    body.usa-company-about-page #header .header-bottom,
    body.usa-storefront-architecture-page:has(main.usa-standards-page) #header .header-bottom,
    body.usa-shop-storefront-page #header .header-bottom {
        display: none !important;
    }

    body.usa-company-about-page #header,
    body.usa-company-about-page #header .header-wrapper,
    body.usa-company-about-page #header .header-main,
    body.usa-company-about-page #header .header-main .header-inner,
    body.usa-storefront-architecture-page:has(main.usa-standards-page) #header,
    body.usa-storefront-architecture-page:has(main.usa-standards-page) #header .header-wrapper,
    body.usa-storefront-architecture-page:has(main.usa-standards-page) #header .header-main,
    body.usa-storefront-architecture-page:has(main.usa-standards-page) #header .header-main .header-inner,
    body.usa-shop-storefront-page #header,
    body.usa-shop-storefront-page #header .header-wrapper,
    body.usa-shop-storefront-page #header .header-main,
    body.usa-shop-storefront-page #header .header-main .header-inner {
        min-height: 70px;
    }

    /* Search and the purchasable catalog lead on small screens. All paths remain. */
    body.usa-shop-storefront-page .shop-container {
        display: flex;
        flex-direction: column;
    }

    body.usa-shop-storefront-page .shop-container > .woocommerce-notices-wrapper {
        order: -4;
    }

    body.usa-shop-storefront-page .shop-container > .usa-shop-grid-intro {
        order: -3;
        margin: .45rem 0 .7rem;
        padding-top: 0;
    }

    body.usa-shop-storefront-page .shop-container > #usa-shop-products {
        order: -2;
        width: auto;
    }

    body.usa-shop-storefront-page .shop-container > .woocommerce-pagination {
        order: -1;
    }

    body.usa-shop-storefront-page .usa-shop-grid-intro > div > p:not(.usa-shop-eyebrow) {
        margin-top: .3rem;
        font-size: .86rem;
        line-height: 1.35;
    }

    body.usa-shop-storefront-page .usa-shop-grid-intro h2 {
        font-size: clamp(1.55rem, 7.8vw, 2.1rem);
        line-height: 1.08;
    }

    body.usa-shop-storefront-page .usa-shop-search {
        margin-top: .65rem;
    }

    body.usa-shop-storefront-page .usa-shop-storefront {
        margin-top: 1.25rem;
    }

    body.usa-shop-storefront-page .usa-shop-hero__copy {
        padding: .9rem;
    }

    body.usa-shop-storefront-page .usa-shop-hero h1 {
        font-size: clamp(1.8rem, 8.4vw, 2.45rem);
    }

    body.usa-shop-storefront-page .usa-shop-lede {
        margin-top: .55rem;
        font-size: .88rem;
        line-height: 1.35;
    }

    body.usa-shop-storefront-page .usa-shop-actions {
        margin-top: .7rem;
    }

    body.usa-shop-storefront-page .usa-shop-featured {
        margin-right: .9rem;
        margin-bottom: .8rem;
        margin-left: .9rem;
    }

    body.usa-shop-storefront-page .usa-shop-path-group {
        margin-top: 1rem;
    }

    body.usa-shop-storefront-page .usa-shop-path-group__heading h2 {
        font-size: 1.35rem;
    }

    body.usa-shop-storefront-page .usa-shop-goals {
        display: flex;
        gap: .55rem;
        max-width: 100%;
        padding-bottom: .3rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    body.usa-shop-storefront-page .usa-shop-goal,
    body.usa-shop-storefront-page .usa-shop-goals--families .usa-shop-goal:last-child {
        grid-column: auto;
        flex: 0 0 min(78vw, 260px);
        min-height: 44px;
        scroll-snap-align: start;
    }
}

@media (max-width: 390px) {
    .off-canvas-cart .cart-popup-inner {
        width: min(100vw, 390px);
        max-width: 100vw;
        padding-right: 12px !important;
        padding-left: 12px !important;
        overflow-x: hidden;
    }

    .off-canvas-cart .woocommerce-mini-cart-item.mini_cart_item {
        grid-template-columns: 56px minmax(0, 1fr) 44px;
        gap: 4px 8px;
    }

    .off-canvas-cart .woocommerce-mini-cart-item.mini_cart_item > a:not(.remove) {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 8px;
    }

    .off-canvas-cart .woocommerce-mini-cart-item.mini_cart_item > a:not(.remove) > img,
    .off-canvas-cart .woocommerce-mini-cart-item.mini_cart_item > .usa-cart-flow-2026__pro-thumbnail {
        width: 56px !important;
        min-width: 56px;
        max-width: 56px !important;
        height: 56px !important;
    }

    body.usa-shop-storefront-page .shop-container,
    body.usa-shop-storefront-page .shop-container > *,
    body.usa-shop-storefront-page .usa-shop-grid-intro > *,
    body.usa-shop-storefront-page #usa-shop-products,
    .products .product-small.col,
    .products .product-small.col > .col-inner,
    .products .product-small.box,
    .products .product-small.box > .box-text.box-text-products,
    .products .usa-option-c-merch--loop {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }

    body.usa-shop-storefront-page #usa-shop-products {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    body.usa-shop-storefront-page .usa-shop-search {
        grid-template-columns: minmax(0, 1fr) minmax(76px, auto);
    }

    body.usa-shop-storefront-page .usa-shop-search input[type="search"],
    body.usa-shop-storefront-page .usa-shop-search button {
        box-sizing: border-box;
        min-width: 0;
    }

    body.usa-shop-storefront-page :is(
        .usa-shop-grid-intro,
        .usa-shop-storefront,
        .usa-shop-goal,
        .product-title,
        .product-title a,
        .usa-option-c-merch--loop,
        .usa-option-c-merch--loop *
    ) {
        overflow-wrap: anywhere;
        word-break: normal;
    }
}