:root {
  --sc-canvas: var(--ivory);
  --sc-surface: #fbf9f4;
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--muted);
  --sc-accent: var(--rose);
  --sc-accent-ink: var(--ivory);
  --sc-font-display: var(--serif);
  --sc-font-text: var(--sans);
}

.motion-toggle {
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid rgba(53, 70, 59, .25);
  border-radius: 999px;
  background: var(--ink);
  color: var(--ivory);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
}
.motion-toggle--header { min-width: 76px; flex: 0 0 auto; padding: 8px 9px; font-size: 9px; white-space: nowrap; }
.motion-toggle:hover { border-color: var(--rose-dark); background: #26372d; color: #fff; }
.motion-toggle:disabled { cursor: default; opacity: .78; }
.motion-toggle[hidden], .motion-enable-hero[hidden], .form-submit[hidden], .bag-zoom-open[hidden], .bag-zoom-panel[hidden], .about-heart-button[hidden], .about-heart-hint[hidden] { display: none !important; }

.brand-logo { flex: 0 0 auto; width: 52px; height: 52px; object-fit: contain; }
.brand-plaque img { width: 48px; height: 48px; }
.footer-brand img { width: 38px; height: 38px; }
.hero-title-line { display: block; }

.thread-signature { position: relative; width: min(100%, 340px); aspect-ratio: 8 / 3; margin: 17px 0 -2px -2px; }
.thread-signature svg,
.thread-motion-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.thread-signature-fallback { overflow: visible; opacity: 1; visibility: visible; }
.thread-motion-frame { border: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.thread-signature[data-motion-ready="true"] .thread-signature-fallback { opacity: 0; visibility: hidden; }
.thread-signature[data-motion-ready="true"] .thread-motion-frame { opacity: 1; visibility: visible; }
.bag-zoom-open, .bag-zoom-reset { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 14px; border: 1px solid rgba(53, 70, 59, .28); border-radius: 999px; background: rgba(255, 254, 250, .7); color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .02em; cursor: pointer; }
.bag-zoom-open:hover, .bag-zoom-reset:hover { border-color: var(--rose-dark); background: #fffdf8; }
.motion-enable-hero { min-height: 44px; }
.motion-toggle:focus-visible, .motion-enable-hero:focus-visible, .bag-zoom-open:focus-visible, .bag-zoom-reset:focus-visible, .about-heart-button:focus-visible { outline: 2px solid var(--rose-dark); outline-offset: 3px; }
.thread-story-help { max-width: 420px; margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.hero .hero-footnote { margin-top: 24px; }
.thread-stroke { fill: none; stroke: var(--rose); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.yarn-wrap, .yarn-tail, .thread-bridge, .bag-detail { stroke: var(--sage); stroke-width: 1.8; }
.thread-heart { stroke: var(--rose-dark); stroke-width: 2.6; transform-box: fill-box; transform-origin: center; }
.thread-bag .thread-stroke { stroke: var(--ink); }

.hero-art-wrap { isolation: isolate; }
.hero-art-wrap::before {
  position: absolute;
  z-index: -1;
  inset: 5% -2% 11% 9%;
  border: 1px dashed rgba(114, 129, 109, .42);
  border-radius: 46% 54% 48% 52%;
  content: '';
  transform: translate3d(0, calc((.5 - var(--sc-p, .5)) * 18px), 0) rotate(-4deg);
}

.thread-underline { display: block; width: min(280px, 74%); height: 14px; margin-top: 8px; overflow: visible; }
.thread-underline path { fill: none; stroke: var(--rose); stroke-width: 1.35; stroke-linecap: round; }

.about-mark { width: 176px; border: 1px solid rgba(179, 123, 118, .75); background: radial-gradient(circle at 50% 42%, #fffdf8 0, #f3eee5 68%, #e9e2d6 100%); box-shadow: 0 14px 34px rgba(53, 70, 59, .09); }
.about-mark::before { inset: 9px; border: 1px dashed rgba(114, 129, 109, .48); }
.about-heart-art { position: relative; z-index: 1; display: block; width: 73%; aspect-ratio: 1; transition: transform .18s ease; }
.about-heart-fallback { width: 100% !important; height: 100% !important; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(146, 93, 89, .13)); }
.about-heart-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.about-heart-button { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 50%; background: transparent; cursor: pointer; touch-action: manipulation; }
.about-heart-button:hover, .about-heart-button:active { background: rgba(179, 123, 118, .04); }
.about-heart-hint { position: absolute; z-index: 3; right: 8px; bottom: 11px; left: 8px; margin: 0; color: var(--rose-dark); font-size: 8px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-align: center; text-transform: uppercase; pointer-events: none; }
.about-mark.is-loved .about-heart-art { transform: scale(1.045); }
.about-mark.is-loved .about-heart-hint { color: var(--sage); }

.bag-preview-window { position: absolute; inset: 12px; overflow: hidden; }
.bag-preview-window img { transform: scale(var(--bag-preview-zoom, 1)); transform-origin: center; transition: transform .16s ease; }
.bag-preview-selection { margin: 7px 0 0; color: #596257; font-size: 10px; line-height: 1.6; }
.bag-zoom-tools { margin-top: 12px; }
.bag-zoom-panel { max-width: 430px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 9px 13px; margin-top: 9px; padding: 14px; border: 1px solid rgba(53, 70, 59, .16); background: rgba(255, 254, 250, .7); }
.bag-zoom-label { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 10px; color: #596257; font-size: 10px; font-weight: 600; }
.bag-zoom-label input { grid-column: 1 / -1; width: 100%; min-height: 36px; accent-color: var(--rose-dark); }
.bag-zoom-label output { color: var(--rose-dark); font-variant-numeric: tabular-nums; }
.bag-zoom-reset { grid-column: 2; }
.bag-zoom-help { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }

@media (min-width: 1001px) {
  .product-grid.product-grid--balanced { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .product-grid--balanced .product-card { grid-column: span 2; }
  .product-grid--balanced .product-card:nth-child(4) { grid-column: 2 / span 2; }
  .product-grid--balanced .product-card:nth-child(5) { grid-column: 4 / span 2; }
  .product-grid--filtered { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 310px)); justify-content: center; }
}

@media (min-width: 851px) and (max-width: 920px) {
  .header-inner { gap: 10px; }
  .brand { min-width: 170px; gap: 8px; }
  .brand-logo { width: 58px; height: 58px; }
  .primary-nav { gap: 9px; }
  .primary-nav a { font-size: 10px; }
  .primary-nav .nav-contact { padding: 8px 9px; }
  .motion-toggle--header { min-width: 70px; padding-inline: 6px; }
}

body.motion-enabled .bag-options-row { transform: translate3d(0, calc((1 - var(--sc-p, 0)) * 8px), 0); }
body.motion-enabled .bag-preview-tag { transform: translate3d(0, calc((.5 - var(--sc-p, .5)) * -8px), 0); }
body.motion-enabled #bag-preview-image { will-change: transform, opacity; }
body.motion-enabled .hero-art-frame { transform: translate3d(0, calc((.5 - var(--sc-p, .5)) * 16px), 0); }
body.motion-enabled .brand-plaque { transform: translate3d(0, calc((var(--sc-p, .5) - .5) * -34px), 0); }
body.motion-enabled .hero-spark-one { transform: translate3d(0, calc((.5 - var(--sc-p, .5)) * 42px), 0); }
body.motion-enabled .hero-spark-two { transform: translate3d(0, calc((var(--sc-p, .5) - .5) * 28px), 0); }
body.motion-enabled .bag-designer-copy { transform: translate3d(0, calc((.5 - var(--sc-p, .5)) * 14px), 0); }

body.motion-enabled .detail-dialog[open] { animation: dialog-in .22s cubic-bezier(.2,.7,.25,1) both; }
body.motion-enabled .primary-nav.is-open { animation: nav-in .22s ease-out both; }
body.motion-enabled .primary-nav.is-open a { opacity: 0; animation: nav-item-in .24s ease-out both; }
body.motion-enabled .primary-nav.is-open a:nth-child(1) { animation-delay: .02s; }
body.motion-enabled .primary-nav.is-open a:nth-child(2) { animation-delay: .05s; }
body.motion-enabled .primary-nav.is-open a:nth-child(3) { animation-delay: .08s; }
body.motion-enabled .primary-nav.is-open a:nth-child(4) { animation-delay: .11s; }
body.motion-enabled .primary-nav.is-open a:nth-child(5) { animation-delay: .14s; }
body.motion-enabled .primary-nav.is-open a:nth-child(6) { animation-delay: .17s; }

.no-script-note { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.no-script-note a { color: var(--rose-dark); font-weight: 600; }

body:not(.motion-enabled) [data-sc-in],
body:not(.motion-enabled) [data-sc-stagger] > *,
body:not(.motion-enabled) [data-sc-reveal],
body.motion-static [data-sc-in],
body.motion-static [data-sc-stagger] > *,
body.motion-static [data-sc-reveal],
body.motion-static [data-sc-parallax] {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
  visibility: visible !important;
}

html.motion-static { scroll-behavior: auto !important; }
body.motion-static, body.motion-static * {
  scroll-behavior: auto !important;
  animation: none !important;
  transition-duration: .01ms !important;
}
body.motion-static { background: var(--ivory) !important; }
body.motion-static .hero-art-wrap::before { transform: none !important; }
body.motion-static .thread-stroke { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
body.motion-static .hero .eyebrow,
body.motion-static .hero-title-line,
body.motion-static .hero-intro,
body.motion-static .hero-actions,
body.motion-static .hero-footnote,
body.motion-static .hero-art-frame,
body.motion-static .brand-plaque,
body.motion-static .hero-spark,
body.motion-static .product-copy,
body.motion-static #filter-note,
body.motion-static #bag-preview-image {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body.motion-enabled .product-image-button:hover img { transform: scale(1.04) rotate(.3deg); }
}

@media (max-width: 850px) {
  .header-inner { gap: 8px; }
  .motion-toggle--header { min-width: 70px; padding-inline: 6px; }
  .topline { display: flex; flex-direction: column; gap: 3px; padding-block: 5px; }
  .topline-copy { order: 0; white-space: normal; line-height: 1.35; }
  .brand-logo { width: 48px; height: 48px; }
  .brand-plaque img { width: 42px; height: 42px; }
  .footer-brand img { width: 34px; height: 34px; }
  .thread-signature { width: min(100%, 320px); margin-top: 13px; }
  .about-section { grid-template-columns: 132px 1fr; gap: 24px; }
  .about-mark { width: 132px; }
  .about-heart-hint { bottom: 9px; font-size: 7px; }
  .hero-art-wrap::before { transform: none; }
  body.motion-enabled .hero-art-frame,
  body.motion-enabled .brand-plaque,
  body.motion-enabled .hero-spark,
  body.motion-enabled .bag-designer-copy { transform: none !important; }
  body.motion-enabled .bag-options-row { transform: translateY(calc((1 - var(--sc-p, 0)) * 4px)); }
  body.motion-enabled .bag-preview-tag { transform: none; }
}

@media (max-width: 390px) {
  .topline { font-size: 7px; }
  .header-inner { gap: 4px; }
  .brand { gap: 6px; }
  .brand-logo { width: 40px; height: 40px; }
  .brand-note { display: none; }
  .thread-signature { width: min(100%, 300px); }
}

@media (max-width: 520px) {
  .about-section { grid-template-columns: 1fr; gap: 22px; }
  .about-mark { width: 148px; margin-inline: auto; }
  .about-heart-hint { bottom: 10px; font-size: 8px; }
  .bag-zoom-panel { padding: 12px; }
}

@keyframes dialog-in { from { opacity: .82; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes nav-in { from { opacity: .7; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nav-item-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  html.motion-enabled,
  html.motion-enabled *,
  html.motion-enabled *::before,
  html.motion-enabled *::after {
    animation-duration: .22s !important;
    transition-duration: .2s !important;
  }
  html.motion-enabled .product-image-button img { transition-duration: .45s !important; }
  html:not(.motion-enabled),
  html:not(.motion-enabled) *,
  html:not(.motion-enabled) *::before,
  html:not(.motion-enabled) *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  html:not(.motion-enabled) .detail-dialog[open],
  html:not(.motion-enabled) .primary-nav.is-open,
  html:not(.motion-enabled) .primary-nav.is-open a { animation: none !important; }
}