/** Shopify CDN: Minification failed

Line 151:0 All "@import" rules must come first
Line 152:0 All "@import" rules must come first

**/
/* Handmailed • Card Swipe — CLEANED + SCOPED (mobile-first)
   This file keeps only one authoritative button style.
   Scope anchors:
   - .section-handmailed-card-swipe (Shopify section class from schema)
   - section[id^="hm-card-swipe-"] (id prefix from markup)
*/

/* ---------- Headings & shell ---------- */
.section-handmailed-card-swipe,
section[id^="hm-card-swipe-"] {
  padding: 2rem 0;
  background: var(--section-bg, #fff9f0); /* set by inline vars in section */
  border-radius: 1rem;
}

.section-handmailed-card-swipe .hms-head,
section[id^="hm-card-swipe-"] .hms-head {
  text-align: center; margin-bottom: 1rem;
}

.section-handmailed-card-swipe .hms-title,
section[id^="hm-card-swipe-"] .hms-title {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.6rem; font-weight: 700; color: #ff4d6d; margin: 0;
}

.section-handmailed-card-swipe .hms-sub,
section[id^="hm-card-swipe-"] .hms-sub {
  color: #444; margin-top: .25rem; font-family: 'Caveat', cursive; font-size: 1.25rem;
}

/* ---------- Frameless deck area ---------- */
.section-handmailed-card-swipe .hms-deck,
section[id^="hm-card-swipe-"] .hms-deck{
  position: relative;
  width: min(760px, 96vw);
  height: clamp(420px, 72vh, calc(var(--maxvh, 80) * 1vh));
  margin: 0 auto;
  background: transparent;
  border-radius: 0;
  overflow: visible; /* let cards bleed while dragging */
}

.section-handmailed-card-swipe.hms-size-small  .hms-deck,
section[id^="hm-card-swipe-"].hms-size-small  .hms-deck { width: min(520px, 94vw); }

.section-handmailed-card-swipe.hms-size-medium .hms-deck,
section[id^="hm-card-swipe-"].hms-size-medium .hms-deck { width: min(680px, 96vw); }

.section-handmailed-card-swipe.hms-size-large  .hms-deck,
section[id^="hm-card-swipe-"].hms-size-large  .hms-deck { width: min(820px, 98vw); }

/* ---------- Card stack ---------- */
.section-handmailed-card-swipe .hms-card,
section[id^="hm-card-swipe-"] .hms-card{
  position: absolute; inset: 0;
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  transition: transform .22s ease, opacity .22s ease;
  touch-action: pan-y;
  will-change: transform;
  background: #fff;
}

.section-handmailed-card-swipe .hms-card__img,
section[id^="hm-card-swipe-"] .hms-card__img{
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .22s ease;
}

.section-handmailed-card-swipe .hms-card[data-pos="0"],
section[id^="hm-card-swipe-"] .hms-card[data-pos="0"]{ transform: translate3d(0,0,0) scale(1);   opacity: 1;   z-index: 3; }
.section-handmailed-card-swipe .hms-card[data-pos="1"],
section[id^="hm-card-swipe-"] .hms-card[data-pos="1"]{ transform: translate3d(0, 8px, 0) scale(.98); opacity: .92; z-index: 2; }
.section-handmailed-card-swipe .hms-card[data-pos="2"],
section[id^="hm-card-swipe-"] .hms-card[data-pos="2"]{ transform: translate3d(0,16px, 0) scale(.96); opacity: .86; z-index: 1; }
.section-handmailed-card-swipe .hms-card[data-pos="0"] .hms-card__img,
section[id^="hm-card-swipe-"] .hms-card[data-pos="0"] .hms-card__img{ transform: scale(1.06); }

/* ---------- Meta + CTAs wrapper ---------- */
.section-handmailed-card-swipe .hms-info,
section[id^="hm-card-swipe-"] .hms-info { text-align: center; margin-top: .75rem; }

.section-handmailed-card-swipe .hms-card-title,
section[id^="hm-card-swipe-"] .hms-card-title { margin: .25rem 0; font-weight: 600; color: #222; font-size: 1rem; }

.section-handmailed-card-swipe .hms-ctas,
section[id^="hm-card-swipe-"] .hms-ctas { display: grid; justify-items: center; gap: .9rem; margin-top: .25rem; }

/* ---------- FINAL: sticker-pill buttons (single source of truth) ---------- */
/* Nuke old button backgrounds/borders coming from earlier variables */
.section-handmailed-card-swipe .hms-btn--primary,
.section-handmailed-card-swipe .hms-btn--ghost,
section[id^="hm-card-swipe-"] .hms-btn--primary,
section[id^="hm-card-swipe-"] .hms-btn--ghost { background: none; border: 0; }

/* Base pill */
.section-handmailed-card-swipe .hms-btn,
section[id^="hm-card-swipe-"] .hms-btn {
  position: relative;
  border-radius: 999px;
  padding: 1rem 1.6rem;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: clamp(15px, 3.9vw, 18px);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #16113a; /* inky navy text */
  transform: translateZ(0);
  transition: transform .12s ease, filter .12s ease;
  /* “Sticker” offset shadow that never covers the text */
  filter: drop-shadow(8px 8px 0 #1a1446) drop-shadow(0 8px 18px rgba(0,0,0,.06));
}

/* Primary (butter) */
.section-handmailed-card-swipe .hms-btn--primary,
section[id^="hm-card-swipe-"] .hms-btn--primary {
  background-color: #FFD454;
}

/* Secondary (coral) — used for View collection */
.section-handmailed-card-swipe .hms-btn--ghost,
section[id^="hm-card-swipe-"] .hms-btn--ghost {
  background-color: #FF5D73;
  color: #0f0b2c; /* better contrast on coral */
}

/* Mobile press state */
.section-handmailed-card-swipe .hms-btn:active,
section[id^="hm-card-swipe-"] .hms-btn:active {
  transform: translate(2px, 2px) scale(.985);
  filter: drop-shadow(6px 6px 0 #1a1446) drop-shadow(0 6px 14px rgba(0,0,0,.06));
}

/* ---------- Empty state ---------- */
.section-handmailed-card-swipe .hms-empty,
section[id^="hm-card-swipe-"] .hms-empty { text-align: center; color: #666; }

/* ---------- Fonts (optional; move to theme head if reused elsewhere) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700&display=swap');
/* Remove ugly underlines on Handmailed buttons */
.section-handmailed-card-swipe .hms-btn,
.section-handmailed-card-swipe .hms-btn:link,
.section-handmailed-card-swipe .hms-btn:visited,
.section-handmailed-card-swipe .hms-btn:hover,
.section-handmailed-card-swipe .hms-btn:active,
section[id^="hm-card-swipe-"] .hms-btn,
section[id^="hm-card-swipe-"] .hms-btn:link,
section[id^="hm-card-swipe-"] .hms-btn:visited,
section[id^="hm-card-swipe-"] .hms-btn:hover,
section[id^="hm-card-swipe-"] .hms-btn:active {
  text-decoration: none !important;
}
/* Handmailed • Swipe section heading glow-up */
.section-handmailed-card-swipe .hms-head,
section[id^="hm-card-swipe-"] .hms-head {
  text-align: center;
  margin-bottom: 1.2rem;
}

/* Main heading — lively, friendly, confident */
.section-handmailed-card-swipe .hms-title,
section[id^="hm-card-swipe-"] .hms-title {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.7rem, 5vw, 2.1rem);
  text-transform: none;
  background: linear-gradient(90deg, #FF5D73 0%, #FF7C63 40%, #FFD454 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: 0.4px;
  line-height: 1.1;
  text-shadow: 0 2px 2px rgba(0,0,0,0.05);
}

/* Tiny bounce-in animation on load (respect motion prefs) */
@keyframes handmailed-heading-pop {
  0% { transform: scale(.94); opacity: 0; }
  60% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .section-handmailed-card-swipe .hms-title,
  section[id^="hm-card-swipe-"] .hms-title {
    animation: handmailed-heading-pop .4s cubic-bezier(.2,.8,.2,1) both;
  }
}

/* Subheading — handwritten charm to offset bold title */
.section-handmailed-card-swipe .hms-sub,
section[id^="hm-card-swipe-"] .hms-sub {
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  font-weight: 500;
  color: #444;
  opacity: .9;
  margin-top: .3rem;
  letter-spacing: .2px;
}
/* Remove default blue tap highlight on mobile browsers */
.section-handmailed-card-swipe .hms-btn,
section[id^="hm-card-swipe-"] .hms-btn {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
/* Tactile press feedback */
.section-handmailed-card-swipe .hms-btn,
section[id^="hm-card-swipe-"] .hms-btn {
  transition: transform .12s cubic-bezier(.2,.8,.2,1), filter .12s cubic-bezier(.2,.8,.2,1), box-shadow .12s cubic-bezier(.2,.8,.2,1);
}

/* Programmatic press class (see JS below) */
.section-handmailed-card-swipe .hms-btn.is-pressed,
section[id^="hm-card-swipe-"] .hms-btn.is-pressed {
  transform: translate(3px, 3px) scale(.985);
  filter: drop-shadow(5px 5px 0 #1a1446) drop-shadow(0 4px 10px rgba(0,0,0,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.06);
}

/* Keep tap highlight off (cleaner press) */
.section-handmailed-card-swipe .hms-btn,
section[id^="hm-card-swipe-"] .hms-btn {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
