/** Shopify CDN: Minification failed

Line 344:0 Unexpected "<"

**/
/* ==========================================================================
   PrettyRobes — All Wedding Favors collection section
   Scoped under .af-page so rules cannot leak into Dawn or pr-product1.*
   Source mockup: Pages to Collections/all-wedding-favors.html (verbatim, just scoped)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Lato:wght@300;400;500;700&display=swap');

.af-page {
  --af-bg:        #F6F1E8;
  --af-paper:     #EFE6D6;
  --af-ink:       #15110D;
  --af-ink-soft:  #2C241D;
  --af-mute:      #6B6258;
  --af-line:      rgba(21,17,13,.10);
  --af-rule:      rgba(21,17,13,.18);
  --af-oxblood:   #5A2230;
  --af-oxblood-2: #7A2E3F;
  --af-brass:     #9E7D59;
  --af-brass-2:   #C9A87C;
  --af-champ:     #E8D5BB;
  --af-blush:     #E8D5CB;
  --af-sand:      #E7DAC4;
  --af-cream-2:   #F9F5EF;
  --af-serif:     'Cormorant Garamond', Georgia, serif;
  --af-sans:      'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --af-max:       1320px;
  --af-px:        clamp(20px, 5vw, 64px);
  --af-py:        clamp(60px, 8vw, 120px);
  --af-ease:      cubic-bezier(.25,.46,.45,.94);

  background: var(--af-bg);
  color: var(--af-ink);
  font-family: var(--af-sans);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: clip;
}
.af-page *, .af-page *::before, .af-page *::after { box-sizing: border-box; }
.af-page img { display: block; max-width: 100%; }
.af-page a { color: inherit; text-decoration: none; }
.af-page button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
.af-page ul { list-style: none; margin: 0; padding: 0; }

/* Subtle grain overlay */
.af-page::before {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .55; mix-blend-mode: multiply; pointer-events: none; z-index: 1;
}
.af-page > * { position: relative; z-index: 2; }

/* ─── typography ─── */
.af-page h1, .af-page h2, .af-page h3, .af-page h4 {
  font-family: var(--af-serif);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.05;
  margin: 0;
  color: var(--af-ink);
}
.af-page .af-italic { font-style: italic; font-weight: 300; }
.af-page .af-eyebrow {
  font-family: var(--af-sans);
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--af-brass);
  font-weight: 500;
}
.af-page .af-roman {
  font-family: var(--af-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: .04em;
}
.af-page .af-rule {
  display: inline-block;
  width: 36px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin: 0 12px;
  opacity: .5;
}

/* ─── shared shell ─── */
.af-page .af-shell { max-width: var(--af-max); margin: 0 auto; padding: 0 var(--af-px); }

/* announce bar */
.af-page .af-announce {
  background: var(--af-ink);
  color: var(--af-cream-2);
  text-align: center;
  padding: 11px var(--af-px);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 400;
}
.af-page .af-announce .af-dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--af-brass-2);
  margin: 0 14px;
  vertical-align: middle;
}

/* breadcrumbs */
.af-page .af-crumbs {
  padding: 22px 0 6px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--af-mute);
  font-weight: 400;
}
.af-page .af-crumbs a:hover { color: var(--af-ink); }
.af-page .af-crumbs .sep { margin: 0 10px; opacity: .5; }
.af-page .af-crumbs [aria-current] { color: var(--af-ink); }

/* hero */
.af-page .af-hero { position: relative; padding: clamp(28px, 4vw, 56px) 0 0; }
.af-page .af-hero-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: stretch; }
@media (min-width: 960px) { .af-page .af-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; } }

.af-page .af-hero-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 36px; padding-bottom: 8px; }
.af-page .af-hero-meta { display: flex; align-items: center; gap: 14px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--af-mute); font-weight: 500; }
.af-page .af-hero-meta .af-no { font-family: var(--af-serif); font-style: italic; letter-spacing: .04em; text-transform: none; font-size: 14px; color: var(--af-oxblood); }
.af-page .af-hero-h1 { font-size: clamp(58px, 12vw, 168px); letter-spacing: -.025em; line-height: .9; font-weight: 300; margin: 18px 0 22px; }
.af-page .af-hero-h1 .l1 { display: block; }
.af-page .af-hero-h1 .l2 { display: block; font-style: italic; font-weight: 300; margin-left: clamp(40px, 12vw, 160px); position: relative; }
.af-page .af-hero-h1 .l2::before { content: '—'; position: absolute; left: -.7em; top: -.05em; font-style: normal; font-weight: 300; color: var(--af-oxblood); font-size: .7em; }
.af-page .af-hero-lede { font-family: var(--af-serif); font-size: clamp(17px, 2vw, 22px); font-weight: 300; font-style: italic; line-height: 1.45; color: var(--af-ink-soft); max-width: 50ch; margin: 0; }
.af-page .af-hero-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }

.af-page a.af-cta, .af-page .af-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 17px 32px;
  background: var(--af-ink);
  color: var(--af-bg);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background .35s var(--af-ease), transform .35s var(--af-ease);
  border: 1px solid var(--af-ink);
}
.af-page a.af-cta:hover, .af-page .af-cta:hover { background: var(--af-oxblood); border-color: var(--af-oxblood); transform: translateY(-1px); }
.af-page .af-cta .arr { transition: transform .35s var(--af-ease); }
.af-page .af-cta:hover .arr { transform: translateX(4px); }

.af-page .af-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 500; padding-bottom: 4px;
  border-bottom: 1px solid var(--af-ink);
  transition: color .25s, border-color .25s, gap .25s var(--af-ease);
}
.af-page .af-link:hover { color: var(--af-oxblood); border-color: var(--af-oxblood); gap: 14px; }

.af-page .af-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 28px; padding-top: 28px; border-top: 1px solid var(--af-rule); }
.af-page .af-hero-stats .s-num { font-family: var(--af-serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 1; color: var(--af-oxblood); }
.af-page .af-hero-stats .s-lbl { margin-top: 6px; font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--af-mute); font-weight: 500; }

.af-page .af-hero-vis { position: relative; min-height: 480px; }
.af-page .af-hero-vis .v-main { position: relative; width: 100%; height: 100%; min-height: 520px; background: var(--af-paper) center/cover no-repeat; filter: saturate(.92); }
.af-page .af-hero-vis .v-main::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(21,17,13,.18)); }
.af-page .af-hero-vis .v-frame { position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.45); pointer-events: none; z-index: 3; }
.af-page .af-hero-vis .v-tag { position: absolute; bottom: 22px; left: 26px; right: 26px; z-index: 4; display: flex; justify-content: space-between; align-items: flex-end; color: #fff; }
.af-page .af-hero-vis .v-tag .vt-l { font-family: var(--af-serif); font-style: italic; font-size: 22px; line-height: 1.1; font-weight: 400; max-width: 16ch; }
.af-page .af-hero-vis .v-tag .vt-r { font-size: 9px; letter-spacing: .28em; text-transform: uppercase; font-weight: 500; text-align: right; }

/* wax seal */
.af-page .af-seal {
  position: absolute;
  top: -28px; right: -28px;
  width: 132px; height: 132px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #8a3247 0%, var(--af-oxblood) 38%, #3e1620 100%);
  display: grid; place-items: center;
  z-index: 5;
  box-shadow: 0 18px 40px rgba(90,34,48,.35), inset 0 0 0 6px rgba(255,255,255,.04), inset 0 0 22px rgba(0,0,0,.45);
  animation: af-seal-spin 28s linear infinite;
}
.af-page .af-seal::before { content: ''; position: absolute; inset: 9px; border: 1px dashed rgba(232,213,187,.55); border-radius: 50%; }
.af-page .af-seal-svg { width: 100%; height: 100%; position: absolute; inset: 0; }
.af-page .af-seal-svg text { font-family: var(--af-sans); font-size: 8.6px; letter-spacing: .32em; fill: var(--af-champ); font-weight: 500; text-transform: uppercase; }
.af-page .af-seal-mark { position: relative; font-family: var(--af-serif); font-style: italic; font-weight: 400; color: var(--af-champ); font-size: 38px; line-height: 1; text-align: center; z-index: 2; animation: af-seal-spin-rev 28s linear infinite; }
.af-page .af-seal-mark::after { content: 'ESTD MMXIII'; display: block; font-family: var(--af-sans); font-style: normal; font-weight: 500; font-size: 7px; letter-spacing: .3em; margin-top: 4px; color: rgba(232,213,187,.7); }
@keyframes af-seal-spin     { to { transform: rotate(360deg); } }
@keyframes af-seal-spin-rev { to { transform: rotate(-360deg); } }
@media (max-width: 640px) {
  .af-page .af-seal { width: 96px; height: 96px; top: -18px; right: -10px; }
  .af-page .af-seal-mark { font-size: 26px; }
}

/* trust strip */
.af-page .af-trust {
  margin-top: var(--af-py);
  border-top: 1px solid var(--af-rule);
  border-bottom: 1px solid var(--af-rule);
  background: linear-gradient(180deg, transparent, rgba(232,213,187,.18) 50%, transparent);
}
.af-page .af-trust-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; padding: 32px 0; }
@media (min-width: 800px) { .af-page .af-trust-row { grid-template-columns: repeat(4, 1fr); } }
.af-page .af-trust-cell { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.af-page .af-trust-cell .t-icn { width: 32px; height: 32px; display: grid; place-items: center; color: var(--af-oxblood); }
.af-page .af-trust-cell .t-icn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.af-page .af-trust-cell .t-h { font-family: var(--af-serif); font-style: italic; font-size: 17px; font-weight: 400; color: var(--af-ink); }
.af-page .af-trust-cell .t-s { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--af-mute); font-weight: 500; }

