/*#region MEDIA QUERIES */
/*
    Centralized media queries for the Cokesbury theme.

    All @media rules live in this file. It is loaded LAST (after styles.css and
    the vendor CSS) so its rules win at equal specificity. Do not add @media
    rules to the component CSS files — add them here, under the matching tier.

    Canonical breakpoint ladder (max-width):
        1400px  extra-large (large desktop)
        1199px  large (small desktop / landscape tablet)
         991px  medium (portrait tablet)
         767px  small (landscape phone and below)

    Rules migrated from component files that used a non-canonical breakpoint
    have been aligned to the ladder (the last ones — the 1320/1050 product-grid
    column steps — were standardized in the Phase 2c grid pass).
*/


/*#region Extra large devices (max-width: 1400px) */
@media (max-width: 1400px) {

    /* style guide breakpoint indicator: this tier takes over from base */
    .html-styleguide-page .sgBpStrip .sgBp-base {
        background-color: transparent;
        border-color: var(--tertiary-color-2);
        color: var(--tertiary-color-3);
    }

    .html-styleguide-page .sgBpStrip .sgBp-xl {
        background-color: var(--main-color);
        border-color: var(--main-color);
        color: var(--light-text-color);
    }

    /* product grid: 4 columns (standardized from the legacy 1320px step) */
    .product-grid .item-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
/*#endregion*/


/*#region Large devices (max-width: 1199px) */
@media (max-width: 1199px) {

    /* style guide breakpoint indicator */
    .html-styleguide-page .sgBpStrip .sgBp-xl {
        background-color: transparent;
        border-color: var(--tertiary-color-2);
        color: var(--tertiary-color-3);
    }

    .html-styleguide-page .sgBpStrip .sgBp-lg {
        background-color: var(--main-color);
        border-color: var(--main-color);
        color: var(--light-text-color);
    }

    /* product grid: 3 columns (standardized from the legacy 1050px step); still 3 below
       991 where catalog pages go single-column and the tiles regain room */
    .product-grid .item-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/*#endregion*/


/*#region Medium devices (max-width: 991px) */
@media (max-width: 991px) {

    /* style guide breakpoint indicator */
    .html-styleguide-page .sgBpStrip .sgBp-lg {
        background-color: transparent;
        border-color: var(--tertiary-color-2);
        color: var(--tertiary-color-3);
    }

    .html-styleguide-page .sgBpStrip .sgBp-md {
        background-color: var(--main-color);
        border-color: var(--main-color);
        color: var(--light-text-color);
    }

    /* from Footer.css */
    .socialMediaIconsWrapper {
        flex-wrap: wrap;
    }

    .footerSocialIcon {
        display: block;
        margin: 1REM 0 0 1REM;
    }

    /* Below 991 these pages go single-column and the left sidebar (.side-2) is hidden.
       This is intentional for ALL of them:
       - catalog pages (category/curriculum/category-products): the sidebar's Browse by
         Category + filters come back as the slide-in drawer via the Filter button in the
         catalog selectors row (same pattern as the hamburger menu);
       - My Account / Help / Contact-Us pages: their navigation lives in the HAMBURGER menu
         on mobile (the auth-gated My Account submenu and the Help/Contact MobileOnly items),
         so the left navigation is redundant below 992 and stays hidden — no drawer needed. */
    .html-curriculum-category-page .master-column-wrapper,
    .html-category-page .master-column-wrapper,
    .html-account-page .master-column-wrapper,
    .html-help-page .master-column-wrapper,
    .html-category-products-page .master-column-wrapper {
        display: grid;
        column-gap: 20px;
        grid-template-columns: 1fr;
        grid-template-areas: "main";
    }

    .side-2 {
        display: none;
    }

    body.filter-drawer-open {
        overflow: hidden;
    }

    /* .master-column-wrapper is a z-index:0 stacking context (styles.css), which would cap the
       drawer below the fixed header no matter its own z-index — raise it while the drawer is open */
    body.filter-drawer-open .master-wrapper-page .master-column-wrapper {
        z-index: 200;
    }

    /* Filter button leads the selectors row (far left), Sort by stays right */
    .product-selectors {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "filterToggle selectorLeft selectorRight";
        align-items: center;
    }

    /* reveal the Filter button only on the drawer-equipped catalog pages — other consumers
       of _CatalogSelectors (e.g. the search page) have no drawer, so no dead button there */
    .html-curriculum-category-page .mobileFilterToggle,
    .html-category-page .mobileFilterToggle,
    .html-category-products-page .mobileFilterToggle {
        display: inline-flex;
        grid-area: filterToggle;
        margin-left: 20px;
    }

    /* "Sort by" label sits inline, left of the dropdown */
    .product-selectors .product-sorting {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-right: 20px;
    }

    /* the open drawer */
    .side-2.filter-open {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        max-width: 400px;
        overflow-y: auto;
        z-index: 130;             /* z scale: header 99 (Header.css) < backdrop 120 < panel 130;
                                     the hamburger uses 110/120 for its own header/menu layers.
                                     Only meaningful inside the wrapper raised to 200 below. */
        background: #fff;
        padding: 0 16px 16px;     /* the sticky header supplies the top spacing */
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
    }

    /* drawer header — "Filter" left, ✕ right; styled to match the modal titlebars
       (.ui-dialog-titlebar in Cokesbury.css) and sticky while the drawer scrolls */
    .side-2.filter-open .filterDrawerHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        max-height: 60px;
        margin: 0 -16px 16px;     /* bleed over the drawer's side padding */
        padding: 10px 12px;
        background-color: #dedede;
        border-bottom: 1px solid #ccc;
        z-index: 1;
    }

    .side-2.filter-open .filterDrawerTitle {
        color: #333;
        font-size: 1.8rem;
        font-weight: 600;
        line-height: 1.3;
    }

    /* dimmed backdrop: must live INSIDE the raised wrapper's stacking context — above the page
       content (z auto) and the fixed header (outside, z 99 < wrapper 200) but below the drawer
       panel (z 130). A pseudo outside the wrapper can never sit between content and drawer. */
    body.filter-drawer-open .master-column-wrapper::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 120;
    }


    /* migrated from styles.css (was @media max-width:1000 — that hid Browse by Category in the
       992-1000 desktop sliver too): hide the block below 992 generally (covers pages whose
       sidebar is still visible at mobile, e.g. search)… */
    .block-category-navigation {
        display: none;
    }

    /* …but inside the open drawer, Browse by Category must show */
    .side-2.filter-open .block-category-navigation {
        display: block;
    }

    /* Amplify Video List (CategoryBanners) */
    .divVideoListWrapper {
        grid-template-columns: 180px 1fr auto;
    }

    .divVideoListWrapper .divVideoImageWrapper .imgVideoIcon {
        max-width: 180px;
        max-height: 120px;
    }

    /* ===== Category banners: Promo family, tablet (ported from production MediaQueries.css) ===== */

    /* Tertiary promo — content overlays the background image; photo shrinks to 40% */
    .TertiaryPromoWrapper {
        width: 100%;
        height: auto;
        display: flex;
        position: relative;
        justify-content: space-around;
        margin-top: 40px;
        pointer-events: all;
    }
    .TertiaryBanner {
        width: 100%;
        max-width: 100%;
        position: relative;
    }
    .TertiaryBanner .TertiaryBannerContentWrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        pointer-events: none;
    }
    .TertiaryBanner .TertiaryPhotoWrapper {
        z-index: 100;
        width: 40%;
    }
    .TertiaryBanner .TertiaryPhotoWrapper img {
        display: block;
        max-height: 180px;
        margin: 20px auto;
    }
    .TertiaryBanner .TertiaryPromoTextWrapper {
        z-index: 100;
        font-size: 1.65REM;
    }
    .TertiaryBanner .TertiaryPromoTextWrapper span {
        display: block;
        text-align: center;
    }
    .TertiaryBanner .TertiaryPromoTextWrapper .TertiaryPromoIcon {
        display: block;
        text-align: center;
        margin: auto;
        width: 30px;
    }
    .TertiaryBanner .BackgroundImage {
        position: relative;
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        border: none;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    /* Secondary promo — product shot floats centered over the image */
    .SecondaryPromoImageWrapper .SecondaryPromoProductWrapper {
        display: block;
        position: absolute;
        z-index: 100;
        margin: 20px auto;
        width: 100%;
        text-align: center;
    }
    .SecondaryPromoImageWrapper .SecondaryPromoProductWrapper img {
        position: relative;
        border: 4px solid white;
        margin: 20px auto;
        max-height: 180px;
        width: auto;
        height: auto;
    }

    /* ===== Category banners: Author family, tablet (ported from production MediaQueries.css) ===== */
    .SildeAuthorBio {
        margin-bottom: 2rem;
        font-size: 1.8rem;
        line-height: 1.6;
    }

    /* HeaderLarge — BEYOND production parity: the title (top:35%) and body (top:45%) are
       absolutely pinned and overlap as soon as the title wraps, which happens at tablet
       widths already; flow them instead over the image backdrop */
    .BannerSectionHeaderLarge {
        height: auto;
        min-height: 220px;
        overflow: hidden;
    }
    .BannerSectionHeaderLarge > img {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        min-width: 100%;
        min-height: 100%;
        max-width: none;
    }
    .BannerSectionHeaderLargeTextWrapper {
        position: relative;
        z-index: 100;
        padding: 2rem;
    }
    .BannerSectionHeaderLargeTextWrapper:before {
        display: none;    /* the 42.8% aspect-ratio spacer just adds empty space here */
    }
    .BannerSectionHeaderLargeTextWrapper .BannerSectionHeaderLargeText {
        position: relative;
        top: unset;
        padding: 0;
    }
    .BannerSectionHeaderLargeTextWrapper h4 {
        top: unset;
        font-size: 3rem;
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    /* HeaderCurrAutoShip / HeaderBulletinAutoShip — BEYOND production parity: the text
       outgrows the fixed 400px band at tablet widths; let the band grow with it
       (full image/text stacking happens in the 767 tier) */
    .HeaderBannerRow {
        height: auto;
        min-height: 400px;
    }

    /* ===== Category banners: Video family, tablet (HeaderLargeWithVideo / ContentLargeWithVideo) =====
       Production scoped these to #categoryBanners, but the banner also renders outside that
       wrapper (content zone / single-banner path), so match both — like the 767 rules do. */
    .DynamicContentHeaderWithVideo .VideoHeaderLargeTextWrapper,
    #categoryBanners .DynamicContentHeaderWithVideo .VideoHeaderLargeTextWrapper {
        top: 10px;
        left: 10px;
        max-width: 50%;
    }
    .DynamicContentHeaderWithVideo .VideoHeaderLargeTextWrapper .s4,
    #categoryBanners .DynamicContentHeaderWithVideo .VideoHeaderLargeTextWrapper .s4 {
        font-size: 1.5REM;
    }
    .DynamicContentHeaderWithVideo .VideoWrapper,
    #categoryBanners .DynamicContentHeaderWithVideo .VideoWrapper {
        right: 10px;
        z-index: 100;
        max-width: 40%;
        top: 0px;
    }
    .DynamicContentHeaderWithVideo .VideoWrapper iframe,
    #categoryBanners .DynamicContentHeaderWithVideo .VideoWrapper iframe {
        max-width: 100% !important;
    }

    /* drop the default UA left indent on the header links list (mobile only) */
    .headerLinks > ul {
        margin-left: 0px;
        padding-left: 0px;
    }

    /* Header search stays INLINE at this tier (there's room next to the hamburger);
       it collapses to the magnifier toggle in the 767 tier below */

    /* Mobile menu: reveal hamburger, collapse the mega menu until opened */
    .mobileMenuToggle {
        display: flex;
    }

    #nav .mega-menu.mainMenu {
        display: none !important;
    }

    #nav.menu-open {
        max-width: 400px;
    }

    /* darken the rest of the page behind the open menu */
    #nav.menu-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 90;
    }

    /* lock page scroll while the menu is open; keep the header above the backdrop */
    body.nav-menu-open {
        overflow: hidden;
    }

    body.nav-menu-open .header {
        z-index: 110;
    }

    /* the open menu overlays the page below the header and scrolls on its own */
    #nav.menu-open .mega-menu.mainMenu {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-width: 400px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        z-index: 120;       /* above the header (110) so the pulled-up edge sits over it */
        background: #fff;
        padding-left: 0;
        margin-top: -20px;
    }

    /* sub-lists stay collapsed until their item is opened via the plus-button accordion */
    #nav .mega-menu.mainMenu .sublist-wrap { display: none !important; }
    #nav .mega-menu.mainMenu .back-button { display: none !important; }

    #nav.menu-open .mega-menu.mainMenu > li {
        position: relative;
        display: block;
        width: 100%;
        border-bottom: 1px solid #ddd;
    }

    #nav.menu-open .mega-menu.mainMenu > li > a {
        display: block;
        padding: 14px 20px;
    }

    /* plus / minus toggle for items that have sub-categories */
    #nav.menu-open .mega-menu.mainMenu > li > .plus-button {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 52px;
        height: 52px;
        cursor: pointer;
    }
    #nav.menu-open .mega-menu.mainMenu > li > .plus-button::before,
    #nav.menu-open .mega-menu.mainMenu > li > .plus-button::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 2px;
        background: var(--main-color);
        transform: translate(-50%, -50%);
    }
    #nav.menu-open .mega-menu.mainMenu > li > .plus-button::after {
        transform: translate(-50%, -50%) rotate(90deg);
    }
    #nav.menu-open .mega-menu.mainMenu > li.open > .plus-button::after {
        display: none;
    }

    /* expanded sub-category list */
    #nav.menu-open .mega-menu.mainMenu > li.open > .sublist-wrap {
        display: block !important;
    }
    #nav.menu-open .mega-menu.mainMenu .sublist-wrap .sublist {
        display: block !important;
        column-count: 1 !important;
        padding: 0;
        margin: 0;
    }
    #nav.menu-open .mega-menu.mainMenu .sublist-wrap .sublist li a {
        display: block;
        padding: 10px 20px 10px 40px;
    }

    /* show the MobileOnly nav items (Sign In, Help, Contact Us, etc.) inside the open hamburger menu */
    #nav.menu-open .mega-menu.mainMenu li.MobileOnly {
        display: block !important;
    }

    /* Auth-gated menu items (My Account / Sign In) live inside the main menu, so they already
       get the hamburger drill-down styling. #nav carries is-authenticated / is-guest (set in
       _Root.cshtml), and these gates hide the wrong set. The selectors are deliberately more
       specific (1,5,1) than the MobileOnly reveal above (1,4,1) so the gate wins. */
    #nav.menu-open.is-guest .mega-menu.mainMenu li.AuthOnly {
        display: none !important;
    }
    #nav.menu-open.is-authenticated .mega-menu.mainMenu li.GuestOnly {
        display: none !important;
    }

    /* hide the desktop Help/Contact + My Account dropdowns while the hamburger is active (cart stays) */
    .header-links-wrapper .HeaderLinksContainer {
        display: none;
    }
}
/*#endregion*/


