/* ==========================================================================
   GIFT CARD BAND
   Deep green with a gold base rule, echoing the printed campaign artwork.
   ========================================================================== */

/* ==========================================================================
   PHONE
   The band was running to nearly three screens. Most of that was saying the
   same thing twice: a full-width hero card at the top, then the identical
   artwork again as the first item in the carousel.
   ========================================================================== */

@media (max-width: 899px) {

  /* The carousel is the imagery. One large card above it added 350px and no
     information — every design it could show is a swipe away. */
  .gc--has-designs .gc__media { display: none; }

  .gc__inner { padding-block: var(--sp-5) var(--sp-4); gap: var(--sp-4); }

  .gc__body { font-size: .9rem; }

  /* The two formats become chips: icon and label only. What each one means
     belongs on the gift cards page, where there is room to say it properly —
     here they answer "can I send this by email?" and nothing more. */
  .gc__formats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
  }

  .gc__formats li {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: var(--sp-3) var(--sp-2);
  }

  .gc__formats svg { width: 18px; height: 18px; margin-top: 0; }

  /* The supporting sentence under each label. */
  .gc__formats span > :not(strong) { display: none; }
  .gc__formats strong { font-size: .8rem; margin: 0; }

  /* One button, one link. Two full-width buttons stacked read as a choice
     between equals, when browsing gift sets is the way out, not the offer. */
  .gc__cta { display: grid; gap: var(--sp-2); }

  .gc__cta-alt {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: .85rem;
  }

  .gc__designs { padding-bottom: var(--sp-5); }
  .gc__designs-title { font-size: 1rem; }
  .gc__designs-note { font-size: .74rem; }
}

/* ==========================================================================
   DESIGN CAROUSEL
   Reuses .rail-wrap / .rail, so the eased slide, arrows and autoplay all come
   from rail.js. Only the tile proportions differ: gift card artwork is
   landscape, where a collection tile is portrait.
   ========================================================================== */

.gc__designs {
  padding-top: 0;
  padding-bottom: var(--sp-6);
}

.gc__designs-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--white);
  margin: 0 0 var(--sp-3);
}

.rail--gc {
  /* 16:10 tiles, so more fit across than on the portrait collection rail.

     46% rather than 60% on a phone: two full cards plus a slice of a third,
     which is both shorter and a clearer signal that the row scrolls. At 60%
     exactly two fitted, and a row that ends flush looks complete. */
  grid-auto-columns: minmax(150px, calc(46% - var(--sp-3)));
}

@media (min-width: 640px)  { .rail--gc { grid-auto-columns: minmax(220px, calc(33.333% - var(--sp-3))); } }
@media (min-width: 1024px) { .rail--gc { grid-auto-columns: minmax(240px, calc(25% - var(--sp-4))); } }

.gc-design { margin: 0; }

.gc-design img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .08);
  transition: transform var(--dur-component) var(--ease-brand),
              box-shadow var(--dur-component) var(--ease-brand);
}

@media (hover: hover) {
  .gc-design:hover img {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
  }
}

.gc-design figcaption {
  display: block;
  padding-top: var(--sp-2);
  line-height: 1.4;
}

.gc-design__name {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--white);
}

.gc-design__caption {
  display: block;
  font-size: .76rem;
  color: rgba(255, 255, 255, .68);
}

.gc__designs-note {
  margin: var(--sp-4) 0 0;
  font-size: .8rem;
  color: rgba(255, 255, 255, .68);
  max-width: 62ch;
}

/* The band is dark, so the rail's arrows and scrollbar need inverting. */
.gc .rail-btn {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .28);
  color: var(--white);
}

.gc .rail-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
.gc .rail { scrollbar-color: rgba(255, 255, 255, .3) transparent; }
.gc .rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); }

@media (prefers-reduced-motion: reduce) {
  .gc-design img { transition: none; }
  .gc-design:hover img { transform: none; }
}

