/*!
 * YouLogix-CarCovers
 * youlogix-carcover-media.css
 * Copyright 2020-2021.
*/

.header-container.header-style-7 {
    background-image: url("../images/header-backgroud-image.png");
    background-size: 100% 100%;
}
.header-container.header-style-7 .header-middle {
    background: transparent;
}
.header-container.header-style-7
    .sm_megamenu_wrapper_horizontal_menu
    .sm_megamenu_menu
    > li
    > a
    .sm_megamenu_title {
    padding: 0 8px;
    font-size: 100%;
    color: #fff;
}
.header-container.header-style-7
    .sm_megamenu_wrapper_horizontal_menu
    .sm_megamenu_menu
    > li:hover
    > a
    .sm_megamenu_title,
.header-container.header-style-7
    .sm_megamenu_wrapper_horizontal_menu
    .sm_megamenu_menu
    > li.sm_megamenu_actived
    > a
    .sm_megamenu_title {
    background-color: transparent;
    color: #ff2d37;
}
.header-container.header-style-7 .header-top,
.header-container.header-style-7 .header-middle {
    border-bottom: 01px solid #ffffff59;
}
.header-container.header-style-7 span.free_ship,
.header-container.header-style-5 span.free_ship {
    line-height: 43px;
    font-size: unset;
}
.header-container.header-style-7 .logo-content {
    text-align: left;
}
.header-container.header-style-7 .header-links-column .hotline,
.header-container.header-style-7 .header-links-column .hotline-text {
    display: block;
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
    color: #fff;
    text-transform: none;
}
.header-container.header-style-7 .header-links-column .header-hotline {
    margin-top: 3px;
}

.header-container.header-style-5 .sm_megamenu_wrapper_horizontal_menu {
    margin-left: 0px;
}

.categories-container .categories-item .item {
    width: 25%;
}

.services-footer.services {
    padding: 20px 0px;
}

.service-item-container {
    padding: 20px 10px;
    text-align: center;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
    height: 100%;
    /*display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;*/
}

