/* Nabho hero v2 — load after home-v3.css and theme-v3.css. */
.hmv-qhead {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 620px) max-content;
  justify-content: space-between;
  padding: 28px 34px 20px;
  border-radius: 22px;
  background: radial-gradient(ellipse at 20% 38%, rgb(237 92 43 / 9%), transparent 64%),
    linear-gradient(115deg, #f6f3e9, rgb(255 255 255 / 92%));
  color: #233a30;
  font-family: var(--nb-sans, system-ui, sans-serif);
}
.hmv-qhead .hmv-qhead-copy { min-width: 0; max-width: 620px; text-align: left; }
.hmv-qhead .hmv-qhead-eyebrow {
  display: block; color: #46564b; font-size: 10.5px;
  font-weight: 700; line-height: 1.5; letter-spacing: .13em;
}
.hmv-qhead h1 {
  font-family: var(--nb-serif, Georgia, serif);
  font-size: clamp(34px, 3.2vw, 40px); font-weight: 600;
  line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; color: #233a30;
}
/* Grid keeps the side controls clear of the theme's forced flex directions. */
.hmv-qhead .hmv-qhead-side {
  display: grid; justify-items: end; justify-self: end;
  width: auto; min-width: 0; text-align: left;
}
.hmv-qhead .hmv-qhead-chip {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  box-sizing: border-box; height: 40px; padding: 0 28px 0 0;
  overflow: hidden; isolation: isolate; white-space: nowrap;
  border: 1px solid rgb(29 90 55 / 14%); border-radius: 999px;
  background: #f6f3e9; color: #233a30; font-size: 11.5px; line-height: 1;
  box-shadow: 0 3px 10px rgb(35 58 48 / 5%);
}
.hmv-qhead .hmv-qhead-chip b {
  display: inline-flex; align-items: center; align-self: stretch; gap: 7px;
  margin: 0; padding: 0 12px; background: #1d5a37; color: #fff;
  font-weight: 700; border-radius: 999px 0 0 999px;
}
.hmv-qhead .hmv-qhead-chip b::before {
  content: ""; box-sizing: border-box; width: 12px; height: 12px;
  flex: 0 0 12px; border: 1px solid rgb(255 255 255 / 85%); border-radius: 50%;
  background: linear-gradient(#fff, #fff) 5px 2px / 1px 4px no-repeat,
    linear-gradient(#fff, #fff) 5px 5px / 3px 1px no-repeat;
}
.hmv-qhead .hmv-qhead-chip::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 85%);
  pointer-events: none;
}
.hmv-qhead .hmv-qhead-chip::after {
  content: ""; position: absolute; right: 12px; top: calc(50% - 3px);
  width: 6px; height: 6px; border-radius: 50%; background: #1d5a37;
  animation: hmv-v2-status 4s ease infinite;
}
/* One 1.6s opacity pulse, then 2.4s at rest. */
@keyframes hmv-v2-status {
  0%, 40%, 100% { opacity: 1; }
  20% { opacity: .35; }
}
.hmv-qhead .hmv-qhead-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box; height: 44px; min-height: 44px; padding: 0 20px;
  border: 1px solid rgb(255 255 255 / 18%); border-radius: 999px;
  background: #1d5a37; color: #fff; font-size: 13px; font-weight: 700;
  line-height: 1; text-decoration: none; white-space: nowrap;
  box-shadow: 0 5px 13px rgb(29 90 55 / 17%);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.hmv-qhead .hmv-qhead-cta svg { flex: 0 0 auto; }