.gc {
  background: linear-gradient(160deg, var(--tbs-green) 0%, var(--tbs-green-deep) 100%);
  color: rgba(255, 255, 255, .88);
  border-bottom: 8px solid var(--gold);
  overflow: hidden;
}

.gc__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: center;
  /* Bottom padding is small because the design carousel follows and brings its
     own. Two full paddings meeting left the empty band under the artwork. */
  padding-block: var(--sp-6) var(--sp-5);
}

@media (min-width: 900px) {
  .gc__inner {
    /* Copy gets a little more than half: the card image is decoration, the
       words are the offer. */
    grid-template-columns: 1.05fr 1fr;
    gap: var(--sp-7);
    padding-block: var(--sp-7) var(--sp-5);
  }
}

/* ---- The two formats ---- */

.gc__formats {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 560px) {
  .gc__formats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
}

.gc__formats li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .05);
}

.gc__formats svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--gold);
  margin-top: 2px;
}

.gc__formats span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: .78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .72);
}

.gc__formats strong {
  font-size: .875rem;
  color: var(--white);
  margin-bottom: 1px;
}

/* ---- Copy ------------------------------------------------------------ */

.gc__eyebrow { color: var(--gold); }

.gc__title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4.6vw, 3.25rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--white);
  margin: 0 0 var(--sp-3);
}

.gc__body {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, .84);
  max-width: 46ch;
  margin: 0 0 var(--sp-4);
}

.gc__points {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
  font-size: 0.9375rem;
}

@media (min-width: 560px) {
  .gc__points { grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4); }
}

.gc__points li {
  position: relative;
  padding-left: var(--sp-5);
  color: rgba(255, 255, 255, .82);
}

.gc__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 12px;
  height: 2px;
  background: var(--gold);
}

.gc__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.gc__cta-alt { border-color: rgba(255, 255, 255, .5); color: #fff; }

/* ---- Media ----------------------------------------------------------- */

.gc__media {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--radius-card);
  overflow: hidden;

  /* 16:10 — the proportion of a gift card, and of the artwork uploaded under
     Gift Card Designs. It was 4:3, which is squarer, so object-fit:cover trimmed
     the sides and cut the wording off the end of the card. */
  aspect-ratio: 16 / 10;
  background: rgba(0, 0, 0, .16);
}

/* contain, not cover. A gift card is a designed object with words on it — the
   whole thing has to be visible. cover guarantees a full bleed but will crop
   whatever does not fit, which is exactly the wrong trade here. */
.gc__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gc__media--placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(200, 169, 106, .22), transparent 58%),
    rgba(0, 0, 0, .18);
}

/* Drawn stand-in until a real photograph is uploaded. */
.gc-card {
  width: min(70%, 320px);
  aspect-ratio: 1.6 / 1;
  border-radius: 12px;
  background: linear-gradient(145deg, #123B57 0%, #0C2B40 100%);
  border: 1px solid rgba(200, 169, 106, .5);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transform: rotate(-6deg);
}

.gc-card__mark {
  font-size: 0.72rem;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .9);
}

.gc-card__label {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--gold);
}


/* ---- Section reel ------------------------------------------------------
   A 9:16 clip standing in the media column. Sized by aspect-ratio rather than
   a fixed height so it never causes layout shift while the file loads, and
   capped in width so a vertical video does not make the band taller than the
   copy beside it.
   ------------------------------------------------------------------------ */

.gc-reel {
    margin: 0 auto;
    position: relative;
    width: min(300px, 72%);
}

    /* A thin gold halo floating clear of the frame — the same device as the range
   circles, so the two sections read as one system. */
    .gc-reel::before {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 22px;
        border: 1px solid rgba(200, 169, 106, .5);
        pointer-events: none;
    }

.gc-reel__video {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 14px;
    /* Painted before the first frame arrives, so the frame is never a white hole. */
    background: var(--tbs-green-deep);
    box-shadow: 0 24px 60px rgba(0, 48, 31, .26), 0 2px 6px rgba(0, 48, 31, .12);
}

.gc-reel__caption {
    margin-top: var(--sp-3);
    text-align: center;
    font-size: 0.82rem;
    letter-spacing: .01em;
    color: var(--ink-mute);
}

@media (min-width: 900px) {
    .gc-reel {
        width: min(320px, 100%);
    }
}

/* ==========================================================================
   REEL LAYOUT
   Appended after the original band rules, so equal-specificity selectors win.
   ========================================================================== */

@media (min-width: 900px) {
    /* The clip is 9:16, so the media column is deliberately narrow and the copy
     takes the rest. The old 50/50 split stretched a portrait video across a
     landscape hole — which is what left that empty box. */
    .gc--reel .gc__inner {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--sp-8);
        align-items: center;
    }
}

/* Media first on a phone. The clip is the reason to stop scrolling. */
.gc--reel .gc__media {
    order: -1;
}

@media (min-width: 900px) {
    .gc--reel .gc__media {
        order: 0;
    }
}

.gc--reel .gc__title {
    max-width: 15ch;
}

.gc--reel .gc__body {
    max-width: 44ch;
}

/* ---- Formats, reduced to two labels ---------------------------------- */

.gc--reel .gc__formats {
    list-style: none;
    margin: var(--sp-5) 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

    .gc--reel .gc__formats li {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        padding: 8px 15px;
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: var(--radius-pill);
        font-size: 0.85rem;
        font-weight: 600;
        color: rgba(255, 255, 255, .92);
    }

    .gc--reel .gc__formats svg {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        color: var(--gold);
    }

/* ---- One button, one link -------------------------------------------- */

.gc--reel .gc__cta {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
}

.gc__cta-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    text-decoration: underline;
    text-underline-offset: 4px;
}

    .gc__cta-link:hover {
        color: var(--gold);
    }

/* ---- The reel --------------------------------------------------------- */

.gc-reel {
    margin: 0 auto;
    position: relative;
    width: min(290px, 74%);
}

@media (min-width: 900px) {
    .gc-reel {
        width: 100%;
    }
}

/* A thin gold halo clear of the frame — the same device as the range circles,
   so the two sections read as one system. */


.gc-reel__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16; /* reserves the space before metadata arrives, so no shift */
    object-fit: cover;
    border-radius: 14px;
    background: #04241A;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

.gc-reel__caption {
    margin-top: var(--sp-3);
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, .6);
}

/* ---- Reel, corrected ---------------------------------------------------
   Two things had to be forced here. The frame carries the shape and clips;
   the video is absolute inside it, so no width/height/aspect-ratio rule
   elsewhere in this file can reach it.
   ------------------------------------------------------------------------ */

.gc-reel__frame {
    position: relative;
    width: 100%;
    /* Only the shape held while metadata loads — the inline script replaces it
     with the file's real ratio as soon as the browser reads it. Reserving
     something here is what stops the page jumping when the video arrives. */
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    /* Letterbox bars sit against this, so they read as the band, not as gaps. */
    background: #04241A;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

.gc--reel .gc__media .gc-reel__frame > .gc-reel__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    /* contain, not cover — the whole frame of the clip must be visible. cover is
     what was cutting the top and bottom off your vertical video. */
    object-fit: contain;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* The original band hides .gc__media on a phone when designs exist, so the same
   card artwork is not shown twice. A video is not a duplicate of the artwork,
   so that rule must not reach it — this is why nothing appeared on mobile. */
.gc--reel .gc__media,
.gc--reel.gc--has-designs .gc__media {
    display: block;
}

/* ---- Single-card design slideshow ------------------------------------- */

.gc__designs {
    text-align: center;
    margin-top: var(--sp-7);
}

.gc__designs-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--white);
    margin-bottom: var(--sp-4);
}

.gc-slide {
    max-width: 440px;
    margin-inline: auto;
}

