/*
 * Unified portrait/mobile layout for smartphones and small tablets.
 * The original tablet two-column layout is intentionally overridden below.
 */
@media only screen and (max-width: 992px) {
    body {
        padding-top: 0 !important;
    }

    main.maincontent {
        padding-top: 0;
    }

    header.globalheader {
        display: block !important;
        position: relative;
        z-index: 20;
    }

    header.globalheader .nav-wrapper {
        display: block;
        height: 260px;
        min-height: 260px;
        overflow: hidden;
        padding: 0;
        background: #fff;
    }

    header.globalheader .nav-wrapper > .container {
        height: 260px;
        min-height: 260px;
    }

    header.globalheader .nav-wrapper .row-grid {
        display: flex;
        align-items: stretch;
        height: 260px;
        min-height: 260px;
        margin: 0;
    }

    header.globalheader .nav-wrapper .col-grid.s12 {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        width: 100%;
        height: 260px;
        min-height: 260px;
        padding: 0;
    }

    header.globalheader .mobile-nav-button-wrapper {
        min-height: 260px;
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        width: 64px !important;
        max-width: 64px;
        padding: 0;
    }

    header.globalheader .mobile-nav-button {
        display: block;
        padding: 0.75rem;
        color: #111;
    }

    header.globalheader .unified-mobile-logo {
        flex: 1 1 auto;
        width: auto !important;
        max-width: none;
        min-width: 0;
        margin: 0;
        overflow: hidden;
        justify-content: center;
    }

    header.globalheader .unified-mobile-logo.mobile-nav-button-wrapper {
        width: auto !important;
        max-width: none;
    }

    header.globalheader .unified-mobile-logo #logo {
        display: block;
        width: auto;
        max-width: 100%;
    }

    header.globalheader .unified-mobile-logo #logo-image {
        display: block;
        width: auto;
        max-width: 100%;
        height: 260px;
        object-fit: contain;
    }

    header.globalheader .tree-wrapper {
        height: 168px;
        min-height: 168px;
        margin: 0 !important;
        overflow: hidden;
        background: #ffd42a;
        line-height: 168px;
    }

    header.globalheader .tree-wrapper .container {
        height: 168px;
    }

    header.globalheader .tree-title {
        text-align: center;
        position: relative;
        z-index: 10;
        pointer-events: none;
    }

    header.globalheader .tree-title .toggle-menu {
        display: inline-flex;
        width: auto;
        max-width: calc(100vw - 2rem);
        min-width: 0;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 11;
        pointer-events: auto;
        color: #111;
        font-size: 1.8rem;
        font-family: Merriweather, Georgia, serif;
        background: transparent;
        border: 0;
        padding: 0 0.5rem;
        cursor: pointer;
    }

    .unified-mobile-layout .breadcrumbs {
        min-height: 168px;
        display: flex !important;
        align-items: center;
        padding: 1rem;
        font-size: 1.55rem;
        line-height: 1.25;
        box-sizing: border-box;
    }

    body {
        padding-bottom: 78px;
    }

    /* Original tablet columns disabled for the unified mobile test. */
    .product-wrapper .col-grid.s12.l7,
    .product-wrapper .col-grid.s12.l8,
    .product-wrapper .col-grid.s12.l5,
    .product-wrapper .col-grid.s12.l4 {
        width: 100%;
        float: none;
    }

    .breadcrumbs,
    .breadcrumbs a,
    .breadcrumbs a:visited {
        color: #333;
        font-size: 1.05rem;
        line-height: 1.35;
    }

    .product-breadcrumbs {
        margin-bottom: 0.75rem;
    }

    body:has(.product-breadcrumbs) .nav-wrapper,
    body:has(.product-breadcrumbs) .tree-wrapper {
        margin-bottom: 0.375rem;
    }

    .product-wrapper {
        margin-top: 0;
    }

    .product-wrapper .product-title {
        margin: 0.375rem 0 0.5rem;
        font-size: clamp(1.45rem, 5vw, 2rem);
        line-height: 1.2;
    }

    .product-gallery {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }

    .product-gallery .image#product-core-image {
        padding: 0;
        border-radius: 0;
        overflow: hidden;
        touch-action: pan-y pinch-zoom;
    }

    .product-gallery .image#product-core-image > a {
        display: block;
    }

    .product-gallery .image#product-core-image > a > img {
        display: block;
        width: 100%;
        height: auto;
    }

    .product-gallery .more-images {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        margin: 0;
        padding: 0.375rem 0.25rem 0.25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .product-gallery .more-images .image {
        flex: 0 0 64px;
        width: 64px;
        min-width: 64px;
        height: 64px;
        line-height: 62px;
        margin: 0;
        overflow: hidden;
    }

    .product-gallery .more-images .image img {
        display: inline-block;
        max-width: 100%;
        max-height: 100%;
    }

    .product-list.thumbs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .product-list.thumbs > li,
    .product-list.thumbs.carousel li:first-child {
        width: auto;
        min-width: 0;
        margin: 0;
        float: none;
    }

    .product-list.thumbs li .pl-item-wrapper {
        height: auto;
        min-height: 100%;
        overflow: visible;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0.5rem;
    }

    .product-list.thumbs li .badge-wrapper {
        min-height: 0;
        line-height: normal;
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-list.thumbs li .pl-item-info {
        position: static;
        margin-top: auto;
        padding: 0.5rem 0 0;
        border-top: 0;
    }

    .product-list.thumbs li .pl-item-info-expandable,
    .product-list.thumbs li .offers {
        background: transparent;
    }

    .product-list.thumbs li .pl-item-info-expandable {
        max-height: none;
        padding-top: 0;
    }

    .mobile-purchase-bar {
        position: fixed;
        z-index: 1000;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        margin: 0;
        padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
        text-align: left;
        background: #fde0c0;
        border-top: 1px solid rgba(0, 0, 0, 0.12);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
    }

    .mobile-purchase-bar .add2cart {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
    }

    .mobile-purchase-bar .price-wrapper {
        display: flex;
        flex: 0 0 30%;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.125rem;
        padding: 0;
        line-height: 1.1;
    }

    .mobile-purchase-bar .compare-at-price {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.1;
    }

    .mobile-purchase-bar .price {
        font-size: 1.1rem;
        line-height: 1.15;
        white-space: nowrap;
    }

    .mobile-purchase-bar .price small {
        display: none;
    }

    .mobile-purchase-actions {
        display: flex;
        flex: 1 1 auto;
        align-items: stretch;
        gap: 0.5rem;
        order: 0;
        width: auto;
        font-size: 0;
    }

    .mobile-purchase-bar .qty-wrapper {
        display: none;
    }

    .mobile-purchase-actions .submit-wrapper,
    .mobile-purchase-actions .quickorder-custom-button,
    .mobile-purchase-actions .quickorder-custom-button-cart,
    .mobile-purchase-actions .quickorder-custom-button-cart.default,
    .mobile-purchase-actions .quickorder-custom-form {
        display: block !important;
        flex: 1 1 50% !important;
        min-width: 0;
        max-width: none;
        width: calc(50% - 0.25rem) !important;
        margin: 0;
    }

    .mobile-purchase-actions > * {
        display: block !important;
        flex: 1 1 50% !important;
        min-width: 0;
        max-width: none;
        width: calc(50% - 0.25rem) !important;
    }

    .mobile-purchase-actions .submit-wrapper {
        order: 2;
    }

    .mobile-purchase-actions .quickorder-custom-button,
    .mobile-purchase-actions .quickorder-custom-button-cart,
    .mobile-purchase-actions .quickorder-custom-button-cart.default,
    .mobile-purchase-actions .quickorder-custom-form {
        order: 1;
    }

    .mobile-purchase-actions .quickorder-custom-button .button,
    .mobile-purchase-actions .quickorder-custom-button-cart .button,
    .mobile-purchase-actions .quickorder-custom-button-cart.default .button,
    .mobile-purchase-actions .quickorder-custom-form .button {
        width: 100%;
        font-size: 0.82rem;
        white-space: normal;
    }

    .mobile-purchase-actions .button,
    .mobile-purchase-actions .submit-wrapper input[type="submit"] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3rem;
        min-height: 3rem;
        line-height: 1.1;
        margin: 0;
        padding: 0 0.4rem;
        width: 100%;
        font-size: 0.82rem;
        text-align: center;
        white-space: normal;
    }

    .mobile-purchase-bar .added2cart {
        flex: 0 0 100%;
        order: 3;
        margin-top: 0.25rem;
        text-align: center;
    }

    .mobile-purchase-bar .added2cart a:first-child {
        display: inline-block;
        padding: 0.75rem 1rem;
        border-radius: 4px;
        background: #2e80a9;
        color: #fff;
    }
}
/* Unified switch around the working mobile-theme rules. */
.unified-mobile-layout {
    display: none;
}

