/* Flora Atelier – site shell: header, full-screen menu, footer (designs: SiteHeader.dc.html, SiteFooter.dc.html).
   The shell also wraps Elementor/WooCommerce pages (body.fla-shell-only) where Hello Elementor + the Elementor kit
   style a, button, nav, header, footer … globally. Every rule is therefore anchored on one of the three root IDs
   (#fla-header, #fla-menu, #fla-footer): ID specificity beats any class-based builder rule, including :hover/:focus,
   whatever the stylesheet order. Each root starts with a hard reset of its subtree. */

:root { --fla-header-h: 76px; }

/* In-page anchors must not land under the fixed header. */
html { scroll-padding-top: calc(var(--fla-header-h) + 2px); }

/* Elementor/WooCommerce pages: the header is fixed and solid, so the document starts below it.
   The body is a flex column so that on short pages (empty cart, …) the dark footer sits at the bottom of the
   viewport instead of floating mid-page. */
body.fla-shell-only { padding-top: var(--fla-header-h); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.fla-shell-only > * { flex-shrink: 0; }
body.fla-shell-only > #fla-footer { margin-top: auto; }

/* Scroll lock while the menu is open */
html.fla-menu-open, html.fla-menu-open body { overflow: hidden; }

/* ---------- reset ---------- */
#fla-header, #fla-menu, #fla-footer {
  margin: 0; padding: 0; border: 0; float: none; width: auto; max-width: none; min-height: 0;
  font-family: Montserrat, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; font-weight: 400; font-style: normal;
  line-height: normal; letter-spacing: normal; text-transform: none; text-align: left; text-decoration: none;
  color: #5E524C; box-shadow: none; -webkit-font-smoothing: antialiased; box-sizing: border-box;
}
#fla-header *, #fla-menu *, #fla-footer *,
#fla-header *::before, #fla-menu *::before, #fla-footer *::before,
#fla-header *::after, #fla-menu *::after, #fla-footer *::after {
  margin: 0; padding: 0; border: 0; border-radius: 0; float: none; min-width: 0; min-height: 0; max-width: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; text-decoration: none;
  text-shadow: none; color: inherit; background: none; box-shadow: none; outline: 0; opacity: 1;
  transition: none; box-sizing: border-box; -webkit-tap-highlight-color: transparent;
}
#fla-header a, #fla-menu a, #fla-footer a, #fla-header button, #fla-menu button { cursor: pointer; }
#fla-header button, #fla-menu button { -webkit-appearance: none; appearance: none; width: auto; white-space: normal; user-select: auto; }
#fla-header a:focus-visible, #fla-header button:focus-visible,
#fla-menu a:focus-visible, #fla-menu button:focus-visible,
#fla-footer a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ---------- header ---------- */
#fla-header {
  position: fixed; left: 0; right: 0; top: 0; z-index: 20; display: block;
  --fla-hdr-ink: #F7F3F0; --fla-hdr-sub: #EDE5DF;
  background: rgba(242, 237, 233, 0);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background .5s;
}
#fla-header.is-solid { --fla-hdr-ink: #2E2825; --fla-hdr-sub: #8C7D74; background: rgba(242, 237, 233, .9); }
body.admin-bar #fla-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar #fla-header { top: 46px; } }

#fla-header .fla-hdr__in {
  max-width: 1440px; margin: 0 auto; height: var(--fla-header-h); padding: 0 clamp(20px, 4vw, 56px);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
#fla-header .fla-hdr__logo { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
#fla-header .fla-hdr__name { font-size: 14px; letter-spacing: .44em; color: var(--fla-hdr-ink); transition: color .5s; white-space: nowrap; }
#fla-header .fla-hdr__sub { font-size: 10px; letter-spacing: .1em; color: var(--fla-hdr-sub); transition: color .5s; white-space: nowrap; }

#fla-header .fla-hdr__nav { display: flex; flex-shrink: 0; gap: clamp(18px, 2.4vw, 40px); }
#fla-header .fla-hdr__link {
  font-size: 13px; letter-spacing: .06em; color: var(--fla-hdr-ink); padding: 8px 0;
  border-bottom: 1px solid transparent; transition: color .5s; white-space: nowrap;
}
#fla-header .fla-hdr__link.is-active, #fla-header .fla-hdr__link:hover { border-bottom-color: currentColor; }

#fla-header .fla-hdr__cta {
  height: 44px; padding: 0 22px; border-radius: 22px; border: 1px solid var(--fla-hdr-ink); color: var(--fla-hdr-ink);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  transition: all .4s; white-space: nowrap;
}
#fla-header .fla-hdr__cta:hover { background: #5E524C; border-color: #5E524C; color: #F7F3F0; }

#fla-header .fla-hdr__burger {
  display: none; width: 48px; height: 48px; flex-shrink: 0; background: transparent;
  flex-direction: column; align-items: flex-end; justify-content: center; gap: 7px; padding: 0 8px;
}
#fla-header .fla-hdr__burger span { display: block; width: 24px; height: 1.5px; background: var(--fla-hdr-ink); }
#fla-header .fla-hdr__burger span + span { width: 15px; }

#fla-header .fla-hdr__bar { height: 1.5px; background: #B8968A; transform-origin: left; scale: 0 1; }

