/** Shopify CDN: Minification failed

Line 265:2 Expected "}" to go with "{"

**/
/* Ragon cinematic scroll. Built 2026-08-31.
   Grade travels light -> dark -> light.

   Pinning is position:sticky, not a JS pin. Horizon scrolls DIV.page-wrapper
   rather than the window, and sticky pins inside whatever ancestor actually
   scrolls without anything having to know which one that is.

   Reduced motion collapses every scene to normal flow: no pin, no canvas,
   complete and buyable. */

.rgn {
  --rgn-max: 1240px;
  --rgn-gut: clamp(20px, 5vw, 64px);
  --rgn-sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rgn-serif: ui-serif, Georgia, "Times New Roman", serif;
  background: var(--rgn-light);
  color: var(--rgn-ink);
  font-family: var(--rgn-sans);
}

.rgn *, .rgn *::before, .rgn *::after { box-sizing: border-box; }

.rgn-h1 {
  font-family: var(--rgn-serif); font-weight: 400;
  font-size: clamp(1.75rem, 4.2vw, 3.4rem);
  line-height: 1.08; letter-spacing: -0.015em;
  margin: 0 0 .6rem; max-width: 18ch;
}
.rgn-h2 {
  font-family: var(--rgn-serif); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.7rem);
  line-height: 1.12; letter-spacing: -0.012em;
  margin: 0 0 1rem; max-width: 22ch;
}
.rgn-lede { font-size: clamp(1.02rem, 1.5vw, 1.3rem); line-height: 1.55; max-width: 46ch; margin: 0; }
.rgn-body { font-size: 1.02rem; line-height: 1.65; max-width: 58ch; margin: 0 0 1.4rem; }
.rgn-note { font-size: .95rem; line-height: 1.6; max-width: 52ch; opacity: .82; margin: 0; }
.rgn-note--tight { margin-top: 1.2rem; }

/* ---------- scenes: tall wrapper, sticky inner ---------- */
.rgn-hero  { height: 260svh; position: relative; }
.rgn-macro { height: 240svh; position: relative; background: var(--rgn-dark); }
.rgn-build { height: 300svh; position: relative; background: var(--rgn-dark); }

.rgn-hero__sticky,
.rgn-macro__sticky,
.rgn-build__sticky {
  position: sticky; top: 0;
  height: 100svh; width: 100%;
  display: grid; align-content: center; justify-items: stretch;
  gap: 1.2rem; padding: var(--rgn-gut);
  overflow: hidden;
}

/* The scroll hint is absolutely placed at the bottom of the hero.Without a
   reserved gutter the CTA button grows down into it and the two collide. */
.rgn-hero__sticky { padding-bottom: calc(var(--rgn-gut) + 3.25rem); }

.rgn--dark { color: #f2efe9; }
.rgn--dark .rgn-note { opacity: .72; }

/* ---------- hero ---------- */
.rgn-hero__stage { position: relative; width: min(100%, var(--rgn-max)); aspect-ratio: 16 / 9; margin-inline: auto; }
.rgn-hero__lcp, .rgn-hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.rgn-hero__canvas { opacity: 0; transition: opacity .25s ease; }
.rgn-hero__canvas.is-ready { opacity: 1; }
.rgn-hero__stage:has(.is-ready) .rgn-hero__lcp { opacity: 0; }

.rgn-hero__copy { width: min(100%, var(--rgn-max)); margin-inline: auto; }
.rgn-price { display: flex; align-items: baseline; gap: .6rem; margin: 0; font-size: 1.15rem; }
.rgn-price__now { font-weight: 600; }
.rgn-price__was { opacity: .5; }
.rgn-scrollhint {
  position: absolute; bottom: calc(var(--rgn-gut) / 2); left: 50%; transform: translateX(-50%);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; opacity: .5; margin: 0;
}

/* ---------- beats ---------- */
.rgn-beat { padding: clamp(5rem, 16vh, 11rem) var(--rgn-gut); max-width: var(--rgn-max); margin-inline: auto; }

/* ---------- macro ---------- */
.rgn-macro__stage { position: relative; width: min(100%, var(--rgn-max)); aspect-ratio: 16 / 9; margin-inline: auto; }
.rgn-macro__poster, .rgn-macro__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border-radius: 4px;
}
.rgn-macro__canvas { opacity: 0; transition: opacity .25s ease; object-fit: contain; }
.rgn-macro__canvas.is-ready { opacity: 1; }
.rgn-macro__copy { width: min(100%, var(--rgn-max)); margin-inline: auto; }

