/* ============================================================================
 *  sections.css — per-section layout (shadcn/ui light, professional)
 * ========================================================================== */

/* ---- Header ----------------------------------------------------------
   The header bar colour is fully API-driven:
     • Theme Builder header_color -> --header-bg / --header-fg (theme.js)
     • Website Builder header.*   -> --header-bg-raw (legacy fallback only)
   --header-fg already carries readable text for the chosen bg, so the
   nav, brand, mobile menu and CTA all stay legible on any colour. */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgb(var(--header-bg) / .92);
  color:rgb(var(--header-fg));
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgb(var(--header-border));
}
/* Navbar height — compact and professional. --nav-h is the single knob
   the rest keys off; --logo-h is how much of that height the logo fills. */
.site-header{ --nav-h:4.25rem; --logo-h:2.9rem; }
.site-header__bar{ display:flex; align-items:center; gap:1rem;
  height:var(--nav-h); transition:height .25s ease; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:680;
  font-size:1.18rem; letter-spacing:-.02em; color:rgb(var(--header-fg));
  flex-shrink:0; min-width:0; }
/* Logo-only branding (Theme-Builder header_logo). The logo auto-fits the
   bar: it fills most of the nav height, stays vertically centred, and is
   always contained (never stretched/cropped) at any aspect ratio. Width
   is free so a wide wordmark and a square mark both sit correctly; it is
   capped on small screens so it can't crowd the menu/CTA. */
.brand--logo{ height:var(--logo-h); display:flex; align-items:center;
  overflow:visible; transition:height .25s ease; }
/* SIPO header logos are exported with generous transparent padding, so
   the wordmark looks small inside its own canvas. A modest scale-up of
   the *contained* image makes the visible mark fill the bar properly
   without ever distorting it (contain keeps the aspect ratio). */
.brand--logo img{ height:100%; width:auto; object-fit:contain;
  object-position:left center; display:block;
  transform:scale(1.28); transform-origin:left center;
  max-width:min(58vw,260px); }
.brand__name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:1.18rem; }
.brand__mark{ width:2.3rem; height:2.3rem; border-radius:8px; flex-shrink:0;
  background:rgb(var(--primary)); color:rgb(var(--primary-foreground));
  display:grid; place-content:center; font-weight:700; }
/* On phones the bar is a touch shorter; the logo still auto-fits it. */
@media(max-width:767px){
  .site-header{ --nav-h:3.85rem; --logo-h:2.5rem; }
  .brand--logo img{ max-width:48vw; }
}
/* Header condenses slightly on scroll — bar + logo shrink together. */
.site-header.scrolled{ --nav-h:3.85rem; --logo-h:2.6rem; }
@media(max-width:767px){ .site-header.scrolled{ --nav-h:3.5rem; --logo-h:2.25rem; } }
.nav{ display:none; margin-left:auto; align-items:center; gap:.35rem; }
.nav a{ padding:.5rem .8rem; border-radius:8px; font-size:.92rem;
  color:rgb(var(--header-fg) / .72); transition:.15s; }
.nav a:hover{ color:rgb(var(--header-fg));
  background:rgb(var(--header-fg) / .1); }
.site-header__cta{ margin-left:auto; display:flex; gap:.5rem; align-items:center; }
.nav-toggle{ display:inline-grid; place-content:center; width:2.5rem; height:2.5rem;
  border-radius:8px; color:rgb(var(--header-fg));
  border:1px solid rgb(var(--header-fg) / .25); }
@media(min-width:900px){
  .nav{ display:flex; } .site-header__cta{ margin-left:0; } .nav-toggle{ display:none; }
}
.mobile-nav{ display:none; flex-direction:column; padding:.5rem 0 1rem;
  border-top:1px solid rgb(var(--header-fg) / .14); }
.mobile-nav.open{ display:flex; }
.mobile-nav a{ padding:.8rem .25rem; font-weight:500;
  color:rgb(var(--header-fg));
  border-bottom:1px solid rgb(var(--header-fg) / .12); }
.site-header.scrolled{
  background:rgb(var(--header-bg) / .96);
  box-shadow:0 1px 0 rgb(var(--header-fg) / .1),
             0 10px 30px -18px rgb(0 0 0 / .35);
}

/* ---- Legacy Website-Builder header colour (only when no Theme Builder)
   sections.js emits --header-bg-raw / --header-fg-raw as inline values
   when d.header is set but shop_themes is not. Honour them verbatim. */
.site-header[data-themed-header]{
  background:var(--header-bg-raw);
  color:var(--header-fg-raw, #fff);
  --header-fg-c:var(--header-fg-raw, #fff);
  border-bottom-color:rgb(255 255 255 / .14);
}
.site-header[data-themed-header] .brand,
.site-header[data-themed-header] .mobile-nav a,
.site-header[data-themed-header] .nav-toggle{ color:var(--header-fg-c); }
.site-header[data-themed-header] .nav a{
  color:color-mix(in srgb, var(--header-fg-c) 78%, transparent); }
.site-header[data-themed-header] .nav a:hover{
  color:var(--header-fg-c); background:rgb(255 255 255 / .14); }
.site-header[data-themed-header].scrolled{
  background:color-mix(in srgb, var(--header-bg-raw) 92%, transparent); }

/* ---- Alert modal (popup on load) ------------------------------------ */
.alert-modal-backdrop{
  position:fixed; inset:0; z-index:900;
  background:rgb(0 0 0 / .55);
  display:grid; place-items:center; padding:1rem;
  animation:alertFadeIn .25s ease forwards;
}
.alert-modal-backdrop.alert-modal--out{
  animation:alertFadeOut .28s ease forwards;
  pointer-events:none;
}
@keyframes alertFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes alertFadeOut{
  from{ opacity:1; }
  to{ opacity:0; }
}
.alert-modal{
  background:rgb(var(--card));
  border:1px solid rgb(var(--border));
  border-radius:16px;
  box-shadow:0 20px 60px rgb(0 0 0 / .22), 0 4px 16px rgb(0 0 0 / .12);
  max-width:420px; width:100%;
  overflow:hidden;
  display:flex; flex-direction:column;
  animation:alertSlideUp .3s cubic-bezier(.22,.68,0,1.2) forwards;
}
.alert-modal-backdrop.alert-modal--out .alert-modal{
  animation:alertSlideDown .25s ease forwards;
}
@keyframes alertSlideUp{
  from{ transform:translateY(28px) scale(.97); opacity:0; }
  to{ transform:translateY(0) scale(1); opacity:1; }
}
@keyframes alertSlideDown{
  from{ transform:translateY(0) scale(1); opacity:1; }
  to{ transform:translateY(20px) scale(.97); opacity:0; }
}
.alert-modal__close{
  position:absolute; top:.85rem; right:.85rem;
  width:2.1rem; height:2.1rem; border-radius:50%;
  background:rgb(var(--muted)); border:1px solid rgb(var(--border));
  display:grid; place-content:center;
  color:rgb(var(--muted-foreground));
  cursor:pointer; transition:.15s; z-index:1;
}
.alert-modal__close:hover{
  background:rgb(var(--border));
  color:rgb(var(--foreground));
}
/* The close button is absolutely positioned — give the modal a relative context */
.alert-modal{ position:relative; }
.alert-modal__img-wrap{
  width:100%; max-height:220px; overflow:hidden;
  background:rgb(var(--muted));
}
.alert-modal__img-wrap img{
  width:100%; height:220px; object-fit:cover; object-position:center; display:block;
}
.alert-modal__body{
  display:flex; align-items:flex-start; gap:.85rem;
  padding:1.5rem 1.5rem .25rem;
}
/* When there's no image, reserve room on the right so the close button
   never overlaps the message text. */
.alert-modal:not(:has(.alert-modal__img-wrap)) .alert-modal__body{
  padding-right:3.25rem;
}
.alert-modal__icon{
  flex-shrink:0; width:2rem; height:2rem; border-radius:50%;
  background:rgb(var(--primary) / .12);
  display:grid; place-content:center;
  color:rgb(var(--primary));
}
.alert-modal__icon svg{ width:1.1rem; height:1.1rem; }
.alert-modal__msg{
  flex:1; font-size:.97rem; line-height:1.55;
  color:rgb(var(--foreground)); margin:0;
  /* A bit of top space so text aligns nicely with icon center */
  padding-top:.1rem;
}
.alert-modal__cta{
  margin:1.25rem 1.5rem 1.5rem;
  align-self:stretch;
  justify-content:center;
}

/* ---- Hero / Banner / Mobile slider ----------------------------------
   ONE design across desktop & mobile. Cinematic media, layered scrims,
   glass chips, animated dots + slide counter. */
.hero{ position:relative; isolation:isolate; }
.hero__slides{ position:relative; overflow:hidden; }
.hero__slide{ position:relative;
  min-height:clamp(480px, 72vh, 860px);
  display:grid; align-items:center; }
.hero__slide:not(:first-child){ display:none; }
.hero__bg{ position:absolute; inset:0; object-fit:cover; width:100%; height:100%;
  object-position:center top; z-index:-2; }
.hero__scrim{ position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 18% 50%, rgb(0 0 0 / .62), transparent 60%),
    linear-gradient(180deg, rgb(0 0 0 / .30) 0%, rgb(0 0 0 / .34) 45%,
                            rgb(0 0 0 / .74) 100%); }
.hero--plain{ background:
  radial-gradient(125% 125% at 12% 0%,
    rgb(var(--primary) / .22), transparent 55%),
  radial-gradient(120% 120% at 95% 100%,
    rgb(var(--accent)), transparent 60%),
  linear-gradient(180deg, rgb(var(--accent)), rgb(var(--background))); }
.hero--plain::after{ content:""; position:absolute; inset:0; z-index:-1;
  opacity:.5; background-size:26px 26px;
  background-image:
    linear-gradient(rgb(var(--foreground) / .035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--foreground) / .035) 1px, transparent 1px);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent);
  mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent); }
