/* ============================================================
   RESOURCES 2026 -- swipeable product template
   rides the tp campaign boilerplate ( campaign-base.css ).
   page colours/fonts come from the settings theme block; the js
   writes them onto :root and everything below derives itself.
   never hard-code a campaign colour in this file.
   ============================================================ */
@import url('/_assets/css/campaign-base.css');

/* **** ThEMe BRiDGE **** */
/* the js maps settings->theme onto the boilerplate primitives:
     colors.button    -> --brand-1        ( ctas; gradient derived )
     colors.buttonGradient -> --gradientX1 ( authored cta ramp, full
                         linear-gradient(...) string incl. direction )
     colors.accent    -> --brand-2
     colors.important -> --brand-accent + --res-imp
     colors.text      -> --brand-dark     ( ink trio derives )
     colors.link      -> --res-link       ( hover derived below )
     colors.footer    -> --res-footer     ( gradient derived below )
     background       -> --page-bkg + --res-bkg-color
     fonts.hero       -> --font-display
   defaults here keep the page presentable before/without js */
:root {
  --res-link: var(--color-1);
  --res-imp: var(--brand-accent);
  --res-footer: #222222;
  --res-bkg-color: #ffffff;
  --page-bkg: var(--color-n1);
  --font-display: Georgia, 'Times New Roman', serif;

  /* derived -- hover + overlay wash follow whatever the js sets */
  --text-link: var(--res-link);
  --text-link-hover: color-mix(in oklab, var(--res-link), black 18%);
  --res-subtle: color-mix(in oklab, var(--brand-dark) 78%, white);
  --overlay-bkg: color-mix(in srgb, var(--res-bkg-color) 55%, white);
  --footer-bkg: linear-gradient(135deg, var(--res-footer),
      color-mix(in oklab, var(--res-footer), black 30%));

  /* stage + chrome sizing */
  --res-header-h: 76px;
  --stage-height: 65vh;
  --tab-height: 42px;

  /* soft depth, tinted from the ink */
  --shadow-book: 0 18px 40px color-mix(in srgb, var(--brand-dark) 24%, transparent);
  --shadow-chip: 0 2px 6px color-mix(in srgb, var(--brand-dark) 14%, transparent);
}

/* **** ThEMe MoDES **** */
/* dark campaign art ( theme->dark: true ) -- the js stamps this class on
   the wrapper and the ink trio inverts, mirroring the .band--dark pattern */
.res_theme--dark {
  --ink-strong: var(--color-light);
  --ink: rgb(255 255 255 / 0.88);
  --ink-muted: rgb(255 255 255 / 0.72);
  --res-subtle: rgb(255 255 255 / 0.82);
  --text-link: color-mix(in oklab, var(--res-link), white 55%);
  --text-link-hover: color-mix(in oklab, var(--res-link), white 75%);
}

/* white chips keep the brand ink even on dark art */
:where(.res_theme--dark) .res_stage-chevron,
:where(.res_theme--dark) .res_stage-tabs,
:where(.res_theme--dark) .res_slide-custom,
:where(.res_theme--dark) .res_body__nav-item {
  --ink-strong: color-mix(in oklab, var(--brand-dark), black 40%);
  --ink: color-mix(in oklab, var(--brand-dark), white 12%);
  --ink-muted: color-mix(in srgb, var(--brand-dark) 52%, white);
}

/* the frosted overlay + global checkout carry their own light surface */
:where(.res_theme--dark) .res_overlay-inner,
:where(.res_theme--dark) .checkout-overlay-wrapper {
  --ink-strong: color-mix(in oklab, var(--brand-dark), black 40%);
  --ink: color-mix(in oklab, var(--brand-dark), white 12%);
  --ink-muted: color-mix(in srgb, var(--brand-dark) 52%, white);
  --res-subtle: color-mix(in oklab, var(--brand-dark) 78%, white);
  --text-link: var(--res-link);
  --text-link-hover: color-mix(in oklab, var(--res-link), black 18%);
}

/* accent microcopy lifts toward white so it reads over the art */
:where(.res_theme--dark) .res_product__gift-amt {
  color: color-mix(in oklab, var(--color-2), white 55%);
}

