/* Vanityform v0.51 — storefront/workbench separation and visual cleanup. */
html[data-beauty-storefront="v0.51"] .store-home-qa-banner,
html[data-beauty-storefront="v0.51"] .beauty-commerce-qa-banner,
html[data-beauty-storefront="v0.51"] .beauty-secondary-qa-banner,
html[data-beauty-storefront="v0.51"] body > div[style*="z-index:9999"],
html[data-beauty-storefront="v0.51"] .catalog-card__price-note,
html[data-beauty-storefront="v0.51"] .product-preview-indicator,
html[data-beauty-storefront="v0.51"] .product-module-preview,
html[data-beauty-storefront="v0.51"] [data-workbench-only="true"] {
  display:none !important;
}

html[data-beauty-storefront="v0.51"] body {
  background:#fffdf9;
}

/* Home: keep the editorial scale but give the new real-photo hero a more deliberate crop. */
html[data-beauty-storefront="v0.51"] .beauty-editorial-home-hero--v051 .beauty-editorial-home-hero__media {
  inset:0 0 0 28%;
  background:#e7ded8;
}
html[data-beauty-storefront="v0.51"] .beauty-editorial-home-hero--v051 .beauty-editorial-home-hero__media img {
  object-position:50% 43%;
  transform:scale(1.02);
}
html[data-beauty-storefront="v0.51"] .beauty-editorial-home-hero--v051 .beauty-editorial-home-hero__stage::after {
  background:linear-gradient(90deg,#ede3dc 0%,#ede3dc 27%,rgba(237,227,220,.99) 34%,rgba(237,227,220,.9) 42%,rgba(237,227,220,.57) 51%,rgba(237,227,220,.12) 62%,transparent 70%);
}

/* Home commerce cards should look like products, not internal research cards. */
html[data-beauty-storefront="v0.51"] .store-home-product-card__pending { display:none !important; }
html[data-beauty-storefront="v0.51"] .store-home-product-card.is-preview .store-home-product-card__media::after { display:none !important; }
html[data-beauty-storefront="v0.51"] .store-home-product-card__media img,
html[data-beauty-storefront="v0.51"] .catalog-card__media img {
  background:#f7f3ef;
}

/* Sparse collections are intentionally edited, not stretched to imitate a large catalog. */
@media (min-width: 900px) {
  html[data-beauty-storefront="v0.51"] body.beauty-catalog-qa-preview[data-catalog-context="hair"] .shopify-catalog-grid,
  html[data-beauty-storefront="v0.51"] body.beauty-catalog-qa-preview[data-catalog-context="makeup"] .shopify-catalog-grid,
  html[data-beauty-storefront="v0.51"] body.beauty-catalog-qa-preview[data-catalog-context="organize"] .shopify-catalog-grid,
  html[data-beauty-storefront="v0.51"] body.beauty-catalog-qa-preview[data-catalog-context="selfcare"] .shopify-catalog-grid {
    grid-template-columns:repeat(auto-fit,minmax(260px,340px));
    justify-content:start;
    column-gap:38px;
    max-width:1120px;
  }
}

html[data-beauty-storefront="v0.51"] .shopify-catalog-browser__subtitle {
  max-width:48ch;
}
html[data-beauty-storefront="v0.51"] body[data-catalog-context]:not([data-catalog-context="all"]) .shopify-catalog-count {
  opacity:.55;
  font-size:.62rem;
  letter-spacing:.12em;
}

/* Secondary pages: remove QA tone and keep a calmer editorial surface. */
html[data-beauty-storefront="v0.51"] .beauty-secondary-shell {
  --v051-line:rgba(76,61,56,.14);
}
html[data-beauty-storefront="v0.51"] .beauty-offer-card,
html[data-beauty-storefront="v0.51"] .beauty-about-values article {
  border-color:var(--v051-line);
}

/* Footer stays brand-facing even though the build itself remains a local workbench. */
html[data-beauty-storefront="v0.51"] #site-footer [class*="trust"] {
  letter-spacing:normal;
}

@media (max-width: 760px) {
  html[data-beauty-storefront="v0.51"] .beauty-editorial-home-hero--v051 .beauty-editorial-home-hero__media {
    inset:0;
  }
  html[data-beauty-storefront="v0.51"] .beauty-editorial-home-hero--v051 .beauty-editorial-home-hero__media img {
    object-position:50% 36%;
  }
}

/* v0.51 link polish for customer-facing editorial cards. */
html[data-beauty-storefront="v0.51"] .beauty-offer-state {
  display:inline-block;
  text-decoration:none;
}
html[data-beauty-storefront="v0.51"] .beauty-offer-card h3 a,
html[data-beauty-storefront="v0.51"] .beauty-offer-card h3 a:visited {
  color:inherit;
  text-decoration:none;
}
html[data-beauty-storefront="v0.51"] .beauty-offer-card h3 a:hover {
  text-decoration:underline;
  text-underline-offset:.16em;
}