/* Blue Sky Category Presentation Controls — 0.11.58 */

/* Header active state must not look like a permanently stuck hover. */
body.commerce-page .shop-header-luxury .shop-nav > .active,
body.commerce-page .shop-header-luxury .shop-nav > [aria-current="page"],
body.commerce-page .shop-header-luxury .shop-category-nav.is-current > button {
  color: #fff;
  background: transparent;
  box-shadow: none;
  transform: none;
}
body.commerce-page .shop-header-luxury .shop-nav > .active::after,
body.commerce-page .shop-header-luxury .shop-nav > [aria-current="page"]::after,
body.commerce-page .shop-header-luxury .shop-category-nav.is-current > button::after {
  opacity: .78;
  transform: scaleX(.5);
}
body.commerce-page .shop-header-luxury .shop-nav > .active:hover,
body.commerce-page .shop-header-luxury .shop-nav > [aria-current="page"]:hover,
body.commerce-page .shop-header-luxury .shop-category-nav.is-current > button:hover {
  color: #fff;
  background: rgba(255,255,255,.045);
  transform: translateY(-1px);
}
body.commerce-page .shop-header-luxury .shop-nav > .active:hover::after,
body.commerce-page .shop-header-luxury .shop-nav > [aria-current="page"]:hover::after,
body.commerce-page .shop-header-luxury .shop-category-nav.is-current > button:hover::after {
  opacity: 1;
  transform: scaleX(1);
}
body.commerce-page .shop-header-luxury .shop-nav > a:focus:not(:focus-visible),
body.commerce-page .shop-header-luxury .shop-nav > button:focus:not(:focus-visible),
body.commerce-page .shop-header-luxury .shop-category-nav > button:focus:not(:focus-visible) {
  outline: 0;
}
body.commerce-page .shop-header-luxury .shop-nav > a:focus-visible,
body.commerce-page .shop-header-luxury .shop-nav > button:focus-visible,
body.commerce-page .shop-header-luxury .shop-category-nav > button:focus-visible {
  outline: 2px solid rgba(127,169,255,.8);
  outline-offset: 2px;
}

/* Homepage category controls. */
body.commerce-home .premium-category-grid {
  grid-template-columns: repeat(var(--shop-home-category-columns, 3), minmax(0, 1fr));
  grid-auto-rows: var(--shop-home-category-height, 330px);
  gap: var(--shop-home-category-gap, 14px);
}
body.commerce-home[data-home-category-content-position="center"] .premium-category-card {
  align-items: center;
}
body.commerce-home[data-home-category-content-position="center"] .premium-category-copy {
  align-content: center;
}
body.commerce-home[data-home-category-text-align="center"] .premium-category-copy,
body.commerce-home[data-home-category-text-align="center"] .premium-category-card {
  text-align: center;
}
body.commerce-home[data-home-category-text-align="center"] .premium-category-meta,
body.commerce-home[data-home-category-text-align="center"] .premium-category-meta > span {
  justify-content: center;
}
body.commerce-home[data-home-category-text-align="center"] .premium-category-link {
  margin-inline: auto;
}
body.commerce-home[data-home-category-image-fit="cover"] .premium-category-media img { object-fit: cover !important; }
body.commerce-home[data-home-category-image-fit="contain"] .premium-category-media img {
  object-fit: contain !important;
  padding: clamp(18px, 3vw, 42px);
}