/* best sellers / product grid */
.af-page .af-best { padding: var(--af-py) 0; background: var(--af-sand); }
.af-page .af-best-head { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 48px; }
.af-page .af-best-h { font-size: clamp(32px, 4vw, 52px); font-weight: 300; letter-spacing: -.01em; max-width: 18ch; }
.af-page .af-best-h em { font-weight: 400; color: var(--af-oxblood); }

.af-page .af-prods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
@media (min-width: 700px) { .af-page .af-prods { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1020px) { .af-page .af-prods { grid-template-columns: repeat(4, 1fr); } }
.af-page .af-prod { display: flex; flex-direction: column; gap: 14px; }
.af-page .af-prod-img { position: relative; aspect-ratio: 4/5; background: #fff; overflow: hidden; }
.af-page .af-prod-img::before { content: ''; position: absolute; inset: 0; background: var(--img) center/cover no-repeat; transition: transform 1s var(--af-ease); }
.af-page .af-prod:hover .af-prod-img::before { transform: scale(1.05); }
/* Product thumbnails: image FILLS the tile (object-fit: cover) — cropped to the
   edges so there are NO borders/letterbox on non-white product photos and no
   distortion. The backdrop only shows briefly while the image loads. */
.af-page .af-prod-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--af-ease); }
.af-page .af-prod:hover .af-prod-img img { transform: scale(1.05); }
.af-page .af-prod-bdg { position: absolute; top: 14px; left: 14px; background: var(--af-bg); color: var(--af-ink); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; padding: 6px 10px; font-weight: 500; z-index: 2; }
.af-page .af-prod-bdg.is-best { background: var(--af-oxblood); color: var(--af-bg); }
.af-page .af-prod-fav { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; background: rgba(246,241,232,.92); display: grid; place-items: center; border-radius: 50%; z-index: 2; transition: background .25s, color .25s; color: var(--af-ink); }
.af-page .af-prod-fav:hover { background: var(--af-bg); color: var(--af-oxblood); }
.af-page .af-prod-fav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.af-page .af-prod-meta { display: flex; flex-direction: column; gap: 6px; }
.af-page .af-prod-cat { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--af-brass); font-weight: 500; }
.af-page .af-prod-name { font-family: var(--af-serif); font-size: 19px; font-weight: 400; line-height: 1.2; color: var(--af-ink); }
.af-page .af-prod-price { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
.af-page .af-prod-price .pp-now { font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.af-page .af-prod-price .pp-was { font-size: 12px; color: var(--af-mute); text-decoration: line-through; }
.af-page .af-prod-price .pp-from { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--af-mute); margin-right: 2px; font-weight: 500; }
.af-page .af-prod-stars { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--af-mute); letter-spacing: .04em; }
.af-page .af-prod-stars .stars { color: var(--af-oxblood); letter-spacing: 1px; font-size: 12px; }

.af-page .af-count { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--af-mute); margin-bottom: 24px; font-weight: 500; }
.af-page .af-load-more { display: flex; justify-content: center; margin-top: 56px; }
.af-page .af-load-more a, .af-page .af-load-more button { padding: 14px 40px; border: 1px solid var(--af-ink); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; background: transparent; color: var(--af-ink); transition: background .25s, color .25s; display: inline-block; font-weight: 500; }
.af-page .af-load-more a:hover, .af-page .af-load-more button:hover { background: var(--af-ink); color: var(--af-bg); }

