/* maker_details -> sam-store-design models.php glue */
.sam-models-page .ct-videoSection,
.sam-models-page .sam-hide-picker,
.sam-models-page .red1,
.sam-models-page .cl-filter,
.sam-models-page .nav-prex-next.productBtns,
.sam-models-page .show_more_breadcrumb,
.sam-models-page .car-lists .timer,
.sam-models-page .product_timer,
.sam-models-page h4.accordianHead,
.sam-models-page #check_all_btn,
.sam-models-page .load-more-data { display: none !important; }

/* legacy .text-bread -> design .breadcrumb-container look */
.sam-models-page .text-bread.breadcrumb-container {
    display: block;
    overflow: visible;
    height: auto;
    white-space: normal;
    width: 100%;
    float: none;
    background-color: #f0f0f0;
    padding: 15px 40px;
    margin: 0;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #333;
}
.sam-models-page .text-bread.breadcrumb-container a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
}
.sam-models-page .text-bread.breadcrumb-container a:hover { text-decoration: underline; }

/* one unified models grid across all vehicle categories (models are grouped per
   category server-side; flatten the wrappers so every card joins a single grid) */
.sam-models-page #productsearch_list_show {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    float: none;
    width: 100%;
}
.sam-models-page #productsearch_list_show .model-parent,
.sam-models-page #productsearch_list_show .brand_complete_info,
.sam-models-page #productsearch_list_show .model_maker_parent,
.sam-models-page #productsearch_list_show #product_maker_block,
.sam-models-page #productsearch_list_show .AllProducts { display: contents; }

@media screen and (max-width: 1024px) { .sam-models-page #productsearch_list_show { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 768px)  { .sam-models-page #productsearch_list_show { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 480px)  { .sam-models-page #productsearch_list_show { grid-template-columns: 1fr; } }

/* model-name link: inherit the design's .model-name styling (beat .actn-btn) */
.sam-models-page .pro-item-title.model-name a,
.sam-models-page .pro-item-title.model-name a:hover,
.sam-models-page .pro-item-title.model-name a:focus {
    color: #000 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-transform: none !important;
}

/* selected state -> design orange outline (JS adds .boarder_2_red to .pro-item) */
.sam-models-page .model-card:has(.boarder_2_red) { outline: 3px solid #ff9900 !important; }
.sam-models-page .pro-item.boarder_2_red { outline: none !important; border: none !important; box-shadow: none !important; }
.sam-models-page .model-card { cursor: pointer; }

/* grid sits inside legacy floats — neutralize */
.sam-models-page .AllProducts.models-grid { float: none; }
.sam-models-page .main-page { padding-top: 0; }
.sam-models-page .car-lists { text-align: left; }

/* RTL (Arabic) */
html[dir="rtl"] .sam-models-page .back-arrow svg,
[dir="rtl"] .sam-models-page .back-arrow svg { transform: scaleX(-1); }
html[dir="rtl"] .sam-models-page .models-header img { margin-right: 0; margin-left: 15px; }

@media screen and (max-width: 768px) {
    .sam-models-page .text-bread.breadcrumb-container { padding: 15px 20px; }
}

/* Figma Frame 3: uniform light-gray card — kill the legacy white inner image box */
.sam-models-page .pro-item.product_type_image_wrap,
.sam-models-page .productbaselisting .product_type_image_wrap {
    display: flex !important;
    background: transparent !important;
    height: auto !important;
    width: 100% !important;
    float: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.sam-models-page .pro-item-title.model-name {
    padding: 0 !important;
    background: transparent !important;
}

/* the <img> itself inherits a legacy white bg — keep the card surface uniform */
.sam-models-page .model-card .model-image-container img,
.sam-models-page .model-card a.product_image_wrap img {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.sam-models-page .model-card a.product_image_wrap {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: transparent !important;
}

/* KGS-SAM-STORE-MODEL-HOVER-LABEL-CLEANUP-R2-20261026 (supersedes ...HOVER-GLOW-REMOVAL-R1-20261023):
   on model-card hover, neutralize the inline rule .ProductBlock:hover .btn.actn-btn
   (elements/dynamic_colors.php, spec 0,4,0): kill both the orange glow AND the orange
   background pill on the model-name text. Keep normal-state text color (#000),
   card hover outline, image zoom, nav; other pages' actn-btn behavior untouched. */
.sam-models-page .ProductBlock:hover .pro-item-title.model-name .btn.actn-btn {
    box-shadow: none !important;
    background-color: transparent !important;
    color: #000 !important;
}

/* KGS-SAM-STORE-MODEL-IMAGE-UNIFORMITY-R1-STAGING-EXEC-20261026:
   normalize the model-card image stage. Previously img sizing depended on
   margin:auto resolution that differed per card (picture-element boxing),
   producing 191x127 vs 176x117 + ~45px vertical offset inconsistencies.
   Now: fixed-height flex stage, contain-fit img, zeroed margins. */
.sam-models-page .model-card .model-image-container .aligncenter,
.sam-models-page .model-card a.product_image_wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}
.sam-models-page .model-card a.product_image_wrap {
    height: 150px !important;
}
.sam-models-page .model-card .model-image-container img,
.sam-models-page .model-card a.product_image_wrap img {
    display: block !important;
    margin: 0 !important;
    width: 85% !important;
    height: 130px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
}

/* same directive: normalize <picture> boxing — it inconsistently keeps a
   block box on some cards (ASX/Lancer), changing the img percentage base.
   contents => img is a direct flex item of a.product_image_wrap on all cards. */
.sam-models-page .model-card a.product_image_wrap picture {
    display: contents !important;
}

/* KGS...R1 (cont): neutralize per-model hand-tuning in models.css
   (--base-scale 0.85/0.92, top:-5%, padding-bottom:5px) that produced
   inconsistent apparent sizes/offsets. --base-scale feeds both the base
   transform and the hover zoom scale(base*1.05) -> still works uniformly. */
.sam-models-page .model-card .model-image-container {
    padding: 0 !important;
}
.sam-models-page .model-card .model-image-container img {
    position: static !important;
    top: 0 !important;
    --base-scale: 1 !important;
}