.hmv-cats {
  display: flex; align-items: stretch; gap: 10px;
  box-sizing: border-box; margin: 10px 0 6px; padding: 10px 34px 18px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scroll-padding-inline: 34px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.hmv-cats::-webkit-scrollbar { display: none; }
.hmv-cats .hmv-cat {
  position: relative; box-sizing: border-box; flex: 0 0 104px;
  width: 104px; min-width: 104px; max-width: 104px; padding: 7px 7px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border-radius: 16px; scroll-snap-align: start; transform: none;
  font-family: var(--nb-sans, system-ui, sans-serif);
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}
/* Preserve the theme's glass panel; overlay its locked border without flags. */
.hmv-cats .hmv-cat::after {
  content: ""; position: absolute; inset: -1px; z-index: 1;
  border: 1px solid transparent; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 85%);
  pointer-events: none; transition: border-color 220ms ease;
}
.hmv-cats .hmv-cat-img {
  box-sizing: border-box; position: relative; display: block;
  flex: 0 0 124px; height: 124px; min-height: 124px; max-height: 124px;
  width: 100%; overflow: hidden; isolation: isolate;
}
.hmv-cats .hmv-cat-img::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  box-shadow: inset 0 2px 9px rgb(35 58 48 / 8%); pointer-events: none;
}
/* Hidden and .is-out share a state, even after the slideshow clears .is-out. */
.hmv-cats .hmv-cat .hmv-cat-img img {
  position: absolute; inset: 0; box-sizing: border-box;
  width: 100%; height: 100%; object-fit: contain; padding: 8px;
  opacity: 0; transform: scale(1.06) translateY(4px); filter: blur(4px);
  transition: opacity 1000ms cubic-bezier(.22, 1, .36, 1),
    transform 1200ms cubic-bezier(.22, 1, .36, 1),
    filter 900ms cubic-bezier(.22, 1, .36, 1);
  animation: hmv-v2-breathe 6s ease-out infinite alternate;
  animation-play-state: paused;
}
.hmv-cats .hmv-cat .hmv-cat-img img.is-on {
  opacity: 1; transform: scale(1) translateY(0); filter: blur(0);
  transition-duration: 900ms, 900ms, 900ms; animation-play-state: running;
}
/* Independent scale preserves transform dissolves; pausing prevents exit snaps. */
@keyframes hmv-v2-breathe { from { scale: 1; } to { scale: 1.04; } }
.hmv-cats .hmv-cat-label {
  display: block; min-height: 2.7em; color: #46564b;
  font-size: 11.5px; font-weight: 700; line-height: 1.35; text-align: center;
  transition: color 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .hmv-qhead .hmv-qhead-cta:hover {
    transform: translateY(-1px); background: #164a2d;
    box-shadow: 0 8px 19px rgb(29 90 55 / 25%);
  }
  .hmv-cats .hmv-cat:hover { transform: translateY(-2px); }
  .hmv-cats .hmv-cat:hover::after { border-color: rgb(237 92 43 / 30%); }
  .hmv-cats .hmv-cat:hover .hmv-cat-label { color: #233a30; }
}
.hmv-qhead .hmv-qhead-cta:active { transform: scale(.97); }
.hmv-qhead .hmv-qhead-cta:focus-visible, .hmv-cats .hmv-cat:focus-visible {
  outline: 2px solid #1d5a37; outline-offset: 3px;
}
@media (max-width: 760px) {
  .hmv-qhead { grid-template-columns: minmax(0, 1fr); padding: 28px 20px 20px; }
  .hmv-qhead .hmv-qhead-side {
    grid-template-columns: repeat(2, max-content); justify-self: start;
    justify-items: start; padding-top: 8px;
  }
}
@media (max-width: 560px) {
  .hmv-qhead .hmv-qhead-side { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hmv-qhead *, .hmv-qhead *::before, .hmv-qhead *::after,
  .hmv-qhead .hmv-qhead-cta, .hmv-qhead .hmv-qhead-chip::after,
  .hmv-cats .hmv-cat, .hmv-cats .hmv-cat::after,
  .hmv-cats .hmv-cat-label, .hmv-cats .hmv-cat .hmv-cat-img img {
    animation: none; transition: none; scale: 1;
  }
  .hmv-qhead .hmv-qhead-cta:hover, .hmv-qhead .hmv-qhead-cta:active,
  .hmv-cats .hmv-cat:hover { transform: none; }
  .hmv-cats { scroll-behavior: auto; }
}

/* ---- v2: photographic hero, side-by-side controls, new type ---- */
.hmv-qhead{
 position:relative!important;overflow:hidden!important;
 margin:12px 14px 0!important;padding:30px 24px 26px!important;
 border-radius:24px!important;background:#123524!important;
 box-shadow:0 22px 50px rgb(11 32 24 / 26%)!important;isolation:isolate;
}
.hmv-qhead::after{
 content:"";position:absolute;inset:0;z-index:0;
 background:linear-gradient(105deg,rgb(7 24 18 / 90%) 0%,rgb(8 30 22 / 74%) 52%,rgb(9 34 25 / 46%) 100%);
}
.hmv-qhead-copy,.hmv-qhead-side{position:relative!important;z-index:1!important}
.hmv-qhead .hmv-qhead-eyebrow{color:#bfe0c9!important;letter-spacing:.18em!important}
.hmv-qhead h1{
 color:#fbf7ea!important;font-family:Manrope,system-ui,sans-serif!important;
 font-weight:800!important;font-size:34px!important;line-height:1.05!important;
 letter-spacing:-.035em!important;text-wrap:balance;
}
.hmv-qhead-side{
 display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
 align-items:center!important;gap:10px!important;margin-top:18px!important;
}
.hmv-qhead-chip{
 display:inline-flex!important;align-items:center!important;gap:8px!important;
 height:42px!important;padding:0 14px!important;border-radius:999px!important;
 background:rgb(255 253 247 / 16%)!important;border:1px solid rgb(255 255 255 / 34%)!important;
 color:#f4efdf!important;backdrop-filter:blur(10px);white-space:nowrap!important;
 font-size:12.5px!important;font-weight:700!important;
}
.hmv-qhead-chip b{color:#bfe0c9!important;font-weight:800!important}
.hmv-qhead-cta{
 height:42px!important;padding:0 18px!important;border-radius:999px!important;
 background:linear-gradient(135deg,#ff8a4c,#e5361f)!important;color:#fff!important;
 font-weight:800!important;font-size:13.5px!important;display:inline-flex!important;
 align-items:center!important;gap:7px!important;white-space:nowrap!important;
 box-shadow:0 10px 24px rgb(229 54 31 / 34%)!important;
}
.hmv-qhead-cta:hover{transform:translateY(-1px)}
@media (max-width:430px){
 .hmv-qhead{padding:24px 18px 20px!important}
 .hmv-qhead h1{font-size:29px!important}
 .hmv-qhead-chip{height:40px!important;padding:0 11px!important;font-size:11.5px!important;gap:6px!important}
 .hmv-qhead-cta{height:40px!important;padding:0 13px!important;font-size:12px!important}
}
@media (prefers-reduced-motion:reduce){.hmv-qhead-bg i{animation:none!important}.hmv-qhead-bg i:nth-child(1){opacity:.9}}

@media (max-width:430px){
 .hmv-qhead-side{gap:8px!important}
 .hmv-qhead-chip,.hmv-qhead-cta{
  flex:1 1 0!important;min-width:0!important;justify-content:center!important;
  padding:0 8px!important;font-size:11.5px!important;overflow:hidden!important;
  text-overflow:ellipsis!important;
 }
 .hmv-qhead-chip b{display:none!important}
}

@media (max-width:430px){
 .hmv-qhead-chip{flex:1.18 1 0!important;padding:0 6px!important;font-size:10.5px!important}
 .hmv-qhead-cta{flex:1 1 0!important;font-size:11px!important;padding:0 6px!important}
}

/* bigger tiles, visible photography, chip keeps its label */
.hmv-cat{width:122px!important}
.hmv-cat-img{height:132px!important}
.hmv-cat .hmv-cat-label{font-size:12px!important}
@media (max-width:430px){
 .hmv-cat{width:116px!important}
 .hmv-cat-img{height:126px!important}
 .hmv-qhead-chip b{display:none!important}
 .hmv-qhead-chip{flex:1.25 1 0!important;font-size:11px!important;gap:5px!important}
 .hmv-qhead-cta{flex:0 0 auto!important;font-size:12px!important;padding:0 12px!important}
}

/* canonical hero slideshow */
.hmv-qhead-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hmv-qhead-bg i{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}
.hmv-qhead-bg i:nth-child(1){background-image:url(assets/storefront.webp)!important;animation:hmvQb 32s linear 0s infinite!important}
.hmv-qhead-bg i:nth-child(2){background-image:url(assets/promo/fresh-produce.jpg)!important;animation:hmvQb 32s linear 8s infinite!important}
.hmv-qhead-bg i:nth-child(3){background-image:url(assets/cat/rice-atta-dal.jpg)!important;animation:hmvQb 32s linear 16s infinite!important}
.hmv-qhead-bg i:nth-child(4){background-image:url(assets/hero-poster.jpg)!important;animation:hmvQb 32s linear 24s infinite!important}
@keyframes hmvQb{0%{opacity:.95}22%{opacity:.95}25%{opacity:0}99%{opacity:0}}

.hmv-qhead-bg i{animation-name:hmvQb!important;animation-duration:32s!important;animation-timing-function:linear!important;animation-iteration-count:infinite!important}

/* deterministic slideshow: JS cycles data-hero-frame */
.hmv-qhead-bg i{opacity:0!important;transition:opacity 1.4s ease!important;animation:none!important}
.hmv-qhead[data-hero-frame="0"] .hmv-qhead-bg i:nth-child(1),
.hmv-qhead[data-hero-frame="1"] .hmv-qhead-bg i:nth-child(2),
.hmv-qhead[data-hero-frame="2"] .hmv-qhead-bg i:nth-child(3),
.hmv-qhead[data-hero-frame="3"] .hmv-qhead-bg i:nth-child(4){opacity:.95!important}

/* fallback: one photo always visible (slideshow reverted until it proves itself) */
.hmv-qhead-bg i:nth-child(1){opacity:.95!important;transition:none!important}

@media (max-width:430px){
 .hmv-qhead-chip{flex:1.3 1 0!important;font-size:10.5px!important;padding:0 7px!important}
}

@media (max-width:430px){
 .hmv-qhead-chip{flex:1.45 1 0!important;font-size:10px!important;padding:0 6px!important;gap:4px!important}
}

/* centred hero copy, shop-front photograph, gentler scrim */
.hmv-qhead{text-align:center!important}
.hmv-qhead-copy{max-width:640px!important;margin:0 auto!important}
.hmv-qhead h1{margin:6px 0 0!important}
.hmv-qhead-side{justify-content:center!important}
.hmv-qhead-bg i:nth-child(1){background-image:url(assets/storefront.webp)!important;opacity:.95!important}
.hmv-qhead::after{background:linear-gradient(180deg,rgb(7 24 18 / 82%) 0%,rgb(8 30 22 / 68%) 55%,rgb(9 34 25 / 82%) 100%)!important}
@media (max-width:430px){.hmv-qhead-side{justify-content:center!important}}
.hmv-cats{scroll-behavior:auto!important;scroll-snap-type:none!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important}

.hmv-cats::-webkit-scrollbar{display:none!important}
.hmv-cat{scroll-snap-align:none!important}

/* final hero rules: one shop-front photo, centred copy, naturally sized chip */
.hmv-qhead .hmv-qhead-bg i:not(:first-child){background-image:none!important;opacity:0!important}
.hmv-qhead .hmv-qhead-bg i:first-child{background-image:url(assets/storefront.webp)!important;background-size:cover!important;background-position:center 40%!important;opacity:.95!important}
.hmv-qhead h1,.hmv-qhead .hmv-qhead-copy,.hmv-qhead .hmv-qhead-eyebrow{text-align:center!important}
.hmv-qhead .hmv-qhead-side{justify-content:center!important;gap:8px!important}
@media (max-width:430px){
 .hmv-qhead .hmv-qhead-chip{flex:0 0 auto!important;font-size:11px!important;padding:0 10px!important}
 .hmv-qhead .hmv-qhead-cta{flex:0 0 auto!important}
}

/* ---- simple hero: words only, no card, no photo ---- */
.hmv-qhead{
 background:transparent!important;box-shadow:none!important;border-radius:0!important;
 margin:10px 0 0!important;padding:22px 18px 18px!important;overflow:visible!important;
 isolation:auto!important;
}
.hmv-qhead-bg,.hmv-qhead::after{display:none!important}
.hmv-qhead .hmv-qhead-eyebrow{color:#7b8a7f!important;letter-spacing:.2em!important;font-size:10px!important}
.hmv-qhead h1{
 color:#1d3a2b!important;font-family:Manrope,system-ui,sans-serif!important;
 font-weight:800!important;font-size:30px!important;line-height:1.08!important;
 letter-spacing:-.03em!important;margin:8px 0 0!important;max-width:560px;margin-left:auto!important;margin-right:auto!important;
}
.hmv-qhead .hmv-qhead-side{margin-top:16px!important;justify-content:center!important;gap:8px!important}
.hmv-qhead .hmv-qhead-chip{
 background:#fffdf7!important;border:1px solid #e6dcc6!important;color:#233a30!important;
 backdrop-filter:none!important;box-shadow:0 6px 16px rgb(31 58 43 / 8%)!important;
}
.hmv-qhead .hmv-qhead-chip b{color:#1d5a37!important}
.hmv-qhead .hmv-qhead-cta{box-shadow:0 8px 18px rgb(229 54 31 / 24%)!important}

/* ---- dock magnification on hover ---- */
.hmv-cats{overflow-x:auto!important;overflow-y:hidden!important;padding-top:18px!important;padding-bottom:16px!important}
.hmv-cat{
 transform-origin:bottom center!important;
 transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease!important;
 will-change:transform;
}
.hmv-cats:hover .hmv-cat{transform:scale(.94)!important}
.hmv-cat:hover{
 transform:scale(1.12) translateY(-6px)!important;z-index:5!important;
 box-shadow:0 22px 44px rgb(31 58 43 / 20%)!important;
}
.hmv-cat:hover + .hmv-cat,
.hmv-cat:has(+ .hmv-cat:hover){transform:scale(1.05) translateY(-3px)!important;z-index:4!important}
.hmv-cat:hover + .hmv-cat + .hmv-cat,
.hmv-cat:has(+ .hmv-cat + .hmv-cat:hover){transform:scale(1.01) translateY(-1px)!important}
.hmv-cat .hmv-cat-label{transition:color .2s ease}
.hmv-cat:hover .hmv-cat-label{color:#1d5a37!important}
@media (hover:none){.hmv-cats:hover .hmv-cat,.hmv-cat:hover,.hmv-cat:hover + .hmv-cat{transform:none!important}}
@media (prefers-reduced-motion:reduce){.hmv-cat{transition:none!important}}

/* hover wins over the rail-wide shrink (equal specificity, later rule) */
.hmv-cats:hover .hmv-cat:hover{transform:scale(1.12) translateY(-6px)!important;z-index:6!important;box-shadow:0 22px 44px rgb(31 58 43 / 20%)!important}
.hmv-cats:hover .hmv-cat:hover + .hmv-cat{transform:scale(1.05) translateY(-3px)!important;z-index:5!important}
.hmv-cats:hover .hmv-cat:has(+ .hmv-cat:hover){transform:scale(1.05) translateY(-3px)!important;z-index:5!important}

/* stack and centre the hero at every width */
.hmv-qhead{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important}
.hmv-qhead .hmv-qhead-copy{margin:0 auto!important;text-align:center!important}
.hmv-qhead .hmv-qhead-side{margin:16px auto 0!important;justify-content:center!important}

/* chip: green clock block + cream time block, never overlapping */
.hmv-qhead .hmv-qhead-chip{
 display:inline-flex!important;align-items:center!important;gap:0!important;
 padding:0!important;height:42px!important;flex:0 0 auto!important;
 border-radius:999px!important;overflow:hidden!important;white-space:nowrap!important;
 background:#fffdf7!important;border:1px solid #e6dcc6!important;
 box-shadow:0 6px 16px rgb(31 58 43 / 8%)!important;
}
.hmv-qhead .hmv-qhead-chip b{
 display:inline-flex!important;align-items:center!important;gap:7px!important;
 height:100%!important;padding:0 12px!important;margin:0!important;
 background:#1d5a37!important;color:#f3f7ee!important;font-size:10.5px!important;
 letter-spacing:.04em!important;text-transform:none!important;
 border-radius:999px 0 0 999px!important;
}
.hmv-qhead .hmv-chip-dot{
 width:7px;height:7px;border-radius:50%;background:#bfe0c9;flex:0 0 auto;
 box-shadow:0 0 0 3px rgb(191 224 201 / 22%);
 animation:chipPulse 2.6s ease-in-out infinite;
}
.hmv-qhead .hmv-chip-time{
 display:inline-flex;align-items:center;height:100%;padding:0 14px!important;
 font-weight:800!important;font-size:12px!important;color:#233a30!important;
}
@keyframes chipPulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (max-width:430px){
 .hmv-qhead .hmv-chip-label{display:none!important}
 .hmv-qhead .hmv-qhead-chip b{padding:0 10px!important}
 .hmv-qhead .hmv-chip-time{padding:0 12px!important;font-size:11.5px!important}
}
@media (prefers-reduced-motion:reduce){.hmv-qhead .hmv-chip-dot{animation:none!important}}

/* remove the legacy pseudo dot: the chip now owns a real .hmv-chip-dot */
.hmv-qhead .hmv-qhead-chip::before,.hmv-qhead .hmv-qhead-chip::after{display:none!important;content:none!important}

.hmv-qhead .hmv-qhead-chip b::before,.hmv-qhead .hmv-qhead-chip b::after{display:none!important;content:none!important;background:none!important;border:0!important}
.hmv-qhead .hmv-qhead-chip i::before,.hmv-qhead .hmv-qhead-chip i::after{display:none!important;content:none!important}