/* how-to (personalize) */
.af-page .af-howto { padding: var(--af-py) 0; background: var(--af-ink); color: var(--af-bg); position: relative; }
.af-page .af-howto::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 18% 22%, rgba(158,125,89,.18), transparent 40%), radial-gradient(circle at 82% 80%, rgba(90,34,48,.32), transparent 45%); pointer-events: none; }
.af-page .af-howto > * { position: relative; }
.af-page .af-howto-head { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 64px; }
@media (min-width: 880px) { .af-page .af-howto-head { grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; } }
.af-page .af-howto-eyb { color: var(--af-brass-2); }
.af-page .af-howto-h { font-size: clamp(36px, 4.6vw, 60px); font-weight: 400; letter-spacing: -.01em; color: var(--af-bg); }
.af-page .af-howto-h em { color: var(--af-champ); font-weight: 400; }
.af-page .af-howto-sub { font-size: 15px; line-height: 1.8; color: rgba(246,241,232,.7); max-width: 48ch; }

.af-page .af-steps { display: grid; grid-template-columns: 1fr; gap: 36px; counter-reset: step; }
@media (min-width: 800px) { .af-page .af-steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.af-page .af-step { position: relative; padding: 36px 30px 32px; border: 1px solid rgba(232,213,187,.22); background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); display: flex; flex-direction: column; gap: 14px; transition: border-color .35s var(--af-ease), transform .35s var(--af-ease), background .35s; }
.af-page .af-step:hover { border-color: var(--af-champ); transform: translateY(-3px); background: linear-gradient(180deg, rgba(232,213,187,.06), transparent); }
.af-page .af-step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--af-serif); font-style: italic; font-weight: 400; font-size: 64px; line-height: .9; color: var(--af-champ); margin-bottom: 6px; }
.af-page .af-step-h { font-family: var(--af-serif); font-size: 26px; font-weight: 400; font-style: italic; line-height: 1.15; color: var(--af-champ); }
.af-page .af-step-p { font-size: 13px; line-height: 1.85; color: rgba(246,241,232,.72); font-weight: 300; max-width: 38ch; }
.af-page .af-step-tag { margin-top: 10px; font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--af-brass-2); font-weight: 500; padding-top: 14px; border-top: 1px solid rgba(232,213,187,.18); }

/* reviews band (editorial Etsy excerpts + CTA) */
.af-page .af-reviews { padding: var(--af-py) 0; background: #fff; }
.af-page .af-reviews-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.af-page .af-reviews-h { font-size: clamp(32px, 4vw, 52px); font-weight: 300; letter-spacing: -.01em; margin-bottom: 12px; }
.af-page .af-reviews-h em { color: var(--af-oxblood); font-weight: 400; }
.af-page .af-reviews-sub { color: var(--af-mute); font-size: 14px; }
.af-page .af-reviews-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .af-page .af-reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.af-page .af-review { background: var(--af-cream-2); padding: 32px 28px; border: 1px solid var(--af-rule); display: flex; flex-direction: column; gap: 14px; }
.af-page .af-review .stars { color: var(--af-oxblood); letter-spacing: 1px; font-size: 13px; }
.af-page .af-review blockquote { margin: 0; font-family: var(--af-serif); font-size: 18px; font-style: italic; line-height: 1.45; color: var(--af-ink); }
.af-page .af-review .reviewer { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 11px; color: var(--af-mute); letter-spacing: .08em; text-transform: uppercase; }
.af-page .af-review .reviewer strong { color: var(--af-ink); font-weight: 600; }

/* faq */
.af-page .af-faq { padding: var(--af-py) 0; background: var(--af-sand); }
.af-page .af-faq-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 920px) { .af-page .af-faq-grid { grid-template-columns: .7fr 1fr; gap: 80px; } }
.af-page .af-faq-h { font-size: clamp(32px, 4vw, 52px); font-weight: 300; letter-spacing: -.01em; }
.af-page .af-faq-h em { font-weight: 400; color: var(--af-oxblood); }
.af-page .af-faq-sub { margin-top: 16px; font-size: 14px; color: var(--af-mute); line-height: 1.75; max-width: 36ch; }
.af-page .af-faq-help { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--af-rule); font-size: 12px; letter-spacing: .04em; color: var(--af-mute); }
.af-page .af-faq-help a { color: var(--af-ink); border-bottom: 1px solid var(--af-ink); padding-bottom: 1px; }
.af-page .af-faq-list { display: flex; flex-direction: column; }
.af-page .af-q { border-bottom: 1px solid var(--af-rule); }
.af-page .af-q-btn { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 22px 0; font-family: var(--af-serif); font-size: clamp(18px, 1.6vw, 22px); font-weight: 400; text-align: left; color: var(--af-ink); transition: color .25s; cursor: pointer; }
.af-page .af-q-btn:hover { color: var(--af-oxblood); }
.af-page .af-q-ic { width: 22px; height: 22px; flex-shrink: 0; position: relative; display: inline-block; }
.af-page .af-q-ic::before, .af-page .af-q-ic::after { content: ''; position: absolute; background: currentColor; transition: transform .35s var(--af-ease), opacity .35s; }
.af-page .af-q-ic::before { left: 0; right: 0; top: 50%; height: 1px; }
.af-page .af-q-ic::after  { top: 0; bottom: 0; left: 50%; width: 1px; }
.af-page .af-q[open] .af-q-ic::after { transform: rotate(90deg); opacity: 0; }
.af-page .af-q-body { font-size: 14px; line-height: 1.85; color: var(--af-mute); padding: 0 0 24px; max-width: 64ch; }
.af-page .af-q summary { list-style: none; }
.af-page .af-q summary::-webkit-details-marker { display: none; }

