/* DJC ProductArray -- Skeleton
 *
 * Horizontal array of product columns (thumbnail + title + subtitle +
 * description + CTA). Two display modes:
 *
 *   .djc-product-array--inline  -> renders in place inside its host
 *   .djc-product-array--overlay -> full-screen overlay with a backdrop
 *
 * Structural layout only + skeleton defaults. All visual properties
 * are driven by --product-array-* CSS custom properties. The DJC skin
 * lives in /skins/productarray.djc.css.
 *
 * BEM parts:
 *   __overlay-bg          -- backdrop layer (overlay mode only)
 *   __overlay-close       -- close button (overlay mode)
 *   __inner               -- inner content container (z-index above backdrop)
 *   __heading             -- optional heading above the grid
 *   __grid                -- flex row of product columns
 *   __product             -- one product column
 *   __product-thumb       -- product thumbnail image
 *   __product-content     -- title + subtitle + description block
 *   __product-title       -- h3
 *   __product-subtitle    -- h4 (uppercase, accent color)
 *   __product-desc        -- body copy
 *   __product-cta-wrap    -- positioned wrapper for the CTA button
 *   __product-cta         -- the CTA button itself
 */

@import url('skins/productarray.djc.css');


.djc-product-array {
  /* colors */
  --product-array-bg: #444;
  --product-array-bg-image: none;
  --product-array-text: #fff;
  --product-array-title: #fff;
  --product-array-subtitle: #ffd28c;
  --product-array-desc: rgba(255, 255, 255, 0.92);
  --product-array-column-bg: rgba(255, 255, 255, 0.18);
  --product-array-column-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  --product-array-cta-bg: #c4501f;
  --product-array-cta-bg-hover: #a3411a;
  --product-array-cta-text: #fff;
  --product-array-close: #fff;
  --product-array-close-hover: #ffeac2;

  /* typography */
  --product-array-font: inherit;
  /* the compact panel's own title face. deliberately NOT --font-display:
     following the page's display serif left the two titles in a different
     face from every row beneath them. a campaign that wants its serif back
     sets this to var(--font-display) */
  --product-array-title-font: var(--font-2, 'Open Sans'), sans-serif;
  --product-array-heading-size: clamp(28px, 3vw, 40px);
  --product-array-title-size: clamp(20px, 1.6vw, 26px);
  --product-array-subtitle-size: 13px;
  --product-array-desc-size: 15px;
  --product-array-cta-size: 17px;

  /* spacing */
  --product-array-gap: 24px;
  /* column gap */
  --product-array-row-gap: 80px;
  /* clears thumb-above + CTA-below collisions when rows wrap */
  --product-array-grid-top-space: 64px;
  /* clearance between any heading above the grid and the row-1 thumbnails */
  --product-array-column-width: 244px;
  --product-array-column-height: 540px;
  --product-array-column-max-height: 720px;
  --product-array-column-padding: 0 18px 56px;
  --product-array-column-radius: 8px;
  --product-array-thumb-max-height: 140px;
  --product-array-thumb-max-width: 160px;
  --product-array-thumb-offset: -48px;
  /* pulls the thumbnail above the column */
  --product-array-content-margin: 100px;
  /* clears the floating thumbnail */
  --product-array-cta-bottom-offset: -20px;
  /* CTA sits half-out of column bottom */
  --product-array-cta-width: 210px;
  --product-array-cta-height: 42px;
  --product-array-cta-radius: 22px;

  /* description scroll cap -- prevents long lists from blowing out the
     column height. The desc gets its own internal scroll past this limit. */
  --product-array-desc-max-height: 240px;
  --product-array-scrollbar-width: 6px;
  --product-array-scrollbar-thumb: rgba(0, 0, 0, 0.25);

  /* overlay-only */
  --product-array-overlay-tint: rgba(40, 30, 20, 0.65);
  --product-array-overlay-padding: 56px 28px;
}


/* reset */
.djc-product-array *,
.djc-product-array *::before,
.djc-product-array *::after {
  box-sizing: border-box;
}


/* ============================================================
 * INLINE mode (also serves as the base structural layer)
 * ============================================================ */
.djc-product-array {
  display: block;
  width: 100%;
  color: var(--product-array-text);
  font-family: var(--product-array-font);
}

.djc-product-array__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.djc-product-array__heading {
  margin: 0;
  font-size: var(--product-array-heading-size);
  line-height: 1.1;
  color: var(--product-array-title);
  text-align: center;
}

