/* Chain hub front-end styling — extracted out of includes/chain-public-head.php's and
   includes/chain-public-footer.php's own inline <style> blocks into this external, cacheable
   file (same pattern as the main site's assets/css/style.css). Only the small, genuinely
   per-site/dynamic part (the :root color/font custom properties, driven by chain_style()) stays
   inline in chain-public-head.php — everything here just reads those via var(--...) and needs no
   PHP of its own, so it doesn't need to be re-sent on every single page load. */

/* Search box: stores directly (chain_stores.name), plus items/categories from every synced
   store's own menu (chain_store_search_index) — see chain-search.php. Directory categories
   (the filter chips below) are matched client-side instead, no request needed for those. */
.chain-search-wrap { position: relative; margin: 16px 0; }
.chain-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.85rem; pointer-events: none; }
html[dir="rtl"] .chain-search-icon { left: auto; right: 16px; }
.chain-search-wrap input {
  width: 100%; padding: 12px 16px 12px 40px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: 0.9rem; font-family: var(--font-body);
}
html[dir="rtl"] .chain-search-wrap input { padding: 12px 40px 12px 16px; }
.chain-search-wrap input:focus { outline: none; border-color: var(--primary); }
.chain-search-results {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18); max-height: 60vh; overflow-y: auto; padding: 6px;
}
.chain-search-results.open { display: block; }
.chain-search-group-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 8px 10px 2px; }
.chain-search-result { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--text); cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-family: var(--font-body); font-size: 0.85rem; }
html[dir="rtl"] .chain-search-result { text-align: right; }
.chain-search-result:hover, .chain-search-result.active { background: rgba(128,128,128,0.12); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.chain-search-result img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--line); }
.chain-search-result .label { font-weight: 600; }
.chain-search-result .hint { color: var(--muted); font-size: 0.78rem; }
.chain-search-scope { display: flex; gap: 6px; margin: 8px 0 4px; flex-wrap: wrap; }
.chain-search-scope-pill {
  padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: none;
  color: var(--muted); font-size: 0.76rem; font-family: var(--font-body); cursor: pointer;
}
.chain-search-scope-pill.active { background: var(--primary); border-color: var(--primary); color: var(--background); }
#chain-map { height: 360px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); margin: 20px 0; }
/* Leaflet's own panes use z-index up to 1000 — capped here so the map never floats above
   this page's header chrome. */
#chain-map .leaflet-pane, #chain-map .leaflet-top, #chain-map .leaflet-bottom { z-index: 10; }
.chain-store-link { text-decoration: none; color: inherit; display: block; }
.chain-category-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.chain-category-chip {
  padding: 6px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-size: 0.85rem; cursor: pointer; font-family: var(--font-body);
}
.chain-category-chip.active { background: var(--primary); color: var(--background); border-color: var(--primary); }
/* The chip's icon was inheriting the chip's small 0.85rem text size with no gap from the label,
   making it read as a faint smudge rather than a distinct glyph — sized up and given breathing
   room from the label so it's actually legible at a glance. */
