/* Canonical Zestia customer-web renderer. It is loaded for every page so a
 * published design can skin protected transactional views without replacing
 * their business logic. */
[data-zestia-site] {
  --web-font-heading: var(--font-heading, inherit);
  --web-font-body: var(--font-body, inherit);
  --web-radius: var(--radius-card, 18px);
  --web-space: var(--space-section, 24px);
}

.web-designed-page { display: grid; width: 100%; min-width: 0; gap: var(--web-space); }
.web-design-global-header, .web-design-global-footer { position: relative; isolation: isolate; overflow: hidden; }
.web-design-global-header.has-web-d-global-bg, .web-design-global-footer.has-web-d-global-bg { background-color: var(--d-global-bg); }
.web-design-global-header, .web-design-global-footer { background-image: var(--d-global-gradient,none); }
.web-design-global-header.has-web-d-global-color, .web-design-global-footer.has-web-d-global-color { color: var(--d-global-color); }
.web-design-global-header.has-web-d-global-padding, .web-design-global-footer.has-web-d-global-padding { padding: var(--d-global-padding); }
.web-design-global-header > :not(.web-design-global-bg), .web-design-global-footer > :not(.web-design-global-bg) { position: relative; z-index: 1; }
.web-design-global-bg { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: var(--d-global-bg-fit,cover); object-position: var(--d-global-bg-position,center); filter: var(--d-global-media-filter,none); pointer-events: none; }
.web-design-global-header .brand-logo, .web-design-global-footer .brand-logo { object-fit: var(--d-global-logo-fit,contain); object-position: var(--d-global-logo-position,center); filter: var(--d-global-media-filter,none); }

/* Presentation-only menu variants. They never change destinations or the
 * protected cart/account behaviour; the editor only changes how the existing
 * navigation is arranged and painted. */
