/* Resolved house design system palette */
:root {
  --bg: #F8F4EE;
  --surface: #EDE4D8;
  --text: #241F1C;
  --text-muted: #504942;
  --accent: #DF3F3F;
  --accent-hover: #B83434;
  --secondary: #C4703F;
  --line: #C9BCAC;
}

/* AItoFigma — shared baseline (hand-authored, not LLM-generated) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--text, var(--color-text, #1a1a1a));
  background: var(--bg, var(--color-bg, #ffffff));
  line-height: 1.5;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent, var(--color-focus, #2684ff)); outline-offset: 2px; }

.container {
  width: 100%;
  max-width: var(--container-max, 1200px);
  margin-inline: auto;
  padding-inline: var(--container-pad, 1.25rem);
}

/* Baseline micro-interaction easing so state changes are never instant/janky.
   Per-page CSS can still override transition on any element it wants. */
a, button, [role="button"], .btn, input, textarea, select, summary {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

/* Smooth page entrance — every page fades/lifts in once on load. Uses `both`
   fill + a short duration so it degrades cleanly; the reduced-motion block
   below neutralizes it entirely. */
@keyframes afx-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
body { animation: afx-page-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Lazy-loaded images fade in when they decode instead of popping in. Only
   hidden once global.js has confirmed it's running (.afx-js on <html>), so a
   JS failure never leaves images permanently invisible. */
.afx-js img[loading="lazy"] { opacity: 0; transition: opacity 0.4s ease; }
.afx-js img[loading="lazy"].afx-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  body { animation: none; }
  .afx-js img[loading="lazy"] { opacity: 1; }
}

/* Scroll-reveal utility (paired with the IntersectionObserver in global.js) */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Preloader mechanics (hand-authored; the loader's own look/internal motion,
   under #afx-loader, is LLM-generated per project — see resolve_design_system
   in pipeline/services.py). Only present when a design system was resolved
   for this run and rendered a loader; on any other build #afx-loader simply
   doesn't exist and none of this applies. Exact numbers per the STRICT
   STYLING SPEC section 8 — dismissal fade 650ms ease-out (300ms under
   prefers-reduced-motion, a deliberate exception to the blanket 0.01ms
   reduced-motion override below, so the overlay still eases out gently
   instead of snapping away). */
html.is-loading, html.is-loading body { overflow: hidden; }
#afx-loader { position: fixed; inset: 0; z-index: 9999; }
#afx-loader.afx-loader-hide { opacity: 0; pointer-events: none; transition: opacity 650ms ease-out; }

/* The header/nav's own entrance, triggered the instant `is-loading` is
   removed from <html> — see the dismissal sequence in global.js. Harmless
   no-op selector when there's no .site-header (no shared chrome this run). */
@keyframes afx-header-in {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: none; }
}
html.is-loading .site-header { opacity: 0; }
html:not(.is-loading) .site-header {
  animation: afx-header-in 500ms cubic-bezier(0.22, 0.68, 0.18, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  #afx-loader.afx-loader-hide { transition: opacity 300ms ease-out !important; }
}

/* Themed document scrollbar — replaces the browser default everywhere on the
   site, not just where an LLM call happened to remember to style it. Webkit
   (Chrome/Edge/Safari) + Firefox's own scrollbar-color/-width properties. */
html::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track { background: var(--bg, var(--color-bg, #ffffff)); }
html::-webkit-scrollbar-thumb {
  background: var(--line, var(--color-line, #d0d0d0));
  border-radius: 999px;
  border: 2px solid var(--bg, var(--color-bg, #ffffff));
}
html::-webkit-scrollbar-thumb:hover { background: var(--accent, var(--color-focus, #2684ff)); }
html { scrollbar-width: thin; scrollbar-color: var(--line, var(--color-line, #d0d0d0)) var(--bg, var(--color-bg, #ffffff)); }

/* Top-of-page scroll progress bar (see global.js) — a slim fixed strip whose
   width tracks how far down the document the reader is. Sits above the
   sticky header (1030) but below the preloader overlay (9999) so it's
   already hidden behind the loader on first paint and only becomes visible
   once the loader dismisses. The width change is driven every scroll frame
   from JS, not a CSS transition, so reduced-motion needs no override here. */
#afx-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent, var(--color-focus, #2684ff));
  z-index: 2000;
  pointer-events: none;
}

/* ---- per-page styles below ---- */


/* shared site header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1030;
  width: 100%;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, rgba(220,210,199,0.24) 0%, rgba(220,210,199,0) 100%);
  font-family: "Geist", sans-serif;
}

.achdr-bar{
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 32px 0px;
  box-sizing: border-box;
  gap: 24px;
}

/* ---- logo (shared) ---- */
.achdr-logo{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  flex-shrink: 0;
}
.achdr-pixels{
  display: grid;
  grid-template-columns: 14px 14px;
  grid-template-rows: 14px 14px;
  gap: 4px;
  width: 32px;
  height: 32px;
}
.achdr-pixels i{
  display: block;
  width: 14px;
  height: 14px;
  background: #713219;
  border-radius: 1px;
}
.achdr-wordmark{
  font-family: "DM Serif Display", serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 38px;
  letter-spacing: -0.5px;
  color: #111827;
}

/* ---- desktop utilities ---- */
.achdr-utilities{
  display: flex;
  align-items: center;
  gap: 36px;
}
.achdr-nav{
  display: flex;
  align-items: center;
  gap: 40px;
}
.achdr-nav a{
  font-family: "Geist", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
  color: #2e2a27;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s cubic-bezier(0.22,1,0.36,1);
  display: inline-block;
}
.achdr-nav a:hover,
.achdr-nav a:focus-visible{
  color: var(--accent);
}

.achdr-currency{
  display: flex;
  align-items: center;
}
.achdr-currency-btn{
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: "Geist", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.1px;
  color: #2e2a27;
}
.achdr-chevron{
  display: block;
  width: 10px;
  height: 5px;
  object-fit: contain;
}
.achdr-currency-menu{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  min-width: 120px;
}
.achdr-currency-menu .dropdown-item{
  font-family: "Geist", sans-serif;
  font-size: 15px;
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
}
.achdr-currency-menu .dropdown-item:hover,
.achdr-currency-menu .dropdown-item:focus-visible{
  background: var(--bg);
  color: var(--accent);
}

.achdr-cart,
.achdr-account{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  text-decoration: none;
}
.achdr-cart-icon{
  width: 16.8px;
  height: 18px;
  object-fit: contain;
}
.achdr-account-icon{
  width: 16px;
  height: 17px;
  object-fit: contain;
}
.achdr-cart-count{
  position: absolute;
  top: -6px;
  right: -8px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.achdr-cart-count-bg{
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.achdr-cart-count-label{
  position: relative;
  font-family: "Geist", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #f8f4ee;
}

/* ---- mobile bar ---- */
.achdr-bar--mobile{
  padding: 20px 24px;
  position: relative;
  flex-wrap: wrap;
}
.achdr-toggler{
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  padding: 0;
}
.achdr-toggler-bar{
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s cubic-bezier(0.22,1,0.36,1), opacity .25s cubic-bezier(0.22,1,0.36,1);
}
.achdr-toggler[aria-expanded="true"] .achdr-toggler-bar:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.achdr-toggler[aria-expanded="true"] .achdr-toggler-bar:nth-child(2){
  opacity: 0;
}
.achdr-toggler[aria-expanded="true"] .achdr-toggler-bar:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

.achdr-mobile-menu{
  flex-basis: 100%;
  width: 100%;
  order: 3;
}
.achdr-mobile-nav{
  display: flex;
  flex-direction: column;
  padding: 16px 0 8px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.achdr-mobile-nav a{
  font-family: "Geist", sans-serif;
  font-size: 17px;
  line-height: 28px;
  color: #2e2a27;
  text-decoration: none;
  padding: 10px 4px;
}
.achdr-mobile-nav a:hover,
.achdr-mobile-nav a:focus-visible{
  color: var(--accent);
}

.achdr-mobile-actions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 8px 4px 16px;
  border-bottom: 1px solid var(--line);
}
.achdr-currency--mobile .achdr-currency-btn{
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.achdr-cart--mobile,
.achdr-account--mobile{
  width: auto;
  height: auto;
  flex-direction: column;
  gap: 4px;
}
.achdr-cart-wrap{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.achdr-mobile-label{
  font-family: "Geist", sans-serif;
  font-size: 12px;
  color: var(--text-muted);
}

.site-header a:focus-visible,
.site-header button:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* shared site footer */
.site-footer{
  width: 100%;
  background: #241f1c;
  font-family: "Geist", sans-serif;
  overflow-x: hidden;
}
.afoot-inner{
  padding: 96px clamp(20px, 6vw, 240px) 40px;
  box-sizing: border-box;
}

.afoot-top{
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
  padding-bottom: 72px;
}

.afoot-brand{
  flex: 1 1 320px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.afoot-logo{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
}
.afoot-pixels{
  display: grid;
  grid-template-columns: 14px 14px;
  grid-template-rows: 14px 14px;
  gap: 4px;
  width: 32px;
  height: 32px;
}
.afoot-pixels i{
  display: block;
  width: 14px;
  height: 14px;
  background: #a55231;
  border-radius: 1px;
}
.afoot-wordmark{
  font-family: "DM Serif Display", serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 38px;
  letter-spacing: -0.5px;
  color: #f8f4ee;
}
.afoot-body{
  margin: 0;
  font-family: "Geist", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: #a79c92;
}
.afoot-contact{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
}
.afoot-detail{
  margin: 0;
  font-family: "Geist", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: #a79c92;
}
.afoot-detail--light{
  color: #f8f4ee;
}

.afoot-col{
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.afoot-heading{
  margin: 0;
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 17.9px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: #a55231;
}
.afoot-heading--accent{ color: #a55231; }
.afoot-heading--secondary{ color: #667567; }
.afoot-heading--light{ color: #f8f4ee; }

.afoot-link{
  display: inline-block;
  font-family: "Geist", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: #a79c92;
  text-decoration: none;
  transition: color .2s cubic-bezier(0.22,1,0.36,1);
}
.afoot-link:hover,
.afoot-link:focus-visible{
  color: var(--accent);
}

.afoot-rule{
  display: block;
  width: 100%;
  height: 1px;
  object-fit: cover;
  border: none;
  background: var(--line);
}

.afoot-bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 32px;
}
.afoot-copyright{
  margin: 0;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #a79c92;
}
.afoot-utilities{
  display: flex;
  align-items: center;
  gap: 32px;
}
.afoot-payment{
  display: flex;
  align-items: center;
  gap: 14px;
}
.afoot-card{
  position: relative;
  width: 46px;
  height: 28px;
  border: 1px solid #3a1519;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.afoot-visa{
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.6px;
  text-align: center;
  color: #9a8078;
}
.afoot-card--mc{
  overflow: hidden;
}
.afoot-mc-circle{
  position: absolute;
  top: 6px;
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.afoot-mc-circle--a{ left: 9px; }
.afoot-mc-circle--b{ left: 21px; }

.site-footer a:focus-visible,
.site-footer button:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 575.98px){
  .afoot-top{ gap: 48px; }
  .afoot-brand{ flex: 1 1 100%; max-width: none; }
  .afoot-col{ flex: 1 1 45%; }
  .afoot-bottom{ flex-direction: column; align-items: flex-start; }
}

/* preloader */
#afx-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 9999;
}

.afx-icon {
  width: 84px;
  height: 84px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 6px rgba(165, 82, 49, 0.35));
  animation: afx-icon-pulse 2000ms cubic-bezier(0.5, 0, 0.25, 1) infinite;
}

@keyframes afx-icon-pulse {
  0%   { transform: scale(0.85); opacity: 0.6; }
  25%  { transform: scale(1.06); opacity: 1; }
  50%  { transform: scale(0.95); opacity: 0.85; }
  75%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(0.85); opacity: 0.6; }
}

.afx-wordmark {
  margin-bottom: 20px;
  font-family: 'DM Serif Display', serif;
  font-weight: 600;
  font-size: 25px;
  color: var(--text);
  display: flex;
}

.afx-wordmark span {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%);
  animation: afx-letter-in 500ms cubic-bezier(0.22, 0.68, 0.18, 1) forwards;
}

@keyframes afx-letter-in {
  to { opacity: 1; transform: translateY(0); }
}

.afx-progress {
  width: 220px;
  height: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--line) 20%, var(--bg));
  overflow: hidden;
  margin-bottom: 12px;
}

.afx-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 3px;
  animation: afx-progress-fill 2000ms cubic-bezier(0.5, 0, 0.25, 1) forwards;
}

@keyframes afx-progress-fill {
  0%    { width: 0%; }
  70%   { width: 82%; }
  100%  { width: 100%; }
}

.afx-status {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-family: 'Geist', sans-serif;
  transition: opacity 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .afx-icon {
    animation: none;
  }
  .afx-wordmark span {
    animation: none;
    opacity: 1;
    transform: translateY(0);
  }
}