/* ============================================================
   Catalina's Asian Groceries — hybrid PHP+MySQL (LOS)
   DESIGN = CONCEPT 1 "Flag Pride" (owner's pick, 8/20)
   Philippine flag palette: red · blue · gold, on white. Inter throughout.
   ============================================================ */
:root{
  /* Concept 1 brand — do not drift from these three */
  --red:#CE1127;  --red-d:#a60d1f;
  --blue:#0039A8; --blue-d:#002b80;
  --gold:#FCD116; --gold-d:#d9b100;

  --ink:#181820; --ink-soft:#5c5c66;
  --white:#ffffff; --soft:#f4f5f8; --soft-2:#eceef4;
  --line:#e3e5ec;
  --shadow:0 4px 18px rgba(20,30,60,.06);
  --shadow-lg:0 18px 50px rgba(20,30,60,.10);
  --maxw:1200px; --r:14px;

  /* nav is WHITE in Concept 1 (dark-nav template values remapped) */
  --nav:#ffffff; --nav-2:#ffffff;
  --foot:#181820;   /* footer stays dark - do NOT point it at --nav (Concept 1 nav is white) */
  /* legacy aliases so any template rule still referencing cream keeps working */
  --cream:var(--soft); --cream-2:var(--soft-2);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,Arial,sans-serif;color:var(--ink);background:var(--white);
  line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:800}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.95rem;
  padding:14px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:.2s;white-space:nowrap}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-d);transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#241a06}
.btn-gold:hover{background:var(--gold-d);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--red);color:var(--red)}
.eyebrow{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);margin-bottom:14px}
.section{padding:84px 0}
.section.alt{background:var(--cream)}
.section-head{text-align:center;max-width:640px;margin:0 auto 50px}
.section-head h2{font-size:2.3rem}
.section-head p{color:var(--ink-soft);margin-top:14px}

/* ---------- NAV (Concept 1: white bar, red rule under it) ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--nav);
  border-bottom:3px solid var(--red);box-shadow:0 2px 14px rgba(20,30,60,.08)}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:18px;
  padding:10px 24px}
/* flex-shrink:0 on the anchor as well as the image: without it the anchor collapses and the
   global img{max-width:100%} drags the logo down with it (it hit 0px wide before this). */
.nav-logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-logo img{width:auto;flex-shrink:0}
/* Owner picked the full lockup (logo A). It needs real height for "asian groceries" to stay
   legible, so the desktop nav is sized around it. The round badge takes over on phones. */
.nav-logo .logo-full{height:76px}
.nav-logo .logo-round{height:52px;display:none}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{color:var(--ink-soft);font-weight:600;font-size:.93rem;padding:9px 12px;border-radius:8px;transition:.18s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--red);background:var(--soft)}
.nav-phone{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-weight:700;font-size:.92rem;white-space:nowrap;
  padding:9px 16px;border:2px solid var(--blue);border-radius:999px;transition:.18s}