.gc-slide__stage {
    position: relative;
    aspect-ratio: 8 / 5;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, .18);
}

.gc-slide__item {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    /* Slides in from the right as it fades, rather than a plain cross-dissolve —
     it reads as a carousel moving rather than an image swapping. */
    transform: translateX(26px);
    transition: opacity 500ms var(--ease-brand), transform 500ms var(--ease-brand);
}

    .gc-slide__item.is-on {
        opacity: 1;
        transform: none;
    }

.gc-slide__stage .gc-slide__item img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.gc-slide__item figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--sp-6) var(--sp-3) var(--sp-3);
    background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent);
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
}

.gc-slide__dots {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: var(--sp-3);
}

/* 22px button around an 8px dot: the target stays tappable without the dot
   itself getting heavy. */
.gc-slide__dot {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
}

    .gc-slide__dot::after {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .32);
        transition: background var(--dur-micro) var(--ease-brand);
    }

    .gc-slide__dot.is-on::after {
        background: var(--gold);
    }

@media (prefers-reduced-motion: reduce) {
    .gc-slide__item {
        transition: none;
        transform: none;
    }
}
/* A landscape clip in a 320px column is a postage stamp. When the script finds
   the file is wider than it is tall, the media column earns more room. */
.gc--wide .gc-reel {
    width: 100%;
}

@media (min-width: 900px) {
    .gc--reel.gc--wide .gc__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    }
}

/* ==========================================================================
   GIFT CARD REEL — vertical 9:16
   ========================================================================== */

/* 1. Release the column.

   !important appears here and in the two blocks below, and nowhere else in
   anything I've given you. The rule constraining .gc__media lives in the
   original part of this file and I cannot see it to name it — this is the only
   way to be certain of winning without knowing the selector. Send me
   giftcard.css and these all go back to plain declarations. */
.gc--reel .gc__media {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* 2. The column width.

   A 9:16 clip at 560px wide would stand 996px tall — taller than most laptop
   screens, and it would push the whole section past the fold. 340px gives a
   ~604px reel: a hero, not a wall. */
@media (min-width: 900px) {
    .gc--reel .gc__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
        gap: var(--sp-7);
        align-items: center;
    }
}

.gc-reel {
    position: relative;
    /* Near full width on a phone, with just enough gutter that it doesn't run
     into the edge of the screen. */
    width: min(360px, 90%);
    margin: 0 auto;
}
@media (min-width: 900px) {
    .gc-reel {
        width: 100%;
    }
}

/* 3. The frame declares the vertical shape, so the height exists before the
   file loads and nothing downstream can collapse it. */
.gc-reel__frame {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    /* No fixed ratio. The video sits in normal flow below, so the frame takes its
     exact shape — which is why the letterbox bars disappear, and why a
     different file will fit without a code change. */
    aspect-ratio: auto !important;
    border-radius: 14px;
    overflow: hidden;
    background: #04241A;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .32);
    border: 1px solid rgba(200, 169, 106, .3);
    line-height: 0; /* kills the inline-descender sliver under the video */
}

/* 4. The video fills that frame exactly. contain, not cover — if the file is
   not precisely 9:16 you get thin bars rather than a crop, which is what you
   asked for: the whole picture, always. */
.gc .gc__media .gc-reel__frame > video.gc-reel__video {
    /* Normal flow, not absolute: the box becomes the video's own ratio, so there
     is nothing left for object-fit to pad or crop against. */
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: fill !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Thin gold halo clear of the frame — same device as the range circles. */
.gc-reel::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 22px;
    border: 1px solid rgba(200, 169, 106, .45);
    pointer-events: none;
}

.gc-reel__caption {
    margin-top: var(--sp-3);
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, .6);
}
/* ==========================================================================
   GIFT CARD SECTION — reel, copy and design slideshow.
   One authoritative block. Nothing above this line should reference .gc-reel
   or .gc-slide; if it does, it is a leftover and should be removed.
   ========================================================================== */