.chain-category-chip i { font-size: 1rem; margin-right: 6px; vertical-align: -1px; }
.chain-sale-badge {
  position: absolute; top: 6px; left: 6px; z-index: 1; background: #A8412E; color: #fff;
  font-size: 0.68rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; letter-spacing: 0.02em;
}
.item-card.chain-fixed-card .photo-wrap { position: relative; }
.chain-offer-line { color: #A8412E !important; font-weight: 600; }
.chain-collection-section { margin: 28px 0; }
.chain-collection-title { font-family: var(--font-heading); font-size: 1.15rem; margin: 0 0 12px; }
.chain-store-link[hidden] { display: none; }
/* Every store card the same size regardless of how much text it holds — the grid's default
   row-by-row equal-height (align-items:stretch) only matched cards within the same row, so a
   short card two rows down from a long one still looked mismatched. This only pins a HEIGHT
   per template and clamps text lines to fit it — it must NOT set display/flex-direction, since
   every template already sets its own (a flex ROW for classic/compact — photo beside text — a
   flex COLUMN for grid/cards/magazine/modern — photo on top); overriding that here previously
   forced classic's row layout into a column and broke it. */
.chain-store-link { height: 100%; }
/* Grew by one text-line's worth (~22px) in each tier below — address and hours are now two
   separate lines instead of one combined line (offer-or-tagline / address / hours = up to 3
   desc lines under the name, 4 total), so the fixed budget needs the extra room to match. */
.item-card.chain-fixed-card { height: 134px; overflow: hidden; }
.item-card.chain-fixed-card .info { min-height: 0; justify-content: center; }
.item-card.chain-fixed-card .info h3 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.item-card.chain-fixed-card .info p.desc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.template-grid .item-card.chain-fixed-card, .template-cards .item-card.chain-fixed-card, .template-modern .item-card.chain-fixed-card { height: 282px; overflow: visible; }
.template-grid .item-card.chain-fixed-card .info, .template-cards .item-card.chain-fixed-card .info, .template-modern .item-card.chain-fixed-card .info { justify-content: flex-start; }
.template-magazine .item-card.chain-fixed-card { height: 322px; overflow: visible; }
.template-magazine .item-card.chain-fixed-card .info { justify-content: flex-start; }
.template-compact .item-card.chain-fixed-card { height: auto; min-height: 52px; overflow: visible; }
.chain-open-status-open { color: #3E6153 !important; }
.chain-open-status-closing_soon { color: #B8893F !important; }
.chain-open-status-closed { color: #A8412E !important; }
/* Collection "small icon" display — a compact tappable logo + name, for collections set to
   icon_size='small' instead of the full card. */
.chain-store-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; text-align: center; flex-shrink: 0; }
.chain-store-icon-photo-wrap { position: relative; width: 64px; height: 64px; }
.chain-store-icon-photo-wrap img { width: 100%; height: 100%; border-radius: 16px; object-fit: cover; background: var(--line); }
.chain-sale-badge-small { position: absolute; top: -4px; right: -4px; padding: 2px 5px; font-size: 0.6rem; }
.chain-store-icon-name { font-size: 0.78rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Collection layout: grid (default, uses .item-grid as-is) vs carousel (one horizontally
   scrolling row) — same row works for both big cards and small icons since it's just a flex row
   with scroll-snap. No prev/next buttons any more — they used to eat into the row's own width
   (a real, reported complaint: "like cropping from the site"). mandatory (not proximity) snap
   means a swipe always comes to rest on a card's own edge, never stopped mid-card/cropped —
   "stop at the end of the store logo" — correct however many cards fit at a given screen width. */
.chain-collection-carousel-wrap { display: flex; align-items: center; gap: 6px; }
.chain-collection-carousel {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
  flex: 1; min-width: 0;
  /* Scrollable, but the scrollbar itself is hidden — swipe/drag scrolling is the primary way
     anyone actually scrolls this row, so the bar underneath was just visual clutter. */
  scrollbar-width: none; -ms-overflow-style: none;
}
.chain-collection-carousel::-webkit-scrollbar { display: none; }
.chain-collection-carousel .chain-store-link:not(.chain-store-icon) { flex: 0 0 220px; scroll-snap-align: start; }
.chain-collection-carousel .chain-store-icon { scroll-snap-align: start; }
/* Custom homepage banners (chain_hub_banners) — image (default), text, video, or embed. Each
   rendered banner is wrapped in .chain-hub-banner-slide (a plain <div> normally, or an <a> when
   the banner has a click-through link) so the rotation JS has one consistent element to toggle
   regardless of which block type is inside it. */
.chain-hub-banner-wrap { position: relative; margin-bottom: 16px; border-radius: 16px; overflow: hidden; }
.chain-hub-banner-slide { display: none; }
.chain-hub-banner-slide.active { display: block; }
/* Full image, no crop — a fixed height + object-fit:cover here previously sliced off whatever
   didn't fit a 220px band, which mangled any banner not shot at roughly that exact aspect
   ratio. Natural height (scaled to the wrap's own width) shows the whole image on any screen
   size instead, no separate mobile rule needed since width:100% already scales down with it. */
.chain-hub-banner-img { width: 100%; height: auto; display: block; }
.chain-hub-banner-video { position: relative; width: 100%; padding-top: 56.25%; background: #000; }
.chain-hub-banner-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* A Reel/Short (see is_portrait_video_url() in includes/functions.php) — 9:16 instead of the
   16:9 box above, and capped/centered instead of stretching full-width, since a full-width
   portrait box on a wide (desktop/laptop) screen would otherwise end up taller than the screen
   itself. padding-top:0 cancels the width-relative padding-top hack above — that trick can only
   ever cap WIDTH (a percentage of it), so on a wide screen where width itself isn't the limiting
   factor, the resulting height had no ceiling at all. aspect-ratio keeps the 9:16 shape while
   letting max-height actually be the limiting constraint on a tall/wide viewport, with max-width
   as a matching floor for a narrow one — the browser picks whichever of the two actually binds. */
.chain-hub-banner-video.portrait {
  width: auto; max-width: 380px; max-height: 640px; aspect-ratio: 9 / 16; margin: 0 auto; padding-top: 0;
}
/* The base rule's iframe is position:absolute, sized against the parent's padding-top-driven
   height — with that replaced by aspect-ratio here, the parent has real height on its own, so
   the iframe can just be a normal block filling it instead of needing to be pulled out of flow. */
.chain-hub-banner-video.portrait iframe { position: static; width: 100%; height: 100%; }
.chain-hub-banner-text {
  padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); text-align: center;
  font-family: var(--font-heading); font-size: 1.05rem; line-height: 1.5;
}
.chain-hub-banner-embed { width: 100%; }
.chain-hub-banner-embed iframe { width: 100%; border: 0; }
/* Multi-image banner with prev/next nav — same idea as the public menu's own .menu-banner-carousel
   (index.php), extended so each slide can link somewhere different instead of sharing one link for
   the whole block (see render_chain_banner_block_inner() in chain-hub.php: chain_hub_banner_images
   carries its own link_url per row).
   A single-image banner (.chain-hub-banner-img) scales at width:100%/height:auto — its own natural
   proportions, whatever they are, same on any screen. This carousel used to instead crop every
   slide into one fixed 260px-tall box (object-fit:cover), which looked fine on a narrow phone but
   visibly squashed a normal wide banner image down on a wide desktop screen, where 260px is a much
   smaller fraction of the image's actual rendered width. aspect-ratio here (set from the first
   slide's own real dimensions once it loads — see chain-hub.js) makes the box scale proportionally
   the same way a plain <img> already does; object-fit:contain on the slides themselves means a
   later slide with a different ratio than that first one still shows in full (letterboxed, never
   cropped) rather than losing part of the image either way. */
.chain-hub-banner-carousel {
  position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden;
  border-radius: 16px; background: var(--surface);
}
.chain-hub-banner-carousel-track { position: relative; width: 100%; height: 100%; }
.chain-hub-banner-carousel-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
  display: block; text-decoration: none;
}
.chain-hub-banner-carousel-slide.active { opacity: 1; pointer-events: auto; }
.chain-hub-banner-carousel-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.chain-hub-banner-carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px;
  border-radius: 50%; border: none; background: rgba(0,0,0,0.45); color: #fff; font-size: 1.3rem;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.chain-hub-banner-carousel-btn:hover { background: rgba(0,0,0,0.65); }
.chain-hub-banner-carousel-btn.prev { left: 10px; }
.chain-hub-banner-carousel-btn.next { right: 10px; }
html[dir="rtl"] .chain-hub-banner-carousel-btn.prev { left: auto; right: 10px; }
html[dir="rtl"] .chain-hub-banner-carousel-btn.next { right: auto; left: 10px; }
/* Category banner shown above the grid when a category chip is selected */
.chain-category-banner { width: 100%; height: 160px; object-fit: cover; border-radius: 16px; margin: 16px 0; display: none; }
.chain-category-banner.active { display: block; }

/* ---------- Below: includes/chain-public-footer.php's own inline <style>, same extraction. ---------- */

/* In-page browser chrome — a real address bar (hostname/path of the loaded store, plus its
   logo) instead of just a title, a loading spinner while the iframe loads, and a smooth
   fade/scale transition instead of an instant show/hide, so it reads as a proper in-app
   browser rather than a bare iframe dropped on the page. */
.chain-embed-overlay {
  position: fixed; inset: 0; z-index: 999; background: var(--background);
  display: flex; flex-direction: column; opacity: 0; visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
}
.chain-embed-overlay.open { opacity: 1; visibility: visible; }
.chain-embed-bar {
  flex-shrink: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px; padding: 12px 14px; background: transparent; z-index: 2;
}
/* Three independent floating pills instead of one full-width address bar — no domain/URL
   shown, just the store's own name (data-store-name, already carried on every .chain-store-
   link) centered on its own, so this reads as part of the directory's own app rather than a
   browser chrome imitation. The 1fr/auto/1fr grid (not flex space-between) is what keeps the
   center pill genuinely centered regardless of how wide the back/right pills each are. */
.chain-embed-pill-back { justify-self: start; }
.chain-embed-pill-back:has(.chain-embed-hub-name) { padding-right: 14px; }
.chain-embed-pill-center { justify-self: center; padding: 8px 18px; }
.chain-embed-pill-right { justify-self: end; }
.chain-embed-pill {
  display: flex; align-items: center; gap: 6px; background: var(--primary); color: var(--background);
  border-radius: 999px; padding: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.22); min-width: 0;
}
.chain-embed-store-name {
  font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 40vw;
}
/* This directory's own branding (chain-admin -> Settings -> "Show directory logo/name next to
   the back button") — separate from .chain-embed-store-name, which is the STORE being viewed's
   own name in the center pill, not this directory's. */
.chain-embed-hub-logo { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.chain-embed-hub-name {
  font-weight: 600; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 28vw;
}
.chain-embed-bar button, .chain-embed-icon-btn {
  background: rgba(255,255,255,0.15); color: inherit; border: none; border-radius: 50%;
  width: 32px; height: 32px; flex-shrink: 0; cursor: pointer; text-decoration: none;
  display: flex; align-items: center; justify-content: center; font-size: 0.82rem;
}
.chain-embed-bar button:hover, .chain-embed-icon-btn:hover { background: rgba(255,255,255,0.28); }
.chain-embed-body { position: relative; flex: 1; }
.chain-embed-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.chain-embed-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--background); transition: opacity 0.2s ease; opacity: 1;
}
.chain-embed-loading.hidden { opacity: 0; pointer-events: none; }
.chain-embed-spinner {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line);
  border-top-color: var(--primary); animation: chain-embed-spin 0.8s linear infinite;
}
@keyframes chain-embed-spin { to { transform: rotate(360deg); } }