/* **** ScRoLL BaR **** */
.resource_wrapper *::-webkit-scrollbar {
  display: none;
}

.resource_wrapper * {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* **** MaiN STyLeS **** */
#main_body.content {
  width: 100%;
  height: 100%;
}

.resource_wrapper {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page-bkg);
  background-size: cover;
  background-repeat: no-repeat;
  /* no background-attachment: fixed -- mobile compositors choke on it
     and ios ignores it; the wrapper spans the page anyway */
}

.resource_wrapper * {
  box-sizing: border-box;
}

/* body scroll lock while an overlay is open */
body.res_noscroll {
  overflow: hidden ! important;
}

.res_unavailable {
  min-height: 40vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 50px 20px;
}

/* **** TeXT STyLeS **** */
.resource_wrapper p {
  font-family: var(--font-2), 'Open Sans', sans-serif;
}

.res_eyebrow {
  font-family: var(--font-2), 'Open Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--res-imp);
}

.res_title {
  font-family: var(--font-display);
  font-size: clamp(30px, 6.5vw, 44px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.4px;
  color: var(--ink-strong);
}

.res_subtitle {
  font-family: var(--font-2), 'Open Sans', sans-serif;
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 400;
  line-height: 1.45;
  /* photo backgrounds wash out the neutral muted grey -- stay on the ink */
  color: var(--res-subtle);
}

.res_product__desc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--ink);
}

.res_product__desc p,
.res_product__desc li {
  font-size: 15.5px;
  line-height: 1.6;
  font-weight: 400;
}

/* the reset zeroes p margins; keep paragraphs breathing inside copy blocks */
.res_product__desc p+p,
.res_product__desc ul+p,
.res_product__desc p+ul {
  margin-top: 12px;
}

.res_product__desc ul {
  margin: 0;
  padding-left: 20px;
  text-align: left;
}

.res_product__desc li {
  margin: 4px 0;
}

.res_product__desc a {
  color: var(--text-link);
  font-weight: 600;
}

.res_product__desc a:visited {
  color: var(--text-link) ! important;
}

.res_btn__learn-more {
  align-self: flex-start;
  color: var(--text-link);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  transition: all .2s ease-in-out;
}

.res_btn__learn-more:hover {
  filter: brightness(1.4);
}

/* **** ELeM CoLOUR CLaSSES **** */
.res_color-text {
  color: var(--ink);
}

.res_color-1 {
  color: var(--color-1);
}

.res_color-2 {
  color: var(--color-2);
}

.res_imp {
  color: var(--res-imp);
}

a.res_color-text:visited {
  color: var(--ink) ! important;
}

a.res_color-1:visited {
  color: var(--color-1) ! important;
}

/* **** ReSOURCE HeADeR **** */
.res_header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  transition: all .2s ease-in-out;
}

.res_header {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 22px;
  height: var(--res-header-h);
  width: 100%;
  padding: 0 30px;
  transition: all .2s ease-in-out;
}

.res_header-container.scroll .res_header {
  height: 56px;
  background: color-mix(in srgb, var(--res-bkg-color) 40%, white);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-chip);
}

/* over-hero pages ( resource-above art behind the transparent bar ): the
   buttons go glass until the bar whitens on scroll, then the variant
   gradients return untouched. the inset ring rides box-shadow so there
   is no border to shift layout. */
.res_header--overhero:not(.scroll) .res_headernav .btn-sm {
  --btn-bkg: linear-gradient(180deg, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0.12));
  --btn-ink: var(--color-light);
  --btn-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35), 0 8px 24px rgb(7 17 38 / 0.28);
  --btn-shadow-hover: inset 0 0 0 1px rgb(255 255 255 / 0.55), 0 10px 28px rgb(7 17 38 / 0.34);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* nav fills the bar so a revealed array cta can pin itself to the far
   left ( margin auto ) while donate + cart hold the right edge */
.res_headernav {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex: 1;
  gap: 12px;
}

.res_headernav .btn-sm {
  min-width: 130px;
}