.djc-product-array__grid {
  display: flex;
  flex-wrap: wrap;
  /* row-gap is intentionally larger than column-gap: each card has a
     thumbnail floating ~48px above its top edge and a CTA floating ~20px
     below its bottom edge, so multi-row wraps need >68px between rows
     to keep row N's thumb from colliding with row N-1's CTA. */
  row-gap: var(--product-array-row-gap);
  column-gap: var(--product-array-gap);
  align-items: stretch;
  justify-content: center;
  /* clears the thumbnails on row 1 from whatever sits above the grid
     (typically the array heading). */
  padding-top: var(--product-array-grid-top-space);
}


/* ============================================================
 * Product column
 * ============================================================ */
.djc-product-array__product {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: var(--product-array-column-width);
  min-height: var(--product-array-column-height);
  max-height: var(--product-array-column-max-height);
  padding: var(--product-array-column-padding);
  background: var(--product-array-column-bg);
  border-radius: var(--product-array-column-radius);
  box-shadow: var(--product-array-column-shadow);
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.djc-product-array__product-thumb {
  position: absolute;
  top: var(--product-array-thumb-offset);
  max-height: var(--product-array-thumb-max-height);
  max-width: var(--product-array-thumb-max-width);
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.djc-product-array__product-thumb:hover {
  transform: scale(1.05);
}

/* GIFT/donation thumb (text logo, no book) sits down inside the column instead of floating up */
.djc-product-array__product[data-product-code="GIFT"] .djc-product-array__product-thumb {
  position: relative;
  top: 20px;
  max-height: 90px;
}

.djc-product-array__product[data-product-code="GIFT"] .djc-product-array__product-content {
  margin-top: 30px;
}

.djc-product-array__product-content {
  margin-top: var(--product-array-content-margin);
  width: 100%;
  max-width: 250px;
}

.djc-product-array__product-title {
  margin: 20px auto;
  font-size: var(--product-array-title-size);
  line-height: 1.15;
  font-weight: 600;
  text-transform: none;
  color: var(--product-array-title);
}

.djc-product-array__product-subtitle {
  margin: 0 0 18px;
  font-size: var(--product-array-subtitle-size);
  letter-spacing: 0.25px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--product-array-subtitle);
}

.djc-product-array__product-desc {
  width: 100%;
  max-height: var(--product-array-desc-max-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  font-size: var(--product-array-desc-size);
  line-height: 1.35;
  text-align: left;
  color: var(--product-array-desc);
}

.djc-product-array__product-desc p {
  margin: 0 0 8px;
}

.djc-product-array__product-desc ul {
  padding-left: 20px;
  list-style: disc;
  margin: 0;
}

.djc-product-array__product-desc a {
  color: inherit;
  text-decoration: underline;
}

/* Custom scrollbar inside the descripton column so it reads as part of
   the card surface rather than a stark browser default */
.djc-product-array__product-desc::-webkit-scrollbar {
  width: var(--product-array-scrollbar-width);
}

.djc-product-array__product-desc::-webkit-scrollbar-track {
  background: transparent;
}

.djc-product-array__product-desc::-webkit-scrollbar-thumb {
  background: var(--product-array-scrollbar-thumb);
  border-radius: 3px;
}

.djc-product-array__product-cta-wrap {
  position: absolute;
  bottom: var(--product-array-cta-bottom-offset);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.djc-product-array__product-cta {
  appearance: none;
  border: 0;
  width: var(--product-array-cta-width);
  max-width: calc(100% - 40px);
  height: var(--product-array-cta-height);
  border-radius: var(--product-array-cta-radius);
  background: var(--product-array-cta-bg);
  color: var(--product-array-cta-text);
  font-size: var(--product-array-cta-size);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: background 0.2s ease, transform 0.2s ease;
}

.djc-product-array__product-cta:hover {
  background: var(--product-array-cta-bg-hover);
  transform: translateY(-1px);
}


/* ============================================================
 * OVERLAY mode
 * ============================================================ */
.djc-product-array--overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--product-array-overlay-padding);
  background: var(--product-array-bg);
  background-image: var(--product-array-bg-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow-y: auto;
  animation: djc-product-array-in 0.25s ease both;
}

.djc-product-array--closing {
  animation: djc-product-array-out 0.2s ease both;
}

@keyframes djc-product-array-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes djc-product-array-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.djc-product-array--overlay .djc-product-array__overlay-bg {
  position: absolute;
  inset: 0;
  background: var(--product-array-overlay-tint);
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 0;
}

.djc-product-array--overlay .djc-product-array__inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  padding: 40px 0 20px;
}

.djc-product-array--overlay .djc-product-array__overlay-close {
  position: fixed;
  top: 22px;
  right: 30px;
  z-index: 2;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--product-array-close);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.djc-product-array--overlay .djc-product-array__overlay-close:hover {
  color: var(--product-array-close-hover);
  transform: scale(1.1);
}

body.djc-product-array-open {
  overflow: hidden;
}


/* ============================================================
 * Responsive
 *
 * Desktop   >1100   : auto-wrap (5 across at typical 1280-1440 widths)
 * Laptop    <=1100  : 3 across
 * Tablet    <=820   : 2 across, descriptions hidden in overlay mode
 * Phone     <=560   : 1 column (vertical scroll)
 * ============================================================ */
@media (max-width: 1100px) {
  .djc-product-array__product {
    width: calc((100% / 3) - var(--product-array-gap) * 2 / 3);
    min-width: 220px;
  }
}

@media (max-width: 820px) {
  .djc-product-array--overlay {
    padding: 48px 20px;
  }

  .djc-product-array__product {
    width: calc(50% - var(--product-array-gap) / 2);
  }

  /* overlay: condense each column so 2-up fits a tablet height */
  .djc-product-array--overlay .djc-product-array__product {
    min-height: 320px;
    max-height: none;
    padding-bottom: 28px;
  }

  .djc-product-array--overlay .djc-product-array__product-desc {
    display: none;
  }

  .djc-product-array--overlay .djc-product-array__overlay-close {
    top: 14px;
    right: 16px;
    font-size: 28px;
  }
}

@media (max-width: 560px) {
  .djc-product-array--overlay {
    padding: 64px 16px 40px;
    align-items: flex-start;
  }

  .djc-product-array--overlay .djc-product-array__inner {
    padding: 0;
  }

  .djc-product-array__grid {
    row-gap: 64px;
    column-gap: 0;
    flex-direction: column;
    align-items: center;
  }

  .djc-product-array__product {
    width: 100%;
    max-width: 320px;
    min-width: 0;
    min-height: auto;
    padding: 0 18px 60px;
  }

  /* phone overlay: keep descriptions visible (the column padding gives
     it room) -- the cap on max-height plus inner scroll handles overflow */
  .djc-product-array--overlay .djc-product-array__product-desc {
    display: block;
    max-height: 160px;
  }

  .djc-product-array__heading {
    font-size: clamp(22px, 6vw, 28px);
    padding: 0 20px;
  }
}

/* ==========================================================================
   COMPACT CONFIG  (configType: 'compact')
   the stacked single-select "preorder a resource" picker: a radiogroup of
   product rows + a gift-amount module. these are the resource template's
   .res_prodarr values lifted whole, so a 2026 resource page and a microsite
   render the same picker. paints from campaign-base primitives (--brand-*,
   --color-*, --font-*) so the host page's theme tints it; every token keeps
   a fallback for pages that load the component without campaign-base.
   ========================================================================== */
/* dark semitransparent scrim, not the component's default gold. the .djc skin
   paints the overlay ROOT a gold gradient (--product-array-bg-image), so for
   compact we blank the gold root (0-2-0 beats the root's 0-1-0) and put the
   scrim on the backdrop layer instead -- which is also the click-to-close
   target, so it has to stay full-bleed */
/* the scrim AND the blur ride the root, not the backdrop layer. the root
   animates its opacity on open, and an ancestor mid-animation forms a
   backdrop root -- a backdrop-filter on a child inside one has nothing
   behind it left to sample, so the page stays sharp and only the tint
   lands. on the root itself the page is the backdrop, which is how the
   resource template painted it all along. */
/* the root scrolls here ( the base rule's overflow-y ) rather than the panel:
   the close straddles the panel's top-right corner, and a scrolling panel
   would clip it off */
.djc-product-array--overlay.djc-product-array--compact {
  padding: 34px 26px;
  background: color-mix(in srgb, var(--brand-dark, #101a34) 45%, transparent);
  background-image: none;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}

/* still the full-bleed click-to-close target, just no longer painted */
.djc-product-array--compact .djc-product-array__overlay-bg {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* __inner IS the light card in this config -- the panel re-scopes the ink
   trio off the brand so copy stays legible on any campaign palette */
.djc-product-array--compact .djc-product-array__inner {
  --ink-strong: color-mix(in oklab, var(--brand-dark, #101a34), black 40%);
  --ink: color-mix(in oklab, var(--brand-dark, #101a34), white 12%);
  --ink-muted: color-mix(in srgb, var(--brand-dark, #101a34) 52%, white);

  display: flex;
  flex-direction: column;
  gap: 16px;
  /* margin:auto rather than the root's align-items, so a panel taller than
     the viewport still scrolls from its top edge instead of clipping */
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: auto;
  /* visible so the close can straddle the corner; the root scrolls now */
  overflow: visible;
  /* the close is out of flow, so the title is the first row and this is all
     the headroom it needs */
  padding: 26px 22px 26px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand-dark, #101a34) 4%, white);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--brand-dark, #101a34) 40%, transparent);
  text-align: left;
}

/* the backdrop fades (base keyframes on the root); the panel rises to meet it */
.djc-product-array--overlay.djc-product-array--compact .djc-product-array__inner {
  animation: djc-product-array-compact-rise .32s cubic-bezier(.22, 1, .36, 1) both;
}

.djc-product-array--closing.djc-product-array--compact .djc-product-array__inner {
  animation: djc-product-array-compact-sink .2s ease both;
}

@keyframes djc-product-array-compact-rise {
  from {
    transform: translateY(14px) scale(.97);
  }

  to {
    transform: none;
  }
}

@keyframes djc-product-array-compact-sink {
  from {
    transform: none;
  }

  to {
    transform: translateY(14px) scale(.97);
  }
}

/* the close sits in the panel's own top-right corner, where it reads as
   part of the dialog instead of floating off in the viewport corner.
   sticky rather than absolute so it stays reachable when a short viewport
   makes the panel scroll, and it sits in flow so a long heading can never
   run underneath it */
.djc-product-array--compact .djc-product-array__overlay-close {
  /* a coin straddling the panel's outside corner: out of flow, so the title
     starts at the top of the card instead of below a 44px close row */
  position: absolute;
  top: -16px;
  right: -16px;
  bottom: auto;
  left: auto;
  align-self: auto;
  z-index: 3;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-dark, #101a34) 4%, white);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-dark, #101a34) 34%, transparent);
  font-size: 20px;
  line-height: 1;
  color: var(--ink, #374151);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.djc-product-array--compact .djc-product-array__overlay-close:hover {
  background: #fff;
  color: var(--ink-strong, #1f2937);
  transform: scale(1.06);
}

/* the config focuses this on open so the dialog owns the keyboard. that is
   a programmatic focus, not a keyboard one, and the ring it draws reads as
   a stray box -- keep it only when someone actually tabs here */
.djc-product-array--compact .djc-product-array__overlay-close:focus:not(:focus-visible) {
  outline: none;
}

/* inline placement: the same card, no fixed layer, no backdrop, no motion */
.djc-product-array--inline.djc-product-array--compact {
  padding: 0;
  background: none;
}

.djc-product-array--inline.djc-product-array--compact .djc-product-array__inner {
  max-height: none;
  overflow: visible;
  margin: 0 auto;
}

/* the campaign display face, upright -- the host page's h2 rules still
   supply any uppercasing, as they did for the template's own title */
.djc-product-array__compact-title {
  margin: 0;
  font-family: var(--product-array-title-font);
  font-size: 27px;
  font-style: normal;
  font-weight: 400;
  /* display sizes need tighter leading than the inherited body value, which
     opened a visible gap between the two lines of a wrapping title */
  line-height: 1.15;
  text-align: center;
  color: var(--ink-strong, #1f2937);
}

.djc-product-array__compact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

/* one selectable product row */
.djc-product-array__prow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: white;
  box-shadow: var(--shadow-chip, 0 2px 10px rgb(16 26 52 / 0.08));
  cursor: pointer;
  transition: all .2s ease-in-out;
}

.djc-product-array__prow.is-selected {
  border-color: var(--color-1, #f15d26);
  background: color-mix(in srgb, var(--brand-1, #f15d26) 7%, white);
}

/* keyboard-only; the rows are tabindex=0 and would otherwise land silently */
.djc-product-array__prow:focus-visible {
  outline: 2px solid var(--color-1, #f15d26);
  outline-offset: 2px;
}

.djc-product-array__prow-tile {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  padding: 4px;
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--font-2, 'Open Sans'), sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  color: white;
  /* hex first -- colour-mix-less browsers keep a solid brand tile */
  background: var(--brand-1, #f15d26);
  background: linear-gradient(135deg, var(--color-1a, #f15d26), var(--color-1b, #b41111));
}

/* authored icon art -- the image owns the tile, no gradient behind it */
.djc-product-array__prow-tile--img {
  padding: 0;
  background: none;
}

.djc-product-array__prow-tile-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.djc-product-array__prow-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.djc-product-array__prow-name {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink-strong, #1f2937);
}

.djc-product-array__prow-badge {
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--color-3, #f5992f);
  color: color-mix(in oklab, var(--color-3, #f5992f), black 65%);
}

.djc-product-array__prow-blurb {
  display: block;
  font-size: 15px;
  line-height: 1.45;
  /* --ink, not --ink-muted -- this copy is load-bearing, not a caption */
  color: var(--ink, #374151);
}

.djc-product-array__prow-choices {
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin-top: 6px;
}

/* the format chips, sized for the light panel. 36px keeps the chip a
   thumb-friendly target -- these pick DVD vs CD, so a mis-tap ships the
   wrong format */
.djc-product-array__choice {
  height: 36px;
  padding: 0 14px;
  border: 2px solid color-mix(in srgb, var(--brand-dark, #101a34) 18%, white);
  border-radius: 999px;
  background: white;
  font-family: var(--font-2, 'Open Sans'), sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .4px;
  white-space: nowrap;
  color: var(--ink-muted, #6b7280);
  cursor: pointer;
  transition: all .2s ease-in-out;
}

.djc-product-array__choice.is-active {
  border-color: var(--color-1, #f15d26);
  color: var(--color-1, #f15d26);
  background: color-mix(in srgb, var(--brand-1, #f15d26) 8%, white);
}

.djc-product-array__prow-radio {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--brand-dark, #101a34) 22%, white);
  background: white;
  color: transparent;
  font-size: 11px;
  transition: all .2s ease-in-out;
}

.djc-product-array__prow.is-selected .djc-product-array__prow-radio {
  border-color: var(--color-1, #f15d26);
  background: var(--color-1, #f15d26);
  color: white;
}

/* the gift module: the active tier's checkout copy, its suggested amounts +
   the blank custom field, the minimum, and the submit */
.djc-product-array__compact-module {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 15px;
  border-radius: 12px;
  background: white;
  box-shadow: var(--shadow-chip, 0 2px 10px rgb(16 26 52 / 0.08));
}

.djc-product-array__compact-module-sub {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-2, #6d1f63);
}

/* a tier with no subtitle would otherwise leave the column gap behind */
.djc-product-array__compact-module-sub:empty {
  display: none;
}

.djc-product-array__compact-module-title {
  margin: 0;
  font-family: var(--product-array-title-font);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink-strong, #1f2937);
}

/* the mounted DJC_GiftArray runs its own compact configuration; sizes come
   from that component, only the palette is re-scoped here -- selected
   amounts ride brand-1, the submit rides the give ember */
.djc-product-array__compact-giftarray {
  margin-top: 2px;
}

.djc-product-array__compact-giftarray .djc-gift-array {
  --ga-border: color-mix(in srgb, var(--brand-dark, #101a34) 15%, white);
  --ga-border-hover: var(--color-1, #f15d26);
  --ga-border-selected: var(--color-1, #f15d26);
  --ga-bg-selected: var(--color-1, #f15d26);
  --ga-accent: var(--color-1, #f15d26);
  --ga-accent-soft: color-mix(in srgb, var(--brand-1, #f15d26) 8%, white);
}

/* preset amounts flip white-on-brand when selected; the other tile keeps
   its light fill so the typed value stays ink */
.djc-product-array__compact-giftarray .djc-gift-array__tile.is-selected .djc-gift-array__amount {
  color: white;
}

.djc-product-array__compact-giftarray .djc-gift-array__tile--other.is-selected {
  background: white;
}

.djc-product-array__compact-giftarray .djc-gift-array__tile--other.is-selected .djc-gift-array__amount {
  color: var(--ink-strong, #1f2937);
}

.djc-product-array__compact-giftarray .djc-gift-array__submit {
  background: var(--color-3b, #f15d26);
  background: linear-gradient(120deg, var(--color-3b, #f15d26), color-mix(in oklab, var(--color-3b, #f15d26), black 14%));
  box-shadow: var(--btnshadow, 0 6px 18px rgb(241 93 38 / 0.35));
}

/* phone: the overlay picker goes full screen and the close moves onto the
   light panel. inline placement keeps its card. */
@media only screen and (max-width: 500px) {
  .djc-product-array--overlay.djc-product-array--compact {
    padding: 0;
  }

  /* full bleed, so there is no outside corner to hang the close off -- it
     comes back inside and the panel scrolls itself again */
  .djc-product-array--overlay.djc-product-array--compact .djc-product-array__inner {
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    overflow-y: auto;
    border-radius: 0;
    padding: 58px 16px calc(20px + env(safe-area-inset-bottom, 0px)) 16px;
  }

  .djc-product-array--compact .djc-product-array__overlay-close {
    position: fixed;
    top: 10px;
    right: 10px;
  }
}