/* ==========================================================================
   porto-home.css — home-page styles for the Porto theme port.
   Loaded AFTER porto-base.css (= Porto demo12.min.css), so rules here both
   add demo2/demo3 home styles that demo12's build lacks and override demo12
   leftovers that would otherwise leak into the home page.

   Sources ported from the original Porto theme package:
     - demo3: hero slider + category row   (_demo-home.scss / demo3.min.css)
     - demo2: banners mosaic + info boxes + section titles + brands strip
              (_demo-home.scss / demo2.min.css / demo2.html markup)

   --------------------------------------------------------------------------
   MARKUP CONTRACT (classes the React components must render)
   --------------------------------------------------------------------------
   GLOBAL
   - Wrap the whole home page main content in an element with class "home"
     (e.g. <main class="main home">). A few rules below are scoped to .home
     so they cannot affect other Porto pages, which also load this file.
   - Do NOT use the classes "owl-carousel", "owl-theme" or "appear-animate"
     anywhere: porto-base.css ships `.owl-carousel{display:none}` and
     `.appear-animate{opacity:0}`, which are only undone by the theme's
     jQuery plugins that we do not load.

   1) HERO SLIDER (demo3)
      <div class="home-slider">
        ...whatever track/slide wrappers the carousel needs...
        <div class="home-slide home-slide1 banner">
          <img class="slide-bg" src="..." alt="">
          <div class="banner-layer">
            <h2>script heading</h2>
            <h3 class="text-uppercase mb-0">...</h3>
            <h4 class="m-b-4">...</h4>
            <h5 class="text-uppercase">Starting at
              <span class="coupon-sale-text"><sup>$</sup>199<sup>99</sup></span></h5>
            <a class="btn btn-dark btn-xl">Shop Now</a>
          </div>
        </div>
        <div class="home-slide home-slide2 banner"> ... second slide, may use
          <h3 class="text-uppercase rotated-upto-text mb-0"><small>Up to</small>20% off</h3>
          <hr class="short-thick-divider">
          <h5>Starting at <span>$<em>19</em>99</span></h5>
        </div>
      </div>
      Notes: .home-slide must be a direct positioning context for .slide-bg
      and .banner-layer (this file makes each .home-slide a 100%-height flex
      box; .banner-layer is absolutely positioned at left 13.45% and
      vertically centered). Slider height: demo3's 100vh is capped here (see
      section 1) because our header is in-flow, not overlaid. Nav arrows /
      dots are the component's responsibility (owl styles are not ported).

   2) CATEGORY LINKS ROW (demo3 "Shop By Category")
      <section class="container">
        <h2 class="section-title ls-n-15 text-center">Shop By Category</h2>
        <div class="cats-slider">
          <div class="product-category">
            <a href="...">
              <figure><img src="..." alt=""></figure>
              <div class="category-content">
                <h3>Name</h3>
                <span><mark class="count">8</mark> products</span>
              </div>
            </a>
          </div>
          ... more .product-category items ...
        </div>
      </section>
      "cats-slider" goes on a PortoCarousel root; the carousel provides the
      scroll-snap track and per-breakpoint item widths (itemsPerView), this
      file only keeps demo3 visual overrides. .product-category/
      .category-content visuals (hover overlay, typography) come from
      porto-base.css.

   3) BANNERS MOSAIC (demo2, isotope replaced by CSS grid)
      <div class="banners-grid text-uppercase">
        <div class="banner banner1"><figure><img ...></figure>
          <div class="banner-layer banner-layer-middle text-right">
            <h4 class="banner-layer-circle-item">40<sup>%<small>OFF</small></sup></h4>
            <h5><del>$450</del>$270</h5><h4>Watches</h4><h3>Mega Sale</h3>
          </div>
        </div>
        ... banners use classes banner1..banner9 (demo2.html spelling — NO
        hyphen; porto-base.css has unrelated demo12 rules on .banner-1 etc.,
        do not use hyphenated names). Each banner: <figure><img></figure>
        as the ONLY in-flow child (100% cell height), plus one or two
        absolutely positioned .banner-layer elements, exactly as in
        demo2.html lines 723-861. Source order does not matter — every
        banner is explicitly placed on the grid. Extra bits used by the
        demo2 markup that also work here: .banner-layer-top / -middle /
        -bottom / -left / -right, .coupon-sale-text (with <i>/<b>),
        .heading-border, text-right / text-center utilities.
      </div>
      Desktop mosaic (4 columns, faithful to demo2's isotope result):
        col 1        : banner1, banner2, banner3 (stacked)
        cols 2-3     : banner7, banner8, banner9 (stacked, double width)
        col 4        : banner4, banner5 (tall), banner6 (stacked)
      Collapses to 2 columns <=991px (banner7/8/9 full-width, order follows
      demo2's data-md-order) and 1 column <=575px.

   4) SECTIONS (demo2)
      - Info boxes:  <div class="info-boxes-container row row-joined">
                       <div class="info-box info-box-icon-left col-lg-4">
                         <i class="icon-shipping"></i>
                         <div class="info-box-content"><h4>..</h4><p>..</p></div>
                       </div> x3
                     </div>
        (.info-box / .info-box-icon-left / .row-joined already styled in
        porto-base.css; this file adds the container border + spacing.)
      - Featured products: <div class="products-section section-bg-gray">
                             <div class="container">
                               <h2 class="section-title">Featured Products</h2>
                               ... product grid/slider (component's own) ...
                             </div>
                           </div>
      - Brands: <div class="brands-section mt-5 mb-5"><div class="container">
                  <div class="brands-slider"><img ...> x N</div>
                </div></div>
   ========================================================================== */

