/* =====================================================================================================
   v3-c-quickview.css — the ONE Quick View shell (product now; the pack Quick View re-uses it).
   DG-PRODUCT-PACK-EXPERIENCE-RUNTIME-10 · accepted DG-CATALOG-PACK-PRODUCT-EXPERIENCE-ARCHITECTURE-09 §5.8.

   Sole owner of the Quick View geometry. It replaced three competing layers (v3-storefront.css
   `.modal-product` + `#v3-modal-product`, the unified "portal 1 only" block in v3-design-overrides.css and
   dead v3-mobile-compact.css selectors), which were deleted in the same change.

   - Overlay: fixed, centred, equal safe-area gaps on every size (no bottom sheet), never scrolls.
   - Dialog: grid [media | main]; ≤760px one column [media / main]; phone landscape two columns again.
   - ONE scroll owner: `.c-qv__body`. Panel, media, footer and overlay never scroll.
   - The footer (price · quantity · Add, the guest gate or the status) sits outside the scroller, so the
     primary action is always visible.
   - The image is absolutely fitted inside the media box: it never sets the dialog height.
   - Scroll shadows are pure CSS (background-attachment: local). Reduced motion disables the pop.
   Single-class selectors; `.open` is the shared overlay state toggled by the modal scripts; JS hooks are
   ids/data-* and are never used for styling.
   ===================================================================================================== */

.c-qv-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-items: center;
  align-content: center;
  justify-content: center;
  overflow: hidden;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(20, 25, 21, 0.55);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.c-qv-overlay.open {
  display: grid;
}

.c-qv {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  grid-template-rows: minmax(0, 1fr);
  width: min(940px, 100%);
  min-height: min(520px, 100%);
  max-height: min(780px, 100%);
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--d-modal-depth);
  cursor: default;
  text-align: left;
}

.c-qv__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  cursor: pointer;
}

.c-qv__close:hover {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(23, 29, 24, 0.18), var(--shadow-sm);
}

/* the pack dialog itself (tabindex -1) takes focus on open so it starts at the top; it is not a control */
.c-qv:focus {
  outline: none;
}

.c-qv__close:focus-visible {
  outline: none;
  box-shadow: var(--d-c-focus);
}

.c-qv__close .ico {
  width: 18px;
  height: 18px;
}

.c-qv__media {
  position: relative;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: #fff;
}

.c-qv__media img {
  position: absolute;
  inset: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  object-fit: contain;
}

.c-qv__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--sale);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-qv__badge[hidden] {
  display: none;
}

.c-qv__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.c-qv__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: grid;
  /* max-content rows: in a height-bound scroller, auto rows would collapse clamped (overflow: hidden)
     children such as the phone description to 0 */
  grid-auto-rows: max-content;
  gap: 14px;
  align-content: start;
  padding: 28px 30px 20px;
  /* scroll shadows without extra elements: white covers scroll with the content, the shade stays put */
  background:
    linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) top / 100% 24px no-repeat local,
    linear-gradient(rgba(255, 255, 255, 0), #fff 70%) bottom / 100% 24px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.14), transparent) top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.14), transparent) bottom / 100% 10px no-repeat scroll;
  background-color: #fff;
}

.c-qv__body > * {
  margin: 0;
}

.c-qv__title {
  padding-right: 48px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.c-qv__variant {
  margin-top: -8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.c-qv__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--d-c-ink-2);
}

.c-qv__choose:empty {
  display: none;
}

.c-qv__choose .c-comp-list {
  margin-top: 10px;
}

.c-qv__trust {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--d-c-ink-2);
}

.c-qv__trust li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-qv__trust .ico {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--green-dark);
}

/* CORRECTION-11 — "Ingredients & product information" (editorial grids), the PDP's own label action */
.c-qv__doc[hidden] {
  display: none;
}

/* DG-STOREFRONT-POLISH-PACK-BANNER-19 (Mark): the product Quick View opened from How It Works (the only page with
   `section.d-how`) shows no Ingredients document button; every other Quick View, card and PDP keeps it. */
:root:has(section.d-how) .c-qv__doc {
  display: none;
}

.c-qv__doc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--green-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.c-qv__doc-link:hover {
  border-color: var(--green);
  background: var(--green-softer);
}

.c-qv__doc-link:focus-visible {
  outline: none;
  box-shadow: var(--d-c-focus);
}

.c-qv__doc-link .ico {
  width: 16px;
  height: 16px;
}

.c-qv__details {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 700;
  color: var(--d-c-link);
  text-decoration: none;
}

/* CORRECTION-11A (Mark): a recognisable blue text link — the words underlined, the arrow blue but not underlined */
.c-qv__details-text {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.c-qv__details:hover .c-qv__details-text {
  text-decoration-thickness: 2px;
}

.c-qv__details:focus-visible {
  outline: none;
  box-shadow: var(--d-c-focus);
  border-radius: 6px;
}

.c-qv__details .ico {
  width: 15px;
  height: 15px;
  color: var(--d-c-link);
  text-decoration: none;
}

.c-qv__details[hidden] {
  display: none;
}

.c-qv__foot {
  flex: none;
  display: grid;
  gap: 10px;
  padding: 14px 30px 18px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.c-qv__foot:empty {
  display: none;
}

.c-qv__foot > * {
  margin: 0;
}

.c-qv__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.c-qv__buyrow {
  display: flex;
  /* DG-MOBILE-STOREFRONT-POLISH-20O (Mark): the quantity and Add to cart always sit on their own row under the price,
     whatever the price block's width (it used to share the price row when the price was narrow). */
  flex: 1 1 100%;
  align-items: center;
  gap: 10px;
}

.c-qv__buyrow .qstep {
  flex: none;
}

.c-qv__add {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 44px;
}

/* tablet / phone portrait: one column, media shrinks with the viewport height, the body still scrolls */
@media (max-width: 760px) {
  .c-qv-overlay {
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .c-qv {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    border-radius: 20px;
  }

  .c-qv__media {
    height: clamp(112px, 24dvh, 220px);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .c-qv__media img {
    inset: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
  }

  .c-qv__body {
    padding: 18px 18px 14px;
  }

  .c-qv__title {
    font-size: 21px;
  }

  .c-qv__desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .c-qv__foot {
    padding: 12px 18px 14px;
  }
}

/* DG-MOBILE-STOREFRONT-POLISH-20O (Mark): on phones the Quick View sits at the top with the shared popup gap
   (--d-modal-top-phone) instead of centred; tablets and desktop stay centred. */
@media (max-width: 720px) {
  .c-qv-overlay {
    align-items: start;
    align-content: start;
    padding-top: calc(var(--d-modal-top-phone, 24px) + env(safe-area-inset-top, 0px));
  }
}

/* short phones: the image steps back further so the text and the actions get the height */
@media (max-width: 760px) and (max-height: 700px) {
  .c-qv__media {
    height: clamp(88px, 18dvh, 150px);
  }
}

/* phone landscape: two columns again, small media, the same single scroller */
@media (max-height: 500px) and (orientation: landscape) {
  .c-qv {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
  }

  .c-qv__media {
    height: auto;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }

  .c-qv__buyrow {
    flex-wrap: nowrap;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .c-qv-overlay.open .c-qv {
    animation: c-qv-pop 0.18s ease;
  }
}

@keyframes c-qv-pop {
  from { transform: translateY(8px) scale(0.985); opacity: 0; }
  to { transform: none; opacity: 1; }
}