/* ---- Release the media column -----------------------------------------
   .gc__media in the original part of this file is shaped for a landscape card
   image and clips its overflow. !important is used here, and only here,
   because that rule cannot be named from outside the file. */
.gc--reel .gc__media {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    padding: 0 !important;
}

    .gc--reel .gc__media > * {
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
    }

/* ---- Layout ----------------------------------------------------------- */

@media (min-width: 900px) {
    .gc--reel .gc__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
        gap: var(--sp-7);
        align-items: center;
    }
}

/* Media first on a phone — the clip is the reason to stop scrolling. */
.gc--reel .gc__media {
    order: -1;
}

@media (min-width: 900px) {
    .gc--reel .gc__media {
        order: 0;
    }
}

.gc--reel .gc__title {
    max-width: 15ch;
}

.gc--reel .gc__body {
    max-width: 44ch;
}

/* ---- The reel --------------------------------------------------------- */

.gc-reel {
    position: relative;
    width: min(360px, 90%);
    margin: 0 auto;
}

@media (min-width: 900px) {
    .gc-reel {
        width: 100%;
    }
}

/* No fixed ratio: the video sits in normal flow below, so the frame takes its
   exact shape. That is what removes the letterbox bars, and it means a file of
   any proportion fits without a code change. */
.gc-reel__frame {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 14px;
    overflow: hidden;
    background: #04241A;
    border: 1px solid rgba(200, 169, 106, .3);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .32);
    line-height: 0; /* kills the inline-descender sliver under the video */
}

.gc--reel .gc__media {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    /* The original gives this column a card treatment — background, border and
     radius — for the gift card image it used to hold. Around a video frame
     that already has its own edge, it reads as a box inside a box. */
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.gc-reel__caption {
    margin-top: var(--sp-3);
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, .6);
}

/* ---- Formats, reduced to two labels ----------------------------------- */

.gc--reel .gc__formats {
    list-style: none;
    margin: var(--sp-5) 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

    .gc--reel .gc__formats li {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        padding: 8px 15px;
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: var(--radius-pill);
        font-size: 0.85rem;
        font-weight: 600;
        color: rgba(255, 255, 255, .92);
    }

    .gc--reel .gc__formats svg {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        color: var(--gold);
    }

.gc--reel .gc__cta {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
}

.gc__cta-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    text-decoration: underline;
    text-underline-offset: 4px;
}

    .gc__cta-link:hover {
        color: var(--gold);
    }

/* ---- Design slideshow ------------------------------------------------- */

.gc__designs {
    text-align: center;
    margin-top: var(--sp-7);
}

.gc__designs-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--white);
    margin-bottom: var(--sp-4);
}

.gc-slide {
    max-width: 320px;
    margin-inline: auto;
}

.gc-slide__stage {
    position: relative;
    aspect-ratio: 8 / 5;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, .18);
}

/* Slides in from the right as it fades, so it reads as a carousel moving
   rather than one image dissolving into another. */
.gc-slide__item {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: translateX(26px);
    transition: opacity 500ms var(--ease-brand), transform 500ms var(--ease-brand);
}

    .gc-slide__item.is-on {
        opacity: 1;
        transform: none;
    }

.gc-slide__stage .gc-slide__item img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.gc-slide__item figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--sp-6) var(--sp-3) var(--sp-3);
    background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent);
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
}

.gc-slide__dots {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: var(--sp-3);
}

/* 22px target around an 8px dot: tappable without the dot looking heavy. */
.gc-slide__dot {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
}

    .gc-slide__dot::after {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .32);
        transition: background var(--dur-micro) var(--ease-brand);
    }

    .gc-slide__dot.is-on::after {
        background: var(--gold);
    }

@media (prefers-reduced-motion: reduce) {
    .gc-slide__item {
        transition: none;
        transform: none;
    }
}