@import url("/bezel/styles/tokens.css");
@import url("/bezel/styles/components.css");
@import url("./zuza-ui.css");

:root {
  --shop-ink: #24201d;
  --shop-paper: #fbf8f2;
  --shop-accent: #b6432f;
  --shop-line: color-mix(in srgb, var(--shop-ink) 18%, transparent);
}

.shop-shell { min-height: 100vh; color: var(--shop-ink); background: var(--shop-paper); }
.shop-hero { position: relative; min-height: min(78vh, 50rem); display: grid; align-items: end; overflow: hidden; padding: clamp(4rem, 10vw, 8rem) 1.5rem; color: #fff; }
.shop-hero__media { position: absolute; inset: 0; background: #302b27 url("https://zuzaworkhub.hr/assets/zwh-infrastructure-cosmetics.jpg") center / cover no-repeat; }
.shop-hero__media::after { position: absolute; inset: 0; content: ""; background: rgb(21 18 16 / 58%); }
.shop-hero__inner { position: relative; width: min(72rem, 100%); margin: 0 auto; }
.shop-hero h1 { max-width: 14ch; margin: 0 0 1rem; font-size: 6rem; line-height: .96; }
.shop-hero p { max-width: 42rem; margin: 0 0 1.75rem; font-size: 1.1rem; }
.shop-btn { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .75rem 1rem; border: 1px solid currentColor; border-radius: 4px; color: inherit; background: transparent; font-weight: 700; text-decoration: none; }
.shop-catalog { max-width: 72rem; margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) 1.5rem; }
.shop-catalog h2 { margin: .25rem 0 1.5rem; font-size: 3.75rem; }
.shop-catalog__empty { display: grid; gap: .5rem; padding: 2rem; border: 1px solid var(--shop-line); border-radius: 6px; background: #fff; }
.shop-catalog__empty span { color: #625b55; }
.shop-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 2rem clamp(1rem, 4vw, 4rem); color: #fff; background: var(--shop-ink); }
.shop-footer a { color: inherit; }

@media (max-width: 900px) {
  .shop-hero h1 { font-size: 4.5rem; }
}

@media (max-width: 600px) {
  .shop-hero { min-height: 70vh; }
  .shop-hero h1 { font-size: 2.75rem; }
  .shop-catalog h2 { font-size: 2.5rem; }
  .shop-footer { flex-direction: column; }
}