/* final cta */
.af-page .af-final { padding: var(--af-py) 0; background: var(--af-bg); }
.af-page .af-final-card { position: relative; background: var(--af-ink); color: var(--af-bg); padding: clamp(48px, 7vw, 88px) clamp(24px, 5vw, 64px); display: grid; grid-template-columns: 1fr; gap: 32px; overflow: hidden; }
@media (min-width: 880px) { .af-page .af-final-card { grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; } }
.af-page .af-final-card::before { content: ''; position: absolute; top: -120px; right: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, var(--af-oxblood), transparent 65%); filter: blur(20px); opacity: .6; }
.af-page .af-final-card > * { position: relative; }
.af-page .af-final-eyb { color: var(--af-brass-2); }
.af-page .af-final-h { font-size: clamp(36px, 4.4vw, 60px); font-weight: 300; letter-spacing: -.01em; color: var(--af-bg); }
.af-page .af-final-h em { color: var(--af-champ); font-weight: 400; }
.af-page .af-final-p { margin-top: 18px; font-size: 15px; line-height: 1.85; color: rgba(246,241,232,.72); max-width: 48ch; }
.af-page .af-final-actions { display: flex; flex-direction: column; gap: 16px; }
.af-page .af-cta--ghost { background: transparent; color: var(--af-bg); border-color: rgba(232,213,187,.55); }
.af-page .af-cta--ghost:hover { background: var(--af-bg); color: var(--af-ink); border-color: var(--af-bg); }
.af-page .af-final-fine { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(246,241,232,.55); font-weight: 500; }

/* responsive tweaks */
@media (max-width: 720px) {
  .af-page .af-hero-h1 .l2 { margin-left: 24px; }
}

/* focus + reduced motion */
.af-page :focus-visible { outline: 2px solid var(--af-brass); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .af-page *, .af-page *::before, .af-page *::after {
    animation: none !important;
    transition: none !important;
  }
}
</content>
</invoke>
/* ==========================================================================
   Mobile-first + SEO/a11y enhancements — added in audit pass 2026-05-06
   - WCAG 2.5.5 tap targets (>= 44x44)
   - Hover-only effects gated for touch devices
   - 16px form fields to prevent iOS zoom
   - Hero <img> positioning for LCP-friendly image_tag rendering
   ========================================================================== */

/* Tap targets */
.af-page .quick-add,
.af-page .load-more a,
.af-page .load-more button { min-height: 44px; }
.af-page .faq-q { min-height: 56px; }

/* Prevent iOS zoom-on-focus (input font-size must be >= 16px on mobile) */
@media (max-width: 768px) {
  .af-page input[type="email"],
  .af-page input[type="text"],
  .af-page input[type="search"] { font-size: 16px; }
}

/* Hover-only effects: disable / replace on touch */
@media (hover: none) {
  .af-page .quick-add { opacity: 1 !important; transform: none !important; }
  .af-page .card-media .alt { opacity: 0 !important; }
  .af-page .card:hover .card-media .primary { opacity: 1 !important; }
  .af-page .card:hover .card-media .alt { opacity: 0 !important; transform: none !important; }
  .af-page .cta:hover { transform: none !important; }
}

/* Keyboard focus on cards reveals quick-add (a11y parity with hover) */
.af-page .card:focus-within .quick-add { opacity: 1; transform: translateY(0); }

