/* ============================================================
   Ambrosia India Bistro — Landing styles
   Aesthetic: minimal & clean, warm neutrals + a single deep accent
   ============================================================ */

:root {
  --ink:        #1c1a17;   /* near-black warm */
  --ink-soft:   #55504a;
  --line:       #e7e1d8;
  --paper:      #fbf9f5;   /* warm off-white */
  --paper-2:    #f4efe7;
  --ok:         #37602c;
  --white:      #ffffff;
  --accent:     #7a1f2b;   /* deep maroon, used sparingly */
  --accent-ink: #611722;
  --gold:       #b08843;
  --radius:     14px;
  --radius-sm:  9px;
  --shadow:     0 1px 2px rgba(28,26,23,.04), 0 12px 32px -12px rgba(28,26,23,.14);
  --maxw:       1160px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

/* the [hidden] attribute must always win, even over display:flex components */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; margin: 0; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

section { scroll-margin-top: 96px; }

/* ---------- Buttons ---------- */
.btn {
  --pad-y: .9rem; --pad-x: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: var(--pad-y) var(--pad-x);
  font-family: "Inter", sans-serif;
  font-size: .95rem; font-weight: 500; letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--sm { --pad-y: .55rem; --pad-x: 1.1rem; font-size: .85rem; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--outline-light:hover { background: #fff; color: var(--ink); }

/* ---------- Location bar ---------- */
.locbar {
  background: var(--ink);
  color: #efeae2;
  font-size: .82rem;
}
.locbar__inner {
  max-width: var(--maxw); margin: 0 auto; padding: .5rem 1.5rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.locbar__label { color: #b9b2a7; }
.locbar__select select {
  background: transparent; color: #fff; border: 0;
  font-family: inherit; font-size: .82rem; font-weight: 600;
  padding: .15rem 1.4rem .15rem .1rem; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b08843' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .3rem center;
}
.locbar__select select option { color: #1c1a17; }
.locbar__meta { color: #b9b2a7; margin-left: auto; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,249,245,.82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-stuck { border-color: var(--line); }
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: .85rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: inline-flex; align-items: center; gap: .65rem; }
.brand__logo { height: 46px; width: auto; display: block; border-radius: 6px; }
.brand__logo--footer { height: 52px; border-radius: 8px; }
.auth__brand .brand__logo { height: 56px; margin: 0 auto; }
.brand__mark {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-family: "Fraunces", serif; font-size: 1.35rem; font-weight: 600;
  flex: none;
}
.brand__name { font-family: "Fraunces", serif; font-size: 1.15rem; font-weight: 600; line-height: 1; display: flex; flex-direction: column; }
.brand__sub { font-family: "Inter", sans-serif; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-top: .2rem; }

.nav__links { display: flex; align-items: center; gap: 1.7rem; }
.nav__links > a:not(.btn) { font-size: .92rem; color: var(--ink-soft); position: relative; }
.nav__links > a:not(.btn):hover { color: var(--ink); }
.nav__account { font-weight: 500; }

.nav__toggle { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; flex-direction: column; gap: 5px; justify-content: center; align-items: center; }
.nav__toggle span { width: 22px; height: 2px; background: var(--ink); transition: .3s var(--ease); }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex; align-items: center;
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0;
  background-color: #241413;
  background:
    linear-gradient(180deg, rgba(28,26,23,.15), rgba(28,26,23,.55)),
    radial-gradient(120% 90% at 80% 10%, #3a2320 0%, #241713 55%, #1a0f0d 100%);
  background-size: cover; background-position: center;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("images/hero.jpg");
  background-size: cover; background-position: center;
  opacity: .55; mix-blend-mode: overlay;
}
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,12,10,.72) 0%, rgba(20,12,10,.30) 55%, rgba(20,12,10,.05) 100%); }
.hero__content {
  position: relative; z-index: 2;
  max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 3rem 1.5rem;
  color: #fdfbf7;
}
.hero__eyebrow { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 0 0 1.1rem; }
.hero__title { font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 500; margin-bottom: 1.3rem; }
.hero__lede { max-width: 30rem; font-size: 1.1rem; color: #eaddd3; margin: 0 0 2rem; }
.hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2rem; }
.hero__loc { font-size: .9rem; color: #d8cabc; display: inline-flex; align-items: center; gap: .5rem; }
.hero__loc strong { color: #fff; font-weight: 600; }
.hero__loc a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.hero__loc-dot { width: 8px; height: 8px; border-radius: 50%; background: #6fbf7a; box-shadow: 0 0 0 4px rgba(111,191,122,.2); }

/* ---------- Section heads ---------- */
.section-head { max-width: 44rem; margin: 0 auto 2.8rem; text-align: center; }
.section-head__eyebrow { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 0 0 .7rem; }
.section-head__title { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.section-head__sub { color: var(--ink-soft); margin: .9rem 0 0; }

/* ---------- Signatures ---------- */
.signatures { max-width: var(--maxw); margin: 0 auto; padding: 6rem 1.5rem 2rem; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card__img { aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: var(--paper-2); }
.card__img--tandoori { background-image: linear-gradient(135deg, #8a2e22, #c2683a); }
.card__img--butter   { background-image: linear-gradient(135deg, #c98a2b, #e6b95a); }
.card__img--naan     { background-image: linear-gradient(135deg, #6b7d3a, #a9b563); }
.card__body { padding: 1.3rem 1.4rem 1.5rem; }
.card__body h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.card__body p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ---------- Menu categories ---------- */
.menu { max-width: var(--maxw); margin: 0 auto; padding: 5rem 1.5rem; }
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cat {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  padding: 1.8rem 1rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-weight: 500; font-size: .98rem;
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.cat:hover { border-color: var(--accent); transform: translateY(-3px); }
.cat__icon { font-size: 1.7rem; line-height: 1; }
.menu__cta { text-align: center; margin-top: 2.5rem; }

/* ---------- Story ---------- */
.story {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  gap: 0; margin: 3rem auto; max-width: var(--maxw);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--white);
}
.story__media { min-height: 380px; background: linear-gradient(135deg, #2a1a16, #59332a); background-image: linear-gradient(rgba(30,18,15,.2), rgba(30,18,15,.2)), url("images/story.jpg"); background-size: cover; background-position: center; }
.story__text { padding: 3.2rem 3rem; align-self: center; }
.story__text h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: .6rem 0 1.2rem; }
.story__text p { color: var(--ink-soft); margin: 0 0 1rem; }
.link-arrow { color: var(--accent); font-weight: 600; display: inline-block; margin-top: .5rem; transition: gap .2s; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Locations ---------- */
.locations { max-width: var(--maxw); margin: 0 auto; padding: 5rem 1.5rem; }
.loc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.loc {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem 1.5rem; display: flex; flex-direction: column; gap: .35rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.loc:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.loc h3 { font-size: 1.35rem; margin-bottom: .3rem; }
.loc__addr { color: var(--ink-soft); font-size: .92rem; margin: 0; }
.loc__phone a { color: var(--accent); font-weight: 600; font-size: .95rem; }
.loc__hours { color: var(--ink-soft); font-size: .85rem; margin: .2rem 0 0; }
.loc__pick { margin-top: 1rem; align-self: flex-start; }
.loc.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(122,31,43,.08); }

/* ---------- Band ---------- */
.band {
  background: linear-gradient(135deg, #611722, #7a1f2b 55%, #8f2f2b);
  color: #fff; margin-top: 2rem;
}
.band__inner { max-width: var(--maxw); margin: 0 auto; padding: 4.5rem 1.5rem; text-align: center; }
.band h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: .8rem; }
.band p { color: #f0d9d3; max-width: 34rem; margin: 0 auto 1.8rem; }
.band__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #cbc4ba; }
.footer__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 3.5rem 1.5rem 2.5rem;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 2rem;
}
.footer__brand { display: flex; align-items: center; gap: .8rem; }
.footer__name { font-family: "Fraunces", serif; color: #fff; font-size: 1.15rem; margin: 0; }
.footer__tag { font-size: .82rem; color: var(--gold); margin: .15rem 0 0; }
.footer__col { display: flex; flex-direction: column; gap: .6rem; }
.footer__h { color: #fff; font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .3rem; }
.footer__col a { font-size: .9rem; color: #cbc4ba; transition: color .2s; }
.footer__col a:hover { color: #fff; }
.footer__bar {
  border-top: 1px solid #332f2a; max-width: var(--maxw); margin: 0 auto;
  padding: 1.2rem 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  font-size: .8rem; color: #8f887e;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav__links {
    position: fixed; inset: 0 0 auto 0; top: 0; padding: 6rem 1.5rem 2rem;
    flex-direction: column; align-items: stretch; gap: 1.2rem;
    background: var(--paper); box-shadow: var(--shadow);
    transform: translateY(-110%); transition: transform .4s var(--ease);
    height: auto;
  }
  .nav__links.is-open { transform: translateY(0); }
  .nav__toggle { display: flex; z-index: 60; }
  .cards, .cats, .loc-grid { grid-template-columns: repeat(2, 1fr); }
  .story { grid-template-columns: 1fr; }
  .story__media { min-height: 240px; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cards, .cats, .loc-grid, .footer__inner { grid-template-columns: 1fr; }
  .locbar__meta { display: none; }
  .hero { min-height: 78vh; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal, [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   FRAGMENT APP — shell, router transitions, components
   ============================================================ */

/* view transition */
.view { min-height: 60vh; }
.view.is-leaving { opacity: 0; transform: translateY(6px); }
.view { transition: opacity .18s var(--ease), transform .18s var(--ease); }

/* data-reveal (per-fragment) */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* page scaffolding */
.pg { max-width: var(--maxw); margin: 0 auto; padding: 3.4rem 1.5rem 4.5rem; }
.pg--tight { padding-top: 2.4rem; }
.pg__inner { width: 100%; }
.pg__title { font-size: clamp(2rem, 4vw, 3rem); margin: .3rem 0 .6rem; }
.pg-pad { padding-top: 5rem; padding-bottom: 1rem; }
.muted { color: var(--ink-soft); font-weight: 400; }

/* active nav link */
.nav__links a.is-active:not(.btn) { color: var(--ink); }
.nav__links a.is-active:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); border-radius: 2px;
}

/* nav cart button */
.nav__cart { position: relative; background: none; border: 0; cursor: pointer; color: var(--ink); padding: .35rem; display: inline-flex; }
.nav__cart:hover { color: var(--accent); }
.nav__cart-count {
  position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--accent); color: #fff; border-radius: 10px; font-size: .68rem; font-weight: 600;
  display: grid; place-items: center; font-family: "Inter", sans-serif;
}
.nav__cart-count.is-empty { display: none; }

.btn--block { width: 100%; }

/* ---- location quick-pick strip ---- */
.locstrip { max-width: var(--maxw); margin: -2.5rem auto 0; padding: 0 1.5rem; position: relative; z-index: 5;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.locstrip__item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem;
  text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: .15rem;
  box-shadow: var(--shadow); transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.locstrip__item:hover { transform: translateY(-4px); border-color: var(--accent); }
.locstrip__item strong { font-family: "Fraunces", serif; font-size: 1.1rem; font-weight: 600; }
.locstrip__item span { font-size: .82rem; color: var(--ink-soft); }

/* ---- category photo grid (home) ---- */
.cat-photos { max-width: var(--maxw); margin: 0 auto; }
.cat-photo-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; }
.cat-photo {
  aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; position: relative;
  background-size: cover; background-position: center; display: flex; align-items: flex-end;
  transition: transform .3s var(--ease); isolation: isolate;
}
.cat-photo::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(20,12,10,.72)); z-index:0; }
.cat-photo span { position: relative; z-index: 1; color: #fff; font-family: "Fraunces", serif; font-size: 1.3rem; font-weight: 500; padding: 1.1rem 1.2rem; }
.cat-photo:hover { transform: translateY(-5px); }

/* ---- menu / order page ---- */
.menu-head { margin-bottom: 1.5rem; }
.menu-sub { color: var(--ink-soft); margin: .3rem 0 0; }

/* primary: category tabs — clean horizontal scroll, no visible scrollbar, fade edge */
.cat-scroll { position: relative; margin-bottom: 1rem; }
.cat-scroll::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40px; pointer-events: none;
  background: linear-gradient(90deg, rgba(251,249,245,0), var(--paper));
}
.cat-tabs { display: flex; gap: .55rem; overflow-x: auto; padding: .1rem .1rem 2px; -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x proximity; }
.cat-tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--line); background: var(--white); color: var(--ink-soft);
  border-radius: 100px; padding: .55rem 1.15rem; font-family: "Inter", sans-serif; font-size: .9rem; font-weight: 500; cursor: pointer;
  transition: all .2s var(--ease); white-space: nowrap;
}
.tab__icon { font-size: 1rem; }
.tab:hover { border-color: var(--accent); color: var(--ink); }
.tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 16px -8px rgba(122,31,43,.6); }

/* secondary: dietary refinements — quieter than the tabs */
.diet-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.8rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.diet-row__label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-right: .3rem; }
.chip {
  border: 1px solid var(--line); background: var(--white); color: var(--ink-soft);
  border-radius: 100px; padding: .35rem .85rem; font-family: "Inter", sans-serif; font-size: .82rem; cursor: pointer;
  transition: all .2s var(--ease); display: inline-flex; align-items: center; gap: .35rem;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .2s; }
.chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.chip.is-active { background: #eef3ea; color: #37602c; border-color: #cfe3c7; }
.chip.is-active::before { background: #6fbf7a; }

/* course sections */
.course { margin-bottom: 2.6rem; scroll-margin-top: 120px; }
.course__head { display: flex; align-items: baseline; gap: .7rem; margin: 0 0 1.1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.course__title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.course__count { font-size: .85rem; color: var(--ink-soft); font-weight: 500; }

.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
/* dish corner tags (Popular + label) */
.dish__tags { position: absolute; top: .6rem; left: .6rem; display: flex; gap: .35rem; flex-wrap: wrap; z-index: 1; }
.lbl { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .2rem .5rem; border-radius: 100px; color: #fff; }
.lbl--discount { background: #c0392b; } .lbl--combo { background: #2d6cb0; } .lbl--new { background: #2e8b57; } .lbl--special { background: #8a5cc0; }
.dish {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dish:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.dish--out { opacity: .62; }
.dish__img { aspect-ratio: 16/10; background-size: cover; background-position: center; position: relative; background-color: var(--paper-2); }
.dish__noimg { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--paper-2), #eadfce); position: relative; }
.dish__tag { background: var(--gold); color: #2a1c07; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 100px; }
.dish__body { padding: 1.15rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.dish__head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.dish__head h3 { font-size: 1.18rem; }
.dish__price { font-family: "Fraunces", serif; font-weight: 600; color: var(--accent); white-space: nowrap; }
.dish__desc { color: var(--ink-soft); font-size: .9rem; margin: 0; flex: 1; }
.dish__meta { display: flex; gap: .35rem; flex-wrap: wrap; }
.dish__add { align-self: flex-start; margin-top: .3rem; }
.pill { font-size: .68rem; font-weight: 600; padding: .2rem .5rem; border-radius: 100px; background: var(--paper-2); color: var(--ink-soft); letter-spacing: .02em; }
.pill--veg { background: #e7f0e3; color: #3f6b34; }
.pill--spicy { background: #fbe7e4; color: #a5382a; }
.menu-empty { grid-column: 1/-1; text-align: center; color: var(--ink-soft); padding: 3rem 0; }

/* ---- cart drawer ---- */
.cart-backdrop { position: fixed; inset: 0; background: rgba(20,12,10,.4); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); z-index: 70; }
.cart-backdrop.is-open { opacity: 1; pointer-events: auto; }
.cart {
  position: fixed; top: 0; right: 0; height: 100%; width: min(400px, 90vw); background: var(--paper);
  z-index: 80; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .32s var(--ease);
  box-shadow: -20px 0 50px -20px rgba(20,12,10,.35);
}
.cart.is-open { transform: none; }
.cart__head { display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 1.5rem 1rem; }
.cart__head h3 { font-size: 1.4rem; }
.cart__close { background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--ink-soft); }
.cart__close:hover { color: var(--ink); }
.cart__loc { padding: 0 1.5rem .8rem; font-size: .85rem; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.cart__items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.cart__empty { text-align: center; color: var(--ink-soft); padding: 3rem 1rem; }
.cart__empty span { font-size: .85rem; opacity: .8; }
.cart-line { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.cart-line__name { font-weight: 500; margin: 0; font-size: .95rem; }
.cart-line__price { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.cart-line__sum { margin: 0; font-weight: 600; font-family: "Fraunces", serif; min-width: 56px; text-align: right; }
.qty { display: inline-flex; align-items: center; gap: .1rem; border: 1px solid var(--line); border-radius: 100px; }
.qty__btn { width: 28px; height: 28px; border: 0; background: none; cursor: pointer; font-size: 1.1rem; color: var(--ink); border-radius: 50%; }
.qty__btn:hover { background: var(--paper-2); }
.qty__n { min-width: 20px; text-align: center; font-size: .9rem; font-weight: 500; }
.cart__foot { padding: 1.2rem 1.5rem 1.5rem; border-top: 1px solid var(--line); background: var(--white); }
.cart__row { display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: .5rem; }
.cart__row--muted { color: var(--ink-soft); font-size: .82rem; }
.cart__row--total { font-family: "Fraunces", serif; font-size: 1.25rem; font-weight: 600; margin: .6rem 0 1rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.cart__cta { display: flex; gap: .6rem; }
.cart__cta .btn { flex: 1; }
.cart__checkout { width: 100%; }
.cart__note { text-align: center; font-size: .76rem; color: var(--ink-soft); margin: .7rem 0 0; }

/* pickup / delivery */
.cart__type { display: flex; gap: .5rem; padding: 0 1.5rem 1rem; }
.ctype { flex: 1; padding: .6rem; border: 1px solid var(--line); background: #fff; border-radius: 10px; font-family: "Inter", sans-serif; font-size: .9rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: .2s var(--ease); }
.ctype:hover { border-color: var(--ink); color: var(--ink); }
.ctype.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cart__delivery { padding: 0 1.5rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.cart__delivery label { font-size: .82rem; font-weight: 600; }
.cart__delivery textarea { border: 1px solid var(--line); border-radius: 9px; padding: .6rem .7rem; font-family: "Inter", sans-serif; font-size: .9rem; resize: vertical; }
.cart__delivery textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(122,31,43,.1); }
.cart__useloc { align-self: flex-start; background: none; border: 0; color: var(--accent); font-weight: 600; font-size: .85rem; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.cart__hint { font-size: .8rem; color: var(--ink-soft); margin: 0; }

/* guest "track your order" prompt in cart */
.cart__guest { font-size: .82rem; color: var(--ink-soft); text-align: center; margin: 0 0 .8rem; padding: .6rem .8rem; background: var(--paper-2); border-radius: 9px; }
.cart__guest a { color: var(--accent); font-weight: 600; }

/* Continue with Google + divider */
.gbtn { display: flex; justify-content: center; margin: 0 0 .3rem; min-height: 0; }
.gbtn-custom {
  display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%;
  padding: .75rem 1.2rem; border: 1px solid var(--line); border-radius: 100px; background: #fff;
  font-family: "Inter", sans-serif; font-size: .95rem; font-weight: 500; color: var(--ink);
  cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.gbtn-custom:hover { border-color: var(--ink-soft); box-shadow: 0 2px 8px -4px rgba(28,26,23,.25); }
.gbtn-custom svg { flex: none; }
.gbtn-hint { font-size: .8rem; color: var(--ink-soft); text-align: center; margin: .3rem 0 0; }
.auth__divider { display: flex; align-items: center; text-align: center; color: var(--ink-soft); font-size: .8rem; margin: 1rem 0; }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth__divider span { padding: 0 .8rem; }

/* account dashboard */
.dash { display: grid; grid-template-columns: 250px 1fr; gap: 1.6rem; align-items: start; }
.dash__side { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.3rem; position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1.2rem; }
.dash__id { text-align: center; }
.dash__name { font-family: "Fraunces", serif; font-size: 1.15rem; font-weight: 600; margin: .8rem 0 .1rem; }
.dash__email { font-size: .82rem; color: var(--ink-soft); margin: 0; word-break: break-all; }
.avatar { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto; overflow: hidden; background: linear-gradient(135deg, var(--accent), var(--accent-ink)); color: #fff; display: grid; place-items: center; font-family: "Fraunces", serif; font-size: 1.5rem; font-weight: 600; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: 88px; height: 88px; font-size: 1.9rem; }
.dash__nav { display: flex; flex-direction: column; gap: .25rem; }
.dnav { text-align: left; background: none; border: 0; border-radius: 9px; padding: .65rem .85rem; font-family: "Inter", sans-serif; font-size: .92rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; transition: .15s var(--ease); }
.dnav:hover { background: var(--paper-2); color: var(--ink); }
.dnav.is-active { background: var(--accent); color: #fff; }
.dash__main { min-width: 0; }
.dtab { display: none; }
.dtab.is-active { display: block; }
.dtab__title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1.3rem; }
.dtab__sub { font-size: 1.15rem; margin: 1.8rem 0 1rem; }
.prof-photo { display: flex; align-items: center; gap: 1.3rem; margin-bottom: 1.8rem; }
.dform { display: flex; flex-direction: column; gap: 1rem; max-width: 460px; }
.fld { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--ink); }
.fld input, .fld textarea { font-family: "Inter", sans-serif; font-weight: 400; font-size: .95rem; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(122,31,43,.1); }
.dform .btn { align-self: flex-start; }
@media (max-width: 780px) {
  .dash { grid-template-columns: 1fr; }
  .dash__side { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem; }
  .dash__id { display: flex; align-items: center; gap: .8rem; text-align: left; }
  .dash__id .avatar { margin: 0; width: 52px; height: 52px; font-size: 1.2rem; }
  .dash__name { margin: 0; }
  .dash__nav { flex-direction: row; flex-wrap: wrap; width: 100%; gap: .4rem; }
  .dnav { flex: 1; text-align: center; min-width: 110px; }
  #logoutBtn { width: auto; }
}

.acct-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.acct-stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.acct-stat__n { display: block; font-family: "Fraunces", serif; font-size: 1.6rem; font-weight: 600; }
.acct-stat__l { color: var(--ink-soft); font-size: .85rem; }
.acct-section-title { font-size: 1.5rem; margin-bottom: 1.1rem; }
.acct-orders { display: flex; flex-direction: column; gap: 1.1rem; }
.ocard { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.ocard__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.ocard__no { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.15rem; display: block; }
.ocard__meta { font-size: .82rem; color: var(--ink-soft); }
.ocard__total { font-family: "Fraunces", serif; font-weight: 600; color: var(--accent); }
.ocard__items { color: var(--ink-soft); font-size: .9rem; margin: 1rem 0 0; }
.ocard__addr { color: var(--ink-soft); font-size: .85rem; margin: .4rem 0 0; }

/* status tracker */
.track { display: flex; gap: .3rem; }
.track__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem; position: relative; }
.track__step::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.track__step:first-child::before { display: none; }
.track__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); position: relative; z-index: 1; }
.track__lbl { font-size: .68rem; color: var(--ink-soft); text-align: center; }
.track__step.is-done .track__dot { background: var(--ok); }
.track__step.is-done::before { background: var(--ok); }
.track__step.is-now .track__dot { box-shadow: 0 0 0 4px rgba(55,96,44,.18); }
.track__step.is-now .track__lbl { color: var(--ink); font-weight: 600; }
.track--cancelled { color: #a5382a; font-weight: 600; font-size: .9rem; }
@media (max-width: 560px) { .acct-stats { grid-template-columns: 1fr 1fr; } .track__lbl { font-size: .6rem; } }

/* cookie consent */
.consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 120; background: var(--ink); color: #efeae2; border-radius: 14px; padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; box-shadow: 0 14px 40px -12px rgba(0,0,0,.5); max-width: 760px; margin: 0 auto; flex-wrap: wrap; }
.consent__text { font-size: .86rem; line-height: 1.5; flex: 1; min-width: 220px; }
.consent__text a { color: var(--gold); text-decoration: underline; }
.consent__actions { display: flex; gap: .5rem; flex: none; }
.consent .btn--ghost { color: #efeae2; border-color: rgba(255,255,255,.4); }
.consent .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
@media (max-width: 560px) { .consent { flex-direction: column; align-items: stretch; left: .7rem; right: .7rem; } .consent__actions { justify-content: flex-end; } }

/* ---- forms ---- */
.form-page { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: start; }
.form-page__intro p { color: var(--ink-soft); }
.form-page__hours { margin-top: 1.5rem; padding: 1.2rem 1.4rem; background: var(--paper-2); border-radius: var(--radius); }
.form-page__hours p { margin: .2rem 0; font-size: .92rem; }
.card-form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow); }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; position: relative; }
.field label { font-size: .82rem; font-weight: 500; color: var(--ink); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field input, .field select, .field textarea {
  font-family: "Inter", sans-serif; font-size: .95rem; color: var(--ink);
  padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper);
  transition: border-color .2s, box-shadow .2s; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(122,31,43,.1); }
.field input.is-invalid, .field select.is-invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.1); }
.field__err { color: #c0392b; font-size: .75rem; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink-soft); margin-bottom: 1rem; cursor: pointer; }
.check input { width: auto; }
.notice { margin-top: 1rem; padding: .9rem 1.1rem; border-radius: var(--radius-sm); font-size: .9rem; }
.notice--ok { background: #e7f0e3; color: #37602c; border: 1px solid #cfe3c7; }
.notice--err { background: #fbe4e0; color: #a5382a; border: 1px solid #f0cfc9; }
.notice code { background: rgba(0,0,0,.06); padding: .05rem .3rem; border-radius: 4px; font-size: .85em; }

/* ---- auth ---- */
.auth { display: flex; justify-content: center; }
.auth__card { width: min(430px, 100%); background: none; border: 0; border-radius: 0; padding: 1rem 0; box-shadow: none; text-align: center; }
.auth__brand { margin-bottom: 1.1rem; }
.auth__brand .brand__mark { width: 48px; height: 48px; font-size: 1.7rem; margin: 0 auto; }
.auth__card h1 { font-size: 1.9rem; }
.auth__sub { color: var(--ink-soft); font-size: .92rem; margin: .5rem 0 1.6rem; }
.auth__card form { text-align: left; }
.auth__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.auth__link { font-size: .85rem; color: var(--accent); }
.auth__alt { margin: 1.3rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.auth__alt a { color: var(--accent); font-weight: 500; }

/* ---- about ---- */
.about-hero { min-height: 44vh; display: flex; align-items: center; background-color: #241413; background-size: cover; background-position: center; }
.about-hero__inner { max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 3rem 1.5rem; color: #fff; }
.about-hero__inner h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 16ch; }
.about-copy { max-width: 62rem; margin: 0 auto; }
.about-lead p { font-size: 1.25rem; line-height: 1.55; color: var(--ink); }
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; margin: 3rem 0; }
.about-split__media { min-height: 320px; border-radius: var(--radius); background-size: cover; background-position: center; }
.about-split__text h2 { font-size: 1.8rem; margin-bottom: 1rem; }
.about-split__text p { color: var(--ink-soft); margin-bottom: 1rem; }
.about-values { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; margin: 3rem 0; }
.value { padding: 1.6rem; background: var(--paper-2); border-radius: var(--radius); }
.value h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.value p { color: var(--ink-soft); font-size: .92rem; margin: 0; }
.about-cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

/* ---- locations page ---- */
.section-head--left { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
.loc-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; margin-bottom: 4rem; }
.loc-card { display: flex; gap: 1.3rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .25s var(--ease), border-color .25s var(--ease); }
.loc-card:hover { box-shadow: var(--shadow); border-color: var(--gold); }
.loc-card__img { flex: none; width: 150px; background-size: cover; background-position: center; background-color: var(--paper-2); }
.loc-card__body { padding: 1.3rem 1.3rem 1.3rem 0; }
.loc-card__body h3 { font-size: 1.35rem; margin-bottom: .3rem; }
.loc-card__addr { color: var(--ink-soft); font-size: .9rem; margin: 0 0 .2rem; }
.loc-card__phone a { color: var(--accent); font-weight: 600; font-size: .92rem; }
.loc-card__hours { color: var(--ink-soft); font-size: .82rem; margin: .3rem 0 .9rem; }
.loc-card__actions { display: flex; gap: .5rem; }

/* ---- contact ---- */
.contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: center; padding: 3rem; background: var(--paper-2); border-radius: var(--radius); }
.contact__text h2 { font-size: 2rem; margin-bottom: .8rem; }
.contact__text p { color: var(--ink-soft); }

/* ---- floating cart button ---- */
.cart-fab {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--accent); color: #fff; border: 0; cursor: pointer;
  padding: .8rem 1.25rem .8rem 1rem; border-radius: 100px;
  font-family: "Inter", sans-serif; font-size: .95rem; font-weight: 600;
  box-shadow: 0 10px 30px -8px rgba(122,31,43,.6);
  transform: translateY(140%); opacity: 0; pointer-events: none;
  transition: transform .35s var(--ease), opacity .3s var(--ease), background .2s;
}
.cart-fab.is-show { transform: none; opacity: 1; pointer-events: auto; }
.cart-fab:hover { background: var(--accent-ink); }
.cart-fab:active { transform: scale(.96); }
.cart-fab__icon { position: relative; display: inline-flex; }
.cart-fab__count {
  position: absolute; top: -8px; right: -9px; min-width: 19px; height: 19px; padding: 0 5px;
  background: #fff; color: var(--accent); border-radius: 10px;
  font-size: .72rem; font-weight: 700; display: grid; place-items: center;
}
.cart-fab.bump { animation: fabbump .4s var(--ease); }
@keyframes fabbump { 0%,100%{transform:none} 35%{transform:scale(1.12)} }
@media (max-width: 560px) {
  .cart-fab { right: 1rem; bottom: 1rem; padding: .75rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .cart-fab { transition: opacity .2s; } .cart-fab.bump { animation: none; } }

/* ---- toast ---- */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translate(-50%, 20px); z-index: 200;
  background: var(--ink); color: #fff; padding: .8rem 1.3rem; border-radius: 100px; font-size: .9rem; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); box-shadow: var(--shadow);
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ---- responsive (app) ---- */
@media (max-width: 900px) {
  .locstrip, .cat-photo-grid { grid-template-columns: repeat(2,1fr); }
  .menu-grid { grid-template-columns: repeat(2,1fr); }
  .form-page { grid-template-columns: 1fr; gap: 1.8rem; }
  .about-split, .contact { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-values { grid-template-columns: 1fr; }
  .loc-cards { grid-template-columns: 1fr; }
  .contact { padding: 2rem; }
}
@media (max-width: 560px) {
  .locstrip { grid-template-columns: 1fr; }
  /* smaller category photos on phones: 2-up, shorter */
  .cat-photo-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .cat-photo { aspect-ratio: 1 / 1; border-radius: 11px; }
  .cat-photo span { font-size: 1rem; padding: .7rem .8rem; }
  .menu-head { flex-direction: column; align-items: flex-start; }
  .loc-card { flex-direction: column; }
  .loc-card__img { width: 100%; height: 160px; }
  .loc-card__body { padding: 1.3rem; }
  .field-row { grid-template-columns: 1fr; }
  .nav__cart { order: -1; }

  /* full-screen cart on phones */
  .cart { width: 100%; max-width: 100%; }
  .cart__head { padding: 1.1rem 1.2rem .8rem; }
  .cart__loc, .cart__type, .cart__delivery, .cart__items, .cart__foot { padding-left: 1.2rem; padding-right: 1.2rem; }
  .cart__foot { padding-bottom: max(1.2rem, env(safe-area-inset-bottom)); }

  /* compact 2-up menu on phones */
  .pg--tight { padding-left: 1rem; padding-right: 1rem; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .dish { border-radius: 11px; }
  .dish__img, .dish__noimg { aspect-ratio: 5/4; }
  .dish__tags { top: .4rem; left: .4rem; gap: .25rem; }
  .dish__tag, .lbl { font-size: .56rem; padding: .16rem .42rem; }
  .course { margin-bottom: 1.8rem; }
  .course__title { font-size: 1.25rem; }
  .dish__body { padding: .65rem .7rem .8rem; gap: .3rem; }
  .dish__head { gap: .35rem; }
  .dish__head h3 { font-size: .92rem; line-height: 1.2; }
  .dish__price { font-size: .9rem; }
  .dish__desc { font-size: .76rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dish__meta { gap: .25rem; }
  .pill { font-size: .6rem; padding: .15rem .4rem; }
  .dish__add { width: 100%; --pad-y: .5rem; font-size: .8rem; }
  .dish--out .btn { width: 100%; font-size: .72rem; }
}
@media (max-width: 380px) {
  .dish__desc { display: none; }
  .dish__head h3 { font-size: .86rem; }
}


/* ============================================================
   Consistent custom dropdowns for ALL form selects
   (native selects looked out of place next to styled inputs)
   ============================================================ */
.field select,
.fld select,
.card-form select,
select.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2355504a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 15px;
  padding-right: 2.5rem;
  cursor: pointer;
  line-height: 1.3;
}
.field select::-ms-expand,
.fld select::-ms-expand { display: none; }
.field select option,
.fld select option { color: var(--ink); background: #fff; }

/* date & time inputs — align with the rest and tint the native picker icon */
.field input[type="date"],
.field input[type="time"],
.fld input[type="date"],
.fld input[type="time"] { cursor: pointer; }
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }