/* ============================================================
   Shop banner — platform component (Shop Banner system)
   Height comes from the aspect ratio only (no fixed heights,
   no min-height): 5:1 desktop, 4:1 tablet, 3:1 mobile.
   ============================================================ */

.sb-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 1;
  overflow: hidden;
  background: #efe7da;
}

.sb-banner picture,
.sb-banner__img {
  display: block;
  width: 100%;
  height: 100%;
}

.sb-banner__img {
  object-fit: cover;
  object-position: var(--sb-pos-d, 50% 50%);
}

@media (max-width: 991px) {
  .sb-banner { aspect-ratio: 4 / 1; }
  .sb-banner__img { object-position: var(--sb-pos-t, 50% 50%); }
}

@media (max-width: 767px) {
  .sb-banner { aspect-ratio: 3 / 1; }
  .sb-banner__img { object-position: var(--sb-pos-m, 50% 50%); }
}

/* ---------- System fallback: store name over the fallback image ----------
   Same look as the current fallback (shop-hero.css), fixed px sizes. */
.sb-name {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  padding: 0 24px;
}

.sb-name span {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #F8E9B5 0%, #E2C16B 34%, #C9964A 64%, #8E5F2A 82%, #E7C975 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

/* show the name only on the breakpoints served by the system fallback */
@media (min-width: 992px) {
  .sb-name--desktop { display: flex; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .sb-name span { font-size: 46px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .sb-name--tablet { display: flex; }
  .sb-name span { font-size: 38px; }
}
@media (max-width: 767px) {
  .sb-name--mobile { display: flex; }
  .sb-name span { font-size: 28px; }
}