/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.about-story > p + p { margin-top: 24px; }
.about-signature { margin-top: 32px; padding-top: 24px; border-top: 1px solid #c6cbbf; font-family: var(--catalog-serif, Georgia, serif); }
.about-signature p + p { margin-top: 8px; }

.language-switcher { position: relative; flex: 0 0 auto; width: max-content; font: 13px/1.4 system-ui, sans-serif; color: #344331; }
.language-switcher summary { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 0 10px; cursor: pointer; list-style: none; border: 1px solid transparent; border-radius: 24px; }
.language-switcher summary::-webkit-details-marker { display: none; }
.language-switcher summary:hover, .language-switcher[open] summary { background: #e5e8dc; border-color: #c6cbbf; }
.language-switcher summary .icon { width: 20px; height: 20px; flex: 0 0 auto; }
.language-chevron { transition: transform .15s; }
.language-switcher[open] .language-chevron { transform: rotate(180deg); }
.language-switcher-options { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 170px; padding: 6px; border: 1px solid #c6cbbf; border-radius: 12px; background: #fffdf7; box-shadow: 0 8px 24px #2832251a; }
.language-switcher:not([open]) > .language-switcher-options { display: none; }
.language-switcher .language-switcher-options a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; border-radius: 6px; color: #344331; text-decoration: none; white-space: nowrap; letter-spacing: normal; }
.language-switcher .language-switcher-options a:hover { background: #e5e8dc; }
.language-switcher .language-switcher-options a[aria-current="true"] { background: #344331; color: #fffdf7; font-weight: 600; }
.language-switcher a[aria-current="true"]::after { content: "✓"; margin-left: 16px; }
.language-switcher :focus-visible { outline: 3px solid #3d5a3e; outline-offset: 3px; }
.auth-card .language-switcher { margin-bottom: 20px; }
.auth-card .language-switcher-options { right: auto; left: 0; }
html[lang="en"] .storefront-body { --catalog-serif: Georgia, serif; }
html[lang="ja"] .storefront-body { --catalog-serif: "Yu Mincho", "Hiragino Mincho ProN", serif; }
html:not([lang="zh-TW"]) .storefront-body .navbar-links { gap: 10px; }
html:not([lang="zh-TW"]) .storefront-body .navbar-links a { letter-spacing: 0; }
html:not([lang="zh-TW"]) .storefront-body .hero h1 { letter-spacing: .02em; }
@media (max-width: 1099px) {
  .navbar-container > .language-switcher .language-current, .navbar-container > .language-switcher .language-chevron,
  .admin-topbar .language-current, .admin-topbar .language-chevron { display: none; }
  html .storefront-body .navbar-container { gap: 8px; padding-inline: 16px; }
  html .storefront-body .primary-nav, html .storefront-body .navbar-links { gap: 8px; }
}
@media (max-width: 767px) {
  html .storefront-body .navbar-brand .wordmark-text { font-size: 17px; }
  html .storefront-body .navbar-brand .wordmark { gap: 7px; }
  .storefront-body .menu-button { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .language-chevron { transition: none; }
}