@media only screen and (min-width: 993px) {
    .unified-desktop-layout {
        display: block;
    }

    .unified-mobile-layout {
        display: none !important;
    }
}

@media only screen and (max-width: 992px) {
    .unified-desktop-layout {
        display: none !important;
    }

    .unified-mobile-layout {
        display: block;
    }

    .unified-mobile-layout[aria-hidden="true"] {
        display: none;
    }

    .breadcrumbs,
    .breadcrumbs.product-breadcrumbs {
        display: block !important;
        width: 100%;
        margin: 0;
        padding: 0.75rem;
        overflow-wrap: anywhere;
        box-sizing: border-box;
        background: #f5f5f5;
        color: #333;
        font-size: 1rem;
        line-height: 1.35;
    }

    .breadcrumbs a,
    .breadcrumbs a:visited {
        color: #333;
    }
}

@media only screen and (max-width: 992px) {
    header.globalheader {
        position: relative;
    }

    header.globalheader .nav-wrapper {
        height: 260px;
        min-height: 260px;
    }

    header.globalheader .nav-wrapper > .container {
        position: relative;
        height: 260px;
        min-height: 260px;
    }

    header.globalheader .nav-wrapper > .container > .row-grid.hide-on-large-only {
        position: relative;
        z-index: 2;
        height: 260px;
        min-height: 260px;
    }

    header.globalheader .nav-wrapper > .container > .row-grid.hide-on-large-only > .col-grid.s12 {
        height: 260px;
        min-height: 260px;
        align-items: center;
        justify-content: space-between;
    }

    header.globalheader .mobile-nav-button-wrapper {
        width: 82px !important;
        max-width: 82px;
        height: 260px;
        min-height: 260px;
        justify-content: center;
        background: transparent;
    }

    header.globalheader .mobile-nav-button,
    header.globalheader .mobile-nav-button:visited {
        min-width: 0;
        padding: 0;
        color: #111 !important;
    }

    header.globalheader .mobile-nav-button .material-icons {
        font-size: 64px;
        line-height: 1;
    }

    header.globalheader .header-line {
        position: absolute;
        z-index: 3;
        top: 0;
        left: 33.3333%;
        width: 33.3333%;
        height: 260px;
        margin: 0;
        overflow: hidden;
        background: #fff;
    }

    header.globalheader .header-line > .container,
    header.globalheader .header-line > .container > .row-grid,
    header.globalheader .header-line .table-grid,
    header.globalheader .header-line .col-grid {
        width: 100%;
        height: 260px;
        min-height: 260px;
        margin: 0;
        padding: 0;
    }

    header.globalheader .header-line .table-grid,
    header.globalheader .header-line .col-grid {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header.globalheader .header-line #logo {
        display: flex;
        width: 100%;
        height: 260px;
        align-items: center;
        justify-content: center;
    }

    header.globalheader .header-line #logo img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 260px;
        object-fit: contain;
    }

    header.globalheader .tree-wrapper {
        position: relative;
        z-index: 4;
    }
}

