/* mobile styles */
@media (max-width: 767px) {
    :root {
        --dxp-s-text-heading-extra-large-font-size: 32px;
        --dxp-s-button-padding: 12px;
    }

    .phs-padding-x {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .phs-padding-y {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    .phs-padding {
        padding: 16px !important;
    }

    .phs-margin-x-mobile {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }

    /* shift filter panel buttons up on mobile */
    .custom-filter-bg .footer {
        padding-bottom: 4.5rem !important;
    }
}

/* tablet styles */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --dxp-s-text-heading-extra-large-font-size: 44px;
    }

    .phs-padding-x {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .phs-padding-y {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .phs-padding {
        padding: 24px !important;
    }

    .phs-margin-x-tablet {
        margin-left: 24px !important;
        margin-right: 24px !important;
    }
}

/* desktop styles */
@media (min-width: 1024px) {
    :root {
        --dxp-s-text-heading-extra-large-font-size: 56px;
    }

    .phs-padding-x {
        padding-left: 104px !important;
        padding-right: 104px !important;
    }

    .phs-padding-y {
        padding-top: 74px !important;
        padding-bottom: 74px !important;
    }

    .phs-padding {
        padding: 74px 104px !important;
    }
}


/* mobile filter button override */
@media (max-width: 1024px) {
    .header-container:has(.mobileFilterOverride),
    .sorting-menu:has(.mobileFilterOverride) {
        padding-right: 0 !important;
    }

    .mobileFilterOverride .sort-filter-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 4px;
        float: none !important;
        padding: 8px 16px;
        background-color: #ffffff !important;
        border: 1px solid #EAE9E9 !important;
        border-radius: 24px;
        /* Hide the "+ Sort & Filter" text */
        font-size: 0;
        line-height: 1;
        color: #4A5962;
        cursor: pointer !important;
        text-decoration: none !important;
    }

    .mobileFilterOverride .sort-filter-button::after {
        content: "Filter";
        font-size: 16px;
        font-weight: 500;
        line-height: 1;
        text-decoration: none !important;
    }

    .mobileFilterOverride .sort-filter-button::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        background-color: currentColor;
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'><mask id='m' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='18' height='18'><rect x='18' width='18' height='18' transform='rotate(90 18 0)' fill='%23D9D9D9'/></mask><g mask='url(%23m)'><path d='M11.25 9.75L12.75 9.75L12.75 12L15.75 12L15.75 13.5L12.75 13.5L12.75 15.75L11.25 15.75L11.25 9.75ZM2.25 12L9.75 12L9.75 13.5L2.25 13.5L2.25 12ZM2.25 4.5L5.25 4.5L5.25 2.25L6.75 2.25L6.75 8.25L5.25 8.25L5.25 6L2.25 6L2.25 4.5ZM8.25 4.5L15.75 4.5L15.75 6L8.25 6L8.25 4.5Z' fill='black'/></g></svg>");
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'><mask id='m' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='18' height='18'><rect x='18' width='18' height='18' transform='rotate(90 18 0)' fill='%23D9D9D9'/></mask><g mask='url(%23m)'><path d='M11.25 9.75L12.75 9.75L12.75 12L15.75 12L15.75 13.5L12.75 13.5L12.75 15.75L11.25 15.75L11.25 9.75ZM2.25 12L9.75 12L9.75 13.5L2.25 13.5L2.25 12ZM2.25 4.5L5.25 4.5L5.25 2.25L6.75 2.25L6.75 8.25L5.25 8.25L5.25 6L2.25 6L2.25 4.5ZM8.25 4.5L15.75 4.5L15.75 6L8.25 6L8.25 4.5Z' fill='black'/></g></svg>");
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-size: contain;
        -webkit-mask-size: contain;
    }
}

@media (min-width: 992px) and (max-width: 1024px) {
    .mobileFilterOverride .sort-filter-button {
        margin-right: 16px !important;
    }
}

.custom-filter-bg .section-style,
.custom-filter-bg .heading-wrapper {
    border-bottom-color: #30383E !important;
}

.custom-filter-bg .header-and-body > section:last-of-type .section-style {
    border-bottom: none !important;
}

.custom-filter-bg .footer {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 14px !important;
    float: none !important;
}

.custom-filter-bg .footer .slds-button {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center !important;
    min-height: 48px;
    border-radius: 8px;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1;
    cursor: pointer;
    border-width: 2px;
    border-style: solid;
    text-decoration: none !important;
}

.custom-filter-bg .footer .see-items-button .slds-button,
.custom-filter-bg .footer .slds-button_brand {
    background: var(--slds-c-button-brand-color-background, var(--dxp-s-button-color-background, var(--dxp-s-button-color, #FFD400))) !important;
    border-color: var(--slds-c-button-brand-color-border, var(--dxp-s-button-color-border, var(--dxp-s-button-color, #FFD400))) !important;
    color: var(--slds-c-button-brand-text-color, var(--dxp-s-button-text-color, #1A1A1A)) !important;
}

.custom-filter-bg .footer .see-items-button .slds-button:hover,
.custom-filter-bg .footer .see-items-button .slds-button:focus,
.custom-filter-bg .footer .slds-button_brand:hover,
.custom-filter-bg .footer .slds-button_brand:focus {
    background: var(--slds-c-button-brand-color-background-hover, var(--dxp-s-button-color-background-hover, var(--dxp-g-brand-hover, #E6BF00))) !important;
    border-color: var(--slds-c-button-brand-color-border-hover, var(--dxp-s-button-color-border-hover, var(--dxp-g-brand-hover, #E6BF00))) !important;
}

.custom-filter-bg .footer commerce-action-button:not(.see-items-button) .slds-button {
    background: transparent !important;
    border-color: #30383E !important;
    color: #30383E !important;
}

.custom-filter-bg .footer commerce-action-button:not(.see-items-button) .slds-button:hover,
.custom-filter-bg .footer commerce-action-button:not(.see-items-button) .slds-button:focus {
    background: var(--slds-c-button-brand-color-background-hover, var(--dxp-g-brand-hover, rgba(255, 212, 0, 0.12))) !important;
}

.custom-filter-bg .footer commerce-action-button:not(.see-items-button) .slds-button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 991px) {
    .custom-white-bg-mobile {
        background-color: white !important;
    }
}

/* fix mobile filter panel flicker */
@media (max-width: 1024px) {
    .custom-filter-bg [data-id="filterPanelWrapper"],
    .custom-filter-bg [data-id="filterPanelWrapper"] .panel-container {
        transition: opacity 0.15s ease, visibility 0s linear, transform 0.15s ease;
        z-index: 10000 !important;
    }

    .custom-filter-bg [data-id="filterPanelWrapper"]:not(.visible),
    .custom-filter-bg [data-id="filterPanelWrapper"] .panel-container:not(.visible) {
        transition-delay: 0.5s;
    }
}

/* fix slide-out filter panel (769-1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .custom-filter-bg .panel-class,
    .custom-filter-bg .header-and-body {
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .custom-filter-bg .header-and-body {
        padding: 0.5rem 1rem 1rem 1rem !important;
    }
}

.visually-hidden {
    position: absolute;
    left: -999999px;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.header-labels.header-without-sort h1 {
    display: none;
}