.category-landing {
  padding: 0.5rem 0 1.75rem;
}

/* Product rails below the first viewport can be expensive to lay out. Let
   supporting browsers defer their rendering until they approach the viewport
   while reserving enough space to prevent a disruptive layout shift. */
.category-landing .section-trending,
.category-landing .section-top-rated,
.category-landing .section-recently-viewed {
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
}

.category-landing .section {
  margin: 1rem 0;
}

.category-landing .section > .container,
.category-landing .section > .container-fluid,
.category-landing .landing-narrow {
  max-width: 1320px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.category-landing .brands-fullwidth {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

/* New Arrivals / Best Sellers / Trending / Top Rated: these use
   container-fluid + col-lg-10/col-md-9 (mirroring /category/<slug>/'s own
   fluid sidebar-content split) instead of the 1320px-fixed .landing-narrow
   container the rest of the landing page uses, so their product cards come
   out the same size as the category page's grid at every viewport — a
   fixed max-width can only match that at one specific width. Overrides the
   1320px cap from the .container-fluid rule above; same specificity
   (.category-landing .section > .X, 3 classes either way) so source order
   decides — this rule must stay below it in the file. */
.category-landing .section > .landing-narrow-grid {
  max-width: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

.category-landing .landing-grid-col {
  padding-inline-start: 1.5rem;
  padding-inline-end: 0.5rem;
}

.category-landing .brands-fullwidth .brand-grid {
  width: 100%;
}

.category-landing .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

.category-landing .section-title {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  margin: 0;
}

.category-landing .section-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1b1b1b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.category-landing .section-link:hover {
  color: #4b5563;
}

.category-landing .section-link-button {
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
}

.category-landing .section-new-arrivals .row {
  --bs-gutter-y: 0.3rem;
}

.category-landing .section-product-grid .row {
  --bs-gutter-y: 0.3rem;
}

.category-landing .section-new-arrivals .new-arrivals-item.is-hidden {
  display: none;
}

.category-landing .section-new-arrivals .new-arrivals-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

.category-landing .section-new-arrivals .new-arrivals-load-more {
  min-width: 140px;
}

.category-landing .section-new-arrivals .new-arrivals-load-more.is-hidden {
  display: none;
}

.category-landing .section-product-grid .is-hidden {
  display: none;
}

.category-landing .section-product-grid .best-sellers-actions,
.category-landing .section-product-grid .trending-actions,
.category-landing .section-product-grid .top-rated-actions,
.category-landing .section-product-grid .recently-viewed-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

.category-landing .section-product-grid .best-sellers-load-more,
.category-landing .section-product-grid .trending-load-more,
.category-landing .section-product-grid .top-rated-load-more,
.category-landing .section-product-grid .recently-viewed-load-more {
  min-width: 140px;
}

.category-landing .section-product-grid .best-sellers-load-more.is-hidden,
.category-landing .section-product-grid .trending-load-more.is-hidden,
.category-landing .section-product-grid .top-rated-load-more.is-hidden,
.category-landing .section-product-grid .recently-viewed-load-more.is-hidden {
  display: none;
}

@media (max-width: 991.98px) {
  .category-landing .section-product-grid .best-sellers-actions,
  .category-landing .section-product-grid .trending-actions,
  .category-landing .section-product-grid .top-rated-actions,
  .category-landing .section-product-grid .recently-viewed-actions {
    display: none;
  }

  .category-landing .section-new-arrivals .row,
  .category-landing .section-product-grid .row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .category-landing .section-new-arrivals .row > .col,
  .category-landing .section-product-grid .row > .col {
    flex: 0 0 calc((100% - 0.3rem) / 2.05);
    max-width: calc((100% - 0.3rem) / 2.05);
  }
}
@media (max-width: 991.98px) {
  .category-landing .section-new-arrivals .new-arrivals-actions {
    display: none;
  }
}

.category-landing .container,
.category-landing .container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Hero Section - Base Styles */
.category-landing .hero-section {
  margin: 0;
}

.category-landing .hero {
  display: grid;
  gap: 1rem;
  align-items: center;
  grid-template-columns: 1fr auto;
  padding: 0.5rem 0;
  border-radius: 0;
  background: transparent;
}

.category-landing .hero-content {
  padding: 0;
  max-width: 520px;
}

.category-landing .hero-title {
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.category-landing .hero-tagline {
  font-size: 0.9rem;
  color: #4b5563;
}

.category-landing .hero-cta {
  margin-top: 0.6rem;
}

.category-landing .hero-cta .hero-cta-custom {
  color: var(--hero-cta-text-color);
  border-color: var(--hero-cta-text-color);
  background-color: var(--hero-cta-bg-color, transparent);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.category-landing .hero-cta .hero-cta-custom:hover,
.category-landing .hero-cta .hero-cta-custom:focus {
  background-color: var(--hero-cta-text-color);
  color: var(--hero-cta-hover-text-color, #ffffff);
  border-color: var(--hero-cta-text-color);
}

.category-landing .hero-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.35rem;
}

.category-landing .hero-image-card {
  width: 180px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
}

.category-landing .hero-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-landing .hero-single > .container,
.category-landing .hero-single > .container-fluid,
.category-landing .hero-carousel-slide > .container,
.category-landing .hero-carousel-slide > .container-fluid {
  height: 100%;
}

.category-landing .hero-single .hero,
.category-landing .hero-carousel-slide .hero {
  height: 100%;
  padding: 0;
}

.category-landing .hero-align-left-top .hero-content {
  align-self: flex-start;
  text-align: left;
}

.category-landing .hero-align-left-center .hero-content {
  align-self: center;
  text-align: left;
}

.category-landing .hero-align-left-bottom .hero-content {
  align-self: flex-end;
  text-align: left;
}

.category-landing .hero-align-center-top .hero-content {
  align-self: flex-start;
  text-align: center;
}

.category-landing .hero-align-center-center .hero-content {
  align-self: center;
  text-align: center;
}

.category-landing .hero-align-center-bottom .hero-content {
  align-self: flex-end;
  text-align: center;
}

.category-landing .hero-align-left-top .hero-content,
.category-landing .hero-align-left-center .hero-content,
.category-landing .hero-align-left-bottom .hero-content,
.category-landing .hero-align-center-top .hero-content,
.category-landing .hero-align-center-center .hero-content,
.category-landing .hero-align-center-bottom .hero-content {
  padding: 0.9rem 1.25rem;
}

.category-landing .hero-align-left-top .hero-content,
.category-landing .hero-align-center-top .hero-content {
  padding-top: 1.75rem;
}

.category-landing .hero-align-left-bottom .hero-content,
.category-landing .hero-align-center-bottom .hero-content {
  padding-bottom: 1.75rem;
}

.category-landing .hero-align-left-top .hero,
.category-landing .hero-align-center-top .hero {
  padding-top: 3rem;
}

.category-landing .hero-align-left-top,
.category-landing .hero-align-center-top {
  padding-top: 3rem;
}

.category-landing .hero-align-left-bottom,
.category-landing .hero-align-center-bottom {
  padding-bottom: 3rem;
}

.category-landing .hero-align-left-top.hero-full_width,
.category-landing .hero-align-center-top.hero-full_width,
.category-landing .hero-align-left-top.hero-layout-overlay,
.category-landing .hero-align-center-top.hero-layout-overlay {
  align-items: flex-start;
}

.category-landing .hero-align-left-bottom.hero-full_width,
.category-landing .hero-align-center-bottom.hero-full_width,
.category-landing .hero-align-left-bottom.hero-layout-overlay,
.category-landing .hero-align-center-bottom.hero-layout-overlay {
  align-items: flex-end;
}

/* Hero Single Container */
.category-landing .hero-single,
.category-landing .hero-carousel-slide {
  position: relative;
  overflow: hidden;
}

/* Hero Background Image */
.category-landing .hero-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Hero Video Background */
.category-landing .hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Hero Overlay */
.category-landing .hero-overlay-layer {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 1;
  opacity: calc(var(--overlay-opacity, 40) / 100);
}

/* Hero Full Width Layout */
.category-landing .hero-full_width {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.category-landing .hero-full_width .hero {
  grid-template-columns: 1fr;
  justify-items: center;
  position: relative;
  z-index: 2;
}

.category-landing .hero-full_width .hero-content {
  max-width: 700px;
  text-align: center;
}

.category-landing .hero-full_width .hero-image-card {
  display: none;
}

/* Hero Overlay Layout */
.category-landing .hero-layout-overlay {
  display: flex;
  align-items: center;
}

.category-landing .hero-layout-overlay .hero {
  grid-template-columns: 1fr;
  position: relative;
  z-index: 2;
}

.category-landing .hero-layout-overlay .hero-content {
  max-width: 600px;
}

.category-landing .hero-layout-overlay .hero-image-card {
  display: none;
}

/* Hero Text Colors */
.category-landing .hero-text-light .hero-title,
.category-landing .hero-text-light .hero-tagline,
.category-landing .hero-text-light .hero-eyebrow {
  color: #fff;
}

.category-landing .hero-text-light .hero-tagline {
  color: rgba(255, 255, 255, 0.85);
}

.category-landing .hero-text-light .hero-eyebrow {
  color: rgba(255, 255, 255, 0.75);
}

.category-landing .hero-text-dark .hero-title {
  color: #111;
}

/* Hero Carousel */
.category-landing .hero-carousel {
  position: relative;
  overflow: hidden;
}

.category-landing .hero-carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.category-landing .hero-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  display: none;
}

.category-landing .hero-carousel-slide.active {
  display: flex;
}

/* Carousel Controls */
.category-landing .hero-carousel-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  pointer-events: none;
  z-index: 10;
}

.category-landing .hero-carousel-prev,
.category-landing .hero-carousel-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.category-landing .hero-carousel-prev:hover,
.category-landing .hero-carousel-next:hover {
  background: #fff;
  transform: scale(1.05);
}

/* Carousel Indicators */
.category-landing .hero-carousel-indicators {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.category-landing .hero-carousel-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.category-landing .hero-carousel-indicator.active {
  background: #fff;
  transform: scale(1.2);
}

.category-landing .hero-carousel-indicator:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* RTL hero alignment fixes */
[dir="rtl"] .category-landing .hero-align-left-top .hero-content,
[dir="rtl"] .category-landing .hero-align-left-center .hero-content,
[dir="rtl"] .category-landing .hero-align-left-bottom .hero-content {
  text-align: right;
  justify-self: end;
}

[dir="rtl"] .category-landing .hero-content {
  margin-left: auto;
  margin-right: 0;
}

[dir="rtl"] .category-landing .hero {
  grid-template-columns: auto 1fr;
}

[dir="rtl"] .category-landing .hero-image-card {
  justify-self: start;
}

/* Promo Sections */
.category-landing .section-promo {
  background-color: var(--promo-section-bg, transparent);
  padding-top: 0.6rem;
  padding-bottom: 0.8rem;
}

.category-landing .section-promo .section-link {
  color: var(--promo-viewall-color, #111111);
}

.category-landing .section-promo .section-link:hover {
  color: var(--promo-viewall-color, #111111);
  opacity: 0.85;
}

.category-landing .section-promo .promo-banner {
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  background-color: var(--promo-bg-color, #ffffff);
  border: 1px solid #e5e7eb;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 0.75rem;
  min-height: 190px;
}

.category-landing .section-promo .promo-banner.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  z-index: 0;
}

.category-landing .section-promo .promo-banner-content {
  position: relative;
  z-index: 1;
  max-width: 520px;
}

.category-landing .section-promo .promo-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(17, 17, 17, 0.7);
  margin-bottom: 0.35rem;
}

.category-landing .section-promo .promo-subtitle {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: #4b5563;
}

.category-landing .section-promo .promo-cta {
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  border: 1px solid #111111;
  color: #111111;
  background: transparent;
}

.category-landing .section-promo .promo-cta-custom {
  color: var(--promo-cta-text-color);
  border-color: var(--promo-cta-text-color);
  background-color: var(--promo-cta-bg-color);
}

.category-landing .section-promo .promo-cta-custom:hover,
.category-landing .section-promo .promo-cta-custom:focus {
  background-color: var(--promo-cta-text-color);
  color: var(--promo-cta-hover-text-color, #ffffff);
  border-color: var(--promo-cta-text-color);
}

/* Promo sections reuse the product scroll styles for consistent sizing. */

.category-landing .category-tiles {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.category-landing .category-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-landing .category-scroll::-webkit-scrollbar {
  display: none;
}

.category-landing .category-scroll-wrap {
  position: relative;
  overflow: visible;
}

/* Every card-row section (Shop by Category/Occasion/Price, Popular Brands,
   New Arrivals/Best Sellers/Trending/Top Rated/Recently Viewed, Shop The
   Look): indent the card row a bit from the section title above, instead
   of starting flush with it — desktop only. Mobile screens don't have the
   width to spare for a purely decorative indent, so this (and the
   hover-shadow buffer it enables below, which only matters for :hover
   anyway — not a thing on touch) stays out of the mobile layout entirely. */
@media (min-width: 992px) {
  .category-landing .category-scroll-wrap.tile-row-indent {
    margin-inline-start: 1.5rem;
  }

  /* The scrolling row inside (.category-scroll / .product-scroll /
     .product-scroll-mobile — whichever the section uses) inherits
     scroll-snap-type: mandatory from its shared base rule — disabled here
     specifically so its padding (added on the row itself, for hover-shadow
     bleed room) doesn't get eaten: a mandatory-snap scroller auto-scrolls
     past its own leading padding on load, silently canceling any buffer
     applied that way (confirmed empirically). Scoped to indented sections
     via the wrapper's marker class, not the shared base rules themselves,
     so other consumers of those classes keep their snap behavior. */
  .category-landing .category-scroll-wrap.tile-row-indent .category-scroll,
  .category-landing .category-scroll-wrap.tile-row-indent .product-scroll,
  .category-landing .category-scroll-wrap.tile-row-indent .product-scroll-mobile {
    scroll-snap-type: none;
  }

  /* Buffer so the first/last card's hover shadow has room to render
     without being clipped by the row's own overflow-x — safe now that
     scroll-snap is disabled above. New Arrivals/Best Sellers/Trending/Top
     Rated/Recently Viewed wrap into a normal multi-row grid at this width
     (no overflow-x at all), so this is a no-op for them here — only Shop
     The Look (promo) actually scrolls at desktop width and needs it. Shop
     by Category/Occasion/Price/Popular Brands are handled per-grid further
     below since their columns use a custom width formula rather than
     Bootstrap row-cols. */
  .category-landing .category-scroll-wrap.tile-row-indent .product-scroll {
    padding-inline: 12px;
    margin-inline: -12px;
  }

  /* Same buffer for Shop by Category/Occasion/Price/Popular Brands, whose
     columns use a custom width formula (see .category-tiles.category-scroll
     etc. further below) rather than Bootstrap row-cols — these scroll at
     every viewport, but the indent/buffer itself stays desktop-only. */
  .category-landing .category-tiles.category-scroll,
  .category-landing .price-occasion-scroll,
  .category-landing .brand-grid.category-scroll {
    padding-inline: 12px;
    padding-top: 12px;
    margin-inline: -12px;
  }
}


.category-landing .scroll-arrow-hint {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #ffffff;
  color: #111;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 3;
}

.category-landing .scroll-arrow-left {
  right: auto;
  left: 0.35rem;
}

.category-landing .scroll-arrow-hint.hidden {
  opacity: 0;
}

.category-landing .scroll-arrow-hint i {
  font-size: 0.8rem;
}

.category-landing .category-tiles.category-scroll {
  --category-scroll-gap: 1rem;
  display: grid;
  gap: var(--category-scroll-gap);
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-template-rows: repeat(3, minmax(150px, auto));
  grid-auto-columns: calc((100% - var(--category-scroll-gap)) / 2.2);
  grid-auto-rows: minmax(150px, auto);
  align-content: start;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-landing .category-tiles.category-scroll::-webkit-scrollbar {
  display: none;
}

.category-landing .category-tiles.category-scroll .category-tile {
  scroll-snap-align: start;
}

[dir="rtl"] .category-landing .category-tiles.category-scroll {
  direction: rtl;
}

[dir="rtl"] .category-landing .category-tiles.category-scroll .category-tile {
  direction: rtl;
  text-align: right;
}

.category-landing .price-occasion-scroll {
  display: grid;
  gap: 0.75rem;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: calc((100% - 0.75rem) / 2.2);
  padding-bottom: 0.5rem;
}

.category-landing .price-occasion-scroll .category-tile {
  scroll-snap-align: start;
}

.category-landing .brand-grid.category-scroll {
  display: grid;
  gap: 0.75rem;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: calc((100% - 0.75rem) / 2.2);
  padding-bottom: 0.5rem;
}

.category-landing .brand-grid.category-scroll .brand-card {
  width: 100%;
  min-width: 0;
  scroll-snap-align: start;
}

@media (min-width: 992px) {
  .category-landing .category-tile {
    min-height: 120px;
    padding: 0.95rem 1rem;
    border-radius: 16px;
  }

  .category-landing .category-tile span {
    font-size: 1.05rem;
    letter-spacing: 0.01em;
  }

  .category-landing .category-tiles.category-scroll.two-row-rail-category {
    grid-template-rows: 1fr;
    grid-auto-columns: calc((100% - (var(--category-scroll-gap) * 4)) / 5.2);
  }

  .category-landing .brand-grid.category-scroll.two-row-rail-brands {
    gap: 1rem;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: calc((100% - 4rem) / 5.2);
  }

  .category-landing .price-occasion-scroll {
    gap: 1rem;
    grid-template-rows: 1fr;
    grid-auto-columns: calc((100% - 3rem) / 4.2);
  }
}

.category-landing .category-tile {
  position: relative;
  border: 1px solid #e9ecef;
  border-radius: 20px;
  min-height: 150px;
  overflow: hidden;
  padding: 1.25rem;
  color: #1f1f1f;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-landing .category-tile:hover {
  transform: translateY(-2px);
  /* Same hover shadow as Popular Brands' cards (.brand-card:hover below) —
     small enough that it doesn't need extra clipping-buffer room in the
     horizontal scroller, unlike the much larger shadow this used to have. */
  box-shadow: 0 12px 26px rgba(16, 16, 16, 0.08);
}

.category-landing .category-tile::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Solid-color/theme tiles (Shop by Category, Occasion, Price): the tint
   only shows on hover, same interaction as Popular Brands' cards, rather
   than sitting on top of the tile's own background at rest — image tiles
   keep their always-on gradient below since that one exists for text
   legibility over a photo, not as a decorative hover effect. */
.category-landing .category-tile:not(.has-image)::after {
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--tile-overlay-color, #ffffff) 80%, transparent),
    color-mix(in srgb, var(--tile-overlay-color, #ffffff) 0%, transparent)
  );
  opacity: 0;
  transition: opacity 0.2s ease;
}

.category-landing .category-tile:not(.has-image):hover::after {
  opacity: 1;
}

.category-landing .category-tile.custom-color::after {
  background: none;
}

.category-landing .category-tile span {
  position: relative;
  z-index: 1;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-weight: 600;
}

/* Uncustomized tiles (no admin-set image/color — Shop by Category,
   Occasion, Price fall back to these theme-N classes): plain white at
   rest, same as Popular Brands' cards, so there's no permanent grayish
   wash sitting on a tile that doesn't have its own color configured.
   Each theme's pale gradient only shows on hover, alongside the same
   ::after tint every other non-image tile reveals on hover. */
.category-landing .category-tile.theme-1,
.category-landing .category-tile.theme-2,
.category-landing .category-tile.theme-3,
.category-landing .category-tile.theme-4,
.category-landing .category-tile.theme-5,
.category-landing .category-tile.theme-6 {
  background: #ffffff;
}

.category-landing .category-tile.theme-1:hover { background: linear-gradient(135deg, #f5f5f5, #ffffff); }
.category-landing .category-tile.theme-2:hover { background: linear-gradient(135deg, #f0f0f0, #f8f9fa); }
.category-landing .category-tile.theme-3:hover { background: linear-gradient(135deg, #f8f9fa, #ffffff); }
.category-landing .category-tile.theme-4:hover { background: linear-gradient(135deg, #f5f5f5, #ffffff); }
.category-landing .category-tile.theme-5:hover { background: linear-gradient(135deg, #f5f5f5, #ffffff); }
.category-landing .category-tile.theme-6:hover { background: linear-gradient(135deg, #f5f5f5, #ffffff); }

.category-landing .category-tile.has-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.category-landing .category-tile.has-image::after {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--tile-overlay-color, #000000) 55%, transparent) 0%,
    color-mix(in srgb, var(--tile-overlay-color, #000000) 10%, transparent) 50%,
    transparent 100%
  );
}

.category-landing .category-tile.has-image.no-overlay::after {
  background: none;
}

.category-landing .product-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-landing .product-scroll::-webkit-scrollbar {
  display: none;
}

.category-landing .product-scroll .col {
  scroll-snap-align: start;
}

/* Promo section cards: sized via the same Bootstrap row-cols-2/3/4 + g-3
   classes New Arrivals uses (added in the template) instead of this
   rail's own fixed-width formula, so cards come out the exact same size.
   Promo still scrolls as a single row at every viewport (unlike the grid
   sections, which only scroll below lg and otherwise wrap) — nowrap
   overrides Bootstrap's .row default. gap:0 avoids a double gutter
   stacking on top of g-3's own padding/margin gutter mechanism; scoped to
   769px+ so it doesn't fight the <=768px mobile rule below, which zeroes
   g-3's gutter itself and supplies its own small flex gap instead — these
   two ranges are mutually exclusive by width, so there's no specificity
   fight, just non-overlapping media queries. Specificity here (4 classes)
   beats Bootstrap's .row (1 class) and the shared .section-product-grid
   .row mobile-scroll override (3 classes) in the 769-991px range. */
@media (min-width: 769px) {
  .category-landing .section-promo .product-scroll.row {
    flex-wrap: nowrap;
    gap: 0;
  }
}

/* See All Card at end of scroll */
.category-landing .see-all-card {
  flex: 0 0 auto;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.category-landing .see-all-card a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  min-height: 200px;
  padding: 1.5rem;
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  text-decoration: none;
  color: #6b7280;
  background: #fafafa;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.category-landing .see-all-card a:hover {
  border-color: #111;
  color: #111;
  background: #f5f5f5;
}

.category-landing .see-all-card svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
}

.category-landing .see-all-card span {
  font-weight: 600;
  font-size: 0.9rem;
}

/* Use default product card sizing from product_card.css */

/* Product Card Hover Effects for Landing Pages — uses the shared
   .product-card:hover treatment from product_card.css/unified_filtering.css */

.category-landing .product-card .image-container {
  position: relative;
  overflow: hidden;
  height: 400px !important;
  background: #ffffff;
}

.category-landing .product-card .details-container {
  padding: 0.4rem 0.55rem !important;
  font-size: 0.86rem;
}

.category-landing .product-card .product-title {
  margin-bottom: 0.2rem !important;
  font-size: 0.9rem !important;
  display: block;
  overflow: hidden;
}

.category-landing .product-card .product-title .product-title-text {
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
}

.category-landing .product-card .reviews-info {
  margin-top: 0.15rem !important;
  margin-bottom: 0.25rem !important;
  font-size: 0.8rem;
}

.category-landing .product-card .price-section {
  margin-bottom: 0.25rem !important;
  font-size: 0.86rem;
}

.category-landing .product-card .product-brand {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
}

.category-landing .product-card .rating-text {
  font-size: 0.8rem !important;
}

.category-landing .product-card .review-count {
  font-size: 0.76rem !important;
}

.category-landing .product-card .price-section h5 {
  font-size: 0.92rem !important;
}

.category-landing .product-card .price-section span {
  font-size: 0.74rem !important;
}

.category-landing .product-card .quick-add-section,
.category-landing .product-card .size-selection {
  display: block !important;
}

.category-landing .product-card .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  transition: transform 0.3s ease;
}

.category-landing .product-card:hover .image-container img {
  transform: scale(1.01);
}

/* Product Badges */
.category-landing .product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.category-landing .product-badge-new {
  background: #111;
  color: #fff;
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.3);
}

.category-landing .product-badge-rank {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.category-landing .product-badge-trending {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.category-landing .product-badge-top-rated {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.3);
}

/* Badge positioning when flash sale badge exists */
.category-landing .product-card .flash-sale-badge-container + .product-badge,
.category-landing .product-badge.has-flash-sale {
  top: auto;
  bottom: 12px;
}

/* Wishlist button hover effect */
.category-landing .product-card .wishlist-icon {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-landing .product-card .wishlist-icon:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
}

.category-landing .brand-grid {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.category-landing .brand-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 14px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  min-width: 200px;
  flex: 0 0 auto;
  text-decoration: none;
  color: #111;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.category-landing .brand-card.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--tile-overlay-color, #000000) 55%, transparent) 0%,
    color-mix(in srgb, var(--tile-overlay-color, #000000) 10%, transparent) 50%,
    transparent 100%
  );
  pointer-events: none;
}

.category-landing .brand-card.has-image.no-overlay::after {
  background: none;
}

.category-landing .brand-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(16, 16, 16, 0.08);
}

.category-landing .brand-card img {
  max-width: 160px;
  max-height: 64px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.85;
  transition: filter 0.2s ease, opacity 0.2s ease;
  position: relative;
  z-index: 1;
}

.category-landing .brand-card:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

.category-landing .two-row-scroll {
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: calc((100% - 3rem) / 4.1);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-landing .two-row-scroll .col {
  flex: none;
  width: auto;
  min-width: 0;
  scroll-snap-align: start;
}

.category-landing .two-row-scroll::-webkit-scrollbar {
  display: none;
}

.category-landing .banner {
  border-radius: 12px;
  padding: 0.65rem 1rem;
  background: #f8f9fa;
  color: #111;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.category-landing .banner a {
  color: #fff;
  background: #111;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.category-landing .featured-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.category-landing .featured-card {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  min-height: 140px;
  background: #fff;
  padding: 0.9rem;
  border: 1px solid #e5e7eb;
  text-decoration: none;
  color: #111;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-landing .featured-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.category-landing .featured-card:hover img {
  opacity: 0.3;
}

.category-landing .featured-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

.category-landing .featured-content {
  position: relative;
}

.category-landing .featured-cta.featured-cta-custom {
  color: var(--featured-cta-text-color);
  border-color: var(--featured-cta-text-color);
  background-color: var(--featured-cta-bg-color);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.category-landing .featured-cta.featured-cta-custom:hover,
.category-landing .featured-cta.featured-cta-custom:focus {
  background-color: var(--featured-cta-text-color);
  color: var(--featured-cta-hover-text-color, #ffffff);
  border-color: var(--featured-cta-text-color);
}

.category-landing .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.category-landing .chip {
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  color: #111;
  background: #fff;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.category-landing .chip:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

.recently-viewed-placeholder {
  color: #6b7280;
  font-size: 0.95rem;
}

/* Empty States */
.category-landing .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
  background: #fafafa;
  border-radius: 12px;
  border: 1px dashed #e5e7eb;
}

.category-landing .empty-state-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  color: #9ca3af;
}

.category-landing .empty-state-title {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
}

.category-landing .empty-state-description {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 1rem;
  max-width: 300px;
}

.category-landing .empty-state-action {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.category-landing .empty-state-action:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* Skeleton Loader Animation */
.skeleton-loader {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Product Card Skeleton */
.product-card-skeleton {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
}

.product-card-skeleton .skeleton-image {
  width: 100%;
  height: 300px;
}

.product-card-skeleton .skeleton-content {
  padding: 1rem;
}

.product-card-skeleton .skeleton-text {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.product-card-skeleton .skeleton-text.short {
  width: 60%;
}

.product-card-skeleton .skeleton-text.medium {
  width: 80%;
}

.product-card-skeleton .skeleton-text.long {
  width: 100%;
}

.product-card-skeleton .skeleton-price {
  height: 20px;
  width: 40%;
  border-radius: 4px;
  margin-top: 12px;
}

@media (max-width: 768px) {
  .category-landing .section {
    margin: 1rem 0;
  }

  .category-landing .container,
  .category-landing .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .category-landing .category-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .category-landing .category-tile {
    min-height: 100px;
    padding: 0.9rem;
  }

  .category-landing .category-tile span {
    font-size: 1rem;
    line-height: 1.2;
  }

  .category-landing .product-scroll-mobile {
    --mobile-product-gap: 0.05rem;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--mobile-product-gap);
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .category-landing .product-scroll-mobile::-webkit-scrollbar {
    display: none;
  }

  .category-landing .product-scroll-mobile.row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .category-landing .product-scroll-mobile .col {
    flex: 0 0 calc((100% - var(--mobile-product-gap)) / 2.05);
    max-width: calc((100% - var(--mobile-product-gap)) / 2.05);
    min-width: 165px;
    scroll-snap-align: start;
    padding-left: 0;
    padding-right: 0;
  }

  .category-landing .see-all-card {
    min-width: 120px;
  }

  .category-landing .see-all-card a {
    min-height: 180px;
    padding: 1rem;
  }

  .category-landing .see-all-card svg {
    width: 24px;
    height: 24px;
  }

  .category-landing .brand-card {
    min-height: 80px;
    min-width: 170px;
    padding: 0.75rem;
  }

  .category-landing .brand-card img {
    max-height: 52px;
  }

  .category-landing .product-card .image-container {
    height: 230px !important;
  }

  .category-landing .two-row-scroll {
    display: flex;
    max-height: none;
    overflow-y: visible;
    flex-wrap: nowrap;
  }

  .category-landing .two-row-scroll .col {
    flex: 0 0 calc((100% - 1rem) / 2.01);
    min-width: 165px;
  }

  .category-landing .product-card .details-container {
    padding: 0.45rem 0.5rem !important;
  }

  .category-landing .hero {
    grid-template-columns: 1fr;
  }

  .category-landing .hero-image-card {
    width: 100%;
    height: 140px;
  }

  /* Hero Mobile Adjustments */
  .category-landing .hero-single,
  .category-landing .hero-carousel-slide {
    min-height: 200px;
  }

  .category-landing .hero {
    gap: 0.5rem;
    padding: 0.25rem 0;
  }

  .category-landing .hero-single .hero,
  .category-landing .hero-carousel-slide .hero {
    padding: 0;
  }

  .category-landing .hero-content {
    padding: 0;
    text-align: left;
  }

  [dir="rtl"] .category-landing .hero-content {
    margin-left: auto;
    margin-right: 0;
  }

  .category-landing .hero-title {
    font-size: 1.25rem;
    line-height: 1.15;
    margin-bottom: 0.2rem;
  }

  .category-landing .hero-tagline {
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 0.35rem;
  }

  .category-landing .hero-cta {
    margin-top: 0.35rem;
  }

  .category-landing .hero-full_width .hero-content,
  .category-landing .hero-overlay .hero-content {
    max-width: 100%;
    padding: 0 1rem;
  }

  .category-landing .hero-carousel-prev,
  .category-landing .hero-carousel-next {
    width: 32px;
    height: 32px;
  }

  .category-landing .hero-carousel-controls {
    padding: 0 0.5rem;
  }

  .category-landing .hero-carousel-indicators {
    bottom: 0.75rem;
  }

  .category-landing .hero-carousel-indicator {
    width: 6px;
    height: 6px;
  }
}