/* The design switches to the burger below 1000px, but its own desktop row (logo + 5 links + pill, at the design's
   sizes and gaps) needs ~1175px; between 1000 and 1179px it would overflow the viewport. So the burger is used
   below 1180px. shell.js reads the breakpoint from the burger's computed display, not from a number. */
@media (max-width: 1179.98px) {
  #fla-header .fla-hdr__nav, #fla-header .fla-hdr__cta { display: none; }
  #fla-header .fla-hdr__burger { display: flex; }
}

/* ---------- menu ---------- */
#fla-menu[hidden] { display: none; }
#fla-menu .fla-menu__panel {
  position: fixed; inset: 0; z-index: 30; background: #F2EDE9;
  display: flex; flex-direction: column; padding: 0 clamp(20px, 4vw, 56px) 36px;
  overflow: hidden auto; overscroll-behavior: contain; transition: opacity .25s;
}
#fla-menu.is-closing .fla-menu__panel { opacity: 0; pointer-events: none; }
body.admin-bar #fla-menu .fla-menu__panel { top: 32px; }
@media (max-width: 782px) { body.admin-bar #fla-menu .fla-menu__panel { top: 46px; } }

#fla-menu .fla-menu__head { position: relative; flex-shrink: 0; height: var(--fla-header-h); display: flex; align-items: center; justify-content: space-between; }
#fla-menu .fla-menu__logo { display: flex; flex-direction: column; gap: 3px; }
#fla-menu .fla-menu__name { font-size: 14px; letter-spacing: .44em; color: #2E2825; white-space: nowrap; }
#fla-menu .fla-menu__sub { font-size: 10px; letter-spacing: .1em; color: #8C7D74; white-space: nowrap; }
#fla-menu .fla-menu__close {
  width: 48px; height: 48px; flex-shrink: 0; background: transparent; font-size: 22px; color: #5E524C;
  display: block; text-align: center;
}

#fla-menu .fla-menu__nav { position: relative; flex-shrink: 0; display: flex; flex-direction: column; margin-top: 20px; }
#fla-menu .fla-menu__item { display: block; }
#fla-menu .fla-menu__rule { height: 1px; background: #DED4CD; transform-origin: left; }
#fla-menu .fla-menu__link { display: flex; align-items: baseline; gap: 18px; padding: 17px 0; color: #5E524C; }
#fla-menu .fla-menu__num { font-size: 11px; letter-spacing: .1em; color: #A8968A; width: 20px; flex-shrink: 0; }
#fla-menu .fla-menu__label { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size: 30px; line-height: 1.05; font-style: normal; color: #5E524C; flex: 1; }
#fla-menu .fla-menu__link.is-active .fla-menu__label { font-style: italic; color: #2E2825; }
#fla-menu .fla-menu__mark { font-size: 14px; color: #A8968A; }

#fla-menu .fla-menu__space { flex: 1 0 24px; }
#fla-menu .fla-menu__cta {
  height: 56px; flex-shrink: 0; background: #5E524C; color: #F7F3F0; border-radius: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
}
#fla-menu .fla-menu__meta {
  display: flex; justify-content: center; gap: 28px; margin-top: 20px; flex-shrink: 0;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
#fla-menu .fla-menu__meta a { color: #8C7D74; }

/* ---------- footer ---------- */
#fla-footer { position: relative; display: block; background: #3F3632; color: #E6DCD5; overflow: hidden; }
#fla-footer .fla-ftr__in {
  max-width: 1440px; margin: 0 auto; padding: clamp(64px, 8vw, 110px) clamp(20px, 4vw, 56px) 36px;
  display: flex; flex-direction: column; gap: 48px;
}
#fla-footer .fla-ftr__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 40px; align-items: start; }
#fla-footer .fla-ftr__logo { display: flex; flex-direction: column; gap: 4px; }
#fla-footer .fla-ftr__name { font-size: 15px; letter-spacing: .44em; color: #F7F3F0; }
#fla-footer .fla-ftr__sub { font-size: 11px; letter-spacing: .1em; color: #B5A69C; }
#fla-footer .fla-ftr__contact { display: flex; flex-direction: column; }
#fla-footer .fla-ftr__row {
  display: flex; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid #594E48; color: #F7F3F0;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size: 28px;
}
#fla-footer .fla-ftr__row--mail { font-size: 26px; }
#fla-footer .fla-ftr__hint { font-family: Montserrat, 'Helvetica Neue', Arial, sans-serif; font-size: 12px; letter-spacing: .14em; color: #B5A69C; align-self: center; white-space: nowrap; }
#fla-footer .fla-ftr__social { display: flex; flex-direction: column; gap: 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
#fla-footer .fla-ftr__social a { color: #F7F3F0; }
#fla-footer .fla-ftr__big {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: clamp(80px, 16vw, 260px); line-height: .85; color: #4A403B; white-space: nowrap;
}
#fla-footer .fla-ftr__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  font-size: 12px; line-height: 1.6; color: #B5A69C; border-top: 1px solid #594E48; padding-top: 22px;
}
#fla-footer .fla-ftr__legal { display: flex; gap: 24px; }
#fla-footer .fla-ftr__legal a { color: #B5A69C; }

@media print {
  #fla-header { position: static; }
  #fla-menu { display: none; }
  body.fla-shell-only { padding-top: 0; display: block; min-height: 0; }
}