/* Hero image — when rendered as <img> via image_tag, fit cover inside .hero-img */
.af-page .hero-img { overflow: hidden; }
.af-page .hero-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Skip the focus outline reset where focus-visible was unscoped */
.af-page a:focus-visible,
.af-page button:focus-visible,
.af-page input:focus-visible,
.af-page select:focus-visible,
.af-page textarea:focus-visible { outline: 2px solid var(--gold, #C9A87C); outline-offset: 3px; }

/* Ensure breadcrumb links and inline anchors meet contrast on small screens */
@media (max-width: 480px) {
  .af-page .crumbs,
  .af-page .bc-crumbs,
  .af-page .brbp-crumbs,
  .af-page .bjj-crumbs,
  .af-page .elj-crumbs,
  .af-page .psb-crumbs,
  .af-page .wk-crumbs,
  .af-page .wv-crumbs,
  .af-page .af-crumbs { font-size: 13px; }
}

.af-page .v-main { overflow: hidden; position: relative; }
.af-page .v-main-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }


/* ==========================================================================
   Tiered pricing section — added in revision pass
   ========================================================================== */
.af-page .af-pricing {
  padding: clamp(40px, 5vw, 72px) 0;
  background: #fff;
  border-bottom: 1px solid var(--af-line, rgba(0,0,0,.08));
}
.af-page .af-pricing-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;
  padding: 0 clamp(20px, 5vw, 56px);
}
.af-page .af-pricing-h {
  font-family: var(--af-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  margin: 12px 0 12px;
}
.af-page .af-pricing-sub { color: var(--af-muted, #6b6660); }
.af-page .af-pricing-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}
@media (min-width: 760px) {
  .af-page .af-pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.af-page .af-tier {
  background: var(--af-cream, #faf7f2);
  padding: 28px 24px;
  text-align: center;
  border: 1px solid var(--af-line, rgba(0,0,0,.08));
}
.af-page .af-tier-qty {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--af-muted, #6b6660);
  margin-bottom: 8px;
}
.af-page .af-tier-price {
  font-family: var(--af-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 24px;
  color: #000;
}
.af-page .af-tier-save {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--af-gold-deep, #A8854F);
}

/* Review photo (added so real review images render) */
.af-page .af-review-photo {
  aspect-ratio: 1;
  background: var(--af-cream, #faf7f2);
  margin: -32px -28px 16px;
  overflow: hidden;
}
.af-page .af-review-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Hero overlay readability — guarantees the .vt-l / .vt-r text is readable
   regardless of whether a hero image was uploaded yet. v-tag-readability */
.af-page .af-hero-vis .v-tag {
  position: absolute;
  text-shadow: 0 1px 10px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.45);
}
.af-page .af-hero-vis .v-tag::before {
  content: '';
  position: absolute;
  left: -26px;
  right: -26px;
  bottom: -22px;
  top: -120px;
  /* Lighter than before (.55/.30 → .4/.18) for caption readability. */
  background: linear-gradient(to top, rgba(15,12,10,.4) 0%, rgba(15,12,10,.18) 50%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* Placeholder fallback when no hero image is uploaded — uses brand cream + a
   subtle dark gradient at the bottom so v-tag text is still readable. */
.af-page .af-hero-vis .v-main--placeholder {
  background: linear-gradient(180deg, var(--af-cream, #faf7f2) 0%, var(--af-stone, #e8e4de) 100%);
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
}
.af-page .af-hero-vis .v-main--placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(21,17,13,.45) 100%);
  pointer-events: none;
}


/* Hero image clickable — smooth-scroll anchor wraps the hero image */
.hero-scroll-link { display: block; cursor: pointer; line-height: 0; }
.hero-scroll-link img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-scroll-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }


/* SEO copy section (replaces the legacy af-final closing note) */
.af-page .af-seo {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--af-bg, #f6f1e8);
  border-top: 1px solid rgba(0,0,0,.08);
}
.af-page .af-seo-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}
.af-page .af-seo-h {
  font-family: var(--af-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 18px;
}
.af-page .af-seo-body p {
  opacity: .85;
  margin: 0 0 14px;
  line-height: 1.65;
}
.af-page .af-seo-body a {
  border-bottom: 1px solid currentColor;
}

/* Reviews summary line — single centered line under the heading */
.af-page .section-head .reviews-summary-line { text-align: center; margin: 0 auto; }

/* Reviews app block container — give Judge.me / app blocks room to render */
.af-page .reviews-app { margin-bottom: 32px; }
.af-page .reviews-app:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════
   CHAPTER INDEX — the "three chapters, one library" cards
═══════════════════════════════════════════════════════════════ */
.af-page .af-index { padding: var(--af-py) 0 calc(var(--af-py) - 24px); background: #fff; }
.af-page .af-index-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 48px;
}
@media (min-width: 880px) {
  .af-page .af-index-head { grid-template-columns: 1.4fr 1fr; align-items: end; gap: 56px; }
}
.af-page .af-index-h {
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 300;
  letter-spacing: -.01em;
}
.af-page .af-index-h em { color: var(--af-oxblood); font-weight: 400; }
.af-page .af-index-sub {
  font-size: 14px;
  color: var(--af-mute);
  max-width: 46ch;
  line-height: 1.7;
}
.af-page .af-index-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--af-rule);
  border: 1px solid var(--af-rule);
}
@media (min-width: 880px) { .af-page .af-index-grid { grid-template-columns: repeat(4, 1fr); } }
.af-page .af-index-card {
  background: #fff;
  padding: 28px 26px 26px;
  display: flex; flex-direction: column;
  gap: 14px;
  position: relative;
  transition: background .35s var(--af-ease);
  min-height: 200px;
}
.af-page .af-index-card:hover { background: var(--af-paper); }
.af-page .af-index-card .ic-no {
  font-family: var(--af-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--af-oxblood);
}
.af-page .af-index-card .ic-h {
  font-family: var(--af-serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}
.af-page .af-index-card .ic-h em { font-weight: 300; }
.af-page .af-index-card .ic-list {
  font-size: 12px;
  color: var(--af-mute);
  letter-spacing: .04em;
  line-height: 1.7;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--af-rule);
}
.af-page .af-index-card .ic-go {
  position: absolute;
  top: 26px; right: 22px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--af-mute);
  transition: color .25s, transform .35s var(--af-ease);
}
.af-page .af-index-card:hover .ic-go { color: var(--af-oxblood); transform: translate(2px, -2px); }
.af-page .af-index-card .ic-go svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════════
   CHAPTER SECTION — header + mosaic grid
═══════════════════════════════════════════════════════════════ */
.af-page .af-chapter {
  padding: var(--af-py) 0;
  position: relative;
}
/* Every chapter keeps EQUAL top + bottom padding. Chapter II previously
   collapsed to padding-top:0; the distinct background colours below now do the
   separating, so the old padding-collapse between consecutive chapters is gone. */
.af-page #chapter-i   { background: var(--af-sand); } /* deeper warm */
.af-page #chapter-ii  { background: var(--af-bg);   } /* light cream */
.af-page #chapter-iii { background: var(--af-sand); } /* deeper warm */

.af-page .af-ch-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: 56px;
}
@media (min-width: 900px) {
  .af-page .af-ch-head { grid-template-columns: auto 1fr auto; align-items: end; gap: 48px; }
}
.af-page .af-ch-no {
  font-family: var(--af-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(72px, 9vw, 132px);
  line-height: .9;
  color: var(--af-oxblood);
  letter-spacing: -.01em;
}
.af-page .af-ch-titles {
  border-left: 1px solid var(--af-rule);
  padding-left: 32px;
  display: flex; flex-direction: column;
  gap: 14px;
}
@media (max-width: 899px) {
  .af-page .af-ch-titles { border-left: 0; padding-left: 0; border-top: 1px solid var(--af-rule); padding-top: 22px; }
}
.af-page .af-ch-eyb { color: var(--af-brass); }
.af-page .af-ch-h {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  line-height: 1;
}
.af-page .af-ch-h em { font-weight: 400; }
.af-page .af-ch-desc {
  font-size: 14px;
  color: var(--af-mute);
  max-width: 50ch;
  line-height: 1.75;
  margin: 8px 0 0;
}
.af-page .af-ch-cta {
  align-self: end;
  text-align: right;
}
@media (max-width: 899px) { .af-page .af-ch-cta { text-align: left; } }

/* Mosaic grid (asymmetric) */
.af-page .af-mosaic {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 740px) {
  .af-page .af-mosaic {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 220px;
    gap: 22px;
  }
}
.af-page .af-mosaic .m-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--af-paper);
  isolation: isolate;
}
.af-page .af-mosaic .m-card::before {
  content: '';
  position: absolute; inset: 0;
  /* Uploaded/linked image (set inline via --img) is cropped to FILL the tile,
     centered, never stretched or letterboxed. Falls back to the card paper bg. */
  background: var(--img, none) center center / cover no-repeat;
  filter: saturate(.92);
  transition: transform 1s var(--af-ease), filter .5s var(--af-ease);
  z-index: 0;
}
.af-page .af-mosaic .m-card:hover::before { transform: scale(1.05); filter: saturate(1.05); }
.af-page .af-mosaic .m-card::after {
  content: '';
  position: absolute; inset: 0;
  /* Lighter than before (.7 → .4) — keeps label readability with less darkening. */
  background: linear-gradient(180deg, transparent 50%, rgba(21,17,13,.4));
  z-index: 1;
}
.af-page .af-mosaic .m-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 22px 24px 22px;
  z-index: 2;
  color: var(--af-bg);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px;
}
.af-page .af-mosaic .m-body .m-l { display: flex; flex-direction: column; gap: 4px; }
.af-page .af-mosaic .m-body .m-cat {
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  font-weight: 500;
  color: var(--af-champ);
}
.af-page .af-mosaic .m-body .m-h {
  font-family: var(--af-serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.05;
}
/* Lighter gradient (above) plus a soft text-shadow keep the labels readable. */
.af-page .af-mosaic .m-body .m-cat,
.af-page .af-mosaic .m-body .m-h { text-shadow: 0 1px 14px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.4); }
.af-page .af-mosaic .m-body .m-go {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background .3s, transform .35s var(--af-ease);
}
.af-page .af-mosaic .m-card:hover .m-go { background: var(--af-oxblood); border-color: var(--af-oxblood); transform: rotate(-45deg); }
.af-page .af-mosaic .m-body .m-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.af-page .af-mosaic .m-tag {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 2;
  background: var(--af-bg);
  color: var(--af-oxblood);
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 7px 12px;
}
.af-page .af-mosaic .m-card { min-height: 320px; }
@media (min-width: 740px) {
  .af-page .af-mosaic .m-card { min-height: 0; }
  .af-page .af-mosaic .m1 { grid-column: span 4; grid-row: span 2; }
  .af-page .af-mosaic .m2 { grid-column: span 2; grid-row: span 1; }
  .af-page .af-mosaic .m3 { grid-column: span 2; grid-row: span 1; }
  .af-page .af-mosaic .m4 { grid-column: span 3; grid-row: span 1; }
  .af-page .af-mosaic .m5 { grid-column: span 3; grid-row: span 1; }
  .af-page .af-mosaic .m6 { grid-column: span 2; grid-row: span 1; }
  .af-page #chapter-iii .af-mosaic .m4,
  .af-page #chapter-iii .af-mosaic .m5 { grid-column: span 2; }
}

