/*
 * 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; }
.cta-term { white-space: nowrap; }
/* Our Vision: a single centred statement between the page heading and the story. */
.about-vision { padding: clamp(56px, 8vw, 104px) 0; background: #f7f0e6; text-align: center; }
.about-vision h2 { margin: 0; font: 400 13px/1.4 var(--font-sans, sans-serif); letter-spacing: 0.24em; text-transform: uppercase; color: #8c6a2c; }
.about-vision h2::after { content: ""; display: block; width: 44px; height: 1.5px; margin: 20px auto 28px; background: #b4914f; }
.about-vision-text { max-width: 30ch; margin: 0 auto; font: 400 clamp(24px, 3vw, 38px)/1.5 var(--catalog-serif, Georgia, serif); letter-spacing: 0.02em; color: #22301f; text-wrap: balance; }
:lang(zh-TW) .about-vision-text, :lang(ja) .about-vision-text { max-width: 22em; }
.about-story-title { margin: 0; font: 400 clamp(30px, 3.4vw, 46px)/1.2 var(--catalog-serif, Georgia, serif); letter-spacing: 0.04em; color: #22301f; }
.about-story-title::after { content: ""; display: block; width: 44px; height: 1.5px; margin-top: 24px; background: #b4914f; }
.about-story .about-story-text { margin-bottom: 0; font-size: 17px; line-height: 1.9; color: #3d4639; }
/* Our Story keeps a reading measure (about 70 Latin or 34 CJK characters a line) and opens with a serif lead. */
.about-story { max-width: 34em; font-size: 17px; }
.about-story .about-story-text { font: 400 clamp(19px, 1.7vw, 22px)/1.75 var(--catalog-serif, Georgia, serif); letter-spacing: 0.01em; color: #22301f; }
/* On wide screens the heading stays beside the story while it is read. */
@media (min-width: 1024px) { .about-intro > :first-child { position: sticky; top: 128px; align-self: start; } }
.field-error { margin-top: 8px; color: #902b15; font-size: 14px; line-height: 1.5; }
.form-input label abbr { color: #902b15; text-decoration: none; }
/* Shared flash surfaces: status stays recognizable through both color and icon shape. */
.notifications { padding: max(88px, calc(env(safe-area-inset-top, 0px) + 88px)) 16px 24px; overflow-y: auto; }
.notification-stack { height: max-content; }
@media (min-width: 768px) { .notifications { padding-inline: 24px; } }
.notifications .flash {
  --notification-ink: #285238;
  --notification-surface: rgb(237 245 238 / 94%);
  --notification-line: #a8c4ad;
  --notification-hover: #dcebdd;
  color: var(--notification-ink);
  background: var(--notification-surface);
  border: 1px solid var(--notification-line);
}
.notifications .flash.alert {
  --notification-ink: #902b15;
  --notification-surface: rgb(255 240 235 / 94%);
  --notification-line: #dea997;
  --notification-hover: #f8ded3;
}
.notification-content { padding: 12px; }
.notification-row { display: flex; align-items: flex-start; gap: 12px; }
.notification-icon { flex: 0 0 24px; padding-top: 10px; }
.notification-message { flex: 1; min-width: 0; padding-block: 10px; }
.notifications .notification-text { margin: 0; font: 500 14px/1.7 var(--font-sans, sans-serif); color: inherit; overflow-wrap: anywhere; }
.notification-actions { flex-shrink: 0; }
.notification-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; color: inherit; cursor: pointer; }
.notification-close:hover { background: var(--notification-hover); }
.notification-close:focus-visible { outline: 2px solid var(--notification-ink); outline-offset: 2px; }
/* Text-only pages (innovation, eco-friendly, support) keep a readable measure. */
.text-page-body { max-width: 72ch; }
.text-page-body > p + p { margin-top: 24px; }
.about-contact { padding-top: 28px; border-top: 1px solid #c6cbbf; }
.about-contact .contact-heading { margin-bottom: 20px; font-family: var(--catalog-serif, Georgia, serif); font-size: 1.25rem; letter-spacing: 0.04em; color: #22301f; }
/* Each detail keeps its natural width and the pair wraps only when the column is too narrow. */
.contact-details { display: flex; flex-wrap: wrap; gap: 20px 48px; margin: 0; }
.contact-details > div { min-width: 0; max-width: 100%; }
.contact-details dt { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #5b665c; }
.contact-details dd { margin: 6px 0 0; font: 400 clamp(18px, 1.6vw, 21px)/1.4 var(--catalog-serif, Georgia, serif); letter-spacing: 0.02em; overflow-wrap: break-word; }
.contact-details a { color: #22301f; text-decoration: underline; text-decoration-color: rgb(140 106 44 / 40%); text-decoration-thickness: 1px; text-underline-offset: 6px; transition: text-decoration-color 0.2s; }
.contact-details a:hover { text-decoration-color: #8c6a2c; }
.contact-details a:focus-visible { outline: 2px solid #8c6a2c; outline-offset: 4px; }
.contact-details .contact-details-phone { white-space: nowrap; }
/* The support page is only this block, so it stands alone and carries the page heading. */
.support-contact { padding-block: clamp(56px, 8vw, 104px); }
.support-contact .about-contact { margin-top: 0; padding-top: 0; border-top: 0; }
.support-contact .contact-heading { margin-bottom: 20px; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: 0.04em; color: #22301f; }
.support-contact .contact-details dd { font-size: clamp(20px, 2vw, 24px); }
/* Contact page: one ruled column per location under the shared email and phone. */
.contact-offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; list-style: none; }
.contact-offices li { min-width: 0; padding-top: 24px; border-top: 1px solid #c6cbbf; }
.contact-offices h3 { margin: 0; font: 400 clamp(22px, 2vw, 28px)/1.3 var(--catalog-serif, Georgia, serif); letter-spacing: 0.04em; color: #22301f; }
/* Darker than the catalog gold so 13px text keeps 4.5:1 on paper. */
.contact-offices .contact-office-role { margin: 6px 0 16px; font-size: 13px; letter-spacing: 0.08em; color: #75581f; }
.contact-offices address { display: grid; gap: 8px; font-style: normal; font-size: 15px; line-height: 1.75; color: #3d4639; overflow-wrap: anywhere; }
@media (max-width: 767px) { .contact-offices { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } }

.language-switcher { position: relative; flex: 0 0 auto; width: max-content; font: 13px/1.4 system-ui, sans-serif; color: #344331; }
.admin-topbar .language-switcher { color: #f8f7f2; }
.admin-topbar .language-switcher summary:hover, .admin-topbar .language-switcher[open] summary { background: #394337; border-color: #82907d; }
.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 { flex: 0 0 auto; width: 7px; height: 7px; margin: -3px 2px 0 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
.language-switcher[open] .language-chevron { margin-top: 3px; transform: rotate(225deg); }
.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; }
/* The full-size wordmark needs ~285px; narrow phones leave the auth card ~225px. */
@media (max-width: 400px) {
  .auth-card .company-brand .wordmark { gap: 8px; }
  .auth-card .company-brand .brand-tree { width: 27px; height: 36px; }
  .auth-card .company-brand .wordmark-text { font-size: 17px; }
  .auth-card .company-brand .brand-tagline { font-size: 6px; }
}
.mobile-language-switcher { display: none; }
html:is([lang="en"], [lang="fr"], [lang="es"]) .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; }
/* The links sit in two groups; the space between the groups must match the space within them. */
@media (min-width: 768px) { html:not([lang="zh-TW"]) .storefront-body .primary-nav { 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: 14px; letter-spacing: .08em; }
  html .storefront-body .navbar-brand .wordmark { gap: 7px; }
  .storefront-body .menu-button { flex-shrink: 0; }
  .storefront-body .navbar-container > .language-switcher { display: none; }
  .storefront-body .mobile-language-switcher { display: block; margin-top: 24px; padding: 24px 8px 0; border-top: 1px solid #c6cbbf; }
  .storefront-body .mobile-language-label { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 13px/1.4 system-ui, sans-serif; }
  .storefront-body .mobile-language-label .icon { width: 18px; height: 18px; }
  .storefront-body .mobile-language-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .storefront-body .mobile-language-options a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 8px 4px; border: 1px solid #c6cbbf; border-radius: 22px; font: 13px/1.4 system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
  .storefront-body .mobile-language-options a[aria-current="true"] { border-color: #344331; background: #344331; color: #fffdf7; font-weight: 600; }
  .storefront-body .mobile-language-options a:focus-visible { outline: 3px solid #3d5a3e; outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .language-chevron { transition: none; }
}