@media only screen and (max-width: 992px) {
    header.globalheader .nav-wrapper,
    header.globalheader .nav-wrapper > .container,
    header.globalheader .nav-wrapper > .container > .row-grid.hide-on-large-only,
    header.globalheader .nav-wrapper > .container > .row-grid.hide-on-large-only > .col-grid.s12,
    header.globalheader .mobile-nav-button-wrapper,
    header.globalheader .header-line,
    header.globalheader .header-line > .container,
    header.globalheader .header-line > .container > .row-grid,
    header.globalheader .header-line .table-grid,
    header.globalheader .header-line .col-grid,
    header.globalheader .header-line #logo {
        height: 130px;
        min-height: 130px;
    }

    header.globalheader .header-line #logo img {
        max-height: 130px;
    }

    header.globalheader .mobile-nav-button-wrapper {
        width: 64px !important;
        max-width: 64px;
    }

    header.globalheader .mobile-nav-button .material-icons {
        font-size: 48px;
    }

    .breadcrumbs.product-breadcrumbs,
    .unified-mobile-layout .breadcrumbs,
    .unified-mobile-layout .breadcrumbs.product-breadcrumbs {
        min-height: 0 !important;
        height: auto !important;
        margin-bottom: 0 !important;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .product-wrapper,
    .unified-product-mobile {
        margin-top: 0 !important;
    }
}

