.center-div {
    margin: auto;
    width: 100%;
    height: 100%;
    /*border: 3px solid green;*/
    /*padding: 10px;*/
}

.element-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 375px) {
    .cz-countdown .cz-countdown-seconds {
        margin-top: 0px !important;
    }
}

.btn-gap-right {
    margin-right: 2px;
}

.btn-gap-left {
    margin-left: 2px;
}

.shop-name-left {
    padding-left: 10px;
}

.shop-name-right {
    padding-right: 10px;
}

.feature_header span {
    color: black;
}
a {
    color: black;
    text-decoration: none;
    background-color: transparent;
}

.page-footer {
    background: #373a41;
    color: white;
}

.social-btn {
    border-radius: 50%;
    height: 2rem;
    width: 2rem;
}

.social-btn i {
    line-height: 1.9rem;
}

.for-margin {
    margin-top: 10px;
}

.font-weight-bold {
    font-weight: 600 !important;
}

.footer-heder {
    color: #ffffff;
}

.widget-list-link {
    color: #d9dce2;
}

.page-footer hr {
    border: 0.001px solid #2d3542;
}

.btn-secondary {
    color: white !important;
}

.btn-outline-primary:hover {
    color: white !important;
}

@media (max-width: 452px) {
    .top-margin {
        margin-top: 5px;
    }
}

.string-limit {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.string-limit {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* === Mobile banner center (Hero slider fix) === */
/*
@media (max-width: 767.98px) {
  section.bg-transparent.mb-3 .carousel-item > img,
  section.bg-transparent.mb-3 .owl-carousel .item > img,
  section.bg-transparent.mb-3 img,
  .carousel .carousel-item > img {
    width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 auto !important;
  }

  section.bg-transparent.mb-3 .carousel-item,
  .carousel .carousel-item,
  .owl-carousel .item {
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    height: auto !important;
    max-height: 220px !important;
  }

  .carousel,
  .carousel-inner,
  .carousel-item { height: auto !important; }
}
*/

/* === HERO BANNER FIX (top slider only) — FINAL === */
.__top-slider-images .hero-banner{
  position: relative;
  width: 100%;
  height: clamp(260px, 42vw, 600px);
  overflow: hidden;
}
.__top-slider-images .hero-banner .hero-img{
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* Prevent CLS on modern browsers */
@supports (aspect-ratio: 2 / 1){
  .__top-slider-images .hero-banner{ height: auto; aspect-ratio: 1920 / 800; }
}
@media (max-width: 576px){
  @supports (aspect-ratio: 2 / 1){
    .__top-slider-images .hero-banner{ aspect-ratio: 1080 / 500; }
  }
  .__top-slider-images .hero-banner{ max-height: 520px; }
}

/* Guard if any old CSS locks height */
.__top-slider-images .__slide-img{ height: 100% !important; }
.owl-height{ height: auto !important; }

/* === NO-WRAPPER FALLBACK (works even if .hero-banner missing) === */
.__top-slider-images #carouselExampleIndicators .carousel-inner .carousel-item{
  height: clamp(260px, 42vw, 600px) !important;
  overflow: hidden !important;
}

/* Banner image always fills the slide frame */
.__top-slider-images #carouselExampleIndicators .carousel-inner .carousel-item > a > img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Modern: use aspect-ratio instead of fixed height */
@supports (aspect-ratio: 2 / 1){
  .__top-slider-images #carouselExampleIndicators .carousel-inner .carousel-item{
    height: auto !important;
    aspect-ratio: 1920 / 800;
  }
}
@media (max-width: 576px){
  @supports (aspect-ratio: 2 / 1){
    .__top-slider-images #carouselExampleIndicators .carousel-inner .carousel-item{
      aspect-ratio: 1080 / 500;
    }
  }
}

/* === Custom Mobile Fixes (Sept 2025) === */
@media (max-width: 768px) {

  .header-location {
      max-width: 55%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      vertical-align: middle;
  }

  /* Mobile ONLY product page fix */
  .location-section {
      display: flex;
      align-items: center;
      max-width: 100%;
      overflow: hidden;
  }

  .location-section .top-name {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
  }

  .location-section .top-name a {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      max-width: 100%;
  }

  .location-section .fa-map-marker {
      margin-right: 5px;
      flex-shrink: 0;
  }

}