/* Cyrillic headings use Nunito (self-hosted subset, picked in font-lab #36);
   Latin keeps Spectral. Restricted unicode-range so only Cyrillic glyphs pick
   this up. 'Playfair Cyr' kept below for easy switching back. */
@font-face{
  font-family:'Nunito Cyr';font-style:normal;font-weight:200 1000;font-display:swap;
  src:url('../fonts/nunito-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Playfair Cyr';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/playfair-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
:root{
  --cream:#FDFCF8; --warm-white:#F5F0E8; --tea-green:#7A8B6E; --tea-dark:#3D4A35;
  --gold:#C9A96E; --gold-light:#E8D5B7; --text:#2C2416; --text-light:#6B5D4A;
  --gold-deep:#BD9A5C;
  /* Silky, refined ease for "quiet luxury" micro-interactions */
  --ease-silk: cubic-bezier(.16, 1, .3, 1);
  /* Headings — 'Nunito Cyr' catches Cyrillic (unicode-range), Spectral for
     Latin, Noto Serif SC/Thai cover zh/th glyphs. */
  --font-display: 'Nunito Cyr', 'Spectral', 'Noto Serif SC', 'Noto Serif Thai', serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Source Sans 3',sans-serif;background:var(--cream);color:var(--text);
  line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text);letter-spacing:-0.01em;line-height:1.1}
a{color:var(--tea-dark);text-decoration:none}
a:hover{color:var(--gold)}
.container{max-width:1100px;margin:0 auto;padding:0 1.5rem}
::selection{background:rgba(201,169,110,.35);color:var(--tea-dark)}
.site-header{position:sticky;top:0;z-index:100;background:rgba(253,252,248,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--gold-light)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding: 0.2rem 1.5rem;}
.header-left{display:flex;align-items:center;gap:1.75rem}
.brand-mark img{height:62px;width:auto;display:block}
.site-nav{display:flex;gap:2rem;white-space:nowrap;font-size:1.02rem;letter-spacing:.02em;font-weight:400}
.site-nav a:hover{color:var(--gold)}
.header-brand{display:flex;flex-direction:column;align-items:center;line-height:1;text-align:center}
.header-brand-eyebrow{font-size:.64rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:.34rem}
.header-brand-title{font-family:var(--font-display,serif);font-size:1.85rem;font-weight:600;color:var(--text);white-space:nowrap}
.header-brand-title .amp{color:var(--gold);font-style:italic;font-weight:400}
.langswitcher{display:inline-flex;align-items:center;gap:.12rem;list-style:none;
  border:1px solid var(--gold-light);border-radius:50px;padding:.18rem;background:rgba(255,255,255,.45)}
.langswitcher li a{display:block;font-size:.78rem;font-weight:600;letter-spacing:.05em;
  color:var(--text-light);padding:.32rem .6rem;border-radius:50px;line-height:1;
  transition:color .15s,background .15s}
.langswitcher li a:hover{color:var(--tea-dark)}
.langswitcher li.active a{background:var(--gold);color:var(--text)}
/* Touch devices: give each language pill a comfortable tap height */
@media (any-pointer: coarse), (max-width: 768px){
.langswitcher li a{min-height:40px;display:flex;align-items:center}
}

/* ── Mobile burger button ── */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  background:none;border:none;cursor:pointer;
  color:var(--text);
  border-radius:8px;
  padding:0;
  transition:color .2s, background .2s;
  flex-shrink:0;
}
.nav-toggle:hover{color:var(--gold);background:rgba(201,169,110,.1)}
.nav-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nav-toggle-icon{display:block;pointer-events:none}
.nav-toggle-close{display:none}

/* ── Mobile menu panel ── */
.mobile-menu{
  display:none;
  flex-direction:column;
  gap:0;
  background:rgba(253,252,248,.98);
  border-top:1px solid var(--gold-light);
  overflow:hidden;
  max-height:0;
  transition:max-height .32s cubic-bezier(.4,0,.2,1), opacity .28s ease;
  opacity:0;
  pointer-events:none;
}
.mobile-menu.is-open{
  max-height:420px;
  opacity:1;
  pointer-events:auto;
}
@media(prefers-reduced-motion:reduce){
  .mobile-menu{transition:none}
}
.mobile-menu-nav{
  display:flex;
  flex-direction:column;
  padding:.75rem 1.5rem .5rem;
}
.mobile-menu-nav a{
  font-size:1.1rem;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--text);
  padding:.7rem 0;
  border-bottom:1px solid rgba(201,169,110,.18);
  transition:color .18s;
}
.mobile-menu-nav a:last-child{border-bottom:none}
.mobile-menu-nav a:hover{color:var(--gold)}
.mobile-menu-lang{
  padding:.75rem 1.5rem 1rem;
  border-top:1px solid var(--gold-light);
}
.mobile-menu-lang .langswitcher{font-size:.88rem}