/*#region Small devices (max-width: 767px) */
@media screen and (max-width: 767px) {

    /* style guide breakpoint indicator */
    .html-styleguide-page .sgBpStrip .sgBp-md {
        background-color: transparent;
        border-color: var(--tertiary-color-2);
        color: var(--tertiary-color-3);
    }

    .html-styleguide-page .sgBpStrip .sgBp-sm {
        background-color: var(--main-color);
        border-color: var(--main-color);
        color: var(--light-text-color);
    }

    /* Phone search: collapse the inline box to a magnifier; expand as a full-width bar on tap.
       (Moved here from the 991 tier in Phase 2c — the inline box fits the header down to 768.) */
    .search-box {
        justify-items: end;
    }

    .search-box .searchToggle {
        display: inline-flex;
    }

    /* clear/close (✕) button — only while the quick-results are showing.
       Pinned to the top-right of the fixed search bar (over the input's right edge),
       and lifted above the results dropdown (jQuery UI ui-front z-index:100). */
    .search-box.search-open.results-open .searchClear {
        display: inline-flex;
        position: absolute;
        top: 10px;
        bottom: 10px;
        right: 18px;
        left: auto;
        width: auto;      /* override the full-width search-form button rule */
        min-width: 0;
        z-index: 101;
    }

    .search-box #small-search-box-form {
        display: none;
    }

    /* let the expanded bar anchor to the fixed header wrapper (not the narrow search cell)
       so it spans full width AND rides the header up/down on scroll */
    .search-box.search-open {
        position: static;
    }

    .search-box.search-open #small-search-box-form {
        display: flex;
        position: absolute;
        top: 100%;      /* just below the header row, within the fixed header wrapper */
        left: 0;
        width: 100%;
        z-index: 60;
        background: var(--main-color);
        padding: 10px;
        box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    }

    .search-box.search-open #small-search-box-form input[type=text] {
        flex: 1 1 auto;
        min-width: 0;
        padding-right: 44px; /* clear the absolutely-positioned ✕ */
    }

    /* quick-results menu: span the full-width bar instead of the desktop 285px lock,
       and cap the height so a long list scrolls instead of running off-screen
       (base .ui-autocomplete is overflow:hidden, so override it here) */
    .search-box.search-open .ui-autocomplete {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box;
        max-height: calc(100vh - 160px);
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* pagination centers on phones */
    .pager {
        justify-content: center;
        padding-left: 0;
    }

    /* product grid: 2 fluid columns on phones. The desktop tiles are fixed 200x300
       (3 of them guarantee horizontal overflow under 600px) — here the tile and its
       picture wrapper go fluid and the picture keeps its 2:3 proportion; the images
       already scale (max-width/height 100% inside the flex wrapper). */
    .product-grid .item-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 12px;
    }

    .product-grid .item-grid .item-box {
        width: auto;
        max-width: 220px;
    }

    .product-grid .item-grid .item-box .product-item .picture,
    .product-grid .item-grid .item-box .product-item .picture .pictureWrapper {
        width: auto;
        height: auto;
        aspect-ratio: 2 / 3;
    }

    /* style guide rows stack on phones (56px tag + 460px meta columns cannot fit) */
    .html-styleguide-page .sgTypeRow {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .html-styleguide-page .sgSwatch {
        grid-template-columns: 1fr;
    }

    /* long class/token names and snippets must wrap or scroll instead of overflowing */
    .html-styleguide-page code {
        white-space: normal;
        word-break: break-word;
    }

    .html-styleguide-page .sgSnippetPair pre {
        overflow-x: auto;
    }

    /* from Footer.css */
    footer {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto auto auto;
        grid-gap: 2REM 2REM;
    }

    .footerNav {
        grid-column: 1;
        grid-row: 1;
    }

    .footerNav ul.footer-menu {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 50% 50%;
        grid-gap: 1REM;
        position: relative;
        z-index: 5;
        margin: 0px;
        padding: 0px;
        width: 100%;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    .footer-menu > li:nth-child(1) {
        grid-column: 2;
        grid-row: 2;
    }

    .footer-menu > li:nth-child(2) {
        grid-column: 1;
        grid-row: 1;
    }

    .footer-menu > li:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    .footer-menu > li:nth-child(4) {
        grid-column: 2;
        grid-row: 1;
    }

    .DesktopOnly {display: none !important;}
    .MobileOnly, .mobileOnly {display: block;}

    /* from production MediaQueries.css — elements tagged to hide on phones
       (e.g. the author banner's background <img class="AuthorBannerRowBackground mobileHide">;
       categoryBanners.js re-applies it as a cover background on the row instead) */
    .mobileHide,
    .mobileHideBanners {
        display: none;
    }

    .footerNewsletterSignUp {
        grid-column: 1;
        grid-row: 2;
    }

    .socialMediaIconsWrapper {
        grid-column: 1;
        grid-row: 3;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
    }

    .footerCopyright {
        grid-column: 1;
        grid-row: 4;
    }

    /* the "|" separator is production-hidden on phones (.mobileHide), which made the
       line read "© 2026 Cokesbury Privacy Statement" — give the link its own line */
    .footerCopyright a {
        display: block;
    }

    .footerPoweredBy {
        grid-column: 1;
        grid-row: 5;
        text-align: left;
    }

    /* from Cokesbury.css — jQuery UI dialog tweaks (deduped: two identical 767 blocks consolidated) */
    .ui-dialog .ui-dialog-titlebar-close {
        right: -8px;
    }

    .ui-button .ui-icon.ui-icon-closethick:hover {
        background: url('/Themes/Cokesbury/Content/images/search_dropdown_close_x.svg') no-repeat center;
        background-position: 0 0;
    }

    .ui-widget-content.ProductDetailVideoPopup {
        background: none;
        border-radius: 0;
        box-shadow: none;
    }

    .ui-dialog .ui-dialog-content {
        padding: 0;
    }

    .ProductDetailVideoPopup .ui-state-default .ui-icon.ui-icon-closethick {
        display: none;
    }

    /* Amplify Video List (CategoryBanners) — stack image / text / button */
    .divVideoListWrapper {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "text"
            "button";
    }

    .divVideoListWrapper .divVideoImageWrapper {
        text-align: center;
    }

    .divVideoListWrapper .divVideoListButtonWrapper .linkStyling {
        width: 100%;
    }

    /* ===== Category banners: Header family (HeaderAdjustable + slick carousel) =====
       Ported from production MediaQueries.css (Cokesbury theme). Base styles live in
       Banners.css; these are the mobile (<=767) responsive overrides. */

    /* HeaderAdjustable / HeaderAdjustableWithButton */
    .HeaderAdjustable {
        overflow: hidden;
    }
    .HeaderAdjustable img {
        flex-shrink: 0;
        width: unset;
        min-width: 100%;
        min-height: 100%;
        position: absolute;
    }
    .HeaderAdjustable .HeaderAdjustableTextWrapper {
        padding: 2rem;
        position: relative;
        top: unset;
        transform: unset;
    }
    .HeaderAdjustable .HeaderAdjustableTextWrapper h4 {
        font-size: 3rem;
        line-height: 1.2;
    }
    .HeaderAdjustable .HeaderAdjustableTextWrapper .s4 {
        font-size: 1.5rem;
        text-transform: uppercase;
    }
    .HeaderAdjustable .HeaderAdjustableTextWrapper .SlideFeatureLink input[type='button'],
    .HeaderAdjustable .HeaderAdjustableTextWrapper .SlideFeatureLink input[type='submit'],
    .HeaderAdjustable .HeaderAdjustableTextWrapper .SlideFeatureLink a.button,
    .HeaderAdjustable .HeaderAdjustableTextWrapper .SlideFeatureLink button {
        height: auto;
        width: 100%;
        padding: 1rem 2rem;
    }

    /* slick carousel that wraps the header banners */
    .slick-slider .slick-track,
    .slick-slider .slick-list {
        margin: 0;
        display: flex;
    }
    .slick-slide > .row {
        position: relative;
        max-height: inherit;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    .categoryBanner.slick-slide {
        flex: 1;
    }
    .slick-dots li {
        font-size: 0;
        background: #fff;
        border-radius: 50%;
        padding: .75rem;
        margin: 1.5rem;
        height: auto;
        opacity: .5;
    }
    .slick-dots li.slick-active {
        opacity: 1;
    }

    /* HeaderSmall (BannerSectionHeaderSmall) — shorter bar on phones.
       Production also has `BannerSectionHeaderSmallText { font-size: 2.4rem }` with a MISSING
       leading dot (selector never matches), so that rule is deliberately not ported — adding
       the dot would make mobile render differently than live production does today. */
    .BannerSectionHeaderSmall {
        height: 75px;
    }

    /* ===== Category banners: Promo family, phone (ported from production MediaQueries.css) ===== */

    /* Secondary promo — stacks: full-width image, then a full-width colored text block below */
    .BannerSecondaryPromoWrapper {
        width: 100%;
        height: auto;
        display: block;
        position: relative;
        margin-top: 0;
    }
    .SecondaryPromoImageWrapper {
        width: 100%;
        position: relative;
        line-height: 0px;
        max-width: 200%;
        object-fit: none;
        object-position: 50% 50%;
    }
    .SecondaryPromoImageWrapper img {
        position: relative;
        max-width: 767px;
        max-height: 547px;
        width: 100%;
        height: 100%;
        border: none;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .SecondaryPromoTextWrapper {
        width: 100%;
        background-color: var(--main-color);
        display: block;
        align-items: center;
        max-width: 100%;
    }
    .SecondaryPromoTextAlign {
        padding: 2rem;
        width: 100%;
    }
    .SecondaryPromoTextCategory,
    .SecondaryPromoTextContent,
    .SecondaryPromoButton {
        text-align: center;
        width: auto;
        height: auto;
    }
    .SecondaryPromoImageWrapper .SecondaryPromoProductWrapper {
        display: block;
        position: absolute;
        z-index: 100;
        margin: 20px auto;
        width: 100%;
        text-align: center;
    }
    .SecondaryPromoImageWrapper .SecondaryPromoProductWrapper img {
        position: relative;
        border: 4px solid white;
        margin: 20px auto;
        max-height: 200px;
        width: auto;
        height: auto;
    }

    /* Tertiary promo — photo hidden on phones; text (2.4rem) centered over the background image */
    .TertiaryPromoWrapper {
        width: 100%;
        height: auto;
        display: block;
        position: relative;
        justify-content: space-around;
        margin-top: 40px;
        pointer-events: all;
    }
    .TertiaryBanner {
        width: 100%;
        position: relative;
    }
    .TertiaryBanner .TertiaryBannerContentWrapper {
        z-index: 100;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        pointer-events: none;
    }
    .TertiaryBanner .TertiaryPhotoWrapper {
        display: none;
    }
    .TertiaryBanner .TertiaryPhotoWrapper img {
        display: none;
    }
    .TertiaryBanner .TertiaryPromoTextWrapper {
        z-index: 100;
        font-size: 2.4REM;
    }
    .TertiaryBanner .TertiaryPromoTextWrapper span {
        display: block;
        text-align: center;
    }
    .TertiaryBanner .TertiaryPromoTextWrapper .TertiaryPromoIcon {
        display: block;
        text-align: center;
        margin: auto;
    }
    .TertiaryBanner .BackgroundImage {
        position: relative;
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        border: none;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    /* ===== Category banners: Author family, phone (ported from production MediaQueries.css) ===== */

    /* author banners carry class "row AuthorBannerRow"; the generic carousel rule above
       (.slick-slide > .row { display:flex }) would put the background image and the bio
       side-by-side and crush the text — author slides need block flow so the bio stacks */
    .slick-slide > .row.AuthorBannerRow {
        display: block;
    }

    .AuthorBannerRow .SlideAuthorPhoto,
    .AuthorBannerRow .SlideFeaturePhoto {
        max-width: 65%;
        margin: 0 auto;
    }
    /* keep the height of secondary slides down */
    .SlideFeaturePhoto {
        display: none;
    }
    .AuthorBannerRow .SlideAuthorFeatureWrapper,
    .AuthorBannerRow .SildeAuthorBioText {
        max-width: 100%;
        margin: 2rem 0 0;
    }
    .SlideAuthorBioWrapper {
        position: static;
        transform: initial;
        flex-direction: column;
    }
    .SildeAuthorBio,
    .SlideFeatureAbout {
        margin-bottom: 1rem;
        font-size: 1.6rem;
        line-height: 1.5;
    }
    .SildeAuthorBioText h1 {
        margin-bottom: 1rem;
    }
    .AuthorBannerRow .SildeAuthorBioText .favorite-link {
        max-width: 3.5rem;
    }

    /* ===== Category banners: Video family, phone (HeaderLargeWithVideo / ContentLargeWithVideo) =====
       Text and video stack full-width; the background image becomes a clipped backdrop. */
    .DynamicContentHeaderWithVideo .DynamicContentHeaderWithVideoBackgroundImage {
        width: auto;
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;    /* anchor the backdrop at the banner origin — at its static position it
                       leaves a white gap where the white title text becomes invisible */
    }
    .DynamicContentHeaderWithVideo .VideoHeaderLargeTextWrapper,
    #categoryBanners .DynamicContentHeaderWithVideo .VideoHeaderLargeTextWrapper {
        position: relative;
        width: 100%;
        max-width: 100%;
        text-align: center;
        padding: 2rem 2rem 0;
        height: auto;
        top: unset;
        left: unset;
    }
    .DynamicContentHeaderWithVideo .VideoWrapper,
    #categoryBanners .DynamicContentHeaderWithVideo .VideoWrapper {
        position: relative;
        width: 100%;
        max-width: 100%;
        text-align: center;
        right: unset;
    }
    .DynamicContentHeaderWithVideo .VideoWrapper iframe,
    #categoryBanners .DynamicContentHeaderWithVideo .VideoWrapper iframe {
        width: 100% !important;
    }

    /* ===== Category banners: phone fixes BEYOND production parity =====
       Production has no mobile rules for these templates and they break on phones
       (overlapping / overflowing text). These are improvements, not ports.
       (The HeaderLarge fix lives in the 991 tier — it breaks at tablet widths too.) */

    /* HeaderCurrAutoShip / HeaderBulletinAutoShip (shared HeaderBannerRow markup) —
       the 25% image / 75% text split leaves the text overflowing the fixed 400px band;
       stack image above text and let the row grow with its content */
    .HeaderBannerRow {
        height: auto;
    }
    .HeaderBannerRow .HeaderBannerImageWrapper {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center;
        padding-top: 2rem;
    }
    .HeaderBannerRow .HeaderBannerImageWrapper img {
        position: relative;
        top: unset;
        left: unset;
        transform: none;
        max-width: 65%;
        max-height: 200px;
    }
    .HeaderBannerRow .HeaderBannerTextWrapper {
        position: relative;
        width: 100%;
        top: unset;
        right: unset;
        transform: none;
        padding: 2rem;
    }
    .HeaderBannerRow .HeaderBannerTextWrapper .HeaderBannerButtonWrapper a.button {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
}
/*#endregion*/

/*#endregion*/