[data-zestia-site] .site-header.web-design-global-header[data-zestia-menu-layout="centered"] {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  justify-items: center;
  gap: 14px;
}
[data-zestia-site] .site-header.web-design-global-header[data-zestia-menu-layout="centered"] .brand,
[data-zestia-site] .site-header.web-design-global-header[data-zestia-menu-layout="centered"] .main-nav {
  justify-content: center;
}
[data-zestia-site] .site-header.web-design-global-header[data-zestia-menu-layout="centered"] .main-nav { width: 100%; }
[data-zestia-site] .site-header.web-design-global-header[data-zestia-menu-layout="compact"] {
  gap: 12px;
  padding-top: min(var(--d-global-padding,12px),16px);
  padding-bottom: min(var(--d-global-padding,12px),16px);
}
[data-zestia-site] .site-header.web-design-global-header[data-zestia-menu-layout="compact"] .brand-tagline { display: none; }
[data-zestia-site] .site-header.web-design-global-header[data-zestia-menu-layout="compact"] .brand-logo { width: 44px; height: 44px; }
[data-zestia-site] .site-header.web-design-global-header[data-zestia-menu-layout="compact"] .main-nav { gap: 6px; }
[data-zestia-site] .site-header.web-design-global-header[data-zestia-menu-style="pills"] .main-nav > .nav-link,
[data-zestia-site] .site-header.web-design-global-header[data-zestia-menu-style="pills"] .nav-account > .nav-link {
  padding: 9px 14px;
  background: color-mix(in srgb,currentColor 7%,transparent);
  border: 1px solid color-mix(in srgb,currentColor 18%,transparent);
  border-radius: 999px;
}
[data-zestia-site] .site-header.web-design-global-header[data-zestia-menu-style="solid"] .main-nav > .nav-link,
[data-zestia-site] .site-header.web-design-global-header[data-zestia-menu-style="solid"] .nav-account > .nav-link,
[data-zestia-site] .site-header.web-design-global-header[data-zestia-menu-style="solid"] .main-nav > .ghost-button,
[data-zestia-site] .site-header.web-design-global-header[data-zestia-menu-style="solid"] .nav-account > .ghost-button {
  color: var(--surface,#fff);
  background: var(--brand,#0f766e);
  border-color: color-mix(in srgb,var(--brand,#0f766e) 82%,#000);
  border-radius: 10px;
}
[data-zestia-site] .site-header.web-design-global-header[data-zestia-menu-style="solid"] .main-nav > .nav-link:hover,
[data-zestia-site] .site-header.web-design-global-header[data-zestia-menu-style="solid"] .nav-account > .nav-link:hover { filter: brightness(1.08); }
.web-design-frame {
  position: relative;
  width: 100%;
  min-height: var(--d-min-h,320px);
  overflow: hidden;
  isolation: isolate;
}
.web-design-frame.has-auto-flow { min-height: 0; overflow: visible; }
.web-design-frame.has-protected-widget { min-height: 0; overflow: visible; }
.web-design-block {
  position: absolute;
  z-index: var(--d-z,1);
  top: calc((var(--d-y,1) - 1) * 48px);
  left: calc((var(--d-x,1) - 1) * 8.333333%);
  width: calc(var(--d-w,12) * 8.333333% - 12px);
  min-height: calc(var(--d-h,2) * 48px - 8px);
  overflow: hidden;
  color: var(--d-block-color,var(--text));
  background-color: var(--d-block-bg,transparent);
  background-image: var(--d-block-gradient,none);
  border-radius: var(--d-block-radius,var(--web-radius));
  text-align: var(--d-block-align,left);
}
.web-design-block.is-auto-flow {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 0;
}
.web-design-frame.has-protected-widget .web-design-block--protected-widget {
  position: relative;
  top: auto;
  left: calc((var(--d-x,1) - 1) * 8.333333%);
  width: calc(var(--d-w,12) * 8.333333% - 12px);
  min-height: 0;
  overflow: visible;
  align-content: initial;
}
.web-design-protected-slot { min-width: 0; width: 100%; text-align: left; }
.web-design-protected-slot > :first-child { margin-top: 0; }
.web-design-protected-slot > :last-child { margin-bottom: 0; }
.web-design-block--hero { display: grid; min-height: inherit; color: #fff; background: #111827; }
.web-design-hero__media, .web-design-block--image > img { width: 100%; height: 100%; object-fit: var(--d-media-fit,cover); object-position: var(--d-media-position,center); filter: var(--d-media-filter,none); }
.web-design-hero__media { position: absolute; z-index: -2; inset: 0; }
.web-design-hero__overlay { position: absolute; z-index: -1; inset: 0; background: var(--d-overlay-bg,linear-gradient(90deg,#111827 0%,#111827 72%,transparent 100%)); opacity: var(--d-overlay-opacity,42%); }
.web-design-hero__content { display: grid; align-content: center; justify-items: start; gap: 14px; width: min(720px,88%); min-height: inherit; padding: clamp(28px,6vw,88px); }
.web-design-hero__content h1 { max-width: 16ch; margin: 0; color: inherit; font: 900 clamp(34px,5.3vw,78px)/.98 var(--web-font-heading); letter-spacing: -.045em; }
.web-design-hero__content p { max-width: 58ch; margin: 0; color: inherit; font-size: clamp(15px,1.4vw,20px); line-height: 1.5; }
.web-design-eyebrow { display: inline-flex; align-items: center; min-height: 27px; padding: 5px 10px; color: inherit; background: color-mix(in srgb,currentColor 12%,transparent); border: 1px solid color-mix(in srgb,currentColor 30%,transparent); border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.web-design-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.web-block-action { text-decoration: none; }
.web-block-action-form { display: inline-flex; margin: 0; }
.web-design-block--rich-text, .web-design-block--text, .web-design-block--cta, .web-design-block--button, .web-design-block--contact, .web-design-block--protected-widget { display: grid; align-content: center; gap: 10px; padding: var(--d-block-padding,clamp(18px,3vw,42px)); }
.web-design-block h2 { margin: 0; color: inherit; font: 900 clamp(24px,3vw,44px)/1.05 var(--web-font-heading); }
.web-design-copy { color: inherit; white-space: pre-line; line-height: 1.65; }
.web-design-gallery { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); height: 100%; gap: 8px; }
.web-design-gallery img { width: 100%; height: 100%; min-height: 120px; object-fit: cover; border-radius: inherit; filter: var(--d-media-filter,none); }
.web-design-block--category-grid, .web-design-block--categories, .web-design-block--product-grid, .web-design-block--products, .web-design-block--offers, .web-design-block--reviews { overflow: visible; padding: 10px; }
.web-design-block--category-grid > .category-grid,
.web-design-block--categories > .category-grid,
.web-design-block--product-grid > .featured-grid,
.web-design-block--products > .featured-grid,
.web-design-block--offers > .promo-grid {
  grid-template-columns: repeat(var(--d-card-columns,4),minmax(0,1fr));
  gap: var(--d-card-gap,16px);
}
.web-design-block--category-grid .category-image,
.web-design-block--categories .category-image,
.web-design-block--product-grid .featured-image,
.web-design-block--products .featured-image,
.web-design-block--offers .promo-image {
  height: var(--d-card-media-height,180px);
  object-fit: var(--d-card-media-fit,cover);
  filter: var(--d-media-filter,none);
}
.web-design-block--category-grid .category-body,
.web-design-block--categories .category-body,
.web-design-block--product-grid .featured-body,
.web-design-block--products .featured-body,
.web-design-block--offers .promo-body { padding: var(--d-card-pad,14px); }
.web-design-contact { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 20px; }
.web-design-contact p { margin: 8px 0 0; }
.web-design-protected, .web-design-placeholder { display: grid; place-content: center; justify-items: center; height: 100%; min-height: 120px; padding: 20px; color: var(--muted); background: color-mix(in srgb,var(--surface) 88%,transparent); border: 1px dashed var(--border); text-align: center; }
.web-design-protected strong, .web-design-placeholder strong { color: var(--text); }
.web-design-media-placeholder {
  display: block;
  min-height: 180px;
  background: linear-gradient(135deg, color-mix(in srgb,var(--brand,#0f766e) 14%,#fff), color-mix(in srgb,var(--accent,#22c55e) 18%,#fff));
}
.web-preview-badge { position: fixed; z-index: 9999; right: 12px; bottom: 12px; padding: 9px 13px; color: #064e3b; background: #d1fae5; border: 1px solid #6ee7b7; border-radius: 999px; font-size: 12px; font-weight: 900; box-shadow: 0 8px 28px rgba(15,23,42,.18); }
[data-zestia-preview="1"] [data-zestia-block-id] { cursor: pointer; }
[data-zestia-preview="1"] [data-zestia-block-id]:hover { outline: 2px solid #3155f5; outline-offset: -2px; }

@media (max-width: 1024px) {
  .web-design-global-header.has-web-t-global-bg, .web-design-global-footer.has-web-t-global-bg { background: var(--t-global-bg); }
  .web-design-global-header.has-web-t-global-color, .web-design-global-footer.has-web-t-global-color { color: var(--t-global-color); }
  .web-design-global-header.has-web-t-global-padding, .web-design-global-footer.has-web-t-global-padding { padding: var(--t-global-padding); }
  .web-design-global-header, .web-design-global-footer { background-image: var(--t-global-gradient,var(--d-global-gradient,none)); }
  .web-design-global-bg { object-fit: var(--t-global-bg-fit,var(--d-global-bg-fit,cover)); object-position: var(--t-global-bg-position,var(--d-global-bg-position,center)); filter: var(--t-global-media-filter,var(--d-global-media-filter,none)); }
  .web-design-global-header .brand-logo, .web-design-global-footer .brand-logo { object-fit: var(--t-global-logo-fit,var(--d-global-logo-fit,contain)); object-position: var(--t-global-logo-position,var(--d-global-logo-position,center)); filter: var(--t-global-media-filter,var(--d-global-media-filter,none)); }
  .web-design-frame { min-height: var(--t-min-h,var(--d-min-h,320px)); }
  .web-design-block {
    z-index: var(--t-z,var(--d-z,1));
    top: calc((var(--t-y,var(--d-y,1)) - 1) * 48px);
    left: calc((var(--t-x,var(--d-x,1)) - 1) * 8.333333%);
    width: calc(var(--t-w,var(--d-w,12)) * 8.333333% - 10px);
    min-height: calc(var(--t-h,var(--d-h,2)) * 48px - 8px);
    color: var(--t-block-color,var(--d-block-color,var(--text)));
    background-color: var(--t-block-bg,var(--d-block-bg,transparent));
    background-image: var(--t-block-gradient,var(--d-block-gradient,none));
    border-radius: var(--t-block-radius,var(--d-block-radius,var(--web-radius)));
    text-align: var(--t-block-align,var(--d-block-align,left));
  }
  .web-design-frame.has-protected-widget .web-design-block--protected-widget {
    left: calc((var(--t-x,var(--d-x,1)) - 1) * 8.333333%);
    width: calc(var(--t-w,var(--d-w,12)) * 8.333333% - 10px);
  }
  .web-design-block--category-grid > .category-grid,
  .web-design-block--categories > .category-grid,
  .web-design-block--product-grid > .featured-grid,
  .web-design-block--products > .featured-grid,
  .web-design-block--offers > .promo-grid {
    grid-template-columns: repeat(min(3,var(--t-card-columns,var(--d-card-columns,4))),minmax(0,1fr));
    gap: var(--t-card-gap,var(--d-card-gap,16px));
  }
  .web-design-hero__media, .web-design-block--image > img, .web-design-gallery img, .web-design-block--category-grid .category-image, .web-design-block--categories .category-image, .web-design-block--product-grid .featured-image, .web-design-block--products .featured-image, .web-design-block--offers .promo-image { filter: var(--t-media-filter,var(--d-media-filter,none)); }
  .web-design-hero__media, .web-design-block--image > img { object-fit: var(--t-media-fit,var(--d-media-fit,cover)); object-position: var(--t-media-position,var(--d-media-position,center)); }
  .web-design-hero__overlay { background: var(--t-overlay-bg,var(--d-overlay-bg,linear-gradient(90deg,#111827 0%,#111827 72%,transparent 100%))); opacity: var(--t-overlay-opacity,var(--d-overlay-opacity,42%)); }
  .web-design-block--rich-text, .web-design-block--text, .web-design-block--cta, .web-design-block--button, .web-design-block--contact, .web-design-block--protected-widget { padding: var(--t-block-padding,var(--d-block-padding,clamp(18px,3vw,42px))); }
  .web-design-block--category-grid .category-image, .web-design-block--categories .category-image, .web-design-block--product-grid .featured-image, .web-design-block--products .featured-image, .web-design-block--offers .promo-image { height: var(--t-card-media-height,var(--d-card-media-height,180px)); object-fit: var(--t-card-media-fit,var(--d-card-media-fit,cover)); }
  .web-design-block--category-grid .category-body, .web-design-block--categories .category-body, .web-design-block--product-grid .featured-body, .web-design-block--products .featured-body, .web-design-block--offers .promo-body { padding: var(--t-card-pad,var(--d-card-pad,14px)); }
}

@media (min-width: 1025px) {
  .is-hidden-desktop { display: none !important; }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .is-hidden-tablet { display: none !important; }
}

@media (max-width: 600px) {
  .web-design-global-header.has-web-m-global-bg, .web-design-global-footer.has-web-m-global-bg { background: var(--m-global-bg); }
  .web-design-global-header.has-web-m-global-color, .web-design-global-footer.has-web-m-global-color { color: var(--m-global-color); }
  .web-design-global-header.has-web-m-global-padding, .web-design-global-footer.has-web-m-global-padding { padding: var(--m-global-padding); }
  .web-design-global-header, .web-design-global-footer { background-image: var(--m-global-gradient,var(--t-global-gradient,var(--d-global-gradient,none))); }
  .web-design-global-bg { object-fit: var(--m-global-bg-fit,var(--t-global-bg-fit,var(--d-global-bg-fit,cover))); object-position: var(--m-global-bg-position,var(--t-global-bg-position,var(--d-global-bg-position,center))); filter: var(--m-global-media-filter,var(--t-global-media-filter,var(--d-global-media-filter,none))); }
  .web-design-global-header .brand-logo, .web-design-global-footer .brand-logo { object-fit: var(--m-global-logo-fit,var(--t-global-logo-fit,var(--d-global-logo-fit,contain))); object-position: var(--m-global-logo-position,var(--t-global-logo-position,var(--d-global-logo-position,center))); filter: var(--m-global-media-filter,var(--t-global-media-filter,var(--d-global-media-filter,none))); }
  .web-design-frame { min-height: var(--m-min-h,var(--t-min-h,var(--d-min-h,320px))); }
  .web-design-block {
    z-index: var(--m-z,var(--t-z,var(--d-z,1)));
    top: calc((var(--m-y,var(--t-y,var(--d-y,1))) - 1) * 42px);
    left: calc((var(--m-x,var(--t-x,var(--d-x,1))) - 1) * 8.333333%);
    width: calc(var(--m-w,var(--t-w,var(--d-w,12))) * 8.333333% - 6px);
    min-height: calc(var(--m-h,var(--t-h,var(--d-h,2))) * 42px - 6px);
    color: var(--m-block-color,var(--t-block-color,var(--d-block-color,var(--text))));
    background-color: var(--m-block-bg,var(--t-block-bg,var(--d-block-bg,transparent)));
    background-image: var(--m-block-gradient,var(--t-block-gradient,var(--d-block-gradient,none)));
    border-radius: var(--m-block-radius,var(--t-block-radius,var(--d-block-radius,var(--web-radius))));
    text-align: var(--m-block-align,var(--t-block-align,var(--d-block-align,left)));
  }
  .web-design-frame.has-protected-widget .web-design-block--protected-widget {
    left: calc((var(--m-x,var(--t-x,var(--d-x,1))) - 1) * 8.333333%);
    width: calc(var(--m-w,var(--t-w,var(--d-w,12))) * 8.333333% - 6px);
  }
  .is-hidden-mobile { display: none !important; }
  .web-design-hero__content { width: 100%; padding: 24px 20px; }
  .web-design-hero__content h1 { font-size: clamp(31px,12vw,52px); }
  .web-design-contact { grid-template-columns: 1fr; }
  .web-design-block--category-grid > .category-grid,
  .web-design-block--categories > .category-grid,
  .web-design-block--product-grid > .featured-grid,
  .web-design-block--products > .featured-grid,
  .web-design-block--offers > .promo-grid {
    grid-template-columns: repeat(min(2,var(--m-card-columns,var(--t-card-columns,var(--d-card-columns,4)))),minmax(0,1fr));
    gap: var(--m-card-gap,var(--t-card-gap,var(--d-card-gap,16px)));
  }
  .web-design-hero__media, .web-design-block--image > img, .web-design-gallery img, .web-design-block--category-grid .category-image, .web-design-block--categories .category-image, .web-design-block--product-grid .featured-image, .web-design-block--products .featured-image, .web-design-block--offers .promo-image { filter: var(--m-media-filter,var(--t-media-filter,var(--d-media-filter,none))); }
  .web-design-hero__media, .web-design-block--image > img { object-fit: var(--m-media-fit,var(--t-media-fit,var(--d-media-fit,cover))); object-position: var(--m-media-position,var(--t-media-position,var(--d-media-position,center))); }
  .web-design-hero__overlay { background: var(--m-overlay-bg,var(--t-overlay-bg,var(--d-overlay-bg,linear-gradient(90deg,#111827 0%,#111827 72%,transparent 100%)))); opacity: var(--m-overlay-opacity,var(--t-overlay-opacity,var(--d-overlay-opacity,42%))); }
  .web-design-block--rich-text, .web-design-block--text, .web-design-block--cta, .web-design-block--button, .web-design-block--contact, .web-design-block--protected-widget { padding: var(--m-block-padding,var(--t-block-padding,var(--d-block-padding,clamp(18px,3vw,42px)))); }
  .web-design-block--category-grid .category-image, .web-design-block--categories .category-image, .web-design-block--product-grid .featured-image, .web-design-block--products .featured-image, .web-design-block--offers .promo-image { height: var(--m-card-media-height,var(--t-card-media-height,var(--d-card-media-height,180px))); object-fit: var(--m-card-media-fit,var(--t-card-media-fit,var(--d-card-media-fit,cover))); }
  .web-design-block--category-grid .category-body, .web-design-block--categories .category-body, .web-design-block--product-grid .featured-body, .web-design-block--products .featured-body, .web-design-block--offers .promo-body { padding: var(--m-card-pad,var(--t-card-pad,var(--d-card-pad,14px))); }
}

/* The commercial storefront uses auto-fill and a touch rail for its native
   category listing. Editor blocks are intentionally different: their column
   count belongs to the versioned document, so keep it authoritative on every
   device even though storefront_templates.css is more specific. */
.app-body.storefront-shell .web-design-block--category-grid > .category-grid,
.app-body.storefront-shell .web-design-block--categories > .category-grid,
.app-body.storefront-shell .web-design-block--product-grid > .featured-grid,
.app-body.storefront-shell .web-design-block--products > .featured-grid,
.app-body.storefront-shell .web-design-block--offers > .promo-grid {
  grid-template-columns: repeat(var(--d-card-columns,4),minmax(0,1fr));
  gap: var(--d-card-gap,16px);
}

@media (min-width: 601px) and (max-width: 1024px) {
  .app-body.storefront-shell .web-design-block--category-grid > .category-grid,
  .app-body.storefront-shell .web-design-block--categories > .category-grid,
  .app-body.storefront-shell .web-design-block--product-grid > .featured-grid,
  .app-body.storefront-shell .web-design-block--products > .featured-grid,
  .app-body.storefront-shell .web-design-block--offers > .promo-grid {
    grid-template-columns: repeat(min(3,var(--t-card-columns,var(--d-card-columns,4))),minmax(0,1fr));
    gap: var(--t-card-gap,var(--d-card-gap,16px));
  }
}

@media (max-width: 600px) {
  .app-body.storefront-shell .web-design-block--category-grid > .category-grid,
  .app-body.storefront-shell .web-design-block--categories > .category-grid,
  .app-body.storefront-shell .web-design-block--product-grid > .featured-grid,
  .app-body.storefront-shell .web-design-block--products > .featured-grid,
  .app-body.storefront-shell .web-design-block--offers > .promo-grid {
    grid-template-columns: repeat(min(2,var(--m-card-columns,var(--t-card-columns,var(--d-card-columns,4)))),minmax(0,1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: var(--m-card-gap,var(--t-card-gap,var(--d-card-gap,16px)));
    overflow: visible;
    scroll-snap-type: none;
  }
}

.web-design-frame.has-auto-flow .web-design-block.is-auto-flow {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .web-designed-page *, .web-designed-page *::before, .web-designed-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* The published editor document follows the same phone-density contract as
   native storefront pages. A saved desktop/tablet column count may never
   squeeze three or four cards into a <=768px customer viewport. */
@media (max-width: 768px) {
  .app-body.storefront-shell .web-design-block--category-grid > .category-grid,
  .app-body.storefront-shell .web-design-block--categories > .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: var(--m-card-gap, var(--t-card-gap, var(--d-card-gap, 12px)));
    overflow: visible;
    scroll-snap-type: none;
  }

  .app-body.storefront-shell .web-design-block--product-grid > .featured-grid,
  .app-body.storefront-shell .web-design-block--products > .featured-grid,
  .app-body.storefront-shell .web-design-block--offers > .promo-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: var(--m-card-gap, var(--t-card-gap, var(--d-card-gap, 12px)));
    overflow: visible;
    scroll-snap-type: none;
  }

  .app-body.storefront-shell :where(
    .web-design-block--category-grid,
    .web-design-block--categories,
    .web-design-block--product-grid,
    .web-design-block--products,
    .web-design-block--offers
  ) :where(.category-card, .featured-card, .promo-card) {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 360px) {
  .app-body.storefront-shell .web-design-block--category-grid > .category-grid,
  .app-body.storefront-shell .web-design-block--categories > .category-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}