/* Original LubrixOils homepage composition. Shared fonts, palette and controls
   remain owned by storefront-system.css; catalogue cards by catalog.css. */
body.shop-public[data-shop-page="home"] .lubrix-home { padding-top: 24px; }
.lubrix-home .lubrix-home-intro {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 16px 20px; margin-bottom: 16px;
  border-left: 4px solid var(--shop-action); border-radius: 0 12px 12px 0;
  background: var(--color-surface);
}
.lubrix-home-intro .lubrix-home-brand { color: var(--shop-action); font-size: var(--shop-text-sm); font-weight: 700; margin: 0 0 4px; }
.lubrix-home-intro h1 { font-size: var(--shop-title); margin: 0 0 8px; }
.lubrix-home-intro p { max-width: 60ch; margin: 0; }
.lubrix-home-intro .button { flex: none; gap: 16px; }
body.shop-public[data-shop-page="home"] .lubrix-home .reference-home-section-heading :is(h1,h2) {
  text-align: left; text-transform: none; font-size: var(--shop-section-title); line-height: 1.2;
}
body.shop-public[data-shop-page="home"] .lubrix-home .reference-home-services { padding-top: 32px; }
body.shop-public[data-shop-page="home"] .lubrix-home .reference-home-service-grid { gap: 16px; }
body.shop-public[data-shop-page="home"] .lubrix-home .reference-home-service-card { border-radius: 2px; }
body.shop-public[data-shop-page="home"] .lubrix-home .reference-home-service-card p { font-size: var(--shop-text-sm); line-height: 1.55; }
body.shop-public[data-shop-page="home"] .lubrix-home .reference-home-service-card .button { min-height: 44px; font-size: var(--shop-text-sm); }
body.shop-public[data-shop-page="home"] .lubrix-home .reference-home-benefits {
  grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; border: 0; background: transparent; margin-top: 32px;
}
body.shop-public[data-shop-page="home"] .lubrix-home .reference-home-benefits article {
  align-items: flex-start; text-align: left; border: 0; border-top: 1px solid var(--line);
  padding: 16px 0; min-height: 0;
}
body.shop-public[data-shop-page="home"] .lubrix-home .reference-benefit-icon { background: var(--shop-info-bg); color: var(--shop-action); }
body.shop-public[data-shop-page="home"] .lubrix-home .reference-home-benefits strong { font-size: var(--shop-text-base); }
body.shop-public[data-shop-page="home"] .lubrix-home .reference-home-benefits small { max-width: none; font-size: var(--shop-text-sm); line-height: 1.55; }
body.shop-public[data-shop-page="home"] .lubrix-home .reference-home-notice { padding: 24px; border-radius: 2px; background: var(--shop-info-bg); font-size: var(--shop-text-sm); line-height: 1.55; }
body.shop-public[data-shop-page="home"] .lubrix-home .reference-home-news { padding-top: 32px; }
body.shop-public[data-shop-page="home"] .lubrix-home .reference-home-news-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
body.shop-public[data-shop-page="home"] .lubrix-home .reference-home-news-card { border-radius: 2px; padding: 24px; }
@media (max-width: 800px) {
  .lubrix-home .lubrix-home-intro { align-items: flex-start; flex-direction: column; padding: 16px; gap: 12px; }
  body.shop-public[data-shop-page="home"] .lubrix-home .reference-home-service-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body.shop-public[data-shop-page="home"] .lubrix-home :is(.reference-home-benefits,.reference-home-news-grid) { grid-template-columns: 1fr; }

}

.lubrix-home-intro .home-quick-search {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px; width: min(100%, 480px); flex: none; align-items: stretch;
}
.lubrix-home-intro .home-quick-search input {
  min-width: 0; width: 100%; min-height: 44px; font-size: var(--shop-text-base);
}
.lubrix-home-intro .home-quick-search .button { min-height: 44px; padding: 8px 16px; }
@media (max-width: 1100px) {
  .lubrix-home-intro .home-quick-search { width: min(100%, 360px); }
}
@media (max-width: 800px) {
  .lubrix-home-intro .home-quick-search { width: 100%; }
}