.hero--plain .hero__scrim{ display:none; }
.hero__inner{ position:relative; max-width:780px; }
.hero--media .hero__inner{ color:#fff; }
.hero--media .hero__inner h1,
.hero--media .hero__inner .hero__sub{ color:#fff; }
.hero__eyebrow{ display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:650;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.1rem;
  padding:.4rem .9rem; border-radius:999px;
  background:rgb(var(--accent)); color:rgb(var(--primary));
  border:1px solid rgb(var(--primary) / .14); }
.hero__eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:rgb(var(--primary)); box-shadow:0 0 0 4px rgb(var(--primary) / .18); }
.hero--media .hero__eyebrow{ background:rgb(255 255 255 / .14); color:#fff;
  border-color:rgb(255 255 255 / .25); -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px); }
.hero--media .hero__eyebrow::before{ background:#fff;
  box-shadow:0 0 0 4px rgb(255 255 255 / .25); }
.hero__sub{ margin-top:1.1rem; font-size:clamp(1.02rem,1.6vw,1.22rem);
  color:rgb(var(--muted-foreground)); max-width:52ch; line-height:1.6; }
.hero__actions{ margin-top:2.1rem; display:flex; flex-wrap:wrap; gap:.8rem; }
.hero__meta{ margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:.6rem .7rem;
  font-size:.88rem; color:rgb(var(--muted-foreground)); align-items:center; }
.hero__chip, .hero__meta .open-pill, .hero__meta > span{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .8rem; border-radius:999px; font-weight:560;
  background:rgb(var(--card)); border:1px solid rgb(var(--border)); }