/* arrayCtaReveal buttons sit left and pop in when their section is reached */
.res_headernav .res_btn--reveal {
  margin-right: auto;
}

.res_headernav .res_btn--reveal:not(.hide) {
  animation: res-btn-reveal .3s ease-out;
}

@keyframes res-btn-reveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* the donate button rides the accent, request rides the primary */
.res_headernav .res_btn--donate {
  --btn-bkg: var(--color-3);
  --btn-ink: var(--color-light);
}

/* checkout cart */
.res_checkout-icon {
  position: relative;
  /* the glyph alone measured 28x19 -- centring it in a 44px box gives the
     cart a real touch target without moving the header layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  transition: all .2s ease-in-out;
}

/* the anchor is the real click target -- it has no class of its own, so it
   gets stretched to fill the 44px wrapper rather than sitting 28x22 inside it */
.res_checkout-icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
}

.res_checkout-icon i {
  font-size: 22px;
  color: var(--ink-muted);
}

.res_checkout-icon:hover i {
  color: var(--color-2);
}

.cart-wrapper a .badge {
  opacity: 0;
  display: block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 30px;
  background: #c00;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  position: absolute;
  top: -6px;
  right: -9px;
  margin-top: 5px;
  transition: all 0.25s ease;
  color: white;
}

.cart-wrapper.has-items a .badge {
  opacity: 1;
  margin-top: 0;
}

/* **** ABoVE-GRiD CoNTENT **** */
/* cms sections tagged 'resource-above' land in this template-emitted
   wrapper before the stage; the band owns its own top spacing under the
   transparent fixed header */
.res_above {
  width: 100%;
}

/* **** ReSOURCE BoDY **** */
.res_body {
  width: 100%;
  padding: calc(var(--res-header-h) + 14px) 20px 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* when a band renders first, the stage no longer clears the fixed header */
:where(.res_above)~.res_body {
  padding-top: 24px;
}

.res_body-inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 50px;
  width: 100%;
  max-width: 1200px;
  min-height: calc(100vh - var(--res-header-h) - 120px);
}

/* **** SwIPE StAGE **** */
.res_stage {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 46%;
  max-width: 560px;
}

/* the chevrons anchor to the frame so they stay centered on the
   artwork, not on artwork + tabs */
.res_stage-frame {
  position: relative;
}

.res_stage-viewport {
  overflow: hidden;
  /* the finger owns x, the page keeps y */
  touch-action: pan-y;
}

.res_stage-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: transform .45s cubic-bezier(0.22, 0.9, 0.3, 1);
  will-change: transform;
}

/* while dragging the track follows the finger raw */
.res_stage-track.is-dragging {
  transition: none;
}

.res_slide {
  flex: 0 0 100%;
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* slim sides: art may run to the chevron midpoints */
  padding: 26px 18px 34px 18px;
  opacity: .35;
  transform: scale(0.92);
  transition: opacity .35s ease, transform .45s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.res_slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.res_slide-media {
  width: 100%;
  max-width: 660px;
  max-height: var(--stage-height);
  display: flex;
  justify-content: center;
}

.res_slide-img {
  max-width: 100%;
  max-height: var(--stage-height);
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: pointer;
  transition: transform .25s ease;
}

.res_slide.is-active .res_slide-img:hover {
  transform: translateY(-3px);
}

/* gift logo tile has no jacket shadow */
.res_slide-img--flat {
  box-shadow: none;
  padding: 20px;
}

/* **** MeDIA SLiDES **** */
/* media-mode extras riding the same track: a configured click makes the
   slide face a control; video slides reuse the res_video player */
.res_slide-media--click {
  cursor: pointer;
}

/* unclicked images zoom fullscreen by default */
.res_slide-media--zoom {
  cursor: zoom-in;
}

.res_slide--video .res_slide-media {
  display: block;
  align-self: center;
}

/* custom slides get a presentable card by default; the slide's own
   markup and the page layer take it from there */
.res_slide-custom {
  box-sizing: border-box;
  width: 100%;
  max-height: var(--stage-height);
  overflow: hidden;
  background: white;
  border-radius: 8px;
  box-shadow: var(--shadow-book);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: var(--ink);
}

.res_stage-chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50px;
  background: white;
  color: var(--ink);
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-chip);
  transition: all .2s ease-in-out;
}