/* ── Responsive breakpoint ── */
@media(max-width:768px){
  .header-inner{padding:.5rem 1rem}
  .brand-mark img{height:48px}
  .header-left{gap:0}
  .site-nav{display:none}
  .header-actions-desktop{display:none}
  .header-brand{display:none}
  .nav-toggle{display:inline-flex}
  .mobile-menu{display:flex}
}
@media(min-width:769px){
  .nav-toggle{display:none!important}
  .mobile-menu{display:none!important}
  .header-actions-desktop{display:flex;align-items:center}
  /* logo + nav left · wordmark center · actions right */
  .header-inner{display:grid;grid-template-columns:1fr auto 1fr;column-gap:1.5rem}
  .header-inner .header-left{justify-self:start}
  .header-inner .header-brand{justify-self:center}
  .header-inner .header-actions{justify-self:end}
}
.site-footer{background:var(--tea-dark);color:var(--cream);margin-top:4rem;padding:2.5rem 0;text-align:center}
.site-footer a{color:var(--gold-light)}
.footer-brand{font-family:var(--font-display);font-size:1.3rem}
.footer-meta,.footer-rights{font-size:.85rem;color:rgba(255,255,255,.75);margin-top:.5rem}
/* ══════════════════════════════════════════
   Contact page — premium redesign
   ══════════════════════════════════════════ */

/* Page wrapper */
.contact-page{padding:4rem 1.5rem 5rem;max-width:960px}

/* ── Page header ── */
.contact-header{margin-bottom:3rem;text-align:center}
.contact-eyebrow{
  display:block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.85rem;
}
.contact-title{
  font-size:clamp(2.4rem,5vw,3.6rem);
  margin-bottom:1.1rem;
  color:var(--text);
}
.contact-intro{
  max-width:520px;
  margin:0 auto;
  font-size:1.08rem;
  line-height:1.75;
  color:var(--text-light);
}

/* ── Two-column grid ── */
.contact-grid{
  display:grid;
  grid-template-columns:3fr 2fr;
  gap:2rem;
  align-items:stretch;
}
.contact-info-card{display:flex;flex-direction:column}

/* ── Shared card shell ── */
.contact-form-card,
.contact-info-card{
  background:var(--warm-white);
  border:1px solid var(--gold-light);
  border-radius:18px;
  padding:2.2rem 2rem;
  box-shadow:0 4px 24px rgba(61,74,53,.07);
}

/* ── Form card: inputs & labels ── */
.contact-form-card .form-label,
.contact-form-card label{
  display:block;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-light);
  margin-bottom:.35rem;
}
.contact-form-card input,
.contact-form-card textarea,
.contact-form-card select{
  width:100%;
  padding:.75rem 1rem;
  margin-bottom:1.2rem;
  border:1px solid var(--gold-light);
  border-radius:9px;
  background:var(--cream);
  font:inherit;
  font-size:1rem;
  color:var(--text);
  transition:border-color .2s,box-shadow .2s;
}
.contact-form-card input:focus,
.contact-form-card textarea:focus,
.contact-form-card select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,169,110,.18);
}
.contact-form-card textarea{min-height:130px;resize:vertical}
.contact-form-card button[type="submit"],
.contact-form-card .form-submit button,
.contact-form-card input[type="submit"]{
  background:var(--gold);
  color:var(--text);
  border:none;
  padding:.9rem 2.2rem;
  border-radius:50px;
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .18s,box-shadow .18s;
}
.contact-form-card button[type="submit"]:hover,
.contact-form-card .form-submit button:hover,
.contact-form-card input[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(201,169,110,.32);
}
.contact-form-card button[type="submit"]:focus-visible,
.contact-form-card .form-submit button:focus-visible,
.contact-form-card input[type="submit"]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){
  .contact-form-card button[type="submit"],
  .contact-form-card .form-submit button,
  .contact-form-card input[type="submit"]{transition:none}
}

/* ── Info card ── */
.contact-info-heading{
  font-size:1.5rem;
  color:var(--text);
  margin-bottom:1.5rem;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--gold-light);
}

/* Messenger buttons */
.contact-messengers{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  margin-bottom:1.75rem;
}
.contact-messenger-btn{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-height:44px;
  padding:.7rem 1.1rem;
  border-radius:12px;
  border:1px solid var(--gold-light);
  background:var(--cream);
  color:var(--text);
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.02em;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.contact-messenger-btn:hover{
  color:var(--text);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(61,74,53,.1);
  border-color:var(--gold);
}
.contact-messenger-btn:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){
  .contact-messenger-btn{transition:none}
}
.contact-msgr-icon{flex-shrink:0}

