.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: 1279.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: 1279.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;
}

/* A full-width hero can use editorial photography with the copy composed
   beside the subject.  Keeping the background image at its natural aspect
   ratio prevents a portrait at either edge from being cropped by `cover`.
   The page background fills the remaining copy area. */
.category-landing .hero-full_width .hero-bg-image {
  background-position: right center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.category-landing .hero-full_width.hero-align-left-top,
.category-landing .hero-full_width.hero-align-left-center,
.category-landing .hero-full_width.hero-align-left-bottom {
  justify-content: flex-start;
  text-align: left;
}

.category-landing .hero-full_width.hero-align-left-top .hero,
.category-landing .hero-full_width.hero-align-left-center .hero,
.category-landing .hero-full_width.hero-align-left-bottom .hero {
  justify-items: start;
}

.category-landing .hero-full_width.hero-align-left-top .hero-content,
.category-landing .hero-full_width.hero-align-left-center .hero-content,
.category-landing .hero-full_width.hero-align-left-bottom .hero-content {
  text-align: left;
}

.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: 1280px) {
  .category-landing .category-scroll-wrap.tile-row-indent {
    margin-inline-start: 1.5rem;
  }

  /* Buffer so the first/last card's hover shadow has room to render
     without being clipped by the row's own overflow-x — only Shop The
     Look (promo) still horizontally scrolls at desktop width and needs
     this; New Arrivals/Best Sellers/Trending/Top Rated/Recently Viewed
     and Shop by Category/Occasion/Price/Popular Brands are all plain
     wrapping grids with no overflow-x, so this is a no-op for them. */
  .category-landing .category-scroll-wrap.tile-row-indent .product-scroll {
    padding-inline: 12px;
    margin-inline: -12px;
  }
}

/* Arrow hints for sections that still genuinely scroll horizontally —
   New Arrivals/Best Sellers/Trending/Top Rated/Recently Viewed and Shop
   The Look (promo). Shop by Category/Occasion/Price/Popular Brands no
   longer use these (see the plain wrapping grids below). */
.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 {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

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

.category-landing .price-occasion-scroll {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.category-landing .brand-grid.category-scroll {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

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

@media (min-width: 1280px) {
  .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-tile {
  position: relative;
  border: 1px solid #e9ecef;
  border-radius: 20px;
  min-height: 175px;
  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 35%;
  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%
  );
}

/* Default text color for image tiles - same white-on-photo treatment as
   store_home.css's .category-tile.has-image span. An admin-curated
   tile.text_color still wins: the template sets it as an inline style,
   which always beats a class rule regardless of stylesheet order. */
.category-landing .category-tile.has-image span {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.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-1279px 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: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));
}

/* .featured-grid is combined with .category-scroll in the template, whose
   overflow-x/scroll-snap it doesn't otherwise override — this is a plain
   wrapping grid at every width now, so neutralize those explicitly. */
.category-landing .featured-grid.category-scroll {
  overflow-x: visible;
  padding-bottom: 0;
  scroll-snap-type: none;
}

.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: 125px;
    padding: 0.9rem;
  }

  /* Shop by Category/Brands/Price/Occasion all wrap into a plain grid at
     every width (see the base rules further up) — pin them to exactly 2
     columns on phones, matching the native app's equivalent change
     (category_landing_screen.dart), rather than auto-fill's natural
     column count at this width (which can drop to 1). */
  .category-landing .category-tiles.category-scroll,
  .category-landing .brand-grid.category-scroll,
  .category-landing .price-occasion-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-landing .featured-grid.category-scroll {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .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 — excludes hero-minimal: that layout
     deliberately sets no fixed height at all (see hero.html, the inline
     `height` style is only applied `if hero_layout != 'minimal'`), so a
     bare-title minimal hero with no image/tagline/CTA should size to its
     content, not get force-padded into a 200px box of empty background
     color underneath the title. */
  .category-landing .hero-single:not(.hero-minimal),
  .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;
  }

  /* The desktop height is intentionally editorial.  On phones, preserve
     the image composition so a right-aligned model remains fully visible. */
  .category-landing .hero-single.hero-full_width,
  .category-landing .hero-carousel-slide.hero-full_width {
    height: clamp(220px, 56.25vw, 360px) !important;
    min-height: 0;
  }

  .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;
  }
}