.res_stage-chevron--prev {
  left: -6px;
}

.res_stage-chevron--next {
  right: -6px;
}

.res_stage-chevron:hover {
  transform: translateY(-50%) scale(1.08);
  color: var(--color-2);
}

/* **** StAGE TaBS **** */
.res_stage-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 54%;
  max-width: 560px;
}

/* the mobile cta slot under the viewport; desktop uses the panel cta */
.res_stage-cta {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  transition: opacity .22s ease, transform .22s ease;
}

.res_stage-tabs {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: color-mix(in srgb, var(--brand-dark) 7%, white);
  border-radius: 999px;
  padding: 4px;
}

.res_tab {
  flex: 1;
  height: var(--tab-height);
  border: none;
  background: transparent;
  border-radius: 999px;
  font-family: var(--font-2), 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .25s ease;
  white-space: nowrap;
  padding: 0 12px;
}

.res_tab.is-active {
  background: white;
  color: var(--ink-strong);
  box-shadow: var(--shadow-chip);
}

/* media mode: the tab rail becomes position dots */
.res_stage-tabs--dots {
  background: transparent;
  padding: 0;
  justify-content: center;
  /* the dots carry their own 24px hit box, so the rail sets no gap --
     wrap keeps a long carousel off a horizontal scrollbar on small phones */
  gap: 0;
  flex-wrap: wrap;
  row-gap: 4px;
}

/* the button is a transparent 24px touch target ( wcag 2.5.8 ) and the
   pseudo draws the 11px dot, so the rail looks the same but is tappable */
.res_tab--dot {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
}

.res_tab--dot::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-dark) 18%, white);
  transition: all .25s ease;
}

/* the active treatment moves to the dot itself -- scaling the button would
   scale its hit box too */
.res_tab--dot.is-active {
  background: transparent;
  box-shadow: none;
  transform: none;
}

.res_tab--dot.is-active::before {
  background: var(--color-1);
  box-shadow: var(--shadow-chip);
  transform: scale(1.2);
}

/* **** ReSOURCE CoNTENT **** */
.res_content-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity .22s ease, transform .22s ease;
}

/* content swap animation -- js toggles the class around a re-render */
.res_content-container.is-swapping,
.res_cta-container.is-swapping,
.res_stage-cta.is-swapping,
.res_stickybar-inner.is-swapping {
  opacity: 0;
  transform: translateY(8px);
}

.res_cta-container {
  transition: opacity .22s ease, transform .22s ease;
}

/* **** CTA / BuTToNS **** */
/* ( legacy note: these used to be injected from the Button class --
   they live here now so the js stays markup-only ) */
.res_cta-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.res_button-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8px;
}

.res_btn {
  width: 100%;
  max-width: 360px;
}

.res_btn .res_btn-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}

.res_btn .res_btn-sublabel {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  opacity: .9;
}

/* same box as .res_btn below it, so the centered text tracks the button */
.res_product__gift-amt {
  width: 100%;
  max-width: 360px;
  text-align: center;
  font-family: var(--font-2), 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-2);
}

.res_product__tagline {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--res-subtle);
}

/* format picker ( dvd / cd ) -- chip group above the cta */
.res_choicegroup {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.res_choice {
  border: 2px solid color-mix(in srgb, var(--brand-dark) 18%, white);
  background: white;
  border-radius: 999px;
  height: 34px;
  padding: 0 16px;
  font-family: var(--font-2), 'Open Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .2s ease-in-out;
}

.res_choice.is-active {
  border-color: var(--color-1);
  color: var(--color-1);
  background: var(--tint-1);
}

/* **** ADDiTIoNAL CoNTENT NaV **** */
/* the section pills; sits beneath the whole build, centered */
.additional-content-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
  padding: 34px 20px 10px 20px;
}

