/*products*/
/* 1. Ensure the product card is a flex container and fills available height */
custom-salla-product-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
}

/* 2. Standardize Image Area: White background and fixed aspect ratio */
.product-card__image {
    aspect-ratio: 1/1 !important; /* Forces uniform height across all cards */
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    padding: 10px;
    margin-bottom: 0 !important;
}

/* 3. Ensure the image fits inside the container without cropping */
.product-card__image img {
    max-height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* 4. Style Content Area: Gray background as seen in the image */
.product-card__content {
    background-color: #f5f5f5 !important; /* Light gray background */
    padding: 15px !important;
    flex-grow: 1 !important; /* Fills remaining card height */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    text-align: center !important;
}

/* 5. Center the title and price */
.product-card__title a {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 8px;
}

.product-card__price {
    margin-bottom: 12px;
}

/* 6. Button styling adjustment (if needed to match the mockup's dark style) */
.product-card__addToCart__btn .s-button-element {
    background-color: #333 !important; /* Dark button like in the image */
    border-color: #333 !important;
    width: 100% !important;
    border-radius: 4px !important;
}
/* Remove max-width and padding from banner containers */
.container.anime-item {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure the banner link expands to fill the container */
a.banner.banner--fixed {
    display: block !important;
    width: 100% !important;
}

/* Optional: Ensure the images inside the banners also scale correctly */
.feauters .fixed-banner__image {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
}
/* Container for the image */
.feauters.square-links__image-wrap {
    aspect-ratio: 21 / 9 !important;
    height: auto !important;
    overflow: hidden;
}

/* The banner image itself */
.feauters .square-links__image-wrap img {
    aspect-ratio: 21 / 9 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}
 .s-block--compare .after figcaption , .s-block--compare .before figcaption{
  top: 90%;
    font-weight: 700;
}
.brands{
  background-color: #F5F5F5;
}
.store-footer {
   margin-top: 0;
    }
/* Header logo text */
header .navbar-brand::after {
    content: "";
    vertical-align: middle;
    margin-left: 10px; /* Adjust spacing as needed */
}

/* Footer logo text */
footer .flex.flex-col.items-center::after {
    content: "";
    display: block;
    margin-top: 10px; /* Adjust spacing as needed */
    color: inherit; /* Inherits footer text color */
}
.my-2.mx-auto.w-28.h-0.border-2.border-primary.home-block-line.anime-item , .custom-products__line.my-2.mx-auto.w-28.h-0.border-2.border-primary , .lp-title__overline {
    display: none;
}
a.topnav-link-item.right-side , span.hidden.lg\:block{
  color:black !important;
}
/* Mobile styles */
@media (max-width: 767px) {
  .auto-fit-grid {
    grid-template-columns: auto;
  }
  .product-card--vertical:not(.product-card--fit-height) .product-card__image {
    flex: auto;
}
  .product-card__image img{
    object-fit: cover !important;
  }
}
.product-card--vertical:not(.product-card--fit-height) .product-card__image{
  flex: auto;
}
/*remove it when you remove national day banner  */
section.s-block.s-block--animate.wide-placeholder.banners-slider.banners-slider--0.slide{
  margin-top: 0
}
.product-card__image img {
    object-fit: cover !important;
}
li.rectangular-list-item {
  min-height: 200px !important; 
}

/* Remove item padding and fix height */
ul.rectangular-list .rectangular-list-item {
    padding: 0 !important;
    min-height: 0 !important;
}

/* Force uniform image height and fit */
ul.rectangular-list .rectangular-list-item img {
    height: 120px !important; /* Adjust this value as needed */
    width: 100%;
    object-fit: cover;
    display: block;
}

ul.square-links__grid.container.grid.gap-x-6.gap-y-6.auto-fit-grid {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: repeat(auto-fit, minmax( 4fr)) !important;
  gap: 1.5rem !important; /* gap-6 equivalent */
}
@media (max-width: 767px) {
  .contact .square-links__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 8px !important;
    row-gap: 20px !important;
  }
  .square-links__image-wrap,
  .square-links__image-wrap img {
    border-radius: 10px !important;
  }
/* ========================================= */
/* 6. BALANCED HEADINGS & SUBHEADINGS        */
/* ========================================= */

/* 1. Main Section Titles (Exactly 20% larger) */
main h2, 
.s-block__title, 
h2.s-block__title,
.section-title {
    font-size: 29px !important; 
    margin-bottom: 24px !important; 
}

/* 2. FAQ Questions (Noticeably bigger and bolded) */
.s-accordion__title, 
summary {
    font-size: 24px !important; 
    font-weight: bold !important;
}

/* 3. Subtitles & Product Titles (e.g. "نطابق ألوان أشهر ماركات السيارات") */
.s-block__subtitle,
.section-subtitle,
.product-card__title a,
main h3, 
main h4 {
    font-size: 24px !important; 
    line-height: 1.5 !important;
}
  /* Force larger text globally across the whole store */
body, p, span, label, a, .product-option-title, .text-sm, .text-base {
    font-size: 18px !important;
}

/* Force larger main headings and product titles */
h1, h2, .product-title, .text-lg, .text-xl {
    font-size: 22px !important;
}