/* t1024u — designed-in photo system */
:root{--photo-radius:24px;--photo-radius-sm:16px;--thumb:88px;--safe-t:env(safe-area-inset-top,0px)}

/* Full-bleed hero under status bar */
.hero,.detail-hero,.hero.parallax-hero{
  position:relative!important; width:100%!important;
  margin-left:0!important; margin-right:0!important;
  margin-top:calc(-1 * (var(--safe-t) + 12px))!important;
  padding:0!important; padding-bottom:125%!important;
  aspect-ratio:auto!important; height:auto!important;
  border-radius:0 0 var(--photo-radius) var(--photo-radius)!important;
  overflow:hidden!important; background:var(--photo-tint, var(--muted));
}
.hero > .pic,.detail-hero > .pic,
.hero > .scrim,.detail-hero > .scrim{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border-radius:0!important;aspect-ratio:auto!important;z-index:0}
.hero > .scrim,.detail-hero > .scrim{
  background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.08) 28%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.72) 100%)!important;
  z-index:1!important; backdrop-filter:none!important;
}
.hero > .copy,.detail-hero > .copy{
  position:absolute!important; left:0; right:0; bottom:0; z-index:2!important;
  padding:calc(18px + var(--safe-t)) 18px 22px!important; height:auto!important; min-height:0!important;
  color:#fff!important;
}
.hero > .copy h1,.hero > .copy p,.hero > .copy .eyebrow,.hero > .copy .huge-num,
.detail-hero > .copy h2,.detail-hero > .copy p,.detail-hero > .copy .eyebrow{color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.hero-float-bar{
  position:absolute; top:calc(10px + var(--safe-t)); left:12px; right:12px; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:10px; pointer-events:none;
}
.hero-float-bar > *{pointer-events:auto}
.hero-chip{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px;
  background:rgba(0,0,0,.38); color:#fff; font-size:12px; font-weight:700; letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.18);
}

/* Image-led cards: photo fills, frosted meta strip */
.rcard,.wcard{
  position:relative; overflow:hidden; border-radius:var(--photo-radius);
  background:var(--photo-tint, var(--paper));
  border:1px solid color-mix(in srgb, var(--photo-primary, var(--line)) 35%, var(--line));
  box-shadow:0 10px 28px color-mix(in srgb, var(--photo-primary, transparent) 22%, transparent);
  isolation:isolate;
}
.rcard > .pic,.wcard > .pic{
  aspect-ratio:4/5!important; border-radius:0!important; width:100%; margin:0;
}
.rcard > .meta,.wcard > .meta{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:14px 14px 16px;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--photo-primary, #111) 55%, rgba(10,12,16,.82)));
  color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.rcard > .meta h3,.wcard > .meta h3{color:#fff!important; text-shadow:0 1px 8px rgba(0,0,0,.4); margin:0 0 4px}
.rcard > .meta .sub,.wcard > .meta .sub,.rcard > .meta .badge,.wcard > .meta .badge{color:rgba(255,255,255,.88)!important}
.rcard .heart,.wcard .heart{z-index:3; position:absolute; top:10px; right:10px}

/* Carousel cards slightly tighter */
.h-scroll > .rcard,.h-scroll > .wcard{flex:0 0 78%; scroll-snap-align:center}
.h-scroll > .rcard > .pic,.h-scroll > .wcard > .pic{aspect-ratio:4/5!important}

/* Compact row thumbs — min 88px, generous */
.slot,.herb-row,.rcard.row,.wcard.row{
  display:grid; grid-template-columns:var(--thumb) 1fr auto; gap:12px; align-items:center;
  padding:10px; border-radius:var(--photo-radius-sm);
  background:linear-gradient(90deg, var(--photo-tint, var(--paper)) 0%, var(--paper) 55%);
  border:1px solid color-mix(in srgb, var(--photo-primary, var(--line)) 28%, var(--line));
  overflow:hidden;
}
.slot .pic,.herb-row .pic,.rcard.row .pic,.wcard.row .pic,
.pic-thumb{
  width:var(--thumb)!important; height:var(--thumb)!important; flex:0 0 var(--thumb)!important;
  aspect-ratio:1!important; border-radius:14px!important; margin:0!important;
}
.rcard.herb-row,.wcard.row{display:grid; grid-template-columns:var(--thumb) 1fr; position:relative}
.rcard.herb-row > .pic,.wcard.row > .pic{position:relative; aspect-ratio:1!important; border-radius:var(--photo-radius-sm) 0 0 var(--photo-radius-sm)!important}
.rcard.herb-row > .meta,.wcard.row > .meta{
  position:relative; background:transparent; color:inherit; backdrop-filter:none; padding:12px 14px;
}
.rcard.herb-row > .meta h3,.wcard.row > .meta h3{color:var(--ink)!important; text-shadow:none}
.rcard.herb-row > .meta .sub,.wcard.row > .meta .sub{color:var(--muted)!important}

/* Detail page tinted wash */
.detail-wash{
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--photo-primary, var(--accent)) 38%, transparent), transparent 60%),
    var(--bg);
}
.detail-hero{margin-top:calc(-1 * (var(--safe-t) + 8px))!important}

/* Overlay chips on images */
.img-chip{
  position:absolute; left:12px; bottom:12px; z-index:2;
  padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
  background:rgba(0,0,0,.42); color:#fff; border:1px solid rgba(255,255,255,.2);
}

/* Fullscreen photo viewer */
.photo-viewer{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:rgba(0,0,0,0); opacity:0; pointer-events:none;
  transition:opacity .28s ease, background .28s ease;
}
.photo-viewer.on{opacity:1; pointer-events:auto; background:rgba(0,0,0,.92)}
.photo-viewer .pv-img{
  max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain;
  transform:translate3d(0,0,0) scale(1); transform-origin:center; will-change:transform;
  touch-action:none; border-radius:0;
}
.photo-viewer .pv-close{
  position:absolute; top:calc(12px + var(--safe-t)); right:14px; z-index:2;
  width:40px; height:40px; border-radius:999px; border:0; background:rgba(255,255,255,.16); color:#fff; font-size:20px;
}
.photo-viewer .pv-hint{
  position:absolute; bottom:calc(18px + var(--safe-b,0px)); left:0; right:0; text-align:center;
  color:rgba(255,255,255,.7); font-size:13px; font-weight:600; pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .photo-viewer,.rcard > .meta,.wcard > .meta{transition:none!important; backdrop-filter:none!important}
}