.res_body__nav-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 9px;
  /* 44px keeps the pill a comfortable touch target on phones */
  height: 44px;
  padding: 0 18px 0 5px;
  /* pills are <button>s -- without this the ua default border reads as a
     black outline around every chip */
  border: 0;
  border-radius: 999px;
  background: white;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--brand-dark) 10%, transparent);
  color: var(--ink);
  cursor: pointer;
  transition: all .2s ease-in-out;
}

.res_body__nav-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--brand-dark) 16%, transparent);
}

/* the icon rides a small accent coin ( the give/download gold family,
   so it retints with each page's brand ) */
.res_body__nav-icon {
  /* fa7's core rule loads after this sheet and re-declares display and
     width through these vars -- without them it flattens the coin into
     a glyph-wide lozenge */
  --fa-display: flex;
  --fa-width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-3), var(--color-3b));
  font-size: 14px;
  color: white;
}

.res_body__nav-title {
  font-family: var(--font-2), 'Open Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
}

/* no icon coin -> the label is the pill's first child; balance the
   asymmetric coin padding back out */
.res_body__nav-title:first-child {
  margin-left: 13px;
}

/* **** CoNTENT OVeRLAY **** */
.res_overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 30px;
  background: color-mix(in srgb, var(--brand-dark) 30%, transparent);
  /* two-phase entrance/exit, same beat as the product array */
  opacity: 0;
  transition: opacity .28s ease;
}

.res_overlay.is-open {
  display: flex;
}

.res_overlay.is-shown {
  opacity: 1;
}

.res_overlay.is-shown .res_overlay-inner {
  transform: translateY(0);
}

.res_overlay-inner {
  /* rises as the scrim fades; reverses on close */
  transform: translateY(14px);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  height: 100%;
  max-width: 2000px;
  padding: 44px 50px;
  border-radius: 8px;
  background: var(--overlay-bkg);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.res_overlay-close {
  background: none;
  outline: none;
  border: none;
  position: absolute;
  font-size: 30px;
  z-index: 3;
  right: 25px;
  top: 20px;
  transition: all .2s ease-in-out;
  cursor: pointer;
  color: var(--ink);
}

.res_overlay-close:hover {
  color: var(--color-2);
}

.res_overlay-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: start;
  width: 100%;
  padding-right: 50px;
}

.res_overlay-nav-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  background: color-mix(in srgb, white 55%, transparent);
  color: var(--ink);
  border: none;
  cursor: pointer;
  transition: all .2s ease-in-out;
}

.res_overlay-nav-item:hover {
  color: var(--color-2);
}

.res_overlay-nav-item.active {
  background: white;
  color: var(--ink-strong);
  box-shadow: var(--shadow-chip);
}

.res_overlay-nav-icon {
  font-size: 14px;
  color: var(--color-2);
}

.res_overlay-nav-title {
  font-family: var(--font-2), 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
}

.res_overlay-content {
  flex: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  overflow-y: auto;
  position: relative;
}

.res_overlay-content-item {
  display: none;
  width: 100%;
  flex-direction: column;
  gap: 14px;
  padding: 10px 4px 30px 4px;
}

.res_overlay-content-item.active {
  display: flex;
}

.res_overlay-content-item h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 38px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--ink-strong);
}

/* overlay copy reads at the same size as the stage copy -- one body
   standard everywhere ( 15.5px / 1.6, set on .res_product__desc ) */

/* give panel cta ( gold -- the universal give colour ) */
.res_overlay-give {
  align-self: center;
  min-width: 220px;
  margin-top: 8px;
}

/* excerpt */
.res_overlay-eyebrow {
  font-family: var(--font-2), 'Open Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--color-2);
}

.res_overlay-subhead {
  font-family: var(--font-2), 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--res-subtle);
}

/* look inside */
.lookinside_inner {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: start;
}