@media only screen and (max-width: 992px) {
    header.globalheader .nav-wrapper,
    header.globalheader .nav-wrapper > .container,
    header.globalheader .nav-wrapper > .container > .row-grid.hide-on-large-only,
    header.globalheader .nav-wrapper > .container > .row-grid.hide-on-large-only > .col-grid.s12,
    header.globalheader .mobile-nav-button-wrapper,
    header.globalheader .header-line,
    header.globalheader .header-line > .container,
    header.globalheader .header-line > .container > .row-grid,
    header.globalheader .header-line .table-grid,
    header.globalheader .header-line .col-grid,
    header.globalheader .header-line #logo {
        height: 80px;
        min-height: 80px;
    }

    header.globalheader .header-line #logo img {
        max-height: 80px;
    }

    header.globalheader .mobile-nav-button-wrapper {
        width: 48px !important;
        max-width: 48px;
    }

    header.globalheader .mobile-nav-button .material-icons {
        font-size: 40px;
    }

    header.globalheader .tree-title .toggle-menu {
        display: inline-flex;
        width: 80px;
        min-width: 80px;
        max-width: 80px;
        height: 80px;
        min-height: 80px;
        padding: 0;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        line-height: 1;
    }

    header.globalheader .tree-wrapper .tree-title > .toggle-menu,
    header.globalheader .tree-wrapper .tree-title > button.toggle-menu {
        box-sizing: border-box;
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        padding: 0 !important;
        pointer-events: auto !important;
        cursor: pointer;
    }
}

@media only screen and (max-width: 992px) {
    header.globalheader .nav-wrapper .row-grid.hide-on-med-and-down,
    header.globalheader .nav-wrapper .row-grid.hide-on-med-and-down + *,
    header.globalheader .nav-wrapper .authpopup,
    header.globalheader .nav-wrapper .search-wrapper,
    header.globalheader .nav-wrapper .search-form {
        display: none !important;
    }

    header.globalheader .tree-wrapper,
    header.globalheader .tree-wrapper .container,
    header.globalheader .tree-title {
        height: 30px !important;
        min-height: 30px !important;
        line-height: 30px !important;
    }

    header.globalheader .tree-wrapper {
        overflow: visible;
        position: relative;
        z-index: 20;
    }

    header.globalheader .tree-title {
        width: 100%;
        cursor: pointer;
        pointer-events: auto;
        text-align: center;
    }

    header.globalheader .tree-wrapper .tree-title > .toggle-menu,
    header.globalheader .tree-wrapper .tree-title > button.toggle-menu {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 30px !important;
        vertical-align: top;
    }

    header.globalheader .tree-wrapper .sidebar-box {
        position: absolute;
        top: 30px;
        left: 0;
        right: 0;
        z-index: 30;
        max-height: calc(100vh - 30px);
        overflow-y: auto;
    }
}

