/* ==========================================================================
   El Noa Noa Supermarket — PUBLIC SHELL
   Site chrome: utility bar, header, department navigation, mobile drawer,
   bottom tab bar and footer.

   Every value comes from a Phase 2 token. This file introduces no colour,
   type size, spacing step, shadow, radius or breakpoint of its own.
   Loaded after components.css on public pages only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. UTILITY BAR
   The thin yellow strip above the header. Dark blue on Noa Noa Yellow, the
   same pairing as the logo lockup.
   -------------------------------------------------------------------------- */

.utility-bar {
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-sm);
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 36px;
  padding-block: var(--space-1);
}

.utility-bar__messages {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
  /* Safety net: the messages are promotional and their length varies by
     language, so anything that does not fit is clipped rather than allowed to
     run underneath the store link. */
  overflow: hidden;
}

.utility-bar__message {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  font-weight: var(--weight-medium);
}

.utility-bar__aside {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.utility-bar a {
  color: inherit;
  text-decoration: none;
  font-weight: var(--weight-semibold);
}

.utility-bar a:hover {
  color: inherit;
  text-decoration: underline;
}

/* Between the phone and the desktop layout there is room for one promotional
   message, not two: at 768px the pair needed 512px against 448px of free space
   and the second one ran under "Find a store". */
@media (max-width: 1023.98px) {
  .utility-bar__messages > * + * {
    display: none;
  }
}

/* On phones the promotional messages are dropped entirely and the bar keeps
   only the store link and the language switcher.
   Hiding just the second message is not enough: the remaining one is a single
   nowrap line that cannot shrink, and in Spanish it is long enough to run
   underneath the aside. The messages are promotional, so they are the right
   thing to lose first; both links remain reachable in the drawer and footer. */
@media (max-width: 767.98px) {
  .utility-bar__messages {
    display: none;
  }

  .utility-bar__inner {
    justify-content: flex-end;
  }
}

/* Below the tablet breakpoint the surviving items must still never collide. */
.utility-bar__aside {
  min-width: 0;
}

.utility-bar__aside .utility-bar__message {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   2. LANGUAGE SWITCHER
   Rendered as links so it works with JavaScript disabled.
   -------------------------------------------------------------------------- */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.lang-switch__item {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: inherit;
  text-decoration: none;
}

.lang-switch__item[aria-current="true"] {
  background: var(--color-on-accent);
  color: var(--color-accent);
}

.lang-switch__item:not([aria-current]):hover {
  background: rgba(12, 36, 85, 0.12);
  text-decoration: none;
}

/* In the footer the switcher sits on brand blue instead of yellow. */
.site-footer .lang-switch__item[aria-current="true"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.site-footer .lang-switch__item:not([aria-current]):hover {
  background: rgba(255, 255, 255, 0.14);
}

/* --------------------------------------------------------------------------
   3. HEADER
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* A sticky header must not eat the whole screen on a short phone viewport, so
   only the main row sticks; the utility bar scrolls away with the page. */
.site-header__main {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-height);
  padding-block: var(--space-3);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

/* The wordmark carries the brand in a header that has no other brand element,
   so it is given real presence on phones too. At 48px it sits comfortably
   between the menu trigger and the two actions without crowding either. */
.site-logo img {
  display: block;
  width: auto;
  height: 48px;
}

@media (min-width: 1024px) {
  .site-logo img {
    height: 56px;
  }
}

/* The search field takes the space the logo and actions leave, and drops to
   its own row below the tablet breakpoint. */
.site-header__search {
  flex: 1 1 auto;
  min-width: 0;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
  margin-inline-start: auto;
}

/* An icon action with a label underneath: account and cart. */
.header-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: var(--space-2);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  transition: var(--transition-colors);
}

.header-action:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.header-action__text {
  display: none;
  line-height: var(--leading-tight);
}

@media (min-width: 1024px) {
  .header-action {
    padding-inline: var(--space-3);
  }

  .header-action__text {
    display: block;
  }
}

.header-action__label {
  display: block;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.header-action__value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* Cart count. Hidden while empty rather than showing a zero. */
.header-action__badge {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 4px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--gray-0);
  font-family: var(--font-heading);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.header-action--cart {
  position: relative;
}

/* Menu trigger, phones and tablets only. */
.menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border-radius: var(--radius);
  color: var(--color-primary);
  flex: 0 0 auto;
}

.menu-trigger:hover {
  background: var(--color-primary-subtle);
}

@media (min-width: 1024px) {
  .menu-trigger {
    display: none;
  }
}

/* Search sits on its own row under the logo until there is room beside it. */
@media (max-width: 1023.98px) {
  .site-header__main {
    flex-wrap: wrap;
  }

  .site-header__search {
    order: 3;
    flex-basis: 100%;
    padding-bottom: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   4. DEPARTMENT NAVIGATION (desktop)
   The blue bar beneath the header. Hidden below lg, where the drawer and the
   bottom tab bar take over.
   -------------------------------------------------------------------------- */

.dept-nav {
  display: none;
  background: var(--color-primary);
}

@media (min-width: 1024px) {
  .dept-nav {
    display: block;
  }
}

/* The list wraps rather than overflowing. The number of departments is bounded
   by ShellService, but names are longer in Spanish and a translated catalog can
   be longer still, so wrapping is the safety net that guarantees the page never
   scrolls sideways. Overflow cannot be used here: it would clip the dropdowns. */
.dept-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.dept-nav__item {
  position: relative;
}

.dept-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--border-width-thick) solid transparent;
  transition: var(--transition-colors);
}

.dept-nav__link:hover,
.dept-nav__item:focus-within > .dept-nav__link {
  background: rgba(255, 255, 255, 0.1);
  color: var(--gray-0);
}

.dept-nav__link[aria-current] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Child categories in a dropdown. Opens on hover and on keyboard focus, so it
   is reachable without a pointer. No JavaScript is involved. */
.dept-nav__panel {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: var(--z-dropdown);
  min-width: 240px;
  padding: var(--space-2);
  margin: 0;
  list-style: none;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease),
              visibility var(--duration-fast) var(--ease);
}

.dept-nav__item:hover > .dept-nav__panel,
.dept-nav__item:focus-within > .dept-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.dept-nav__panel a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-decoration: none;
}