.lookinside_left {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lookinside_right {
  flex: 1;
  text-align: center;
}

.lookinside_img {
  max-width: 340px;
  width: 100%;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: var(--shadow-book);
  transition: all .2s ease-in-out;
}

.lookinside_img.open-image-gallery {
  cursor: pointer;
}

.lookinside_img.open-image-gallery:hover {
  transform: scale(1.02);
}

/* about the author */
.the-author_inner {
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: center;
  max-width: 760px;
  margin: 0 auto;
}

.the-author_profile {
  width: 170px;
  height: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}

.the-author_content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.the-author_read-more {
  align-self: start;
  text-decoration: none;
  font-size: 14px;
  color: var(--color-2);
  font-weight: 700;
}

/* **** ZooM OveRLAY **** */
/* fullscreen pinch-zoom lightbox for gallery images. touch-action: none
   hands every gesture to the script; the img transform carries pan+scale
   and must never transition mid-gesture ( is-anim rides programmatic
   zooms only ). sits above every other overlay. */
.res_zoom {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: color-mix(in srgb, var(--brand-dark) 88%, black);
  touch-action: none;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity .28s ease;
}

.res_zoom.is-open {
  display: block;
}

.res_zoom.is-shown {
  opacity: 1;
}

.res_zoom__img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  /* very little padding -- the art owns the screen */
  max-width: calc(100% - 12px);
  max-height: calc(100% - 12px);
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity .2s ease;
}

.res_zoom__img.is-loaded {
  opacity: 1;
}

.res_zoom__img.is-zoomed {
  cursor: grab;
}

.res_zoom__img.is-anim {
  transition: opacity .2s ease, transform .25s ease;
}

.res_zoom__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
  background: rgb(255 255 255 / 0.16);
  cursor: pointer;
  transition: background .2s ease;
}

.res_zoom__close:hover {
  background: rgb(255 255 255 / 0.3);
}

/* video */
.res_video {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  background: var(--brand-dark);
  box-shadow: var(--shadow-book);
}

.res_video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.res_video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: color-mix(in srgb, var(--brand-dark) 25%, transparent);
  cursor: pointer;
}

.res_video-overlay-btn {
  border: none;
  border-radius: 999px;
  height: 52px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-2), 'Open Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-strong);
  background: white;
  box-shadow: var(--shadow-chip);
  transition: all .2s ease-in-out;
}

.res_video-overlay-btn:hover {
  transform: scale(1.04);
}

.res_video.is-playing .res_video-overlay {
  display: none;
}

/* faq */
.res_faq__item {
  background: white;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: var(--shadow-chip);
}

.res_faq__item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink-strong);
}

/* testimonies */
.res_product__testimony {
  display: flex;
  gap: 16px;
  flex-direction: row;
  max-width: 640px;
}

.res_testimony__initial {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 20px;
  color: white;
  background: var(--color-2);
  min-width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
}

/* **** PRoDUcT ARRaY **** */
/* the picker is DJC_ProductArray's compact config now -- its markup and
   styling live in the component ( _assets/components/product-array/ ).
   only the inline mount host stays here; the overlay body-mounts */
.res_arrayhost {
  display: block;
}

/* **** StICKY CHeCKOUT ( mobile ) **** */
/* settings stickyCheckout: false hides it; desktop never shows it. the
   header hides itself while this bar is up ( see the 900px query ) so
   mobile only ever carries one persistent bar -- the cart icon rides
   here since the header cart goes dark with it */
.res_stickybar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: white;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 30px color-mix(in srgb, var(--brand-dark) 18%, transparent);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) 14px;
}

.res_stickybar-row {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.res_stickybar-inner {
  flex: 1;
  min-width: 0;
  transition: opacity .22s ease, transform .22s ease;
}

.res_stickybar-cart {
  flex: 0 0 auto;
}

.res_stickybtn {
  width: 100%;
  min-height: 58px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 22px;
  border: none;
  border-radius: 999px;
  /* the give/download family: the deep ember end of the accent pair */
  background: var(--color-3b);
  background: linear-gradient(120deg, var(--color-3b), color-mix(in oklab, var(--color-3b), black 14%));
  color: white;
  cursor: pointer;
  box-shadow: var(--btnshadow);
  transition: all .2s ease-in-out;
}

/* press feedback -- the bar is touch-only, so :active is its hover */
.res_stickybtn:active {
  transform: scale(.98);
}

.res_stickybtn-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.18;
}

