/* STLMEDIA mobile-first refinements for Trusted + WooCommerce. */

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body,
#page {
    overflow-wrap: anywhere;
}

img,
svg,
video,
iframe {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

/*
 * Trusted keeps #primary at its normal content/sidebar width even when it has
 * the full-width class. The block-based cart and checkout are wider than that
 * column, so their centred layout can start outside the left edge of the page.
 */
body.woocommerce-cart #primary.full-width,
body.woocommerce-checkout #primary.full-width {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-inline: 0 !important;
}

body.woocommerce-cart #primary.full-width .entry-content,
body.woocommerce-checkout #primary.full-width .entry-content,
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-cart .wc-block-cart,
body.woocommerce-checkout .wc-block-checkout {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

/* Give desktop product photos a little more presence without changing mobile cards. */
@media (min-width: 901px) {
    body.stlmedia-list-view-active .stlmedia-product-list-inner {
        grid-template-columns: 165px minmax(0, 1fr) 190px;
    }

    body.stlmedia-list-view-active .stlmedia-product-image {
        min-height: 132px;
    }

    body.stlmedia-list-view-active .stlmedia-product-image img {
        max-width: 145px !important;
        height: 132px !important;
        object-fit: contain;
    }
}

@media (max-width: 900px) {
    .container {
        width: auto;
        max-width: 100%;
        margin-inline: auto;
        padding-inline: 16px;
    }

    #primary,
    #secondary,
    .content-area,
    .widget-area {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-inline: 0 !important;
    }

    #secondary {
        margin-top: 28px;
    }

    .site-branding,
    .site-logo,
    .custom-logo-link {
        max-width: 100%;
    }

    .custom-logo-link img,
    .custom-logo {
        width: auto;
        max-width: min(100%, 280px);
        height: auto;
    }

    .aws-container,
    .aws-search-form,
    .aws-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    .aws-container .aws-search-field {
        min-height: 46px;
        font-size: 16px;
    }

    .aws-container .aws-search-btn {
        min-width: 48px;
    }

    .main-navigation a,
    .menu-toggle {
        min-height: 44px;
    }

    .woocommerce .woocommerce-result-count,
    .woocommerce .woocommerce-ordering {
        width: 100%;
        float: none;
        margin: 0 0 12px;
    }

    .woocommerce .woocommerce-ordering select {
        width: 100%;
        min-height: 44px;
        padding: 8px 36px 8px 12px;
        font-size: 16px;
    }

    .woocommerce nav.woocommerce-pagination ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        border: 0;
        gap: 6px;
    }

    .woocommerce nav.woocommerce-pagination ul li {
        border: 1px solid #d9dee4;
    }

    .woocommerce nav.woocommerce-pagination ul li a,
    .woocommerce nav.woocommerce-pagination ul li span {
        min-width: 42px;
        min-height: 42px;
        display: grid;
        place-items: center;
    }

    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100% !important;
        float: none !important;
    }

    .woocommerce div.product div.summary {
        margin-top: 22px;
    }

    .woocommerce div.product form.cart,
    .woocommerce div.product form.cart .variations,
    .woocommerce div.product form.cart .variations tbody,
    .woocommerce div.product form.cart .variations tr,
    .woocommerce div.product form.cart .variations th,
    .woocommerce div.product form.cart .variations td {
        width: 100%;
    }

    .woocommerce div.product form.cart .button {
        min-height: 48px;
    }

    .woocommerce table.shop_table_responsive tr td,
    .woocommerce-page table.shop_table_responsive tr td {
        padding-block: 12px;
    }

    .woocommerce-cart .cart-collaterals .cart_totals,
    .woocommerce-checkout .col2-set .col-1,
    .woocommerce-checkout .col2-set .col-2 {
        width: 100% !important;
        float: none !important;
    }

    .woocommerce form .form-row-first,
    .woocommerce form .form-row-last {
        width: 100%;
        float: none;
    }

    .woocommerce form .input-text,
    .woocommerce form select,
    .select2-container .select2-selection--single {
        min-height: 46px;
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .main-header {
        min-height: clamp(260px, 75vw, 450px) !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .site-header {
        position: relative;
    }

    .site-header > .container {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 78px;
        padding: 10px 122px 10px 12px;
    }

    #site-branding {
        width: auto !important;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        line-height: 0;
    }

    #site-branding .custom-logo-link,
    #site-branding .custom-logo {
        display: block;
    }

    #site-branding .custom-logo {
        width: auto !important;
        max-width: 190px !important;
        max-height: 54px;
        object-fit: contain;
    }

    #top-info {
        position: absolute !important;
        top: 50% !important;
        right: 62px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        transform: translateY(-50%);
    }

    #top-info .top-tel {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    #top-info .top-login,
    #top-info .top-cart,
    #top-info .top-login > a,
    #top-info .top-cart > a {
        width: 42px !important;
        min-width: 42px;
        height: 44px !important;
        min-height: 44px;
        margin: 0 !important;
        padding: 0 !important;
    }

    #top-info .top-login > a,
    #top-info .top-cart > a {
        display: grid !important;
        place-items: center;
    }

    #top-info .top-cart .woocommerce-Price-amount {
        display: none !important;
    }

    .site-navigation {
        position: absolute !important;
        top: 0;
        right: 0;
        width: 58px !important;
        min-height: 78px;
        z-index: 20;
        background: transparent !important;
    }

    .site-navigation > .container {
        width: 100%;
        height: 78px;
        padding: 0 !important;
    }

    .site-navigation .toggle-nav {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 78px;
        margin: 0 !important;
        padding: 0 !important;
    }

    .site-navigation .menu-main1-container {
        position: absolute;
        top: 78px;
        right: 0;
        width: min(92vw, 360px);
        max-height: calc(100vh - 78px);
        overflow-y: auto;
        background: #052440;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .22);
    }

    .site-navigation ul li a {
        min-height: 48px;
        padding: 13px 16px !important;
    }

    .main-header {
        margin-top: 0 !important;
    }

    .wp-block-cover,
    .wp-block-cover-image {
        min-height: clamp(230px, 62vw, 360px) !important;
    }

    .wp-block-cover img.wp-block-cover__image-background,
    .wp-block-cover-image img.wp-block-cover__image-background {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .container {
        padding-inline: 12px;
    }

    h1,
    .entry-title,
    .woocommerce-products-header__title {
        font-size: clamp(24px, 8vw, 32px);
        line-height: 1.2;
    }

    h2 {
        font-size: clamp(21px, 6vw, 27px);
        line-height: 1.25;
    }

    p,
    li,
    input,
    select,
    textarea {
        line-height: 1.55;
    }

    .top-login,
    .top-cart,
    .top-bar .widget {
        max-width: 100%;
    }

    body.stlmedia-list-view-active ul.products li.product.stlmedia-product-list-item {
        border: 1px solid #d9dee4 !important;
        border-radius: 8px !important;
        margin-bottom: 12px !important;
        overflow: hidden;
    }

    .stlmedia-product-list-inner {
        grid-template-columns: 84px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 12px 10px !important;
    }

    .stlmedia-product-image {
        min-height: 84px !important;
    }

    .stlmedia-product-image img {
        width: 80px !important;
        max-width: 80px !important;
        height: 80px !important;
    }

    .stlmedia-product-sku-title {
        margin-bottom: 6px !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    .stlmedia-product-categories,
    .stlmedia-product-name,
    .stlmedia-product-description,
    .stlmedia-product-description p,
    .stlmedia-product-specs,
    .stlmedia-product-stock,
    .stlmedia-compatibility-toggle {
        font-size: 14px !important;
    }

    .stlmedia-product-actions {
        grid-column: 1 / -1 !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding-top: 4px;
    }

    .stlmedia-product-price {
        font-size: 20px !important;
        text-align: left !important;
    }

    .stlmedia-product-actions .button,
    .stlmedia-product-actions .added_to_cart,
    .stlmedia-view-product,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit {
        min-height: 48px !important;
        padding: 13px 14px !important;
        white-space: normal;
        touch-action: manipulation;
    }

    .stlmedia-compatibility-content {
        padding: 10px 12px;
    }

    .woocommerce ul.products:not(.stlmedia-product-list) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .woocommerce ul.products:not(.stlmedia-product-list) li.product,
    .woocommerce-page ul.products:not(.stlmedia-product-list) li.product {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        float: none !important;
    }

    .woocommerce ul.products li.product .woocommerce-loop-category__title,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs {
        padding: 0;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        display: block;
        width: 100%;
        margin: 0 0 5px;
    }

    .woocommerce div.product form.cart .quantity,
    .woocommerce div.product form.cart .single_add_to_cart_button {
        margin-bottom: 10px;
    }

    .woocommerce-checkout #payment ul.payment_methods,
    .woocommerce-checkout #payment div.form-row {
        padding: 14px;
    }
}

@media (max-width: 380px) {
    .site-header > .container {
        padding-right: 108px;
    }

    #site-branding .custom-logo {
        max-width: 158px !important;
        max-height: 48px;
    }

    #top-info {
        right: 56px !important;
    }

    #top-info .top-login,
    #top-info .top-login > a {
        display: none !important;
    }

    .container {
        padding-inline: 10px;
    }

    .stlmedia-product-list-inner {
        grid-template-columns: 72px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding-inline: 8px !important;
    }

    .stlmedia-product-image img {
        width: 68px !important;
        max-width: 68px !important;
        height: 72px !important;
    }

    .woocommerce ul.products:not(.stlmedia-product-list) {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}