/*
 * The wrapping, multi-row product grid used by every real-data listing that
 * isn't a homepage horizontal slider (Shop/category/search, Wishlist,
 * Related Products, Recently Viewed) — see ProductGrid.tsx's non-scrollable
 * branch.
 *
 * `repeat(4, 1fr)` (a prior version of this rule) always creates exactly 4
 * equal-width tracks regardless of item count — with 1-2 results, each real
 * card is squeezed into a 25%-width column while the other 2-3 tracks sit
 * empty next to it, which reads as "the product card is too narrow" AND
 * "there's a huge empty area" at the same time (both are the same root
 * cause). `repeat(auto-fill, minmax(...))` instead sizes columns from a
 * fixed range: as many tracks as fit the container get created and an item
 * fills its whole track without being centered as with an original
 * float:left/width:25% system, so a lone card renders at a normal, un-
 * stretched card width instead of a slice of whatever's available — and
 * once there are enough items to fill a row, it wraps exactly the same as a
 * fixed-column grid would.
 */
.sw-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 280px));
  gap: 28px 24px;
  /* Without this, grid's default `align-items: stretch` forces every card
     to the height of the tallest one in its row, and the card's own
     flex:1 body then eats that leftover height as dead space. Cards size
     to their own content instead. */
  align-items: start;
}
.sw-product-grid .product-layout {
  min-width: 0;
}
@media (max-width: 600px) {
  .sw-product-grid {
    /* Still prefer 2 real columns down to narrow phone widths (spec: "2 per
       row where screen width allows, 1 only when necessary") rather than
       auto-fill's 240px minimum dropping to a single column too early. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }
}

/*
 * Shop/search/category's grid-vs-list toggle (ShopToolbar) — fixed column
 * counts instead of the auto-fill sizing above, one band per device/width
 * class (see sw-shop.css's sidebar->drawer breakpoint comment for the
 * matching filter-toolbar side of this):
 *
 *   <=600px   mobile portrait     2 cols  (unchanged)
 *   601-899px mobile landscape /  2 cols  (comfortable card width once the
 *             tablet portrait             sidebar's gone below 1280px; see
 *                                         899px note below)
 *   900-1279px tablet landscape  3 cols, compact filter toolbar (sidebar
 *              hidden — see sw-shop.css's 1279px breakpoint)
 *   1280-1399px small desktop    3 cols, sidebar restored
 *   >=1400px   large desktop     4 cols, sidebar
 *
 * The 900px cut (rather than folding 768-1279 into one 3-col band) matches
 * this app's own worked examples (768/820 -> tablet portrait, 2 cols;
 * 900/1024/1180 -> tablet landscape, 3 cols) — at 3 equal columns, 768-899px
 * leaves ~220px cards, materially narrower than the 240px+ this grid treats
 * as the minimum comfortable width elsewhere (see auto-fill minmax above),
 * so that band stays 2-up instead.
 */
.sw-product-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sw-product-grid--cols-1 {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
/*
 * List view (the toolbar's hamburger-icon toggle, ShopToolbar's
 * `columns={1}`): a single full-width column of the normal vertical card
 * just renders as one giant square photo with a sliver of text under it,
 * repeated — visually not a "list" at all. Give it the layout list views
 * actually use: photo on the left, all the info on the right, one row per
 * product — regardless of orientation/height (unlike the landscape-only
 * horizontal-card override in sw-shop.css, this applies whenever List view
 * is selected, matching what selecting it should always look like).
 */
.sw-product-grid--cols-1 .sw-card {
  flex-direction: row;
  align-items: stretch;
  padding: 0;
}
.sw-product-grid--cols-1 .sw-card-media {
  flex: 0 0 240px;
  width: 240px;
  aspect-ratio: auto;
  margin: 0;
}
.sw-product-grid--cols-1 .sw-card-image-link {
  border-radius: 10px 0 0 10px;
}
.sw-product-grid--cols-1 .sw-card-body {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  padding: 16px 20px;
  gap: 8px;
}
.sw-product-grid--cols-1 .sw-card-title {
  font-size: 17px;
}
/* Same rationale as sw-shop.css's landscape override: these were
   positioned to hang off a square image's own bottom/right edge
   (bottom: -22px etc) — with the image now exactly as tall as its row,
   pull them fully inside the image area instead of spilling below it. */
.sw-product-grid--cols-1 .sw-card-cart-fab,
.sw-product-grid--cols-1 .sw-notify-me-fab-wrap,
.sw-product-grid--cols-1 .sw-card-qty-stepper {
  bottom: 12px;
  right: 12px;
}
@media (max-width: 560px) {
  .sw-product-grid--cols-1 .sw-card-media {
    flex-basis: 120px;
    width: 120px;
  }
  .sw-product-grid--cols-1 .sw-card-body {
    padding: 10px 12px;
    gap: 4px;
  }
  .sw-product-grid--cols-1 .sw-card-title {
    font-size: 14px;
  }
  .sw-product-grid--cols-1 .sw-card-cart-fab,
  .sw-product-grid--cols-1 .sw-notify-me-fab-wrap,
  .sw-product-grid--cols-1 .sw-card-qty-stepper {
    bottom: 6px;
    right: 6px;
  }
}
@media (min-width: 1400px) {
  .sw-product-grid--cols-3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 899px) {
  .sw-product-grid--cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .sw-product-grid--cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }
}

/*
 * `.sw-product-scroll` — used on the homepage's New Arrivals / Featured
 * Products / Latest New sections (see ProductGrid's `scrollable` prop) —
 * is the same 4-column sizing as `.sw-product-grid` above but as a single
 * horizontally scrolling row instead of wrapping to more rows, matching
 * home3.html's owl-carousel sliders for those sections without depending
 * on owl.carousel's JS (see ProductGrid.tsx's comment for why).
 */
.sw-product-scroll {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -15px;
}
.sw-product-scroll::-webkit-scrollbar {
  display: none;
}
.sw-product-scroll .product-layout {
  flex: 0 0 25%;
  scroll-snap-align: start;
  padding: 30px 15px 0 15px;
}
.sw-product-scroll .product-layout .right-block {
  text-align: center;
}
@media (max-width: 991px) {
  .sw-product-scroll .product-layout {
    flex-basis: 50%;
  }
}
@media (max-width: 767px) {
  .sw-product-scroll .product-layout {
    flex-basis: 85%;
  }
}

/* HomeBanners' hero-slider nav buttons (base style set inline) — hover
   matches home3.css's `.so-spotlight1 .owl-nav div:hover` exactly. */
.sw-hero-nav-btn:hover {
  background: #f55 !important;
}

/* ProductGrid's carousel nav buttons (base style set inline) — hover
   matches home3.css's `.so-spotlight4/6 .owl-nav div:hover` exactly. */
.sw-product-nav-btn:hover {
  color: #f55 !important;
}

/*
 * Site logo (.sw-site-logo, used by both the homepage's static header
 * fragment and Header.tsx on every other page): the theme ships no real
 * sizing rule for `.navbar-logo img` — it relied on the original 195x38
 * wordmark's own intrinsic size. The real crest logo is ~1:1 instead of a
 * wide wordmark, so it needs an explicit height to read as a proper header
 * logo on desktop instead of shrinking to fit that old aspect ratio.
 */
.sw-site-logo {
  height: 100px;
  width: auto;
  max-width: none;
}

@media (min-width: 768px) {
  /* `.navbar-logo` is a floated column (Bootstrap col-lg-3/col-md-12) inside
     `.header-center .row` — by default its box grows to fit the 100px logo,
     which stretches that whole row (and the nav-links column inside it,
     `.megamenu-hori`, is only ~58px tall) taller than it needs to be,
     showing as dead space below the menu links. Fixing `.navbar-logo`'s own
     height to match the nav row's natural height and absolutely positioning
     the (taller) logo inside it keeps the row's height nav-driven — the
     logo can then be as big as desired without adding that gap. */
  .header-center .navbar-logo {
    position: relative;
    height: 58px;
    padding-top: 0;
    overflow: visible;
  }
  .header-center .navbar-logo .sw-site-logo {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
}

@media (max-width: 767px) {
  /* Stock home3.css stacks `.navbar-logo` (centered, margin-bottom: 30px)
     above the collapsed hamburger menu on mobile — put the logo next to
     the menu button on one row instead. `.header-center .row` holds
     `.navbar-logo` (col-xs-12), `.megamenu-hori` (col-xs-6, containing the
     collapsed toggle button) and `.shopping_cart` (col-xs-6); flexing that
     row and overriding the Bootstrap-grid widths lets all three share it. */
  .header-center .row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }
  /* Menu (hamburger) button first, logo right after it, cart pushed to the
     far right — order overrides DOM order (logo, menu, cart) for this. */
  .header-center .navbar-logo.col-xs-12 {
    order: 2;
    width: auto;
    flex: 0 0 auto;
    text-align: left;
    margin-bottom: 0;
    padding-top: 0;
    margin-left: 10px;
  }
  .header-center .megamenu-hori.col-xs-6 {
    order: 1;
    width: auto;
    flex: 0 0 auto;
  }
  .header-center .shopping_cart.col-xs-6 {
    order: 3;
    width: auto;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .sw-site-logo {
    height: 44px;
  }
}

/*
 * so-spotlight3 (banner strip) and so-spotlight5 (collections strip) real
 * photos: home3.css sizes these boxes purely by letting each `<img>`'s own
 * aspect ratio show through at width:100% (no object-fit/fixed height
 * anywhere) — it works for the theme's own demo images because those were
 * pre-cropped to each slot's exact ratio (banner-left/-bottom-1/-bottom-2
 * ~956x928 / 474x460, both ~1:1; banner-right-top 956x460, ~2.08:1;
 * collection-item images 380x500, ~0.76:1 portrait). The real snack photos
 * dropped in here weren't shot to those ratios, so the grid came out
 * uneven — constrain each slot explicitly instead.
 *
 * Each image here is wrapped in a bare `<a href="#"><img></a>` with no
 * other content, so the `<a>` stays a plain inline box that shrinks to fit
 * the image — the img's own `width: 100%` then has a circular dependency
 * (its containing block's size depends on the img's own size), and browsers
 * fall back to the image's *natural* pixel size instead of the slot's
 * actual width. (so-spotlight5's collection-item links don't hit this: each
 * one also wraps a `<div class="btn">` caption, and having a block-level
 * child blockifies the `<a>` automatically, giving it real block sizing.)
 * Blockifying these `<a>` tags explicitly fixes the same way — !important
 * because home3.css's own `.banners-effect-8 .banners > div a` rule (the
 * hover-zoom effect on this body-class variant) sets `display: inline-block`
 * at higher specificity, which has the identical shrink-to-fit problem.
 */
.banner-left a,
.banner-right-top a,
.banner-right-bottom-1 a,
.banner-right-bottom-2 a {
  display: block !important;
}
.banner-left img,
.banner-right-bottom-1 img,
.banner-right-bottom-2 img {
  display: block;
  aspect-ratio: 956 / 928;
  width: 100%;
  object-fit: cover;
}
.banner-right-top img {
  display: block;
  aspect-ratio: 956 / 460;
  width: 100%;
  object-fit: cover;
}
.collection-item img {
  display: block;
  aspect-ratio: 380 / 500;
  width: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  /* home3.css hides this banner grid at BOTH breakpoints — `.so-spotlight3
     { display: none }` under 767px AND, separately, a bare `.banners {
     display: none }` under 991px — the original theme just drops it below
     desktop rather than reflowing it. Undo both. */
  .so-spotlight3 {
    display: block !important;
  }
  .so-spotlight3 .banners {
    display: block !important;
  }
}

@media (max-width: 767px) {
  /* Restack: banner-left full width, then banner-right-top full width,
     then its two bottom halves side by side — the nested 50%-of-50%
     desktop layout is too cramped at mobile widths. */
  /* home3.css's own selectors here are `.so-spotlight3 .container-fluid
     .banners .banner-left` etc (specificity 0,4,0) — matching that chain
     (not just `.so-spotlight3 .banner-left`, 0,2,0) so this actually wins
     without needing !important on every property. */
  .so-spotlight3 .container-fluid .banners .banner-left,
  .so-spotlight3 .container-fluid .banners .banner-right {
    width: 100%;
    float: none;
    padding: 0;
  }
  .so-spotlight3 .container-fluid .banners .banner-right {
    margin-top: 10px;
  }
}