.res_stickybtn-title {
  font-family: var(--font-2), 'Open Sans', sans-serif;
  font-size: 17.5px;
  font-weight: 700;
}

.res_stickybtn-sub {
  font-size: 12px;
  font-weight: 500;
  opacity: .88;
}

.res_stickybtn-amt {
  flex: 0 0 auto;
  padding: 10px 17px;
  border-radius: 999px;
  background: color-mix(in srgb, white 24%, transparent);
  font-size: 15.5px;
  font-weight: 700;
}

/* authored text badges ( stickyCheckout.badge ) run longer than a $
   amount -- shrink and wrap them as a compact caption so they never
   crowd the cta label off the bar */
.res_stickybtn-amt--txt {
  flex: 0 1 auto;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

/* **** ReSOURCE GaLLERY **** */
.res_gallery {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: color-mix(in srgb, var(--brand-dark) 80%, transparent);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  /* two-phase entrance/exit, same beat as the product array */
  opacity: 0;
  transition: opacity .28s ease;
}

.res_gallery.is-open {
  display: block;
}

.res_gallery.is-shown {
  opacity: 1;
}

.res_gallery__close {
  position: absolute;
  top: 22px;
  right: 30px;
  font-size: 32px;
  cursor: pointer;
  z-index: 99;
  border: none;
  background: none;
  transition: all .2s ease-in-out;
  color: white;
}

.slyder_container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.slyder {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slydes-mount {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 60px 70px;
}

.slyde {
  display: none;
  max-width: 750px;
  max-height: 100%;
  margin: 0 auto;
  object-fit: contain;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.slyder_btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 36px;
  color: white;
  cursor: pointer;
  z-index: 10;
  transition: .2s ease-in-out;
}

.slyder_btn.prev {
  left: 25px;
}

.slyder_btn.next {
  right: 25px;
}

.slyder_btn:hover {
  color: var(--color-3);
}

/* **** ReSOURCE FooTER **** */
.res_footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 56px 24px 60px 24px;
  margin-top: auto;
  background: var(--res-footer);
  background: var(--footer-bkg);
  color: white;
  text-align: center;
}

.res_footer-logo {
  height: 54px;
  width: auto;
}

/* visited pinned with ! important -- the sitewide visited purple outweighs
   a bare class ( same counter as .res_footer-copy a below ) */
.res_footer__link,
.res_footer__link:visited {
  color: white ! important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.res_footer__link:hover {
  filter: brightness(1.2);
}

.res_footer-content {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* every prop set explicitly -- the sitewide grid sheet styles bare h3s
   ( cinzel caps + gold ) and anything left unset leaks through */
.res_footer-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 4.5vw, 28px);
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: white;
}

.res_footer-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* same reading size as the product copy ( .res_product__desc ) */
.res_footer-copy p {
  line-height: 1.6;
  font-size: 15.5px;
  color: color-mix(in srgb, white 88%, transparent);
}

.res_footer-copy a,
.res_footer-copy a:visited {
  color: white ! important;
  text-decoration: underline;
}

/* opens the overlay give panel with the full support copy */
.res_footer-learnmore {
  align-self: center;
  background: none;
  border: none;
  padding: 0;
  color: white;
  font-family: var(--font-2), 'Open Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  transition: opacity .2s ease-in-out;
}

.res_footer-learnmore:hover {
  opacity: .8;
}

.res_footer-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.res_footer__more,
.res_footer__more:visited {
  color: color-mix(in srgb, white 78%, transparent) ! important;
  font-weight: 400;
}

/* **** eXPANDABLE TeXT **** */
/* legacy read-more markup still rides in some settings copy -- render it
   flat: hidden text always visible, toggle chips gone ( js prunes them ) */
.expandable-text .hidden-text {
  display: block;
}

/* the reset zeroes p margins; keep the flattened copy breathing */
.expandable-text p+p,
.expandable-text .hidden-text,
.expandable-text .hidden-text p+p {
  margin-top: 12px;
}

.show-hidden-text,
.hide-hidden-text {
  display: none;
}

.nobreak {
  white-space: nowrap;
}

/* ============================================================
   ReSPONSIVeNESS
   ============================================================ */
@media only screen and (max-width: 1024px) {
  .res_body-inner {
    gap: 30px;
  }

  .res_stage-panel {
    width: 50%;
  }

  .res_stage {
    width: 50%;
  }
}

/* the mockup layout: stage on top, tabs, then content; sticky cta bar */
@media only screen and (max-width: 900px) {
  :root {
    --res-header-h: 64px;
    --stage-height: 42vh;
  }

  .res_body {
    padding: calc(var(--res-header-h) + 6px) 0 40px 0;
  }

  :where(.res_above)~.res_body {
    padding-top: 10px;
  }

  /* the copy stacks under the stage once the panel drops below the gallery
     -- this keeps it off the dots */
  .res_content-container {
    margin-top: 20px;
  }

  /* mobile sticky checkout ( stickyCheckout: false hides it ) */
  .res_has-stickybar .res_stickybar:not(.hide) {
    display: block;
  }

  .res_has-stickybar {
    padding-bottom: 92px;
  }

  /* one persistent bar on mobile -- the fixed header (nav + donate + cart)
     steps aside once the sticky checkout bar is up, and res_body's top
     padding (reserved for that header) goes with it */
  .res_has-stickybar .res_header-container {
    display: none;
  }

  .res_has-stickybar .res_body {
    padding-top: 10px;
  }

  .res_body-inner {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    min-height: 0;
    max-width: 520px;
  }

  .res_stage,
  .res_stage-panel {
    width: 100%;
    max-width: none;
  }

  .res_stage-panel {
    padding: 0 20px;
    gap: 16px;
  }

  .res_slide {
    /* sides sit at the chevron midpoints ( 10px inset + half of 40px ) */
    padding: 20px 30px 30px 30px;
  }

  .res_slide-media {
    max-width: 100%;
  }

  .res_stage-chevron {
    width: 44px;
    height: 44px;
    font-size: 13px;
  }

  .res_stage-chevron--prev {
    left: 10px;
  }

  .res_stage-chevron--next {
    right: 10px;
  }

  /* the cta rides right under the viewport; the panel copy follows */
  .res_cta-container {
    display: none;
  }

  .res_stage-cta {
    display: flex;
  }

  .res_stage {
    gap: 14px;
  }

  .res_stage-tabs {
    margin: 0 20px;
  }

  .res_overlay {
    padding: 0;
  }

  .res_overlay-inner {
    border-radius: 0;
    padding: 64px 22px 30px 22px;
  }

  .lookinside_inner,
  .the-author_inner {
    flex-direction: column;
    align-items: center;
  }

  .the-author_inner {
    text-align: center;
  }

  .the-author_read-more {
    align-self: center;
  }

  .res_footer {
    padding: 44px 20px 48px 20px;
  }
}

@media only screen and (max-width: 500px) {
  .res_header {
    padding: 0 18px;
  }

  .res_headernav .btn-sm {
    min-width: 0;
  }

  .res_slide-media {
    max-width: 100%;
  }

  .res_tab {
    letter-spacing: .8px;
    padding: 0 8px;
  }

  /* dots keep their shape under the narrow-tab padding bump */
  .res_tab--dot {
    padding: 0;
  }

  .res_stage-panel {
    padding: 0 16px;
  }

  .slydes-mount {
    padding: 50px 40px;
  }

  .slyder_btn.prev {
    left: 8px;
  }

  .slyder_btn.next {
    right: 8px;
  }
}

/* ============================================================
   OVERRIDES -- cms / sitewide counter-rules only
   ============================================================ */
/* ( the template's own wrappers never carry the cms row/col classes, so
   the sitewide '.grid .row.has-children' flex rule only reaches authored
   grid content -- where pages build on it, same as every cms page ) */

/* counters the sitewide grid-sheet heading rule ( bare h3: cinzel caps,
   gold, letter-spaced, washed out ) that otherwise restyles the footer title */
.res_footer .res_footer-title {
  font-family: var(--font-display) ! important;
  text-transform: none ! important;
  letter-spacing: 0 ! important;
  color: white ! important;
  opacity: 1 ! important;
}