/* Gift card PDP (/shop/surefoot-gift-card/), 2026-10-14. Same frame as the
   Conforma PDP (conforma.css): gallery + buy box, proof strip, story blocks,
   FAQ at the bottom. body.pdp-gift is stamped in the shell, so the page paints
   in its final layout before any script runs. */
.pdp-gift .product-page { background-color: #fafafa; }
.pdp-gift .product-buy__name { text-transform: uppercase; }
.pdp-gift .product-images { background: none; }
.pdp-gift .product-images__hero { background: #f8f8f8; aspect-ratio: 4 / 3; mix-blend-mode: normal; }
.pdp-gift .product-thumbs { display: none; }   /* one image: the card */
.pdp-gift .pdp-archline { margin: 4px 0 12px; font-size: 16px; font-weight: 600; }
.pdp-gift #pdp-desc { display: none; }
.gc-lede { font-size: 16px; line-height: 1.6; color: var(--grey-90); margin: 10px 0 18px; max-width: 52ch; }

/* Amounts: reserve the US grid's height while loading so nothing below jumps;
   released once the tiles render (Canada has 6 amounts, not 7). */
.pdp-gift #pdp-options:has(.gc-loading) { min-height: 362px; }
.gc-loading { font-size: 12px; color: var(--grey-90); margin: 0; }
.pdp-gift .opt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gc-amt { display: grid; gap: 4px; padding: 14px 16px; text-align: left; align-content: start; min-height: 74px; }
.gc-amt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gc-amt__n { font-family: var(--font-display); font-size: 30px; font-weight: 400; line-height: 1; color: var(--black); }
.gc-amt__buys { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--grey-90); min-height: 1.35em; }
.gc-amt.selected .gc-amt__n, .gc-amt.selected .gc-amt__buys { color: #fff; }

/* Who gets it: CSS-only switch (radios first, then the labels and panels they
   control), styled like the Men's / Women's toggle. */
.gc-gift { border: 0; padding: 0; margin: 20px 0 18px; min-width: 0; }
.gc-gift legend { padding: 0; }
.gc-to__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gc-to { display: inline-flex; border: 1px solid var(--grey-300); }
.gc-to__opt {
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 11px 22px; background: var(--white); color: var(--black); cursor: pointer; transition: background .15s, color .15s;
}
#gc-to-me:checked ~ .gc-to .gc-to__opt--me,
#gc-send:checked ~ .gc-to .gc-to__opt--them { background: var(--red); color: #fff; }
#gc-to-me:focus-visible ~ .gc-to .gc-to__opt--me,
#gc-send:focus-visible ~ .gc-to .gc-to__opt--them { outline: 2px solid var(--black); outline-offset: 2px; }
.gc-gift__note { font-size: 13px; line-height: 1.5; color: var(--grey-90); margin: 10px 0 0; }
.gc-gift__fields { display: none; gap: 10px; margin-top: 14px; }
#gc-send:checked ~ .gc-gift__fields { display: grid; }
#gc-send:checked ~ .gc-gift__note--me { display: none; }
.gc-gift__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gc-gift__fields .gc-gift__note { margin: -2px 0 0; }
.gc-gift__err { font-size: 13px; font-weight: 600; color: var(--red-text); margin: -2px 0 0; }
.gc-gift__err[hidden] { display: none; }
.pdp-gift .product-trust { flex-wrap: wrap; font-size: 12px; gap: 8px 18px; }

/* Proof strip (same as .conforma-proof) */
.gc-proof { max-width: 1320px; margin: 48px auto 0; padding: 26px 24px; border-block: 1px solid var(--grey-300); display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.gc-proof p { margin: 0; padding: 0 16px; font-size: 13px; line-height: 1.5; }
.gc-proof p + p { border-left: 1px solid var(--grey-300); }
.gc-proof strong { display: block; font-family: var(--font-display); font-size: 34px; line-height: 1.15; text-transform: uppercase; margin-bottom: 4px; color: var(--black); }

/* Product strip under the card (Chance 10/14: one unit with the card, so it is
   in the first view and rides along in the gallery's sticky column). Two
   identical halves scroll left forever (the second is aria-hidden); hover
   pauses it; reduced motion turns it into a swipeable row. */
.gc-strip { margin-top: 22px; min-width: 0; }
.gc-strip__label { margin: 0 0 12px; }
.gc-strip__viewport { overflow: hidden; }
.gc-strip__track { display: flex; width: max-content; animation: gc-strip 70s linear infinite; }
.gc-strip:hover .gc-strip__track { animation-play-state: paused; }
.gc-strip__half { display: flex; gap: 10px; padding: 0 10px 0 0; margin: 0; list-style: none; }
/* Photos are a mix of white and studio-grey backgrounds: darken them onto one
   #f8 square (the Conforma arch-panel technique) so every tile matches. */
.gc-strip__item { flex: none; width: 128px; display: grid; gap: 8px; position: relative; isolation: isolate; }
.gc-strip__item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1; background: #f8f8f8; }
.gc-strip__item img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding: 12px; box-sizing: border-box; background: transparent; mix-blend-mode: darken; }
.gc-strip__item span { font-size: 12px; font-weight: 600; color: var(--black); }
.gc-strip__note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--grey-90); }
@keyframes gc-strip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .gc-strip__track { animation: none; }
  .gc-strip__viewport { overflow-x: auto; }
  .gc-strip__half[aria-hidden="true"] { display: none; }
}

.pdp-gift .pdp-block__head { font-size: clamp(34px, 4vw, 54px); }
/* Widescreen story photo (Chance 10/14): keeps the band short. */
.gc-story-media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; display: block; }

/* How it works (same as .conforma-fit-steps) */
.gc-steps { counter-reset: fit; list-style: none; padding: 0; margin: 0; order: 2; }
.gc-steps li { counter-increment: fit; position: relative; padding: 18px 0 18px 42px; border-top: 1px solid var(--grey-300); font-size: 16px; line-height: 1.6; }
.gc-steps li::before { content: '0' counter(fit); position: absolute; left: 0; top: 18px; color: var(--red-text); font-weight: 600; font-size: 13px; }
.gc-steps strong { display: block; color: var(--black); }

.pdp-gift .pdp-faq { max-width: 1000px; }
.pdp-gift .pdp-faq__q summary { min-height: 44px; }

@media (max-width: 800px) {
  .pdp-gift .product-layout { gap: 26px; }
  .pdp-gift .pdp-block { gap: 28px; margin-top: 56px; }
  .pdp-gift .pdp-block__copy { order: 1; }
  .pdp-gift .pdp-block__media, .pdp-gift .gc-steps { order: 2; }
  .gc-proof { margin-top: 36px; padding: 22px 12px; }
  .gc-proof p { padding: 0 8px; font-size: 11px; }
  .gc-proof strong { font-size: 28px; }
  .gc-strip__item { width: 104px; }
}
@media (max-width: 480px) {
  .pdp-gift .product-layout { padding-inline: 20px; margin-top: 18px; }
  .pdp-gift #pdp-options:has(.gc-loading) { min-height: 400px; }
  .gc-gift__pair { grid-template-columns: 1fr; }
  .gc-proof { grid-template-columns: 1fr; gap: 14px; padding-block: 18px; }
  .gc-proof p + p { border-left: 0; border-top: 1px solid var(--grey-300); padding-top: 14px; }
  .gc-proof p { font-size: 12px; }
  .gc-proof strong { font-size: 26px; }
  .gc-to { display: flex; }
  .gc-to__opt { flex: 1; text-align: center; padding-inline: 10px; }
}