/* ---------- construction ---------- */
.rgn-build__head, .rgn-build__foot { width: min(100%, var(--rgn-max)); margin-inline: auto; }
.rgn-build__foot { font-size: .95rem; opacity: .75; margin: 0; }
.rgn-build__stage {
  position: relative; width: 100%; height: 100%; min-height: 0;
  aspect-ratio: 4 / 3;
  perspective: 2000px; transform-style: preserve-3d;
}
.rgn-layer {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
  transform-style: preserve-3d; will-change: transform;
}
/* Per-layer scale. Capping every part at the same percentage made the lining
   shell render larger than the quilted front panel it sits inside, which read
   as a much bigger bag than this actually is. These percentages keep the parts
   in true relative proportion to each other, with the front panel as the
   reference, and keep the whole assembly modest. It is a small bag and it
   should look like one. */
.rgn-layer img { width: auto; height: auto; object-fit: contain; display: block; }
.rgn-layer[data-rgn-layer="1"] img { max-width: calc(30% * var(--rgn-part-scale, 1)); max-height: calc(13% * var(--rgn-part-scale, 1)); }  /* bow and buckle */
.rgn-layer[data-rgn-layer="2"] img { max-width: calc(38% * var(--rgn-part-scale, 1)); max-height: calc(18% * var(--rgn-part-scale, 1)); }  /* quilted front panel, the reference */
.rgn-layer[data-rgn-layer="3"] img { max-width: calc(34% * var(--rgn-part-scale, 1)); max-height: calc(8% * var(--rgn-part-scale, 1)); }   /* top zip */
.rgn-layer[data-rgn-layer="4"] img { max-width: calc(34% * var(--rgn-part-scale, 1)); max-height: calc(13% * var(--rgn-part-scale, 1)); }  /* lining shell, sits inside the panel */
.rgn-layer[data-rgn-layer="5"] img { max-width: calc(38% * var(--rgn-part-scale, 1)); max-height: calc(14% * var(--rgn-part-scale, 1)); }  /* strap */


/* ---------- construction: labels beside the stage ---------- */
.rgn-build__row {
  display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  width: min(100%, var(--rgn-max)); margin-inline: auto; flex: 1 1 auto; min-height: 0;
}
.rgn-build__labels {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(.9rem, 2.2vh, 1.6rem);
}
.rgn-lab {
  display: grid; gap: .2rem;
  border-left: 1px solid rgba(242,239,233,.28); padding-left: .9rem;
  opacity: .18; transform: translateX(-6px);
  transition: opacity .35s ease, transform .35s ease;
}
.rgn-lab.is-on { opacity: 1; transform: none; }
.rgn-lab__name {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3;
}
.rgn-lab__mat { font-size: .82rem; line-height: 1.45; opacity: .72; }

/* ---------- colours ---------- */
.rgn-colours { padding: clamp(5rem, 14vh, 9rem) var(--rgn-gut); max-width: var(--rgn-max); margin-inline: auto; text-align: center; }
.rgn-colours .rgn-h2, .rgn-colours .rgn-note { margin-inline: auto; }
.rgn-colours__stage { position: relative; aspect-ratio: 1 / 1; max-width: 30rem; margin: 2rem auto 1.4rem; }
.rgn-colours__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s ease; }
.rgn-colours__shot.is-on { opacity: 1; }
.rgn-swatches { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.rgn-swatch {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid rgba(0,0,0,.16); background: transparent; color: inherit;
  border-radius: 999px; padding: .5rem .9rem; cursor: pointer; font: inherit; font-size: .9rem;
}
.rgn-swatch:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.rgn-swatch.is-on { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.rgn-swatch__dot { width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); display: block; }

/* ---------- it is small ---------- */
.rgn-small { padding: clamp(5rem, 14vh, 9rem) var(--rgn-gut); max-width: var(--rgn-max); margin-inline: auto; }
.rgn-fits { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.rgn-fits li { border: 1px solid rgba(0,0,0,.16); border-radius: 999px; padding: .42rem .85rem; font-size: .9rem; }

/* ---------- pillars ---------- */
.rgn-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
  padding: 0 var(--rgn-gut) clamp(4rem, 12vh, 7rem);
  max-width: var(--rgn-max); margin-inline: auto;
}
.rgn-pillar__t { font-size: 1rem; font-weight: 650; margin: 0 0 .4rem; }
.rgn-pillar__b { font-size: .95rem; line-height: 1.55; margin: 0; opacity: .85; }

/* ---------- close ---------- */
.rgn-close {
  padding: clamp(4rem, 12vh, 8rem) var(--rgn-gut) clamp(7rem, 16vh, 10rem);
  max-width: var(--rgn-max); margin-inline: auto;
}
.rgn-trustrow {
  list-style: none; padding: 0; margin: 0 0 1.4rem;
  display: flex; flex-wrap: wrap; gap: .6rem 2.4rem; font-size: .95rem;
}
.rgn-trustrow li { display: flex; align-items: center; gap: .5rem; }
.rgn-trustrow li::before {
  content: ""; width: .45rem; height: .45rem; border-radius: 50%;
  background: currentColor; opacity: .45; flex: none;
}
.rgn-close__cta { margin: 1.8rem 0 0; max-width: 22rem; }
.rgn-colours__cta { margin: 1.6rem 0 0; }
.rgn-priceline { display: flex; align-items: baseline; gap: .6rem; margin: 1rem 0 1.4rem; font-size: 1.15rem; }
.rgn-cta--inline { width: auto; display: inline-flex; }

.rgn-cta {
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--rgn-ink); color: #fff; font: inherit; font-weight: 600;
  padding: 1rem 1.4rem; min-height: 48px;
}
.rgn-cta:focus-visible { outline: 2px solid var(--rgn-ink); outline-offset: 3px; }
.rgn-cta[disabled] { opacity: .55; cursor: default; }
.rgn-cta--sm { width: auto; padding: .7rem 1.1rem; }
.rgn-terms { font-size: .9rem; line-height: 1.6; margin: .7rem 0 0; max-width: 56ch; }
.rgn-terms--muted { opacity: .72; }