/* Native inline store view — a platform store's own info/menu, fetched from its
   api/store-page.php and rendered here instead of an iframe. Scrolls on its own inside the
   overlay body, same as the iframe it replaces. */
.chain-embed-native { position: absolute; inset: 0; overflow-y: auto; background: var(--background); }
.chain-native-hero { text-align: center; padding: 28px 20px 18px; border-bottom: 1px solid var(--line); }
.chain-native-logo { width: 72px; height: 72px; border-radius: 18px; object-fit: cover; background: var(--surface); margin-bottom: 10px; }
.chain-native-hero h2 { font-family: var(--font-heading); margin: 0 0 4px; }
.chain-native-tagline { color: var(--muted); margin: 0 0 8px; }
.chain-native-status { display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
.chain-native-status-open { background: #1f8a4c22; color: #1f8a4c; }
.chain-native-status-closed { background: #c0392b22; color: #c0392b; }
.chain-native-meta { color: var(--muted); font-size: 0.88rem; margin: 3px 0; }
.chain-native-socials { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.chain-native-socials a {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--line); color: var(--text); text-decoration: none;
}
.chain-native-about { max-width: 640px; margin: 18px auto; padding: 0 20px; color: var(--text); font-size: 0.92rem; line-height: 1.5; white-space: pre-line; }
.chain-native-menu { max-width: 900px; margin: 0 auto; padding: 8px 16px 32px; }
.chain-native-category h3 { font-family: var(--font-heading); margin: 22px 4px 10px; }
.chain-native-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.chain-native-item-card {
  display: flex; flex-direction: column; background: var(--surface); border-radius: 14px; overflow: hidden;
  text-decoration: none; color: var(--text); border: 1px solid var(--line);
}
.chain-native-item-photo-wrap { position: relative; width: 100%; padding-top: 66%; background: var(--line); }
.chain-native-item-photo-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chain-native-badge { position: absolute; top: 8px; left: 8px; font-size: 0.9rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.chain-native-badge + .chain-native-badge { left: 30px; }
.chain-native-item-info { padding: 10px 12px 12px; }
.chain-native-item-info h4 { margin: 0 0 4px; font-size: 0.95rem; }
.chain-native-item-desc { margin: 0 0 6px; color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chain-native-item-price { margin: 0; font-weight: 700; }
.chain-native-price-original { font-weight: 400; text-decoration: line-through; color: var(--muted); margin-right: 4px; }
.chain-native-empty { text-align: center; color: var(--muted); padding: 30px 0; }
.chain-native-item-card { cursor: pointer; }

.chain-embed-cart-count {
  position: absolute; top: -3px; right: -3px; background: #c0392b; color: #fff; border-radius: 999px;
  font-size: 0.62rem; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px; text-align: center; padding: 0 3px;
}
#chain-embed-cart-btn { position: relative; }

/* Shared modal shell for the native store view's item popup and cart/checkout/confirmation
   panel — a bottom sheet on narrow screens, a centered card on wider ones, both scrollable. */
.chain-native-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s;
}
.chain-native-modal-backdrop.open { opacity: 1; visibility: visible; }
.chain-native-modal {
  background: var(--surface); color: var(--text); width: 100%; max-width: 520px;
  max-height: 88vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 20px 20px 24px;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.3);
}
@media (min-width: 640px) {
  .chain-native-modal-backdrop { align-items: center; }
  .chain-native-modal { border-radius: 18px; max-height: 84vh; }
}
.chain-native-modal .close-btn, .chain-native-modal-close {
  background: var(--line); border: none; border-radius: 50%; width: 30px; height: 30px;
  font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--text); float: right;
}
.chain-native-modal h2 { font-family: var(--font-heading); margin: 4px 0 8px; clear: none; }
.chain-native-modal .item-photo { width: 100%; border-radius: 12px; object-fit: cover; max-height: 220px; margin-bottom: 10px; }
.chain-native-modal .option-group { margin: 16px 0; }
.chain-native-modal .option-group h4 { margin: 0 0 8px; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.chain-native-modal .required-tag { font-size: 0.65rem; background: #c0392b22; color: #c0392b; padding: 2px 6px; border-radius: 6px; font-weight: 600; }
.chain-native-modal .option-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid var(--line);
}
.chain-native-modal .option-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; }
.chain-native-modal textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px; font: inherit; background: var(--background); color: var(--text); }
.chain-native-modal .qty-row, .chain-native-modal .option-qty-stepper {
  display: flex; align-items: center; gap: 10px; justify-content: center; margin: 14px 0;
}
.chain-native-modal .qty-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--background);
  color: var(--text); font-size: 1rem; cursor: pointer;
}
.chain-native-modal .btn-primary, .chain-native-cart-modal .btn-primary {
  width: 100%; background: var(--primary); color: var(--background); border: none; border-radius: 12px;
  padding: 13px; font-size: 0.95rem; font-weight: 600; cursor: pointer; margin-top: 6px;
}
.chain-native-modal .btn-primary:disabled { opacity: 0.6; cursor: default; }

