/* Public Hub · Clean Image Composition v2.
   Visual hierarchy comes from actual imagery, never nested decorative frames.
   Loaded last to correct the over-framed Visual Craft v1 treatment. */

/* MEDIA: one section, one image surface, no inset boxes or filler copy. */
html[data-hub-storefront] body .hub-market[data-hub-public-view] .hm-highlights {
  display:grid !important;
  gap:15px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .hm-highlights-head {
  align-items:baseline !important;
  gap:16px !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .hm-highlights-copy {
  gap:5px !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .hm-highlights-kicker {
  font-size:10px !important;
  letter-spacing:.12em !important;
  line-height:1.4 !important;
  font-weight:700 !important;
  color:var(--hm-muted) !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .hm-highlights h2 {
  margin:0 !important;
  font-size:clamp(21px,2vw,25px) !important;
  font-weight:730 !important;
  letter-spacing:-.035em !important;
  line-height:1.2 !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-media-count {
  font-size:11px !important;
  font-weight:600 !important;
}
/* Remove the inner gallery container completely. Images are the composition. */
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-media-gallery {
  display:grid !important;
  position:relative;
  gap:7px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-media-gallery .ehub-media-tile {
  position:relative !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:13px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-media-gallery .ehub-media-image-link {
  position:absolute !important;
  inset:0;
  display:grid;
  place-items:center;
  padding:0 !important;
  border:0 !important;
  border-radius:inherit !important;
  overflow:hidden !important;
  background:transparent !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-media-gallery .ehub-media-tile img {
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  object-fit:cover !important;
  border-radius:inherit !important;
  box-shadow:none !important;
  transition:transform .18s ease;
}
/* Single image = exactly one neat tile, sized to the asset rather than
   stretching an album to the full reading column. */
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-media-gallery.is-single {
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:auto !important;
  width:min(100%,310px) !important;
  min-height:0 !important;
  height:auto !important;
  align-items:start !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-media-gallery.is-single .ehub-media-tile {
  grid-column:1 !important;
  grid-row:1 !important;
  aspect-ratio:1 / 1 !important;
  min-height:0 !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-media-gallery.is-single .ehub-media-tile img {
  object-fit:contain !important;
}
/* Real multi-photo albums retain an editorial mosaic, with only image gaps. */
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-media-gallery.is-collage {
  width:100% !important;
  height:clamp(235px,30vw,350px) !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,minmax(0,1fr)) !important;
  min-height:0 !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-media-gallery.is-collage .ehub-media-tile {
  aspect-ratio:auto !important;
}
/* Keep source credits and image enlargement available without adding
   oversized overlays or the duplicate "Image from ..." panel. */
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-media-gallery .hm-visual-info-trigger {
  z-index:6 !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-media-gallery .ehub-media-tile figcaption {
  left:9px;right:9px;bottom:9px;
  padding:6px 8px;
  font-size:11px;
  border-radius:7px;
  background:rgba(5,17,33,.72);
}
.ehub-media-error-fallback {border-radius:12px !important;}
/* HERO: compress the canonical Ehopto stage into one continuous split panel. */
html[data-hub-storefront] body .hub-market[data-hub-public-view] > .hm-hero:has([data-hub-hero-kind="brand"]) {
  display:grid !important;
  grid-template-columns:minmax(0,48%) minmax(0,52%) !important;
  align-items:stretch !important;
  gap:0 !important;
  padding:0 !important;
  min-height:0 !important;
  border:1px solid rgba(105,161,217,.19) !important;
  border-radius:20px !important;
  overflow:hidden !important;
  background:#091a33 !important;
  box-shadow:none !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] > .hm-hero:has([data-hub-hero-kind="brand"]) > .hm-visual-wrap {
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] [data-hub-hero-kind="brand"] {
  width:100% !important;
  height:310px !important;
  min-height:310px !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  box-shadow:none !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view]
  [data-hub-hero-kind="brand"] .ehub-identity-stage {
  min-height:0 !important;
  padding:15px 20px 43px !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view]
  [data-hub-hero-kind="brand"] .ehub-stage-brand-sigil {
  width:165px !important;
  height:165px !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view]
  [data-hub-hero-kind="brand"] .ehub-stage-center {gap:9px !important}
html[data-hub-storefront] body .hub-market[data-hub-public-view]
  [data-hub-hero-kind="brand"] .ehub-stage-brand-line {
  font-size:10px !important;
  letter-spacing:.18em !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view]
  > .hm-hero:has([data-hub-hero-kind="brand"]) > .hm-main {
  align-self:center !important;
  padding:22px clamp(22px,3vw,42px) !important;
  min-width:0 !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view]
  > .hm-hero:has([data-hub-hero-kind="brand"]) .hm-title {
  font-size:clamp(36px,3.6vw,49px) !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view]
  > .hm-hero:has([data-hub-hero-kind="brand"]) .hm-kickers {
  margin-bottom:10px !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view]
  > .hm-hero:has([data-hub-hero-kind="brand"]) .ehub-brand-hero-cta {
  margin-top:18px !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view]
  > .hm-hero:has([data-hub-hero-kind="brand"]) .ehub-brand-hero-cta a {
  min-height:38px !important;
  padding:8px 12px !important;
}
/* Both images and the rest of the public Hub use one restrained radius.
   There is no second decorative frame around an image. */
html[data-hub-storefront] body .hub-market[data-hub-public-view] {
  --eh-round-shell:20px;
  --eh-round-stage:14px;
  --eh-round-card:14px;
  --eh-round-action:10px;
}
@media(max-width:780px) {
  html[data-hub-storefront] body .hub-market[data-hub-public-view]
    > .hm-hero:has([data-hub-hero-kind="brand"]) {
    grid-template-columns:minmax(0,1fr) !important;
  }
  html[data-hub-storefront] body .hub-market[data-hub-public-view] [data-hub-hero-kind="brand"] {
    height:245px !important;
    min-height:245px !important;
  }
  html[data-hub-storefront] body .hub-market[data-hub-public-view]
    [data-hub-hero-kind="brand"] .ehub-stage-brand-sigil {
    width:120px !important;
    height:120px !important;
  }
  html[data-hub-storefront] body .hub-market[data-hub-public-view]
    > .hm-hero:has([data-hub-hero-kind="brand"]) > .hm-main {
    padding:22px !important;
  }
  html[data-hub-storefront] body .hub-market[data-hub-public-view]
    > .hm-hero:has([data-hub-hero-kind="brand"]) .hm-title {
    font-size:38px !important;
  }
}
@media(max-width:540px) {
  html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-media-gallery.is-single {
    width:min(100%,280px) !important;
  }
  html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-media-gallery.is-collage {
    height:245px !important;
    gap:5px !important;
  }
  html[data-hub-storefront] body .hub-market[data-hub-public-view] .hm-highlights h2 {
    font-size:21px !important;
  }
}
@media(prefers-reduced-motion:reduce) {
  .ehub-media-tile img {transition:none !important;transform:none !important}
}