/* ---------- sticky buy bar ---------- */
.rgn-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: color-mix(in srgb, var(--rgn-light) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,.1);
  transform: translateY(100%); transition: transform .28s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.rgn-sticky.is-on { transform: translateY(0); }
.rgn-sticky__in {
  display: flex; align-items: center; gap: 1rem;
  max-width: var(--rgn-max); margin-inline: auto; padding: .7rem var(--rgn-gut);
}
.rgn-sticky__name { font-weight: 600; font-size: .95rem; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgn-sticky__meta { display: flex; gap: .6rem; align-items: baseline; font-size: .9rem; opacity: .8; }

/* ---------- reveals ---------- */
.rgn-motion-on [data-rgn-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.rgn-motion-on [data-rgn-reveal].is-in { opacity: 1; transform: none; }

/* ---------- mobile ---------- */
@media (max-width: 749px) {
  .rgn-pillars { grid-template-columns: 1fr; gap: 1.5rem; }
  .rgn-trustrow { gap: .5rem 1.5rem; font-size: .875rem; }
  .rgn-hero { height: 220svh; }
  .rgn-macro { height: 210svh; }
  .rgn-build { height: 260svh; }
  .rgn-tiers { grid-template-columns: 1fr; }
  .rgn-layer[data-rgn-layer="1"] img { max-width: calc(48% * var(--rgn-part-scale, 1)); max-height: calc(12% * var(--rgn-part-scale, 1)); }
  .rgn-layer[data-rgn-layer="2"] img { max-width: calc(60% * var(--rgn-part-scale, 1)); max-height: calc(18% * var(--rgn-part-scale, 1)); }
  .rgn-layer[data-rgn-layer="3"] img { max-width: calc(58% * var(--rgn-part-scale, 1)); max-height: calc(8% * var(--rgn-part-scale, 1)); }
  .rgn-layer[data-rgn-layer="4"] img { max-width: calc(56% * var(--rgn-part-scale, 1)); max-height: calc(13% * var(--rgn-part-scale, 1)); }
  .rgn-layer[data-rgn-layer="5"] img { max-width: calc(62% * var(--rgn-part-scale, 1)); max-height: calc(14% * var(--rgn-part-scale, 1)); }
  
/* ---------- reduced motion: unpinned, complete, buyable ---------- */
@media (prefers-reduced-motion: reduce) {
  .rgn-hero, .rgn-macro, .rgn-build { height: auto; }
  .rgn-hero__sticky, .rgn-macro__sticky, .rgn-build__sticky {
    position: static; height: auto; overflow: visible;
    padding-block: clamp(3rem, 10vh, 6rem);
  }
  .rgn-hero__canvas, .rgn-macro__canvas { display: none !important; }
  .rgn-hero__lcp, .rgn-macro__poster { opacity: 1 !important; position: static; height: auto; }
  .rgn-hero__stage, .rgn-macro__stage { aspect-ratio: auto; }
  .rgn-scrollhint { display: none; }
  .rgn-build__stage { aspect-ratio: auto; perspective: none; display: grid; gap: 1.6rem; }
  .rgn-layer { position: static; inset: auto; transform: none !important;
    display: grid; gap: .5rem; justify-items: center; }
  .rgn-layer img { max-width: calc(46% * var(--rgn-part-scale, 1)); max-height: none; }
  .rgn-layer[data-rgn-layer] img { max-width: calc(46% * var(--rgn-part-scale, 1)); max-height: none; }