/* =============================================================================
   prisma-home.css — Start screen, ported from the design prototype
   (_handoffs/prisma/Prisma JTL Template.dc.html, screen "Start").

   Loaded LAST in the chain, after prisma-ui.css, so these win over the generic
   rz.css page components they replace. Every value here is taken from the
   prototype's inline styles; where the prototype hardcodes a colour that would
   break in dark mode, the token equivalent is used instead and noted.
   ========================================================================== */

/* ---------- section rhythm (the design's per-section vertical padding) ------ */
.rz-sec--hero{padding:clamp(18px,2.6vw,32px) 22px 0}
.rz-sec{max-width:var(--maxw);margin:0 auto}

/* ---------- HERO — full-bleed poster card --------------------------------- */
.rz-hero{position:relative;overflow:hidden;border-radius:28px;min-height:clamp(340px,44vw,500px);display:flex;align-items:flex-end;padding:clamp(24px,3.4vw,46px)}

/* Default media placeholder, per the design's documented formula, on the Safran
   base colour. Replaced inline when a hero image is configured in admin. */
.rz-hero__tone{position:absolute;inset:0;
  background:radial-gradient(115% 85% at 32% 14%,rgba(255,255,255,.30),transparent 58%),
             linear-gradient(155deg,rgba(255,255,255,.14),rgba(20,18,15,.22)),
             #C2500A}
.rz-hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,15,.12) 30%,rgba(20,18,15,.82))}
.rz-hero__inner{position:relative;max-width:44ch}

.rz-hero__pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;background:var(--red);color:var(--onRed);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;backdrop-filter:none}

/* #fff is correct here and theme-safe: the copy always sits on the always-dark
   scrim above, which does not invert. */
.rz-hero .rz-hero__inner h1{font-size:clamp(32px,4.8vw,62px);color:#fff;margin:0 0 16px;font-weight:800;letter-spacing:-.028em;line-height:1.06}
.rz-hero__lede{font-size:clamp(15px,1.4vw,17px);color:rgba(255,255,255,.8);margin:0 0 26px;max-width:none}
.rz-hero__cta{display:flex;gap:11px;flex-wrap:wrap;margin:0}

/* The prototype uses var(--ink) for this label — which inverts to near-white in dark
   and vanishes on the fixed-white button. The ground here is a hard #fff that never
   inverts, so the label is pinned to the always-dark ink, !important because the
   jtl-widgets skin colours buttons at that weight. */
.jtlw .rz-hero__btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 28px;border-radius:999px;
  background:#fff!important;background-image:none!important;color:#1A120C!important;border:none!important;
  font-weight:700;font-size:14.5px;cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.jtlw .rz-hero__btn:hover{transform:translateY(-2px);color:#1A120C!important;background:#fff!important}
.jtlw .rz-hero__btn--ghost{padding:15px 26px;background:rgba(255,255,255,.14)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.24)!important;color:#fff!important}
.jtlw .rz-hero__btn--ghost:hover{color:#fff!important;background:rgba(255,255,255,.22)!important}

/* ---------- section heads -------------------------------------------------- */
.rz-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.rz-sec-head h2{font-size:clamp(24px,3.2vw,38px);margin:0;font-weight:700;letter-spacing:-.028em}
.rz-sec-head .rz-eyebrow{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:8px;font-weight:400}
.rz-sec-head .rz-seeall{font-size:13.5px;font-weight:700;color:var(--red);white-space:nowrap}

/* ---------- CATEGORY GRID — six equal cards, 4 across ---------------------- */
.rz-catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,16px)}
.rz-catcard{display:block;border-radius:20px;border:1px solid var(--line);background:var(--surface);overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.rz-catcard:hover{transform:translateY(-4px);box-shadow:var(--shadowLg)}
.rz-catcard__img{display:block;aspect-ratio:4/3;background:var(--sand)}
.rz-catcard__cap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px}
.rz-catcard__txt{min-width:0}
.rz-catcard__name{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.rz-catcard__count{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:3px}
.rz-catcard__arrow{color:var(--red);flex-shrink:0}

/* ---------- PRODUCT GRID + card details ------------------------------------ */
.rz-prodgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}

/* The design's card action is a 36px SAND circle carrying an arrow, turning accent
   on hover — not a filled accent button. Scoped .jtlw so it beats prisma.css. */
.jtlw .rz-iadd,
.jtlw .rz-iadd.basket-details-add-to-cart{width:36px;height:36px;flex-shrink:0;border-radius:999px;
  /* prisma.css pins .basket-details-add-to-cart to the accent with !important, so the
     add-to-cart variant of this button has to answer in kind to stay on-design. */
  background:var(--sand)!important;background-image:none!important;color:var(--ink)!important;
  border:none!important;display:flex;align-items:center;justify-content:center;padding:0;
  transition:background .3s ease,color .3s ease}
.jtlw .rz-iadd:hover,
.jtlw .rz-iadd.basket-details-add-to-cart:hover{background:var(--red)!important;color:var(--onRed)!important;opacity:1}
.jtlw .rz-iadd svg{width:17px;height:17px}

/* SKU label: mono, muted, above the product name */
.rz-card__sku{font-family:var(--mono);font-size:10px;color:var(--muted);margin-bottom:6px}
/* badge + wish button metrics from the design */
/* rz.css paints this badge background:var(--ink) with a hardcoded color:#fff — in dark
   --ink inverts to near-white and the label disappears. --panel/--onPanel is the
   always-dark chrome pair and stays legible in both themes. */
.jtlw .rz-card__badge{padding:5px 11px;border-radius:999px;font-family:var(--mono);font-size:10px;font-weight:500;top:12px;left:12px;
  background:var(--panel);color:var(--onPanel)}
.jtlw .rz-card__badge--sale{background:var(--red);color:var(--onRed)}
.jtlw .rz-card__wish{top:10px;right:10px;width:34px;height:34px;border-radius:999px;background:var(--scrim);color:var(--onScrim);display:flex;align-items:center;justify-content:center}
.jtlw .rz-card__wish svg{width:15px;height:15px}

/* ---------- responsive ----------------------------------------------------- */
@media (max-width:1120px){
  .rz-catgrid,.rz-prodgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:940px){
  .rz-catgrid,.rz-prodgrid{grid-template-columns:repeat(2,1fr)}
  .rz-hero{min-height:clamp(300px,60vw,420px);border-radius:22px}
}
@media (max-width:560px){
  .rz-catgrid{grid-template-columns:1fr}
  .rz-hero__cta{flex-direction:column;align-items:stretch}
}