/* ==========================================================================
   1. HERO SLIDER (demo3)
   ========================================================================== */

.home-slider {
  position: relative;
  /* demo3 uses height:100vh under an overlaid header. Our header is in-flow,
     so full 100vh would push everything below the fold — cap the hero to a
     balanced band: viewport minus ~header+breathing room, never collapsing
     below 420px nor ballooning past 640px on tall screens. */
  height: calc(100vh - 220px);
  min-height: 420px;
  max-height: 640px;
  overflow: hidden;
}

/* PortoCarousel wraps slides in .owl-stage-outer.pc-track > .owl-item.pc-slide;
   both default to auto height, which would break the 100% chain from the
   fixed-height .home-slider down to .home-slide. Restore it. */
.home-slider .owl-stage-outer,
.home-slider .pc-slide {
  height: 100%;
}

/* Each slide fills the slider; flex keeps the (static-top) absolute
   .banner-layer vertically centered exactly like demo3's d-flex markup.
   Specificity (0,2,0) also defeats porto-base's stray unscoped
   `.banner{font-size:.83333vw}` (demo12 leftover). */
.home-slider .home-slide {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 1.6rem; /* demo3 .banner base */
}

/* Background image: cover behavior. porto-base already has
   img.slide-bg{object-fit:cover;object-position:center top}; sizing to the
   slide (not 100vh) keeps it correct if .home-slider height is capped. */