/* ═══════════════════════════════════════════════════════════════
   AESTHETICS — "Shop the mood" by-theme grid
═══════════════════════════════════════════════════════════════ */
.af-page .af-themes { padding: var(--af-py) 0; background: var(--af-sand); }
.af-page .af-themes-head { margin-bottom: 48px; max-width: 60ch; }
.af-page .af-themes-h {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  letter-spacing: -.01em;
}
.af-page .af-themes-h em { font-weight: 400; color: var(--af-oxblood); }
.af-page .af-themes-sub {
  margin-top: 14px;
  font-size: 14px;
  color: var(--af-mute);
  line-height: 1.75;
}
.af-page .af-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (min-width: 720px) { .af-page .af-theme-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1020px) { .af-page .af-theme-grid { grid-template-columns: repeat(6, 1fr); gap: 14px; } }
.af-page .af-theme {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--af-paper);
  display: block;
}
.af-page .af-theme::before {
  content: '';
  position: absolute; inset: 0;
  /* Uploaded/linked image (set inline via --img) is cropped to FILL the 3:4 tile,
     centered, never stretched or letterboxed. Falls back to the tile paper bg. */
  background: var(--img, none) center center / cover no-repeat;
  filter: grayscale(.05) saturate(.85);
  transition: transform 1.2s var(--af-ease), filter .5s;
}
.af-page .af-theme:hover::before { transform: scale(1.06); filter: saturate(1); }
/* Label sits in a solid black bar with a small white right-arrow (matches the
   Shoulder Bags tiles). No gradient scrim over the photo. */
.af-page .af-theme-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 11px 34px 12px 14px;
  color: #fff;
  z-index: 2;
  background: #000;
}
.af-page .af-theme-body::after {
  content: '\2192';
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-family: var(--af-sans);
  font-size: 14px;
  line-height: 1;
  transition: transform .25s var(--af-ease);
}
.af-page .af-theme:hover .af-theme-body::after { transform: translateY(-50%) translateX(3px); }
.af-page .af-theme-no {
  font-family: var(--af-sans);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--af-brass-2);
  margin-bottom: 3px;
}
.af-page .af-theme-h {
  font-family: var(--af-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.25;
}
.af-page .af-theme-line { display: none; }