/* Address block */
.contact-address{
  border-top:1px solid var(--gold-light);
  padding-top:1.4rem;
}
.contact-address-link{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  color:var(--text-light);
  font-size:.95rem;
  line-height:1.55;
  transition:color .18s;
}
.contact-address-link:hover{color:var(--text)}
.contact-address-icon{
  margin-top:.15rem;
  color:var(--gold);
  flex-shrink:0;
}
.contact-address-text{
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.contact-address-text strong{
  font-weight:600;
  color:var(--text);
  font-size:1rem;
}

/* ── Map section ── */
.contact-map{
  margin:3rem 0 0;
}
.contact-map-frame{
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--gold-light);
  box-shadow:0 4px 24px rgba(61,74,53,.07);
}
.contact-map-frame iframe{
  width:100%;
  display:block;
  filter:saturate(.92);
}
.contact-map-link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-top:1rem;
  font-size:.85rem;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--tea-dark);
  text-decoration:none;
  border-bottom:1px solid var(--gold-light);
  padding-bottom:.15rem;
  transition:color .18s,border-color .18s;
}
.contact-map-link:hover{
  color:var(--gold);
  border-color:var(--gold);
}
.contact-map-link:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ── Mobile: single column ── */
@media(max-width:720px){
  .contact-page{padding:2.5rem 1rem 4rem}
  .contact-header{margin-bottom:2rem}
  .contact-grid{grid-template-columns:1fr}
  .contact-form-card,.contact-info-card{padding:1.6rem 1.25rem}
}

/* ── Map preview (info card → directions page) ── */
.contact-map-preview{
  display:block;
  margin-top:1.25rem;
  text-decoration:none;
}
/* Prominent CTA below the map */
.contact-map-preview-cta{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-height:48px;
  padding:.7rem 1rem;
  margin-top:.6rem;
  border-radius:12px;
  background:var(--gold);
  color:var(--text);
  font-size:.98rem;
  font-weight:600;
  letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(201,169,110,.28);
  transition:transform .18s, box-shadow .18s;
}
.contact-map-preview-cta > svg{flex-shrink:0}
.contact-map-preview-arrow{margin-left:auto;font-size:1.1em;transition:transform .18s}
.contact-map-preview:hover .contact-map-preview-cta{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(201,169,110,.38);
}
.contact-map-preview:hover .contact-map-preview-arrow{transform:translateX(4px)}
/* Map thumbnail with click-catching overlay */
.contact-map-preview-frame{
  position:relative;
  display:block;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--gold-light);
  box-shadow:0 2px 12px rgba(61,74,53,.08);
  transition:box-shadow .18s, border-color .18s;
}
.contact-map-preview-frame iframe{display:block;width:100%;filter:saturate(.92)}
.contact-map-preview-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  cursor:pointer;
  background:transparent;
  transition:background .18s;
}
.contact-map-preview:hover .contact-map-preview-frame{
  border-color:var(--gold);
  box-shadow:0 8px 20px rgba(61,74,53,.14);
}
.contact-map-preview:hover .contact-map-preview-overlay{
  background:rgba(201,169,110,.12);
}
.contact-map-preview:focus-visible .contact-map-preview-cta{
  outline:2px solid var(--tea-dark);outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){
  .contact-map-preview-cta,.contact-map-preview-arrow,
  .contact-map-preview-frame,.contact-map-preview-overlay{transition:none}
}

/* ══════════════════════════════════════════
   Directions page ("How to find us")
   ══════════════════════════════════════════ */