.home-slider .slide-bg {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.home-slider h2 {
  font-family: "Segoe Script", "Savoye LET", cursive;
  line-height: 1.334;
}

.home-slider .banner-layer {
  left: 13.45%;
  padding-bottom: 6px;
}

/* --- Slide 1 typography (demo3) --- */
.home-slider .home-slide1 h2 {
  color: #777;
  font-size: 2.5em;
  font-weight: 400;
  letter-spacing: -0.008em;
  margin-bottom: 0.9rem;
}

.home-slider .home-slide1 h3 {
  font-size: 2.5em;
  letter-spacing: 0.185em;
}

.home-slider .home-slide1 h4 {
  font-size: 5.625em;
}

.home-slider .home-slide1 h5 {
  font-size: 1.125em;
  padding-top: 0.7rem;
  margin-bottom: 3.3rem;
}

/* --- Slide 2 typography (demo3) --- */
.home-slider .home-slide2 h2 {
  margin-bottom: -5px;
  margin-left: -3px;
  font-size: 3.4375em;
  letter-spacing: -0.3px;
}

.home-slider .home-slide2 .banner-layer {
  left: 13.6%;
}

.home-slider .home-slide2 h3 {
  margin-left: -3px;
  font-size: 7em;
}

.home-slider .home-slide2 h5 {
  margin-right: 4.3rem;
  margin-left: -3px;
  font-size: 1.25em;
  vertical-align: middle;
}

.home-slider .home-slide2 h5 span {
  font-size: 1.05em;
}

.home-slider .home-slide2 .short-thick-divider {
  padding-bottom: 0.7rem;
}

.home-slider .home-slide2 em {
  display: inline-block;
  font-size: 1.87em;
  font-style: normal;
  vertical-align: text-top;
  transform: translateY(-1px);
  letter-spacing: 0;
}

.home-slider .home-slide2 .btn {
  margin-top: -4px;
  padding: 1.165em 2.8em;
  font-size: 1.1em;
  letter-spacing: 0.02em;
}

.home-slider .home-slide2 .btn i {
  padding-left: 0.6rem;
}

/* --- demo3 helpers missing from porto-base.css --- */
.rotated-upto-text {
  position: relative;
  padding-left: 0.3em;
}

.rotated-upto-text small {
  display: inline-block;
  position: absolute;
  left: -1em;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: 50% 50%;
  font-size: 25%;
  font-weight: 500;
}

.short-thick-divider {
  margin: 2.2rem 0 0;
  width: 4.8rem;
  border-top: 5px solid #222529;
}

/* demo3's coupon text (white rotated box) — scoped because porto-base ships
   demo12's different .coupon-sale-text; all diverging props re-declared. */
.home-slider .coupon-sale-text {
  position: relative;
  display: inline-block;
  margin: -0.8rem 0 0 1.6rem;
  padding: 0.5rem 0.9rem 0.5rem;
  font-size: 2em;
  letter-spacing: 0;
  vertical-align: text-top;
  transform: translateY(1px);
}

.home-slider .coupon-sale-text:before {
  content: "";
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  transform: rotate(-2deg);
}

.home-slider .coupon-sale-text sup {
  margin: 0 1px;
  font-size: 55%;
  letter-spacing: -0.05em;
}

/* --- Slider responsive (demo3) --- */
@media (max-width: 1199px) {
  .home-slider .home-slide {
    font-size: 1.4rem; /* demo3 .banner step */
  }
}

@media (max-width: 575px) {
  .home-slider .home-slide {
    font-size: 1rem;
  }
}

@media (max-width: 479px) {
  .home-slider .banner-layer {
    left: 6%;
  }

  .home-slider .home-slide {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   2. CATEGORY LINKS ROW (.cats-slider — no CSS exists for it in Porto; it was
      an owl hook. `cats-slider` now goes on a PortoCarousel root, which owns
      the track mechanics (scroll-snap .owl-stage-outer.pc-track) and the
      responsive item widths via its itemsPerView scoped CSS — the flex-track
      and width rules that used to live here were dropped in favor of it.
      Only the demo3 visual overrides remain; .product-category sits inside
      the carousel's .owl-item.pc-slide wrapper, descendant selectors still
      match.)
   ========================================================================== */

.cats-slider .product-category {
  margin-bottom: 0; /* porto-base sets 2rem outside owl */
}

/* demo3 overrides on top of porto-base's .product-category/.category-content */
.cats-slider .product-category img,
.cats-slider .product-category figure:after {
  border-radius: 0;
}

.cats-slider .category-content {
  padding: 2.1rem;
  margin-bottom: 1.9rem;
}

/* ==========================================================================
   3. BANNERS MOSAIC (demo2's 9-banner isotope grid as CSS grid)
      Track sizes derive from the demo2 banner images
      (265/550px wide, heights 290/330/240 | 350/230/280 | 220/470/170):
      row tracks 220/50/40/230/20/50/170 + 20px gaps reproduce the original
      1120x900 mosaic exactly; fr units + aspect-ratio keep it fluid.
   ========================================================================== */

.banners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 220fr 50fr 40fr 230fr 20fr 50fr 170fr;
  gap: 20px;
  aspect-ratio: 1120 / 900;
  position: relative;
  /* cancel demo12 leftovers from porto-base (.banners-grid margin/vw font) */
  margin: 0 0 2rem;
  font-size: 1.6rem;
}

.banners-grid .banner {
  position: relative;
  overflow: hidden;
  font-size: 1em; /* inherit grid font-size; defeats stray .banner{...vw} */
}

.banners-grid .banner figure {
  height: 100%;
  margin: 0;
}

.banners-grid .banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Explicit placement — markup order is irrelevant. */
.banners-grid .banner1 { grid-area: 1 / 1 / 3 / 2; }
.banners-grid .banner2 { grid-area: 3 / 1 / 6 / 2; }
.banners-grid .banner3 { grid-area: 6 / 1 / 8 / 2; }
.banners-grid .banner7 { grid-area: 1 / 2 / 4 / 4; }
.banners-grid .banner8 { grid-area: 4 / 2 / 5 / 4; }
.banners-grid .banner9 { grid-area: 5 / 2 / 8 / 4; }
.banners-grid .banner4 { grid-area: 1 / 4 / 2 / 5; }
.banners-grid .banner5 { grid-area: 2 / 4 / 7 / 5; }
.banners-grid .banner6 { grid-area: 7 / 4 / 8 / 5; }

/* --- Per-banner typography/layout (demo2 _demo-home.scss, compiled) --- */
.banner-layer-circle-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  color: #fff;
  background: #222529;
  letter-spacing: -0.08em;
}

.banner-layer-circle-item sup {
  line-height: 1;
  top: 0;
  letter-spacing: 0;
  font-size: 55%;
}

.banner-layer-circle-item small {
  display: block;
  font-size: 0.4329em;
  letter-spacing: -0.025em;
  opacity: 0.5;
}

/* demo2's coupon text (banner7/banner9) — porto-base ships demo12's version,
   so the differing props are re-declared here, scoped to the grid. */
.banners-grid .coupon-sale-text {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0.544em 0.667em;
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  transform: rotate(-2deg);
}

.banners-grid .coupon-sale-text i {
  position: absolute;
  left: -2.25em;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-size: 0.65em;
  font-style: normal;
  opacity: 0.6;
  letter-spacing: 0;
}

.banners-grid .coupon-sale-text b {
  display: inline-block;
  padding: 5px 8px;
  font-size: 1.6em;
  background-color: #fff;
}

.banners-grid .banner1 h5 { font-size: 1.875em; }
.banners-grid .banner1 h5 del { font-size: 0.467em; font-weight: 500; }
.banners-grid .banner1 h4 { font-size: 0.875em; font-weight: 500; }
.banners-grid .banner1 h3 { font-size: 1.1875em; font-weight: 500; }
.banners-grid .banner1 .banner-layer { margin-top: -1px; margin-right: -2px; left: auto; right: 10%; }
.banners-grid .banner1 .banner-layer-circle-item { font-size: 2.5em; font-weight: 700; }

.banners-grid .banner2 h3 { margin-bottom: 2px; font-size: 1.75em; }
.banners-grid .banner2 h2 { padding-bottom: 2px; font-size: 1.72em; }
.banners-grid .banner2 h4 { font-size: 0.9375em; font-weight: 600; }
.banners-grid .banner2 .btn { padding: 0.7em 1.3em 0.73em 1.2em; font-size: 0.75em; }
.banners-grid .banner2 .banner-layer { top: 8.2%; right: 9.5%; margin-top: -1px; }

.banners-grid .banner3 h2 { font-size: 1.625em; letter-spacing: 0.15em; }
.banners-grid .banner3 h3 { font-size: 1.375em; letter-spacing: 0.15em; }
.banners-grid .banner3 h4 { padding-top: 3px; font-size: 0.625em; font-weight: 500; letter-spacing: 0.2em; }
.banners-grid .banner3 .btn { font-size: 0.75em; padding: 0.72em 1.3em 0.73em 1.3em; border-color: #ff7272 #ff7272 #ff3f3f; }
.banners-grid .banner3 .banner-layer-top { top: 10.5%; }
.banners-grid .banner3 .banner-layer-bottom { bottom: 10%; }

.banners-grid .banner4 h2 { font-size: 1.0625em; }
.banners-grid .banner4 h3 { font-size: 0.9375em; color: #a2a2a2; line-height: 1.25; font-weight: 500; }
.banners-grid .banner4 h4 { margin-bottom: 1.6rem; font-size: 1.5em; line-height: 1.1; }
.banners-grid .banner4 .btn { font-size: 0.75em; padding: 0.97em 2.02em 1em; font-weight: 600; }
.banners-grid .banner4 .banner-layer { right: 7.5%; }

.banners-grid .banner5 h4 { font-size: 0.75em; font-weight: 600; letter-spacing: 0.2em; margin-bottom: 1px; }
.banners-grid .banner5 h3 { font-size: 1.6875em; }
.banners-grid .banner5 h5 { margin-top: -1px; font-size: 0.75em; opacity: 0.7; font-weight: 500; letter-spacing: 0.2em; }
.banners-grid .banner5 .btn { font-size: 0.75em; padding: 0.72em 1.3em 0.73em 1.2em; letter-spacing: 0.005em; }
.banners-grid .banner5 hr { border-color: #e0e2e4; }
.banners-grid .banner5 .banner-layer { margin-top: -3px; left: 8.3%; right: 8.3%; bottom: 10.2%; }

.banners-grid .banner6 .banner-layer { padding-bottom: 2px; }
.banners-grid .banner6 h3 { font-size: 1.375em; line-height: 1.2; }
.banners-grid .banner6 h4 { padding-bottom: 1px; font-size: 0.9375em; font-weight: 600; }
.banners-grid .banner6 .btn { padding: 0.7em 1.3em 0.63em 1.2em; font-size: 0.75em; }

.banners-grid .banner7 h3 { font-size: 2.25em; }
.banners-grid .banner7 h4 { padding: 0.5em 0.68em 0.53em; font-size: 1.125em; }
.banners-grid .banner7 h5 { margin-bottom: 1.4rem; font-size: 1em; }
.banners-grid .banner7 h5 b { padding: 0.2em 0.32em; background-color: #e8e3e1; }
.banners-grid .banner7 .btn { padding: 1.14em 0 1.1em; font-size: 0.87em; width: 158px; font-weight: 600; letter-spacing: 0.012em; }
.banners-grid .banner7 .banner-layer { right: 7%; }

.banners-grid .banner8 h3 { font-size: 1.8125em; font-family: "Segoe Script", "Savoye LET", cursive; letter-spacing: 0.001em; }
.banners-grid .banner8 h4 { font-size: 2.5em; }
.banners-grid .banner8 .btn { padding: 0.73em 1.27em 0.67em; font-size: 0.75em; }
.banners-grid .banner8 .banner-layer { padding-bottom: 1px; left: 6.4%; }

.banners-grid .banner9 h4 { padding-bottom: 2px; font-size: 0.75em; font-weight: 500; letter-spacing: 0.2em; }
.banners-grid .banner9 h3 { line-height: 0.9; font-size: 1.625em; letter-spacing: 0.16em; }
.banners-grid .banner9 h3 span { font-size: 1.0769em; }
.banners-grid .banner9 h5 { margin-left: 3rem; margin-top: 2px; font-size: 1em; }
.banners-grid .banner9 hr { border-top-color: #e0e2e4; }
.banners-grid .banner9 .btn { padding: 1.03em 2.5em 1.03em 2.45em; font-size: 0.9em; font-weight: 600; letter-spacing: -0.005em; }
.banners-grid .banner9 .banner-layer-left { right: 58.4%; left: 4.5%; top: 47.5%; }
.banners-grid .banner9 .banner-layer-right { left: 55%; right: 8.7%; }

/* --- Mosaic responsive --- */
@media (max-width: 1199px) {
  .banners-grid {
    font-size: 1.4rem; /* demo2 .banner step */
  }
}

/* 2 columns; banner7/8/9 span both; order follows demo2's data-md-order
   (1,2 | 7 | 8 | 9 | 6,4 | 5,3) so pairs always fill a full row. */
@media (max-width: 991px) {
  .banners-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    aspect-ratio: auto;
    font-size: 1.6rem;
  }

  .banners-grid .banner {
    grid-area: auto;
  }

  .banners-grid .banner7,
  .banners-grid .banner8,
  .banners-grid .banner9 {
    grid-column: span 2;
  }

  .banners-grid .banner1 { order: 1; }
  .banners-grid .banner2 { order: 2; }
  .banners-grid .banner7 { order: 3; }
  .banners-grid .banner8 { order: 4; }
  .banners-grid .banner9 { order: 5; }
  .banners-grid .banner6 { order: 6; }
  .banners-grid .banner4 { order: 7; }
  .banners-grid .banner5 { order: 8; }
  .banners-grid .banner3 { order: 9; }

  .banners-grid .banner img {
    height: 300px; /* adapted from demo2's md max-height:300/min-height:220 */
  }

  /* banner5's art is very tall (265x470): letterbox instead of hard crop */
  .banners-grid .banner5 figure {
    background-color: #f6f7f9;
  }

  .banners-grid .banner5 img {
    object-fit: contain;
  }

  .banners-grid .banner9 {
    font-size: 1rem;
  }

  .banners-grid .banner9 .banner-layer-right {
    left: 50%;
    right: 4.7%;
  }
}

/* 1 column */
@media (max-width: 575px) {
  .banners-grid {
    grid-template-columns: 1fr;
    font-size: 1.8rem; /* demo2 md value for full-width banners */
  }

  .banners-grid .banner7,
  .banners-grid .banner8,
  .banners-grid .banner9 {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  .banners-grid {
    font-size: 1.4rem; /* demo2 xs step */
  }
}

/* ==========================================================================
   4. SECTION SPACING / TITLES (demo2; only what porto-base.css lacks)
   ========================================================================== */

.section-bg-gray {
  background: #fbfbfb;
}

/* Info boxes strip (porto-base has .info-box itself, not the container) */
.info-boxes-container {
  border: 1px solid #e7e7e7;
}

.info-boxes-container .info-box {
  margin: 1.2rem 0;
  padding: 1.2rem;
}

.info-boxes-container .info-box:not(:last-child) {
  border-right: 1px solid #e7e7e7;
}

.info-boxes-container i {
  line-height: 0;
}

.info-boxes-container .icon-shipping {
  font-size: 3.5rem;
}

@media (max-width: 991px) {
  .info-boxes-container .info-box {
    justify-content: flex-start;
    margin: 0;
    padding: 2.4rem 3rem;
  }

  .info-boxes-container .info-box:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid #e7e7e7;
  }
}

/* Section titles: porto-base has .section-title{uppercase;1.8rem} plus a
   demo12 margin rule; these add demo2/demo3 home styling. */
.home .section-title {
  color: #302e2a; /* demo3 */
  margin: 0 0 1.3rem;
}

.products-section .section-title {
  margin-bottom: 2.4rem;
  padding-bottom: 1.1rem;
  font-size: 1.6rem;
  color: #313131;
}

.home .products-section {
  padding-top: 5rem;
  padding-bottom: 3.2rem;
}

/* PortoCarousel snap correction for the .products-slider shadow-bleed trick:
   porto-base ships `.products-slider>.owl-stage-outer{margin:-10px -20px;
   padding:10px 20px}` (15px <=1280px) so card hover shadows are not clipped
   by the scroll track. Without scroll-padding, scroll-snap would align slide
   edges to the PADDED edge, leaving every snapped position 20px off; this
   pins the snapport back to the content edge so slides line up with the
   section and PortoCarousel's scrollLeft math (idx * step) stays exact. */
.products-slider > .owl-stage-outer {
  scroll-padding: 0 20px;
}

@media (max-width: 1280px) {
  .products-slider > .owl-stage-outer {
    scroll-padding: 0 15px;
  }
}

/* Brands strip (was an owl carousel with 'images-center'; static flex row) */
.brands-section {
  padding-bottom: 1px;
}

.brands-slider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.brands-slider img {
  width: auto;
  margin: auto;
}

/* ==========================================================================
   OVERLAY-HEADER HERO SIZING (paired with the :has() rule in porto-layout.css)
   With the header floating transparently over the hero, size the slider like
   demo3: from the window top, near-fullscreen. Without :has() support the
   in-flow header + capped height above stay in effect.
   ========================================================================== */
.page-wrapper:has(> .main > .home) .home-slider {
  height: 100vh;
  min-height: 480px;
  max-height: 900px;
}