.nav-phone:hover{background:var(--blue);color:#fff}
.nav-order{background:var(--red);color:#fff;font-weight:700;padding:10px 20px;border-radius:999px;font-size:.92rem;transition:.18s}
.nav-order:hover{background:var(--red-d)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;margin-left:auto;padding:6px}
.nav-toggle span{display:block;width:26px;height:3px;background:var(--ink);border-radius:2px;margin:5px 0;transition:.2s}

/* Philippine flag ribbon — Concept 1 divider under the hero */
.ribbon{display:flex;height:10px}
.ribbon i{flex:1}
.ribbon i:nth-child(1){background:var(--blue)}
.ribbon i:nth-child(2){background:var(--red)}
.ribbon i:nth-child(3){background:var(--gold)}

/* ---------- ANNOUNCEMENT STRIP (below nav, site-wide) ---------- */
.announce{background:linear-gradient(90deg,var(--red),var(--red-d));padding:11px 0}
.announce span{color:#ffd400;font-weight:800;font-size:1.18rem;letter-spacing:.14em;text-transform:uppercase;
  display:inline-block}
@media(max-width:760px){.announce{padding:9px 0}.announce span{font-size:.95rem;letter-spacing:.08em}}

/* ---------- HERO ---------- */
.hero{position:relative;background:radial-gradient(120% 130% at 85% 10%,#ffffff 0%,var(--soft) 48%,#e7eaf3 100%);
  overflow:hidden}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:70px 24px 80px;display:grid;
  grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-copy .addr{display:inline-flex;align-items:center;gap:7px;color:var(--ink-soft);font-weight:600;
  font-size:.92rem;border-bottom:1px solid var(--line);padding-bottom:2px;margin-bottom:18px}
.hero-copy .addr:hover{color:var(--red);border-color:var(--red)}
.hero h1{font-size:3.3rem;letter-spacing:-.03em}
.hero h1 .hl{color:var(--red)}
.hero-sub{font-size:1.12rem;color:var(--ink-soft);margin:20px 0 30px;max-width:30em}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-badges{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}
.hero-badges .chip{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;color:var(--ink-soft)}
.hero-badges .chip b{color:var(--ink)}
.hero-art{position:relative;display:flex;justify-content:center;align-items:center}
.hero-art .disc{position:absolute;width:108%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#e9eefb 60%,transparent 72%);filter:blur(2px)}
.hero-art img{position:relative;width:100%;max-width:480px;filter:drop-shadow(0 26px 36px rgba(20,30,60,.22))}
.hero-float{position:absolute;background:#fff;border-radius:14px;box-shadow:var(--shadow);
  padding:12px 16px;font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:10px}
.hero-float.f1{left:-8px;bottom:38px}
.hero-float .dot{width:9px;height:9px;border-radius:50%;background:#2bb24c;box-shadow:0 0 0 4px rgba(43,178,76,.18)}

/* ---------- SPECIALS ---------- */
.specials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.special-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 8px 26px rgba(20,30,60,.06);transition:.22s;display:flex;flex-direction:column}
.special-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.special-img{height:200px;background:var(--soft);overflow:hidden}
.special-img img{width:100%;height:100%;object-fit:cover}
.special-img.empty{display:flex;align-items:center;justify-content:center;color:#c6cbd8;font-size:2.6rem}
.special-body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column}
.special-price{color:var(--red);font-weight:800;font-size:1.5rem}
.special-title{font-size:1.15rem;font-weight:800;margin:2px 0 8px}
.special-desc{color:var(--ink-soft);font-size:.94rem}
.special-tag{display:inline-block;align-self:flex-start;margin-bottom:12px;background:#fbe9c6;color:#8a5a00;
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:999px}

/* ---------- FOOD SLIDESHOW (gallery-driven) ---------- */
.slideshow{position:relative;max-width:980px;margin:0 auto;border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow);background:#000;aspect-ratio:16/9}
.slideshow .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.slideshow .slide.on{opacity:1}
.slideshow .slide img{width:100%;height:100%;object-fit:cover}
.slideshow .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 28px 22px;color:#fff;font-weight:700;
  background:linear-gradient(transparent,rgba(0,0,0,.7))}
.slide-dots{display:flex;justify-content:center;gap:9px;margin-top:20px}
.slide-dots button{width:10px;height:10px;border-radius:50%;border:0;background:#c6cbd8;cursor:pointer;transition:.2s}
.slide-dots button.on{background:var(--red);transform:scale(1.25)}

/* ---------- ABOUT / CATERING SPLIT ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split img{border-radius:16px;box-shadow:var(--shadow)}
.split.catering{background:var(--ink);color:#fff;border-radius:22px;padding:48px;align-items:center}
.split.catering .eyebrow{color:var(--gold)}
.split.catering h2{font-size:2rem;margin-bottom:14px}
.split.catering p{color:rgba(255,255,255,.72);margin-bottom:24px}
.split.catering img{background:transparent;box-shadow:none}
.feature-list{list-style:none;margin:22px 0}
.feature-list li{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px;color:var(--ink-soft);font-weight:500}
.feature-list li::before{content:"✓";color:#fff;background:var(--red);width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex:none;margin-top:2px}

/* ---------- MAP ---------- */
.map-full{width:100%;height:520px;line-height:0}
.map-full iframe{width:100%;height:520px;border:0;display:block}
@media(max-width:760px){.map-full,.map-full iframe{height:380px}}

/* ---------- PAGE BANNER (inner pages) ---------- */
.page-banner{background:linear-gradient(120% 130% at 80% 10%,#ffffff,var(--soft) 55%,#e7eaf3);
  padding:54px 0 48px;text-align:center;border-bottom:1px solid var(--line)}
.page-banner h1{font-size:2.6rem}
.page-banner p{color:var(--ink-soft);margin-top:12px;max-width:36em;margin-left:auto;margin-right:auto}
.page-banner .addr{display:inline-flex;align-items:center;gap:7px;color:var(--ink-soft);font-weight:600;
  font-size:.92rem;border-bottom:1px solid var(--line);padding-bottom:2px;margin-top:16px}
.page-banner .addr:hover{color:var(--red);border-color:var(--red)}

/* ---------- TEMPLATE "DO NOT PUBLISH" WARNING (delete once the menu is real) ---------- */
.tpl-warn{border:4px dashed #b00;background:repeating-linear-gradient(45deg,#fff3f3,#fff3f3 18px,#ffe3e3 18px,#ffe3e3 36px);
  border-radius:14px;padding:26px 28px;margin-bottom:40px;text-align:center;color:#8a0000}
.tpl-warn-tag{display:inline-block;background:#b00;color:#fff;font-weight:900;letter-spacing:.14em;
  font-size:.9rem;padding:8px 18px;border-radius:999px;margin-bottom:14px}
.tpl-warn-big{font-size:2.2rem;font-weight:900;letter-spacing:.04em;color:#b00;line-height:1.05}
.tpl-warn p{max-width:60ch;margin:12px auto 0;color:#7a1010;font-size:1rem;font-weight:500}

/* ---------- MENU ---------- */
.menu-note{background:#fff7e6;border:1px solid #f1dca8;color:#7a5a12;border-radius:12px;
  padding:14px 20px;font-size:.92rem;font-weight:500;margin-bottom:38px;text-align:center}
.menu-cols{column-count:2;column-gap:48px}
@media(max-width:820px){.menu-cols{column-count:1}}
.menu-cat{break-inside:avoid;margin-bottom:36px;display:inline-block;width:100%}
.menu-cat h2{font-size:1.55rem;color:var(--ink);padding-bottom:10px;margin-bottom:6px;
  border-bottom:3px solid var(--gold);display:flex;align-items:center;gap:10px}
.menu-cat h2 .ic{color:var(--red)}
.menu-cat .cat-note{color:var(--ink-soft);font-size:.86rem;margin:8px 0 6px}
.menu-item{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px dashed #e6dccd}
.menu-item:last-child{border-bottom:0}
.menu-item .nm{font-weight:700;font-size:1rem}
.menu-item .ds{color:var(--ink-soft);font-size:.84rem;font-weight:400;display:block;margin-top:2px}
.menu-item .leader{flex:1;border-bottom:1px dotted #cfc4b4;transform:translateY(-4px);min-width:14px}
.menu-item .pr{font-weight:800;color:var(--red);white-space:nowrap;font-size:1rem}
.size-table{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:.92rem}
.size-table th{text-align:right;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;padding:4px 8px}
.size-table th:first-child{text-align:left}
.size-table td{padding:6px 8px;border-top:1px solid #efe6d8;text-align:right;font-weight:700;color:var(--red)}
.size-table td:first-child{text-align:left;color:var(--ink);font-weight:700}
.size-table td .ds{display:block;color:var(--ink-soft);font-weight:400;font-size:.8rem}
.menu-cta{text-align:center;margin-top:30px}

/* ---------- COUPONS ---------- */
.coupons-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:920px;margin:0 auto}
@media(max-width:680px){.coupons-grid{grid-template-columns:1fr}}
.coupon{position:relative;background:#fff;border:2px dashed var(--red);border-radius:16px;padding:28px 30px;
  display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 26px rgba(20,30,60,.06)}
.coupon .offer{font-size:1.7rem;font-weight:800;color:var(--ink);line-height:1.15}
.coupon .details{color:var(--ink-soft);font-size:.95rem}
.coupon .code{margin-top:10px;align-self:flex-start;background:var(--ink);color:#fff;font-weight:800;
  letter-spacing:.12em;padding:8px 16px;border-radius:8px;font-size:.95rem}
.coupon .exp{font-size:.78rem;color:#a89a86;text-transform:uppercase;letter-spacing:.08em;margin-top:6px}
.coupon .star{position:absolute;top:-12px;right:18px;background:var(--gold);color:#241a06;font-weight:800;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px}

/* ---------- GALLERY PAGE (admin-driven, shares the slideshow photo set) ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:920px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gallery-grid{grid-template-columns:1fr}}
.gallery-item{position:relative;margin:0;border-radius:14px;overflow:hidden;cursor:pointer;
  box-shadow:0 8px 26px rgba(40,22,10,.08);aspect-ratio:4/3;background:var(--cream-2)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;color:#fff;
  font-weight:600;font-size:.88rem;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(14,10,8,.94);display:none;
  align-items:center;justify-content:center}
.lightbox.on{display:flex}
.lightbox img{max-width:88vw;max-height:82vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-cap{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:#e6e2d5;font-weight:600;font-size:.95rem;padding:0 60px}
.lightbox button{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;cursor:pointer;
  width:46px;height:46px;border-radius:50%;font-size:1.3rem;display:flex;align-items:center;justify-content:center;transition:.2s}
.lightbox button:hover{background:var(--red)}
.lb-close{top:22px;right:22px;font-size:1.7rem}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
@media(max-width:560px){.lb-prev{left:8px}.lb-next{right:8px}}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.info-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.info-row .ic{width:42px;height:42px;border-radius:50%;background:var(--cream);color:var(--red);display:flex;
  align-items:center;justify-content:center;font-size:1.1rem;flex:none}
.info-row h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px}
.info-row a,.info-row p{font-weight:600;color:var(--ink)}

/* ---------- FOOTER ---------- */
.foot{background:var(--foot);color:#c9ccd6}
.foot-top{max-width:var(--maxw);margin:0 auto;padding:62px 24px 40px;display:grid;
  grid-template-columns:1.5fr .8fr 1fr 1fr;gap:36px}
.foot h4{color:#fff;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.foot-brand img{height:92px;margin-bottom:18px}
.foot p,.foot a{color:#b9bcc8;font-size:.94rem}
.foot a:hover{color:var(--gold)}
.foot-contact div{margin-bottom:9px}
.hours-row{display:flex;justify-content:space-between;gap:18px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:.92rem}
.hours-row span:first-child{color:#fff;font-weight:600}
.hours-row.closed span:last-child{color:var(--red)}
.foot-social{display:flex;gap:12px;margin-top:8px}
.foot-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;
  align-items:center;justify-content:center;transition:.2s}
.foot-social a:hover{background:var(--red)}
.foot-social svg{width:18px;height:18px;fill:#fff}
.foot-bar{border-top:1px solid rgba(255,255,255,.09);text-align:center;padding:18px;font-size:.82rem;color:#8b8b96}
/* LOS signature — house standard (identical everywhere) */
.footer-powered{text-align:center;padding:12px 24px 22px;display:flex;align-items:center;justify-content:center;gap:8px}
.footer-powered span{font-family:'Inter',sans-serif;font-size:.65rem;letter-spacing:2.5px;text-transform:uppercase;color:#999}
.footer-powered img{height:28px;opacity:.42;filter:brightness(1.5);transition:opacity .25s}
.footer-powered img:hover{opacity:.85}

/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-art{order:-1}
  .hero h1{font-size:2.6rem}
  .hero-cta,.hero-badges{justify-content:center}
  .split,.split.catering{grid-template-columns:1fr;gap:28px}
  .foot-top{grid-template-columns:1fr 1fr}
}
/* Nav collapses to the hamburger at 1160px, not 760px: the full bar (logo + 7 links + phone +
   order pill) measures 1137.7px of content, so with a 15px scrollbar it needs ~1153px of viewport.
   Below that flexbox was squashing the logo image down to 0 width (gone entirely from 761-880px).
   Re-measure this number if the logo art, the link count or the pill labels change. */
@media(max-width:1250px){
  .nav-links,.nav-order{display:none}
  .nav-links.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;
    background:var(--nav-2);padding:14px;gap:4px;box-shadow:0 14px 30px rgba(0,0,0,.4)}
  .nav-links.open a{padding:12px 14px}
  .nav-toggle{display:block}
  .nav-phone{margin-left:auto}
}
/* Phone widths: the logo, phone pill and hamburger have to share one bar, so tighten all three. */
@media(max-width:560px){
  .nav-inner{gap:10px;padding:10px 14px}
  .nav-logo img{height:42px}
  .nav-phone{padding:7px 12px;font-size:.82rem}
}
@media(max-width:760px){
  .specials-grid{grid-template-columns:1fr}
  .section{padding:60px 0}
  .section-head h2{font-size:1.8rem}
  .foot-top{grid-template-columns:1fr}
}

/* ============================================================================
   CATALINA'S — Concept 1 components
   (added after the template rules on purpose; same-specificity rules later in
   the file silently defeat earlier ones, so ORDER MATTERS — rule 1k)
   ============================================================================ */

/* ---------- Language toggle (EN = US flag, never GB) ---------- */
.lang{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;margin-left:4px}
.lang .on,.lang .off{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.8rem;
  letter-spacing:.06em;padding:8px 13px;border-radius:999px;transition:.18s;border:2px solid transparent}
.lang .on{background:var(--blue);color:#fff}
.lang .off{color:var(--ink-soft);border-color:var(--line)}
.lang .off:hover{border-color:var(--blue);color:var(--blue)}
.lang .fi{width:1.15em;height:.85em;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}

/* ---------- Shop by Aisle ---------- */
.aisle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.aisle{background:#fff;border-radius:18px;overflow:hidden;border-top:5px solid var(--blue);
  box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.aisle:nth-child(even){border-top-color:var(--red)}
.aisle:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.aisle-photo{aspect-ratio:4/3;overflow:hidden;background:var(--soft)}
.aisle-photo img{width:100%;height:100%;object-fit:cover;display:block}
.aisle-body{padding:20px 22px 24px}
.aisle-body h3{font-size:1.12rem;font-weight:800;margin-bottom:6px;color:var(--ink)}
.aisle-body p{color:var(--ink-soft);font-size:.92rem;line-height:1.6}

/* ---------- Services band (EBT + Balikbayan) ---------- */
.services{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.service{display:flex;gap:18px;align-items:flex-start;background:#fff;border-radius:18px;
  padding:26px 28px;box-shadow:var(--shadow)}
.service .ico{flex-shrink:0;width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:var(--gold);color:#4a3800;font-size:1.5rem;font-weight:900}
.service h3{font-size:1.08rem;font-weight:800;margin-bottom:6px}
.service p{color:var(--ink-soft);font-size:.93rem;line-height:1.6}

/* ---------- Owner Login pill (house rule 8 — owners log in from phones) ---------- */
.owner-login{display:inline-block;margin-left:10px;padding:4px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:#9a9aa4;transition:.18s;white-space:nowrap}
.owner-login:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- HERO, Concept 1 (rule 1g: FILL THE COLUMN) ---------- */
/* Left and right edges of the column must line up: the paragraph is justified, the chip row is
   space-between, the address block is full-width. Verify against the Honeyspot reference. */
.hero h1{font-size:clamp(2rem,4.4vw,3.35rem);font-weight:900;line-height:1.05;letter-spacing:-.02em}
.hero h1 .hl{color:var(--red)}
.hero-sub{font-size:clamp(1.02rem,1.5vw,1.28rem);font-weight:700;color:var(--ink-soft);margin:10px 0 16px;max-width:none}
.hero-copy-just{text-align:justify;color:var(--ink-soft);line-height:1.75;font-size:1.01rem}
.hero-chips{display:flex;justify-content:space-between;gap:10px;margin:22px 0}
.hero-chips .chip{background:var(--soft);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-weight:700;font-size:.82rem;color:var(--blue);white-space:nowrap}
/* Address: full width, wraps to 2 lines, never clipped */
.hero-addr{display:block;width:100%;margin-top:22px;font-size:clamp(1rem,1.4vw,1.22rem);font-weight:700;
  color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:7px;overflow-wrap:break-word}
.hero-addr:hover{color:var(--red);border-color:var(--red)}
/* Rule 1L: equal-width pills across the group */
.hero-cta{display:flex;gap:14px;margin-top:4px}
.hero-cta .btn{flex:1;justify-content:center;text-align:center}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-d);transform:translateY(-2px)}
/* Hero photo is a real photograph here, not cut-out art — frame it as a card */
.hero-art img{width:100%;max-width:none;border-radius:22px;object-fit:cover;aspect-ratio:6/5;
  box-shadow:0 22px 46px rgba(20,30,60,.20);filter:none}
.hero-art .disc{display:none}

.empty-note{text-align:center;color:var(--ink-soft);font-weight:600;padding:14px 0}

/* Footer quick-links column */
.foot-links h4{color:#fff;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:.85rem;margin-bottom:14px}
.foot-links div{margin-bottom:7px}
.foot-links a{color:#cfd0d8;font-size:.92rem;transition:.18s}
.foot-links a:hover{color:var(--gold)}

/* ---------- Inner-page shared bits ---------- */
/* Rule 1L: pills in a group are IDENTICAL size - never ragged text-sized buttons.
   flex:1 1 0 inside a capped-width row gives equal widths with aligned edges. */
.page-cta{display:flex;gap:14px;margin-top:44px;flex-wrap:wrap;
  max-width:620px;margin-left:auto;margin-right:auto}
.page-cta.left{margin-left:0}
.page-cta .btn{flex:1 1 0;min-width:180px;justify-content:center;text-align:center}
.btn-sm{padding:11px 20px;font-size:.88rem}

/* ---------- GALLERY: natural-aspect masonry (rule 1i — never square-crop) ---------- */
.masonry{column-count:3;column-gap:20px}
.mitem{break-inside:avoid;margin:0 0 20px;position:relative;border-radius:14px;overflow:hidden;
  cursor:zoom-in;box-shadow:var(--shadow);background:var(--soft)}
.mitem img{width:100%;height:auto;display:block;transition:transform .35s}
.mitem:hover img{transform:scale(1.04)}
.mitem figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;color:#fff;
  font-size:.86rem;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.72))}
@media(max-width:920px){.masonry{column-count:2}}

/* ---------- ABOUT ---------- */
.about-split{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.about-copy p{color:var(--ink-soft);line-height:1.8;font-size:1.02rem}
.about-h2{font-size:1.5rem;margin:34px 0 14px}
.about-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.about-list li{position:relative;padding-left:24px;font-weight:700;color:var(--ink);font-size:.96rem}
.about-list li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(252,209,22,.25)}
.about-photo img{width:100%;border-radius:20px;box-shadow:0 18px 40px rgba(20,30,60,.18)}

/* ---------- CONTACT ---------- */
.contact-grid{grid-template-columns:repeat(3,1fr);gap:24px}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 26px;
  box-shadow:var(--shadow)}
.contact-card h3{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.contact-card p{font-size:1.05rem;font-weight:700;line-height:1.6;margin-bottom:14px}
.contact-card a:hover{color:var(--red)}
/* the hours rows are styled for the dark footer — restate them for this light card */
.contact-card .hours-row{border-bottom:1px solid var(--line);font-size:.95rem}
.contact-card .hours-row span:first-child{color:var(--ink);font-weight:700}
.contact-card .hours-row span:last-child{color:var(--ink-soft)}
.contact-card .hours-row.closed span:last-child{color:var(--red);font-weight:700}

/* ============================================================================
   MOBILE OVERRIDES — keep these LAST in the file (rule 1k)
   Verify at a SHORT viewport (390x660), not just 390x844.
   ============================================================================ */
@media(max-width:760px){
  /* Rule 4: NO nav pills on mobile. The nav is logo + language toggle, nothing else.
     The hero carries Order (first CTA) and the phone pill instead. */
  .nav-phone,.nav-order{display:none !important}
  .nav-logo .logo-full{display:none}
  .nav-logo .logo-round{display:block;height:52px}
  .nav-inner{gap:10px;padding:9px 14px}
  .lang .on,.lang .off{padding:7px 11px;font-size:.74rem}

  /* Rule 1k: nothing on mobile gets a viewport or fixed height — every section is
     content-sized so blocks push each other and overlap is impossible. */
  .hero,.section,.services,.split,.hero-inner{height:auto;min-height:0}

  .aisle-grid{grid-template-columns:1fr;gap:18px}
  .services-grid{grid-template-columns:1fr;gap:16px}
  .service{padding:20px 20px}

  /* Rule 1L: stacked pill groups are uniform width, centered — never ragged */
  .hero-cta{flex-direction:column;align-items:center;gap:12px}
  .hero-cta .btn{width:min(320px,86vw);justify-content:center}

  .ribbon{height:8px}
  .owner-login{display:inline-block;margin:8px 0 0}
}
/* Short-viewport guard: Safari's toolbars eat ~180px, so re-check the hero at 390x660. */
@media(max-width:760px) and (max-height:700px){
  .hero{padding-top:26px;padding-bottom:30px}
}

/* new-page mobile rules — appended last so nothing later can defeat them (rule 1k) */
@media(max-width:760px){
  .masonry{column-count:1;column-gap:0}
  .about-split{grid-template-columns:1fr;gap:28px}
  .about-photo{order:-1}
  .about-list{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:16px}
  .page-banner h1{font-size:1.9rem}
  /* rule 1L: stacked pill groups are uniform width, centered */
  .page-cta{flex-direction:column;align-items:center;gap:12px}
  .page-cta .btn{width:min(320px,86vw);min-width:0}
}

/* ============================================================================
   NARROW-PHONE FIX (<=360px) — 2026-08-20
   Ted's iPhone with Large Text / Display Zoom reports a 320px viewport, and the
   hero was CLIPPING on the right: headline, paragraph, chips and address all cut.

   Two things caused it, and one thing hid it:
   1. `.hero-chips` was `justify-content:space-between` with two `white-space:nowrap`
      chips ("We Accept EBT" + "Balikbayan Box Service"). Two unbreakable chips set a
      hard MINIMUM width wider than a 320px screen's 272px content box.
   2. Grid/flex children default to `min-width:auto`, so the hero column could not
      shrink below that minimum.
   3. HIDDEN BY: `.hero{overflow:hidden}` — the overflow never reaches the document,
      so `scrollWidth` never grows and an overflow-x check reports a clean 0px.
      It does not scroll sideways; it silently cuts. Only a RENDER shows it.
      ⚠️ An overflow-x check cannot see inside an `overflow:hidden` ancestor.
   ============================================================================ */
@media(max-width:760px){
  /* let the column actually shrink */
  .hero-inner{grid-template-columns:minmax(0,1fr)}
  .hero-copy,.hero-cta,.hero-chips{min-width:0}
  /* never wider than the container (86vw ignored the parent's padding) */
  .hero-cta .btn{width:min(320px,100%)}
  .page-cta .btn{width:min(320px,100%)}
}
@media(max-width:760px){
  /* Chips WRAP rather than stacking at a fixed breakpoint: side by side while they fit,
     onto a second line only when they do not. No magic number to get wrong, and 390px
     keeps the side-by-side look the owner already approved. */
  .hero-chips{flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0}
  .hero-chips .chip{white-space:normal;text-align:center}
  /* long unbroken strings (address, URLs) must never push the column out */
  .hero-copy,.hero-addr,.hero h1,.hero-sub{overflow-wrap:break-word}
}
@media(max-width:360px){
  .hero h1{font-size:clamp(1.6rem,8vw,2rem)}
}