.service-item-container .service-item {
    display: inline-block;
}
.service-item-container .service-item .image-service {
    display: inline-block;
    /*background-color: #fff;*/
    /*border: 2px solid #e5e5e5;*/
    width: 60px;
    /*float: left;*/
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
.service-item-container .service-item .image-service.back-red {
    background: #e63631;
}
.service-item-container .service-item .image-service.back-blue {
    background: #0d0b0c;
}
.service-item-container .service-item .image-service img {
    padding: 10px;
}

.service-item-container .service-item .info-service,
.service-item-container .service-item .image-service-container {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0px;
    padding-top: 0px;
    float: none;
    margin: 0px 10px;
    text-align: left;
}

.service-item .info-service h3 {
    /*color: #282828;*/
    /*margin: 0 0 4px;*/
    padding: 0;
    font-size: 107.69%;
    /*text-transform: uppercase;*/
    /*font-weight: 500;*/
}

/********************   Added for PLP Page  23 April  *******************/

/*.bestseller-tab-header {
    border: 2pt solid #2dbb4d;
    border-radius: 5px 5px 0 0;
    color: #fff;
    font-size: 16px;
    background: #2dbb4d;
    font-weight: 700;
    padding: 3px;
    margin-left: -1px;
    margin-right: -.5px;
    text-align: center;
}

.mostpopular-tab-header {
    border: 2pt solid #3367c6;
    border-radius: 5px 5px 0 0;
    color: #fff;
    font-size: 16px;
    background: #3367c6;
    font-weight: 700;
    padding: 3px;
    margin-left: -1px;
    margin-right: -.5px;
    text-align: center;
}

.bestseller-tab-name {
    background: #2dbb4d;
}

.mostpopular-tab-name {
    background: #3367c6;
}

.price-features {
    text-align: left;
    padding-left: 0;
    max-width: max-content;
    margin: 0 auto;
}

.colorgreen {
    color: #adcf80;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #265a88;
    background-position: 0 -15px;
}

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.product-variation-title {
    margin-top: 0 !important;
}

.bestseller-tab-name a {
    color: #fff !important;
}

.mostpopular-tab-name a {
    color: #fff !important;
}

.text-black {
    color: #000;
}*/

/*.table-product-variation tr > td:first-child {
    vertical-align: middle;
    min-width: 150px;
    max-width: 150px;
    font-weight: 600 !important;
    font-size: 17px !important;
    letter-spacing: .05em;
}*/

/*.table-product-variation tr:nth-child(2) > td {
    border: none !important;
}*/

/*.table-product-variation td {
    min-width: 50px;
    border-top: none;
    border-right: 1pt solid #bbb;
}*/

/*.table-product-variation tr > td:nth-child(2):not(:first-child) {
    border-left: 2px solid #2dbb4d;
    border-right: 2px solid #2dbb4d;
}
.table-product-variation tr > td:nth-child(5):not(:first-child) {
    border-left: 2px solid #3367c6;
    border-right: 2px solid #3367c6;
}*/
/*.table-product-variation td.item5:not(:first-child) {
    width: 20%;
}*/

.products-table.table-striped {
    text-align: center;
}
.products-table.table-striped tbody tr.attr_row.image {
    background-color: transparent;
}

body .products-table.table-product-variation tbody tr td.best_seller {
    border-left: 2px solid #2dbb4d !important;
    border-right: 2px solid #2dbb4d !important;
}
body .products-table.table-product-variation tbody tr td.most_popular {
    border-left: 2px solid #3367c6 !important;
    border-right: 2px solid #3367c6 !important;
}

body
    .products-table.table-product-variation
    tbody
    tr:last-child
    td.most_popular {
    border-bottom: 02px solid #3367c6;
}
body
    .products-table.table-product-variation
    tbody
    tr:last-child
    td.best_seller {
    border-bottom: 2px solid #2dbb4d;
}
.products-table.table.table-striped.table-responsive td {
    vertical-align: middle;
    border-right: 01px solid #ccc;
    padding: 0.95rem;
    font-size: 15px;
    width: 15%;
}
.products-table.table.table-striped.table-responsive td.col_title {
    width: 8%;
}

body
    .products-table.table-product-variation
    tbody
    tr.attr_row.image
    td.most_popular,
body
    .products-table.table-product-variation
    tbody
    tr.attr_row.image
    td.best_seller,
body .products-table.table-product-variation tbody tr.attr_row.image td,
body
    .products-table.table-product-variation
    tbody
    tr.attr_row.best_seller_and_most_popular
    td {
    border-left: none !important;
    border-right: none !important;
}

.products-table.table.table-striped.table-responsive td:last-child {
    border-right: none;
}
.products-table.table.table-striped.table-responsive td:first-child {
    border-left: none;
}
.products-table.table-product-variation
    tr.attr_row.best_seller_and_most_popular
    .most_popular,
.products-table.table-product-variation tr.attr_row.title .most_popular {
    background: #3367c6;
}

.products-table.table-product-variation
    tr.attr_row.best_seller_and_most_popular
    .best_seller,
.products-table.table-product-variation tr.attr_row.title .best_seller {
    background: #2dbb4d;
}
.products-table.table-product-variation
    tr.attr_row.best_seller_and_most_popular
    .best_seller,
.products-table.table-product-variation
    tr.attr_row.best_seller_and_most_popular
    .most_popular,
.products-table.table-product-variation tr.attr_row.title .most_popular a,
.products-table.table-product-variation tr.attr_row.title .best_seller a {
    color: #fff;
}

.products-table tr.attr_row.best_seller_and_most_popular td,
.products-table tr.attr_row.best_seller_and_most_popular td {
    border-bottom: 05px solid #fff !important;
    border-radius: 08px 08px 0px 0px;
}

.products-table.table-product-variation
    .attr_row.title
    td
    .product.name.product-item-name {
    font-weight: normal;
    font-size: 17px;
}
.products-table.table-product-variation .product-item-image {
    padding: 20px;
}

.products-table.table-product-variation .product-item-image a {
    display: block;
    width: 90%;
    margin: auto;
}

.products-table.table.table-striped.table-responsive tr.price td {
    padding: 30px 0px;
}

.products-table.table-product-variation tr td [data-role="tocart-form"] {
    margin-top: 20px;
}
.products-table.table-product-variation tr.attr_row.title a:hover {
    text-decoration: underline;
}

/***********************************************************************************/

.why-us,
.free-shipping,
.cover-fit,
.secure-shopping,
.review-rating {
    background-color: #f2f4f5;
    color: #282828;
    padding: 08px 10px;
    border-radius: 05px;
}

.free-shipping,
.cover-fit,
.secure-shopping,
.review-rating {
    margin-bottom: 10px;
}

.free-shipping img,
.cover-fit img,
.secure-shopping img,
.review-rating img {
    max-height: 25px;
    margin-right: 10px;
}

.free-shipping a,
.cover-fit a,
.secure-shopping a,
.review-rating a {
    font-size: 14px;
    font-weight: normal;
}

body .product-info-main .product-info-stock-sku .view-count {
    display: none;
}

.product-info-price .product-statics {
    padding: 10px;
    border-radius: 05px;
}
.product-info-price .product-statics > div {
    width: 49%;
    margin: unset;
    font-size: 14px;
}

.product.info .product-static {
    padding: 20px;
    border-radius: 05px;
}
.product.info .product-static span {
    width: 11.2%;
    height: unset;
    margin: unset;
    text-align: center;
    box-sizing: border-box;
}

.product.info .product-static span a {
    display: inline-block;
}
.product.info .product-static span a img {
    display: block;
    width: 40px;
    margin: auto;
    margin-bottom: auto;
    margin-bottom: 7px;
}

.why-us-product-detail .why-title,
.why-us-product-detail .why-text {
    display: block;
    width: 100%;
}
.why-us.why-us-product-detail {
    margin-bottom: 20px;
}
.why-us-product-detail .widget.block.block-static-block {
    margin-bottom: 0px;
}
.banner-image.product-detail-services {
    margin-bottom: 20px;
}

.prod_features .features_container .feature {
    display: block;
    width: 100%;
}
.prod_features .features_container .feature .feature_label {
    margin-left: 05px;
}
.prod_features .features_container {
    display: inline-block;
    text-align: left;
    font-size: 13px;
}
.colorgreen {
    color: var(--green);
}
.colorred {
    color: var(--red);
}
.stars_rating .fa.fa-star,
.fa.fa-star-o {
    color: var(--orange);
}

.stars_rating .star-rating {
    display: inline-block;
    position: relative;
    width: 65px;
    height: 13px;
    overflow: hidden;
    background-image: url("../images/star-rating.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
.stars_rating .star-rating > span {
    display: block;
    position: absolute;
    height: 100%;
    background-image: url("../images/star-rating.png");
    background-repeat: no-repeat;
    background-position: 0px -15px;
}

.attr_text_icon_yes .attribute_text_val,
.attr_text_icon_no .attribute_text_val {
    font-size: 0px;
}
.attr_text_icon_yes .attribute_text_val::before,
.attr_text_icon_no .attribute_text_val::before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 20px;
}
.attr_text_icon_yes .attribute_text_val::before {
    color: var(--green);
    content: "\f00c";
}

.attr_text_icon_no .attribute_text_val::before {
    color: var(--red);
    content: "\f00d";
}
.view-more-link {
    display: inline-block;
    margin-top: 20px;
    width: 100%;
    text-align: center;
}
.view-more-link span.view-more {
    color: var(--primary);
    text-decoration: underline;
    font-size: 14px;
}
.view-more-link span.view-more:hover {
    color: var(--red);
}

@media (max-width: 1329px) {
    .container-search .art-search {
        background: #000;
    }
}
@media (max-width: 1200px) {
    .header-container.header-style-7 .nav-mobile-container {
        text-align: right;
    }
    .header-container.header-style-7 .nav-mobile-container .navigation-mobile {
        text-align: left;
    }
    .header-container.header-style-7
        .navigation-mobile
        .sm_megamenu_menu
        > li
        > a {
        font-weight: normal;
    }
    /*.container-search .art-search .smas-btn .btn.btn-search {
	    font-size: 0px !important;
	}*/
}

@media (max-width: 991px) {
    .header-container.header-style-7 .logo-content {
        text-align: center;
    }
    .header-container.header-style-7 .nav-mobile-container {
        text-align: left;
    }

    .why-us-home {
        width: unset !important;
    }
    .why-us-home-block .image-circle {
        width: unset !important;
    }

    /*	
    .art-search {
      background: unset !important;
      background-color: #000 !important;
	}
	.categories-item .item {
     float: unset !important;
	}*/

    /*.categories-item .content-box {
	    padding: 30px !important;
	}*/

    /*.smas-btn .btn.btn-search {
	   width: unset !important;
	}*/

    .why-us-container {
        padding: 30px 0px;
    }
    /*.container-search .art-search{background:#000;}*/
    .categories-container .categories-item .content-box {
        padding: 0px;
    }

    .categories-container {
        padding: 0px;
    }
    .categories-container .title-group {
        margin-bottom: 0px;
    }

    .header-container.header-style-5 .header-top .top-left-content {
        display: none;
    }

    .service-item-container .service-item .info-service,
    .service-item-container .service-item .image-service-container {
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    .service-item-container .service-item .image-service-container {
        margin-bottom: 10px;
    }
}

@media (min-width: 767px) and (max-width: 1329px) {
    .container-search .art-search .smas-btn .btn.btn-search {
        font-size: 0px !important;
    }
    .container-search .art-search .smas-btn .btn.btn-search::before {
        top: unset;
        font-size: 25px;
        line-height: 50px;
    }
}

@media (max-width: 767px) {
    .categories-container .categories-item .item {
        width: 50%;
    }

    .categories-container .categories-item .item .image-cat a {
        display: block;
        width: 100%;
    }
    .categories-container .categories-item .item .image-cat img {
        width: 100%;
    }
    .container-search .art-search .smas-btn .btn.btn-search {
        width: 100%;
    }

    .categories-container .categories-item .item .content-box {
        position: relative;
    }
    .categories-container .categories-item .item .cat-title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .categories-container .categories-item .item .cat-title a {
        display: inline-block;
        /*text-shadow: 0px 5px #fff;*/
        font-size: 18px;
        background: rgba(255, 45, 55, 0.8);
        color: #fff;
        padding: 20px;
    }
    .categories-container .categories-item .item .cat-title a:hover {
        text-decoration: underline;
    }
    .home5-container .sub-container {
        text-align: center;
    }
    .home5-container .sub-container .home5-car {
        display: none;
    }
    .home5-container .sub-container .home5-table-block {
        width: 96%;
        margin: auto;
    }
    .container-search .art-search .smas-caption p,
    .home5-container .title-group p.serach_head {
        text-align: center;
    }

    .why-us-home {
        width: unset !important;
    }
    .why-us-home-block .image-circle {
        width: unset !important;
    }

    .services-footer .service-item {
        margin: 10px 0;
    }

    /*.why-us-container {
	    padding: 30px 0px;
	}*/
}

@media (max-width: 600px) {
    .header-container.header-style-7 .header-links-column .hotline,
    .header-container.header-style-7 .header-links-column .hotline-text {
        line-height: 43px !important;
    }
    .header-container.header-style-7 .header-hotline .hotline-text {
        display: none;
    }
    .header-container.header-style-7 .header-middle {
        padding: 10px 0px;
    }
    .services-footer .service-item {
        margin: 10px 0;
    }
}
@media (max-width: 575px) {
    .service-item-container {
        height: unset;
        margin-bottom: 20px;
    }
    .home5-container .sub-container .home5-table-block {
        overflow-y: auto;
    }
}

@media (max-width: 500px) {
    .categories-container .categories-item .item .cat-title a {
        padding: 10px;
        font-size: 18px;
    }
    .categories-container .categories-item .item {
        width: 100%;
    }
    .services-footer .service-item {
        margin: 10px 0;
    }
}

@media (max-width: 480px) {
    .header-top .customer-action,
    .header-top .setting-store {
        display: inline-block;
    }

    .product.info .product-static span {
        width: 24%;
        margin-bottom: 20px;
    }
}

span.old-price {
    display: block !important;
}
.old-price .price-label {
    display: inline-block !important;
}

.tab-section ul {
    margin-top: 10px;
    padding-left: 0;
    list-style: none;
}
.tab-section ul li {
    text-align: center;
    letter-spacing: 1px;
    line-height: 34px;
    font-size: 28px;
    font-family: webfontregular;
}
.tab-section ul li span {
    color: red;
}

.product-items span.product-delivery {
    display: none !important;
}
.products-related span.product-delivery {
    display: none !important;
}
.default-style .resp-tabs-list li {
    font-size: 14px !important;
}

/* ===== M4 (2026-06-04): Mobile "More Information" attribute labels =====
   Parent theme template (Sm/autostore .../product/view/attributes.phtml) ships an
   inline <style> with `table tbody tr{display:flex}`, which collapses th.col.label
   to 0px width on phones -> every row label (Vehicle Year, Water, UV Protection,
   star-rating rows, etc.) disappears and only the value/stars/icons show.
   Fix: on mobile, take the rows out of flex and stack label above value.
   Scoped to the table id + the mobile breakpoint so desktop is untouched. */
@media (max-width: 767px) {
    /* !important needed: custom.min.css has a spec-202 rule
       (#html-body.catalog-product-view ... > tbody > tr {display:flex})
       that re-flexes PDP table rows and outranks a plain id selector.
       Scoped to #product-attribute-specs-table so only this table is affected. */
    #product-attribute-specs-table tbody tr {
        display: block !important;
        border-bottom: 1px solid #e2e2e2;
        padding: 7px 0;
    }
    #product-attribute-specs-table tbody tr > th.col.label {
        display: block !important;
        width: 100% !important;
        min-width: 0;
        text-align: left;
        font-weight: 600;
        color: #333;
        padding: 0 0 2px;
    }
    #product-attribute-specs-table tbody tr > td.col.data {
        display: block !important;
        width: 100% !important;
        padding: 0;
    }
}

/* ===== M2 v2 (2026-06-05): Mobile/tablet comparison → stacked per-edition cards =====
   M2 v1 made the 5-edition table horizontally scrollable, but on a phone that still
   showed only ~1.5 editions at once inside a nested scroll, with a cramped 13px
   Add-to-Cart squeezed against the column divider. Replace it with full-width stacked
   cards (rendered by table-list.phtml): one card per edition with the cover, a
   Best-Seller/Most-Popular badge, price, the full spec sheet, and a real full-width
   Add to Cart.
   Breakpoint raised to ≤991px (2026-06-05 v3): at 768–991px (iPad portrait, large
   phones landscape) the 6-column table was still cramped — ~123px Add-to-Cart buttons.
   The cards now cover phones AND portrait tablets; the table shows only ≥992px where it
   has room, and there its buttons are made full-column-width (see youlogix-carcover.css). */
@media (max-width: 991px) {
    /* hide the wide comparison table; the cards take over */
    .catalogsearch-result-index table.products-table.table-product-variation {
        display: none !important;
    }
    .catalogsearch-result-index .cc-cmp-cards {
        display: flex !important;
        flex-direction: column;
        gap: 16px;
        margin: 10px 0 22px;
    }
    .cc-cmp-card {
        position: relative;
        border: 1px solid #e3e3e3;
        border-radius: 12px;
        background: #fff;
        padding: 16px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    }
    .cc-cmp-card--featured { border-color: #16a34a; border-width: 2px; }
    .cc-cmp-badge {
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .3px;
        text-transform: uppercase;
        padding: 4px 12px;
        border-radius: 999px;
        margin-bottom: 10px;
    }
    .cc-cmp-badge--best { background: #dcfce7; color: #166534; }
    .cc-cmp-badge--popular { background: #dbeafe; color: #1e40af; }
    .cc-cmp-card-img { display: block; text-align: center; }
    .cc-cmp-card-img img {
        max-width: 100%;
        height: auto;
        max-height: 190px;
        display: inline-block;
    }
    .cc-cmp-card-title {
        font-size: 17px;
        line-height: 1.3;
        margin: 12px 0 6px;
        font-weight: 700;
    }
    .cc-cmp-card-title a { color: #1a1a1a; text-decoration: none; }
    .cc-cmp-card-price {
        font-size: 24px;
        font-weight: 800;
        color: #dc2626;
        line-height: 1.2;
        margin-bottom: 14px;
    }
    .cc-cmp-card-price .price-box { margin: 0; }
    .cc-cmp-card-price .old-price .price,
    .cc-cmp-card-price .special-price ~ .old-price .price { font-size: 15px; color: #888; }
    .cc-cmp-card-price .saving, .cc-cmp-card-price .you-save { font-size: 14px; }
    .cc-cmp-card-btn.action.primary.tocart {
        width: 100% !important;
        min-height: 50px;
        font-size: 16px !important;
        font-weight: 700;
        border-radius: 8px;
        background: #dc2626;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }
    .cc-cmp-card-link {
        display: block;
        text-align: center;
        margin: 12px 0 2px;
        padding: 10px;
        font-size: 15px;
        font-weight: 600;
        color: #1d4ed8;
        text-decoration: none;
    }
    .cc-cmp-specs {
        margin-top: 14px;
        border-top: 1px solid #ececec;
    }
    .cc-cmp-spec {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 10px 2px;
        border-bottom: 1px solid #f1f1f1;
    }
    .cc-cmp-spec-label {
        font-size: 14px;
        color: #555;
        text-transform: uppercase;
        letter-spacing: .2px;
        flex: 1 1 auto;
    }
    .cc-cmp-spec-val {
        font-size: 15px;
        color: #1a1a1a;
        font-weight: 600;
        text-align: right;
        flex: 0 0 auto;
    }
    .cc-cmp-spec-val .star-rating { display: inline-block; vertical-align: middle; }
    .cc-cmp-spec-val .colorgreen, .cc-cmp-spec-val .fa-check-square { color: #16a34a; }
    .cc-cmp-spec-val .colorred, .cc-cmp-spec-val .fa-remove { color: #dc2626; }
}

/* ===== M1 (2026-06-04): Mobile results page — hide redundant vehicle selector =====
   On phones the search-results page led with a big EMPTY, DUPLICATED "Start Here!
   Select Your Vehicle" form (~740px tall), pushing all products below the fold — even
   though the shopper already chose their vehicle to reach this page (the on-page form
   doesn't even reflect that selection). Hide it on mobile so the products lead; the
   header search bar remains for changing vehicle. Scoped to the results page only. */
@media (max-width: 767px) {
    .catalogsearch-result-index .search-temp-form {
        display: none !important;
    }
}

/* ===== M5 (2026-06-05): Mobile cart line-item controls =====
   On phones the Edit / Remove-item links sat at ~32px tall with 13px text (below the
   44px tap-target / 16px no-zoom standards), and the qty box was a cramped 47px at 13px
   (iOS zooms the page on focus for any <16px field). Make them comfortable, real tap
   targets. Scoped to the cart page + ≤767px so desktop is untouched. */
@media (max-width: 767px) {
    .checkout-cart-index .cart.item .action-edit,
    .checkout-cart-index .cart.item .action-delete,
    .checkout-cart-index .cart.item .actions-toolbar .action {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 9px 16px !important;
        margin: 4px 6px 4px 0 !important;
        font-size: 14px !important;
        line-height: 1.2;
        border: 1px solid #d4d4d4;
        border-radius: 8px;
        background: #fff;
        color: #333 !important;
    }
    .checkout-cart-index .cart.item .action-delete {
        color: #c0392b !important;
        border-color: #e3bdb8;
    }
    /* qty box: wider + 16px to stop iOS focus-zoom, 44px tall */
    .checkout-cart-index .cart.item .input-text.qty,
    .checkout-cart-index .cart.item input.qty,
    .checkout-cart-index .cart .field.qty .control input.qty {
        width: 60px !important;
        min-width: 60px !important;
        height: 44px !important;
        font-size: 16px !important;
        text-align: center;
    }
}

/* ===== M7 (2026-06-05): Home buying-guide table + global mobile readability =====
   1) The home "buying guide" comparison table (.home-car-sec) is 436px — wider than a
      390px phone — and was being clipped (an ancestor's overflow:hidden), hiding the
      right-hand rating columns. Constrain its wrapper to the viewport and let it scroll.
   2) Now that pinch-zoom is re-enabled site-wide (child default_head_blocks.xml), iOS
      will focus-zoom on any <16px input; keep the always-present header search + footer
      newsletter fields at 16px so focusing them doesn't jump-zoom the page. */
@media (max-width: 767px) {
    .home-car-sec.table-responsive,
    .cms-index-index .home-car-sec.table-responsive {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    input#searchbox,
    input#newsletter-footer,
    input#customer-email,
    .chosen-search-input,
    .block-search input.input-text,
    .block.newsletter input[type="email"] {
        font-size: 16px !important;
    }
}

/* ===== M8 (2026-06-05): Mobile PDP polish =====
   - Qty box was a wide 110px at 13px (iOS focus-zoom); slim it to 64px @16px and let
     Add to Cart grow to fill the rest of the row for a stronger CTA.
   - Review form fields were 13px (focus-zoom) and the Submit button was a 35px-tall
     target; bump fields to 16px and give Submit a 44px tap target. Scoped ≤767px. */
@media (max-width: 767px) {
    /* width must out-specify custom-cover.css:1019 (#qty + 6 classes + !important) */
    body .product-info-main .product-options-bottom .box-tocart .fieldset .qty .control #qty,
    body .product-info-main .product-add-form .box-tocart .fieldset .qty .control #qty,
    .catalog-product-view input.input-text.qty {
        width: 64px !important;
        min-width: 64px !important;
        font-size: 16px !important;
    }
    .catalog-product-view .product-add-form .fieldset .field.qty {
        flex: 0 0 auto !important;
    }
    .catalog-product-view .product-add-form .fieldset .actions {
        flex: 1 1 auto !important;
    }
    .catalog-product-view .product-add-form .actions .action.tocart,
    .catalog-product-view #product-addtocart-button {
        width: 100% !important;
    }
    /* review form: real 16px fields + 44px Submit */
    #review-form input[type="text"],
    #review-form textarea,
    #nickname_field,
    #summary_field,
    #review_field {
        font-size: 16px !important;
    }
    #review-form .action.submit.primary,
    #review-form button.action.submit,
    .review-form .action.submit {
        min-height: 44px !important;
        font-size: 15px !important;
        padding: 11px 22px !important;
    }
}

/* ===== M9 (2026-06-05): Secondary-page sweep — account form fields =====
   Swept the non-journey pages at 390px (login, register, contact, FAQ, about, articles,
   reviews, customer-service, terms): all CMS/content pages were already clean (no overflow,
   no tiny text, contact form already 16px). The only gap was the customer-account forms
   (login/register, and by the same markup forgot-password / account-edit / address book):
   their `.input-text` fields rendered at 13px → iOS focus-zoom. Bump main-content form
   fields to 16px. Consistent with the cart/checkout/PDP fields already set to 16px. */
@media (max-width: 767px) {
    .column.main input.input-text,
    .column.main textarea.input-text,
    .form-create-account input.input-text,
    .form-login input.input-text {
        font-size: 16px !important;
    }
}

/* ===== M11 (2026-06-05): Mobile vehicle-selector dropdown options (user feedback) =====
   The chosen.js Year/Make/Model/Body dropdowns looked cramped when opened on a phone: the
   option rows were 35px tall at 13px — below the 44px tap-target and hard to read while
   driving the most important interaction on the site (picking a vehicle). The closed trigger
   (49px) and the type-ahead search (16px) were already fine; this enlarges just the option
   rows for comfortable reading + tapping. */
@media (max-width: 991px) {
    .chosen-container .chosen-results li {
        font-size: 15px !important;
        line-height: 1.4 !important;
        padding: 13px 14px !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }
    .chosen-container .chosen-results li.group-result {
        min-height: 0 !important;
        padding: 8px 12px !important;
    }
    /* keep the type-ahead search comfortable + zoom-proof */
    .chosen-container .chosen-search input,
    .chosen-container .chosen-search-input {
        font-size: 16px !important;
        min-height: 40px !important;
        padding: 8px 28px 8px 10px !important;
    }
}