/*
 * site.css — our rules, loaded after theme.css.
 *
 * theme.css is generated by scripts/build-theme-css.mjs from the capture and is
 * overwritten whenever that runs, so nothing of ours can live in it. This file
 * is hand-written and loads last, which also means it wins ties without
 * needing !important.
 *
 * Keep it small. It exists for gaps the migration itself creates, not as a
 * second theme. Each rule below was carried over from the luxneonartgallery
 * rebuild — same Paris theme, same capture method — where it fixed a problem
 * seen on the built site.
 */

/* ---------------------------------------------------------------------------
 * Media containment
 *
 * The theme constrains images in only a few places (`.rte img`, `.media >
 * img`). Rehosting maps every Shopify size variant to its original — up to
 * 4032px for the product photography — so an image outside those places would
 * otherwise set the page width. Deliberately low specificity, so the theme's
 * own rules still win.
 * ------------------------------------------------------------------------- */
img,
svg,
video,
canvas,
iframe,
embed,
object {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* ---------------------------------------------------------------------------
 * Nothing scrolls sideways
 * ------------------------------------------------------------------------- */
html {
  overflow-x: hidden;
}

.rte table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * Custom elements with no rule of their own
 *
 * An unknown element is `display: inline` until something says otherwise, and
 * these wrap block content.
 * ------------------------------------------------------------------------- */
sticky-header,
animated-images {
  display: block;
}

pickup-availability-preview {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

/* ---------------------------------------------------------------------------
 * Focus visibility
 *
 * Captured sections set `outline: none` in places; keyboard users still need
 * to see where they are.
 * ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(var(--color-foreground, 255, 255, 255), 0.6);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Calendly badge vs. the WhatsApp button
 *
 * /pages/neon-customiser carries Calendly's "Book a Consultation!" badge, which
 * Calendly pins to the bottom-right corner — exactly where the WhatsApp button
 * sits, so one hid the other. Live has the same collision with its WhatsApp
 * app. The WhatsApp button moves up on pages that have the badge.
 * ------------------------------------------------------------------------- */
body:has(.calendly-badge-widget) .wa-fab {
  bottom: 8rem;
}