.dept-nav__panel a:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   5. MOBILE DRAWER
   Driven by the Phase 2 modal module: it provides the focus trap, Escape
   handling, scroll lock and focus restoration. Only the presentation is here.
   -------------------------------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  justify-content: flex-start;
}

.drawer[hidden] {
  display: none;
}

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  animation: noa-fade-in var(--duration) var(--ease);
}

.drawer__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(320px, 88vw);
  max-width: 100%;
  height: 100%;
  background: var(--color-surface);
  box-shadow: var(--shadow-xl);
  animation: noa-drawer-in var(--duration-slow) var(--ease-out);
}

@keyframes noa-drawer-in {
  from { transform: translateX(-100%); }
  to   { transform: none; }
}

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-4);
  -webkit-overflow-scrolling: touch;
}

.drawer__footer {
  padding: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-surface-alt);
}

.drawer__section + .drawer__section {
  margin-top: var(--space-6);
}

.drawer__heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.drawer__link:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.drawer__link[aria-current] {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* Child categories are disclosed by the native details element: no JavaScript,
   and it is keyboard accessible for free. */
.drawer__group > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding: var(--space-2);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;
}

.drawer__group > summary::-webkit-details-marker {
  display: none;
}

.drawer__group > summary:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.drawer__group > summary .icon {
  margin-inline-start: auto;
  transition: transform var(--duration-fast) var(--ease);
}

.drawer__group[open] > summary .icon {
  transform: rotate(180deg);
}

.drawer__sublist {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-2) var(--space-6);
}