.directions-page{padding:4rem 1.5rem 5rem;max-width:960px}
.directions-header{margin-bottom:2.5rem;text-align:center}
.directions-header .contact-intro{margin-left:auto;margin-right:auto}
.directions-map-frame{
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--gold-light);
  box-shadow:0 6px 30px rgba(61,74,53,.1);
}
.directions-map-frame iframe{width:100%;display:block}
.directions-info{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem 2rem;
  align-items:center;
  justify-content:space-between;
  margin-top:1.75rem;
}
.directions-address-card{display:flex;flex-direction:column;gap:.35rem}
.directions-address-label{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);
}
.directions-address-value{
  display:flex;align-items:flex-start;gap:.6rem;
  font-size:1.05rem;color:var(--text);line-height:1.5;max-width:34ch;
}
.directions-address-value .contact-address-icon{margin-top:.1rem}
.directions-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.btn-directions-primary{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--gold);color:var(--text);
  padding:.8rem 1.6rem;border-radius:50px;
  font-weight:600;font-size:.9rem;letter-spacing:.02em;
  min-height:44px;
  transition:transform .18s, box-shadow .18s;
}
.btn-directions-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(201,169,110,.32);
  color:var(--text);
}
.btn-directions-primary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.directions-back{
  display:inline-block;margin-top:2.25rem;
  font-size:.9rem;font-weight:500;color:var(--text-light);
}
.directions-back:hover{color:var(--gold)}
@media(prefers-reduced-motion:reduce){.btn-directions-primary{transition:none}}
@media(max-width:720px){
  .directions-page{padding:2.5rem 1rem 4rem}
  .directions-info{flex-direction:column;align-items:flex-start}
  .directions-actions{width:100%}
  .btn-directions-primary,.directions-actions .contact-messenger-btn{flex:1 1 auto;justify-content:center}
}

.prose{padding:3rem 1.5rem;max-width:720px}
.prose p{margin-bottom:1.2rem;font-size:1.1rem}
.error-page{padding:6rem 1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem;min-height:46vh;justify-content:center}
.error-page-code{font-family:var(--font-display);font-size:5rem;line-height:1;color:var(--gold);letter-spacing:.06em}
.error-page h1{font-family:var(--font-display);font-size:2rem;color:var(--tea-dark);margin:0}
.error-page p{color:var(--text-light);max-width:34ch;line-height:1.6;margin:0}
.error-page-actions{display:flex;gap:1.25rem;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:1rem}
.error-page-home{color:var(--tea-dark);text-decoration:underline;text-underline-offset:3px;font-weight:600;font-size:.9rem}
.error-page-home:hover{color:var(--gold-deep,var(--gold))}

/* Respect reduced-motion for the silky button micro-interactions */
@media (prefers-reduced-motion: reduce) {
  .btn-home-cta, .btn-add-to-cart-primary, .btn-add-to-cart, .btn-order,
  .btn-order-secondary, .home-viewall, .home-viewall span {
    transition-duration: .01ms !important;
  }
  .btn-home-cta:hover, .btn-add-to-cart-primary:hover,
  .btn-add-to-cart:hover, .btn-order:hover { transform: none; }
}

/* ── Plain text pages (default.html.twig: how-to-order etc.) ── */
.page-plain{max-width:720px;margin-inline:auto;padding-top:4.5rem;padding-bottom:4.5rem}
.page-plain-header{margin-bottom:2rem}
.page-plain-body{line-height:1.75}
.page-plain-body h2{font-size:1.4rem;margin:2.2rem 0 .75rem}
.page-plain-body p{margin:0 0 1rem}

/* Content links on the FAQ page read as chips — same look as the ingredient
   auto-links in product descriptions (.ingredient-chip in catalog.css). */
.page-faq .page-plain-body a,
.page-faq .faq-answer a{
  /* inline (not inline-block) so long chips — e.g. the full street address —
     wrap across lines; clone repeats the pill on each line segment */
  display:inline;
  padding:.05em .45em;
  border-radius:999px;
  background:rgba(122,139,110,.12);
  border:1px solid rgba(122,139,110,.35);
  color:var(--tea-dark);
  text-decoration:none;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.page-faq .page-plain-body a:hover,
.page-faq .faq-answer a:hover{border-color:var(--gold);background:rgba(201,169,110,.15)}

/* ── FAQ accordion (faq template) ── */
.faq{margin-top:2.6rem}
.faq-heading{font-size:1.4rem;margin:0 0 .5rem}
.faq-item{border-bottom:1px solid var(--gold-light)}
.faq-item summary{
  cursor:pointer;
  padding:.9rem 1.6rem .9rem 0;
  font-weight:600;
  list-style:none;
  position:relative;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';
  position:absolute;
  right:.2rem;
  top:50%;
  transform:translateY(-50%);
  font-weight:400;
  font-size:1.2rem;
  color:var(--gold);
  line-height:1;
}
.faq-item[open] summary::after{content:'−'}
.faq-answer{padding:0 0 1.1rem;line-height:1.75}
.faq-answer p{margin:0 0 .8rem}
.faq-answer p:last-child{margin-bottom:0}
.faq-answer ul{margin:.2rem 0 .8rem 1.2rem}

/* ── Opening hours lines ── */
.directions-hours{margin:.5rem 0 0;opacity:.75}
.contact-hours{display:block;opacity:.75;margin-top:.2rem}
.footer-hours{color:var(--gold-light);font-size:.92rem;margin:-.8rem 0 1rem}