/* Homepage scale: primary lookup, compact secondary paths, quiet support facts.
   Reset legacy capture heights so every section follows its actual content. */
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .lubrix-home-intro h1 {
  font-size: clamp(30px, 2.4vw, 32px);
  line-height: 1.2;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .lubrix-home-intro p {
  font-size: var(--shop-text-sm);
  line-height: 1.5;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-section-heading :is(h1,h2) {
  font-size: 24px !important;
  line-height: 1.25 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-services {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 24px !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-services > .reference-home-section-heading {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 16px !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-service-grid {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  transform: none !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
  height: auto !important;
  min-height: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 0 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-service-card {
  display: grid !important;
  grid-template-columns: 80px minmax(0, 1fr) !important;
  gap: 16px;
  height: auto !important;
  min-height: 144px !important;
  padding: 16px !important;
  border-radius: 8px;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-service-card > img {
  width: 80px !important;
  height: 100px !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  object-fit: contain;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-service-card > div {
  min-width: 0;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-service-card h3 {
  font-size: 18px !important;
  line-height: 1.3 !important;
  margin: 0 0 8px !important;
  overflow-wrap: anywhere;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-service-card p {
  font-size: var(--shop-text-sm) !important;
  line-height: 1.5 !important;
  margin: 0 0 12px !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-service-card .button {
  min-height: 44px !important;
  padding: 8px 12px !important;
  font-size: var(--shop-text-sm) !important;
  white-space: normal;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-benefits {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  transform: none !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
  height: auto !important;
  min-height: 0 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 24px 0 0 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-benefits article {
  grid-column: auto !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px 0 !important;
  justify-content: flex-start;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-benefit-icon {
  width: 32px !important;
  height: 32px !important;
  margin-bottom: 8px;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-benefit-icon svg {
  width: 24px !important;
  height: 24px !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home :is(.reference-home-notice,.reference-home-news) {
  height: auto !important;
  min-height: 0 !important;
}
@media (max-width: 1100px) {
  body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 800px) {
  body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-service-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
@media (max-width: 600px) {
  body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-service-card {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 12px;
    padding: 12px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-service-card > img {
    width: 56px !important;
    height: 80px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-benefits {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Match recommendation surfaces and give the final section a clear rhythm. */
body.shop-public.reference-shell[data-shop-page="home"] main .lubrix-home .reference-home-news {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 24px 0 32px !important;
}
body.shop-public.reference-shell[data-shop-page="home"] main .lubrix-home .reference-home-news .reference-home-section-heading {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 16px !important;
}
body.shop-public.reference-shell[data-shop-page="home"] main .lubrix-home .reference-home-news-card {
  height: auto !important;
  min-height: 0 !important;
  padding: 20px !important;
  border-radius: 2px !important;
}
body.shop-public.reference-shell[data-shop-page="home"] main .lubrix-home .reference-home-news-card h3 {
  margin: 0 0 8px !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] main .lubrix-home .reference-home-all-news {
  display: inline-block;
  margin-top: 16px !important;
}

/* Approved expressive homepage, 2026-10-06. The scoped shell deliberately
   leaves catalogue, checkout and account pages on their existing composition. */
body.shop-public.reference-shell[data-shop-page="home"] {
  background: var(--color-surface);
}
body.shop-public.reference-shell[data-shop-page="home"] main .lubrix-home {
  padding-top: 0; padding-bottom: 0;
}
.home-design-hero {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 300px;
  background: var(--color-action); position: relative; isolation: isolate;
  margin: 0 0 16px; overflow: hidden; border-radius: 2px;
  border: 1px solid var(--color-brand-dark);
}
.home-design-hero-copy { padding: 32px; z-index: 2; color: var(--color-surface); }
.home-design-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; margin: 0 0 12px; line-height: 1.5;
}
body.shop-public.reference-shell[data-shop-page="home"] .home-design-hero h1 {
  color: var(--color-surface); font-size: clamp(32px, 3.8vw, 48px);
  max-width: 12ch; margin: 0 0 12px; line-height: 1.12;
}
.home-design-hero-copy > p:not(.home-design-eyebrow) {
  color: var(--color-surface); font-size: 16px; margin: 0 0 20px; max-width: 35ch;
}
body.shop-public.reference-shell[data-shop-page="home"] .home-design-lime-button {
  color: var(--color-text); background: var(--color-brand-yellow);
  border-color: var(--color-brand-dark); border-radius: 2px; min-height: 44px;
  gap: 16px; font-weight: 700;
}
body.shop-public.reference-shell[data-shop-page="home"] .home-design-lime-button:hover {
  background: var(--color-brand-green); border-color: var(--color-brand-green);
}
.home-design-hero-art {
  position: relative; background: var(--color-brand-yellow);
  min-width: 0; display: grid; place-items: center;
}
.home-design-hero-art::before {
  content: ''; position: absolute; inset: 0 auto 0 -32px;
  width: 64px; background: var(--color-brand-yellow); transform: skewX(8deg);
}
.home-design-ribbon {
  position: absolute; width: 125%; height: 135%; border: 35px solid var(--color-action);
  border-radius: 50%; transform: rotate(-28deg); left: -5%; top: -50%;
}
.home-design-pack {
  position: absolute; object-fit: contain; z-index: 1; width: 32%; height: 75%;
  bottom: 26px; filter: drop-shadow(0 8px 6px var(--color-overlay));
}
.home-design-pack-1 { left: 8%; transform: rotate(-7deg); height: 60%; bottom: 24px; }
.home-design-pack-2 { left: 31%; width: 42%; height: 85%; }
.home-design-pack-3 { right: 4%; width: 28%; height: 53%; bottom: 28px; transform: rotate(5deg); }
.home-design-art-caption {
  position: absolute; bottom: 10px; left: 20px; right: 16px;
  font-size: 12px; font-weight: 700; text-align: right; z-index: 2;
  color: var(--color-text);
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-categories {
  padding: 0 !important; margin: 0 0 24px !important; height: auto !important;
}
/* Homepage category geometry is owned here, independently of catalogue skins. */
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog > .reference-home-section-heading {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-height: 0 !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip-path: inset(50%);
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category::after {
  content: none !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: -2px;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category-grid {
  display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 12px !important; width: 100% !important; margin: 0 !important;
  transform: none !important; height: auto !important; grid-auto-rows: auto !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category {
  display: grid !important; grid-template-columns: clamp(64px, 10vw, 120px) minmax(0,1fr) 24px !important;
  align-items: center; align-content: center; gap: 12px !important; min-width: 0; min-height: 96px !important; height: auto !important;
  padding: 8px 16px !important; box-sizing: border-box; border-radius: 2px !important;
  border: 1px solid var(--color-brand-dark) !important;
  background: var(--color-surface-info) !important; color: var(--color-text) !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category:nth-child(even) {
  background: color-mix(in srgb,var(--color-brand-green) 65%,var(--color-surface)) !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category img {
  grid-column: 1; width: 100% !important; max-width: 120px; height: 80px !important;
  position: static !important; z-index: auto !important; inset: auto !important;
  margin: 0 !important; object-fit: contain !important; transform: none !important; filter: none !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category span {
  font-size: 14px !important; font-weight: 700; line-height: 1.4 !important; padding: 0 !important;
  max-width: none !important; text-shadow: none !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category b {
  font-size: 22px !important; align-self: center; position: static !important; margin: 0 !important;
  grid-column: 3; padding: 0 !important; width: 24px; text-align: center;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-section-heading {
  min-height: 0 !important; height: auto !important; margin: 0 0 12px !important;
}
.home-design-support {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-top: 24px;
}
.home-design-support article {
  display: grid; align-items: center; gap: 16px; padding: 24px; border-radius: 2px;
  min-width: 0; min-height: 220px; border: 1px solid var(--color-brand-dark);
}
.home-design-operation {
  grid-template-columns: minmax(0,1fr) 130px;
  color: var(--color-surface); background: var(--color-brand-dark);
}
body.shop-public.reference-shell[data-shop-page="home"] .home-design-operation :is(h2,p) {
  color: var(--color-surface);
}
.home-design-operation img { width: 100%; height: 170px; object-fit: contain; }
.home-design-document-panel {
  grid-template-columns: minmax(0,1fr) 76px;
  background: color-mix(in srgb,var(--color-brand-green) 80%,var(--color-surface));
}
.home-design-document-panel svg { width: 100%; max-height: 130px; }
.home-design-support h2 { font-size: 28px; line-height: 1.15; margin: 0 0 12px; }
.home-design-support p:not(.home-design-eyebrow) { font-size: 14px; margin: 0 0 16px; line-height: 1.5; }
.home-design-support .button { font-size: 14px; white-space: normal; }
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-benefits {
  margin: 0 !important; gap: 16px !important;
  border-top: 1px solid var(--color-brand-dark) !important;
  border-bottom: 1px solid var(--color-brand-dark) !important;
  padding: 20px 0 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-benefits article {
  display: grid !important; grid-template-columns: 32px minmax(0,1fr);
  gap: 4px 12px; padding: 0 12px 0 0 !important; border-top: 0;
  align-content: start; text-align: left;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-benefit-icon {
  grid-row: span 2; background: transparent; margin: 0; color: var(--color-action);
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-benefits strong { font-size: 14px; }
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-benefits small { font-size: 12px; }
body.shop-public.reference-shell[data-shop-page="home"] main .lubrix-home .reference-home-news-card {
  position: relative; overflow: hidden; min-height: 200px !important;
  padding-right: 34% !important; background: var(--color-surface);
  border: 1px solid var(--color-brand-dark); border-radius: 2px !important;
}
body.shop-public.reference-shell[data-shop-page="home"] main .lubrix-home .reference-home-news-card:first-child {
  background: color-mix(in srgb,var(--color-brand-pink) 55%,var(--color-surface));
}
.home-design-editorial-art {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30%; height: 160px; color: var(--color-action); pointer-events: none;
}
body.shop-public.reference-shell[data-shop-page="home"] main .lubrix-home .reference-home-news-card p {
  font-size: 14px; line-height: 1.5;
}
@media(max-width:1100px) {
  .home-design-hero-copy { padding: 24px; }
  .home-design-support { grid-template-columns: 1.3fr 1fr; }
  .home-design-operation { grid-template-columns: minmax(0,1fr) 95px; }
  .home-design-support article { padding: 20px; }
  .home-design-support h2 { font-size: 24px; }
  .home-design-document-panel { grid-template-columns: minmax(0,1fr) 50px; }
  body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:800px) {
  body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category-grid {
    grid-template-columns: 1fr !important;
  }
    .home-design-hero { min-height: 280px; }
  .home-design-hero-copy { padding: 24px 20px; }
  .home-design-support { grid-template-columns: 1fr; }
  .home-design-operation { grid-template-columns: minmax(0,1fr) 130px; }
  .home-design-document-panel { grid-template-columns: minmax(0,1fr) 80px; }
  .home-design-support article { min-height: 180px; }
}
@media(max-width:600px) {
  .home-design-hero { grid-template-columns: 1fr; }
  .home-design-hero-copy { padding: 24px; }
  body.shop-public.reference-shell[data-shop-page="home"] .home-design-hero h1 { font-size: 36px; max-width: 14ch; }
  .home-design-hero-art { min-height: 210px; }
  .home-design-hero-art::before { display: none; }
  .home-design-pack { height: 75%; }
  .home-design-pack-1 { height: 63%; }
  .home-design-pack-2 { height: 90%; }
  .home-design-pack-3 { height: 65%; }
  body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category-grid {
    grid-template-columns: 1fr !important; gap: 8px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category { min-height: 88px !important; grid-template-columns: 64px minmax(0,1fr) 24px !important; gap: 12px !important; padding: 8px 12px !important; }
  body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category img { width: 64px !important; height: 64px !important; }
  .home-design-support article { padding: 20px; gap: 12px; }
  .home-design-operation { grid-template-columns: minmax(0,1fr) 72px; }
  .home-design-operation img { height: 130px; }
  .home-design-document-panel { grid-template-columns: minmax(0,1fr) 52px; }
  body.shop-public.reference-shell[data-shop-page="home"] main .lubrix-home .reference-home-news-card {
    padding-right: 20px !important;
  }
  .home-design-editorial-art { position: static; transform: none; float: right; width: 80px; height: 100px; margin: 0 0 8px 12px; }
  body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-benefits {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-benefits article {
    grid-template-columns: minmax(0,1fr); padding: 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-benefit-icon { grid-row: auto; }
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category-grid {
  min-height: 0 !important; grid-template-rows: none !important; padding: 0 !important;
}
/* Match the exact legacy quick-catalog boundary, keeping compact tile labels. */
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category-grid {
  border: 0 !important; background: transparent !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category b {
  display: block !important; color: var(--color-text) !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-product-card {
  border: 1px solid var(--color-brand-dark); border-radius: 2px !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .home-quick-catalog .reference-home-category span {
  grid-column: 2; min-width: 0; overflow-wrap: anywhere;
}
body.shop-public.reference-shell[data-shop-page="home"] .lubrix-home .reference-home-categories.home-quick-catalog {
  margin-bottom: 24px !important;
}
/* Let editorial sections follow natural responsive content flow. */
body.shop-public.reference-shell[data-shop-page="home"] main .lubrix-home .reference-home-news {
  transform: none !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

/* Quiet rotating editorial banners; the progress rail is the only visible control. */
.home-banners { position: relative; margin-bottom: 16px; border-radius: 2px; overflow: hidden; }
.home-banners:focus-visible { outline: 3px solid var(--color-text); outline-offset: 4px; }
.home-banners .home-banner { margin: 0; height: 420px; min-height: 420px; border-radius: 0; }
.home-banners .home-banner[hidden] { display: none; }
.home-banners .home-design-hero-copy { display: flex; flex-direction: column; justify-content: center; padding-bottom: 48px; }
body.shop-public.reference-shell[data-shop-page="home"] .home-banner h2 {
  font-size: clamp(32px, 3.8vw, 48px); line-height: 1.12; max-width: 16ch; margin: 0 0 16px; color: inherit;
}
.home-banner-visual { height: 420px; position: relative; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 32px; }
.home-banner-products-visual { background: var(--color-brand-green); }
.home-banner-documents .home-design-hero-copy { background: var(--color-text); }
.home-banner-documents-visual { background: var(--color-brand-pink); }
.home-banner-account .home-design-hero-copy { background: var(--color-action); }
.home-banner-account-visual { background: var(--color-surface-accent); flex-direction: column; gap: 20px; }
.home-banner-screen { width: 100%; border: 6px solid var(--color-surface); border-radius: 2px; background: var(--color-surface); box-shadow: 0 16px 28px color-mix(in srgb, var(--color-brand-dark) 15%, transparent); overflow: hidden; transform: rotate(-4deg); }
.home-banner-screen img { display: block; width: 100%; height: auto; }
.home-banner-products-visual .home-banner-screen { width: 90%; margin-left: 10%; transform: rotate(-5deg); }
.home-banner-feature-pack { position: absolute; left: 2%; bottom: 28px; height: 66%; width: 28%; object-fit: contain; filter: drop-shadow(0 12px 10px color-mix(in srgb, var(--color-brand-dark) 25%, transparent)); }
.home-banner-documents-visual .home-banner-screen { transform: rotate(4deg); margin-top: 36px; }
.home-banner-document-word { position: absolute; top: 20px; left: 32px; font-size: 32px; font-weight: 700; color: var(--color-text); }
.home-banner-account-mark { align-self: flex-start; font-size: 36px; font-weight: 700; color: var(--color-action); letter-spacing: -.04em; }
.home-banner-account-visual .home-banner-screen { transform: rotate(-3deg); }
.home-banner-account-caption { align-self: flex-end; font-size: 14px; font-weight: 700; color: var(--color-text); }
.home-banner-progress { position: absolute; z-index: 3; left: 32px; right: 32px; bottom: 16px; display: flex; gap: 6px; }
.home-banner-progress span { flex: 1; height: 3px; overflow: hidden; background: color-mix(in srgb, var(--color-surface) 44%, transparent); border-radius: 3px; }
.home-banner-progress span::after { content: ''; display: block; height: 100%; background: var(--color-brand-yellow); transform-origin: left; transform: scaleX(0); }
.home-banner-progress span:nth-child(n+3) { background: color-mix(in srgb, var(--color-brand-dark) 20%, transparent); }
.home-banner-progress span:nth-child(n+3)::after { background: var(--color-action); }
.home-banner-progress [data-active]::after { transform: scaleX(var(--banner-progress, 0)); }
.home-banner-progress [data-complete]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) { .home-banner:not([hidden]) { animation: home-banner-reveal .45s ease-out; } @keyframes home-banner-reveal { from { opacity: .45; } to { opacity: 1; } } }
@media (max-width: 800px) {
  .home-banners .home-banner { min-height: 420px; }
  .home-banner-visual { padding: 24px; }
}
@media (max-width: 600px) {
  .home-banners .home-banner { grid-template-columns: 1fr; grid-template-rows: 360px 260px; height: 620px; min-height: 620px; }
  .home-banners .home-design-hero-copy { padding: 24px; min-height: 260px; }
  body.shop-public.reference-shell[data-shop-page="home"] .home-banner h2 { font-size: 36px; }
  .home-banner-visual, .home-banners .home-design-hero-art { height: 260px; min-height: 260px; padding: 24px 24px 40px; }
  .home-banner-screen { max-width: 380px; }
  .home-banner-documents-visual { flex-direction: column; gap: 8px; padding: 16px 24px 28px; }
  .home-banner-document-word { position: static; align-self: flex-start; font-size: 20px; }
  .home-banner-documents-visual .home-banner-screen { margin-top: 0; max-width: 280px; }
  .home-banner-account-mark { font-size: 28px; }
  .home-banner-account-visual { gap: 8px; padding: 16px 24px 28px; }
  .home-banner-progress { left: 24px; right: 24px; }
  .home-banner-progress span { background: color-mix(in srgb, var(--color-brand-dark) 20%, transparent); }
  .home-banner-progress span::after { background: var(--color-action); }
}