@charset "UTF-8";
/* ==========================================================================
   Product popup  —  ported 1:1 from the prototype "Product modal"
   (sugus/css/style.css + responsive.css) onto the WordPress popup DOM.

   The JS shows/hides this by toggling the `hidden` HTML attribute on
   `.sugus-product-popup` (NOT a class). The native <dialog> gave us a backdrop
   and free centering for free; here the overlay element recreates both.

   The JS toggles the `hidden` attribute on `.sugus-product-popup` and adds the
   class `sugus-product-popup-open` on <body>. We animate open/close via
   opacity + visibility + pointer-events (not display, which can't transition),
   and lock page scroll with the body class.
   ========================================================================== */
/* Lock page scroll while the popup is open. */
body.sugus-product-popup-open {
  overflow: hidden;
}

/* --- Fallback variables ---------------------------------------------------
   These are referenced below but are NOT defined by the theme's globals.css
   (they only exist in the prototype's style.css). Safe fallbacks keep the
   popup correct even if the theme never supplies them. Existing theme variables
   are left untouched. */
:root {
  --z-base: 1;
  --font-body: "Atma", "Segoe UI", system-ui, sans-serif;
}

.sugus-product-category-bomboane-gumate {
  --product-chip-bg: #00a94f;
  --product-deep-color:#007F37;
  --product-image-bg: #e0f5e9;
}

.sugus-product-category-jeleuri {
  --product-chip-bg: #45aee3;
  --product-deep-color:#0F5B96;
  --product-image-bg: #e3f2fb;
}

.sugus-product-category-batoane {
  --product-chip-bg: #fba51e;
  --product-deep-color:#9C4A18;
  --product-image-bg: #fef0dc;
}

.sugus-product-category-bezele {
  --product-chip-bg: #f877b4;
  --product-deep-color:#AD1A5E;
  --product-image-bg: #fde9f2;
}

/* --- Overlay / backdrop ---------------------------------------------------
   Replaces the native <dialog> ::backdrop AND the centering the dialog element
   provided. The overlay is always display:grid (so it can transition); the
   closed state is opacity:0 + visibility:hidden + pointer-events:none, which
   keeps it from blocking clicks on the page behind it. The :not([hidden]) rule
   (set by JS) is the open state. */
.sugus-product-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1rem;
  background-color: rgba(43, 21, 104, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  /* Closed / animating-out state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sugus-product-popup:not([hidden]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sugus-product-popup__category {
  width: -moz-max-content;
  width: max-content;
}

.sugus-product-popup__splat {
  position: relative;
  isolation: isolate;
  padding: 12px 28px;
  width: -moz-max-content;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

/* --- Modal box ------------------------------------------------------------ */
.sugus-product-popup__modal {
  position: relative; /* anchor for the absolutely-positioned close button */
  box-sizing: border-box;
  width: min(900px, 100vw - 2rem);
  max-height: min(88vh, 900px);
  padding: 0;
  border: 3px solid var(--color-ink);
  border-radius: var(--radius-lg);
  background-color: var(--color-cream);
  color: var(--color-ink);
  overflow: hidden;
  /* Closed / animating-out state: faded and nudged down */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sugus-product-popup:not([hidden]) .sugus-product-popup__modal {
  opacity: 1;
  transform: translateY(0);
}

/* --- Two-column grid ------------------------------------------------------
   The row is constrained (minmax(0, 1fr)) so the body can actually overflow
   and scroll instead of growing the dialog. min-height:0 on the items is the
   matching half of that fix. */
.sugus-product-popup__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-rows: minmax(0, 1fr);
  height: min(88vh, 900px);
  max-height: min(88vh, 900px);
  min-height: 0;
}

.sugus-product-popup__inner > * {
  min-height: 0;
}

/* --- Left media column ---------------------------------------------------- */
.sugus-product-popup__media {
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background-color: var(--product-image-bg);
  overflow-y: auto;
  min-height: 0;
}

.sugus-product-popup__image {
  max-height: 380px;
  width: auto;
  filter: drop-shadow(0 16px 24px rgba(43, 21, 104, 0.22));
}

/* --- Right body column (scrollable) -------------------------------------- */
.sugus-product-popup__body {
  padding: var(--space-6);
  overflow-y: auto;
  min-height: 0;
  /* Keeps a touch scroll inside the panel from chaining to the page behind. */
  overscroll-behavior: contain;
}
.sugus-product-popup__body h1,
.sugus-product-popup__body h2,
.sugus-product-popup__body h3,
.sugus-product-popup__body h4,
.sugus-product-popup__body h5,
.sugus-product-popup__body h6 {
  color: var(--color-ink);
}

/* --- Title, meta chips ---------------------------------------------------- */
.sugus-product-popup__section-title {
  margin-bottom: var(--space-2);
}

.sugus-product-popup__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
  color: var(--color-ink);
}

