/** Shopify CDN: Minification failed

Line 17:0 All "@import" rules must come first

**/
/* ==================================================================
   BUILD STAMP — read by ss-customizer.js to detect a mismatched set.
   The three files (liquid / js / css) MUST carry the same build id.
   Bump all three together whenever any one of them changes.
   ================================================================== */
.ss-customizer{
  --ss-build:"2026-09-07a";
  /* BRAND INK - the brownish green. Change it here, not in the rules below. */
  --ss-ink:#645631;
}

@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&display=swap');
/* SS CUSTOMIZER — Broadcast 8.1 safe overrides */
.ss-customizer,.ss-customizer *{font-family:gardein,sans-serif!important;box-sizing:border-box!important}
.ss-customizer__wrap{max-width:min(1440px,calc(100vw - 48px))!important;margin:0 auto!important;padding:0!important}
@media(max-width:900px){
  /* On mobile, 100vw can include overflow width (self-reinforcing loop) — use 100% instead */
  .ss-customizer__wrap{max-width:100%!important;width:100%!important;overflow-x:hidden!important;}
}
/* Outer layout: single column (aside is hidden, main takes full width) */
.ss-customizer__layout{display:block!important;position:relative!important}
/* Inner two-column: hero image on left, builder steps on right */
.ss-customizer__main{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0 60px!important;align-items:start!important}
@media(max-width:900px){
  .ss-customizer__main{grid-template-columns:1fr!important;gap:0!important}
}