/* Cart / checkout / confirmation panel */
.chain-native-cart-line { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.chain-native-cart-line-info { flex: 1; min-width: 0; }
.chain-native-cart-line-info .name { font-weight: 600; font-size: 0.9rem; }
.chain-native-cart-line-info .opts { color: var(--muted); font-size: 0.78rem; }
.chain-native-cart-line-qty { display: flex; align-items: center; gap: 6px; }
.chain-native-cart-remove { background: none; border: none; color: #c0392b; cursor: pointer; font-size: 0.8rem; }
.chain-native-cart-totals { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.88rem; }
.chain-native-cart-totals-row { display: flex; justify-content: space-between; padding: 2px 0; }
.chain-native-cart-totals-row.total { font-weight: 700; font-size: 1rem; margin-top: 4px; }
.chain-native-field { margin: 10px 0; }
.chain-native-field label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 4px; }
.chain-native-field input[type="text"], .chain-native-field input[type="tel"], .chain-native-field select, .chain-native-field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; font: inherit;
  background: var(--background); color: var(--text);
}
.chain-native-fulfillment-toggle { display: flex; gap: 8px; margin: 10px 0; }
.chain-native-fulfillment-toggle button {
  flex: 1; padding: 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--background);
  color: var(--text); cursor: pointer; font-weight: 600; font-size: 0.85rem;
}
.chain-native-fulfillment-toggle button.active { background: var(--primary); color: var(--background); border-color: var(--primary); }
.chain-native-checkout-error { color: #c0392b; font-size: 0.82rem; margin: 8px 0 0; }
.chain-native-confirm { text-align: center; padding: 10px 0; }
.chain-native-confirm i.fa-circle-check { font-size: 2.6rem; color: #1f8a4c; margin-bottom: 10px; }
.chain-native-confirm .order-number { font-size: 1.3rem; font-weight: 700; margin: 4px 0 16px; }
.chain-native-confirm .btn-secondary {
  display: block; width: 100%; text-align: center; margin-top: 8px; padding: 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--background); color: var(--text); text-decoration: none; font-weight: 600;
}

/* Store preview popup — a lightweight "is this the one I want?" step before committing to the
   in-page browser above, modeled on the restaurant site's own item-detail popup. */
.chain-preview-backdrop {
  position: fixed; inset: 0; z-index: 998; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s;
}
.chain-preview-backdrop.open { opacity: 1; visibility: visible; }
.chain-preview-card {
  position: relative; background: var(--surface); color: var(--text); border-radius: 18px;
  padding: 28px 24px 24px; max-width: 340px; width: 100%; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.chain-preview-close {
  position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 1.4rem;
  line-height: 1; color: var(--muted); cursor: pointer; padding: 4px;
}
.chain-preview-logo { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; background: var(--line); margin-bottom: 10px; }
.chain-preview-card h3 { font-family: var(--font-heading); font-size: 1.15rem; margin: 0 0 4px; }
.chain-preview-tagline { color: var(--muted); font-size: 0.85rem; margin: 0 0 8px; }
.chain-preview-offer { color: #A8412E; font-weight: 600; font-size: 0.85rem; margin: 0 0 6px; }
.chain-preview-address, .chain-preview-hours { color: var(--muted); font-size: 0.82rem; margin: 2px 0; }
.chain-preview-video { margin-top: 12px; position: relative; width: 100%; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #000; }
.chain-preview-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.chain-preview-socials { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.chain-preview-socials a {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--line); color: var(--text); text-decoration: none; font-size: 1.05rem;
}
.chain-preview-visit { width: 100%; margin-top: 16px; }