.sugus-product-popup__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.sugus-product-popup__meta-item {
  border-radius: var(--radius-pill);
  background-color: var(--product-chip-bg);
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-ui);
}

.sugus-product-popup__chip {
  padding: var(--space-1) var(--space-4);
  background-color: var(--cat-bright);
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-ui);
}

.sugus-product-popup__arome {
  margin-bottom: var(--space-5);
}
.sugus-product-popup__arome ul {
  padding: 0;
  list-style-position: inside;
}

/* --- Excerpt (no source rule — readable body copy) ------------------------ */
.sugus-product-popup__excerpt {
  color: var(--color-ink-soft);
  font-size: var(--text-base);
  line-height: var(--leading-normal, 1.6);
  margin-bottom: var(--space-5);
}

/* --- Raw ACF container (user fills this in) ------------------------------- */
.sugus-product-popup__acf {
  margin-top: var(--space-5);
}

.sugus-product-popup__nutrition-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  border: none;
}
.sugus-product-popup__nutrition-table th,
.sugus-product-popup__nutrition-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid rgba(23, 32, 105, 0.15);
  text-align: left;
  border-left: none;
  border-right: none;
  border-top: none;
}
.sugus-product-popup__nutrition-table th {
  font-weight: var(--weight-body);
  color: var(--color-ink-soft);
}
.sugus-product-popup__nutrition-table td {
  font-weight: var(--weight-ui);
  text-align: right;
  white-space: nowrap;
}

/* --- Circular close button ------------------------------------------------ */
.sugus-product-popup__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-base);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 3px solid var(--color-ink);
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.sugus-product-popup__close:hover {
  background-color: var(--color-cta);
  color: var(--color-ink);
}

.sugus-product-popup__alergeni {
  border-left: 5px solid var(--product-deep-color);
  background-color: var(--product-image-bg);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-ui);
}

.sugus-product-popup__section {
  margin-bottom: var(--space-5);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Tablet: stack the columns, let the whole panel scroll. */
@media (max-width: 980px) {
  .sugus-product-popup__inner {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .sugus-product-popup__media {
    padding: var(--space-5);
  }
  .sugus-product-popup__image {
    max-height: 260px;
  }
}
/* Mobile: full-screen modal, flush to the viewport edges. */
@media (max-width: 760px) {
  /* Override the overlay padding so the 100vw modal fits exactly (the base
     :not([hidden]) rule would otherwise keep the 1rem padding and cause
     horizontal scroll). */
  .sugus-product-popup:not([hidden]) {
    padding: 0;
  }
  .sugus-product-popup__modal {
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border-width: 0;
  }
  .sugus-product-popup__inner {
    max-height: 100vh;
    height: 100vh;
  }
}
/* ==========================================================================
   Loader (shown while AJAX product data is being fetched)
   ========================================================================== */
/* Container: hidden by default, covers the modal and centres the spinner.
   No z-index is set, so the close button (z-index: var(--z-base)) painted
   before it stays clickable on top. Cream background hides prior content. */
.sugus-product-popup__loader {
  display: none;
  position: absolute;
  inset: 0;
  place-items: center;
  background-color: var(--color-cream);
}

.sugus-product-popup[data-loading=true] .sugus-product-popup__loader {
  display: grid;
}

/* Rotating ring — ink top border on a faint track, on-brand with the modal. */
.sugus-product-popup__spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(43, 21, 104, 0.2);
  border-top-color: var(--color-ink);
  border-radius: 50%;
  animation: sugus-popup-spin 0.8s linear infinite;
}

@keyframes sugus-popup-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Respect reduced motion: slow the spin rather than removing it. */
@media (prefers-reduced-motion: reduce) {
  .sugus-product-popup__spinner {
    animation-duration: 1.6s;
  }
}