@media only screen and (max-width: 992px) {
    header.globalheader .header-line .col-grid.m6:nth-child(2),
    header.globalheader .header-line .authpopup,
    header.globalheader .header-line .search-wrapper,
    header.globalheader .header-line .search-form,
    header.globalheader .nav-wrapper .row-grid.hide-on-med-and-down {
        display: none !important;
    }

    header.globalheader .tree-wrapper,
    header.globalheader .tree-wrapper .container,
    header.globalheader .tree-title {
        height: 60px !important;
        min-height: 60px !important;
        line-height: 60px !important;
    }

    header.globalheader .tree-wrapper {
        overflow: visible;
    }

    header.globalheader .tree-wrapper .tree-title > .toggle-menu,
    header.globalheader .tree-wrapper .tree-title > button.toggle-menu {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        line-height: 60px !important;
    }

    header.globalheader .tree-wrapper .sidebar-box {
        top: 60px;
        background: #fff;
        opacity: 1;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    header.globalheader .tree-wrapper .sidebar-box ul,
    header.globalheader .tree-wrapper .sidebar-box li,
    header.globalheader .tree-wrapper .sidebar-box a {
        background-color: #fff;
    }
}

@media only screen and (max-width: 992px) {
    header.globalheader .header-line {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 33.3333%;
    }

    header.globalheader .header-line > .container,
    header.globalheader .header-line > .container > .row-grid,
    header.globalheader .header-line .table-grid,
    header.globalheader .header-line .col-grid {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header.globalheader .header-line #logo {
        display: flex;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        align-items: center;
        justify-content: center;
    }

    header.globalheader .header-line #logo img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
    }

    header.globalheader .tree-wrapper .sidebar-box {
        width: 100%;
        background: #fff;
        border-top: 1px solid #ddd;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    }

    header.globalheader .tree-wrapper .sidebar-box ul.base-menu {
        width: 100%;
        margin: 0;
        padding: 0;
        background: #fff;
    }

    header.globalheader .tree-wrapper .sidebar-box ul.base-menu > li {
        display: flex;
        width: 100%;
        min-height: 82px;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        background: #fff;
        border-bottom: 1px solid #ddd;
        text-align: center;
    }

    header.globalheader .tree-wrapper .sidebar-box ul.base-menu > li > a {
        display: flex;
        width: 100%;
        min-height: 82px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 0 1rem;
        color: #222;
        background: #fff;
        font-family: Merriweather, Georgia, serif;
        font-size: 1.25rem;
        line-height: 1.25;
        text-align: center;
    }

    header.globalheader .tree-wrapper .sidebar-box ul.base-menu > li.parent > a {
        position: relative;
        padding-right: 3.5rem;
    }

    header.globalheader .tree-wrapper .sidebar-box ul.base-menu > li > a .toggle-menu-child {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: #222;
    }

    header.globalheader .tree-wrapper .sidebar-box ul.base-menu > li > ul {
        width: 100%;
        background: #f7f7f7;
    }
}

@media only screen and (max-width: 992px) {
    header.globalheader .tree-wrapper .tree-title > .toggle-menu,
    header.globalheader .tree-wrapper .tree-title > button.toggle-menu {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 30px !important;
        vertical-align: middle;
    }
}