/* H01 / Figma 61:431. Color-only storefront theme; owner workspace stays neutral. */
body.store-theme-mode {
  --brown: #60483e;
  --brown-2: #765f54;
  --cream: #fffcf8;
  --blue: #cbe3ee;
  --pink: #f5d4e0;
  --yellow: #f4e1a6;
  --line: #d9c9bc;
  --muted: #765f54;
}
body.home-theme-mode #main-content { overflow-x: clip; }
body.store-theme-mode .site-header { background: var(--cream); border-color: #60483e30; }
body.store-theme-mode .site-header nav a { border-radius: 24px; }
body.store-theme-mode .site-header nav a::after { display: none; }
body.store-theme-mode .site-header nav a.active { background: var(--pink); }
body.store-theme-mode .site-header nav a:hover { background: var(--yellow); }
body.store-theme-mode .cart-button { background: var(--brown); border-color: var(--brown); color: var(--cream); }
body.store-theme-mode .cart-button:hover { background: #4e352a; }
body.store-theme-mode .cart-button strong { background: var(--yellow); color: var(--brown); }
body.store-theme-mode .hero, body.store-theme-mode .featured { position: relative; isolation: isolate; background: transparent; border-color: #60483e30; }
body.store-theme-mode .hero::before, body.store-theme-mode .featured::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; pointer-events: none; }
body.store-theme-mode .hero::before { background: linear-gradient(90deg, var(--blue) 0 50.7%, var(--yellow) 50.7% 100%); }
body.store-theme-mode .hero-copy .button:not(.primary) { background: var(--cream); border-color: var(--brown); }
body.store-theme-mode .hero-copy .button:not(.primary):hover { background: var(--pink); }
body.store-theme-mode .hero-eyebrow, body.store-theme-mode .hero-caption, body.store-theme-mode .hero-art-label, body.store-theme-mode .hero-art-note { color: var(--brown); }
body.store-theme-mode .art-card { background: var(--pink); border-color: var(--brown); box-shadow: 9px 10px 0 var(--brown); }
body.store-theme-mode .art-card::before { border-color: #60483e55; }
body.store-theme-mode .art-card::after { background: var(--yellow); opacity: 1; border: 1px solid var(--brown); }
body.store-theme-mode .rack > i, body.store-theme-mode .rack > i::before, body.store-theme-mode .rack > i::after { background: var(--brown); }
body.store-theme-mode .rack > i { box-shadow: 0 205px 0 var(--brown); }
body.store-theme-mode .rack .dress, body.store-theme-mode .art-star { background: var(--brown); }
body.store-theme-mode .art-flower, body.store-theme-mode .art-pill { border: 1px solid var(--brown); }
body.store-theme-mode .categories { grid-template-columns: repeat(auto-fit, 140px); justify-content: center; gap: 10px; }
body.store-theme-mode .categories a { background: var(--pink); border-color: #60483e70; }
body.store-theme-mode .categories a { aspect-ratio: 1 / 1; min-height: 0; border-radius: 0; }
body.store-theme-mode .categories a > .category-icon { display: none; }
body.store-theme-mode .categories a.tone-1 { background: var(--blue); }
body.store-theme-mode .categories a.tone-2 { background: var(--yellow); }
body.store-theme-mode .categories a.tone-3 { background: var(--brown); color: var(--cream); }
body.store-theme-mode .categories a:hover { border-color: var(--brown); box-shadow: 3px 4px 0 #60483e26; }
body.store-theme-mode .categories a > .category-icon { background: #fffcf866; border: 1px solid #60483e70; }
body.store-theme-mode .categories a.tone-3 :is(small, .category-arrow) { color: var(--cream); }
body.store-theme-mode .categories a.tone-3 > .category-icon { background: #fffcf818; border-color: #fffcf899; }
body.store-theme-mode .featured { padding-top: 44px; }
body.store-theme-mode .featured::before { background: var(--blue); }
body.store-theme-mode .product-card { background: var(--cream); border: 1px solid #60483e26; border-radius: 12px; }
body.store-theme-mode .product-image { background: var(--cream); border-radius: 11px 11px 0 0; border-bottom: 5px solid var(--pink); }
body.store-theme-mode .product-card:nth-child(3n + 2) .product-image { border-bottom-color: var(--yellow); }
body.store-theme-mode .product-card:nth-child(3n) .product-image { border-bottom-color: var(--blue); }
body.store-theme-mode .product-body { padding: 14px 14px 16px; }
body.store-theme-mode .product-image .product-badge { background: var(--pink); border-color: #60483e30; color: var(--brown); border-radius: 20px; }
body.store-theme-mode .product-card:nth-child(3n + 2) .product-badge { background: var(--yellow); }
body.store-theme-mode .product-card:nth-child(3n) .product-badge { background: var(--blue); }
body.store-theme-mode .product-card .button:not(.primary) { background: var(--yellow); border-color: #60483e50; }
body.store-theme-mode .detail-gallery { min-width: 0; }
body.store-theme-mode .detail-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
body.store-theme-mode .detail-thumb { min-width: 0; padding: 0; overflow: hidden; border: 1px solid #60483e35; border-radius: 8px; background: var(--cream); cursor: pointer; }
body.store-theme-mode .detail-thumb img { width: 100%; aspect-ratio: 4 / 5; display: block; object-fit: cover; }
body.store-theme-mode .detail-thumb.active { border: 2px solid var(--brown); }
body.store-theme-mode .detail-image { position: relative; width: 100%; aspect-ratio: 4 / 5; }
body.store-theme-mode .detail-image img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; display: block; object-fit: contain; cursor: zoom-in; }
body.store-theme-mode .detail-image img:focus-visible { outline: 3px solid #8ab9cb; outline-offset: -4px; }
body.store-theme-mode .product-image-dialog { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; border: 1px solid #ffffff35; border-radius: 16px; background: #25211f; color: #fff; box-shadow: 0 30px 90px #0008; margin: auto; }
body.store-theme-mode .product-image-dialog::backdrop { background: #191412db; backdrop-filter: blur(5px); }
body.store-theme-mode .product-image-dialog-header { min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 20px; font-size: 14px; font-weight: 700; }
body.store-theme-mode .product-image-dialog-header [data-image-count] { margin-left: auto; color: #d6c9c2; font-size: 12px; font-weight: 400; }
body.store-theme-mode .product-image-dialog-close, body.store-theme-mode .product-image-dialog-nav { display: grid; place-items: center; padding: 0; border: 1px solid #ffffff50; border-radius: 50%; background: #ffffff18; color: #fff; cursor: pointer; }
body.store-theme-mode .product-image-dialog-close { width: 38px; height: 38px; font-size: 25px; line-height: 1; }
body.store-theme-mode .product-image-dialog-stage { position: relative; display: grid; place-items: center; min-height: 160px; padding: 0 50px; background: #171514; }
body.store-theme-mode .product-image-dialog-stage img { display: block; max-width: 100%; max-height: min(68dvh, 620px); object-fit: contain; }
body.store-theme-mode .product-image-dialog-nav { position: absolute; top: 50%; z-index: 1; width: 38px; height: 38px; transform: translateY(-50%); font-size: 28px; line-height: 1; }
body.store-theme-mode .product-image-dialog-nav.previous { left: 8px; }
body.store-theme-mode .product-image-dialog-nav.next { right: 8px; }
body.store-theme-mode .product-image-dialog-nav[hidden] { display: none; }
body.store-theme-mode .product-image-dialog-footer { min-height: 46px; display: grid; place-items: center; padding: 10px 18px; color: #e3d9d2; font-size: 13px; text-align: center; }
body.store-theme-mode :is(.product-image-dialog-close, .product-image-dialog-nav):hover { background: #ffffff35; }
body.store-theme-mode :is(.product-image-dialog-close, .product-image-dialog-nav):focus-visible { outline: 3px solid #8ab9cb; outline-offset: 2px; }
@media (max-width: 600px) { body.store-theme-mode .product-image-dialog-stage { padding-inline: 12px; } body.store-theme-mode .product-image-dialog-nav { background: #211c1acc; } }
body.store-theme-mode .page-head { background: var(--blue); border-color: #60483e30; }
body.store-theme-mode .filters { border-top: 4px solid var(--pink); }
body.store-theme-mode .summary { border-top: 4px solid var(--pink); }
body.store-theme-mode .summary > small, body.store-theme-mode .countdown { background: var(--yellow); }
body.store-theme-mode .bank, body.store-theme-mode .track-art { background: var(--blue); border-color: #60483e30; }
body.store-theme-mode .info-grid article { border-top: 4px solid var(--pink); }
body.store-theme-mode .info-grid article:nth-child(2) { border-top-color: var(--blue); }
body.store-theme-mode .info-grid article:nth-child(3) { border-top-color: var(--yellow); }
body.store-theme-mode .how { gap: 28px; align-items: start; }
body.store-theme-mode .how > .stack { gap: 14px; }
body.store-theme-mode .how article { position: relative; overflow: hidden; min-height: 92px; padding: 20px 22px; background: var(--pink); border: 1px solid #60483e70; border-radius: 12px; }
body.store-theme-mode .how article:nth-child(2) { background: var(--blue); }
body.store-theme-mode .how article:nth-child(3) { background: var(--yellow); }
body.store-theme-mode .how article:nth-child(4) { background: var(--blue); color: var(--brown); }
body.store-theme-mode .how article:nth-child(5) { background: var(--pink); }
body.store-theme-mode .how article::after { display: none; }
body.store-theme-mode .how article > span { position: relative; z-index: 1; width: 34px; height: 34px; color: var(--brown); background: #fffcf8b8; border: 1px solid #60483e70; border-radius: 50%; font-size: 14px; }
body.store-theme-mode .how article > h2 { position: relative; z-index: 1; margin: 0; font-size: 18px; font-weight: 700; }
body.store-theme-mode .how article:nth-child(4) > span { color: var(--brown); background: #fffcf8b8; border-color: #60483e70; }
body.store-theme-mode .how aside.panel { border: 1px solid #60483e70; border-top: 5px solid var(--yellow); background: var(--blue); }
body.store-theme-mode .how aside.panel h2 { font-weight: 700; }
body.store-theme-mode .how aside.panel dl > div { padding: 14px 0; border-bottom-color: #60483e40; }
body.store-theme-mode .how aside.panel dd { color: var(--brown); font-weight: 700; }
@media (max-width: 820px) {
  body.store-theme-mode .hero::before { background: var(--blue); }
  body.store-theme-mode .hero-art { background: var(--yellow); border-radius: 12px; padding: 18px; }
  body.store-theme-mode .art-card { box-shadow: 6px 7px 0 var(--brown); }
  body.store-theme-mode .product-body { padding: 12px 10px 14px; }
  body.store-theme-mode .how { gap: 18px; }
  body.store-theme-mode .categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  body.store-theme-mode .categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