/* Shop category showcase controls. */
body.commerce-page .shop-category-rail-v4 .shop-category-showcase-grid {
  gap: var(--shop-category-gap, 10px);
}
body.commerce-page[data-shop-category-layout="grid"] .shop-category-rail-v4 .shop-category-showcase-grid {
  display: grid;
  grid-template-columns: repeat(var(--shop-category-columns, 4), minmax(0, 1fr));
  overflow: visible;
}
body.commerce-page[data-shop-category-layout="grid"] .shop-category-rail-v4 .shop-catalog-category-card {
  min-width: 0;
  max-width: none;
  flex: none;
  min-height: var(--shop-category-height, 190px);
  height: var(--shop-category-height, 190px);
}
body.commerce-page[data-shop-category-layout="rail"] .shop-category-rail-v4 .shop-category-showcase-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
body.commerce-page[data-shop-category-layout="rail"] .shop-category-rail-v4 .shop-catalog-category-card {
  flex: 0 0 min(76vw, 280px);
  min-height: var(--shop-category-height, 190px);
  height: var(--shop-category-height, 190px);
  scroll-snap-align: start;
}
body.commerce-page[data-shop-category-content-position="center"] .shop-category-rail-v4 .shop-category-card-copy {
  justify-content: center;
}
body.commerce-page[data-shop-category-text-align="center"] .shop-category-rail-v4 .shop-category-card-copy {
  align-items: center;
  text-align: center;
}
body.commerce-page[data-shop-category-text-align="center"] .shop-category-rail-v4 .shop-category-card-copy i {
  position: static;
  margin-top: 8px;
}
body.commerce-page[data-shop-category-image-fit="cover"] .shop-category-rail-v4 .shop-catalog-category-card > img { object-fit: cover !important; }
body.commerce-page[data-shop-category-image-fit="contain"] .shop-category-rail-v4 .shop-catalog-category-card > img {
  object-fit: contain !important;
  padding: 18px;
  opacity: .74;
}
.shop-category-child-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}
.shop-category-child-list > span {
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 999px;
  font-size: 8px;
  line-height: 1.4;
  opacity: .78;
}

/* Mega menu dimensions and interaction. */
.shop-mega-menu {
  grid-template-columns: var(--shop-mega-parent-width, 240px) minmax(0, 1fr);
  width: min(var(--shop-mega-width, 920px), calc(100vw - 40px));
}
.shop-mega-children section > div {
  grid-template-columns: repeat(var(--shop-mega-columns, 3), minmax(0, 1fr));
}
.shop-mega-children section > div > a {
  min-height: var(--shop-mega-item-height, 88px);
}
body[data-category-mega-open="click"] .shop-category-nav:not(.open) .shop-mega-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(50%, -8px) !important;
}
body[data-category-mega-open="click"] .shop-category-nav:not(.open) > button > span {
  transform: none !important;
}

@media (max-width: 900px) {
  body.commerce-home .premium-category-grid {
    grid-template-columns: repeat(var(--shop-home-category-columns-tablet, 2), minmax(0, 1fr));
    grid-auto-rows: var(--shop-home-category-height-tablet, 280px);
  }
  body.commerce-page[data-shop-category-layout="grid"] .shop-category-rail-v4 .shop-category-showcase-grid {
    display: grid;
    grid-template-columns: repeat(var(--shop-category-columns-tablet, 3), minmax(0, 1fr));
    overflow: visible;
  }
  body.commerce-page[data-shop-category-layout="grid"] .shop-category-rail-v4 .shop-catalog-category-card,
  body.commerce-page[data-shop-category-layout="rail"] .shop-category-rail-v4 .shop-catalog-category-card {
    min-height: var(--shop-category-height-tablet, 170px);
    height: var(--shop-category-height-tablet, 170px);
  }
  .shop-mega-menu { width: 100%; }
  .shop-mega-children section > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  body.commerce-home .premium-category-grid {
    grid-template-columns: repeat(var(--shop-home-category-columns-mobile, 1), minmax(0, 1fr));
    grid-auto-rows: var(--shop-home-category-height-mobile, 240px);
  }
  body.commerce-home .premium-category-card.layout-primary,
  body.commerce-home .premium-category-card.layout-compact-half,
  body.commerce-home .premium-category-card.layout-compact,
  body.commerce-home .premium-category-card.layout-compact-full,
  body.commerce-home .premium-category-card.layout-single {
    grid-column: auto;
    grid-row: auto;
    min-height: var(--shop-home-category-height-mobile, 240px);
  }
  body.commerce-page[data-shop-category-layout="grid"] .shop-category-rail-v4 .shop-category-showcase-grid {
    grid-template-columns: repeat(var(--shop-category-columns-mobile, 2), minmax(0, 1fr));
  }
  body.commerce-page[data-shop-category-layout="grid"] .shop-category-rail-v4 .shop-catalog-category-card,
  body.commerce-page[data-shop-category-layout="rail"] .shop-category-rail-v4 .shop-catalog-category-card {
    min-height: var(--shop-category-height-mobile, 150px);
    height: var(--shop-category-height-mobile, 150px);
  }
  .shop-mega-children section > div { grid-template-columns: 1fr; }
}

