/* Soft glass: shared visual skin for ZonaLaka and Serebro, 2026-10-15.
   Layout, padding, typography, controls and product data remain theme-owned. */
:root {
  --product-buy-radius: 12px;
  --product-glass-surface: rgba(255,255,255,.65);
  --product-glass-line: rgba(255,255,255,.7);
  --product-glass-tint: #c9e7e9;
  --product-glass-tint-alt: #eedfea;
  --product-glass-base: #f2f7f7;
  --product-glass-shadow-color: rgba(44,87,95,.09);
  --product-glass-shadow: 0 12px 32px var(--product-glass-shadow-color),
    inset 0 0 0 1px var(--product-glass-line),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 24px rgba(255,255,255,.22);
}
html.serebro-ui {
  --product-glass-tint: #e4d9ee;
  --product-glass-tint-alt: #eee5f3;
  --product-glass-base: #faf8fc;
  --product-glass-shadow-color: rgba(74,40,113,.09);
}
@supports (color: color-mix(in srgb, white, black)) {
  html.serebro-ui {
    --product-glass-tint: color-mix(in srgb, var(--sb-primary) 17%, var(--sb-surface));
    --product-glass-tint-alt: color-mix(in srgb, var(--sb-soft) 80%, var(--sb-surface));
    --product-glass-base: var(--sb-field);
    --product-glass-shadow-color: color-mix(in srgb, var(--sb-primary) 9%, transparent);
  }
}
/* A background only where products are present; home banners keep their own skin. */
html body main:has(.s-product-wrapper, .zl-product-hero):not(:has(.zl-products-v2)),
html body .zl-products-v2 {
  background: radial-gradient(ellipse at 0 10%, var(--product-glass-tint), transparent 52%),
    radial-gradient(ellipse at 100% 30%, var(--product-glass-tint-alt), transparent 52%),
    var(--product-glass-base) !important;
}
html body main:has(.s-product-wrapper, .zl-product-hero):not(:has(.zl-products-v2)) .global-header {
  background: transparent;
}
/* Inset border does not add pixels to the owner's current geometry. */
html body :is(.s-product-wrapper, .s-product-wrapper.zl-product-card) > .card,
html body .zl-product-layout-a .zl-product-hero,
html body .s-product-page .s-product-info {
  background: var(--product-glass-surface) !important;
  border-color: var(--product-glass-line) !important;
  border-radius: 26px !important;
  box-shadow: var(--product-glass-shadow) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html body :is(.s-product-wrapper, .s-product-wrapper.zl-product-card) > .card .card-borders,
html body :is(.s-product-wrapper, .s-product-wrapper.zl-product-card) > .card .card-body,
html body :is(.s-product-wrapper, .s-product-wrapper.zl-product-card) > .card .card-footer {
  background: transparent !important;
  border-color: rgba(255,255,255,.25) !important;
}
html body :is(.s-product-wrapper, .s-product-wrapper.zl-product-card) > .card .card-borders {
  border-radius: inherit;
}
/* Opaque fallback keeps text legible where backdrop filters are unavailable. */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  :root { --product-glass-surface: rgba(255,255,255,.94); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --product-glass-surface: #fff; }
  html body :is(.s-product-wrapper, .s-product-wrapper.zl-product-card) > .card,
  html body .zl-product-layout-a .zl-product-hero,
  html body .s-product-page .s-product-info {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Owner refinements: compact mobile corners and product content insets. */
html body .s-product-page .s-features-wrapper__name,
html body .s-product-page .s-features-wrapper__text {
  background: transparent !important;
}
html body .s-product-page .s-product-info {
  padding: 24px;
}
/* One badge block lives with the price; desktop retains badges above it. */
.zl-product-layout-a .zl-product-price-row {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .zl-product-layout-a .zl-product-details .s-features-wrapper__name {
    width: min(180px, 40%);
  }
  .zl-product-layout-a .zl-product-hero {
    grid-template-areas: "gallery content";
    grid-template-rows: 1fr;
  }
}
@media (max-width: 767.98px) {
  html body :is(.s-product-wrapper, .s-product-wrapper.zl-product-card) > .card,
  html body .zl-product-layout-a .zl-product-hero,
  html body .s-product-page .s-product-info {
    border-radius: 18px !important;
  }
  /* Native page container has 20px gutters: return half to the panel. */
  main:not(:has(.zl-product-layout-a, .zl-products-v2)) .s-products-wrapper .s-products-list {
    margin-left: -15px;
    margin-right: -15px;
  }
  .zl-product-layout-a {
    margin-left: -10px;
    margin-right: -10px;
  }
  .zl-product-layout-a .zl-product-content,
  html body .zl-product-layout-a .s-product-info {
    padding-left: 10px;
    padding-right: 10px;
  }
  html body .s-product-page .s-product-info {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .zl-product-layout-a .zl-product-price-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 16px;
  }
  .zl-product-layout-a .zl-product-price-row > .add2cart {
    order: 0;
    margin-bottom: 0 !important;
  }
  .zl-product-layout-a .zl-product-price-row > .zl-product-page-labels {
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
  }
  .zl-product-layout-a .zl-product-price-row .zl-product-labels {
    padding: 0;
    justify-content: flex-start;
  }
}

/* Shared purchase-button shape for ZonaLaka listings and product pages. */
html:not(.serebro-ui) body :is(.s-product-wrapper, .zl-product-layout-a) .s-add-button {
  border-radius: var(--product-buy-radius) !important;
}