.hero--media .hero__meta{ color:#fff; }
.hero--media .hero__chip, .hero--media .hero__meta .open-pill,
.hero--media .hero__meta > span{
  background:rgb(255 255 255 / .12); border-color:rgb(255 255 255 / .2);
  color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
/* Glass secondary CTA — premium on photographic heroes.
   Solid enough to stay clearly legible over busy photography. */
.btn--glass{ background:rgb(255 255 255 / .22); color:#fff; font-weight:600;
  border:1.5px solid rgb(255 255 255 / .55);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 4px 16px -6px rgb(0 0 0 / .45); }
.btn--glass:hover{ background:rgb(255 255 255 / .32);
  border-color:rgb(255 255 255 / .8); transform:translateY(-1px); }
.hero--plain .btn--glass{ background:rgb(var(--card));
  color:rgb(var(--foreground)); border-color:rgb(var(--border));
  box-shadow:var(--shadow-sm); }
.hero--plain .btn--glass:hover{ background:rgb(var(--muted)); }
/* Slide counter — top-right, premium editorial touch */
.hero__count{ position:absolute; top:1.4rem; right:clamp(1rem,4vw,2.4rem);
  z-index:2; font-size:.82rem; font-weight:600; letter-spacing:.04em;
  color:rgb(255 255 255 / .8); padding:.35rem .7rem; border-radius:999px;
  background:rgb(0 0 0 / .28); border:1px solid rgb(255 255 255 / .18);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.hero__count span{ color:#fff; font-weight:700; }
.hero--plain ~ .hero__count, .hero:has(.hero--plain) .hero__count{ display:none; }
.hero__dots{ position:absolute; left:0; right:0; bottom:1.4rem; display:flex;
  gap:.45rem; justify-content:center; z-index:2; pointer-events:auto; }
/* If the hero has both dots AND the scroll-down chip they would collide in
   the centre — lift the dots above the chip. */
.hero:has(.hero__scroll) .hero__dots{ bottom:4.6rem; }
.hero__dots button{ width:9px; height:9px; border-radius:999px;
  background:rgb(255 255 255 / .4); transition:width .35s, background .35s;
  box-shadow:0 1px 4px rgb(0 0 0 / .35); }
.hero--media .hero__dots button{ background:rgb(255 255 255 / .45); }
.hero__dots button:hover{ background:rgb(255 255 255 / .75); }
.hero__dots button[aria-current="true"]{ width:26px; background:#fff; }
.hero__scroll{
  position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%);
  z-index:2; width:2.55rem; height:2.55rem; border-radius:50%;
  display:grid; place-content:center;
  background:rgb(255 255 255 / .12); color:#fff;
  border:1px solid rgb(255 255 255 / .2);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:heroBounce 2s infinite; transition:background .2s;
}
.hero__scroll:hover{
  background:rgb(255 255 255 / .24); color:#fff;
}
.hero--plain .hero__scroll{
  background:rgb(var(--card)); color:rgb(var(--primary));
  border-color:rgb(var(--border));
  box-shadow:var(--shadow-sm);
}
.hero--plain .hero__scroll:hover{
  background:rgb(var(--muted));
}
.hero__scroll svg{ width:1.15rem; height:1.15rem; }
@keyframes heroBounce{
  0%, 100%{ transform:translate(-50%, 0); }
  50%{ transform:translate(-50%, 6px); }
}
@media(max-width:767px){
  .hero__slide{ min-height:clamp(440px,72svh,640px); }
  .hero__count{ top:1rem; right:1rem; }
  .hero__scroll{ display:none; } }

/* ---- Highlights slider (mobile_slider[] as its own section) ---------
   A premium promotional carousel: one large image card at a time with
   an overlaid caption, swipeable, with dots. Re-uses the hero carousel
   JS (slides carry .hero__slide; dots carry .hero__dots). */
.promo{ position:relative; }
.promo__track{ position:relative; border-radius:calc(var(--radius) + .35rem);
  overflow:hidden; box-shadow:var(--shadow-lg);
  border:1px solid rgb(var(--border)); background:rgb(var(--muted)); }
/* Highlights slide — image flows naturally (no crop). The slide is a
   normal block; the image sets its own height via its natural aspect
   ratio capped to a sensible max. Caption sits BELOW the image so it
   never covers it. */
.promo__slide{ position:relative; display:flex; flex-direction:column;
  background:rgb(var(--muted)); }
.promo__slide:not(:first-child){ display:none; }
.promo__img{ display:block; width:100%; height:auto;
  max-height:clamp(280px, 56vw, 560px);
  object-fit:contain; object-position:center; background:rgb(0 0 0 / .03); }
.promo__noimg{ aspect-ratio:16/9; display:grid; place-content:center;
  font-size:clamp(3rem,10vw,6rem); font-weight:760;
  color:rgb(var(--primary) / .25);
  background:radial-gradient(120% 120% at 30% 20%,
    rgb(var(--primary) / .12), rgb(var(--accent))); }
/* Caption sits in normal flow under the image — never covers it. */
.promo__cap{ padding:clamp(1rem,2.4vw,1.5rem) clamp(1.1rem,3vw,1.75rem);
  background:rgb(var(--card)); color:rgb(var(--foreground));
  border-top:1px solid rgb(var(--border)); }
.promo__cap h3{ color:rgb(var(--foreground)); font-size:clamp(1.15rem,2.6vw,1.7rem);
  letter-spacing:-.02em; line-height:1.2; }
.promo__cap p{ color:rgb(var(--muted-foreground)); margin-top:.4rem;
  font-size:clamp(.88rem,1.6vw,1rem); line-height:1.5; }
.promo__dots{ position:absolute; left:0; right:0; bottom:1rem; }
@media(max-width:520px){
  .promo__cap{ margin:.85rem; max-width:none; }
}

.open-pill{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; }
.open-pill::before{ content:""; width:8px; height:8px; border-radius:50%;
  background:#16a34a; box-shadow:0 0 0 3px rgb(22 163 74 / .2);
  animation: openPulse 2s infinite; }
.open-pill[data-open="false"]::before{ background:#dc2626; box-shadow:0 0 0 3px rgb(220 38 38 / .2); animation: none; }
@keyframes openPulse {
  0% { box-shadow: 0 0 0 0 rgb(22 163 74 / 0.6); }
  70% { box-shadow: 0 0 0 6px rgb(22 163 74 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(22 163 74 / 0); }
}

/* ---- Menu & Special products ----------------------------------------
   Category pills: single-line scroller flanked by fade edges + arrow
   controls. Premium active state with a clear count badge. */
.menu-toolbar{ display:flex; flex-direction:column; gap:1rem;
  margin-bottom:1.75rem; }
.search{ position:relative; width:100%; max-width:420px; margin-inline:auto; }
/* font-size MUST be >= 16px: iOS Safari auto-zooms the page when a field
   smaller than that gets focus — that is the mobile "zoom in" glitch. */
.search input{ width:100%; height:2.85rem; padding:0 1rem 0 2.6rem;
  border:1px solid rgb(var(--input)); border-radius:999px;
  background:rgb(var(--card)); color:rgb(var(--foreground)); font-size:1rem;
  box-shadow:var(--shadow-sm); transition:border-color .18s, box-shadow .18s; }
.search input::placeholder{ color:rgb(var(--muted-foreground)); }
.search svg{ position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  color:rgb(var(--muted-foreground)); }

/* scroller shell — relative for the arrow buttons + edge fades */
.cat-nav{ position:relative; display:flex; align-items:center; }
.cat-nav__arrow{ position:absolute; z-index:3; top:50%;
  transform:translateY(-50%); width:2.35rem; height:2.35rem;
  display:grid; place-content:center; border-radius:50%;
  background:rgb(var(--card)); color:rgb(var(--foreground));
  border:1px solid rgb(var(--border)); box-shadow:var(--shadow);
  transition:background .15s, transform .15s, opacity .2s; }
.cat-nav__arrow:hover{ background:rgb(var(--primary));
  color:rgb(var(--primary-foreground)); border-color:transparent; }
.cat-nav__arrow:active{ transform:translateY(-50%) scale(.92); }
.cat-nav__arrow[hidden]{ display:none; }
.cat-nav__arrow--l{ left:-.4rem; }
.cat-nav__arrow--r{ right:-.4rem; }
.cat-tabs{ display:flex; gap:.55rem; overflow-x:auto; padding:.35rem .25rem .55rem;
  scrollbar-width:none; scroll-behavior:smooth; flex:1;
  -webkit-overflow-scrolling:touch; }
.cat-tabs::-webkit-scrollbar{ display:none; }
/* soft fade so cut-off pills feel intentional, not clipped */
.cat-nav::before, .cat-nav::after{ content:""; position:absolute; top:0;
  bottom:0; width:3rem; z-index:2; pointer-events:none; opacity:0;
  transition:opacity .25s; }
.cat-nav::before{ left:0;
  background:linear-gradient(90deg, rgb(var(--background)) 30%, transparent); }
.cat-nav::after{ right:0;
  background:linear-gradient(270deg, rgb(var(--background)) 30%, transparent); }
.cat-nav[data-at-start="false"]::before{ opacity:1; }
.cat-nav[data-at-end="false"]::after{ opacity:1; }
.section--tint .cat-nav::before{
  background:linear-gradient(90deg, rgb(var(--muted)) 30%, transparent); }
.section--tint .cat-nav::after{
  background:linear-gradient(270deg, rgb(var(--muted)) 30%, transparent); }

/* premium category chip — never wraps, never clipped */
.cat-tabs .chip{
  flex:0 0 auto; white-space:nowrap; height:auto; min-height:2.6rem;
  gap:.5rem; padding:.5rem .55rem .5rem 1.05rem; font-weight:600;
  font-size:.9rem; letter-spacing:-.005em; line-height:1.15;
  border:1px solid rgb(var(--border)); background:rgb(var(--card));
  color:rgb(var(--muted-foreground)); box-shadow:var(--shadow-sm);
  transition:background .18s, color .18s, border-color .18s,
             box-shadow .18s, transform .12s; }
.cat-tabs .chip > span{ display:inline-block; }
.cat-tabs .chip .chip__n{ display:inline-grid; place-content:center;
  min-width:1.5rem; height:1.5rem; padding:0 .4rem; border-radius:999px;
  font-size:.74rem; font-weight:700; line-height:1;
  background:rgb(var(--muted)); color:rgb(var(--muted-foreground));
  border:1px solid rgb(var(--border)); transition:inherit; }
.cat-tabs .chip:hover{ color:rgb(var(--foreground));
  border-color:rgb(var(--primary) / .4); transform:translateY(-1px);
  box-shadow:var(--shadow); }
.cat-tabs .chip[aria-selected="true"]{
  background:linear-gradient(180deg, rgb(var(--primary)),
    rgb(var(--primary-hover)));
  color:rgb(var(--primary-foreground)); border-color:transparent;
  box-shadow:0 6px 16px -6px rgb(var(--primary) / .55);
  transform:translateY(-1px); }
.cat-tabs .chip[aria-selected="true"] .chip__n{
  background:rgb(255 255 255 / .22); color:rgb(var(--primary-foreground));
  border-color:transparent; }
.cat-tabs .chip:focus-visible{ outline:2px solid rgb(var(--ring));
  outline-offset:2px; }
@media(max-width:520px){
  .cat-tabs .chip{ font-size:.86rem; min-height:2.45rem;
    padding-left:.95rem; }
  .cat-nav__arrow{ display:none; } }
.menu-cat{ margin-top:2.5rem; }
.menu-cat__title{ display:flex; align-items:baseline; gap:.75rem;
  padding-bottom:.6rem; border-bottom:1px solid rgb(var(--border)); margin-bottom:1.25rem; }
.menu-cat__title small{ color:rgb(var(--muted-foreground)); font-weight:500; font-size:.85rem; }

.item{ display:flex; gap:1rem; padding:1rem; }
.item__img{ width:84px; height:84px; border-radius:calc(var(--radius) - .2rem);
  object-fit:cover; object-position:center 30%;
  background:rgb(var(--muted)); flex-shrink:0; display:block; }
.item__noimg{ width:84px; height:84px; border-radius:calc(var(--radius) - .2rem);
  background:rgb(var(--accent)); display:grid; place-content:center; flex-shrink:0;
  color:rgb(var(--primary)); font-weight:700; font-size:1.4rem; }
.item__body{ flex:1; min-width:0; }
.item__top{ display:flex; gap:1rem; justify-content:space-between; align-items:baseline; }
.item__name{ font-weight:600; font-size:1rem; }
.item__price{ font-weight:680; white-space:nowrap; color:rgb(var(--primary)); }
.item__desc{ color:rgb(var(--muted-foreground)); font-size:.9rem; margin-top:.25rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.item__mods{ margin-top:.5rem; font-size:.82rem; color:rgb(var(--muted-foreground)); }
.item__mods b{ color:rgb(var(--foreground)); font-weight:600; }

/* image-forward card variant (rich tenants) */
.pcard{ overflow:hidden; display:flex; flex-direction:column; }
.pcard__img{ aspect-ratio:4/3; object-fit:cover; object-position:center 30%;
  width:100%; background:rgb(var(--muted)); display:block; }
.pcard__noimg{ aspect-ratio:4/3; background:rgb(var(--accent)); display:grid;
  place-content:center; color:rgb(var(--primary)); font-weight:700; font-size:2rem; }
.pcard__body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.pcard__name{ font-weight:650; }
.pcard__desc{ color:rgb(var(--muted-foreground)); font-size:.88rem; flex:1; }
.pcard__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; }
.pcard__price{ font-weight:700; color:rgb(var(--primary)); font-size:1.05rem; }
.empty{ text-align:center; color:rgb(var(--muted-foreground)); padding:3rem 1rem; }

/* ---- Gallery + lightbox --------------------------------------------- */
.gallery-grid{ display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
.gallery-grid figure{ position:relative; overflow:hidden;
  border-radius:var(--radius); border:1px solid rgb(var(--border)); cursor:zoom-in; }
.gallery-grid img{ aspect-ratio:1; object-fit:cover; object-position:center 30%;
  width:100%; transition:transform .4s; }
.gallery-grid figure:hover img{ transform:scale(1.06); }
.gallery-grid figcaption{ position:absolute; inset:auto 0 0 0; padding:.6rem .8rem;
  font-size:.82rem; color:#fff; background:linear-gradient(transparent,rgb(0 0 0 /.6)); }
.lightbox{ position:fixed; inset:0; background:rgb(0 0 0 /.9); display:grid;
  place-content:center; z-index:120; padding:1.5rem; }
.lightbox img{ max-width:92vw; max-height:86vh; border-radius:8px; }
.lightbox button{ position:absolute; top:1.2rem; right:1.4rem; color:#fff;
  font-size:1.6rem; width:2.5rem; height:2.5rem; border-radius:50%;
  background:rgb(255 255 255 /.12); }

/* ---- About / Quotes / Testimonials / Info / Recognition ------------- */
.about{ display:grid; gap:2.5rem; align-items:center; }
@media(min-width:900px){ .about{ grid-template-columns:1.05fr .95fr; } }
/* The About image can be a photo OR a logo/portrait of any aspect ratio.
   A fixed cover-crop frame mangles logos, so we use a comfortable padded
   panel: the image is centred and contained, never stretched or clipped. */
.about__media{ display:flex; align-items:center; justify-content:center;
  background:rgb(var(--muted)); border:1px solid rgb(var(--border));
  border-radius:calc(var(--radius) + .2rem); overflow:hidden;
  aspect-ratio:4/3; padding:clamp(.75rem,2vw,1.5rem); }
.about__media img{ width:100%; height:100%; object-fit:contain;
  border-radius:calc(var(--radius) - .1rem); }
.about__text p{ color:rgb(var(--muted-foreground)); margin-top:1rem; }

.quote{ text-align:center; max-width:760px; margin-inline:auto; }
.quote p{ font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:560;
  letter-spacing:-.02em; line-height:1.35; }
.quote footer{ margin-top:1rem; color:rgb(var(--muted-foreground)); font-size:.95rem; }

.tcard{ padding:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.tcard p{ color:rgb(var(--muted-foreground)); }
.stars{ color:#f59e0b; letter-spacing:2px; }
.notes{ display:grid; gap:.75rem; }
.note{ display:flex; gap:.75rem; padding:1rem 1.1rem; align-items:flex-start; }
.note::before{ content:"i"; flex-shrink:0; width:1.5rem; height:1.5rem;
  border-radius:50%; background:rgb(var(--accent)); color:rgb(var(--primary));
  display:grid; place-content:center; font-weight:700; font-style:italic; font-size:.85rem; }

/* ---- Hours (tabbed: Opening / Delivery / Pickup) -------------------- */
.hours-card{ max-width:600px; margin-inline:auto; padding:1.5rem; }
.hours-tabs{ display:flex; gap:.5rem; padding:.4rem; margin-bottom:1.25rem;
  background:rgb(var(--muted)); border:1px solid rgb(var(--border));
  border-radius:999px; overflow-x:auto; scrollbar-width:none; }
.hours-tabs::-webkit-scrollbar{ display:none; }
.hours-tab{ flex:1 1 auto; display:flex; align-items:center; gap:.5rem;
  justify-content:center; white-space:nowrap; padding:.65rem 1.1rem;
  border-radius:999px; font-weight:600; font-size:.92rem;
  color:rgb(var(--muted-foreground));
  transition:background .2s, color .2s, box-shadow .2s; }
.hours-tab__ic{ width:1.15rem; height:1.15rem; flex-shrink:0; }
.hours-tab__ic svg{ width:100%; height:100%; }
.hours-tab small{ color:rgb(var(--muted-foreground)); font-weight:500;
  font-size:.78rem; }
.hours-tab:hover{ color:rgb(var(--foreground)); }
.hours-tab[aria-selected="true"]{ background:rgb(var(--card));
  color:rgb(var(--primary)); box-shadow:var(--shadow-sm);
  border:1px solid rgb(var(--border)); }
.hours-tab[aria-selected="true"] small{ color:rgb(var(--primary) / .7); }
.hours-row{ display:flex; justify-content:space-between; padding:.7rem .25rem;
  border-bottom:1px solid rgb(var(--border) / .7); font-size:.95rem; }
.hours-row:last-child{ border-bottom:0; }
.hours-row[data-today="true"]{ font-weight:680; }
.hours-row[data-today="true"] .hours-row__d::after{ content:" • Today";
  color:rgb(var(--primary)); font-weight:600; }
.hours-row__c{ color:rgb(var(--muted-foreground)); font-variant-numeric:tabular-nums; }
.hours-row[data-closed="true"] .hours-row__c{ color:#dc2626; }
.hours-tz{ margin-top:1rem; padding-top:.9rem;
  border-top:1px solid rgb(var(--border) / .6); text-align:center;
  font-size:.8rem; color:rgb(var(--muted-foreground)); }

/* ---- Contact / Footer ----------------------------------------------- */
.contact{ display:grid; gap:2rem; }
@media(min-width:900px){ .contact{ grid-template-columns:1fr 1fr; } }
.contact__list{ display:grid; gap:1rem; }
.contact__row{ display:flex; gap:.85rem; align-items:flex-start; }
.contact__row .ic{ flex-shrink:0; width:2.4rem; height:2.4rem; border-radius:10px;
  background:rgb(var(--accent)); color:rgb(var(--primary)); display:grid;
  place-content:center; }
.contact__row small{ color:rgb(var(--muted-foreground)); display:block; }
.map-wrap{ position:relative; }
.map{ width:100%; min-height:320px; height:100%; border:1px solid rgb(var(--border));
  border-radius:var(--radius); display:block; }
.map-open{ position:absolute; right:.75rem; bottom:.75rem;
  background:rgb(var(--card)); border:1px solid rgb(var(--border));
  padding:.45rem .75rem; border-radius:999px; font-size:.8rem; font-weight:600;
  box-shadow:var(--shadow-sm); }
.map-open:hover{ background:rgb(var(--muted)); }
.map-cta{ display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.25rem 1.5rem; border:1px dashed rgb(var(--border));
  border-radius:var(--radius); background:rgb(var(--accent));
  font-weight:600; min-height:120px; }
.map-cta:hover{ border-style:solid; border-color:rgb(var(--primary)); }
.map-cta b{ color:rgb(var(--primary)); font-size:1.2rem; }

.site-footer{ border-top:1px solid rgb(var(--border)); background:rgb(var(--muted)); }
.footer-grid{ display:grid; gap:2rem; padding-block:3.5rem;
  grid-template-columns:1fr; }
@media(min-width:768px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr; } }
.footer-brand{ font-weight:680; font-size:1.15rem; margin-bottom:.6rem; }
.footer-grid p, .footer-grid a{ color:rgb(var(--muted-foreground)); font-size:.92rem; }
.footer-grid a:hover{ color:rgb(var(--foreground)); }
.footer-col h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:.9rem; }
.footer-col a{ display:block; padding:.3rem 0; }
.footer-bottom{ border-top:1px solid rgb(var(--border)); padding-block:1.4rem;
  display:flex; flex-direction:column; align-items:flex-start; gap:.55rem 1.5rem;
  font-size:.85rem; color:rgb(var(--muted-foreground)); }
@media(min-width:640px){
  .footer-bottom{ flex-direction:row; align-items:center; justify-content:space-between; }
}
/* Footer partner credits — SIPO + DDinfoways logos, each a link out.
   The logo height is fixed; width auto so each wordmark keeps its ratio.
   If a logo file is missing the JS onerror swaps in styled text. */
.footer-credits{ display:flex; flex-wrap:wrap; align-items:center;
  gap:.5rem 1.5rem; }
.footer-credits .credit{ display:inline-flex; align-items:center; gap:.5rem;
  color:rgb(var(--muted-foreground)); font-size:.82rem; transition:opacity .18s; }
.footer-credits .credit:hover{ opacity:.7; }
.footer-credits .credit b{ color:rgb(var(--foreground)); font-weight:700; }
.credit__label{ white-space:nowrap; }
.credit__logo{ height:1.5rem; width:auto; display:block;
  /* footers sit on a muted surface — keep logos crisp regardless */
  object-fit:contain; }
.credit__logo--dd{ height:1.05rem; }   /* wide wordmark — slightly shorter */
@media(max-width:520px){
  .footer-credits{ gap:.5rem 1rem; }
  .credit__logo{ height:1.3rem; }
  .credit__logo--dd{ height:.95rem; }
}
.footer-logo{ height:2.6rem; width:auto; margin-bottom:.9rem;
  border-radius:6px; }
.footer-socials{ display:flex; gap:.6rem; margin-top:1.25rem; }
.footer-socials .soc{ width:2.4rem; height:2.4rem; border-radius:50%;
  display:grid; place-content:center; border:1px solid rgb(var(--border));
  color:rgb(var(--muted-foreground)); background:rgb(var(--card));
  transition:.18s; }
.footer-socials .soc svg{ width:1.05rem; height:1.05rem; }
.footer-socials .soc:hover{ background:rgb(var(--primary));
  color:rgb(var(--primary-foreground)); border-color:transparent;
  transform:translateY(-2px); }

/* About: single-column treatment when there is no image */
.about--solo{ display:block; max-width:760px; text-align:center; }
.about--solo .about__text{ margin-inline:auto; }
.about--solo .btn{ margin-inline:auto; }

/* ============================================================================
 *  PREMIUM SECTIONS (all content derived from SIPO data — no hardcoding)
 * ========================================================================== */

/* ---- Service options bar (under hero) ------------------------------- */
.svc-band{ border-bottom:1px solid rgb(var(--border));
  background:rgb(var(--card)); }
.svc-row{ display:flex; flex-wrap:wrap; gap:.5rem 2.25rem;
  justify-content:center; padding:1.05rem 0; }
.svc{ display:flex; align-items:center; gap:.65rem; }
.svc__ic{ width:2.1rem; height:2.1rem; flex-shrink:0; display:grid;
  place-content:center; border-radius:9px; background:rgb(var(--accent));
  color:rgb(var(--primary)); }
.svc__ic svg{ width:1.15rem; height:1.15rem; }
.svc__txt{ display:flex; flex-direction:column; line-height:1.2; }
.svc__txt b{ font-weight:620; font-size:.94rem; }
.svc__txt small{ color:rgb(var(--muted-foreground)); font-size:.78rem; }

/* ---- Stats band ----------------------------------------------------- */
.stats-band{ background:rgb(var(--accent)); }
.stats-row{ display:grid; gap:1rem;
  grid-template-columns:repeat(2,1fr); padding-block:2.75rem; }
@media(min-width:768px){ .stats-row{ grid-template-columns:repeat(4,1fr); } }
.stat{ text-align:center; }
.stat__v{ font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:740;
  letter-spacing:-.03em; color:rgb(var(--foreground)); }
.stat__l{ margin-top:.3rem; font-size:.85rem; color:rgb(var(--muted-foreground)); }

/* ---- Why-us cards --------------------------------------------------- */
.why-card{ padding:1.6rem 1.4rem; display:flex; flex-direction:column;
  align-items:flex-start; gap:.6rem; }
.why-card__ic{ width:2.8rem; height:2.8rem; border-radius:12px;
  background:rgb(var(--accent)); color:rgb(var(--primary)); display:grid;
  place-content:center; margin-bottom:.3rem; }
.why-card__ic svg{ width:1.4rem; height:1.4rem; }
.why-card h3{ font-size:1.05rem; font-weight:650; }
.why-card p{ color:rgb(var(--muted-foreground)); font-size:.92rem; }

/* ---- Order CTA band ------------------------------------------------- */
.cta-band{ background:rgb(var(--primary)); color:rgb(var(--primary-foreground)); }
.cta-band__in{ display:flex; flex-wrap:wrap; gap:1.25rem 2rem;
  align-items:center; justify-content:space-between; padding-block:3rem; }
/* First child (the headline/sub copy block) takes the available space so the
   button sits flush right at all viewport widths, then wraps below cleanly
   when the headline grows or the screen narrows. */
.cta-band__in > div:first-child{ flex:1 1 320px; min-width:0; }
.cta-band h2{ font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.02em; }
.cta-band p{ opacity:.82; margin-top:.35rem; }
.cta-band .btn--primary{ background:rgb(var(--primary-foreground));
  color:rgb(var(--primary)); }
.cta-band .btn--primary:hover{ background:rgb(var(--primary-foreground) / .9); }

/* ---- Sticky mobile order bar ---------------------------------------
   Visible ONLY on mobile (≤ 767px). On larger screens the persistent
   header CTA is the order action; a second sticky bar would just cover
   the bottom of the page. */
.sticky-order{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgb(var(--card) / .96); backdrop-filter:blur(10px);
  border-top:1px solid rgb(var(--border));
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform .35s ease;
  box-shadow:0 -8px 24px -16px rgb(0 0 0 / .25); }
@media(max-width:767px){ .sticky-order{ display:block; } }
body.ready .sticky-order{ transform:translateY(0); }
.sticky-order__in{ display:flex; align-items:center; justify-content:space-between;
  gap:1rem; max-width:var(--container); margin-inline:auto; }
.sticky-order span{ display:flex; flex-direction:column; line-height:1.25;
  min-width:0; flex:1; }
.sticky-order b{ font-weight:660; font-size:.95rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.sticky-order small{ color:rgb(var(--muted-foreground)); font-size:.78rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-order .btn{ flex-shrink:0; width:auto !important; }
/* keep the footer clear of the sticky bar on mobile */
@media(max-width:767px){ body.ready .site-footer{ padding-bottom:4.5rem; } }
/* hide the bar when the footer is in view */
.sticky-order--hidden{ transform:translateY(110%) !important; }

/* ============================================================================
 *  PREMIUM POLISH LAYER  —  richer surfaces, depth, colour & detail
 *  (all content still 100% SIPO-driven; this is presentation only)
 * ========================================================================== */

/* ---- Ordering-status notice (under hero) ---------------------------- */
.notice{ font-size:.92rem; }
.notice__in{ display:flex; align-items:center; justify-content:center;
  gap:.7rem; padding:.85rem 1rem; text-align:center; font-weight:560; }
.notice__ic{ flex-shrink:0; width:1.5rem; height:1.5rem; }
.notice__ic svg{ width:100%; height:100%; }
.notice--warn{ background:linear-gradient(180deg,#fff7ed,#fff1e2);
  color:#9a3412; border-bottom:1px solid #fed7aa; }
.notice--info{ background:linear-gradient(180deg,
  rgb(var(--accent)), rgb(var(--accent) / .6));
  color:rgb(var(--primary)); border-bottom:1px solid rgb(var(--primary) / .16); }

/* ---- Section heads: editorial divider + balanced rhythm ------------- */
.section__head{ position:relative; }
.section{ position:relative; }
/* faint top hairline glow between bands for premium rhythm */
.section--tint{ box-shadow:inset 0 1px 0 rgb(var(--border)),
  inset 0 -1px 0 rgb(var(--border)); }

/* ---- Product / special cards: depth, accent rail, price chip -------- */
.pcard{ border-radius:calc(var(--radius) + .25rem);
  box-shadow:0 1px 2px rgb(0 0 0 / .05); position:relative; }
.pcard__img, .pcard__noimg{ aspect-ratio:4/3; }
.pcard__noimg{ background:
  radial-gradient(120% 120% at 30% 20%, rgb(var(--primary) / .14),
                  rgb(var(--accent))); letter-spacing:.04em; }
.pcard__body{ padding:1.1rem 1.15rem 1.25rem; }
.pcard__name{ font-size:1.02rem; font-weight:680; letter-spacing:-.01em; }
.pcard__price{ display:inline-flex; align-items:center; padding:.3rem .65rem;
  border-radius:999px; background:rgb(var(--accent));
  color:rgb(var(--primary)); font-size:.95rem; font-weight:720;
  border:1px solid rgb(var(--primary) / .14); }
.pcard.card--hover:hover{ border-color:rgb(var(--primary) / .4);
  box-shadow:var(--shadow-lg); }
.pcard .badge{ box-shadow:var(--shadow-sm); }
/* specials get a coloured top rail. Per-product SIPO `color` (--pc) when
   set, otherwise the brand primary. Always visible — it's the accent. */
#specials .pcard::before{ content:""; position:absolute; inset:0 0 auto 0;
  height:4px; background:linear-gradient(90deg,
    var(--pc, rgb(var(--primary))),
    color-mix(in srgb, var(--pc, rgb(var(--primary))) 35%, transparent));
  border-radius:calc(var(--radius) + .25rem) calc(var(--radius) + .25rem) 0 0;
  z-index:2; }
#specials .pcard{ overflow:hidden; }
#specials .pcard__noimg{ background:
  radial-gradient(120% 120% at 30% 20%,
    color-mix(in srgb, var(--pc, rgb(var(--primary))) 22%, transparent),
    rgb(var(--accent))); }
#specials .section__head h2{ display:inline-block; }

/* list-style menu items: cleaner separation + hover lift */
.item{ border-radius:calc(var(--radius) + .1rem); }
.item__name{ font-size:1.03rem; }
.item__price{ background:rgb(var(--accent)); padding:.25rem .6rem;
  border-radius:999px; font-size:.92rem;
  border:1px solid rgb(var(--primary) / .12); }

/* ---- About: framed media + clean shadow ---------------------------- */
.about__media{ position:relative; box-shadow:var(--shadow); }
.about--solo{ position:relative; padding:clamp(2.25rem,5vw,4rem);
  border-radius:calc(var(--radius) + .5rem); overflow:hidden;
  background:
    radial-gradient(120% 130% at 10% 0%, rgb(var(--primary) / .08), transparent 55%),
    linear-gradient(180deg, rgb(var(--accent)), rgb(var(--card)));
  border:1px solid rgb(var(--border)); box-shadow:var(--shadow); }
.about--solo::after{ content:""; position:absolute; inset:auto -10% -40% auto;
  width:320px; height:320px; border-radius:50%;
  background:rgb(var(--primary) / .05); pointer-events:none; }
.about--solo .about__text{ position:relative; z-index:1; }
.about--solo .about__text > .section__eyebrow{ color:rgb(var(--primary)); }
.about--solo h2{ font-size:clamp(1.8rem,3.8vw,2.6rem); margin-top:.3rem; }
.about--solo p{ font-size:1.05rem; line-height:1.75; }
.about__mark{ display:inline-grid; place-content:center; width:3.25rem;
  height:3.25rem; margin-bottom:1.1rem; border-radius:16px; font-weight:760;
  font-size:1.25rem; letter-spacing:.02em;
  color:rgb(var(--primary-foreground));
  background:linear-gradient(160deg, rgb(var(--primary)),
    rgb(var(--primary-hover)));
  box-shadow:0 10px 24px -10px rgb(var(--primary) / .55); }

/* ---- Stats band: cards with divider rails --------------------------- */
.stats-band{ background:
  linear-gradient(180deg, rgb(var(--accent)), rgb(var(--muted) / .55));
  border-block:1px solid rgb(var(--border)); }
.stat{ position:relative; padding:.5rem 1rem; }
.stat + .stat::before{ content:""; position:absolute; left:0; top:18%;
  bottom:18%; width:1px; background:rgb(var(--border)); }
@media(max-width:767px){
  .stat:nth-child(odd) + .stat::before{ display:block; }
  .stat:nth-child(3)::before, .stat:nth-child(odd)::before{ display:none; } }
.stat__v{ background:linear-gradient(180deg,
  rgb(var(--foreground)), rgb(var(--primary)));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; }

/* ---- Why-us: numbered, hover-accent cards --------------------------- */
.why-card{ position:relative; overflow:hidden;
  border-radius:calc(var(--radius) + .2rem); }
.why-card::after{ content:""; position:absolute; inset:auto -30% -40% auto;
  width:140px; height:140px; border-radius:50%;
  background:rgb(var(--primary) / .06); transition:transform .4s; }
.why-card:hover::after{ transform:scale(1.4); }
.why-card:hover{ border-color:rgb(var(--primary) / .35);
  box-shadow:var(--shadow); }
.why-card__ic{ background:linear-gradient(160deg,
  rgb(var(--primary) / .14), rgb(var(--accent)));
  box-shadow:inset 0 0 0 1px rgb(var(--primary) / .12); }

/* ---- Service band: pill chips ------------------------------------- */
.svc-band{ background:rgb(var(--card)); }
.svc{ padding:.5rem .9rem; border-radius:999px;
  border:1px solid rgb(var(--border)); background:rgb(var(--card));
  box-shadow:var(--shadow-sm); transition:border-color .2s, transform .2s; }
.svc:hover{ border-color:rgb(var(--primary) / .35); transform:translateY(-2px); }
.svc-row{ gap:.7rem 1rem; padding:1.25rem 0; }

/* ---- Gallery: refined frames + hover caption reveal ----------------- */
.gallery-grid{ gap:.85rem; }
.gallery-grid figure{ border-radius:calc(var(--radius) + .15rem);
  box-shadow:var(--shadow-sm); }
.gallery-grid figure::after{ content:"⤢"; position:absolute; top:.6rem;
  right:.6rem; width:2rem; height:2rem; display:grid; place-content:center;
  border-radius:50%; background:rgb(0 0 0 / .35); color:#fff;
  font-size:.95rem; opacity:0; transform:scale(.8); transition:.25s;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.gallery-grid figure:hover::after{ opacity:1; transform:scale(1); }
.gallery-grid figcaption{ transform:translateY(8px); opacity:0;
  transition:opacity .25s, transform .25s; }
.gallery-grid figure:hover figcaption{ transform:none; opacity:1; }

/* ---- Hours: two-column (card left · info right) --------------------- */
.hours-layout{ display:grid; gap:2rem; align-items:start; }
@media(min-width:900px){
  .hours-layout{ grid-template-columns:1.05fr .95fr; gap:3rem;
    align-items:center; } }
.hours-card{ max-width:none; margin:0; padding:clamp(1.25rem,3vw,1.9rem);
  border-radius:calc(var(--radius) + .35rem); box-shadow:var(--shadow); }
/* CRITICAL: panels must hide when [hidden]; only the active one shows.
   (A bare `display:flex` here previously overrode the hidden attribute
   and stacked every schedule on top of each other.) */
.hours-panel{ display:flex; flex-direction:column; }
.hours-panel[hidden]{ display:none !important; }
.hours-row{ border-radius:10px; padding:.8rem .95rem; transition:background .2s;
  border-bottom:1px solid rgb(var(--border) / .55); }
.hours-row:last-child{ border-bottom:0; }
.hours-row[data-today="true"]{ background:rgb(var(--accent)); border-bottom-color:transparent;
  box-shadow:inset 0 0 0 1px rgb(var(--primary) / .18); }
.hours-row[data-today="true"] + .hours-row{ border-top:0; }

/* right-hand explanatory column */
.hours-info{ display:flex; flex-direction:column; gap:.85rem;
  max-width:38rem; }
.hours-info h2{ margin-top:.1rem; }
.hours-info__status{ display:flex; flex-wrap:wrap; align-items:center;
  gap:.6rem .9rem; margin-top:.2rem; }
.hours-info__status .open-pill{ font-size:1rem; }
.hours-info__today{ font-weight:600; color:rgb(var(--foreground));
  padding:.3rem .75rem; border-radius:999px; background:rgb(var(--card));
  border:1px solid rgb(var(--border)); font-variant-numeric:tabular-nums; }
.hours-info__lead{ color:rgb(var(--muted-foreground)); font-size:1.02rem;
  line-height:1.65; }
.hours-info__svc{ list-style:none; display:grid; gap:.55rem;
  margin:.4rem 0 .6rem; }
.hours-info__svc li{ display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.4rem .75rem; padding:.7rem .9rem; border-radius:12px;
  background:rgb(var(--card)); border:1px solid rgb(var(--border)); }
.hours-info__k{ font-weight:680; min-width:5.5rem; }
.hours-info__k::before{ content:""; display:inline-block; width:7px;
  height:7px; border-radius:50%; background:rgb(var(--primary));
  margin-right:.55rem; vertical-align:middle; }
.hours-info__v{ color:rgb(var(--muted-foreground)); font-size:.92rem; }
@media(max-width:520px){
  .hours-tab{ padding:.6rem .75rem; font-size:.85rem; }
  .hours-tab small{ display:none; } }

/* ---- Contact: card-framed list + premium map ------------------------ */
.contact__list{ padding:clamp(1.25rem,3vw,1.75rem);
  border:1px solid rgb(var(--border)); border-radius:calc(var(--radius) + .2rem);
  background:rgb(var(--card)); box-shadow:var(--shadow-sm);
  align-content:start; }
.contact__row{ padding:.65rem 0; border-bottom:1px solid rgb(var(--border) / .6); }
.contact__row:last-of-type{ border-bottom:0; }
.contact__row a:hover{ color:rgb(var(--primary)); }
.contact__row .ic{ background:linear-gradient(160deg,
  rgb(var(--primary) / .14), rgb(var(--accent))); }
.map{ box-shadow:var(--shadow); }
.map-wrap, .map{ border-radius:calc(var(--radius) + .2rem); }
.map-wrap{ overflow:hidden; border:1px solid rgb(var(--border)); }

/* ---- Order CTA band: gradient + glow --------------------------------
   IMPORTANT: base.css gives every h1–h4 the dark --foreground colour.
   On this dark band that makes the heading invisible, so we force the
   on-primary colour for ALL text/headings here (high contrast). */
.cta-band{ position:relative; overflow:hidden;
  color:rgb(var(--primary-foreground));
  background:
    radial-gradient(120% 140% at 85% 0%, rgb(var(--primary-hover)), transparent 55%),
    rgb(var(--primary)); }
.cta-band::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(60% 120% at 15% 50%,
    rgb(255 255 255 / .12), transparent 60%); pointer-events:none; }
.cta-band::after{ content:""; position:absolute; inset:auto -8% -60% auto;
  width:380px; height:380px; border-radius:50%;
  background:rgb(255 255 255 / .06); pointer-events:none; }
.cta-band__in{ position:relative; z-index:1; }
.cta-band h2,
.cta-band p{ color:rgb(var(--primary-foreground)); }
.cta-band h2{ font-weight:760; }
.cta-band p{ opacity:.85; }

/* ---- Footer: subtle top accent ------------------------------------- */
.site-footer{ position:relative; }
.site-footer::before{ content:""; position:absolute; inset:0 0 auto 0;
  height:3px; background:linear-gradient(90deg,
    transparent, rgb(var(--primary) / .5), transparent); }

/* ---- Section eyebrow refinement (consistent everywhere) ------------- */
.section__eyebrow{ display:inline-flex; align-items:center; }

/* ---- Mobile comfort tweaks ----------------------------------------- */
@media(max-width:640px){
  .notice__in{ padding:.8rem .9rem; font-size:.86rem; }
  .pcard__body{ padding:1rem; }
  .about--solo{ padding:1.6rem 1.25rem; }
  .contact__list{ padding:1.25rem; }
}

/* ---- Video hero ------------------------------------------------------ */
/* Full-bleed autoplay video hero. video.hero__bg fills the same slot as
   img.hero__bg — cover-fitted, inset 0, z-index -2. The scrim and inner
   copy sit on top exactly as they do for photo heroes. */
.hero--video{ position:relative; isolation:isolate;
  min-height:clamp(480px, 72vh, 860px);
  display:grid; align-items:center; }
.hero--video .hero__bg,
.hero--video video.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; z-index:-2; }
.hero--video .hero__scrim{ position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 18% 50%, rgb(0 0 0 / .62), transparent 60%),
    linear-gradient(180deg, rgb(0 0 0 / .30) 0%, rgb(0 0 0 / .34) 45%,
                            rgb(0 0 0 / .74) 100%); }
.hero--video .container{ position:relative; z-index:1; }
@media(max-width:767px){
  .hero--video{ min-height:clamp(440px,72svh,640px); }
}

/* ---- Gallery filter tabs ------------------------------------------- */
.gallery-tabs{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.75rem;
  padding:.3rem; background:rgb(var(--muted) / .6);
  border:1px solid rgb(var(--border)); border-radius:calc(var(--radius) + .25rem);
  width:fit-content;
}
.gallery-tabs .chip{
  padding:.45rem 1rem; font-size:.88rem; font-weight:600;
  border-radius:var(--radius); border:none; background:transparent;
  color:rgb(var(--muted-foreground)); cursor:pointer;
  transition:background .18s, color .18s, box-shadow .18s;
  white-space:nowrap;
}
.gallery-tabs .chip .chip__n{
  display:inline-grid; place-content:center;
  min-width:1.35rem; height:1.35rem; padding:0 .35rem;
  border-radius:999px; font-size:.72rem; font-weight:700; line-height:1;
  background:rgb(var(--border)); color:rgb(var(--muted-foreground));
  margin-left:.35rem; transition:inherit;
}
.gallery-tabs .chip:hover{
  background:rgb(var(--card)); color:rgb(var(--foreground));
  box-shadow:var(--shadow-sm);
}
.gallery-tabs .chip[aria-selected="true"]{
  background:rgb(var(--card));
  color:rgb(var(--foreground)); font-weight:700;
  box-shadow:var(--shadow);
}
.gallery-tabs .chip[aria-selected="true"] .chip__n{
  background:rgb(var(--primary) / .15); color:rgb(var(--primary));
}
/* Smooth hide/show of filtered images */
.gallery-grid figure{ transition:opacity .2s; }
.gallery-grid figure[hidden]{ display:none; }

/* ---- Testimonial cards — premium redesign -------------------------- */
/* Overrides the generic .tcard; all testimonial-specific rules here */
.tcard{
  position:relative; overflow:hidden;
  padding:1.75rem; display:flex; flex-direction:column; gap:0;
  border:1px solid rgb(var(--border));
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s, transform .2s;
}
.tcard:hover{
  box-shadow:var(--shadow);
  transform:translateY(-3px);
}
/* Large decorative quote mark */
.tcard::before{
  content:'"';
  position:absolute; top:-.6rem; left:1.1rem;
  font-size:6.5rem; line-height:1;
  font-family:Georgia, 'Times New Roman', serif;
  color:rgb(var(--primary) / .1);
  pointer-events:none; user-select:none;
}
/* Stars row */
.tcard .stars{
  font-size:.95rem; letter-spacing:2px; color:#f59e0b;
  margin-bottom:.85rem;
}
/* Review heading */
.tcard__heading{
  font-size:1.05rem; font-weight:680; line-height:1.35;
  color:rgb(var(--foreground)); margin-bottom:.55rem;
}
/* Review body text */
.tcard p{
  flex:1; /* push .tcard__by to bottom */
  color:rgb(var(--muted-foreground)); font-size:.94rem;
  line-height:1.6; margin-bottom:0;
}
/* Reviewer attribution row */
.tcard__by{
  display:flex; align-items:center; gap:.65rem;
  margin-top:1.25rem; padding-top:1.1rem;
  border-top:1px solid rgb(var(--border) / .55);
}
.tcard__avatar{
  width:2.35rem; height:2.35rem; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, rgb(var(--primary) / .18), rgb(var(--accent)));
  display:grid; place-content:center;
  font-weight:700; font-size:.82rem; color:rgb(var(--primary));
  border:2px solid rgb(var(--primary) / .2);
}
.tcard__name{ font-weight:640; font-size:.92rem; color:rgb(var(--foreground)); }

/* Single-review layout — centre the card so it doesn't look orphaned in
   a wide grid. The grid drops its column rules in sections.js for n=1. */
.testimonials--solo .grid{ max-width:600px; margin-inline:auto;
  display:block; }
.testimonials--solo .tcard{ margin-inline:auto; }

/* When a grid has only one card (no --2/--3/--4 modifier), keep it from
   stretching the full content width — pcards look unbalanced very wide. */
.grid:not(.grid--2):not(.grid--3):not(.grid--4){
  max-width:520px; margin-inline:auto; }

/* ---- Footer legal links -------------------------------------------- */
.footer-bottom__left{ display:flex; flex-direction:column; gap:.35rem; }
.footer-legal{ display:flex; flex-wrap:wrap; gap:.25rem .9rem; }
.footer-legal a{ font-size:.8rem; color:rgb(var(--muted-foreground));
  text-decoration:underline; text-underline-offset:3px;
  transition:color .15s; }
.footer-legal a:hover{ color:rgb(var(--foreground)); }
/* On mobile the credits stack below the copyright — give them breathing room */
@media(max-width:639px){
  .footer-credits{ margin-top:.2rem; }
}