/* 0.11.65 — keep homepage category cards inside the grid flow.
   Premium V13 assigns editorial spans/min-heights to layout classes. In the
   balanced presentation those rules conflicted with the configurable fixed
   row height, so cards overflowed/clipped and the following section appeared
   on top of the category cards. The final presentation layer owns both track
   sizing and card placement. */
body.commerce-home[data-home-category-presentation="balanced"] .premium-category-grid {
  grid-template-columns: repeat(var(--shop-home-category-columns, 3), minmax(0, 1fr)) !important;
  grid-auto-rows: var(--shop-home-category-height, 330px) !important;
}
body.commerce-home[data-home-category-presentation="balanced"] .premium-category-grid > .premium-category-card {
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0;
  min-height: 0 !important;
  height: 100% !important;
  align-self: stretch;
}

/* Mosaic keeps the editorial spans, but uses intrinsic rows so no card can
   escape the section when its copy needs more vertical space. */
body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(var(--shop-home-category-height, 330px), auto) !important;
}
body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card {
  min-width: 0;
  min-height: var(--shop-home-category-height, 330px) !important;
  height: auto !important;
  align-self: stretch;
}
body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-primary,
body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-compact-half {
  grid-column: span 3 !important;
  grid-row: auto !important;
}
body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-single,
body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-compact-full {
  grid-column: span 6 !important;
  grid-row: auto !important;
}
body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-compact {
  grid-column: span 2 !important;
  grid-row: auto !important;
}

@media (max-width: 900px) {
  body.commerce-home[data-home-category-presentation="balanced"] .premium-category-grid {
    grid-template-columns: repeat(var(--shop-home-category-columns-tablet, 2), minmax(0, 1fr)) !important;
    grid-auto-rows: var(--shop-home-category-height-tablet, 280px) !important;
  }
  body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(var(--shop-home-category-height-tablet, 280px), auto) !important;
  }
  body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: var(--shop-home-category-height-tablet, 280px) !important;
  }
  body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-single,
  body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-compact-full {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 620px) {
  body.commerce-home[data-home-category-presentation="balanced"] .premium-category-grid {
    grid-template-columns: repeat(var(--shop-home-category-columns-mobile, 1), minmax(0, 1fr)) !important;
    grid-auto-rows: var(--shop-home-category-height-mobile, 240px) !important;
  }
  body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(var(--shop-home-category-height-mobile, 240px), auto) !important;
  }
  body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card,
  body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-single,
  body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-compact-full {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: var(--shop-home-category-height-mobile, 240px) !important;
  }
}

/* Base storefront CSS still defines two explicit 230px rows on
   .shop-category-grid. Remove that legacy template so only rows containing
   actual category cards participate in the homepage height. */
body.commerce-home .premium-category-grid {
  grid-template-rows: none !important;
  align-items: stretch;
}

/* Match the specificity of legacy layout-class rules at responsive widths. */
@media (max-width: 900px) {
  body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-primary,
  body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-compact-half,
  body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-compact {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}
@media (max-width: 620px) {
  body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-primary,
  body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-compact-half,
  body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-compact,
  body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-compact-full,
  body.commerce-home[data-home-category-presentation="mosaic"] .premium-category-grid > .premium-category-card.layout-single {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}