/* Hero "Most Sold" generated banner template. Self-hosted, opt-in - only
   loaded on pages that render a live generated banner using this template.
   Scoped custom properties (--hms-*) so this never depends on or leaks into
   the site's global tokens. Fills 100% of its parent .home-slider-slide,
   which already reserves the slide's height via aspect-ratio - no extra
   min-height needed here. */

.hms-stage{
  --hms-green:#2E9B4F;
  --hms-green-deep:#1F7A3B;
  --hms-orange:#E97A2C;
  --hms-ink:#1C1C1C;
  --hms-ink-soft:#5A5A5A;
  --hms-paper:#FFFFFF;
  --hms-tile:#FAFAF8;
  --hms-line:#E4E7E0;

  position:relative;
  width:100%;
  height:100%;
  background:var(--hms-paper);
  overflow:hidden;
  display:flex;
  align-items:center;
  /* .hero-inner (home.css) sets text-align:center on everything inside the hero -
     reset it back to left here so it doesn't cascade into the tiles/heading below. */
  text-align:left;
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--hms-ink);
}

.hms-blob{position:absolute;border-radius:50%;pointer-events:none;}
.hms-blob-green-l{width:38%;height:0;padding-bottom:38%;background:var(--hms-green);left:-14%;top:-25%;}
.hms-blob-orange-l{width:22%;height:0;padding-bottom:22%;background:var(--hms-orange);left:8%;top:6%;}
.hms-blob-green-r{width:34%;height:0;padding-bottom:34%;background:var(--hms-green);right:-13%;bottom:-43%;}
.hms-blob-orange-r{width:17%;height:0;padding-bottom:17%;background:var(--hms-orange);right:2%;top:-28%;}

.hms-inner{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:22% 1fr;
  gap:2.4%;
  align-items:center;
  padding:2.2% 3%;
  box-sizing:border-box;
}

.hms-head{display:block;padding-left:.4%;text-decoration:none;color:inherit;}

.hms-title{
  margin:0 0 .6em;
  font-size:clamp(22px,4.2vw,58px);
  line-height:.98;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--hms-ink);
}

.hms-sub{
  margin:0 0 .8em;
  font-size:clamp(11px,.95vw,14px);
  line-height:1.4;
  color:var(--hms-ink-soft);
  max-width:32ch;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.hms-return{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  background:#EAF6EC;
  border:1.5px solid var(--hms-green);
  border-radius:4px;
  padding:6px 12px 6px 9px;
}
.hms-return-mark{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--hms-green);color:#fff;flex:0 0 22px;
}
.hms-return-text{font-size:clamp(10px,.8vw,13px);line-height:1.2;color:var(--hms-green-deep);font-weight:700;}

.hms-tiles{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1%;
  height:100%;
  align-content:center;
}

.hms-tile{
  background:var(--hms-tile);
  border:1px solid var(--hms-line);
  border-radius:6px;
  padding:8px 8px 9px;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  position:relative;
  max-height:100%;
  overflow:hidden;
}
.hms-tile:hover{border-color:var(--hms-green);}
.hms-tile:focus-visible{outline:3px solid var(--hms-green-deep);outline-offset:2px;}

.hms-tile-rank{
  position:absolute;top:6px;left:6px;
  width:20px;height:20px;border-radius:50%;
  background:var(--hms-green);color:#fff;
  font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

.hms-tile-img{
  flex:1 1 auto;
  min-height:0;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:4px;margin-bottom:6px;overflow:hidden;
}
/* Specificity beats the slider's generic ".home-slider-slide img { object-fit: cover }" rule. */
.hms-stage .hms-tile-img img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;}

.hms-tile-name{
  font-size:clamp(11px,.9vw,12.5px);
  line-height:1.32;font-weight:600;margin:0 0 4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

.hms-tile-price{font-size:clamp(13px,1.05vw,15px);font-weight:800;color:var(--hms-orange);margin-top:auto;}

.hms-tile-stalls{font-size:clamp(10px,.78vw,11px);color:var(--hms-ink-soft);margin-top:3px;}

/* Below 1180px the box is too short for the side-by-side desktop layout
   (heading column + tile column). Stack instead: a compact one-line
   heading+badge row on top, tiles filling the rest of the height - never
   hide the heading, it's "the anchor of the composition" at every size. */
@media (max-width:1180px){
  .hms-inner{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:3% 4%;
  }
  .hms-head{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    padding-left:0;
  }
  .hms-title{margin:0;font-size:clamp(18px,3.4vh,26px);line-height:1;}
  .hms-sub{display:none;}
  .hms-return{flex:0 0 auto;padding:4px 10px 4px 8px;}
  .hms-return-mark{width:18px;height:18px;flex:0 0 18px;}
  .hms-return-text{font-size:11px;}

  .hms-tiles{
    flex:1 1 auto;
    min-height:0;
    height:auto;
    align-content:stretch;
  }
}

@media (max-width:767px){
  .hms-title{font-size:clamp(16px,3.2vh,22px);}
  .hms-tiles{
    display:flex;gap:6px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    align-items:stretch;
  }
  .hms-tile{flex:0 0 30%;scroll-snap-align:start;}
}

@media (prefers-reduced-motion:reduce){
  .hms-stage *{transition:none !important;}
}