/* ── Hero column — sticky, flex row: [selections panel] [journal image] ─── */
.ss-customizer__hero{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:20px!important;
  padding:0!important;
  margin-bottom:0!important;
  position:sticky!important;
  top:0!important;
  height:100svh!important;
  overflow:hidden!important;
}
@media(max-width:900px){
  /* Hero: explicit height (not just max) so it actually clamps.
     svh has patchy iOS Safari support — use vh for reliability.
     min-width:0 allows the grid item to shrink to column width (default is auto = won't shrink). */
  .ss-customizer__hero{
    flex-direction:column!important;
    position:static!important;
    height:42vh!important;
    max-height:42vh!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    padding:0!important;
    gap:0!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
  }
  /* Browse wrap: fills the hero; min-width:0 prevents flex child from overflowing */
  .ss-hero-browse-wrap{
    flex:1 1 auto!important;
    height:100%!important;
    max-height:42vh!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  /* Carousel wrap: fill the browse wrap, hard-clamped to viewport */
  .ss-hero-carousel-wrap{
    flex:1 1 auto!important;
    height:100%!important;
    max-height:none!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  /* Carousel track: fill the wrap */
  .ss-hero-carousel{
    height:100%!important;
  }
  /* Slide: fill the track height */
  .ss-hero-carousel__slide{
    height:100%!important;
  }
  /* Hero image: scale DOWN to fit the container — shows full journal, no cropping */
  .ss-hero__base{
    height:100%!important;
    width:100%!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
  /* Design state also clipped on mobile */
  [data-ss-hero-design]{
    max-height:42vh!important;
    overflow:hidden!important;
  }
  /* Dots: outside the clipped area */
  .ss-hero-carousel__dots{
    flex-shrink:0!important;
    padding:8px 0 4px!important;
  }
}

/* ── Selections panel — left of hero image ────────────────────────── */
.ss-hero-selection-panel{
  flex:0 0 150px!important;
  width:150px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:0!important;
  padding:0 8px 0 0!important;
  align-self:center!important;
}
.ss-hero-selection-panel__label{
  font-size:9px!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  opacity:.65!important;
  margin:0 0 14px!important;
  padding-bottom:12px!important;
  border-bottom:1px solid rgba(0,0,0,.08)!important;
}
.ss-hero-selection-panel__list{
  list-style:none!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
}
/* Each item: key above, value below — stacked for narrow panel */
.ss-hero-selection-panel__list .ss-summary__item{
  display:flex!important;
  flex-direction:column!important;
  gap:1px!important;
  padding:9px 0!important;
  border-bottom:1px solid rgba(0,0,0,.07)!important;
  border-right:none!important;
  margin:0!important;
}
.ss-hero-selection-panel__list .ss-summary__item:last-child{
  border-bottom:none!important;
}
.ss-hero-selection-panel__list .ss-summary__key{
  font-size:9px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  opacity:.55!important;
}
.ss-hero-selection-panel__list .ss-summary__key::after{
  content:none!important; /* remove the colon override from base styles */
}
.ss-hero-selection-panel__list .ss-summary__val{
  font-size:12px!important;
  font-weight:600!important;
  letter-spacing:-.01em!important;
  opacity:1!important;
}
.ss-hero-selection-panel__list .ss-summary__val--pending{
  font-weight:400!important;
  opacity:.22!important;
  font-style:italic!important;
}
/* Hide the panel on mobile — builder steps show progress there */
@media(max-width:900px){
  .ss-hero-selection-panel{ display:none!important; }
}

/* ── Hero carousel ─────────────────────────────────────────────── */
/* Outer wrapper — fills remaining space in hero flex row */
.ss-hero-browse-wrap{
  flex:1!important;
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
}

/* Inner clip — overflow:hidden clips the peek card; border-radius frames image */
.ss-hero-carousel-wrap{
  position:relative!important;
  display:block!important;
  overflow:hidden!important;
  border-radius:20px!important;
  width:100%!important;
  cursor:grab!important;
  box-shadow:0 4px 32px rgba(0,0,0,0.09)!important;
}
.ss-hero-carousel-wrap:active{cursor:grabbing!important;}

/* Design state: flex child, fills remaining space; block overrides ss-hero-stack's inline-block */
[data-ss-hero-design]{
  flex:1!important;
  min-width:0!important;
  display:block!important;
  max-width:100%!important;
  width:100%!important;
  cursor:default!important;
  animation:ss-fade-in 0.35s ease!important;
  border-radius:20px!important;
  overflow:hidden!important;
  box-shadow:0 4px 32px rgba(0,0,0,0.09)!important;
  position:relative!important;
}
@keyframes ss-fade-in{from{opacity:0;transform:scale(0.99)}to{opacity:1;transform:scale(1)}}

.ss-hero-carousel{
  display:flex!important;
  overflow-x:scroll!important;
  scroll-snap-type:x mandatory!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
  line-height:0!important;
}
.ss-hero-carousel::-webkit-scrollbar{display:none!important;}

.ss-hero-carousel__slide{
  /* Peek: each slide is slightly narrower than the wrap so the next card's edge shows */
  flex:0 0 calc(100% - 44px)!important;
  scroll-snap-align:start!important;
  position:relative!important;
  margin-right:8px!important;
  cursor:pointer!important;
}

/* Overlay layer */
.ss-hero-overlay-layer{
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
}

/* ── Dots — pill / dash style ─────────────────────────────────── */
.ss-hero-carousel__dots{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:11px 0 2px!important;
  pointer-events:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  background:none!important;
  backdrop-filter:none!important;
  border-radius:0!important;
}
.ss-hero-carousel__dot{
  width:20px!important;
  height:3px!important;
  border-radius:2px!important;
  background:rgba(0,0,0,0.18)!important;
  border:none!important;
  padding:0!important;
  cursor:pointer!important;
  transition:background 0.25s ease, width 0.25s ease!important;
  flex-shrink:0!important;
}
.ss-hero-carousel__dot--active{
  width:32px!important;
  background:rgba(0,0,0,0.65)!important;
  transform:none!important;
}

/* ── Design state overlays ──────────────────────────────────────── */
.ss-hero-stack{
  position:relative!important;
  display:inline-block!important;
  line-height:0!important;
}

/* Base hero image — constrained to viewport height in sticky left column */
.ss-hero__base{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:min(600px, calc(100svh - 80px))!important;
  object-fit:cover!important;
  border-radius:0!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
/* Design state: natural proportions so overlays align on all journal sizes (desktop) */
[data-ss-hero-design] .ss-hero__base{
  max-height:none!important;
  object-fit:fill!important;
}
/* Mobile: design state hero must also be contained, not filled — same as browse carousel */
@media(max-width:900px){
  [data-ss-hero-design] .ss-hero__base{
    height:100%!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
  [data-ss-hero-design]{
    height:100%!important;
    max-height:42vh!important;
    overflow:hidden!important;
  }
}

/* ── Hero overlay summary — floats on design state illustration ── */
.ss-hero-overlay-summary{
  position:absolute!important;
  z-index:10!important;
  min-width:130px!important;
  max-width:170px!important;
  background:rgba(248,244,237,0.88)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  border-radius:12px!important;
  padding:13px 15px 11px!important;
  pointer-events:none!important;
  /* Hidden — selections panel to the left of the hero replaces this */
  display:none!important;
}
.ss-hero-overlay-summary__list{
  list-style:none!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
}
/* Override summary item styles inside the overlay */
.ss-hero-overlay-summary__list .ss-summary__item{
  font-size:11px!important;
  display:flex!important;
  align-items:baseline!important;
  gap:5px!important;
  padding:0!important;
  margin:0!important;
  border:none!important;
  line-height:1.35!important;
}
.ss-hero-overlay-summary__list .ss-summary__key{
  opacity:.48!important;
  flex-shrink:0!important;
  font-size:10px!important;
  letter-spacing:.02em!important;
}
.ss-hero-overlay-summary__list .ss-summary__val{
  font-weight:600!important;
  font-size:11px!important;
  letter-spacing:-.01em!important;
}
.ss-hero-overlay-summary__list .ss-summary__val--pending{
  font-weight:400!important;
  opacity:.22!important;
  font-style:italic!important;
}

/* Elastic overlay */
.ss-hero__elastic{
  position:absolute!important;
  inset:0!important;
  background-color:transparent;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-size:contain!important;
  mask-size:contain!important;
  -webkit-mask-position:center center!important;
  mask-position:center center!important;
  -webkit-mask-mode:alpha!important;
  mask-mode:alpha!important;
  pointer-events:none!important;
  border-radius:20px!important;
  transition:background-color .2s ease!important;
}

/* Shading layer over the elastic tint — makes it read as a round cord, not a
   flat tint. Matches the tint's mask contain/center so it aligns to the same
   visible box (object-fit:contain, not a stretched 100%x100% img). */
.ss-hero__elastic-shading{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  mix-blend-mode:overlay!important;
  pointer-events:none!important;
  border-radius:20px!important;
}

/* Initials overlay */
.ss-initials-overlay{
  position:absolute!important;
  font-family:'Goudy Bookletter 1911',Georgia,serif!important;
  line-height:1!important;
  letter-spacing:.04em!important;
  pointer-events:none!important;
  white-space:nowrap!important;
  transition:color .25s ease, text-shadow .25s ease!important;
  transform:none!important;
}
/* Mobile: use the CSS custom properties set via Liquid inline style.
   Anchored by the RIGHT edge (see the desktop inline style) so the last
   initial stays put and extra letters grow leftward. */
@media(max-width:900px){
  .ss-initials-overlay{
    right:var(--ss-initials-right-m)!important;
    bottom:var(--ss-initials-bottom-m)!important;
  }
}

.ss-initials-overlay[data-foil="blind"]{
  color:rgba(0,0,0,0.12)!important;
  mix-blend-mode:multiply!important;
  text-shadow:0 1px 1px rgba(255,255,255,0.25)!important;
}
.ss-initials-overlay[data-foil="gold"]{
  color:#b8892a!important;
  text-shadow:0 1px 2px rgba(255,220,100,0.35)!important;
}
.ss-initials-overlay[data-foil="silver"]{
  color:#8e97a3!important;
  text-shadow:0 1px 2px rgba(220,230,240,0.4)!important;
}

/* Tassel overlay */
.ss-hero__tassel{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  pointer-events:none!important;
  border-radius:20px!important;
}

/* ================================================================
   BUILDER — typography, step structure, inputs
   ================================================================ */

.ss-customizer__builder{
  max-width:100%!important;
  margin:0!important;
  text-align:center!important;
  padding:48px 24px 60px!important;
}
@media(max-width:900px){
  .ss-customizer__builder{
    padding:24px 20px 48px!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }
}

/* Product title — commanding, editorial */
.ss-customizer__title{
  margin:0 0 6px!important;
  font-size:30px!important;
  line-height:1.1!important;
  letter-spacing:-.02em!important;
  font-weight:600!important;
  text-align:center!important;
}

/* Subtitle / note — airy, refined */
.ss-customizer__note{
  margin:0 0 32px!important;
  font-size:14px!important;
  opacity:.55!important;
  letter-spacing:.02em!important;
  text-align:center!important;
}

/* ── Step labels ─────────────────────────────────────────────────── */
/* Primary step label — editorial, not form-field */
.ss-customizer__label{
  display:block!important;
  margin:0 0 18px!important;
  font-size:20px!important;
  font-weight:500!important;
  letter-spacing:-.01em!important;
  line-height:1.2!important;
  text-align:center!important;
  opacity:1!important;
}
/* Secondary label — sub-prompt beneath main label */
.ss-customizer__label--sub{
  font-size:13px!important;
  font-weight:400!important;
  opacity:.5!important;
  letter-spacing:.01em!important;
  margin-top:-10px!important;
  margin-bottom:18px!important;
}

/* Step progress — thin divider line above each step */
.ss-step + .ss-step .ss-customizer__step-head::before,
.ss-customizer__step-divider{
  display:block!important;
  content:""!important;
  width:40px!important;
  height:1px!important;
  background:rgba(0,0,0,0.12)!important;
  margin:0 auto 28px!important;
}

/* Text input */
.ss-customizer__input{
  width:100%!important;
  max-width:480px!important;
  margin:0 auto!important;
  padding:14px 18px!important;
  border:1px solid rgba(0,0,0,.15)!important;
  border-radius:10px!important;
  background:#fff!important;
  text-align:center!important;
  font-size:15px!important;
  letter-spacing:.01em!important;
  transition:border-color .2s ease, box-shadow .2s ease!important;
  outline:none!important;
}
.ss-customizer__input:focus{
  border-color:rgba(0,0,0,.45)!important;
  box-shadow:0 0 0 3px rgba(0,0,0,0.05)!important;
}

/* ================================================================
   COLOR CAROUSEL — physical journal photos, Step 1
   ================================================================ */

.ss-color-carousel{
  display:flex!important;
  gap:10px!important;
  overflow-x:auto!important;
  scroll-snap-type:x mandatory!important;
  -webkit-overflow-scrolling:touch!important;
  padding:4px 4px 14px!important;
  margin:0 0 22px!important;
  scrollbar-width:none!important;
  cursor:grab!important;
}
.ss-color-carousel::-webkit-scrollbar{display:none!important;}
.ss-color-carousel:active{cursor:grabbing!important;}

/* Desktop: color carousel only (NOT compact) shows as 4-per-row grid */
@media(min-width:901px){
  .ss-color-carousel:not(.ss-color-carousel--compact){
    flex-wrap:wrap!important;
    overflow-x:visible!important;
    scroll-snap-type:none!important;
    cursor:default!important;
    justify-content:center!important;
  }
}

.ss-color-carousel__slide{
  scroll-snap-align:start!important;
  flex:0 0 auto!important;
  width:148px!important;
  border-radius:16px!important;
  overflow:hidden!important;
  border:2px solid transparent!important;
  cursor:pointer!important;
  margin:0!important;
  padding:0!important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease!important;
  background:#f5f3ef!important;
}
/* Desktop grid: 4-per-row only on the main color carousel, not compact */
@media(min-width:901px){
  .ss-color-carousel:not(.ss-color-carousel--compact) .ss-color-carousel__slide{
    flex:0 0 calc(25% - 8px)!important;
    width:auto!important;
  }
}

/* ── Compact carousels — hidden; chip rows shown instead for binding/closure/tassel ── */
.ss-color-carousel--compact{
  display:none!important;
}
.ss-color-carousel__slide:hover{
  box-shadow:0 6px 20px rgba(0,0,0,.1)!important;
  transform:translateY(-1px)!important;
}
.ss-color-carousel__slide--active{
  border-color:#1a1a1a!important;
  box-shadow:0 8px 24px rgba(0,0,0,.14)!important;
  transform:translateY(-1px)!important;
}

.ss-color-carousel__slide img{
  width:100%!important;
  aspect-ratio:3/4!important;
  object-fit:cover!important;
  display:block!important;
  pointer-events:none!important;
}

.ss-color-carousel__placeholder{
  width:100%!important;
  aspect-ratio:3/4!important;
  display:block!important;
}

.ss-color-carousel__slide figcaption{
  font-size:11px!important;
  text-align:center!important;
  padding:7px 6px 9px!important;
  opacity:.65!important;
  line-height:1.2!important;
  letter-spacing:.03em!important;
}

/* Compact carousel — elastics + tassels */
.ss-color-carousel--compact{
  gap:7px!important;
  padding:4px 4px 10px!important;
  margin:0 auto 12px!important;
  justify-content:center!important;
}
.ss-color-carousel--compact .ss-color-carousel__slide{
  width:58px!important;
  border-radius:10px!important;
}
.ss-color-carousel--compact .ss-color-carousel__slide img{
  aspect-ratio:1/1!important;
}
.ss-color-carousel--compact .ss-color-carousel__placeholder{
  aspect-ratio:1/1!important;
}
.ss-color-carousel--compact .ss-color-carousel__slide figcaption{
  font-size:9px!important;
  padding:3px 2px 5px!important;
}

/* ================================================================
   CHIPS — swatches, foil, binding, closure, stacks
   ================================================================ */

/* Color chips: hidden — the large photo carousel is the color picker UI.
   Double-class selector (specificity 0,2,0) beats .ss-choice-row (0,1,0) regardless of order. */
.ss-choice-row.ss-choice-row--color-chips{display:none!important;}
/* Elastic/tassel chips: VISIBLE — compact carousels are hidden, these are now the UI */
/* aria-hidden="true" is removed from the liquid so these are accessible */
.ss-choice-row--elastic-chips{display:flex!important;}
.ss-choice-row--tassel-chips{display:flex!important;}

/* Chip row spacing */
.ss-choice-row{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:20px!important;
  justify-content:center!important;
  margin:14px 0 26px!important;
}
/* Mobile chip row + chip overrides.
   Use .ss-customizer ancestor (specificity 0,2,0) to beat the general rules (0,1,0)
   regardless of source order, so these always win on mobile. */
@media(max-width:900px){
  .ss-customizer .ss-choice-row{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    gap:14px!important;
    flex-wrap:wrap!important;
  }
  .ss-customizer .ss-chip{
    width:68px!important;
  }
}

/* Individual chip */
.ss-chip{
  position:relative!important;
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:8px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  cursor:pointer!important;
  width:80px!important;
}
.ss-chip:before,.ss-chip:after{content:none!important;display:none!important}

/* Hidden radio — full-area click target */
.ss-chip>input{
  position:absolute!important;
  inset:-10px!important;
  opacity:0!important;
  margin:0!important;
  cursor:pointer!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}

/* Swatch circle */
.ss-chip__swatch{
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  border:1px solid rgba(0,0,0,.1)!important;
  transition:transform .18s ease, box-shadow .18s ease!important;
}
.ss-chip:hover .ss-chip__swatch{
  transform:scale(1.06)!important;
  box-shadow:0 3px 10px rgba(0,0,0,.1)!important;
}

/* Label beneath swatch */
.ss-chip__text{
  font-size:11px!important;
  letter-spacing:.02em!important;
  line-height:1.3!important;
  opacity:.75!important;
  text-align:center!important;
}

/* Price tag (foil add-on) */
.ss-chip__price-tag{
  display:block!important;
  font-size:10px!important;
  opacity:.5!important;
  margin-top:1px!important;
  letter-spacing:.01em!important;
}

/* Selected state — swatch outline */
.ss-chip:has(input:checked) .ss-chip__swatch{
  outline:2px solid #111!important;
  outline-offset:4px!important;
  transform:scale(1.06)!important;
}
.ss-chip:has(input:checked) .ss-chip__text{
  opacity:1!important;
}

/* Selected state — text-only chips (stacks, no swatch) */
.ss-chip:not(:has(.ss-chip__swatch)):has(input:checked) .ss-chip__text{
  font-weight:700!important;
  opacity:1!important;
  text-decoration:underline!important;
  text-underline-offset:3px!important;
}

/* ================================================================
   STEP NAVIGATION — Next / Back buttons
   ================================================================ */

.ss-stepper__nav{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:12px!important;
  margin-top:20px!important;
}
.ss-stepper__btn{
  width:auto!important;
  min-width:280px!important;
  background:transparent!important;
  border:1px solid rgba(0,0,0,.22)!important;
  border-radius:999px!important;
  padding:15px 32px!important;
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  text-align:center!important;
  cursor:pointer!important;
  transition:background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease!important;
}
.ss-stepper__btn--primary{
  background:#111!important;
  color:#fff!important;
  border-color:#111!important;
  position:relative!important;
  padding-right:52px!important;
}
.ss-stepper__btn--primary:hover{
  background:#333!important;
  border-color:#333!important;
}
.ss-stepper__btn--primary::after{
  content:"→";
  position:absolute;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  font-size:15px;
  line-height:1;
}
/* Back button — ghost, subdued */
.ss-stepper__btn:not(.ss-stepper__btn--primary){
  border-color:transparent!important;
  opacity:.45!important;
  font-size:12px!important;
  min-width:auto!important;
  padding:10px 20px!important;
}
.ss-stepper__btn:not(.ss-stepper__btn--primary):hover{
  opacity:.8!important;
}
.ss-stepper__btn:disabled{
  opacity:.3!important;
  cursor:not-allowed!important;
}

/* ================================================================
   PRICE DISPLAY — final step ATC area
   ================================================================ */

.ss-price-wrap{
  margin:24px 0 10px!important;
  text-align:center!important;
}
.ss-price-total{
  font-size:34px!important;
  font-weight:600!important;
  letter-spacing:-.03em!important;
  line-height:1!important;
}
.ss-foil-note{
  display:block!important;
  font-size:12px!important;
  opacity:.5!important;
  margin-top:7px!important;
  letter-spacing:.02em!important;
}

/* ================================================================
   SUMMARY ASIDE — hidden; selections live on the hero overlay instead
   ================================================================ */

.ss-customizer__summary{
  display:none!important;
}
.ss-summary{
  border:none!important;
  border-radius:14px!important;
  padding:16px 22px!important;
  background:#f6f2ec!important;
  /* horizontal layout */
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px 0!important;
}
/* "YOUR SELECTIONS" label sits inline at the left */
.ss-summary__title{
  font-size:9px!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  opacity:.4!important;
  margin:0 20px 0 0!important;
  padding:0!important;
  border-bottom:none!important;
  white-space:nowrap!important;
  flex-shrink:0!important;
  align-self:center!important;
}
/* Horizontal list of selection pills */
.ss-summary__list{
  list-style:none!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  gap:2px 0!important;
  flex:1!important;
}
/* Each selection: key · value separated by subtle divider */
.ss-summary__item{
  font-size:12px!important;
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  padding:2px 16px 2px 0!important;
  border-bottom:none!important;
  border-right:1px solid rgba(0,0,0,.1)!important;
  margin-right:16px!important;
  line-height:1.4!important;
}
.ss-summary__item:last-child{
  border-right:none!important;
  margin-right:0!important;
  padding-right:0!important;
}
.ss-summary__key{
  opacity:.5!important;
  letter-spacing:.01em!important;
  flex-shrink:0!important;
}
.ss-summary__key::after{
  content:":"!important;
}
/* Filled-in value */
.ss-summary__val{
  font-weight:600!important;
  letter-spacing:-.01em!important;
}
/* Pending/empty value — shown until user makes selection */
.ss-summary__val--pending{
  font-weight:400!important;
  opacity:.28!important;
  font-style:italic!important;
  letter-spacing:.01em!important;
}
@media(max-width:600px){
  .ss-summary{flex-direction:column!important;align-items:flex-start!important;}
  .ss-summary__list{gap:6px 0!important;}
  .ss-summary__item{border-right:none!important;padding-right:0!important;margin-right:0!important;padding-bottom:6px!important;border-bottom:1px solid rgba(0,0,0,.06)!important;}
  .ss-summary__item:last-child{border-bottom:none!important;}
}

/* ================================================================
   ERRORS
   ================================================================ */

.ss-customizer__error{
  margin-top:14px!important;
  font-size:13px!important;
  color:#8a1f2b!important;
  text-align:center!important;
  letter-spacing:.01em!important;
  opacity:.9!important;
}

/* ================================================================
   UTILITY
   ================================================================ */

[hidden]{display:none!important}

/* ================================================================
   BROADCAST STICKY ATC — suppress when customizer is present
   ================================================================ */
body:has([data-ss-customizer]) [data-sticky-atc],
body:has([data-ss-customizer]) .product__sticky-atc,
body:has([data-ss-customizer]) .sticky-atc,
body:has([data-ss-customizer]) [data-js="sticky-atc"],
body:has([data-ss-customizer]) .js-sticky-atc,
body:has([data-ss-customizer]) .product-sticky-atc-bar {
  display: none !important;
}

/* ================================================================
   POST-CART SUCCESS MODAL
   ================================================================ */

.ss-modal-overlay{
  position:fixed!important;
  inset:0!important;
  background:rgba(0,0,0,.45)!important;
  z-index:9999!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:20px!important;
  opacity:0!important;
  transition:opacity .22s ease!important;
}
.ss-modal-overlay--visible{opacity:1!important;}

.ss-modal{
  background:#fff!important;
  border-radius:24px!important;
  padding:44px 40px 36px!important;
  max-width:780px!important;
  width:100%!important;
  position:relative!important;
  max-height:90vh!important;
  overflow-y:auto!important;
  box-shadow:0 28px 72px rgba(0,0,0,.18)!important;
}

.ss-modal__close{
  position:absolute!important;
  top:18px!important;
  right:20px!important;
  background:transparent!important;
  border:none!important;
  font-size:18px!important;
  cursor:pointer!important;
  opacity:.35!important;
  line-height:1!important;
  padding:6px!important;
  transition:opacity .15s ease!important;
}
.ss-modal__close:hover{opacity:.8!important;}

.ss-modal__success{text-align:center!important;padding-bottom:14px!important;}
.ss-modal__check{
  font-size:32px!important;
  color:#4a7c59!important;
  margin-bottom:10px!important;
  line-height:1!important;
}
.ss-modal__icon-divider{
  text-align:center!important;
  padding:10px 0 14px!important;
}
.ss-modal__icon{
  height:28px!important;
  width:auto!important;
  max-width:160px!important;
  display:inline-block!important;
  object-fit:contain!important;
  opacity:0.8!important;
}
.ss-modal__heading{
  margin:0!important;
  font-size:24px!important;
  font-weight:600!important;
  letter-spacing:-.02em!important;
}
.ss-modal__subhead{
  margin:6px 0 0!important;
  font-size:14px!important;
  opacity:.55!important;
}
.ss-modal__divider{
  border:none!important;
  border-top:1px solid rgba(0,0,0,.08)!important;
  margin:0 0 28px!important;
}
.ss-modal__loading{
  text-align:center!important;
  font-size:13px!important;
  opacity:.45!important;
  padding:20px 0!important;
}

.ss-modal__products{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:14px!important;
  margin-bottom:28px!important;
}
@media(max-width:600px){
  .ss-modal__products{grid-template-columns:repeat(2,1fr)!important;}
}

.ss-modal__product{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  text-decoration:none!important;
  color:inherit!important;
  border-radius:14px!important;
  overflow:hidden!important;
  border:1px solid rgba(0,0,0,.07)!important;
  transition:box-shadow .18s ease, transform .18s ease!important;
}
.ss-modal__product:hover{
  box-shadow:0 6px 20px rgba(0,0,0,.1)!important;
  transform:translateY(-2px)!important;
}
.ss-modal__product-img{
  width:100%!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  display:block!important;
}
.ss-modal__product-info{
  padding:8px 10px 12px!important;
}
.ss-modal__product-title{
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.3!important;
  margin-bottom:3px!important;
}
.ss-modal__product-price{
  font-size:12px!important;
  opacity:.55!important;
}

.ss-modal__actions{
  display:flex!important;
  gap:12px!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
}
.ss-modal__btn{
  display:inline-block!important;
  padding:14px 32px!important;
  border-radius:999px!important;
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  text-align:center!important;
  cursor:pointer!important;
  border:1px solid #111!important;
  transition:background .18s, color .18s!important;
}
.ss-modal__btn--primary{
  background:#111!important;
  color:#fff!important;
}
.ss-modal__btn--primary:hover{background:#333!important;}
.ss-modal__btn--ghost{
  background:transparent!important;
  color:#111!important;
}
.ss-modal__btn--ghost:hover{background:rgba(0,0,0,.04)!important;}

/* ================================================================
   PERSONAL TOUCHES STEP — Ready state, personalization toggle,
   panel, stack bundle counters
   ================================================================ */

/* Ready state */
.ss-ready-state{text-align:center!important;padding:28px 0 20px!important}
.ss-ready-state__check{font-size:28px!important;line-height:1!important;margin-bottom:14px!important;opacity:.65!important}
.ss-ready-state__title{font-size:22px!important;font-weight:700!important;letter-spacing:.01em!important;margin-bottom:8px!important}
.ss-ready-state__sub{font-size:14px!important;opacity:.7!important;max-width:400px!important;margin:0 auto!important;line-height:1.5!important}

/* Personalization toggle button */
.ss-personalization-toggle{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:100%!important;
  margin:18px auto 0!important;
  padding:14px 24px!important;
  background:transparent!important;
  border:1px solid rgba(0,0,0,.18)!important;
  border-radius:999px!important;
  cursor:pointer!important;
  font-size:14px!important;
  letter-spacing:.02em!important;
  transition:border-color .2s, opacity .2s!important;
}
.ss-personalization-toggle:hover{border-color:rgba(0,0,0,.5)!important}
.ss-personalization-toggle__arrow{
  font-size:18px!important;
  line-height:1!important;
  transition:transform .25s!important;
}
.ss-personalization-toggle.is-open .ss-personalization-toggle__arrow{transform:rotate(45deg)!important}

/* Personalization panel */
.ss-personalization-panel{
  margin-top:22px!important;
  padding:24px!important;
  border:1px solid rgba(0,0,0,.1)!important;
  border-radius:18px!important;
  background:#faf9f7!important;
  text-align:center!important;
}
.ss-personalization-panel__title{font-size:15px!important;font-weight:700!important;letter-spacing:.03em!important;margin-bottom:6px!important}
.ss-personalization-panel__note{font-size:13px!important;opacity:.65!important;margin-bottom:20px!important}

/* Individual sections inside panel */
.ss-personalization-section{
  margin-top:22px!important;
  padding-top:22px!important;
  border-top:1px solid rgba(0,0,0,.08)!important;
  text-align:center!important;
}
.ss-personalization-section:first-child{margin-top:0!important;padding-top:0!important;border-top:0!important}
.ss-personalization-section__heading{
  font-size:13px!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
  opacity:.6!important;
  margin-bottom:12px!important;
}

/* Stack bundle note + total indicator */
.ss-bundle-note{font-size:13px!important;opacity:.65!important;margin:0 0 18px!important;line-height:1.5!important}
.ss-bundle-total{font-size:13px!important;font-weight:600!important;letter-spacing:.02em!important;margin-top:14px!important;opacity:.8!important;text-align:center!important}

/* Stack bundle grid */
.ss-stack-bundle-grid{display:flex!important;flex-wrap:nowrap!important;gap:10px!important;justify-content:center!important;margin:0 auto!important;width:100%!important}

/* Individual stack bundle card */
.ss-stack-bundle-item{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:6px!important;
  padding:12px 8px!important;
  border:1px solid rgba(0,0,0,.14)!important;
  border-radius:14px!important;
  background:#fff!important;
  flex:1!important;
  min-width:0!important;
  text-align:center!important;
  transition:border-color .2s!important;
}
.ss-stack-bundle-item.is-selected{border-color:#111!important}
.ss-stack-bundle-item__name{font-size:13px!important;font-weight:600!important;line-height:1.3!important}
.ss-stack-bundle-item__sub{font-size:11px!important;opacity:.6!important;letter-spacing:.04em!important;text-transform:uppercase!important}

/* Counter (− qty +) */
.ss-counter{display:flex!important;align-items:center!important;gap:10px!important;margin-top:8px!important}
.ss-counter__btn{
  width:30px!important;
  height:30px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(0,0,0,.2)!important;
  border-radius:50%!important;
  background:#fff!important;
  cursor:pointer!important;
  font-size:16px!important;
  line-height:1!important;
  padding:0!important;
  transition:opacity .15s, border-color .15s!important;
}
.ss-counter__btn:hover:not(:disabled){border-color:#111!important}
.ss-counter__btn:disabled{opacity:.28!important;cursor:not-allowed!important}
.ss-counter__val{font-size:16px!important;font-weight:700!important;min-width:22px!important;text-align:center!important;line-height:1!important}

/* Wide chip variant for None / Add toggles */
.ss-chip--wide{width:auto!important;min-width:100px!important;flex-direction:row!important;padding:10px 18px!important;border:1px solid rgba(0,0,0,.18)!important;border-radius:999px!important;gap:0!important}
.ss-chip--wide:has(input:checked){border-color:#111!important;font-weight:600!important}

/* ================================================================
   MOBILE SELECTION RECAP — shown only on the final step on mobile.
   Hidden on desktop (desktop has the hero overlay + sidebar instead).
   ================================================================ */

/* Hidden everywhere by default */
.ss-mobile-recap{display:none!important}

@media(max-width:900px){
  .ss-mobile-recap{
    display:block!important;
    margin:18px auto 0!important;
    max-width:320px!important;
    background:rgba(0,0,0,.04)!important;
    border-radius:14px!important;
    padding:14px 18px!important;
    text-align:left!important;
  }

  .ss-mobile-recap__list{
    list-style:none!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
  }

  /* Reuse the existing ss-summary__item layout */
  .ss-mobile-recap__list .ss-summary__item{
    display:flex!important;
    justify-content:space-between!important;
    align-items:baseline!important;
    gap:8px!important;
    font-size:13px!important;
  }

  .ss-mobile-recap__list .ss-summary__key{
    opacity:.55!important;
    white-space:nowrap!important;
  }

  .ss-mobile-recap__list .ss-summary__val{
    font-weight:600!important;
    text-align:right!important;
  }

  .ss-mobile-recap__list .ss-summary__val--pending{
    opacity:.3!important;
    font-weight:400!important;
  }
}

/* ================================================================
   SUMMARY — grouped rows, expandable personalizations
   ================================================================ */

/* Group row: no gap between the label and the expand button */
.ss-summary__item--group{
  flex-direction:column!important;
  align-items:stretch!important;
  padding:0!important;
}

/* Expand button — full-width, looks like a regular row */
.ss-summary__expand-btn{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  width:100%!important;
  background:transparent!important;
  border:none!important;
  padding:5px 0!important;
  cursor:pointer!important;
  text-align:left!important;
  gap:8px!important;
  /* Inherit summary font so it looks like all other rows */
  font:inherit!important;
  font-size:inherit!important;
  color:inherit!important;
}
.ss-summary__expand-btn:hover .ss-summary__key{ opacity:1!important; }

.ss-summary__expand-arrow{
  font-size:14px!important;
  line-height:1!important;
  opacity:.5!important;
  flex-shrink:0!important;
  transition:transform .2s!important;
}

/* Sub-list — indented, smaller, revealed on expand */
.ss-summary__sub{
  list-style:none!important;
  padding:4px 0 2px 12px!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  border-left:2px solid rgba(0,0,0,.08)!important;
  margin-top:4px!important;
}

.ss-summary__sub-item{
  display:flex!important;
  justify-content:space-between!important;
  align-items:baseline!important;
  gap:8px!important;
  font-size:11px!important;
}

.ss-summary__sub-item .ss-summary__key{
  opacity:.5!important;
  font-size:10px!important;
  letter-spacing:.04em!important;
}

.ss-summary__sub-item .ss-summary__val{
  font-weight:600!important;
  font-size:11px!important;
  text-align:right!important;
}

/* Hero overlay: hide the expand button — no space to interact there */
.ss-hero-overlay-summary__list .ss-summary__item--group,
.ss-hero-selection-panel__list .ss-summary__item--group{
  display:none!important;
}

/* ================================================================
   STEP INDICATOR — "Step X of Y" subheading above each step label
   ================================================================ */
.ss-step-indicator{
  font-family:var(--font-heading-family, var(--font-body-family, Georgia, serif))!important;
  font-size:11px!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
  opacity:.38!important;
  margin:0 0 10px!important;
  padding:0!important;
  line-height:1!important;
  font-weight:400!important;
}
/* Tighten the gap on the ready state where the check mark follows it */
.ss-ready-state .ss-step-indicator{
  margin-bottom:14px!important;
}

/* Stack bundle — None/Clear button */
.ss-bundle-clear{
  display:block!important;
  margin:14px auto 0!important;
  background:transparent!important;
  border:1px solid rgba(0,0,0,.15)!important;
  border-radius:999px!important;
  padding:7px 22px!important;
  font-size:12px!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
  opacity:.6!important;
  transition:opacity .15s, border-color .15s!important;
}
.ss-bundle-clear:hover{opacity:1!important;border-color:rgba(0,0,0,.4)!important}

/* Initials upcharge badge — appears when 5+ characters typed */
.ss-initials-upcharge-badge{
  display:inline-block!important;
  margin-top:8px!important;
  font-size:12px!important;
  font-weight:600!important;
  letter-spacing:0.02em!important;
  color:#111!important;
  opacity:0.7!important;
}

/* Inner flap tier choices — stacked vertically for legibility */
.ss-choice-row--column{
  flex-direction:column!important;
  align-items:stretch!important;
}
.ss-choice-row--column .ss-chip{
  width:100%!important;
  justify-content:flex-start!important;
}

/* Inner flap emboss card — combined selector + text input card */
.ss-inner-emboss-card{
  border:1px solid rgba(0,0,0,0.18)!important;
  border-radius:8px!important;
  padding:12px 14px!important;
  margin-top:2px!important;
  transition:border-color 0.15s ease!important;
}
.ss-inner-emboss-card:has(input[type="radio"]:checked){
  border-color:rgba(0,0,0,0.45)!important;
}
.ss-inner-emboss-card__header{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  cursor:pointer!important;
  margin:0!important;
}
.ss-inner-emboss-card__header input[type="radio"]{
  margin-top:3px!important;
  flex-shrink:0!important;
  cursor:pointer!important;
}
.ss-inner-emboss-pricing{
  font-size:12px!important;
  line-height:1.75!important;
  margin:0!important;
  font-family:'Goudy Bookletter 1911',serif!important;
  letter-spacing:0.01em!important;
  color:currentColor!important;
  opacity:0.75!important;
}
.ss-inner-emboss-pricing strong{
  font-family:gardein,sans-serif!important;
  font-weight:700!important;
  opacity:1!important;
  color:#111!important;
}

/* ================================================================
   COLOR GALLERY POP-UP
   Floating gallery shown between "click a journal image" and the
   animated designer. Real product photos + a swatch row for the
   journal's other colors + a Select button.
   ================================================================ */

.ss-gallery-overlay{
  position:fixed!important;
  inset:0!important;
  background:rgba(0,0,0,.45)!important;
  z-index:10000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:20px!important;
  opacity:0!important;
  transition:opacity .22s ease!important;
}
.ss-gallery-overlay--visible{opacity:1!important;}

.ss-gallery{
  background:#fff!important;
  border-radius:24px!important;
  padding:40px 36px 30px!important;
  max-width:620px!important;
  width:100%!important;
  position:relative!important;
  max-height:92vh!important;
  overflow-y:auto!important;
  box-shadow:0 28px 72px rgba(0,0,0,.18)!important;
  display:flex!important;
  flex-direction:column!important;
}

.ss-gallery__close{
  position:absolute!important;
  top:18px!important;
  right:20px!important;
  background:transparent!important;
  border:none!important;
  font-size:18px!important;
  cursor:pointer!important;
  opacity:.35!important;
  line-height:1!important;
  padding:6px!important;
  transition:opacity .15s ease!important;
  z-index:2!important;
}
.ss-gallery__close:hover{opacity:.8!important;}

/* Main photo stage */
.ss-gallery__stage{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.ss-gallery__photo{
  width:100%!important;
  aspect-ratio:3/4!important;
  max-height:56vh!important;
  object-fit:cover!important;
  border-radius:16px!important;
  background:#f5f3ef!important;
  display:block!important;
}
.ss-gallery__nav{
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:38px!important;
  height:38px!important;
  border-radius:50%!important;
  border:none!important;
  background:rgba(255,255,255,.9)!important;
  box-shadow:0 3px 12px rgba(0,0,0,.15)!important;
  font-size:20px!important;
  line-height:1!important;
  cursor:pointer!important;
  color:#111!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transition:background .15s ease, transform .15s ease!important;
}
.ss-gallery__nav:hover{background:#fff!important;transform:translateY(-50%) scale(1.06)!important;}
.ss-gallery__nav--prev{left:10px!important;}
.ss-gallery__nav--next{right:10px!important;}
.ss-gallery__nav[hidden]{display:none!important;}

/* Thumbnail strip */
.ss-gallery__thumbs{
  display:flex!important;
  gap:8px!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  margin-top:12px!important;
}
.ss-gallery__thumbs[hidden]{display:none!important;}
.ss-gallery__thumb{
  width:52px!important;
  aspect-ratio:3/4!important;
  border-radius:8px!important;
  overflow:hidden!important;
  border:2px solid transparent!important;
  padding:0!important;
  cursor:pointer!important;
  background:#f5f3ef!important;
  transition:border-color .18s ease!important;
}
.ss-gallery__thumb.is-active{border-color:#1a1a1a!important;}
.ss-gallery__thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
  pointer-events:none!important;
}

/* Active color label */
.ss-gallery__label{
  text-align:center!important;
  font-size:16px!important;
  font-weight:600!important;
  letter-spacing:.01em!important;
  margin-top:16px!important;
}

/* Swatch row */
.ss-gallery__swatch-label{
  text-align:center!important;
  font-size:11px!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  opacity:.5!important;
  margin:14px 0 10px!important;
}
.ss-gallery__swatches{
  display:flex!important;
  gap:10px!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  overflow-x:auto!important;
  padding:2px 2px 6px!important;
  scrollbar-width:none!important;
}
.ss-gallery__swatches::-webkit-scrollbar{display:none!important;}
.ss-gallery__swatch{
  width:30px!important;
  height:30px!important;
  border-radius:50%!important;
  border:1px solid rgba(0,0,0,.12)!important;
  cursor:pointer!important;
  flex:0 0 auto!important;
  padding:0!important;
  transition:transform .15s ease, box-shadow .15s ease!important;
}
.ss-gallery__swatch:hover{
  transform:scale(1.1)!important;
  box-shadow:0 3px 10px rgba(0,0,0,.12)!important;
}
.ss-gallery__swatch.is-active{
  outline:2px solid #111!important;
  outline-offset:3px!important;
  transform:scale(1.1)!important;
}

/* Select CTA */
.ss-gallery__actions{
  margin-top:20px!important;
  display:flex!important;
  justify-content:center!important;
}
.ss-gallery__select{
  display:inline-block!important;
  padding:14px 40px!important;
  border-radius:999px!important;
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
  border:1px solid #111!important;
  background:#111!important;
  color:#fff!important;
  transition:background .18s ease!important;
}
.ss-gallery__select:hover{background:#333!important;}

@media(max-width:600px){
  .ss-gallery{padding:34px 20px 24px!important;border-radius:18px!important;}
  .ss-gallery__photo{max-height:48vh!important;}
}

/* ==================================================================
   NEW FLOW v2 — gallery-first entry, centered cardstock scene,
   handwritten Design Notes, collapsed color chip.
   Fonts (Typekit): labels = gardein · written values = bimbo-pro-ballpoint
   ================================================================== */

/* --- Single centered column: drop the right summary + browse carousel + color step --- */
.ss-customizer .ss-customizer__summary{ display:none !important; }
.ss-customizer [data-ss-hero-browse]{ display:none !important; }
.ss-customizer .ss-hero-selection-panel{ display:none !important; }   /* replaced by on-paper notes */
.ss-customizer .ss-step[data-step="1"]{ display:none !important; }    /* color handled by the gallery */

.ss-customizer__layout{ display:block !important; }
.ss-customizer__wrap{ max-width:760px !important; margin:0 auto !important; }
/* main was a CSS grid (old multi-column layout) — make it a single stacked column */
.ss-customizer__main{ display:block !important; grid-template-columns:none !important; max-width:660px !important; width:100% !important; margin:0 auto !important; float:none !important; }

/* Center the builder */
.ss-customizer__builder{ text-align:center !important; }
.ss-customizer__title, .ss-customizer__note, .ss-specs-strip{ text-align:center !important; justify-content:center !important; }

/* Kill the leftover "design card" so only the paper is the surface */
.ss-customizer [data-ss-hero-design],
.ss-customizer .ss-hero-carousel-wrap.ss-hero-stack{
  background:transparent !important; box-shadow:none !important; border-radius:0 !important;
}
.ss-hero__paper{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  z-index:0; pointer-events:none;
  filter:drop-shadow(0 16px 20px rgba(50,38,22,.26)) drop-shadow(0 2px 3px rgba(50,38,22,.16));
}

/* Handwritten Design Notes on the left of the paper */
.ss-hero-overlay-summary{
  display:block !important;
  background:transparent !important; border:none !important; box-shadow:none !important;
  padding:0 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.ss-hero-overlay-summary::before{
  content:"Design Notes"; display:block;
  font-family:"bimbo-pro-ballpoint", cursive;
  color:var(--ss-ink,#645631); font-size:clamp(26px,4.6vh,42px);
  transform:rotate(-2deg); margin-bottom:18px; line-height:1.05;
}
.ss-hero-overlay-summary__list{ list-style:none !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:column !important; gap:clamp(4px,1.1vh,9px) !important; }
.ss-hero-overlay-summary .ss-summary__item{ display:flex !important; flex-direction:column !important; gap:0 !important; border:none !important; padding:0 !important; }
.ss-hero-overlay-summary .ss-summary__key{
  font-family:"gardein", sans-serif !important; font-size:11px !important; letter-spacing:.12em !important;
  text-transform:uppercase !important; color:#6b5f51 !important;
  opacity:1 !important;   /* .ss-hero-overlay-summary__list .ss-summary__key sets opacity:.48 - same trap as the step indicator */
}
.ss-hero-overlay-summary .ss-summary__val{
  font-family:"bimbo-pro-ballpoint", cursive !important; font-size:clamp(14px,2.4vh,20px) !important;
  line-height:1.1 !important; color:var(--ss-ink,#645631) !important;   /* brand ink - matches the "Design Notes" heading; was maroon — matches the "Design Notes" heading and paints reliably */
  border-bottom:1px solid rgba(80,64,40,.16) !important; padding-bottom:2px !important; min-height:1em;
  animation:ss-inkin .5s ease both;
}
.ss-hero-overlay-summary .ss-summary__val--pending{ color:transparent !important; }
.ss-hero-overlay-summary [data-ss-personalizations-row]{ display:none !important; }  /* keep the paper clean */
@keyframes ss-inkin{ from{opacity:0; filter:blur(1.2px); transform:translateY(1px);} to{opacity:1; filter:none; transform:none;} }

/* --- Collapsed color chip --- */
.ss-color-chip{
  display:flex !important; width:fit-content !important; align-items:center; gap:12px; margin:0 auto 4px !important;
  background:#fff; border:1px solid rgba(60,48,32,.16); border-radius:999px;
  padding:6px 6px 6px 10px; cursor:pointer; box-shadow:0 4px 14px -8px rgba(40,28,14,.4);
  transition:transform .15s ease;
}
.ss-color-chip:hover{ transform:translateY(-1px); }
.ss-color-chip[hidden]{ display:none !important; }
.ss-color-chip__swatch{ width:26px; height:26px; border-radius:50%; border:1px solid rgba(60,48,32,.16); background:#ccc; flex:0 0 auto; }
.ss-color-chip__text{ display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.ss-color-chip__label{ font-family:"gardein",sans-serif; font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; color:#93897b; }
.ss-color-chip__name{ font-size:13px; font-weight:600; color:#26221e; }
.ss-color-chip__change{ font-size:11px; color:#7A1F2B; font-weight:600; padding:0 10px 0 6px; white-space:nowrap; }

/* --- Precolor: keep the builder out of the way while the gallery is up --- */
.ss-customizer.ss-precolor .ss-customizer__builder{ visibility:hidden !important; }

/* --- Step labels in the brand font --- */
.ss-step-indicator, .ss-customizer__label{ font-family:"gardein", sans-serif !important; }

/* --- Mandatory gallery: no dismiss without choosing --- */
.ss-gallery-overlay--mandatory .ss-gallery__close{ display:none !important; }

/* --- Mobile: a touch more room for the notes --- */
@media (max-width:560px){
  .ss-hero-overlay-summary{ width:42% !important; max-width:42% !important; left:6% !important; }
  .ss-hero-journal{ --ss-journal-h:70%; --ss-journal-right:5%; }
}

/* ==================================================================
   NEW FLOW v3 — portrait paper hero, tight notes+journal cluster,
   docked selector band ON the paper. Overrides v2 where they conflict.
   ================================================================== */

/* Stage: title (row 1) above; paper + docked form overlap in row 2 */
.ss-customizer__wrap{ max-width:1100px !important; }
.ss-customizer__main{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto !important;
  justify-items:stretch !important;   /* cells fill the column; the paper centres itself */
  max-width:none !important;
}
.ss-customizer__hero{ width:100% !important; text-align:center !important; }
.ss-customizer__title--top{
  grid-row:1 !important; grid-column:1 !important;
  font-family:"gardein",sans-serif !important;
  text-align:center !important; margin:0 0 12px !important;
}
.ss-customizer .ss-customizer__note,
.ss-customizer .ss-specs-strip{ display:none !important; }   /* hidden in docked view */

/* Docked selectors — float directly on the paper's lower band (NO white card),
   pinned below the cluster. Floating color chip removed: change color via the
   handwritten "Color" note in the cluster. */
.ss-color-chip{ display:none !important; }
.ss-customizer__builder{
  grid-row:2 !important; grid-column:1 !important;
  /* Top-anchored so the selectors sit just BELOW the journal (not at the
     sheet's bottom) — keeps the layout tight regardless of step height.
     The margin-top tracks the journal's height at each breakpoint below. */
  align-self:start !important; justify-self:center !important;
  z-index:5 !important;
  width:clamp(260px, calc(min(84vh,860px) * 0.6), 360px) !important;
  margin:calc(min(84vh,860px) * 0.53) 0 0 !important; padding:0 !important;
  text-align:center !important; background:transparent !important;
}
.ss-product-form{ position:static !important; }
/* No card surface — the selectors sit right on the cardstock */
.ss-customizer__builder .ss-step:not([hidden]){
  background:transparent !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important;
}
/* Compact the step content so the band stays slim */
/* Understated on purpose — the journal is the hero; the selectors read like
   quiet pencil annotations on the paper, not a bold UI competing for the eye. */
.ss-customizer__builder .ss-step-indicator{ font-size:9.5px !important; letter-spacing:.13em !important;
  margin:0 0 5px !important; color:#8a7a63 !important;
  opacity:1 !important; /* base .ss-step-indicator sets opacity:.38 - that, not the colour, was making it invisible */ }
.ss-customizer__builder .ss-customizer__label{ font-family:"gardein",sans-serif !important; font-size:12px !important; font-weight:400 !important; letter-spacing:.03em !important; margin:0 0 8px !important; color:#8a7c68 !important; }
.ss-customizer__builder .ss-customizer__label--sub{ font-size:8.5px !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:#a99e8d !important; opacity:1 !important; margin:8px 0 4px !important; }
.ss-customizer__builder .ss-choice-row{ gap:14px !important; margin:0 auto 4px !important; }
.ss-customizer__builder .ss-chip{ width:auto !important; gap:5px !important; }
.ss-customizer__builder .ss-chip__swatch{ width:22px !important; height:22px !important; border:1px solid rgba(80,64,40,.18) !important; box-shadow:none !important; }
.ss-customizer__builder .ss-chip:hover .ss-chip__swatch{ transform:none !important; box-shadow:0 1px 4px rgba(40,28,14,.14) !important; }
/* Soft, low-contrast selected marker instead of the glaring black ring */
.ss-customizer__builder .ss-chip:has(input:checked) .ss-chip__swatch{ outline:1.5px solid rgba(122,31,43,.55) !important; outline-offset:2.5px !important; transform:none !important; }
.ss-customizer__builder .ss-chip__text{ font-size:8.5px !important; opacity:.7 !important; }
.ss-customizer__builder .ss-chip:has(input:checked) .ss-chip__text{ opacity:.9 !important; }
.ss-customizer__builder .ss-customizer__input{ padding:9px 12px !important; font-size:13px !important; max-width:none !important; background:rgba(255,255,255,.7) !important; }
/* Nav: Back | Next on ONE line — Back muted (left) with a leading arrow, Next
   maroon (right), split by a clear divider. Same treatment as the elastic Yes/No. */
.ss-customizer__builder .ss-stepper__nav{ display:flex !important; flex-direction:row !important; justify-content:center !important; align-items:center !important; margin-top:14px !important; gap:0 !important; flex-wrap:wrap !important; }
.ss-customizer__builder .ss-stepper__nav[hidden]{ display:none !important; }
.ss-customizer__builder .ss-stepper__btn[hidden]{ display:none !important; }

/* Elastic swatches: one horizontally-scrolling row — never wrap to a 2nd line */
.ss-customizer__builder .ss-choice-row--elastic-chips{
  flex-wrap:nowrap !important;
  justify-content:safe center !important;
  overflow-x:auto !important; overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important; scrollbar-width:thin !important;
  max-width:100% !important; padding:2px 2px 7px !important; gap:13px !important;
  /* fade the edges to hint that the row scrolls when there are many colors */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 20px), transparent 100%) !important;
          mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 20px), transparent 100%) !important;
}
/* Even spacing regardless of name length: every elastic chip is the SAME width,
   so the swatches sit on a regular rhythm and long names ("Mauve Brown",
   "Light Pink") wrap under the swatch instead of stretching their chip wider. */
.ss-customizer__builder .ss-choice-row--elastic-chips .ss-chip{ flex:0 0 auto !important; width:56px !important; }
.ss-customizer__builder .ss-choice-row--elastic-chips .ss-chip__text{ white-space:normal !important; overflow-wrap:break-word !important; line-height:1.15 !important; }
.ss-customizer__builder .ss-stepper__btn{ min-width:0 !important; width:auto !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
.ss-customizer__builder .ss-stepper__btn--primary{
  order:0 !important;                        /* Next on the right */
  font-family:"gardein",sans-serif !important; font-size:12px !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
  color:#7A1F2B !important; padding:4px 18px !important; text-decoration:none !important;
  border-left:1px solid rgba(122,31,43,.3) !important;   /* divider */
}
.ss-customizer__builder .ss-stepper__btn--primary::after{ content:none !important; }
.ss-customizer__builder .ss-stepper__btn:not(.ss-stepper__btn--primary){
  order:-1 !important;                       /* Back on the left */
  font-family:"gardein",sans-serif !important; font-size:12px !important; letter-spacing:.1em !important; text-transform:uppercase !important;
  color:#8a7c68 !important; opacity:1 !important;
  padding:4px 18px !important; text-decoration:none !important;
}
.ss-customizer__builder .ss-stepper__btn:not(.ss-stepper__btn--primary)::before{ content:"\2190\00a0\00a0" !important; }
/* The handwritten "Color" note doubles as the change-color control */
.ss-hero-overlay-summary .ss-summary__change{
  font:inherit !important; color:inherit !important; background:none !important; border:0 !important;
  padding:0 !important; cursor:pointer !important; text-align:left !important;
  border-bottom:1px dashed rgba(122,31,43,.55) !important;
}
.ss-hero-overlay-summary .ss-summary__change::after{ content:" ✎"; font-size:.72em; color:#7A1F2B; }

/* Elastics "use for both?" prompt — floats on the paper with the selectors */
.ss-customizer__builder .ss-elastic-prompt{ margin:8px auto 0 !important; }
.ss-customizer__builder .ss-elastic-prompt__q{ font-family:"gardein",sans-serif !important; font-size:12px !important; color:#33291f !important; margin:0 0 8px !important; line-height:1.35 !important; }
.ss-customizer__builder .ss-elastic-prompt__q span{ font-weight:700 !important; color:#7A1F2B !important; }
/* Yes / No on ONE line, equal weight, split by a clear divider. */
.ss-customizer__builder .ss-elastic-prompt__actions{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:0 !important; flex-wrap:wrap !important; }
.ss-customizer__builder .ss-elastic-prompt__yes,
.ss-customizer__builder .ss-elastic-prompt__sep{ font-family:"gardein",sans-serif !important; font-size:12px !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:#7A1F2B !important; background:none !important; border:0 !important; cursor:pointer !important; padding:4px 18px !important; text-decoration:none !important; line-height:1 !important; }
.ss-customizer__builder .ss-elastic-prompt__sep{ border-left:1px solid rgba(122,31,43,.3) !important; color:#8a7c68 !important; }

/* Compact the "ready" header in the docked view so the block stays short
   enough to clear both the journal above and the torn bottom edge below. */
.ss-customizer__builder .ss-ready-state{ margin:0 0 8px !important; }
.ss-customizer__builder .ss-ready-state__check{ font-size:18px !important; margin:0 0 2px !important; }
.ss-customizer__builder .ss-ready-state__title{ font-family:"gardein",sans-serif !important; font-size:16px !important; margin:0 0 3px !important; }
.ss-customizer__builder .ss-ready-state__sub{ font-size:11px !important; color:#8a7c68 !important; margin:0 auto !important; }

/* ── Personal Touches: yes/no prompt (floats on the paper) ─────────────── */
.ss-customizer__builder .ss-touch-prompt{ margin:10px auto 0 !important; }
.ss-customizer__builder .ss-touch-prompt__q{ font-family:"gardein",sans-serif !important; font-size:13px !important; color:#6b5d4a !important; margin:0 0 10px !important; }
.ss-customizer__builder .ss-touch-prompt__actions{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:6px !important; }
.ss-customizer__builder .ss-touch-atc{ margin-top:12px !important; }

/* Add to Cart — the one place a solid button is right (final conversion action) */
.ss-atc-cta{
  font-family:"gardein",sans-serif !important; font-size:12px !important; letter-spacing:.14em !important; text-transform:uppercase !important;
  color:#fff !important; background:#7A1F2B !important; border:0 !important; border-radius:999px !important;
  padding:12px 32px !important; cursor:pointer !important; box-shadow:0 8px 20px -10px rgba(90,20,30,.7) !important;
  transition:transform .15s ease, background .15s ease !important;
}
.ss-atc-cta:hover{ transform:translateY(-1px) !important; background:#6a1a25 !important; }
.ss-atc-cta[disabled]{ opacity:.45 !important; cursor:default !important; box-shadow:none !important; transform:none !important; }

/* ── Personal Touches: floating pop-up (a real modal, not on-paper) ─────── */
.ss-touch-popup{ position:fixed !important; inset:0 !important; z-index:100000 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:20px !important; }
.ss-touch-popup[hidden]{ display:none !important; }
.ss-touch-popup__backdrop{ position:absolute !important; inset:0 !important; background:rgba(38,34,30,.92) !important; backdrop-filter:blur(6px) !important; -webkit-backdrop-filter:blur(6px) !important; }
.ss-touch-popup__card{
  position:relative !important; z-index:1 !important;
  width:min(520px, 94vw) !important; max-height:88vh !important; overflow-y:auto !important;
  background:#f7f1e7 !important; border:1px solid rgba(80,64,40,.16) !important; border-radius:18px !important;
  box-shadow:0 30px 60px -20px rgba(30,20,10,.6) !important;
  padding:28px 26px 26px !important; text-align:center !important;
}
.ss-touch-popup__close{ position:absolute !important; top:10px !important; right:14px !important; background:none !important; border:0 !important; font-size:26px !important; line-height:1 !important; color:#9a8f7e !important; cursor:pointer !important; padding:4px 8px !important; }
.ss-touch-popup__close:hover{ color:#4a4034 !important; }
.ss-touch-popup .ss-personalization-panel{ display:block !important; }
.ss-touch-popup .ss-atc-cta--popup{ margin-top:22px !important; }
/* Restore comfortable sizing inside the pop-up (undo the compact on-paper rules) */
.ss-touch-popup .ss-customizer__label{ font-family:"gardein",sans-serif !important; font-size:14px !important; font-weight:600 !important; letter-spacing:.02em !important; color:#33291f !important; margin:0 0 10px !important; }
.ss-touch-popup .ss-choice-row{ gap:10px !important; flex-wrap:wrap !important; }
.ss-touch-popup .ss-chip__swatch{ width:34px !important; height:34px !important; box-shadow:none !important; }
.ss-touch-popup .ss-chip:has(input:checked) .ss-chip__swatch{ outline:2px solid rgba(122,31,43,.65) !important; outline-offset:3px !important; }
.ss-touch-popup .ss-chip__text{ font-size:11px !important; opacity:.8 !important; }
.ss-touch-popup .ss-customizer__input{ font-size:14px !important; padding:12px 14px !important; background:#fff !important; max-width:none !important; }

/* ==================================================================
   NEW FLOW v4 — inline color + in-stage photo gallery
   (replaces the modal pop-up). Color is Step 1, shown inline; the stage
   doubles as a photo viewer for picking a color AND browsing in the designer.
   ================================================================== */

/* Show the inline color step; hide its old photo carousel + hidden chips */
.ss-customizer .ss-step[data-step="1"]:not([hidden]){ display:block !important; }
.ss-customizer .ss-step[data-step="1"] .ss-color-carousel{ display:none !important; }
.ss-customizer .ss-step[data-step="1"] .ss-choice-row--color-chips{ display:none !important; }

/* Inline color-swatch selector */
.ss-color-swatches{
  display:flex !important; gap:12px !important; justify-content:center !important;
  flex-wrap:wrap !important; margin:6px auto 14px !important; padding:0 !important;
}
.ss-color-swatch{
  width:34px !important; height:34px !important; border-radius:50% !important;
  border:1px solid rgba(0,0,0,.14) !important; padding:0 !important; cursor:pointer !important;
  transition:transform .15s ease, box-shadow .15s ease !important;
}
.ss-color-swatch:hover{ transform:scale(1.08) !important; box-shadow:0 3px 10px rgba(0,0,0,.14) !important; }
.ss-color-swatch.is-active{ outline:2px solid #7A1F2B !important; outline-offset:3px !important; transform:scale(1.08) !important; }

/* --- Stage photo layer + arrows + back-to-design --- */
.ss-hero-photos{
  position:absolute !important; inset:0 !important; z-index:2 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  pointer-events:none !important;
}
.ss-hero-photos[hidden]{ display:none !important; }
.ss-hero-photos__img{
  max-width:78% !important; max-height:80% !important; width:auto !important; height:auto !important;
  object-fit:contain !important; border-radius:8px !important;
  box-shadow:0 14px 34px -14px rgba(40,28,14,.5) !important;
}

/* ── HOVER: e-comm shot ⇄ lifestyle shot ──────────────────────────────
   Two stacked layers that cross-fade. The OPACITY IS SET BY THE JAVASCRIPT as an
   inline style, deliberately - an earlier attempt drove it from class rules here
   and lost to another declaration in this 2000-line sheet in a way that took far
   too long to chase. Inline styles cannot be outvoted, so the behaviour is now
   independent of everything else in this file. This block only positions the
   layers and defines the fade. */
.ss-customizer .ss-hero-photos{ position:absolute !important; inset:0 !important; }
.ss-customizer .ss-hero-photos[data-has-hover]{ pointer-events:auto !important; cursor:zoom-in !important; }
.ss-customizer .ss-hero-photos__img{
  position:absolute !important; top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) !important;
  transition:opacity .32s ease !important;
}
.ss-customizer .ss-hero-photos__img--hover[hidden]{ display:none !important; }
@media (prefers-reduced-motion:reduce){
  .ss-customizer .ss-hero-photos__img{ transition:none !important; }
}
/* hide the illustrated journal while browsing photos */
[data-ss-hero-design].ss-stage-photos .ss-hero-journal{ opacity:0 !important; pointer-events:none !important; }

.ss-hero-arrow{
  position:absolute !important; top:44% !important; transform:translateY(-50%) !important; z-index:4 !important;
  width:34px !important; height:34px !important; border-radius:50% !important; border:none !important;
  background:rgba(255,255,255,.82) !important; box-shadow:0 3px 12px rgba(0,0,0,.16) !important;
  font-size:18px !important; line-height:1 !important; color:#3a3126 !important; cursor:pointer !important;
  opacity:.7 !important; transition:opacity .15s ease, transform .15s ease !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.ss-hero-arrow:hover{ opacity:1 !important; }
.ss-hero-arrow--prev{ left:1% !important; } .ss-hero-arrow--next{ right:1% !important; }
.ss-hero-arrow[hidden]{ display:none !important; }

.ss-hero-backdesign{
  position:absolute !important; bottom:2% !important; left:50% !important; transform:translateX(-50%) !important;
  z-index:4 !important; background:transparent !important; border:none !important; cursor:pointer !important;
  font-family:"gardein",sans-serif !important; font-size:11px !important; letter-spacing:.06em !important;
  text-transform:uppercase !important; color:#7A1F2B !important; text-decoration:underline !important; padding:6px !important;
}
.ss-hero-backdesign[hidden]{ display:none !important; }

/* ==================================================================
   v6 — NO CARDSTOCK. JOURNAL-FIRST LAYOUT.  (2026-08-20)
   Owner: "abandon the cardstock, it's limiting. enlarge the journal
   panel, bring the selectors up to float right below the journals,
   design notes goes further left."

   The paper is gone, and with it the 4:5 portrait box that every
   previous scale pass was fighting. The journal panel is now sized
   directly from the viewport, so it grows with the monitor.

   Composition (one centred row):
     [ Design Notes ]   [ JOURNAL PANEL ]   [ gutter ]
                        [   selectors   ]

   THE ONE RULE: the panel is sized from vh. Never reintroduce a fixed
   px cap — that is what made this read tiny on a large monitor four
   times running. Tune --ss-panel-h, and check 1280x720 AND ~2000x1100.
   ================================================================== */

.ss-customizer{
  --ss-panel-h: clamp(360px, 66vh, 900px);   /* the journal panel's height */
  /* The two side columns MUST stay the same width. The brand glyphs above and
     below the customizer are centred on the page, so the designer has to be too
     — and the middle track is only page-centred when the columns flanking it are
     equal. Asymmetric sides (215 left / 330 right) pushed it 57px off. */
  --ss-side-w:  clamp(200px, 20vw, 330px);
  --ss-notes-w: var(--ss-side-w);            /* Design Notes  (left)  */
  --ss-specs-w: var(--ss-side-w);            /* colour story  (right) */
}

/* ONE GRID, THREE COLUMNS — notes | designer | specs.
   The whole composition is a single grid on .ss-customizer__main so the
   selectors in row 3 line up with the journal panel in row 2. The hero is
   display:contents so its children become items of THIS grid rather than
   forming a nested one — that is what keeps the columns honest.
     row 1  title (spans all three)
     row 2  [notes gutter] [journal panel] [specs]
     row 3  selectors, under the panel */
.ss-customizer .ss-customizer__wrap{ max-width:none !important; margin:0 auto !important; padding:0 16px !important; }
.ss-customizer .ss-customizer__layout{ display:block !important; }
.ss-customizer .ss-customizer__main{
  display:grid !important;
  grid-template-columns:var(--ss-notes-w) minmax(0,1fr) var(--ss-specs-w) !important;
  grid-template-rows:auto auto auto !important;
  align-items:start !important;
  gap:0 clamp(16px,3vw,54px) !important;
  width:min(1460px, 96vw) !important; margin:0 auto !important;
  max-width:none !important;
}
.ss-customizer .ss-customizer__title--top{
  grid-column:1 / -1 !important; grid-row:1 !important;
  display:block !important; text-align:center !important; margin:0 auto 18px !important;
}
.ss-customizer .ss-customizer__hero{
  display:contents !important;
  height:auto !important; min-height:0 !important; max-height:none !important;
}

/* THE JOURNAL PANEL — the hero. Height-driven, no paper, no fixed cap. */
.ss-customizer [data-ss-hero-design]{
  grid-column:2 !important; grid-row:2 !important;
  display:block !important; position:relative !important;
  height:var(--ss-panel-h) !important;
  width:100% !important; max-width:none !important; min-width:0 !important;
  aspect-ratio:auto !important; max-height:none !important;
  margin:0 !important; overflow:visible !important;
  background:transparent !important; box-shadow:none !important; border-radius:0 !important;
}
/* the cardstock is abandoned — never paint a sheet, never load the paper image */
.ss-customizer .ss-hero__paper{ display:none !important; }

/* Journal illustration — centred in the panel, as tall as the panel allows.
   Overlays (elastics / initials / tassels) are % of this group, so they
   track it automatically at any size. */
.ss-customizer .ss-hero-journal{
  position:absolute !important; z-index:1 !important;
  left:50% !important; top:50% !important; right:auto !important; bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  height:var(--ss-journal-h, 100%) !important; width:auto !important;
}
.ss-customizer .ss-hero-journal .ss-hero__base{
  height:100% !important; width:auto !important; max-width:none !important;
  max-height:none !important; object-fit:contain !important; display:block !important;
}
/* Real photos fill the same panel */
.ss-customizer .ss-hero-photos__img{
  max-width:100% !important; max-height:100% !important;
  width:auto !important; height:100% !important; object-fit:contain !important;
  border-radius:6px !important; box-shadow:0 18px 40px -20px rgba(40,28,14,.45) !important;
}

/* LEFT COLUMN — Design Notes. Now a real grid item: the liquid places this
   as a SIBLING of the designer panel, so it needs no absolute positioning and
   it collapses into the stack cleanly on a phone. */
.ss-customizer .ss-hero-overlay-summary{
  grid-column:1 !important; grid-row:2 !important;
  display:block !important; position:static !important;
  transform:none !important;                 /* v6 owns this - see the 2026-08-20 note above */
  width:100% !important; max-width:none !important;
  align-self:center !important; text-align:left !important;   /* centred against the panel, not top-aligned */
}

/* ── RESERVED: the owner's specs / details column (right) ──────────────
   Empty until filled. Drop content into the section's "Specs column"
   setting, or replace the inner markup of [data-ss-specs-slot]. It holds
   its width whether or not it has content, so the journal stays centred. */
.ss-customizer .ss-specs-slot{
  grid-column:3 !important; grid-row:2 !important;
  align-self:center !important;   /* centred against the journal, matching Design Notes on the left */
  justify-self:stretch !important;
  min-width:0 !important; text-align:left !important;
  font-family:"gardein",sans-serif !important; font-size:13px !important;
  line-height:1.6 !important; color:#6b5d4a !important;
}
.ss-customizer .ss-specs-slot :where(h1,h2,h3,h4){
  font-size:11px !important; letter-spacing:.14em !important; text-transform:uppercase !important;
  color:#a99e8d !important; margin:0 0 8px !important; font-weight:400 !important;
}
.ss-customizer .ss-specs-slot :where(p,ul,ol){ margin:0 0 12px !important; }
/* One colour story at a time; the rest stay hidden. A soft cross-fade so the
   column does not flicker as the shopper flips through colours. */
.ss-customizer .ss-color-story[hidden]{ display:none !important; }
.ss-customizer .ss-color-story{ animation:ss-story-in .28s ease both !important; }
@keyframes ss-story-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .ss-customizer .ss-color-story{ animation:none !important; }
}
/* Shared text sits under the story, quieter than it */
.ss-customizer .ss-specs-static{
  margin-top:18px !important; padding-top:14px !important;
  border-top:1px solid rgba(80,64,40,.14) !important;
  font-size:12px !important; color:#8a7c68 !important;
}

/* SELECTORS — float directly beneath the journal panel, tight to it */
.ss-customizer .ss-customizer__builder{
  grid-column:2 !important; grid-row:3 !important;
  display:block !important; position:static !important; align-self:auto !important;
  width:100% !important; max-width:520px !important;
  margin:clamp(10px,1.6vh,22px) auto 0 !important; padding:0 !important;
  text-align:center !important; background:transparent !important; visibility:visible !important;
}
.ss-customizer .ss-customizer__builder .ss-step:not([hidden]){
  background:transparent !important; box-shadow:none !important; border:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  padding:0 !important; margin:0 !important;
}

/* Tablet / narrow: notes drop under the panel rather than squeezing it */
@media (max-width:860px){

  /* The legacy mobile recap duplicated the whole selection list. It existed
     because Design Notes used to be hidden on phones; now the notes stack into
     the mobile layout as their own block, so the recap renders the SAME six
     rows a second time on the final step — which reads as jumbled, overlapping
     text. One source of truth: the notes. */
  .ss-customizer .ss-mobile-recap{ display:none !important; }

  /* SWATCHES — one row, always. Ten colours used to wrap with a lone orphan on
     row two. Nowrap + shrink-to-fit means the row adapts to however many colours
     a journal has instead of breaking at a fixed count. They shrink from 34px
     down to a 22px floor; past that the row scrolls rather than wrapping. */
  .ss-customizer .ss-color-swatches{
    flex-wrap:nowrap !important;
    gap:clamp(4px,1.6vw,10px) !important;
    justify-content:center !important;
    overflow-x:auto !important; scrollbar-width:none !important;
    padding:0 2px 2px !important;
  }
  .ss-customizer .ss-color-swatches::-webkit-scrollbar{ display:none !important; }
  .ss-customizer .ss-color-swatch{
    flex:0 1 auto !important;
    width:34px !important; min-width:22px !important;
    height:auto !important; aspect-ratio:1 / 1 !important;
  }

  /* PHOTO PANEL — kill the letterboxing. The e-comm shots are 3:2 landscape, but
     the panel was portrait, so object-fit:contain left a big band of dead space
     above and below the photo and pushed Design Notes far down the page.
     In photos mode the panel now takes the photo's own shape. Design mode keeps
     its taller box, because the journal illustration is portrait. */
  .ss-customizer [data-ss-hero-design].ss-stage-photos{
    height:auto !important;
    aspect-ratio:3 / 2 !important;
  }

  .ss-customizer{ --ss-panel-h: clamp(300px, 52vh, 560px); }
  .ss-customizer .ss-customizer__main{
    grid-template-columns:1fr !important; gap:12px 0 !important; width:100% !important;
  }
  .ss-customizer [data-ss-hero-design]{ grid-column:1 !important; grid-row:2 !important; }
  .ss-customizer .ss-customizer__builder{ grid-column:1 !important; grid-row:3 !important; max-width:none !important; }
  .ss-customizer .ss-hero-overlay-summary{
    grid-column:1 !important; grid-row:4 !important;
    width:min(320px,88vw) !important; max-width:88vw !important;
    margin:0 auto !important; text-align:center !important;
  }
  .ss-customizer .ss-specs-slot{
    grid-column:1 !important; grid-row:5 !important;
    width:min(420px,88vw) !important; margin:0 auto !important;
  }
}

/* ── Stack bundle cards: line the counters up across all four ──────────
   The cards are already equal height, but their contents were top-aligned, so
   each - 0 + row landed wherever the name and subtitle above it happened to
   end. "Negative Space" wraps to two lines and "SQUARE GRAPH" wraps to two,
   so those counters sat lower than "Through Line" and "Point Taken".
   Pushing the counter to the bottom of its card lines all four up, and keeps
   working whatever the paper names are. */
.ss-customizer .ss-stack-bundle-grid{ align-items:stretch !important; }
.ss-customizer .ss-stack-bundle-item{ justify-content:flex-start !important; }
.ss-customizer .ss-stack-bundle-item .ss-counter{ margin-top:auto !important; padding-top:8px !important; }

/* ==================================================================
   THE ANTHOLOGY — progress bar + cross-journal back link.
   Only rendered when the URL carries ?anthology=N, so none of this touches
   an ordinary single-journal product page.
   ================================================================== */
.ss-customizer .ss-anth-bar{
  display:flex !important; align-items:center !important; justify-content:center !important;
  flex-wrap:wrap !important; gap:8px 16px !important;
  width:min(1460px,96vw) !important; margin:0 auto 18px !important; padding:11px 18px !important;
  border-bottom:1px solid rgba(80,64,40,.16) !important;
  font-family:"gardein",sans-serif !important; font-size:11px !important;
  letter-spacing:.12em !important; text-transform:uppercase !important; color:#8a7a63 !important;
}
.ss-customizer .ss-anth-bar__title{ color:var(--ss-ink,#645631) !important; font-weight:600 !important; }
.ss-customizer .ss-anth-bar__dots{ display:inline-flex !important; gap:6px !important; align-items:center !important; }
.ss-customizer .ss-anth-bar__dot{
  width:7px !important; height:7px !important; border-radius:50% !important;
  background:rgba(80,64,40,.22) !important; display:inline-block !important;
}
.ss-customizer .ss-anth-bar__dot.is-done{ background:var(--ss-ink,#645631) !important; }
.ss-customizer .ss-anth-bar__dot.is-current{
  background:var(--ss-ink,#645631) !important; box-shadow:0 0 0 3px rgba(100,86,49,.18) !important;
}
.ss-customizer .ss-anth-bar__price{ color:var(--ss-ink,#645631) !important; }
.ss-customizer .ss-anth-bar__exit{
  background:none !important; border:0 !important; cursor:pointer !important;
  font:inherit !important; color:#a99e8d !important; text-decoration:underline !important;
  text-underline-offset:3px !important; padding:0 !important; letter-spacing:.08em !important;
}
.ss-customizer .ss-anth-bar__exit:hover{ color:#6b5f51 !important; }

/* "Back to your Gallery" - sits under the step nav, quieter than Next */
.ss-customizer .ss-anth-back{
  display:block !important; margin:10px auto 0 !important;
  background:none !important; border:0 !important; cursor:pointer !important;
  font-family:"gardein",sans-serif !important; font-size:10px !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
  color:#7a6e5d !important; opacity:1 !important;
  text-decoration:underline !important; text-underline-offset:3px !important; padding:4px 8px !important;
}
.ss-customizer .ss-anth-back:hover{ color:var(--ss-ink,#645631) !important; }

@media (max-width:860px){
  .ss-customizer .ss-anth-bar{ font-size:10px !important; gap:6px 10px !important; padding:9px 12px !important; }
}

/* ==================================================================
   v7 — HIGH-END POLISH (ported from the "Design Your Muse" mockup)
   Anchors the colour story so it reads as composed, not floating:
     1. accent-follows-colour  — --ss-accent tracks the swatch on screen
                                  (ss-customizer.js sets it in ssShowColorStory)
     2. handwritten name + dot — the colour name in handwriting with a swatch
                                  dot in the live accent; the dot IS the anchor
     3. editorial story body   — the story prose in a serif, warmer and calmer
   Selectors are STRUCTURE-based, not tag-based: the owner writes each story as
   a heading (the name) followed by the prose, and Shopify rich text renders the
   name as whatever heading tag they pick (currently <h5>) and the body as the
   rest. So "first child = name, everything after = body" — never hard-code the
   tag. Nothing here changes the grid, the column widths or the panel height.

   Deliberately NOT included: a full-width rule above the column (read as a
   random divider) and a journal drop-shadow (the art is a rectangular matte,
   not a cut-out, so the shadow traced a box around it).
   ================================================================== */

/* Default accent — Vetta olive from the mockup; JS overrides per colour. */
.ss-customizer{ --ss-accent:#8C8A54; }

/* (2) The colour name — the story's FIRST element, whatever tag it is — becomes
   a handwritten title with a swatch dot in the live accent. The dot has an
   inset ring so it stays visible even for pale leathers (e.g. undyed Raw). */
.ss-customizer .ss-color-story > :first-child{
  display:flex !important; align-items:center !important; gap:9px !important;
  font-family:"bimbo-pro-ballpoint","Segoe Script",cursive !important;
  font-weight:400 !important; font-size:27px !important; line-height:1.05 !important;
  letter-spacing:0 !important; text-transform:none !important;
  color:#6E3B2E !important; margin:0 0 12px !important;
}
.ss-customizer .ss-color-story > :first-child::before{
  content:"" !important; flex:0 0 auto !important;
  width:13px !important; height:13px !important; border-radius:50% !important;
  background:var(--ss-accent) !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22), 0 1px 2px rgba(40,28,14,.25) !important;
  transition:background-color .28s ease !important;
}

/* (3) Story prose → handwritten, matching the notes (fine ballpoint) for a
   journal-brand feel across the board. Everything after the name. Slightly
   larger + roomier leading so the handwriting stays readable. */
.ss-customizer .ss-color-story > :first-child ~ *{
  font-family:"bimbo-pro-finetip","bimbo-pro-ballpoint","Segoe Script",cursive !important;
  font-size:17px !important; font-weight:300 !important; line-height:1.5 !important;
  letter-spacing:0 !important; text-transform:none !important;
  color:#57503F !important; margin:0 0 10px !important;
}
/* note VALUES match the story body — the slightly heavier finetip, for symmetry */
.ss-customizer .ss-hero-overlay-summary .ss-summary__val{
  font-family:"bimbo-pro-finetip","bimbo-pro-ballpoint",cursive !important; font-weight:300 !important;
}

/* ==================================================================
   Initials upcharge hint — a quiet line that appears only once the shopper
   types a 5th character (a full name). ss-customizer.js toggles [hidden].
   No button, no box: just an unobtrusive note that a name is +$12.
   ================================================================== */
.ss-customizer .ss-initials-hint{
  font-family:"gardein",sans-serif !important; font-size:12px !important;
  letter-spacing:.02em !important; color:#9a8d78 !important;
  margin:8px 0 0 !important; padding:0 2px !important;
}
.ss-customizer .ss-initials-hint strong{ color:#7A1F2B !important; font-weight:600 !important; }

/* ==================================================================
   v9 — CARDSTOCK SCENE  (approved "Studio Design Scene" mockup)
   The hero stops being display:contents and becomes ONE cardstock sheet
   holding three columns: left (gallery while choosing → Design Notes after),
   centre (real photo with its box while choosing → floating illustration
   after), right (colour story, always). Title floats in a top band. The
   selectors sit below the sheet. State is driven by .ss-stage-photos on the
   stage: present = choosing a colour, absent = designing.
   Desktop only — below 861px the existing stacked mobile layout is kept.
   ================================================================== */
/* the choose-state gallery strip is a desktop-only element; hide it everywhere
   by default so it never appears in the mobile stack (JS still fills it). */
.ss-customizer .ss-gallery-strip{ display:none !important; }
@media (min-width:861px){

/* main = the whole designer framed as ONE rounded #fbf7ef rectangle with a soft
   drop shadow — a quiet digital frame (not a fake paper), the same tone as the
   page so only the shadow marks it out. Holds the title, the scene and the
   selectors. */
.ss-customizer .ss-customizer__main{
  display:block !important;
  width:min(1180px,96vw) !important; margin:0 auto !important;
  background:#fbf7ef !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(60,44,20,.06), 0 24px 54px -32px rgba(40,30,15,.38) !important;
  padding:clamp(20px,2.4vw,38px) clamp(22px,4vw,54px) clamp(24px,2.6vw,42px) !important;
}

/* the scene grid — transparent (the frame is the background). Notes and the
   colour story are vertically CENTRED beside the journal so the empty space is
   balanced above and below, not pooled at the bottom. */
.ss-customizer .ss-customizer__hero{
  display:grid !important;
  grid-template-columns:minmax(190px,240px) minmax(340px,440px) minmax(190px,240px) !important;
  justify-content:center !important; align-items:center !important;
  gap:clamp(20px,2.6vw,42px) !important;
  position:relative !important;
  margin:0 auto !important; padding:6px 0 0 !important;
  background:none !important; border:0 !important; box-shadow:none !important;
}
.ss-customizer .ss-customizer__hero::after{ content:none !important; }

/* explicit column placement (hidden panels are display:none so take no track) */
.ss-customizer .ss-hero-overlay-summary{ grid-column:1 !important; grid-row:1 !important; align-self:center !important;
  position:relative !important; transform:none !important; width:auto !important; max-width:none !important; }
.ss-customizer [data-ss-hero-design]{ grid-column:2 !important; grid-row:1 !important; align-self:center !important; }
.ss-customizer .ss-specs-slot{ grid-column:3 !important; grid-row:1 !important; align-self:center !important; }

/* CENTRE: illustration floats free on the cardstock (no panel box); the panel
   only shows a background while it's a real photo (.ss-stage-photos). */
.ss-customizer [data-ss-hero-design]{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  height:var(--ss-panel-h, clamp(360px,62vh,620px)) !important;
}
/* while choosing, the panel is a compact landscape photo card, not a tall box */
.ss-customizer [data-ss-hero-design].ss-stage-photos{
  height:auto !important; aspect-ratio:3 / 2 !important; max-height:var(--ss-panel-h,560px) !important;
}
/* NO drop-shadow: the journal art is a rectangular matte, so a shadow frames
   it as a box. Art floats flat on the cardstock. */
.ss-customizer .ss-hero-journal .ss-hero__base{ filter:none !important; }
/* No card framing on the photos either — a transparent PNG then floats clean;
   any white still visible is baked into the image file itself. */
.ss-customizer .ss-hero-photos__img{ box-shadow:none !important; border-radius:0 !important; }

/* scale the whole scene down a touch so the design fits without scrolling */
.ss-customizer{ --ss-panel-h: clamp(340px,55vh,530px) !important; }

/* colour name on the right reads as a header — larger, but under Design Notes */
.ss-customizer .ss-color-story > :first-child{ font-size:clamp(30px,2.3vw,38px) !important; }

/* "Design Notes" + the colour name use the THICK marker cut — bimbo-pro-sharpie
   (weight 500) — so they read as bold headers, while the note VALUES stay in the
   fine bimbo-pro-ballpoint (weight 200) like ink. A deliberate marker-vs-pen
   hierarchy. Both faces live in Adobe Fonts kit yrh6uca. */
.ss-customizer .ss-hero-overlay-summary::before,
.ss-customizer .ss-color-story > :first-child{
  font-family:"bimbo-pro-sharpie","bimbo-pro-ballpoint",cursive !important;
}

/* selections list: centred under "Design Notes" (column is centred beside the journal) */
.ss-customizer .ss-hero-overlay-summary__list{ text-align:center !important; padding-left:0 !important; }
.ss-customizer .ss-hero-overlay-summary__list .ss-summary__item{ align-items:center !important; }

/* Floating title: reposition the "Design Notes" pseudo-title into the top band
   so "Design" sits above the notes and "Notes" trails over the journal top.
   Only present in design state (the summary is hidden while choosing). */
/* "Design Notes" now flows as a header above the notes list (both vertically
   centred beside the journal) instead of floating pinned to the top. */
.ss-customizer .ss-hero-overlay-summary::before{
  position:static !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  display:block !important; margin:0 0 14px !important; padding:0 !important; white-space:nowrap !important;
  font-size:clamp(32px,3vw,46px) !important; line-height:.95 !important; transform:rotate(-2deg) !important;
  text-align:center !important;
}

/* SELECTORS live INSIDE the frame, below the scene, centred. */
.ss-customizer .ss-customizer__builder{
  display:block !important; width:100% !important; max-width:560px !important;
  margin:clamp(10px,1.6vh,20px) auto 0 !important; text-align:center !important;
}

/* --- STATE: choosing a colour (stage in photos mode) --------------------- */
/* hide Design Notes; the left column holds the photo gallery strip instead */
.ss-customizer [data-ss-hero-design].ss-stage-photos ~ .ss-hero-overlay-summary,
.ss-customizer .ss-customizer__hero:has(.ss-stage-photos) .ss-hero-overlay-summary{ display:none !important; }
/* Gallery is now gated behind a "See more of X" link (like mobile) so the left
   column isn't a bulky strip that changes on every colour click. The
   .ss-mobile-photos module (see-more + gallery + back) sits in the LEFT column
   during colour selection; Design Notes reclaim that column in design mode. */
.ss-customizer .ss-gallery-strip{ display:none !important; }   /* always-on strip retired */
.ss-customizer .ss-customizer__hero:has(.ss-stage-photos) .ss-mobile-photos{
  display:block !important; grid-column:1 !important; grid-row:1 !important; align-self:center !important; text-align:center !important;
}
.ss-customizer .ss-customizer__hero:not(:has(.ss-stage-photos)) .ss-mobile-photos{ display:none !important; }
.ss-customizer .ss-see-more,
.ss-customizer .ss-gallery-back{
  background:none !important; border:0 !important; cursor:pointer !important; padding:8px !important; margin:8px auto 0 !important;
  font-family:"bimbo-pro-finetip","bimbo-pro-ballpoint",cursive !important; font-weight:300 !important;
  font-size:22px !important; letter-spacing:0 !important; text-transform:none !important;
  color:#7A1F2B !important; text-decoration:underline !important; text-underline-offset:4px !important;
}
/* "See more" reads as a control, not a note: brand-maroon, larger, and its
   arrow nudges on hover so it clearly invites a click. */
.ss-customizer .ss-see-more{ text-decoration-thickness:1.5px !important; }
.ss-customizer .ss-see-more:hover{ color:#5f1721 !important; }
.ss-customizer .ss-see-more:hover,
.ss-customizer .ss-gallery-back:hover{ color:var(--ss-ink,#645631) !important; }
.ss-customizer .ss-mobile-gallery, .ss-customizer .ss-gallery-back{ display:none !important; }   /* until opened */
.ss-customizer.ss-mgallery-open .ss-see-more{ display:none !important; }
.ss-customizer.ss-mgallery-open .ss-mobile-gallery{
  display:flex !important; flex-direction:column !important; gap:12px !important;
  max-height:var(--ss-panel-h,560px) !important; overflow-y:auto !important; scrollbar-width:thin !important; padding-top:4px !important;
}
.ss-customizer.ss-mgallery-open .ss-gallery-back{ display:block !important; }
.ss-customizer .ss-gallery-back__m{ display:none !important; }   /* desktop: "See less" */
.ss-customizer .ss-gallery-back__d{ display:inline !important; }
.ss-customizer .ss-gallery-thumb{
  display:block !important; width:100% !important; height:auto !important; cursor:pointer !important;
  border-radius:6px !important; border:1px solid rgba(60,48,28,.14) !important; background:#F1EAD8 !important;
  transition:border-color .15s ease, box-shadow .15s ease !important;
}
.ss-customizer .ss-gallery-thumb:hover{ border-color:#b3a789 !important; }
.ss-customizer .ss-gallery-thumb.is-active{ border-color:var(--ss-accent,#8E9B2E) !important; box-shadow:0 0 0 1px var(--ss-accent,#8E9B2E) !important; }

}
/* end v9 desktop — mobile keeps the existing stacked layout below 861px */

/* "+ Add personalizations" — a quiet link under Add to Cart so a shopper who
   skipped the pop-up can reopen it before checkout (all screen sizes). */
.ss-customizer .ss-touch-atc__add{
  display:block !important; margin:12px auto 0 !important;
  background:none !important; border:0 !important; cursor:pointer !important;
  font-family:"gardein",sans-serif !important; font-size:12px !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  color:#7a6e5d !important; text-decoration:underline !important; text-underline-offset:3px !important;
  padding:4px 8px !important;
}
.ss-customizer .ss-touch-atc__add:hover{ color:var(--ss-ink,#645631) !important; }

/* ==================================================================
   MOBILE photo gallery — the desktop vertical strip is hidden on phones, so a
   "See more of X" link (under the journal, above the swatches) opens a
   horizontal scroller of that colour's photos, with a link back to the
   swatches. ss-customizer.js toggles .ss-mgallery-open on the root.
   ================================================================== */
.ss-customizer .ss-mobile-photos{ display:none !important; }
@media (max-width:860px){
  /* slot it between the journal (row 2) and the swatches, bumping the rest down */
  /* min-width:0 is essential: a grid item defaults to min-width:auto (min-content),
     which lets this box expand to fit ALL the photos — breaking the inner
     horizontal scroll AND shoving the centred "Back" button off-screen. Clamp it
     to the column so the gallery scrolls and the button stays centred on screen. */
  .ss-customizer .ss-mobile-photos{ grid-column:1 !important; grid-row:3 !important; text-align:center !important; min-width:0 !important; max-width:100% !important; }
  .ss-customizer .ss-customizer__builder{ grid-row:4 !important; }
  .ss-customizer .ss-hero-overlay-summary{ grid-row:5 !important; }
  .ss-customizer .ss-specs-slot{ grid-row:6 !important; }

  /* the wrapper appears only while choosing a colour (stage in photos mode) */
  .ss-customizer:has([data-ss-hero-design].ss-stage-photos) .ss-mobile-photos{ display:block !important; }

  /* Design Notes are hidden WHILE choosing a colour — they belong beside the
     journal only once a colour is committed (see the design-mode block below).
     Before that they sat empty under the selectors, reading as clutter. */
  .ss-customizer:has([data-ss-hero-design].ss-stage-photos) .ss-hero-overlay-summary{ display:none !important; }

  .ss-customizer .ss-see-more,
  .ss-customizer .ss-gallery-back{
    background:none !important; border:0 !important; cursor:pointer !important; padding:8px !important; margin:8px auto 0 !important;
    font-family:"bimbo-pro-finetip","bimbo-pro-ballpoint",cursive !important; font-weight:300 !important;
    font-size:22px !important; letter-spacing:0 !important; text-transform:none !important;
    color:#7A1F2B !important; text-decoration:underline !important; text-underline-offset:4px !important;
  }
  .ss-customizer .ss-mobile-gallery,
  .ss-customizer .ss-gallery-back{ display:none !important; }         /* hidden until opened */
  .ss-customizer.ss-mgallery-open .ss-see-more{ display:none !important; }
  .ss-customizer.ss-mgallery-open .ss-mobile-gallery{
    display:flex !important; gap:10px !important; overflow-x:auto !important; scroll-snap-type:x proximity !important;
    padding:12px 4px !important; -webkit-overflow-scrolling:touch !important;
    width:100% !important; max-width:100% !important; min-width:0 !important;
  }
  .ss-customizer.ss-mgallery-open .ss-mobile-gallery .ss-gallery-thumb{
    flex:0 0 auto !important;
    /* Natural aspect, NEVER stretched: width/height auto + max caps means each
       photo scales to fit at its OWN ratio. align-self:center stops the flex row
       from stretching short (landscape) shots to the tallest one — that stretch
       was the distortion. A 16:9 shot stays 16:9; a 4:5 stays 4:5, just smaller. */
    width:auto !important; height:auto !important;
    max-width:88vw !important; max-height:64vh !important;
    align-self:center !important; object-fit:contain !important;
    scroll-snap-align:center !important; border-radius:8px !important; border:1px solid rgba(60,48,28,.14) !important;
  }
  .ss-customizer.ss-mgallery-open .ss-gallery-back{ display:block !important; width:100% !important; margin:14px auto 4px !important; }
  .ss-customizer.ss-mgallery-open .ss-customizer__builder{ display:none !important; }
  /* Show the photos IN the journal's spot, not stacked below it: hide the stage
     image and lift the gallery module into row 2. Less scrolling, and the photos
     read as "this colour, up close" right where the journal was. */
  .ss-customizer.ss-mgallery-open [data-ss-hero-design]{ display:none !important; }
  .ss-customizer.ss-mgallery-open .ss-mobile-photos{ grid-row:2 !important; margin:0 !important; }
  .ss-customizer .ss-gallery-back__d{ display:none !important; }   /* mobile: "Back to Color Selections" */
  .ss-customizer .ss-gallery-back__m{ display:inline !important; }
}

/* ==================================================================
   MOBILE — DESIGN mode: once a colour is committed and the illustration shows,
   the Design Notes pull in RIGHT NEXT TO the journal (like desktop, scaled
   down) and tight — the custom-session vibe: selections written beside the
   journal on the kraft paper as you choose. Choosing-a-colour (photos mode) is
   unchanged (full-width photo + "see more"). Keyed off .ss-stage-photos being
   ABSENT (design mode).
   ================================================================== */
@media (max-width:860px){
  .ss-customizer:not(:has([data-ss-hero-design].ss-stage-photos)) .ss-customizer__main{
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) !important;
    column-gap:10px !important; row-gap:8px !important; align-items:center !important;
    padding:0 clamp(6px,3vw,16px) !important;
  }
  .ss-customizer:not(:has([data-ss-hero-design].ss-stage-photos)) .ss-customizer__title--top{ grid-column:1 / -1 !important; grid-row:1 !important; }
  .ss-customizer:not(:has([data-ss-hero-design].ss-stage-photos)) [data-ss-hero-design]{
    grid-column:1 !important; grid-row:2 !important;
    --ss-panel-h: clamp(220px,38vh,330px) !important;
  }
  .ss-customizer:not(:has([data-ss-hero-design].ss-stage-photos)) .ss-hero-overlay-summary{
    grid-column:2 !important; grid-row:2 !important; display:block !important;
    align-self:center !important; text-align:left !important; padding-left:0 !important; width:auto !important;
  }
  /* smaller handwritten title + values so the notes fit tight in the narrow column */
  .ss-customizer:not(:has([data-ss-hero-design].ss-stage-photos)) .ss-hero-overlay-summary::before{
    font-size:22px !important; margin-bottom:8px !important;
  }
  .ss-customizer:not(:has([data-ss-hero-design].ss-stage-photos)) .ss-hero-overlay-summary__list{ gap:3px !important; text-align:left !important; }
  .ss-customizer:not(:has([data-ss-hero-design].ss-stage-photos)) .ss-hero-overlay-summary .ss-summary__key{ font-size:9px !important; letter-spacing:.1em !important; }
  .ss-customizer:not(:has([data-ss-hero-design].ss-stage-photos)) .ss-hero-overlay-summary .ss-summary__val{ font-size:15px !important; }
  /* colour story + selectors drop full-width below the journal/notes pair */
  .ss-customizer:not(:has([data-ss-hero-design].ss-stage-photos)) .ss-specs-slot{ grid-column:1 / -1 !important; grid-row:3 !important; }
  .ss-customizer:not(:has([data-ss-hero-design].ss-stage-photos)) .ss-customizer__builder{ grid-column:1 / -1 !important; grid-row:4 !important; }
}

/* ==================================================================
   MOBILE — colour story dialled down. On a phone the journal + the
   buttons are what matter; the story was reading too large and eating
   the screen. Shrink the handwritten name, the body prose, the swatch
   dot and the shared static text so the story is present but quieter.
   Desktop sizing (the v7/v9 rules above) is untouched.
   ================================================================== */
@media (max-width:860px){
  .ss-customizer .ss-color-story > :first-child{
    font-size:19px !important; gap:7px !important; margin:0 0 7px !important;
  }
  .ss-customizer .ss-color-story > :first-child::before{
    width:11px !important; height:11px !important;
  }
  .ss-customizer .ss-color-story > :first-child ~ *{
    font-size:13.5px !important; line-height:1.45 !important; margin:0 0 7px !important;
  }
  .ss-customizer .ss-specs-static{
    font-size:11px !important; margin-top:12px !important; padding-top:10px !important;
  }
}

/* ==================================================================
   TASSEL nudge — drop the single tassel a hair so the TOP of the ring
   meets the top of the elastic. Overlay-only (the PNG is untouched); the
   % scales with the journal so it holds on desktop and mobile alike.
   Increase the value to drop it more, decrease to raise it.
   ================================================================== */
.ss-customizer .ss-hero__tassel{ transform:translateY(1.6%) !important; }
/* Gallery (Letter) journal is a different frame shape, so the same tassel art
   fits lower on it — pull it UP (negative) so the ring meets the elastic like it
   does on Studio/Muse. Matched via the product handle. Tune this one number. */
.ss-customizer[data-ss-product-handle*="gallery"] .ss-hero__tassel{ transform:translateY(-3%) !important; }

/* ==================================================================
   INITIALS PLACEMENT — hardcoded here so it's set ONCE for all three
   sizes (no per-product theme-editor guess-and-check; these override the
   section's initials_* settings). Right-anchored, so a LARGER `right`
   value moves the monogram further LEFT; a LARGER `bottom` moves it UP.
   Nudge these to taste — one edit here changes Studio, Muse and Gallery.
   ================================================================== */
.ss-customizer .ss-initials-overlay{
  right:18% !important;       /* desktop: centred over the corner */
  bottom:12% !important;      /* desktop: lowered further toward the corner */
  font-size:11px !important;  /* desktop size looked right */
}
@media (max-width:860px){
  .ss-customizer .ss-initials-overlay{
    right:19% !important;     /* mobile: hair more left, to even the corner margins */
    bottom:13% !important;
    font-size:7px !important; /* smaller — 11px read too large on the smaller mobile journal */
  }
}

/* ==================================================================
   END OF FILE MARKER — do not add anything below this.
   ss-customizer.js checks for this. If the stylesheet gets truncated
   during a paste, the top build stamp still matches while the layout
   rules are missing, which looks like a mystery layout bug. This makes
   a partial paste detectable instead.
   ================================================================== */
.ss-customizer{ --ss-build-end:"2026-09-07a"; }
/* END customizer.css - build 2026-09-07a */