.drawer__sublist a {
  display: block;
  min-height: var(--tap-target);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

.drawer__sublist a:hover {
  background: var(--color-surface-sunken);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   6. BOTTOM TAB BAR
   The five public destinations from the approved architecture. Phones only.
   -------------------------------------------------------------------------- */

.bottom-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  background: var(--color-surface);
  border-top: var(--border-width) solid var(--color-border);
  /* Clear the home indicator on notched devices. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .bottom-nav {
    display: none;
  }
}

.bottom-nav__link {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--bottom-nav-height);
  padding: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  text-decoration: none;
  position: relative;
}

.bottom-nav__link:hover {
  color: var(--color-primary);
}

.bottom-nav__link[aria-current] {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.bottom-nav__link[aria-current]::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 25%;
  height: 3px;
  border-radius: 0 0 var(--radius-full) var(--radius-full);
  background: var(--color-accent);
}

.bottom-nav__badge {
  position: absolute;
  top: 4px;
  inset-inline-start: 50%;
  margin-inline-start: 2px;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 3px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--gray-0);
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 1;
}

/* The fixed bar would otherwise cover the end of the page. */
@media (max-width: 767.98px) {
  body.has-bottom-nav {
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  margin-top: var(--space-section);
}

/* The meander band that separates the page from the footer, echoing the band
   beneath the wordmark in the logo. */
.site-footer__band {
  height: 24px;
  background-color: var(--color-primary);
  background-image: var(--pattern-meander);
  background-size: var(--pattern-size);
  background-repeat: repeat-x;
  background-position: center;
  filter: none;
}

.site-footer__inner {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-12);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .site-footer__inner {
    /* The brand column is wider than the link columns. */
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: var(--space-10);
  }
}

/* The logo is a blue wordmark on a transparent background, so on the blue
   footer it sits on a white plate rather than being recoloured. */
/* align-self keeps the plate at the width of the logo. Without it the anchor is
   a stretched flex item in the surrounding column and the plate spans the whole
   footer column with the logo alone in one corner. */
.site-footer__logo {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--space-3) var(--space-4);
  background: var(--gray-0);
  border-radius: var(--radius-md);
}

.site-footer__logo img {
  display: block;
  width: auto;
  height: 40px;
}

.site-footer h2,
.site-footer h3 {
  color: var(--color-text-inverse);
}

.footer-heading {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.footer-list a {
  display: inline-block;
  padding-block: var(--space-1);
  color: var(--color-text-on-inverse-muted);
  text-decoration: none;
  font-size: var(--text-sm);
}

.footer-list a:hover {
  color: var(--gray-0);
  text-decoration: underline;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-on-inverse-muted);
}

.footer-contact__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.footer-contact__row .icon {
  color: var(--color-accent);
  flex: 0 0 auto;
  margin-top: 2px;
}

.footer-contact a {
  color: var(--color-text-on-inverse-muted);
}

.footer-contact a:hover {
  color: var(--gray-0);
}

/* Marks data that is still demonstration content. */
.demo-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  background: rgba(253, 195, 0, 0.18);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.site-footer__bottom {
  border-top: var(--border-width) solid var(--color-border-inverse);
  padding-block: var(--space-5);
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-on-inverse-muted);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__legal a {
  color: var(--color-text-on-inverse-muted);
  text-decoration: none;
}

.site-footer__legal a:hover {
  color: var(--gray-0);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   8. NEWSLETTER
   -------------------------------------------------------------------------- */

.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 480px) {
  .newsletter__controls {
    display: flex;
    gap: var(--space-2);
  }

  .newsletter__controls .input {
    flex: 1 1 auto;
  }

  .newsletter__controls .btn {
    flex: 0 0 auto;
  }
}

.newsletter .input {
  /* The field sits on brand blue, so it keeps a light surface for contrast. */
  background: var(--gray-0);
}

.newsletter__note {
  font-size: var(--text-xs);
  color: var(--color-text-on-inverse-muted);
}

.newsletter__feedback {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.newsletter__feedback--ok {
  color: var(--color-accent);
}

.newsletter__feedback--error {
  color: var(--red-100);
}

/* --------------------------------------------------------------------------
   9. SKIP LINK TARGET
   The sticky header must not hide the top of the content when a skip link or
   in-page anchor moves focus there.
   -------------------------------------------------------------------------- */

.site-main {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

/* --------------------------------------------------------------------------
   Home delivery: the promise in the utility bar, the homepage band and the
   cart's progress to free delivery. Shown only while delivery is on.
   -------------------------------------------------------------------------- */
.utility-bar__message--delivery {
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.utility-bar__message--delivery:hover { text-decoration: underline; }

.delivery-band {
  background: linear-gradient(90deg, #0F2A6B, var(--color-primary) 60%, #2F6BFF);
  color: #fff;
}
.delivery-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-4);
}
.delivery-band__icon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--color-accent, #FDC300); color: #2A1B00;
}
.delivery-band__text { flex: 1 1 16rem; display: flex; flex-direction: column; gap: 2px; }
.delivery-band__text strong { font-family: var(--font-heading); font-size: var(--text-lg); }
.delivery-band__text span { font-size: var(--text-sm); color: rgba(255, 255, 255, .82); }

.cart-delivery {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: #EEF3FF;
  color: var(--color-primary);
}
.cart-delivery__text { display: flex; gap: var(--space-2); align-items: center; font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.cart-delivery__bar { display: block; height: 8px; border-radius: 999px; background: rgba(19, 58, 136, .15); overflow: hidden; }
.cart-delivery__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2F6BFF, var(--color-accent, #FDC300)); }
.cart-delivery--done { background: #DCF7E8; color: #065F46; }
.cart-delivery--done .cart-delivery__bar span { background: #10B981; }

/* --------------------------------------------------------------------------
   Announcement pop-up (native <dialog>)
   -------------------------------------------------------------------------- */
.promo-popup {
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-surface, #fff);
  color: var(--color-text);
  box-shadow: 0 30px 80px -20px rgba(15, 29, 61, .55);
}
.promo-popup::backdrop { background: rgba(11, 23, 54, .55); backdrop-filter: blur(2px); }
.promo-popup[open] { animation: promo-popup-in .28s ease-out; }
@keyframes promo-popup-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .promo-popup[open] { animation: none; } }
.promo-popup__image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.promo-popup__body { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-5) var(--space-6) var(--space-6); }
.promo-popup__title { margin: 0; font-size: var(--text-2xl); line-height: 1.15; color: var(--color-text-strong); }
.promo-popup__text { margin: 0; color: var(--color-text-muted); }
.promo-popup__close {
  position: absolute; top: .75rem; right: .75rem; z-index: 1;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--color-text-strong);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.promo-popup__close:hover { background: #fff; }

/* Without a photo the close button sits on the title line; keep them apart. */
.promo-popup:not(:has(.promo-popup__image)) .promo-popup__body { padding-right: 3.5rem; }