/* ============================================================
   CSS CUSTOM PROPERTIES — pixel-perfect from Figma
   ============================================================ */
:root {
  /* Colors */
  --cream:        #F5F2EC;
  --cream-2:      #EDEAE3;
  --forest:       #203e31;
  --forest-2:     #2D3F2E;
  --orange:       #E8831A;
  --orange-hover: #D07516;
  --dark:         #111111;
  --text-dark:    #222222;
  --text-mid:     #474747;
  --text-light:   #888888;
  --white:        #FFFFFF;
  --border:       #E0DBD3;
  --border-dark:  #CCC7BE;
  --sandstone: #F5F1EB;
  --ivory: #F5F1EB;
  
  --cya11y-primary-color: #203e31  !important;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.09);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.13);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.16);

  /* Radii */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  24px;

  /* Typography */
  --serif:  'Playfair Display', Georgia, serif;
  --sans:   'Montserrat', -apple-system, sans-serif;

  /* Transitions */
  --t-fast:   0.18s ease;
  --t-base:   0.28s ease;
  --t-slow:   0.5s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--sans); background: var(--white);
 color: var(--text-dark); overflow-x: hidden; font-size: 16px; }
img, video { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--sans); cursor: pointer; }
/* ── Full-height layout ───────────────────────── */
html { height: 100%; }
body { min-height: 100%; display: flex; flex-direction: column; }
#page.site { flex: 1 0 auto; display: flex; flex-direction: column; position: relative; }
.site-footer { flex-shrink: 0; }
.text-center{ text-align: center; }
/* ─────────────────────────────────────────────── */

.site-wrap {
  background: var(--ivory);
  flex: 1 0 auto;
  overflow: hidden;
}
/* ============================================================
   HEADER
   ============================================================ */
.site-header {
/*  position: fixed;*/
 
    position: relative;
  z-index: 999;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--t-base);
}
.logged-in.admin-bar.home  .site-header {
  /*top: 32px;*/
/*  top: 50px;*/
}

.logged-in .announcement-bar + .page-main .site-header {
  /*top: 90px;*/
}
.logged-in .announcement-bar.is-hidden+ .page-main .site-header,
.logged-in .announcement-bar[style="display: none;"] + .page-main .site-header  {
  /*top: 50px;*/
}
.site-header.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.09);  }
.home .site-header{
  position: absolute;
  top: 0; left: 0; right: 0;
}
.home .site-header .site-nav a,.home .site-header  #menu-main-menu a{ color: #FFF; }

/*.page-main .hero{
  padding-top: 0;
}*/
.page-main .site-header{ background: none; border: none;backdrop-filter: none; }
.page-main .context-bar.is-visible{ display: none; }
.page-main .site-nav a{ color: #fff; }
.container{max-width: 1230px;  margin: 0 auto; padding: 0 15px;}

.header-inner {
  
/*  padding: 0 40px;*/
  height: 72px;
  display: flex;
  align-items: center;
  gap: 0;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  margin-right: 48px;
}

.logo-svg { width: 34px; height: 34px; flex-shrink: 0; }

.logo-name {
/*  font-family: var(--sans);*/
/*  font-weight: 700;*/
/*  font-size: 19px;*/
/*  letter-spacing: -0.4px;*/
/*  color: var(--text-dark);*/
}

/* Nav */
.site-nav, #menu-main-menu {
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 1;
  justify-content: center;
  margin: 0; padding: 0;
  list-style-type: none;
}

.site-nav a , #menu-main-menu a{
  font-size: 16px;
/*  font-weight: 500;*/
/*  color: var(--text-mid);*/
  padding: 3px ;
/*  border-radius: var(--r-sm);*/
  transition: color var(--t-fast),   background var(--t-fast);
  border-bottom: 1px solid transparent;
/*  letter-spacing: 0.1px;*/
}
#menu-main-menu .current-menu-item a{
  border-color: var(--orange);
}
/*.site-nav a:hover { color: var(--text-dark); background: var(--cream); }*/
/*.site-nav a.active { color: var(--text-dark); font-weight: 600; }*/

/* ---- Car Model Selector ---- */
.car-model-selector {
  position: relative;
  flex-shrink: 0;
  margin-right: 8px;
  margin-left: auto;
}

.car-selector-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 10px;
  background: #F2F2F2;
  border: 1px solid #F2F2F2;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-dark);
  transition: border-color var(--t-fast), background var(--t-fast);
  min-width: 192px;
  user-select: none;
}

.car-selector-btn:hover { border-color: var(--orange); }
.car-selector-btn.is-active { border-color: var(--orange); background: var(--white); }

.car-selector-btn .van-icon {
  width: 38px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.car-selector-btn .van-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.car-selector-btn .van-icon-placeholder {
  width: 38px;
  height: 26px;
  background: var(--cream-2);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.car-selector-btn .van-icon-placeholder svg {
  width: 22px;
  height: 16px;
  color: var(--text-light);
}

.car-selector-btn .sel-label {
  flex: 1;
  text-align: left;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.car-selector-btn .sel-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-light);
  transition: transform var(--t-base);
}

.car-selector-btn.dropdown-open .sel-chevron { transform: rotate(180deg); }

/* Dropdown */
.car-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 260px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base);
  z-index: 200;
}

.car-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.car-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background var(--t-fast);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-dark);
  position: relative;
}

.car-dropdown-item:hover { background: var(--cream); }

.car-dropdown-item.is-selected { color: var(--text-dark); background: var(--cream); }

.car-dropdown-item .di-img {
  width: 42px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--cream-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.car-dropdown-item .di-img img { width: 100%; height: 100%; object-fit: cover; }

.car-dropdown-item .di-img svg { width: 24px; height: 18px; color: var(--text-light); }

.car-dropdown-item .di-check {
  margin-left: auto;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0;
  color: var(--orange);
}

.car-dropdown-item.is-selected .di-check { opacity: 1; }

.page-main .car-model-selector{ display: none; }


/* Cart */
.cart-link {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
/*  font-weight: 500;*/
/*  color: var(--text-dark);*/
  padding: 8px 14px;
/*  border-radius: var(--r-sm);*/
/*  transition: background var(--t-fast);*/
  position: relative;
}
.cart-link svg{ margin-bottom: 4px; }

.page-main .cart-link { color: #FFF; }
.page-main .cart-link  svg path{ fill: #fff }
/*.cart-link:hover { background: var(--cream); }*/
/*.cart-link svg { width: 19px; height: 19px; }*/

/* ============================================================
   CONTEXT BAR
   ============================================================ */
.context-bar {
  display: none;
  background: var(--orange);
  color: var(--white);
  text-align: center;
  padding: 9px 20px;
  font-size: 12.5px;
  font-weight: 500;
  position: relative;
  top: 72px;
  z-index: 100;
}

.context-bar.is-visible { display: block; }
.context-bar a { color: var(--white); text-decoration: underline; opacity: 0.85; }
.context-bar a:hover { opacity: 1; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
/*  min-height: 100vh;*/
  min-height: 800px;
  display: flex;
  align-items: flex-end;
  padding: 120px 0 80px;
/*  overflow: hidden;*/
}

.hero-bottom{ display: flex; }
/* Background — customer adds real photo here */
/* ---- Hero background container ---- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #1a2a1b; /* ultimate CSS fallback */
}

/*
  Poster image — shown immediately, covers bg while video loads.
  Also acts as fallback on mobile / low-power / prefers-reduced-motion.
*/
.hero-bg-poster {
  position: absolute;
  inset: 0;
  background-image: url('../images/promo-img.jpg');
  background-size: cover;
  background-position: center center;
  z-index: 1;
  /* stays visible until video is playing */
  transition: opacity 0.6s ease;
}

/*
  Background video — muted autoplay, covers same area.
  Fades in once it can play; fades out when ended (JS handles classes).
*/
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.8s ease;
  /* GPU layer — avoids paint on main thread */
  will-change: opacity;
  pointer-events: none;
}

/* Video is playing → show it */
.hero-bg-video.is-playing {
  opacity: 1;
}

/* Video ended (or prefers-reduced-motion) → hide it, poster shows again */
.hero-bg-video.is-ended {
  opacity: 0;
}

/* Gradient overlay — always on top of both poster and video */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.06) 0%,
    rgba(0,0,0,0.18) 40%,
    rgba(0,0,0,0.62) 75%,
    rgba(0,0,0,0.74) 100%
  );
  pointer-events: none;
}

/* Reduce motion — never autoplay, keep poster only */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-video { display: none !important; }
}

.hero-inner {
  position: relative;
  z-index: 4;   /* above overlay (z-index:3) so text is always on top */
/*  max-width: 1280px;*/
/*  margin: 0 auto;*/
  padding: 0 40px;
  width: 100%;
}

.hero-title {
  font-family: var(--serif);
/*  font-size: clamp(40px, 5.5vw, 76px);*/
  font-size: 56px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.15;
  max-width: 580px;
  margin-bottom: 22px;
  letter-spacing: -0.5px;
}

.hero-subtitle {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,0.72);
  max-width: 485px;
  line-height: 1.5;
  margin-bottom: 40px;
}

/* Hero actions row — car select + CTA */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

/* Hero car select — Figma style: white pill with van icon + select + arrow */
/* ============================================================
   HERO CUSTOM DROPDOWN — same logic as header, dark theme
   ============================================================ */
.hero-car-selector {
  position: relative;
}

/* Trigger button — white pill */
.hero-car-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.97);
  border: none;
  border-radius: 8px;
  padding: 4px 14px 4px 6px;
  min-width: 300px;
  cursor: pointer;
  transition: box-shadow var(--t-fast);
}

.hero-car-btn:hover,
.hero-car-btn.dropdown-open { box-shadow: 0 2px 16px rgba(0,0,0,0.18); }

/* Van image thumbnail inside button */
.hero-van-icon {
  width: 90px;
  height: 75px;
/*  border-radius: 7px;*/
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-van-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
/*  mix-blend-mode: screen;*/
  filter: brightness(1.1);
}

/* Selected label */
.hero-sel-label {
  flex: 1;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-dark);
  text-align: left;
  white-space: nowrap;
}

/* Chevron rotates when open */
.hero-sel-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-light);
  flex-shrink: 0;
  pointer-events: none;
  transition: transform var(--t-fast);
}

.hero-car-btn.dropdown-open .hero-sel-chevron {
  transform: rotate(180deg);
}

/* Dropdown panel */
.hero-car-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 500;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.hero-car-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Each item */
.hero-di {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-mid);
  font-size: 13.5px;
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
}

.hero-di:hover { background: var(--cream); color: var(--text-dark); }
.hero-di.is-selected { background: var(--cream); color: var(--text-dark); }

/* Thumbnail in each item */
.hero-di-img {
  width: 52px;
  height: 36px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-di-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Check icon */
.hero-di-check {
  margin-left: auto;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0;
  color: var(--orange);
  transition: opacity var(--t-fast);
}

.hero-di.is-selected .hero-di-check { opacity: 1; }

/* CTA button — orange pill with arrow circle */
.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--orange);
/*  color: var(--white);*/
color: #222;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  padding: 3px 3px 3px 22px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast), transform 0.14s;
  letter-spacing: 0.2px;
}

.btn-hero:hover { background: var(--orange-hover); transform: translateY(-1px); }

.btn-hero .btn-text { margin-right: 25px; }

.btn-hero .btn-circle {
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-hero .btn-circle svg { width: 18px; height: 18px; }

/* Stars + trusted */
.hero-trust {
  display: inline-flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 18px;
  flex-direction: column;
      margin-left: auto;
}

.hero-stars {
  display: flex;
  gap: 7px;
}

.hero-stars svg { width: 17px; height: 17px; fill: var(--orange); }

.hero-trust-text {
/*  font-size: 13px;*/
  font-weight: 500;
  color: rgba(255,255,255,0.75);
}

/* ============================================================
   CATEGORIES STRIP  (black bg, 3 cards with arrow btn)
   ============================================================ */
.categories-section {
  background-color: var(--sandstone);
  background-image: url('../images/bg-clip1.png');
  background-position: top right;
    background-repeat: no-repeat;
  padding: 80px 0px 180px;
  position: relative;
}
.categories-section:before{
  
}
.categories-section:after{
  content: "";
  width: 100%;
  position: absolute; bottom: -1px;height: 120px;
  background-image: url("../images/whiteframe.svg");
    left: 0;
    right: 0;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}
/*.categories-inner {
  max-width: 1280px;
  margin: 0 auto;
}*/

.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.cat-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 10/12.2;
  cursor: pointer;
  display: block;
}

.cat-card-bg {
  position: absolute;
  inset: 0;
  background: var(--forest-2);   /* fallback, real photo replaces */
  /* background-image: url('cat1.jpg'); background-size: cover; background-position: center; */
  transition: transform var(--t-slow);
}

.cat-card:hover .cat-card-bg { transform: scale(1.04); }

.cat-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.24) 50%,
    rgba(0,0,0,0.04) 100%
  );
}

.cat-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 24px 34px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.cat-card-title {
  font-family: var(--serif);
/*  font-size: clamp(18px, 1.6vw, 23px);*/
  font-size: 32px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.35;
/*  max-width: 200px;*/
}

.cat-card-arrow {
  position: absolute;
  top: 18px; right: 14px;
  width: 50px;
  height: 50px;
  background: rgba(255,255,255,0.88);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 12px;
  transition: background var(--t-fast), transform var(--t-fast);
  content: "";
}

.cat-card:hover .cat-card-arrow { background: var(--white); transform: scale(1.08); }
.cat-card-arrow svg { width: 16px; height: 16px; color: var(--dark); }

/* Arrow at bottom of categories section */
/*.categories-arrow-down {
  display: flex;
  justify-content: center;
  padding-top: 48px;
}

.categories-arrow-down svg {
  width: 44px;
  height: 28px;
  fill: var(--dark);
}*/

/* ============================================================
   CONFIGURATOR / CREATE YOUR CANVAS
   ============================================================ */
.configurator-section {
  background: var(--white);
  padding: 40px 0px 0px;
}

/*.configurator-inner {
  max-width: 1280px;
  margin: 0 auto;
}*/

/* Title */
.config-title {
  font-family: var(--serif);
/*  font-size: clamp(32px, 4vw, 58px);*/
  font-size: 48px;
  font-weight: 500;
  color: var(--text-dark);
/*  line-height: 1.1;*/
  text-align: center;
  margin-bottom: 40px;
/*  letter-spacing: -0.3px;*/
}

/* 3 feature cards */
.config-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto;
}

.config-feature {
  border: 1px solid #F5F1EB;
  border-radius: var(--r-lg);
  padding: 15px 15px 20px;
  text-align: center;
  background: var(--white);
  max-width: 320px;
}

.config-feature-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.config-feature-icon svg { width: 100%; height: 100%; }

.config-feature-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.config-feature-desc {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.55;
}

/* Van visual area */
.config-van-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.config-van-img {
  max-width: 640px;
  width: 100%;
  /* real: <img src="van-yellow.png"> */
  height: 340px;
  background: var(--cream);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  position: relative;
}

.config-van-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Counter badge */
.config-count-badge {
  position: absolute;
  right: 0;
  bottom: 80px;
/*  background: var(--white);*/
/*  border-radius: var(--r-lg);*/
/*  padding: 18px 22px;*/
/*  box-shadow: var(--shadow-lg);*/
  text-align: right;
  min-width: 180px;
}

.config-count-number {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1;
  margin-bottom: 5px;
}

/*.config-count-number sup { font-size: 40px; }*/

.config-count-label {
/*  font-size: 12px;*/
  color: var(--text-light);
  letter-spacing: 0.5px;
  margin-top: 4px;
  margin-bottom: 15px;
}

/* CTA */
.config-cta {
  text-align: right;
/*  margin-top: 10px;*/
/*  margin-bottom: 30px;*/
}

.btn-orange-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--orange);
/*  color: var(--white);*/
  color: #222;
  font-family: var(--sans);
/*  font-size: 14.5px;*/
font-size: 16px;
  font-weight: 500;
  padding: 3px 3px 3px 22px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast), transform 0.14s;
}

.btn-orange-pill:hover { background: var(--orange-hover); transform: translateY(-1px); }

.btn-orange-pill .pill-text { margin-right: 10px; }

.btn-orange-pill .pill-circle {
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-orange-pill .pill-circle svg { width: 16px; height: 16px; }

/* ============================================================
   POPULAR PRODUCTS  — Swiper carousel with opacity side cards
   ============================================================ */
.products-section {
/*  background: var(--dark);*/
  padding: 80px 0 80px;
}

.products-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
/*  padding: 0 40px;*/
/*  max-width: 1280px;*/
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}

.products-title {
  font-family: var(--serif);
  /*  font-size: clamp(28px, 3.5vw, 46px);*/
  font-size: 40px;
  font-weight: 500;
/*  color: var(--white);*/
/*  letter-spacing: -0.3px;*/
}

.view-all {
  font-size: 16px;
   font-family: var(--sans);
  font-weight: 500;
/*  color: var(--white);*/
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.7;
  transition: opacity var(--t-fast);
}

.view-all:hover { opacity: 1; }
.view-all svg { width: 14px; height: 14px; }

/* Swiper container — overflow visible for opacity peekaboo */
.products-swiper-wrap {
  padding: 18px 40px 0;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

/* Let slides overflow slightly so edge cards are visible */
.products-swiper-outer {
  overflow: visible !important;
}

.swiper-products {
  overflow: visible !important;
}

.swiper-products .swiper-slide {
  width: calc((100% - 48px) / 3); /* 3 slides visible + gaps */
  transition: opacity 0.35s ease;
}

/* Adjacent slides slightly transparent — Figma design */
.swiper-products .swiper-slide:not(.swiper-slide-visible) {
  opacity: 0.45;
}

/* But slides that are fully in view stay full opacity */
.swiper-products .swiper-slide-visible {
  opacity: 1;
}

/* The very next partial slide peeking */
.swiper-products .swiper-slide:last-child {
  opacity: 0.35;
}

.product-slide-card {
  border-radius: var(--r-xl);
  overflow: hidden;
/*  background: var(--white);*/
  display: block;
  transition: transform var(--t-base);
}

.product-slide-card:hover { transform: translateY(-4px); }

.product-slide-img {
  aspect-ratio: 380/380;
  overflow: hidden;
  background: var(--cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
}

.product-slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.product-slide-card:hover .product-slide-img img { transform: scale(1.04); }

.product-slide-body {
  padding: 20px 0 24px;
/*  background: var(--dark);*/
}

.product-slide-model {
  font-size: 14px;
  font-family: var(--sans);
  font-weight: 500;
/*  color: rgba(255,255,255,0.45);*/
  text-transform: uppercase;
/*  letter-spacing: 0.8px;*/
  margin-bottom: 16px;
}

.product-slide-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
/*  color: var(--white);*/
  line-height: 1.3;
  margin-bottom: 10px;
}

.product-slide-price {
  font-size: 24px;
  font-weight: 500;
  font-family: var(--sans);
/*  color: var(--white);*/
}

/* Swiper dots */
.swiper-products-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 75px;
}

.swiper-products-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #ccc;
  border-radius: 50%;
  opacity: 1;
  transition: background var(--t-fast), width var(--t-base);
  cursor: pointer;
}

.swiper-products-pagination .swiper-pagination-bullet-active {
  background:  #214033;
/*  width: 24px;*/
  border-radius: 4px;
}

/* Swiper nav arrows */
.swiper-btn-next-products {
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: var(--shadow-md);
  border: none;
  transition: background var(--t-fast), transform var(--t-fast);
}

.swiper-btn-next-products:hover { background: var(--cream); transform: translateY(-50%) scale(1.06); }
.swiper-btn-next-products svg { width: 18px; height: 18px; color: var(--dark); }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
/*  background: var(--cream);*/
  padding: 80px 0px 0;
/*  border-top: 1px solid var(--border);*/
/*  border-bottom: 1px solid var(--border);*/
}

.trust-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trust-item-icon { flex-shrink: 0; width: 40px; height: 40px; }
.trust-item-icon img, .trust-item-icon svg { width: 100%; height: 100%; }

.trust-item-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-mid);
/*  letter-spacing: 0.2px;*/
  font-family: var(--serif);
}

/* ============================================================
   TESTIMONIALS — 2-row staggered Swiper  (as in Figma)
   ============================================================ */
.testimonials-section {
/*  background: var(--dark);*/
  padding: 80px 0px 80px;
  overflow: hidden;
}

/*.testimonials-inner {*/
/*  max-width: 1280px;*/
/*  margin: 0 auto;*/
/*}*/

.testimonials-header {
  text-align: center;
  margin-bottom: 76px;
}

.testimonials-title {
  font-family: var(--serif);
/*  font-size: clamp(32px, 4.5vw, 64px);*/
  font-size: 56px;
  font-weight: 500;
/*  color: var(--white);*/
  line-height: 1.1;
  margin-bottom: 27px;
/*  letter-spacing: -0.5px;*/
}

.testimonials-sub {
/*  font-size: 14.5px;*/
/*  color: rgba(255,255,255,0.5);*/
  max-width: 420px;
  margin: 0 auto;
/*  line-height: 1.6;*/
}

/* Two-row layout: top row & bottom row both scroll independently */
.testimonials-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Negative margins to allow partial card peek at edges */
  margin: 0 -40px;
  padding: 0 40px;
  overflow: hidden;
}

/* Each row is a Swiper */
.swiper-reviews-row {
  width: 100%;
  overflow: visible !important;
}

.swiper-reviews-row .swiper-wrapper {
  align-items: stretch;
}

.swiper-reviews-row .swiper-slide {
  width: 380px;
  height: auto;
  opacity: 1;
  transition: opacity 0.3s;
}




/* ── Testimonials — повна ширина без container ────────────── */

.testimonials-rows {
  margin: 0 !important;   /* скасовуємо -40px */
  padding: 0 !important;
  overflow: hidden !important;
}

/* Кожен ряд Swiper — padding щоб перший слайд не ліпився */
.swiper-reviews-row {
  padding: 4px 40px 4px !important;
  overflow: visible !important;
}

/* Infinite autoplay — прибираємо transition gap */
.swiper-reviews-row .swiper-wrapper {
  transition-timing-function: linear !important;
}


/* ── Social / Instagram — заокруглення і hover ────────────── */

/* Враппер фото в галереї */
.swiper-social .social-photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
}

/* Hover zoom на фото */
.swiper-social .swiper-slide:hover .social-photo img {
  transform: scale(1.05);
}

/* Infinite autoplay linear */
.swiper-social .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* Cards at edges fade — partial visibility */
/*.swiper-reviews-row .swiper-slide:first-child,*/
/*.swiper-reviews-row .swiper-slide:last-child {*/
/*  opacity: 0.3;*/
/*}*/

.review-card {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 28px 28px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Stars in review card */
.review-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.review-stars svg {
  width: 18px;
  height: 18px;
}

.review-stars .star-full { fill: var(--text-dark); }
.review-stars .star-empty { fill: none; stroke: var(--text-dark); stroke-width: 1.5; }

.review-text {
/*  font-size: 14px;*/
  color: var(--text-mid);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 20px;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cream-2);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-avatar img { width: 100%; height: 100%; object-fit: cover; }

.review-avatar-placeholder {
/*  font-size: 16px;*/
}

.review-author-name {
/*  font-size: 13.5px;*/
  font-weight: 500;
  color: var(--text-dark);
}

/* ============================================================
   ABOUT — dark bg, text LEFT, photo RIGHT (Figma exact)
   ============================================================ */
.about-section {
/*  background: var(--dark);*/
  padding: 100px 0px 80px;
}

.about-inner {
/*  max-width: 1280px;
  margin: 0 auto;*/
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 40px;
  align-items: center;
}

/* text is first child → left column */
.about-title {
  font-family: var(--serif);
/*  font-size: clamp(28px, 3.8vw, 50px);*/
  font-size: 40px;
  font-weight: 500;
/*  color: var(--white);*/
/*  line-height: 1.1;*/
/*  letter-spacing: -0.3px;*/
  margin-bottom: 20px;
}

.about-body {
/*  font-size: 13.5px;*/
/*  color: rgba(255,255,255,0.4);*/
/*  line-height: 1.8;*/
/*  max-width: 380px;*/
}

/* "Read more" — dark green pill, no arrow */
.btn-pill-forest {
  display: inline-flex;
  align-items: center;
  background: #214033;
  color: var(--white);
  font-family: var(--sans);
/*  font-size: 14px;*/
  font-weight: 500;
  padding: 14px 26px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  margin-top: 40px;
  transition: background var(--t-fast), transform 0.14s;
  text-decoration: none;
}

.btn-pill-forest:hover { background: #273d28; transform: translateY(-1px); }

/* photo — right col, large rounded card */
.about-img {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 690/430;
  background: var(--forest-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
}

.about-img img { width: 100%; height: 100%; object-fit: cover; }

/* keep legacy alias so nothing breaks */
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--forest);
  color: var(--white);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  transition: background var(--t-fast);
}
.btn-dark:hover { background: var(--forest-2); }

/* ============================================================
   JOURNAL / BLOG SECTION
   ============================================================ */
.journal-section {
/*  background: var(--dark);*/
  padding: 115px 0px 80px;
}

/*.journal-inner {
  max-width: 1280px;
  margin: 0 auto;
}*/

.journal-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 65px;
}

/* Title — muted serif, exactly like Figma */
.journal-title {
  font-family: var(--serif);
/*  font-size: clamp(28px, 3.5vw, 46px);*/
font-size: 40px;
  font-weight: 500;
/*  color: rgba(255,255,255,0.3);*/
  letter-spacing: -0.3px;
  line-height: 1;
}

.journal-view-all {
  font-size: 13px;
  font-weight: 500;
/*  color: rgba(255,255,255,0.35);*/
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color var(--t-fast);
  flex-shrink: 0;
  text-decoration: none;
}

/*.journal-view-all:hover { color: var(--white); }*/
.journal-view-all svg { width: 13px; height: 13px; }

/* 2-col grid */
.journal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.journal-card {
  display: block;
  text-decoration: none;
}

.journal-card-img {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 574/296;
  background: var(--forest-2);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
}

.journal-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.journal-card:hover .journal-card-img img { transform: scale(1.03); }

.journal-card-date {
  font-size: 13px;
  font-weight: 400;
/*  color: rgba(255,255,255,0.35);*/
  margin-bottom: 10px;
}

.journal-card-title {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
/*  color: rgba(255,255,255,0.65);*/
  line-height: 1.3;
  transition: color var(--t-fast);
}

/*.journal-card:hover .journal-card-title { color: rgba(255,255,255,0.9); }*/

/* ============================================================
   INSTAGRAM / SOCIAL SECTION
   ============================================================ */
.social-section {
/*  background: var(--dark);*/
  padding: 80px 0 80px;
  overflow: hidden;
}

.social-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
/*  max-width: 1280px;*/
  margin: 0 auto 80px;
/*  padding: 0 40px;*/
  gap: 24px;
}

/* "Our journey continues on social" — large muted serif */
.social-title {
  font-family: var(--serif);
/*  font-size: clamp(28px, 3.5vw, 46px);*/
  font-size: 40px;
  font-weight: 500;
/*  color: rgba(255,255,255,0.3);*/
  line-height: 1.35;
/*  letter-spacing: -0.3px;*/
  max-width: 450px;
}

/* Right side: handle + follow button */
.social-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  padding-top: 8px;
}

.social-handle {
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 400;
/*  color: rgba(255,255,255,0.3);*/
  letter-spacing: -0.2px;
}

.btn-follow {
  display: inline-flex;
  align-items: center;
  background: var(--orange);
  color: var(--white);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast), transform 0.14s;
  white-space: nowrap;
}

.btn-follow:hover { background: var(--orange-hover); transform: translateY(-1px); }

/* Photos strip — 5 cols, full bleed, edge peeks */
.social-photos-wrap {
/*  padding: 0 40px;*/
  max-width: 1280px;
  margin: 0 auto;
}

/* Swiper overrides for social */
.swiper-social { overflow: visible !important; }
.swiper-social .swiper-slide { width: 240px; }

.social-photo {
  width: 240px;
  height: 284px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #1e2e1f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.social-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.swiper-social .swiper-slide:hover .social-photo img { transform: scale(1.04); }

/* When Smash Balloon is connected, wrap its output: */
/* #sb_instagram .sbi_photo_wrap { border-radius: 16px !important; overflow: hidden !important; } */

/* ============================================================
   FAQ
   ============================================================ */
.faq-section {
  background: var(--white);
  color: #000;
  padding: 110px 0px 105px;
}

.faq-inner {
/*  max-width: 1280px;
  margin: 0 auto;*/
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 60px;
  align-items: start;
}

.faq-side-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}

.faq-side-title {
  font-family: var(--serif);
/*  font-size: clamp(24px, 3vw, 38px);*/
  font-size: 40px;
  font-weight: 500;
/*  color: var(--text-dark);*/
  line-height: 1.35;
  margin-bottom: 30px;
}

.faq-side-desc {
/*  font-size: 14px;*/
/*  color: var(--text-light);*/
/*  line-height: 1.7;*/
    line-height: 1.35;
}

.faq-list {}

.faq-item { border-bottom: 1px solid var(--border); }

.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 0;
  cursor: pointer;
/*  font-size: 15px;*/
  font-weight: 500;
/*  color: var(--text-dark);*/
  gap: 16px;
  user-select: none;
  transition: color var(--t-fast);

  padding-right: 15px;
}

/*.faq-q:hover { color: var(--orange); }*/
/*.faq-a{ padding-top: 15px; padding-bottom: 24px; }*/

/*.faq-q:hover { color: var(--orange); }*/

.faq-q-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--text-light);
  transition: transform var(--t-base);
}

.faq-item.open .faq-q-chevron { transform: rotate(180deg); }
.faq-item.open .faq-q { color: var(--text-dark); }


/* ============================================================
   CTA UPGRADE BANNER
   ============================================================ */
/* ── Section wrapper ─────────────────────────────────────── */
.cta-section {
  background: #214033;         /* Figma: #214033, не var(--forest) #203e31 */
  min-height: 480px;           /* Figma: frame height 480px */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}


.cta-section:before{
  content: "";
  position: absolute; left: 0;top: 0;bottom: 0; width: 30%;
  background-repeat: no-repeat;
  background-image: url('../images/bg-cta-left.png');
  background-position: left;
}
.cta-section:after{
  content: ""; 
  position: absolute; right: 0;top: 0;bottom: 0; width: 30%;
  background-repeat: no-repeat;
  background-image: url('../images/bg-cta-right.png');
  background-position: right;
}
/* ── Decorative circle SVGs (Figma: Clip path groups) ─────── */
.cta-deco {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 639px;                /* Figma: Frame 516/517 width */
  height: 479px;               /* Figma: Frame 516/517 height */
  pointer-events: none;
  opacity: 1;
}

.cta-deco--left {
  left: 0;
  transform: translateX(-40%);
}

.cta-deco--right {
  right: 0;
  transform: translateX(40%);
}

.cta-deco svg {
  width: 100%;
  height: 100%;
}

/* ── Inner grid: 250px | flex-1 | 250px ──────────────────── */
.cta-section .cta-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 250px 1fr 250px;  /* Figma: photo widths 250px */
  gap: 0;
  column-gap: 40px;                          /* (1200 - 250 - 548 - 250) / 2 ≈ 56px, візуально 40 */
  align-items: center;
  padding: 40px 0;                           /* Figma: content top offset 40px */
  width: 100%;
}

/* ── Photo blocks ────────────────────────────────────────── */
/* Figma: Frame 492, 250×300px, border-radius 12px */
.cta-photo {
  width: 250px;
  height: 300px;
  border-radius: 12px;         /* Figma: cornerRadius 12 */
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.07);
}

.cta-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Figma: left photo y=5538 (top 0 від content) */
.cta-photo--left {
  align-self: flex-start;
  margin-top: 0;
}

/* Figma: right photo y=5638 → offset +100px від left */
.cta-photo--right {
  align-self: flex-start;
  margin-top: 100px;           /* Figma: 5638 - 5538 = 100px offset */
}

/* ── Center content ─────────────────────────────────────── */
.cta-content {
  text-align: center;
  padding: 0 8px;
}

/* Figma: Playfair Display Medium 48px, #fff, center, lineHeight 63.98px */
.cta-section .cta-title {
  font-family: var(--serif);
  font-size: 48px;             /* Figma: фіксований 48px */
  font-weight: 500;
  color: #ffffff;
  line-height: 1.33;           /* Figma: 63.98/48 ≈ 1.33 */
  margin-bottom: 24px;
  letter-spacing: 0;
}

/* Figma: Montserrat Regular 16px, #fff, center, lineHeight 19.5px, width 548px */
.cta-section .cta-body {
  font-family: var(--sans);
  font-size: 16px;             /* Figma: 16px */
  font-weight: 400;
  color: #ffffff;              /* Figma: #fff, не rgba(255,255,255,0.6) */
  line-height: 1.65;
  margin: 0 auto 32px;
  max-width: 548px;            /* Figma: frame width 548px */
  letter-spacing: 0;
}

/* Figma: button Frame 38 — #fe9c29, radius 56, 136×52px, Montserrat Medium 16px #222 */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;                /* Figma: 52px */
  min-width: 136px;            /* Figma: 136px */
  padding: 0 28px;
  background: #fe9c29;         /* Figma: #fe9c29 */
  border-radius: 56px;         /* Figma: cornerRadius 56 */
  border: none;
  font-family: var(--sans);
  font-size: 16px;             /* Figma: 16px */
  font-weight: 500;            /* Figma: Medium */
  color: #222222;              /* Figma: #222222 */
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0;
  transition: background var(--t-fast), transform 0.14s;
  white-space: nowrap;
}

.cta-btn:hover {
  background: #e88f1a;
  transform: translateY(-1px);
}

/* ============================================================
   SOCIAL / JOURNAL  (simplified, customer adds content)
   ============================================================ */

/* ===== CATEGORY HERO ===== */
.category-hero {
  position: relative;
  height: 320px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-bottom: 40px;
}

.category-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.1) 0%,
    rgba(0,0,0,0.5) 100%
  ), linear-gradient(135deg, #2a3d2b, #4a6b4c);
  z-index: 0;
}

/* Placeholder for real photo */
.category-hero-img-placeholder {
  position: absolute;
  inset: 0;
  background: #222222;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
/*  opacity: 0.4;*/
}
.category-hero-img-placeholder:after{
   position: absolute;background: #222222; opacity: 0.5;
   width: 100%; height: 100%; content: "";
}
.category-hero-img-placeholder  img{height: 100%;    width: 100%;}

.category-hero-content {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px 44px;
  width: 100%;
}

.category-hero-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 500;
  color: var(--white);
  line-height: 1.15;
}

/* ===== BREADCRUMB ===== */
.breadcrumb-wrap {
/*  max-width: 1280px;*/
/*  margin: 0 auto;*/
  padding: 30px 0px 40px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
  color: var(--text-light);
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item.breadcrumb-current {
  color: var(--text-mid);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
/*  max-width: 260px;*/
}

.breadcrumb a {
  color: var(--text-light);
  text-decoration: none;
  transition: color var(--t-fast);
}

.breadcrumb a:hover { color: var(--text-dark); }

.breadcrumb-sep {
  display: flex;
  align-items: center;
  color: var(--border-dark);
  flex-shrink: 0;
}

@media (max-width: 768px) {
/*  .breadcrumb-wrap { padding: 12px 20px 0; }*/
}

/* ===== CATEGORY TABS ===== */
.category-tabs-wrap {
/*  border-bottom: 2px solid var(--border);*/
  margin-bottom: 0;
  margin-top: 40px;
}

.category-tabs {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
}

.category-tab {
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-light);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--t-base);
  white-space: nowrap;
}

.category-tab:hover { color: var(--text-dark); }

.category-tab.active {
  color: var(--text-dark);
  border-bottom-color: var(--orange);
  font-weight: 600;
}

/* ===== PRODUCTS AREA ===== */
.products-area {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 40px 64px;
}

/* Model filter banner */
.model-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 20px;
  margin-bottom: 32px;
  font-size: 14px;
}

.model-filter-banner.hidden { display: none; }

.model-filter-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-mid);
}

.model-filter-info strong { color: var(--text-dark); }

.model-filter-info .model-badge {
  background: var(--orange);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
}

.model-filter-clear {
  font-size: 13px;
  color: var(--orange);
  cursor: pointer;
  font-weight: 500;
}

.model-filter-clear:hover { text-decoration: underline; }

/* Products grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.product-card {
  border-radius: var(--r-lg);
  overflow: hidden;
/*  background: var(--white);*/
/*  border: 1.5px solid var(--border);*/
  transition: all var(--t-base);
  cursor: pointer;
}

.product-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.product-card-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
}

.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-card-img img { transform: scale(1.05); }

.product-card-body {
  padding: 16px 20px 22px;
}

.product-card-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--text-dark);
  line-height: 1.25;
  margin-bottom: 10px;
}

.product-card-model {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 400;
  margin-bottom: 4px;
}

.product-card-price {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-dark);
}

/* Empty state */
.products-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 40px;
}

.products-empty h3 {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.products-empty p {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 24px;
}



.site-footer {
  background: #222222;          /* Figma: #222222, не #1c1c1c */
  min-height: 453px;            /* Figma: component height */
}

.footer-inner {
  max-width: 1200px;            /* Figma: container 1200px */
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 80px;
 
}

/* ── Grid: brand + nav + legal ──────────────────────────────
   Figma: brand 603px (Frame 518), nav 75px (Frame 457), legal 155px (Frame 458)
   Проміжки: 5506-4679-603=224px (brand→nav), 5724-5506-75=143px (nav→legal)
   Спрощуємо: brand flex:1, nav auto, legal auto, column-gap ~143px
   ──────────────────────────────────────────────────────────── */
.footer-top {
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 143px;
  margin-bottom: 0;
  align-items: start;
}

/* ── Brand column ────────────────────────────────────────── */
.footer-brand {}

/* Figma: logo row height 32px, gap між icon і текстом */
.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  text-decoration: none;
}

.footer-logo-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
  letter-spacing: -0.3px;
}

/* Figma: description — Montserrat Regular 16px, #f5f1eb, line-height 19.5px */
/* Brand col y=1539, desc y=1595 → gap 56px (1595-1539) */
.footer-desc {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: #f5f1eb;               /* Figma: #f5f1eb, не rgba */
  line-height: 1.65;
  margin-top: 56px;             /* Figma: logo bottom → desc top gap */
  margin-bottom: 24px;
  max-width: 603px;
}

/* Figma: Instagram row — icon 24×24 + handle 16px #c7bb9e */
/* ig y=1659, desc bottom y=1635 → gap 24px */
.footer-ig {
  display: inline-flex;
  align-items: center;
  gap: 8px;                     /* Figma: 4711-4679-24=8px gap між icon і текстом */
  color: #c7bb9e;               /* Figma: #c7bb9e */
  font-family: var(--sans);
  font-size: 16px;              /* Figma: 16px, не 14px */
  font-weight: 400;
  text-decoration: none;
  transition: color var(--t-fast);
}

.footer-ig:hover { color: #ffffff; }

/* Figma: ig icon frame 24×24, no border in Figma (visible=false) */
.footer-ig-icon {
  width: 24px;
  height: 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--t-fast);
  color: #c7bb9e;
}

.footer-ig:hover .footer-ig-icon { border-color: rgba(255, 255, 255, 0.6); }
.footer-ig-icon svg { display: block; }

/* ── Nav and Legal columns ───────────────────────────────────
   Figma: both use Montserrat Regular 16px, #f5f1eb
   Gap between links: 44px (1583-1539=44, 1627-1583=44)
   ──────────────────────────────────────────────────────────── */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 44px;                    /* Figma: 44px між посиланнями */
}

/* WP nav menu items */
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.footer-col li { margin: 0; padding: 0; }

/* Figma: Regular 16px, #f5f1eb */
.footer-col a,
.footer-col-nav a,
.footer-col-legal a {
  display: block;
  font-family: var(--sans);
  font-size: 16px;              /* Figma: 16px, не 15px */
  font-weight: 400;
  color: #f5f1eb;               /* Figma: #f5f1eb, не rgba */
  text-decoration: none;
  line-height: 1;
  transition: opacity var(--t-fast);
  white-space: nowrap;
}

.footer-col a:hover,
.footer-col-nav a:hover,
.footer-col-legal a:hover { opacity: 0.7; }

/* ── Bottom bar ──────────────────────────────────────────────
   Figma: Frame 519 y=1815 від компоненту y=1459 → відступ 356px
   Frame 471 top content ends at: 1539+293=1832 → bottom bar
   практично одразу після top content
   Розділювач: 1px rgba(255,255,255,0.08)
   Copyright: 14px #c7bb9e (Regular)
   Legal links: 14px #c7bb9e (Regular)
   ──────────────────────────────────────────────────────────── */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 60px;             /* gap між top content і divider */
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Figma: © text — Montserrat Regular 14px, #c7bb9e */
.footer-copy {
  font-family: var(--sans);
  font-size: 14px;              /* Figma: 14px */
  font-weight: 400;
  color: #c7bb9e;               /* Figma: #c7bb9e */
  margin: 0;
  line-height: 1;
}

/* Figma: bottom legal links — 14px #c7bb9e */
/* x positions: 5437, 5613 (+176), 5749 (+136) */
.footer-legal {
  display: flex;
  align-items: center;
  gap: 0;                       /* Figma: розраховуємо з позицій */
}

/* Gaps між bottom legal links:
   Terms: x=5437 w=136 → Privacy: x=5613 → gap=5613-5437-136=40px
   Privacy: x=5613 w=96 → Payment: x=5749 → gap=5749-5613-96=40px
*/
.footer-legal a {
  font-family: var(--sans);
  font-size: 14px;              /* Figma: 14px */
  font-weight: 400;
  color: #c7bb9e;               /* Figma: #c7bb9e */
  text-decoration: none;
  line-height: 1;
  transition: opacity var(--t-fast);
  white-space: nowrap;
}

.footer-legal a + a { margin-left: 40px; } /* Figma: 40px gap */

.footer-legal a:hover { opacity: 0.7; }
 

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}



/* ===== PRODUCT LAYOUT ===== */
.product-layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 15px 64px;
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 60px;
  align-items: start;
}

/* ===== PRODUCT GALLERY ===== */
.product-gallery {}

.product-title-mobile { display: none; }

.gallery-main {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 16px;
}

.gallery-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 100px;
  transition: opacity 0.3s ease;
}

.gallery-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.gallery-thumbs::-webkit-scrollbar { display: none; }

.gallery-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 64px;
  border-radius: var(--r-md);
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--t-base);
  overflow: hidden;
}

.gallery-thumb:hover { border-color: var(--border); }
.gallery-thumb.active { border-color: var(--orange); }

/* Inspire link */
.gallery-inspire {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color var(--t-base);
}

.gallery-inspire:hover { color: var(--orange); }


.product-gallery .gallery-thumb { width: 160px; 
  height: 134px;}

/* ===== PRODUCT OPTIONS (RIGHT PANEL) ===== */
.product-options {
  position: sticky;
  top: 88px;
}

.product-heading {
  margin-bottom: 20px;
}

.product-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 8px;
}


.product-subtitle {
  font-size: 13.5px;
  color: var(--text-light);
  font-weight: 500;
}

.product-short-desc {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.75;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1.5px solid var(--border);
}

/* Change car model link */
.change-model-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-light);
  cursor: pointer;
  transition: color var(--t-base);
  margin-bottom: 20px;
}

.change-model-link:hover { color: var(--orange); }

.change-model-link svg { width: 14px; height: 14px; }

/* Car model type selector */
.option-group {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.option-group:last-of-type { border-bottom: none; }

.option-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.option-label .info-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-light);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}

/* Dropdown select */
.option-select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-dark);
  background: var(--white);
  cursor: pointer;
  outline: none;
  transition: border-color var(--t-base);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A7A7A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.option-select:focus { border-color: var(--orange); }

/* Color swatches */
.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--t-base);
  position: relative;
}

.color-swatch:hover { transform: scale(1.1); }
.color-swatch.active { border-color: var(--orange); }
.color-swatch.active::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
}

/* Contrast stitching tooltip */
.tooltip-popup {
  position: absolute;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-lg);
  width: 220px;
  z-index: 50;
  top: 32px;
  left: 0;
  display: none;
}

.tooltip-popup.show { display: block; }
.tooltip-popup h4 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.tooltip-popup p { font-size: 12px; color: var(--text-mid); line-height: 1.6; }

.color-swatch-wrap { position: relative; }

/* Radio options */
.radio-options { display: flex; flex-direction: column; gap: 8px; }

.radio-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-base);
  position: relative;
}

.radio-option:hover { border-color: var(--text-mid); }

.radio-option.selected {
  border-color: var(--forest);
  background: rgba(44,62,45,0.03);
}

.radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-base);
}

.radio-option.selected .radio-dot {
  border-color: var(--forest);
  background: var(--forest);
}

.radio-option.selected .radio-dot::after {
  content: '';
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
}

.radio-label { font-size: 14px; font-weight: 500; flex: 1; }
.radio-price { font-size: 13px; color: var(--orange); font-weight: 600; }

/* Shape options */
.shape-options {
  display: flex;
  gap: 10px;
}

.shape-option {
  flex: 1;
  aspect-ratio: 1;
  max-width: 72px;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-base);
  position: relative;
  background: var(--cream);
}

.shape-option:hover { border-color: var(--text-mid); }

.shape-option.selected {
  border-color: var(--forest);
  background: var(--white);
}

.shape-option.selected::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 12px;
  color: var(--forest);
  font-weight: 700;
}

/* Checkbox feature */
.feature-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-base);
}

.feature-checkbox:hover { border-color: var(--text-mid); }
.feature-checkbox.checked { border-color: var(--forest); }

.feature-check-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-base);
  margin-top: 1px;
}

.feature-checkbox.checked .feature-check-box {
  background: var(--forest);
  border-color: var(--forest);
}

.feature-checkbox.checked .feature-check-box::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translateY(-1px);
}

.feature-text strong { display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.feature-text span { font-size: 12px; color: var(--text-light); }
.feature-price { margin-left: auto; font-size: 13px; color: var(--orange); font-weight: 600; flex-shrink: 0; }

/* Price & CTA */
.price-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.price-label { font-size: 12px; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }

.price-amount {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.add-to-cart-btn, .single_add_to_cart_button {
  width: 100%; max-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--orange);
  color: var(--white);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  padding: 16px 28px;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  transition: all var(--t-base);
  letter-spacing: 0.3px;
}

.add-to-cart-btn:hover { background: var(--orange-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,131,26,0.3); }
.add-to-cart-btn:active { transform: translateY(0); }

.custom-product-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-light);
  margin-top: 12px;
/*  justify-content: center;*/
  cursor: pointer;
  transition: color var(--t-base);
}

.custom-product-link:hover { color: var(--orange); }

/* ===== TRUST BAR ===== */
/*.trust-bar {
  background: var(--cream);
  padding: 20px 32px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}*/

.trust-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 24px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
}

/* ===== PRODUCT DESCRIPTION ===== */
/*.product-details {*/
/*  max-width: 1280px;*/
/*  margin: 64px auto;*/
/*  padding: 0 32px;*/
/*}*/

.accordion-item {
  border-bottom: 1px solid var(--border);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  transition: color var(--t-base);
}

.accordion-header:hover { color: var(--orange); }

.accordion-chevron {
  width: 20px;
  height: 20px;
  color: var(--text-light);
  transition: transform var(--transition);
  flex-shrink: 0;
}

.accordion-item.open .accordion-chevron { transform: rotate(180deg); }

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s;
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.8;
}

.accordion-item.open .accordion-body {
  max-height: 400px;
  padding-bottom: 20px;
}

/* ===== SIMILAR PRODUCTS ===== */
.similar-section {
/*  padding: 0 32px 80px;*/
padding-bottom: 80px;
  max-width: 1280px;
  margin: 0 auto;
}

.similar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.similar-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
}

.view-all-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 6px;
}

.similar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/*
.product-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  border: 1.5px solid var(--border);
  transition: all var(--t-base);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.product-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.product-card-img {
  aspect-ratio: 4/3;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  overflow: hidden;
}

.product-card-body { padding: 16px 18px 20px; }
.product-card-model { font-size: 11px; color: var(--text-light); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.product-card-title { font-family: var(--serif); font-size: 17px; font-weight: 500; margin-bottom: 8px; line-height: 1.3; }
.product-card-price { font-size: 16px; font-weight: 700; }*/



/* ============================================================
   ABOUT PAGE — page-specific styles
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.about-hero-section {
  background: #f5f1eb;
}

/* Container: 1200px, padding-top 24px */
.about-hero {
  padding-top: 24px;           /* Figma: y=176, section y=152 → 24px */
  padding-bottom: 80px;
  display: grid;
  /* Figma: 3 рівні колонки (1200/3 ≈ 389px кожна) */
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;                   /* Figma: (1200 - 389*3) / 2 ≈ 16.5px */
  align-items: stretch;
  min-height: 600px;           /* Figma: wrapper height 600px */
}

/* ── Ліва колонка: title зверху, desc внизу ─────────────── */
.about-hero-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* title зверху, desc знизу */
  padding-top: 0;
}

/* Figma: Playfair Display Medium 56px, #222222, lineHeight 64px */
.about-hero-title {
  font-family: var(--serif);
  font-size: 56px;             /* Figma: 56px */
  font-weight: 500;
  line-height: 64px;           /* Figma: lineHeight 64px */
  letter-spacing: 0;
  color: #222222;
  margin: 0;
  max-width: 365px;            /* Figma: text width 365px */
}

/* Figma: Montserrat Regular 16px, #222222, lineHeight 19.5px */
.about-hero-desc {
  font-family: var(--sans);
  font-size: 16px;             /* Figma: 16px (не 13.5px) */
  font-weight: 400;
  line-height: 19.5px;         /* Figma: 19.5px */
  color: #222222;              /* Figma: #222222 (не var(--text-mid)) */
  max-width: 365px;            /* Figma: col width */
  margin: 0;
}

/* ── Центральна фото: 389×600px, radius 12px ────────────── */
.about-photo {
  border-radius: 12px;         /* Figma: cornerRadius 12 */
  overflow: hidden;
  background: #d9d9d9;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Figma: Frame 493 — 389×600px, повна висота */
.about-photo--main {
  height: 600px;               /* Figma: Frame 493 height 600px */
  align-self: stretch;
}

/* Figma: Frame 492 — 389×289px, верхня частина */
.about-photo--side {
  height: 289px;               /* Figma: Frame 492 height 289px */
  align-self: start;           /* прилипає до верху */
}

.about-photo-placeholder {
  width: 100%;
  height: 100%;
  background: #d9d9d9;
}


/* ── Mission section ─────────────────────────────────────── */
.mission-section {
  background: #203e31;         /* Figma: bg #203e31 */
  position: relative;
  overflow: hidden;
  padding: 105px 0 205px;
}
.mission-section:before{
  content: "";
  position: absolute; left: 0;top: 0;bottom: 0; right: 0;
  background-repeat: no-repeat;
  background-image: url('../images/bg-clip-mission.png');
  width: 100%;
    height: 100%;
}
.mission-section:after {
    content: "";
    width: 100%;
    position: absolute;
    bottom: -2px;
    height: 120px;
    background-image: url(../images/whiteframe.svg);
    left: 0;
    right: 0;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}
/* Декоративне SVG */
.mission-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
}

.mission-deco svg {
  width: 100%;
  height: 100%;
}

/* Container Row 1: 1200px, padding-top 104px */
.mission-inner {
  position: relative;
  z-index: 2;
  display: grid;
  /* Figma: фото 560px + gap 64px + текст 426px = 1050px (решта авто) */
  grid-template-columns: 560px 1fr;
  gap: 64px;                   /* Figma: gap між фото і текстом 64px */
  align-items: center;
 
}

/* Фото: 560×345px, radius 12px */
.mission-photo {
  width: 560px;                /* Figma: Frame 427321301 width 560px */
  height: 345px;               /* Figma: Frame 427321301 height 345px */
  border-radius: 12px;         /* Figma: cornerRadius 12 */
  overflow: hidden;
  flex-shrink: 0;
}

.mission-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mission-photo-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
}

/* Текстовий блок: 426px */
.mission-content {
  max-width: 426px;            /* Figma: Frame 427321300 width 426px */
}

/* Figma: Playfair Display Medium 48px, #fff, lineHeight 63.98px */
.mission-title {
  font-family: var(--serif);
  font-size: 48px;             /* Figma: 48px (не clamp) */
  font-weight: 500;
  color: #ffffff;
  line-height: 63.98px;        /* Figma: lineHeight 63.98px */
  letter-spacing: 0;
  margin: 0 0 24px;
}

/* Figma: Montserrat Regular 16px, #fff, lineHeight 19.5px */
.mission-body {
  font-family: var(--sans);
  font-size: 16px;             /* Figma: 16px */
  font-weight: 400;
  color: #ffffff;              /* Figma: #fff (не rgba(255,255,255,0.55)) */
 
  max-width: 426px;
  margin: 0;
}

/* Stats row: padding-top 80px від Row 1 */
.mission-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Figma: 3×384px */
  gap: 0;
  padding-top: 80px;           /* Figma: Frame 455 y=1385, Row1 bottom=960+345=1305 → gap 80px */
 
 
}

/* Figma: НЕ МАЄ border-left між stat-ами (тільки у старому CSS) */
.mission-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;          /* Figma: CENTER */
  padding: 0 16px;
}

/* Figma: Playfair Display Medium 56px, #fe9c29, center */
.stat-value {
  font-family: var(--serif);
  font-size: 56px;             /* Figma: 56px (не clamp) */
  font-weight: 500;            /* Figma: Medium (не 600) */
  color: #fe9c29;              /* Figma: #fe9c29 */
  line-height: 64px;           /* Figma: lineHeight 64px */
  letter-spacing: 0;
  margin-bottom: 0;
}

/* Figma: Playfair Display Medium 16px, #fff, center */
.stat-label {
  font-family: var(--serif);   /* Figma: Playfair Display (не sans) */
  font-size: 16px;             /* Figma: 16px (не 11.5px) */
  font-weight: 500;            /* Figma: Medium */
  color: #ffffff;              /* Figma: #fff (не rgba(255,255,255,0.4)) */
  line-height: 21.33px;        /* Figma: lineHeight 21.33px */
  letter-spacing: 0;
  text-transform: none;        /* Figma: немає uppercase */
  margin: 0;
}


/* ── Image Gallery ───────────────────────────────────────── */
.gallery-section {
  padding: 80px 0px ;
/*  max-width: 1280px;*/
/*  margin: 0 auto;*/
  text-align: center;
  background: #FFF;
}

.gallery-section-label {
/*  font-size: 11px;*/
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 14px;
}

.gallery-section-title {
  font-family: var(--serif);
/*  font-size: clamp(26px, 3vw, 40px);*/
font-size: 40px;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.gallery-section-desc {
  font-size: 13.5px;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 48px;
}

/* Masonry-style 2-column layout matching mockup */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
  text-align: left;
}

/* Left col — one tall photo */
.gallery-item-tall {
  grid-column: 1;
  grid-row: 1 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 1 / 1.42;
  background: var(--cream-2);
}

/* Right col — two photos stacked */
.gallery-item-right-top {
  grid-column: 2;
  grid-row: 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--cream-2);
}

.gallery-item-right-bottom {
  grid-column: 2;
  grid-row: 2;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--cream-2);
}

.gallery-item-tall img,
.gallery-item-right-top img,
.gallery-item-right-bottom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.gallery-item-tall:hover img,
.gallery-item-right-top:hover img,
.gallery-item-right-bottom:hover img {
  transform: scale(1.03);
}

/* ── Contact section ─────────────────────────────────────── */
.contact-section {
  background: var(--forest);
  padding: 80px 40px 96px;
  position: relative;
  overflow: hidden;
}

.contact-topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Cellipse cx='150' cy='100' rx='130' ry='70' fill='none' stroke='white' stroke-width='0.8'/%3E%3Cellipse cx='150' cy='100' rx='100' ry='52' fill='none' stroke='white' stroke-width='0.8'/%3E%3Cellipse cx='150' cy='100' rx='70' ry='35' fill='none' stroke='white' stroke-width='0.8'/%3E%3Cellipse cx='150' cy='100' rx='40' ry='18' fill='none' stroke='white' stroke-width='0.8'/%3E%3C/svg%3E");
  background-size: 300px 200px;
}

.contact-inner {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.contact-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 14px;
}

.contact-title {
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 500;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 16px;
}

.contact-desc {
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(255,255,255,0.45);
  margin-bottom: 40px;
}

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.form-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md);
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--white);
  transition: border-color var(--t-fast), background var(--t-fast);
  outline: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(255,255,255,0.25);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

/* Select */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.5l4 4 4-4' stroke='rgba(255,255,255,0.4)' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
  color: rgba(255,255,255,0.35);
}

.form-select option {
  background: var(--forest);
  color: var(--white);
}

/* Send button */
.contact-submit {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

.btn-send {
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: 100px;
  padding: 14px 44px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background var(--t-fast), transform 0.14s;
}

.btn-send:hover {
  background: var(--orange-hover);
  transform: translateY(-1px);
}

/* Three dots decoration */
.contact-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 36px;
}

.contact-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
}





.announcement-bar {
  background: var(--forest);
  color: var(--white);
  text-align: center;
  min-height: 40px;                /* Figma: height 40px */
  padding: 11px 60px;              /* вертикальний ~11.5px, горизонтальний — місце для кнопки */
  font-family: var(--sans);        /* Montserrat */
  font-size: 14px;                 /* Figma: 14px, було 13px */
  font-weight: 500;                /* ✅ */
  letter-spacing: 0;               /* Figma: 0, було 0.2px */
  line-height: 17px;               /* Figma: 17.07px */
  position: relative;
  z-index: 200;

  /* Декоративний градієнт по краях (Figma: Rectangle 72/73) */
  /*background-image:
    linear-gradient(to right, #203e31 0%, transparent 26%),
    linear-gradient(to left,  #203e31 0%, transparent 26%);*/
/*  background-repeat: no-repeat;*/
/*  background-size: 379px 100%, 379px 100%;*/
/*  background-position: left center, right center;*/
}
.announcement-bar:before{
  content: "";
  position: absolute; left: 0;top: 0;width: 30%;
  height: 100%; bottom: 0;
      background-repeat: no-repeat;
  background-image: url('../images/bg-announcement-left.png');
  background-size: cover;
  background-image: linear-gradient(to left,  #203e31 0%, transparent 26%), url('../images/bg-announcement-left.png');
}
.announcement-bar:after{
  content: "";
  position: absolute; right: 0;top: 0;width: 30%;
  height: 100%; bottom: 0;    background-repeat: no-repeat;
  background-image: url('../images/bg-announcement-right.png');
   background-image: linear-gradient(to right, #203e31 0%, transparent 26%), url('../images/bg-announcement-right.png');
  background-position: right; background-size: cover;
}
.announcement-bar a {
  color: var(--orange);
  text-decoration: underline;
  margin-left: 8px;
  
}
.announcement-bar span{ position: relative;z-index: 2; }
.announcement-bar strong { font-weight: 700; }

/* Close button — виправлено позицію і розмір */
.announcement-bar button,
#annClose {
  position: absolute;
  right: 12px;                     /* Figma: 12px, було 15px */
  top: 50%;
  transform: translateY(-50%);     /* вертикально по центру замість top:8px */
  width: 20px;                     /* Figma: 20×20px frame */
  height: 20px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}


.announcement-bar {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.announcement-bar.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
/* ============================================================
   PRODUCT STANDARD PAGE — simple (no configurator)
   ============================================================ */
.prod-car-selector-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: border-color var(--t-base);
  width: 100%;
}

.prod-car-selector-row:hover { border-color: var(--text-mid); }

.prod-car-selector-img {
  width: 44px;
  height: 30px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.prod-car-selector-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
}

.prod-car-selector-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-light);
}

/* Qty + cart row */
.qty-cart-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.qty-control {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  flex-shrink: 0;
}

.qty-btn {
  width: 38px;
  height: 50px;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-mid);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.qty-btn:hover { background: var(--cream); color: var(--text-dark); }

.qty-val {
  width: 36px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  border: none;
  background: none;
  pointer-events: none;
}

.add-to-cart-btn-std {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cream);
  color: var(--text-mid);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 20px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  cursor: not-allowed;
  opacity: 0.7;
}

.add-to-cart-btn-std.active {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
  cursor: pointer;
  opacity: 1;
}

.add-to-cart-btn-std.active:hover {
  background: var(--orange-hover);
}

.prod-price-range {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.prod-desc {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.75;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.custom-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-mid);
  margin-top: 14px;
  cursor: pointer;
  transition: color var(--t-fast);
}

.custom-link:hover { color: var(--orange); }

/* Product name + subtitle in right panel */
.prod-name {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 4px;
}

.prod-subtitle {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 20px;
}

.prod-price-label {
  font-size: 11px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

/* ============================================================
   SIMILAR PRODUCTS SECTION
   ============================================================ */
.similar-section {
/*  padding: 48px 40px 80px;*/
  max-width: 1280px;
  margin: 0 auto;
}

.similar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.similar-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
}

.view-all-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--t-fast);
}

.view-all-link:hover { gap: 8px; }

.similar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Override broken product-card vars in similar grid */
.similar-grid .product-card {
  border-radius: var(--r-lg);
  text-decoration: none;
  display: block;
}

.similar-grid .product-card-img {
  aspect-ratio: 4/3;
  background: var(--cream);
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.similar-grid .product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.similar-grid .product-card:hover .product-card-img img { transform: scale(1.05); }

/* Gallery inspire link */
.gallery-inspire {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.gallery-inspire svg { width: 14px; height: 14px; flex-shrink: 0; }
.gallery-inspire:hover { color: var(--orange); }



/* ============================================================
   BLOG LIST — page-specific
   ============================================================ */

/* ── Page hero title ─────────────────────────────────────── */
.blog-hero {
  text-align: center;
  padding: 25px  0 20px;
/*  background: var(--cream);*/
}

.blog-hero-title {
  font-family: var(--serif);
/*  font-size: clamp(32px, 4vw, 52px);*/
font-size: 48px;
  font-weight: 500;
  color: var(--text-dark);
/*  line-height: 1.08;*/
/*  letter-spacing: -0.5px;*/
  margin-bottom: 35px;
}

.blog-hero-desc {
  font-size: 16px;
  color: var(--text-dark);
  line-height: 1.45;
  font-family: var(--sans);
}

/* ── Category tabs ───────────────────────────────────────── */
.blog-tabs-wrap {
/*  background: var(--cream);*/
/*  padding: 0 40px;*/
/*  border-bottom: 1.5px solid var(--border);*/
  margin-bottom: 0;
}

.blog-tabs {
/*  max-width: 1280px;*/
/*  margin: 0 auto;*/
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
}

.blog-tab {
  padding: 15px 15px 10px;
  font-family: var(--serif);
  font-family: var(--sans);
  color: var(--text-dark);
  font-size: 16px;
  font-weight: 500;
/*  color: var(-);*/
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 1px solid transparent;
  margin-bottom: -1.5px;
  transition: color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
  display: block;
}

.blog-tab:hover { color: var(--text-dark); }

.blog-tab.active {
  color: var(--text-dark);
  border-bottom-color: var(--orange);
/*  font-weight: 600;*/
}

/* ── Blog grid area ──────────────────────────────────────── */
.blog-area {
/*  max-width: 1280px;*/
/*  margin: 0 auto;*/
  padding: 80px 0px ;
}

/* 3-column grid matching mockup */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  margin-bottom: 56px;
}

/* Card */
.blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  color: var(--text-dark);
}

.blog-card-img {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 384 / 294;
  background: var(--cream-2);
  margin-bottom: 24px;
  position: relative;
}
.blog-card-img:after{
  content: "";
  position: absolute;
  width: 100%; height: 100%;
  background: #222;
  opacity: 0;
  top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}
.blog-card:hover .blog-card-img:after{ opacity: 0.5;  }
.blog-card:hover .blog-card-img img { transform: scale(1.04); }

/* Arrow icon on hover */
.blog-card-arrow {
  position: absolute;
  top: 15px;
  right: 15px;
/*  transform: translate(-50%, -50%) scale(0.8);*/
  width: 44px;
  height: 44px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-base), transform var(--t-base);
  pointer-events: none;z-index: 4;
}

.blog-card:hover .blog-card-arrow {
  opacity: 1;
/*  transform: translate(-50%, -50%) scale(1);*/
}

.blog-card-arrow svg { width: 16px; height: 16px; color: var(--text-dark); }

/* Category tag */
.blog-card-tag {
  font-size: 13px;
  font-weight: 600;
  color: #222;
  margin-bottom: 12px;
background: #FFF; border-radius: 56px;
padding: 4px 6px;
display: inline-block;
width: auto;     width: max-content;
}

/* Winter/Insulated pill style */
.blog-card-tag.tag-winter {
  display: inline-block;
  background: var(--forest);
  color: var(--white);
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  margin-bottom: 10px;
}

.blog-card-title {
  font-family: var(--serif);
/*  font-size: clamp(16px, 1.6vw, 21px);*/
font-size: 24px;
  font-weight: 500;
  
  line-height: 1.3;
  margin-bottom: 10px;
  transition: color var(--t-fast);
}

/*.blog-card:hover .blog-card-title { color: var(--orange); }*/

.blog-card-date {
  font-size: 15px;
/*  color: var(--text-light);*/
  margin-top: auto;
  padding-top: 4px;
}

/* ── Pagination ──────────────────────────────────────────── */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
/*  border-top: 1px solid var(--border);*/
}

.blog-page-info {
  font-size: 13px;
  color: var(--text-dark);
}

.blog-page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
/*  border: 1.5px solid var(--border);*/
/*  background: var(--white);*/
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
  color: var(--text-mid);
}

.page-arrow:hover {
  background: var(--orange);
}

.page-arrow svg { width: 14px; height: 14px; }

.page-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
  color: var(--text-mid);
}

.page-num:hover { background: var(--orange); }

.page-num.active {
  background: var(--orange);
/*  color: var(--white);*/
/*  font-weight: 600;*/
  border-color: var(--orange);
}

.page-ellipsis {
  font-size: 14px;
  color: var(--text-light);
  padding: 0 4px;
  line-height: 36px;
}

/* ============================================================
   BLOG POST — page-specific
   ============================================================ */

/* ── Post header ─────────────────────────────────────────── */
.post-header {
  text-align: center;
  padding: 30px 0px 20px;
  max-width: 820px;
  margin: 0 auto;
}

.post-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.post-tag {
 font-size: 13px;
  font-weight: 600;
  color: #222;
 
  background: #FFF; border-radius: 56px;
  padding: 4px 6px;
  display: inline-block;
  width: auto;     width: max-content;
}

.post-date {
  font-size: 15px;
}

.post-meta-dot {
/*  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-dark);
  flex-shrink: 0;*/
}

.post-title {
  font-family: var(--serif);
  font-size:  48px;
  font-weight: 500;
/*  color: var(--text-dark);*/
  line-height: 1.35;
      margin-bottom: 30px;
/*  letter-spacing: -0.5px;*/
}

/* ── Hero image ──────────────────────────────────────────── */
.post-hero-img {
  max-width: 1200px;
  margin: 0 auto 40px;
/*  padding: 0 40px;*/
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 900 / 450;
  background: var(--cream-2);
}

.post-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--r-xl);
}

/* ── Post content ────────────────────────────────────────── */
.post-content {
  max-width: 800px;
  margin: 0 auto 60px;
  line-height: 1.35;
}

/* Typography */
.post-content p {
/*  font-size: 14.5px;*/
/*  line-height: 1.35;*/
/*  color: var(--text-mid);*/
  margin-bottom: 10px;
}

.post-content p a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}

.post-content p a:hover { color: var(--orange-hover); }

.post-content h2 {
  font-family: var(--serif);
/*  font-size: clamp(20px, 2.5vw, 30px);*/
  font-size: 40px;
  font-weight: 500;
  margin-bottom: 20px;
  margin-top: 40px;
/*  color: var(--text-dark);*/
/*  line-height: 1.2;*/
/*  margin: 40px 0 18px;*/
/*  letter-spacing: -0.2px;*/
}

.post-content h3 {
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 500;
  color: var(--text-dark);
  margin: 32px 0 14px;
}

/* ── In-content image + thumbnail strip ─────────────────── */
.post-gallery-block {
  margin: 36px 0 40px;
}

.post-gallery-main {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--cream-2);
  margin-bottom: 8px;
  cursor: zoom-in;
}

.post-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.post-gallery-main:hover img { transform: scale(1.02); }

/* Thumbnail strip */
.post-gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.post-gallery-thumbs::-webkit-scrollbar { display: none; }

.post-gallery-thumb {
  flex-shrink: 0;
  width: 96px;
  height: 74px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--cream-2);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--t-fast), opacity var(--t-fast);
  opacity: 0.75;
}

.post-gallery-thumb:hover { opacity: 1; border-color: var(--border-dark); }
.post-gallery-thumb.active { border-color: var(--orange); opacity: 1; }

.post-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Open gallery link */
.open-gallery-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-light);
  margin-top: 12px;
  cursor: pointer;
  transition: color var(--t-fast);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sans);
}

.open-gallery-link:hover { color: var(--orange); }
.open-gallery-link svg { width: 16px; height: 16px; }

/* ── Lists ───────────────────────────────────────────────── */
.post-content h2.list-heading,
.list-heading {
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 500;
  color: var(--text-dark);
  margin: 36px 0 16px;
}

.post-content ul,
.post-content ol {
  padding-left: 16px;
  margin-bottom: 28px;
  list-style: none;
}

.post-content ul li,
.post-content ol li {
  font-size: 16px;
/*  line-height: 1.75;*/
/*  color: var(--text-mid);*/
  padding: 6px 0 6px 25px;
  position: relative;
/*  border-bottom: 1px solid var(--border);*/
}

/*.post-content ul li:first-child,*/
/*.post-content ol li:first-child { border-top: 1px solid var(--border); }*/

/* Bullet — orange circle */
.post-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border: 2px solid var(--orange);
  border-radius: 50%;
}

/* Ordered — number */
.post-content ol {
  counter-reset: post-counter;
}

.post-content ol li {
  counter-increment: post-counter;
}

.post-content ol li::before {
  content: counter(post-counter) '.';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
}

/* ── Share row ───────────────────────────────────────────── */
.post-share {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  margin-top: 36px;
}

.post-share-label {
  font-size: 16px;
/*  color: var(--text-light);*/
  margin-right: auto;
}

.share-btn {
  width: 34px;
  height: 34px;
/*  border-radius: 50%;*/
/*  border: 1.5px solid var(--border);*/
/*  background: var(--white);*/
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
/*  transition: all var(--t-fast);*/
/*  color: var(--text-light);*/
  text-decoration: none;
      text-decoration: none;
    border: none;
    background: none;
    padding: 0px;
}

.share-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(232, 131, 26, 0.05);
}

.share-btn svg { width: 15px; height: 15px; }

/* ── Related posts / From our journal ───────────────────── */
.post-related {
/*  max-width: 1280px;*/
/*  margin: 0 auto;*/
/*  padding: 0 40px 72px;*/
margin-bottom: 80px;
}

.post-related-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 50px;
}

.post-related-title {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 500;
  color: var(--text-dark);
}

.post-related-viewall {
  font-size: 16px;
  font-weight: 500;
/*  color: var(--text-mid);*/
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color var(--t-fast);
  flex-shrink: 0;
}

.post-related-viewall:hover { color: var(--orange); }
.post-related-viewall svg { width: 13px; height: 13px; }

.post-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Reuse blog-card styles */
/*.post-related-grid .blog-card-img {
  aspect-ratio: 384 / 240;
}*/





/* ============================================================
   HAMBURGER + MOBILE NAV OVERLAY
   ============================================================ */

/* Hamburger button — hidden on desktop */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
/*  margin-left: auto;*/
  flex-shrink: 0;
  z-index: 10002;
  position: relative;
}

.hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease, width 0.3s ease;
  transform-origin: center;
}

/* Animated X state */
.hamburger-btn.is-open .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.is-open .hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.is-open .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* White bars when header is transparent (homepage hero) */
.home .hamburger-btn .hamburger-bar,
.page-main .hamburger-btn .hamburger-bar { background: var(--white); }
.home .hamburger-btn.is-open .hamburger-bar,
.page-main .hamburger-btn.is-open .hamburger-bar { background: var(--text-dark); }

/* ── Mobile nav overlay ───────────────────────────────────── */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: var(--white);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-overlay.is-open {
  transform: translateX(0);
}

/* Backdrop behind overlay */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* Header inside overlay */
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  padding-top: 50px;
  flex-shrink: 0;
}

.mobile-nav-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-dark);
  flex-shrink: 0;
}

/* Nav links */
.mobile-nav-links {
  flex: 1;
  padding: 24px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-nav-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color var(--t-fast);
}

.mobile-nav-links a:last-child { border-bottom: none; }
.mobile-nav-links a:hover { color: var(--orange); }

.mobile-nav-links a.current,
.mobile-nav-links a[aria-current="page"] { color: var(--orange); }

.mobile-nav-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-light);
  flex-shrink: 0;
}

/* Car selector inside mobile nav */
.mobile-nav-car {
  padding: 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.mobile-nav-car-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-light);
  margin-bottom: 12px;
}

/* Body scroll lock */
body.nav-open { overflow: hidden; }




/* ── FancyBox customisation ──────────────────────────────── */
:root {
  --fancybox-bg: rgba(17, 17, 17, 0.96);
  --fancybox-thumbs-width: 88px;
}

/* Make close button cleaner */
.fancybox__container .f-button.is-close-btn {
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  width: 44px;
  height: 44px;
}

.fancybox__container .f-button.is-close-btn:hover {
  background: rgba(255,255,255,0.22);
}

/* Thumb strip styling */
.fancybox__thumbs .fancybox__thumb {
  border-radius: 8px;
  overflow: hidden;
}

/* Counter label */
.fancybox__caption {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  padding: 12px 0;
}

/* ============================================================
   PROSE — Universal rich-text typography
   ============================================================
   Клас .prose накидається на будь-який контейнер з
   WP-контентом: legal pages, blog post, FAQ, static pages.

   WordPress: functions.php →
     add_filter('the_content', function($c){
       return '<div class="prose">'.$c.'</div>';
     });
   Або в шаблоні: <div class="prose"><?php the_content(); ?></div>
   ============================================================ */

.prose {
 
  color: var(--text-dark);
  font-family: var(--sans);
}

/* ── Headings ─────────────────────────────────────────────── */

.prose h1 {
  font-family: var(--serif);
  font-size:  56px;
  font-weight: 500;
  line-height: 1.1;
 
  color: var(--text-dark);
  margin: 40px 0 30px;
}

.prose > h1:first-child { margin-top: 0; }

.prose h2 {
  font-family: var(--serif);
  font-size:   48px;
  font-weight: 500;
  line-height: 1.15;
 
  color: var(--text-dark);
  margin: 30px 0 20px;
}

.prose h3 {
  font-family: var(--serif);
  font-size:   40px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 30px 0 14px;
}

.prose h4 {
  font-family: var(--serif);
  font-size:  32px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-dark);
  margin: 30px 0 12px;
}

.prose h5 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-dark);
  margin: 25px 0 10px;
 
}

.prose h6 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-dark);
  margin: 22px 0 12px;
}

/* Менший відступ коли h одразу після p */
/*.prose p + h2 { margin-top: 44px; }*/
/*.prose p + h3 { margin-top: 32px; }*/
/*.prose p + h4 { margin-top: 26px; }*/

/* ── Paragraph ────────────────────────────────────────────── */

.prose p {
  font-size: 16px;
  line-height: 1.25;
  color: var(--text-mid);
  margin-bottom: 15px;
}
.prose{margin-bottom: 80px;}
.prose p:last-child { margin-bottom: 0; }

.prose ul.wp-block-navigation{ list-style: none;     flex-direction: column;
    align-items: flex-start; margin-top: 30px;     padding-left: 0;}
.prose ul.wp-block-navigation li  {    padding-left: 0;}
.prose ul.wp-block-navigation li::before{ content: none;}
.prose ul.wp-block-navigation li a{text-decoration-color: transparent; }
.prose ul.wp-block-navigation li.current-menu-item a{     text-decoration-color: var(--orange); }

/* ── Links ────────────────────────────────────────────────── */

.prose a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast);
}

.prose a:hover { color: var(--orange-hover); }

/* ── Strong / em ──────────────────────────────────────────── */

.prose strong { font-weight: 700; color: var(--text-dark); }
.prose em     { font-style: italic; }

/* ── Bullet list ──────────────────────────────────────────── */

.prose ul, .prose ol {
  padding-left: 16px;
  margin-bottom: 28px;
  list-style: none;
}

.prose ul li, .prose ol li {
  font-size: 16px;
  padding: 6px 0 6px 25px;
  position: relative;
}

/*.prose ul > li:first-child { border-top: 1px solid var(--border); }*/

/* Orange ring bullet */
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border: 2px solid var(--orange);
  border-radius: 50%;
 
}

/* ── Ordered list ─────────────────────────────────────────── */

.prose ol {
  counter-reset: prose-ol;
}

.prose ol li {
 
  counter-increment: prose-ol;
}

.prose ol > li:first-child { border-top: 1px solid var(--border); }

.prose ol li::before {
  content: counter(prose-ol) '.';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
 
}

/* ── Nested lists ─────────────────────────────────────────── */

.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
  margin: 6px 0 6px 20px;
  border-top: none;
}

.prose ul ul li:first-child,
.prose ol ol li:first-child { border-top: none; }

/* ── Blockquote ───────────────────────────────────────────── */

.prose blockquote {
  border-left: 3px solid var(--orange);
  margin: 36px 0;
  padding: 18px 24px;
  background: var(--cream);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.prose blockquote p {
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.7;
}

/* ── Horizontal rule ──────────────────────────────────────── */

.prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 44px 0;
}

/* ── Inline code ──────────────────────────────────────────── */

.prose code {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  background: var(--cream-2);
  color: var(--forest);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}

/* ── Table ────────────────────────────────────────────────── */

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin: 28px 0;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}

.prose th {
  text-align: left;
  padding: 11px 16px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-light);
  background: var(--cream);
  border-bottom: 1.5px solid var(--border-dark);
}

.prose td {
  padding: 11px 16px;
  color: var(--text-mid);
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.prose tr:last-child td { border-bottom: none; }
.prose tbody tr:hover td { background: var(--cream); transition: background var(--t-fast); }

/* ── Images inside prose ──────────────────────────────────── */

.prose img {
  width: 100%;
  border-radius: var(--r-lg);
  margin: 28px 0;
  display: block;
}

.prose figure { margin: 28px 0; }

.prose figcaption {
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
  line-height: 1.5;
}

/* ── WordPress / Gutenberg ────────────────────────────────── */

.prose .alignleft  { float: left;  margin: 6px 24px 16px 0; max-width: 45%; border-radius: var(--r-lg); }
.prose .alignright { float: right; margin: 6px 0 16px 24px; max-width: 45%; border-radius: var(--r-lg); }
.prose .aligncenter { margin-left: auto; margin-right: auto; text-align: center; display: block; }
.prose .alignwide  { width: calc(100% + 80px); margin-left: -40px; border-radius: var(--r-xl); }

.prose .wp-caption { margin: 28px 0; }
.prose .wp-caption-text {
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

/* Clearfix for float images */
.prose::after { content: ''; display: table; clear: both; }


/* ============================================================
   LEGAL PAGE LAYOUT
   ============================================================ */

.legal-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 52px 40px 80px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
}

/* Sticky sidebar navigation */
.legal-sidebar {
  position: sticky;
  top: 96px;          /* clears the fixed header */
}

.legal-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.legal-sidebar-link {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-light);
  text-decoration: none;
  padding: 7px 14px;
  border-left: 2px solid transparent;
  line-height: 1.4;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.legal-sidebar-link:hover {
  color: var(--text-dark);
  background: var(--cream);
}

.legal-sidebar-link.active {
  color: var(--text-dark);
  border-left-color: var(--orange);
  font-weight: 600;
  background: var(--cream);
}






/* ============================================================
   FAQ PAGE — page-specific styles
   ============================================================ */

/* ── Page hero ───────────────────────────────────────────── */
.faq-header {
  background: #f5f1eb;
  padding: 0;
}

.faq-header-inner {
  padding-top: 30px;            /* 192-152=40px від nav */
  padding-bottom: 62px;
  text-align: center;
}

/* Figma: Playfair Display Medium 48px, #222, center */
.faq-page-title {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 500;
  color: #222222;
  line-height: 63.98px;
  letter-spacing: 0;
  margin: 0 0 32px;
  text-align: center;
}

/* Figma: Montserrat Regular 16px, #222, center */
.faq-page-desc {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: #222222;
  line-height: 19.5px;
  text-align: center;
  margin: 0 0 62px;
}

/* ── Tabs — Figma Frame 427321277 ───────────────────────── */
/* Centered, height 36px, gap між tabs */
.faq-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding-bottom: 0;
}

/* Figma:
   Active Frame 427321285: border-bottom stroke #fe9c29, 120×36px
   Inactive: no border, same text */
.faq-tab {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;             /* Figma: Medium */
  color: #222222;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
  cursor: pointer;
}

.faq-tab.is-active {
  border-bottom-color: #fe9c29; /* Figma: stroke #fe9c29 */
  color: #222222;
}

.faq-tab:hover:not(.is-active) {
  border-bottom-color: rgba(254, 156, 41, 0.4);
}

/* ── FAQ Body ────────────────────────────────────────────── */
.faq-body {
  /* groups render as block sections */
}

/* ── FAQ Group section ───────────────────────────────────── */
/* Figma: bg #ffffff (непарні) */
.faq-group {
  background: #ffffff;
}

/* Figma: bg #fdf9f4 (парні — Frame 530) */
.faq-group--alt {
  background: #fdf9f4;
}

/* Container: 1200px, padding-top 104px */
.faq-group-inner {
  display: grid;
  /* Figma: left 495px + gap 52px + right 653px = 1200px */
  grid-template-columns: 495px 653px;
  gap: 52px;
  padding-top: 104px;           /* Figma: 576-472=104px */
  padding-bottom: 104px;
  align-items: start;
}

/* ── Left column ─────────────────────────────────────────── */
/* Figma Frame 449: 495×125px */
.faq-group-left {
  position: sticky;
  top: 96px;                    /* sticky під nav */
}

/* Figma: Playfair Display Medium 40px, #222, lineHeight 53.3px */
.faq-group-title {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 500;
  color: #222222;
  line-height: 53.32px;
  letter-spacing: 0;
  margin: 0 0 35px;
}

/* Figma: Montserrat Regular 16px, #222, lineHeight 19.5px */
.faq-group-desc {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: #222222;
  line-height: 19.5px;
  margin: 0;
  max-width: 495px;
}

/* ── Right column — accordion list ──────────────────────── */
/* Figma Frame 415: 653px wide */
.faq-group-list {
  width: 653px;
}

/* ── FAQ Item ───────────────────────────────────────────── */
/* Figma: closed 72px, open 220px, border-bottom 1px #e6e6e6 */
.faq-item {
  border-bottom: 1px solid #e6e6e6;  /* Figma: stroke #e6e6e6 */
  overflow: hidden;
}

/* First item also has border-top */
.faq-item:first-child {
  border-top: 1px solid #e6e6e6;
}

/* ── Question button ─────────────────────────────────────── */
/* Figma Frame 412: 653×40px, padding-top 24px within the 72px item */
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 24px 0;              /* Figma: 24px top + bottom для 72px total height */
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  font-size: 16px;              /* Figma: 16px */
  font-weight: 500;             /* Figma: Medium */
  color: #222222;
  line-height: 19.5px;
  letter-spacing: 0;
  transition: color var(--t-fast);
}

.faq-q:hover { color: var(--orange, #fe9c29); }

.faq-q span {
  flex: 1;
  max-width: 605px;             /* Figma: text width 605px */
}

/* Chevron icon: 24×24px */
.faq-chevron {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #222222;
  transition: transform 0.25s ease;
}

/* Rotate chevron when open */
.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}

/* ── Answer ──────────────────────────────────────────────── */
/* Figma: Regular 16px, #222, gap 32px від question (y=672-640=32) */
.faq-a {
  display: none;
  padding: 10px 0 24px;
  font-family: var(--sans);
  font-size: 16px;       
  font-weight: 400;
  color: #222222;
  line-height: 19.5px;
/*  max-width: 605px;        */
}

/* Show answer when open */
.faq-item.is-open .faq-a {
  display: block;
}

.faq-a p { margin: 0 0 12px; }
.faq-a p:last-child { margin-bottom: 0; }

/* Smooth open/close animation */
.faq-a {
  animation: faqFadeIn 0.2s ease;
}

@keyframes faqFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .faq-group-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .faq-group-list { width: 100%; }
  .faq-group-left { position: static; }
  .faq-page-title { font-size: 36px; line-height: 1.3; }
}

@media (max-width: 768px) {
  .faq-page-title { font-size: 28px; }
  .faq-group-title { font-size: 28px; }
  .faq-tabs { flex-wrap: wrap; gap: 8px; padding: 0 16px; }
  .faq-tab  { padding: 8px 12px; font-size: 14px; }

  .faq-group-inner { padding-top: 40px; padding-bottom: 40px; }
  .faq-q { padding: 18px 0; font-size: 15px; }
  .faq-a  { font-size: 14px; }
}






.variations_button  .quantity{ 
  display: inline-flex;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
}
/* ============================================================
   LOGO — світлі сторінки (has-logo) vs головна (page-main)
   ============================================================ */

/* Головна — logo-name приховане, тільки SVG іконка (на темному фоні) */
.page-main .logo-name { display: none; }
.page-main .logo-svg path { /* вже помаранчеве */ }
.logo-name{ display: none !important; }
/* Світлі сторінки — показуємо logo-name */
/*.has-logo .logo-name { display: block; color: var(--text-dark); }*/

/* Кастомне лого з Media Library на світлих сторінках */
.has-logo .site-header-logo-light { display: block; }
.has-logo .site-header-logo-dark  { display: none;  }
.page-main .site-header-logo-light { display: none; }
.page-main .site-header-logo-dark  { display: block; }

/* Розміри кастомного лого в хедері */
.logo .site-header-logo-light img,
.logo .site-header-logo-dark  img {
  height: 32px;
  width: auto;
  display: block;
}




/* ── WooCommerce Product Add-Ons — override default styles ───── */

/* Скидаємо дефолтні стилі плагіна */
/*.wc-pao-addon-wrap,
.wc-pao-addon { margin: 0 !important; padding: 0 !important; }*/

/* Кожна група Add-On → наш option-group */
.wc-pao-addon-container {
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}

/*.wc-pao-addon-name,*/
/*.wc-pao-addon-container > label {*/
/*  font-size: 12px !important;*/
/*  font-weight: 600 !important;*/
/*  text-transform: uppercase !important;*/
/*  letter-spacing: 0.5px !important;*/
/*  color: var(--text-light) !important;*/
/*  margin-bottom: 10px !important;*/
/*  display: block !important;*/
/*}*/

/* Radio buttons → наш стиль */
.wc-pao-addon-container .wc-pao-addon-radio-select-container { display: flex; flex-direction: column; gap: 8px; }

.wc-pao-addon-container .wc-pao-addon-radio-select {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
  font-size: 14px;
  color: var(--text-dark);
  background: var(--white);
}

.wc-pao-addon-container .wc-pao-addon-radio-select:hover { border-color: var(--border-dark); background: var(--cream); }

.wc-pao-addon-container input[type="radio"]:checked + .wc-pao-addon-radio-select,
.wc-pao-addon-container .wc-pao-addon-radio-select.selected {
  border-color: var(--forest);
  background: var(--cream);
}

/* Price в Add-On опціях */
.wc-pao-addon-container .price { font-weight: 600; color: var(--text-dark); font-size: 13px; margin-left: auto; }

/* Select dropdown */
.wc-pao-addon-container select {
  width: 100%;
  padding: 12px 40px 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-dark);
  background: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.5l4 4 4-4' stroke='%23888' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color var(--t-fast);
}

.wc-pao-addon-container select:focus { border-color: var(--text-mid); }

/* Text input / textarea */
.wc-pao-addon-container input[type="text"],
.wc-pao-addon-container textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-dark);
  background: var(--white);
  outline: none;
  transition: border-color var(--t-fast);
  resize: vertical;
}

.wc-pao-addon-container input[type="text"]:focus,
.wc-pao-addon-container textarea:focus { border-color: var(--text-mid); }

/* Measurements row — 3 inputs в ряд */
.wc-pao-addon-container.measurements-row .wc-pao-addon-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* Checkbox */
.wc-pao-addon-container input[type="checkbox"] { accent-color: var(--orange); width: 16px; height: 16px; }


/* ── Qty + Add to Cart row ───────────────────────────────────── */
.product-qty-cart {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 20px 0 16px;
}

.qty-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  flex-shrink: 0;
}

.qty-btn {
  width: 44px;
  height: 52px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mid);
  transition: background var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}

.qty-btn:hover { background: var(--cream); color: var(--text-dark); }
.qty-btn svg   { width: 14px; height: 14px; pointer-events: none; }

.qty-wrap input.qty {
  width: 52px;
  height: 52px;
  border: none;
  text-align: center;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dark);
  background: transparent;
  -moz-appearance: textfield;
  outline: none;
  padding: 0;
}

.qty-wrap input.qty::-webkit-inner-spin-button,
.qty-wrap input.qty::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Add to Cart button */
.add-to-cart-btn,
.single_add_to_cart_button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.1px;
  transition: background var(--t-fast), transform 0.14s;
}

.add-to-cart-btn:hover,
.single_add_to_cart_button:hover {
  background: var(--orange-hover);
  transform: translateY(-1px);
}

.add-to-cart-btn:disabled,
.single_add_to_cart_button:disabled {
  background: var(--border-dark);
  cursor: not-allowed;
  transform: none;
}









/* ============================================================
   CONTACTS PAGE
   ============================================================ */

/* ── Hero section ─────────────────────────────────────────── */
.contacts-hero {
  background: var(--cream);
  padding: 30px 0px 75px;
}

.contacts-hero-inner {
/*  max-width: 1280px;*/
/*  margin: 0 auto;*/
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 30px;
  align-items: start;
}

/* Left info col */
.contacts-title {
  font-family: var(--serif);
/*  font-size: clamp(36px, 5vw, 64px);*/
  font-size: 56px;
  font-weight: 500;
  color: var(--text-dark);
  line-height: 1.15;
/*  letter-spacing: -0.5px;*/
  margin-bottom: 20px;
}

.contacts-desc {
  font-size: 16px;
  line-height: 1.45;
/*  color: var(--text-mid);*/
  margin-bottom: 36px;
/*  max-width: 400px;*/
}

.contacts-detail-group {
  margin-bottom: 40px;
}

.contacts-detail-label {
  display: block;
  font-size: 16px;
/*  font-weight: 600;*/
/*  color: var(--text-light);*/
/*  letter-spacing: 0.3px;*/
  margin-bottom: 15px;
}

.contacts-detail-value {
  font-size: 32px;
   font-family: var(--serif);
/*  color: var(--text-dark);*/
  text-decoration: none;
  transition: color var(--t-fast);
  font-weight: 500;
}

/*.contacts-detail-value--lg {*/
/*  font-family: var(--serif);*/
/*  font-size: clamp(20px, 2.5vw, 28px);*/
/*  font-weight: 400;*/
/*  letter-spacing: -0.2px;*/
/*}*/

.contacts-detail-value:hover { color: var(--orange); }

.contacts-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

.contacts-bank-title {
  display: block;
  font-size: 24px;
  font-weight: 500;
  font-family: var(--serif);
/*  color: var(--text-dark);*/
  margin-bottom: 16px;
  margin-top: 40px;
}

.contacts-bank-list {
  list-style: none;
  padding: 0;
}

.contacts-bank-list li {
/*  font-size: 13.5px;*/
  line-height: 1.65;
/*  color: var(--text-mid);*/
}

/* Right photo col */
.contacts-hero-photo {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 4.4;
  background: var(--cream-2);
}

.contacts-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.contacts-hero-photo:hover img { transform: scale(1.02); }

/* ── Multi-step form additions ────────────────────────────── */

/* Step dot indicators */
.cf-steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
  margin-top: 40px;
      min-width: 100%;
}

.cf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: background var(--t-base), transform var(--t-base);
  cursor: default;
}

.cf-dot.active {
  background: var(--orange);
  transform: scale(1.2);
}

.cf-dot.done {
  background: rgba(255,255,255,0.45);
}

/* Step panels */
.cf-step { width: 100%;     max-width: 700px;     margin: 0 auto;}

.cf-step--hidden {
  display: none;
}

/* Step transition animation */
.cf-step--entering {
  animation: cfSlideIn 0.32s cubic-bezier(0.4,0,0.2,1) forwards;
}

.cf-step--leaving {
  animation: cfSlideOut 0.24s cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes cfSlideIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes cfSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-18px); }
}

/* Individual field wrapper */
.cf-field {
  display: flex;
  flex-direction: column;
}

/* 3-column field row (tent measurements) */
.cf-field-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Taller textarea on step 3 */
.form-textarea--tall {
  min-height: 160px;
}

/* Back + Next nav row */
.cf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.cf-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--t-fast);
}

.cf-back:hover { color: rgba(255,255,255,0.85); }

.cf-back svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Required asterisk */
.cf-required {
  color: var(--orange);
  margin-left: 2px;
}

/* Terms checkbox */
.cf-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  margin-top: 4px;
}

.cf-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.cf-checkbox-box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast), background var(--t-fast);
  margin-top: 1px;
}

.cf-checkbox input:checked + .cf-checkbox-box {
  background: var(--orange);
  border-color: var(--orange);
}

.cf-checkbox input:checked + .cf-checkbox-box::after {
  content: '';
  display: block;
  width: 10px;
  height: 6px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translateY(-1px);
}

.cf-checkbox-text {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  text-align: left;
}

.cf-checkbox-text a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}

.cf-checkbox-text a:hover { color: var(--orange-hover); }

/* Input validation state */
.form-input.cf-error,
.form-select.cf-error,
.form-textarea.cf-error {
  border-color: rgba(220, 80, 60, 0.7);
  background: rgba(220, 80, 60, 0.06);
}

/* ── Thank you screen ─────────────────────────────────────── */
.contact-thankyou {
  min-height: 480px;
  display: flex;
  align-items: center;
}

.thankyou-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 80px 20px;
}

.thankyou-icon {
  margin-bottom: 28px;
}

.thankyou-icon svg {
  width: 48px;
  height: 48px;
}

.thankyou-title {
  font-family: var(--serif);
/*  font-size: clamp(36px, 5vw, 60px);*/
  font-size: 56px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
}

.thankyou-desc {
  font-size: 24px;
  line-height: 1.8;
  font-size: 56px, color: #ffffff;
  margin-bottom: 40px;
  max-width: 720px;
}
.cf-error-msg{   padding: 40px 0 56px;  text-align: center; }
.cf7-hidden-form .wpcf7-response-output{ display: none !important }
/* ── Contact form POPUP (FancyBox inline) ─────────────────── */
/*
  Використання:
  <a href="#contactFormModal" data-fancybox class="btn-contact">Contact Us</a>
  або через JS: Fancybox.show([{src:'#contactFormModal',type:'inline'}])
*/
#contactFormModal {
  /* Прихований контейнер для inline FancyBox popup */
  display: none;
  max-width: 640px;
  width: 100%;
}

/* Коли FancyBox відкриває inline popup — знімаємо display:none */
.fancybox__content #contactFormModal,
#contactFormModal.fb-active {
  display: block;
}

/* Popup mode: no min-height needed, FancyBox controls sizing */
.fancybox__content .contact-section {
  padding: 56px 40px 64px;
  border-radius: var(--r-xl);
  min-height: auto;
}

/* Close button style for popup */
.fancybox__container .f-button.is-close-btn {
  background: rgba(255,255,255,0.12) !important;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  top: 16px;
  right: 16px;
}

.fancybox__container .f-button.is-close-btn:hover {
  background: rgba(255,255,255,0.22) !important;
}


/* ── Shared base: dark forest block ───────────────────────── */
.contact-block {
  position: relative;
  background-color: var(--forest);
  background-image: url('../images/bg-clip-contacts.png');
  color: var(--white);
  overflow: hidden;
}

/* Topographic SVG pattern */
/*.contact-block__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}*/

.contact-topo-svg {
  width: 100%;
  height: 100%;
  display: block;
  color: rgba(255, 255, 255, 0.05);
}


/* ============================================================
   INLINE MODE (default — embedded section on page)
   ============================================================ */
.contact-block:not(.contact-block--modal) {
  /* No special positioning — flows in document */
}

.contact-block:not(.contact-block--modal) .contact-block__scroll {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 115px 0px 105px;
}

.contact-block:not(.contact-block--modal) .contact-block__inner {
  width: 100%;
 
  text-align: center;
}


/* ============================================================
   MODAL MODE (full-screen overlay)
   ============================================================ */
.contact-block--modal {
  position: fixed;
  inset: 0;
  z-index: 9000;

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0.32s ease;
}

.contact-block--modal.is-open {
  opacity: 1;
  visibility: visible;
}

/* Close button */
.contact-block__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast);
  flex-shrink: 0;
}

.contact-block__close:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Modal scroll area */
.contact-block--modal .contact-block__scroll {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px 48px;
}

.contact-block--modal .contact-block__inner {
  width: 100%;
  max-width: 520px;
  text-align: center;
}

/* Body scroll lock */
body.contact-modal-open {
  overflow: hidden;
}


/* ============================================================
   HEADER TYPOGRAPHY
   ============================================================ */
.contact-eyebrow {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #ffffff;
  margin-bottom: 12px;
  text-align: center;
}

.contact-title {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0;
  line-height: 1.14;
  margin-bottom: 16px;
  text-align: center;
}

.contact-desc {
  font-family: var(--sans);
  font-size: 16px;
  color: #ffffff;
  line-height: 1.5;
  margin-bottom: 52px;
  max-width: 524px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* ============================================================
   MULTI-STEP FORM
   ============================================================ */
.cf-multistep-wrap {
  text-align: left;
}

/* Hidden step */
.cf-step--hidden { display: none !important; }


/* ── Fields slot ─────────────────────────────────────────── */
.cf-fields-slot {
  margin-bottom: 20px;
}

/* CF7 wraps fields in <p> — reset margins, add label gap */
.cf-fields-slot p {
  margin: 0 0 12px !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Labels rendered by CF7 before the field */
.cf-fields-slot p > label,
.cf-fields-slot p > .form-label {
  display: block;
  font-size: 16px;              /* Figma: 16px */
  font-weight: 400;             /* Figma: Regular */
  color: #ffffff;               /* Figma: white */
  margin-bottom: 8px;
  letter-spacing: 0;
}

/* CF7 span wrappers */
.cf-fields-slot .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Individual field wrapper */
.cf-field {
  margin-bottom: 24px;          /* Figma: gap between inputs = 24px (72px per field = 20px label + 8px gap + 48px input = 76 ~ 72) */
}

/* Label built by JS */
.cf-label {
  display: block;
  font-family: var(--sans);
  font-size: 16px;              /* Figma: 16px */
  font-weight: 400;             /* Figma: Regular */
  color: #ffffff;               /* Figma: white */
  margin-bottom: 4px;
  letter-spacing: 0;
}

/* 3-column measurement row (Step 3: s3-length / s3-width / s3-height) */
.cf-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.cf-field-row .cf-field,
.cf-field-row > p {
  margin-bottom: 0 !important;
}


/* ── Inputs ──────────────────────────────────────────────── */
.cf-fields-slot input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]) {
  display: block;
  width: 100%;
  height: 48px;                 /* Figma: 48px */
  padding: 0 16px 0 24px;      /* Figma: padding-left 24px */
  background: #ffffff;         /* Figma: white */
  border: 1px solid #e6e6e6;   /* Figma: border #e6e6e6 */
  border-radius: 8px;           /* Figma: radius 8px */
  font-family: var(--sans);
  font-size: 16px;              /* Figma: 16px */
  font-weight: 400;
  color: #222222;               /* Figma: #222 (dark text on white bg) */
  outline: none;
  transition: border-color var(--t-fast);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.cf-fields-slot input::placeholder {
  color: #999999;               /* Figma: #999 */
}

.cf-fields-slot input:focus {
  border-color: #222222;
  outline: none;
}


/* ── Select ──────────────────────────────────────────────── */
.cf-fields-slot select {
  display: block;
  width: 100%;
  height: 48px;                 /* Figma: 48px */
  padding: 0 40px 0 24px;      /* Figma: padding-left 24px */
  background: #ffffff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23888' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    right 16px center / 20px no-repeat;
  border: 1px solid #e6e6e6;   /* Figma: #e6e6e6 */
  border-radius: 8px;           /* Figma: 8px */
  font-family: var(--sans);
  font-size: 16px;              /* Figma: 16px */
  font-weight: 400;
  color: #333333;               /* Figma: selected value #333 */
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t-fast);
  box-sizing: border-box;
}

.cf-fields-slot select option {
  background: #ffffff;
  color: #222222;
}

.cf-fields-slot select:focus {
  border-color: #222222;
}


/* ── Textarea ────────────────────────────────────────────── */
.cf-fields-slot textarea {
  display: block;
  width: 100%;
  height: 160px;                /* Figma: 160px */
  padding: 14px 24px;           /* Figma: padding-left 24px */
  background: #ffffff;         /* Figma: white */
  border: 1px solid #e6e6e6;   /* Figma: #e6e6e6 */
  border-radius: 8px;           /* Figma: 8px */
  font-family: var(--sans);
  font-size: 16px;              /* Figma: 16px */
  font-weight: 400;
  color: #222222;
  outline: none;
  resize: vertical;
  min-height: 160px;
  line-height: 1.6;
  transition: border-color var(--t-fast);
  box-sizing: border-box;
}

.cf-fields-slot textarea::placeholder {
  color: #999999;               /* Figma: #999 */
}

.cf-fields-slot textarea:focus {
  border-color: #222222;
  outline: none;
}


/* ── Checkbox / acceptance ───────────────────────────────── */
.cf-fields-slot .wpcf7-acceptance,
.cf-fields-slot .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.cf-fields-slot .wpcf7-list-item input[type=checkbox] {
  width: 24px !important;       /* Figma: 24px */
  height: 24px !important;
  border-radius: 4px !important;
  border: 1px solid #e6e6e6 !important; /* Figma: #e6e6e6 */
  background: #ffffff !important;       /* Figma: white */
  accent-color: #fe9c29;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 0;
}

.cf-fields-slot .wpcf7-acceptance .wpcf7-list-item-label,
.cf-fields-slot .wpcf7-acceptance label {
  font-family: var(--sans);
  font-size: 16px;              /* Figma: 16px */
  font-weight: 400;
  color: #ffffff;               /* Figma: white */
  line-height: 1.5;
}

.cf-fields-slot .wpcf7-acceptance a {
  color: #ffffff;
  text-decoration: underline;
}


/* ── Navigation row ──────────────────────────────────────── */
.cf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* Step 1 — only Next, align right */
.cf-step-shell[data-shell="1"] .cf-nav {
  justify-content: flex-end;   /* Figma: Next button is right-aligned */
}

/* Back button — Figma: Montserrat Medium 16px white */
.cf-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 16px;              /* Figma: 16px */
  font-weight: 500;             /* Figma: Medium */
  color: #ffffff;               /* Figma: white */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--t-fast);
}

.cf-back:hover { color: rgba(255, 255, 255, 0.75); }

/* Next / Submit button */
.btn-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 136px;
  height: 52px;
  padding: 0 32px;
  background: #fe9c29;
  color: #222222;
  border: none;
  border-radius: 56px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0;
}

.btn-send:hover {
  background: #e88f1a;
}

.btn-send:disabled {
  background: rgba(255, 255, 255, 0.18);
  cursor: not-allowed;
  transform: none;
}


/* ── Progress dots — below nav ───────────────────────────── */
.cf-steps {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.cf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cccccc;          /* Figma: inactive #cccccc */
  transition: background var(--t-fast), transform var(--t-fast);
}

.cf-dot.active {
  background: #fe9c29;
  transform: none;
}


/* ── Validation ──────────────────────────────────────────── */
.cf-fields-slot .wpcf7-not-valid {
  border-color: #e05252 !important;
}

.cf-fields-slot .wpcf7-not-valid-tip {
  font-size: 11px;
  color: #e05252;
  margin-top: 4px;
  display: block;
}

.cf7-invalid {
  border-color: #e05252 !important;
  animation: cf7-shake 0.28s ease;
}

@keyframes cf7-shake {
  0%, 100% { transform: translateX(0); }
  30%       { transform: translateX(-5px); }
  70%       { transform: translateX(5px); }
}

/* Hide CF7 spinner and default response */
.wpcf7-spinner { display: none !important; }
.cf7-hidden-form .wpcf7-response-output { display: none !important; }


/* ── Hidden CF7 form ────────────────────────────────────── */
/* position:fixed offscreen — invisible but DOM-accessible for JS */
.cf7-hidden-form {
  display: block !important;
  visibility: hidden !important;
  position: fixed !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

/* Dev placeholder when no shortcode set */
.cf7-placeholder-hint {
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  text-align: center;
  padding: 28px 0;
}

.cf7-placeholder-hint code {
  opacity: 0.5;
  font-size: 12px;
}


/* ── Thank You screen ────────────────────────────────────── */
.cf-thankyou {
  padding: 40px 0 56px;
  text-align: center;
}

.thankyou-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.thankyou-title {
  font-family: var(--serif);
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 500;
  color: var(--white);
  margin-bottom: 14px;
  letter-spacing: -0.3px;
}

.thankyou-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.75;
  margin-bottom: 32px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* Figma: circle 48×48, stroke #fe9c29 (border only, transparent bg) */
.cf-thankyou .thankyou-icon,
.thankyou-icon {
  width: 48px;                       /* Figma: 48px */
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid #fe9c29;      /* Figma: stroke #fe9c29 */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
  flex-shrink: 0;
}

.cf-thankyou .thankyou-icon svg,
.thankyou-icon svg {
  display: block;
}

/* Figma: Playfair Display Medium 56px white */
.cf-thankyou .thankyou-title,
.thankyou-title {
  font-family: var(--serif);
  font-size: 56px;                   /* Figma: 56px */
  font-weight: 500;
  color: #ffffff;
  line-height: 1.14;                 /* Figma: lineHeight 64px */
  margin-bottom: 20px;
  letter-spacing: 0;
}

/* Figma: Montserrat Regular 24px white */
.cf-thankyou .thankyou-desc,
.thankyou-desc {
  font-family: var(--sans);
  font-size: 24px;                   /* Figma: 24px (not 15px!) */
  font-weight: 400;
  color: #ffffff;
  line-height: 1.4;
  margin-bottom: 40px;
  max-width: 728px;                  /* Figma: text width 728px */
  margin-left: auto;
  margin-right: auto;
}

/* ── CF7 response output — hide in hidden form, style in visible context ── */
.cf7-hidden-form .wpcf7-response-output,
.cf7-hidden-form .wpcf7-not-valid-tip { display: none !important; }

/* After submission CF7 adds .wpcf7-form--sent class — ensure our styles persist */
.contact-block .wpcf7-form.wpcf7-form--sent .wpcf7-response-output { display: none !important; }
.contact-block .wpcf7-form.wpcf7-form--invalid .wpcf7-response-output { display: none !important; }

/* CF7 spinner */
.cf7-hidden-form .wpcf7-spinner { display: none !important; }

/* Ensure cf-thankyou is visible when active */
.cf-thankyou:not(.cf-step--hidden) { display: flex !important; }

/* Ensure thank you screen is properly centered */
.contact-block .cf-thankyou:not(.cf-step--hidden) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 500px;
}

/* Ensure scrollWrap is visible when showing thankyou */
.contact-block .contact-block__scroll {
  display: flex !important;
}

.contact-block .contact-block__scroll.cf-step--hidden {
  display: none !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  /* Inline */
  .contact-block:not(.contact-block--modal) .contact-block__scroll {
    padding: 60px 0 72px;
  }

  /* Modal */
  .contact-block--modal .contact-block__scroll {
    padding: 56px 16px 36px;
    align-items: flex-start;
  }

  .contact-block__close {
    top: 12px;
    right: 12px;
  }

  .contact-title {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0;
  line-height: 1.14;
  margin-bottom: 16px;
  text-align: center;
}

  /* Stack measurement row on mobile */
  .cf-field-row {
    grid-template-columns: 1fr;
  }
}

/* Responsive thankyou */
@media (max-width: 768px) {
  .cf-thankyou .thankyou-title,
  .thankyou-title { font-size: 36px; }
  .cf-thankyou .thankyou-desc,
  .thankyou-desc { font-size: 18px; max-width: 90%; }
}

/* ============================================================
   STEP 3 SPLIT LAYOUT — image left + form right
   Activated when cf_step3_image ACF field is set.
   JS toggles .cf-step--hidden on .contact-step3-split
   ============================================================ */
/* ============================================================
   STEP 3 SPLIT LAYOUT
   Figma: Left 720px white bg (caption top + image bottom)
          Right 720px #214033 (form)
   ============================================================ */
.contact-step3-split {
  display: grid;
  grid-template-columns: 720px 720px; /* Figma: equal 720px each */
  min-height: 860px;                  /* Figma: frame height 860px */
  position: relative;
  z-index: 1;
}

/* ── Left: white panel — caption top, image bottom ────────── */
.contact-step3-image {
  position: relative;
  overflow: hidden;
  background: #ffffff;               /* Figma: bg white */
  display: flex;
  flex-direction: column;
}

/* Caption at top — Figma: y=56, height=140 */
.contact-step3-image-caption {
  position: relative;
  z-index: 2;
  padding: 56px 40px 24px;          /* Figma: top padding = 56px */
  background: #ffffff;
  flex-shrink: 0;
}

.contact-step3-image-title {
  font-family: var(--serif);
  font-size: 24px;                   /* Figma: Playfair 24px */
  font-weight: 500;
  color: #222222;                    /* Figma: dark text on white */
  line-height: 1.33;
  margin-bottom: 8px;
}

.contact-step3-image-desc {
  font-family: var(--sans);
  font-size: 13px;                   /* Figma: 13px */
  color: #222222;
  line-height: 1.6;
  margin-bottom: 12px;
}

.contact-step3-image-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 16px;                   /* Figma: 16px Medium */
  font-weight: 500;
  color: #222222;
  text-decoration: none;
  transition: opacity var(--t-fast);
}

.contact-step3-image-link:hover { opacity: 0.7; }

/* Image fills remaining space below caption */
.contact-step3-image img {
  width: 100%;
  flex: 1;
  object-fit: cover;
  display: block;
  min-height: 400px;
}


.contact-step3-image { display: flex; flex-direction: column; }
.contact-step3-image-caption { order: 1; padding: 56px 40px 24px; }
.contact-step3-image img { order: 2; flex: 1; object-fit: cover; }
/* A, B, C labels on image — Figma: Montserrat SemiBold 16px #fe9c29 */
/* These are decorative in Figma — not in HTML, skip */

/* ── Right: form panel — Figma: bg #214033 ────────────────── */
.contact-step3-form {
 
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 56px 56px;          /* Figma: approx from coordinates */
  text-align: left;
}

/* Smaller heading in split context — Figma: Playfair 32px */
.contact-step3-form .contact-title {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0;
  line-height: 1.14;
  margin-bottom: 16px;
  text-align: center;
}

.contact-step3-form .contact-eyebrow {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #ffffff;
  margin-bottom: 12px;
  text-align: center;
}

.contact-step3-form .contact-desc {
  font-family: var(--sans);
  font-size: 16px;
  color: #ffffff;
  line-height: 1.5;
  margin-bottom: 32px;
  max-width: 524px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Step 3 shell nav — Back left, Submit right */
.contact-step3-form .cf-step-shell .cf-nav {
  justify-content: space-between;
}

/* Step 3 dots — centered */
.contact-step3-form .cf-steps {
  justify-content: center;
}

/* Step 3 measurement row — 3 equal columns */
.contact-step3-form .cf-field-row {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
/* ============================================================
   CF7 INLINE FIELDS — v2 architecture
   Fields live in .cf-step[data-step] > p (CF7 default markup)
   ============================================================ */

/* CF7 p tags inside cf-step — act as field wrappers */
.cf-step p {
  margin: 0 0 24px !important;   /* gap between fields */
  padding: 0 !important;
  display: block;
}

/* br tags inside CF7 form — hide them */
.cf-step br { display: none; }

/* All inputs inside .cf-step */
.cf-step input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
.wpcf7-form .cf-step input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]) {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px 0 24px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: #222222;
  outline: none;
  transition: border-color var(--t-fast);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.cf-step input::placeholder,
.wpcf7-form .cf-step input::placeholder {
  color: #999999;
}

.cf-step input:focus,
.wpcf7-form .cf-step input:focus {
  border-color: #222222;
}

/* Selects inside .cf-step */
.cf-step select,
.wpcf7-form .cf-step select {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 40px 0 24px;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23888' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 20px no-repeat;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t-fast);
  box-sizing: border-box;
}

.cf-step select option { background: #ffffff; color: #222222; }
.cf-step select:focus { border-color: #222222; }

/* Textarea inside .cf-step */
.cf-step textarea,
.wpcf7-form .cf-step textarea {
  display: block;
  width: 100%;
  height: 160px;
  min-height: 160px;
  padding: 14px 24px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: #222222;
  outline: none;
  resize: vertical;
  line-height: 1.6;
  transition: border-color var(--t-fast);
  box-sizing: border-box;
}

.cf-step textarea::placeholder { color: #999999; }
.cf-step textarea:focus { border-color: #222222; }

/* Checkbox inside .cf-step */
.cf-step .wpcf7-acceptance,
.cf-step .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cf-step .wpcf7-list-item input[type=checkbox] {
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !important;
  border: 1px solid #e6e6e6 !important;
  background: #ffffff !important;
  accent-color: #fe9c29;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 0;
}

.cf-step .wpcf7-acceptance .wpcf7-list-item-label,
.cf-step .wpcf7-acceptance label {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.5;
}

.cf-step .wpcf7-acceptance a {
  color: #ffffff;
  text-decoration: underline;
}

/* Validation errors */
.cf-step .wpcf7-not-valid {
  border-color: #e05252 !important;
}

.cf-step .wpcf7-not-valid-tip {
  font-size: 11px;
  color: #e05252;
  margin-top: 4px;
  display: block;
}

.cf-step input.cf7-invalid,
.cf-step select.cf7-invalid,
.cf-step textarea.cf7-invalid {
  border-color: #e05252 !important;
  animation: cf7-shake 0.28s ease;
}

/* 3-col measurement row for Step 3 */
.cf-step[data-step="3"] .wpcf7-form-control-wrap[data-name="s3-length"],
.cf-step[data-step="3"] .wpcf7-form-control-wrap[data-name="s3-width"],
.cf-step[data-step="3"] .wpcf7-form-control-wrap[data-name="s3-height"] {
  display: block;
}

/* Nav row inside cf-multistep-wrap (outside CF7) */
.cf-step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  margin-bottom: 40px;
  margin-top: 40px;
/*  display: block;*/
/*  text-align: center;*/
      flex-wrap: wrap;
          max-width: 600px;
    margin: 40px auto;
}

/* Step 1 nav — only Next, align right */
.cf-step-nav[data-nav-step="1"] {
  justify-content: center;
}

/* Hide CF7 response output and spinner */
.wpcf7-form .wpcf7-response-output { display: none !important; }
.wpcf7-spinner { display: none !important; }

/* Step 3 measurement fields — auto 3-column layout */
/* CF7 renders: <p>s3-length</p><p>s3-width</p><p>s3-height</p><p>s3-message</p> */
/* We use CSS grid on the step itself and limit to first 3 p tags */
/*.cf-step[data-step="3"] {
  display: block;
}*/

/* Wrap the first 3 measurement p tags in a grid via JS — OR use CSS :nth-child */
/* Simpler: target by data-name on the wraps */
/*.cf-step[data-step="3"] p:has([data-name="s3-length"]),
.cf-step[data-step="3"] p:has([data-name="s3-width"]),
.cf-step[data-step="3"] p:has([data-name="s3-height"]) {
  display: inline-block;
  width: calc(33.333% - 8px);
  vertical-align: top;
  margin-right: 8px;
  margin-bottom: 24px !important;
}*/

.cf-step[data-step="3"] p:has([data-name="s3-height"]) {
  margin-right: 0;
}

.wpcf7-form-control-wrap{ display: block; margin-bottom: 25px; margin-top: 5px; }






.cf-step--split {
  padding: 0;
}

.cf-step3-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 700px;
}

/* LEFT */
.cf-step3-image {
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.cf-step3-image-inner {
  padding: 56px 40px;
}

/* RIGHT */
.cf-step3-fields {
/*  background: #214033;*/
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 3 inputs row */
.cf-field-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}




/**
 * contact-form-fixes.css
 * Доповнення і виправлення для toptrail-contact-form
 * Підключити ПІСЛЯ style.css
 */

/* ── Step 4: ховаємо header через JS клас ─────────────────────
   JS додає .cf-step--hidden на .contact-eyebrow/title/desc
   при showStep4() — але на випадок якщо display:none не спрацьовує
   через специфічність — дублюємо тут з !important
   ──────────────────────────────────────────────────────────── */
.contact-block__inner .contact-eyebrow.cf-step--hidden,
.contact-block__inner .contact-title.cf-step--hidden,
.contact-block__inner .contact-desc.cf-step--hidden {
  display: none !important;
}

/* ── Ховаємо CF7 дефолтний response output завжди ──────────── */
.cf-multistep-wrap .wpcf7-response-output,
.contact-block .wpcf7-response-output {
  display: none !important;
}

/* ── Step 4 screens — центрування ────────────────────────────
   Figma: все по центру, bg успадковується від секції (#214033)
   ──────────────────────────────────────────────────────────── */
.cf-thankyou:not(.cf-step--hidden),
.cf-error-msg:not(.cf-step--hidden) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 400px;
  padding: 80px 24px;
}

/* ── Step 4 icon: 48px, border #fe9c29 ───────────────────────
   Figma: circle stroke #fe9c29, transparent fill, checkmark
   ──────────────────────────────────────────────────────────── */
.cf-s4-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid #fe9c29;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
  flex-shrink: 0;
}

/* ── Step 4 title: Playfair 56px white ───────────────────────
   Figma: fontFamily Playfair Display Medium, fontSize 56px
   ──────────────────────────────────────────────────────────── */
.cf-s4-title {
  font-family: 'Playfair Display', var(--serif, serif);
  font-size: 56px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.14;
  margin-bottom: 20px;
  letter-spacing: 0;
}

/* ── Step 4 desc: Montserrat 24px white ──────────────────────
   Figma: fontFamily Montserrat Regular, fontSize 24px
   ──────────────────────────────────────────────────────────── */
.cf-s4-desc {
  font-family: 'Montserrat', var(--sans, sans-serif);
  font-size: 24px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.4;
  margin-bottom: 40px;
  max-width: 728px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Step 1 nav — тільки Next, вирівняти по центру ───────────
   Скріни показують Next по центру (не флекс-енд)
   ──────────────────────────────────────────────────────────── */
.cf-step-nav[data-nav-step="1"] {
  justify-content: center !important;
}

/* ── Step 2, 3 nav — Back ліво, Next/Submit право ───────────── */
.cf-step-nav[data-nav-step="2"],
.cf-step-nav[data-nav-step="3"],
.cf-step3-right .cf-step-nav {
  justify-content: space-between;
}

/* ── Dots — завжди по центру ─────────────────────────────────── */
.cf-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  width: 100%;
}

/* ── Step 3 split layout ─────────────────────────────────────
   Figma: ліво 720px біле, право 720px #214033
   Займає повну ширину блоку (виходить за .contact-block__inner)
   ──────────────────────────────────────────────────────────── */
.cf-step[data-step="3"] {
/*  display: grid !important;*/
  grid-template-columns: 1fr 1fr;
  min-height: 860px;
  /* Виходимо за межі .contact-block__inner (max-width: 600px) */
  position: relative;
/*  left: 50%;*/
/*  right: 50%;*/
/*  margin-left: -50vw;*/
/*  margin-right: -50vw;*/
  width: 100vw;
}

/* ── Step 3 left: біла панель ────────────────────────────────── */
.cf-step3-left {
  background: #ffffff;
  overflow: hidden;
  position: relative;
}

/* ── Image background (PHP inject inline style) ───────────────
   id="cf1Step3Bg" — фото через background-image
   ──────────────────────────────────────────────────────────── */
.cf-step3-img-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* ── Caption поверх фото (якщо є) ───────────────────────────── */
.cf-step3-caption {
/*  position: absolute;*/
/*  top: 56px;         */
/*  left: 40px;*/
/*  right: 40px;*/
  z-index: 2;
  background: #ffffff;
  padding-bottom: 24px;
}

.cf-step3-caption-title {
  font-family: 'Playfair Display', var(--serif, serif);
  font-size: 24px;         /* Figma: 24px */
  font-weight: 500;
  color: #222222;
  line-height: 1.33;
  margin-bottom: 8px;
}

.cf-step3-caption-desc {
  font-family: 'Montserrat', var(--sans, sans-serif);
  font-size: 13px;         /* Figma: 13px */
  color: #222222;
  line-height: 1.6;
  margin-bottom: 16px;
}

.cf-step3-caption-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Montserrat', var(--sans, sans-serif);
  font-size: 16px;         /* Figma: 16px Medium */
  font-weight: 500;
  color: #222222;
  text-decoration: none;
}
.cf-step3-caption-link:hover { opacity: 0.7; }

/* ── Step 3 right: dark panel ────────────────────────────────── */
.cf-step3-right {
 
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px;
  overflow-y: auto;
}

/* Header в правій панелі Step 3 */
.cf-step3-right .contact-eyebrow {
  text-align: center;
  margin-bottom: 8px;
}

.cf-step3-right .contact-title {
  font-size: 32px !important;   /* Figma: 32px (не 56px як на steps 1&2) */
  text-align: center;
  margin-bottom: 24px !important;
  line-height: 1.33 !important;
}

/* ── Measure row: 3 колонки ──────────────────────────────────── */
/*.cf-measure-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}*/

/* Label всередині measure-row — flexbox для label+input */
.cf-measure-row label {
  display: flex;
  flex-direction: column;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  gap: 4px;
}

/* ── CF7 labels в .cf-step (через <label> в CF7 template) ──────
   CF7 template тепер використовує: <label>Текст [field ...]</label>
   Треба стилізувати label як flex-column
   ──────────────────────────────────────────────────────────── */
/*.cf-step > p > label,
.cf-step label:not(.wpcf7-list-item label) {
  display: flex;
  flex-direction: column;
  color: #ffffff;
  font-family: 'Montserrat', var(--sans, sans-serif);
  font-size: 16px;
  font-weight: 400;
  gap: 4px;
  margin-bottom: 24px;
}*/

/* ── Поля в .cf-step (inputs/selects/textarea) ───────────────── */
.cf-step input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
.cf-step select,
.cf-step textarea {
  display: block;
  width: 100%;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-family: 'Montserrat', var(--sans, sans-serif);
  font-size: 16px;
  color: #222222;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.18s ease;
  margin-top: 4px;
}

.cf-step input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
.cf-step select {
  height: 48px;
  padding: 0 16px 0 24px;
}

.cf-step select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23888' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;
  cursor: pointer;
}

.cf-step textarea {
  height: 160px;
  min-height: 160px;
  padding: 14px 24px;
  resize: vertical;
  line-height: 1.6;
}

.cf-step input::placeholder,
.cf-step textarea::placeholder { color: #999999; }
.cf-step input:focus,
.cf-step select:focus,
.cf-step textarea:focus { border-color: #222222; }

/* ── Checkbox ────────────────────────────────────────────────── */
.cf-step .wpcf7-acceptance,
.cf-step .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}
.cf-step .wpcf7-list-item input[type=checkbox] {
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !important;
  border: 1px solid #e6e6e6 !important;
  background: #ffffff !important;
  accent-color: #fe9c29;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}
.cf-step .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: 16px;
  color: #ffffff;
  line-height: 1.5;
}
.cf-step .wpcf7-acceptance a { color: #fff; text-decoration: underline; }

/* ── CF7 validation ──────────────────────────────────────────── */
.cf-step .wpcf7-not-valid { border-color: #e05252 !important; }
.cf-step .wpcf7-not-valid-tip {
  font-size: 11px; color: #e05252; display: block; margin-top: 4px;
}
.cf-step input.cf7-invalid,
.cf-step select.cf7-invalid,
.cf-step textarea.cf7-invalid {
  border-color: #e05252 !important;
}

/* ── br теги від CF7 — ховаємо ───────────────────────────────── */
.cf-step br { display: none; }



/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cf-step[data-step="3"] {
    grid-template-columns: 1fr;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
  }
  .cf-step3-left { min-height: 300px; }
  .cf-step3-right { padding: 40px 24px; }
}

@media (max-width: 640px) {
  .cf-measure-row { grid-template-columns: 1fr; }
  .cf-s4-title { font-size: 36px; }
  .cf-s4-desc { font-size: 18px; }
}

 










/* ============================================================
   CF7 INLINE FIELDS — v2 architecture
   Fields live in .cf-step[data-step] > p (CF7 default markup)
   ============================================================ */

/* CF7 p tags inside cf-step — act as field wrappers */
.cf-step p {
  margin: 0 0 24px !important;   /* gap between fields */
  padding: 0 !important;
  display: block;
}

/* br tags inside CF7 form — hide them */
.cf-step br { display: none; }

/* All inputs inside .cf-step */
.cf-step input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
.wpcf7-form .cf-step input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]) {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px 0 24px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: #222222;
  outline: none;
  transition: border-color var(--t-fast);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.cf-step input::placeholder,
.wpcf7-form .cf-step input::placeholder {
  color: #999999;
}

.cf-step input:focus,
.wpcf7-form .cf-step input:focus {
  border-color: #222222;
}

/* Selects inside .cf-step */
.cf-step select,
.wpcf7-form .cf-step select {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 40px 0 24px;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23888' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 20px no-repeat;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t-fast);
  box-sizing: border-box;
}

.cf-step select option { background: #ffffff; color: #222222; }
.cf-step select:focus { border-color: #222222; }

/* Textarea inside .cf-step */
.cf-step textarea,
.wpcf7-form .cf-step textarea {
  display: block;
  width: 100%;
  height: 160px;
  min-height: 160px;
  padding: 14px 24px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: #222222;
  outline: none;
  resize: vertical;
  line-height: 1.6;
  transition: border-color var(--t-fast);
  box-sizing: border-box;
}

.cf-step textarea::placeholder { color: #999999; }
.cf-step textarea:focus { border-color: #222222; }

/* Checkbox inside .cf-step */
.cf-step .wpcf7-acceptance,
.cf-step .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cf-step .wpcf7-list-item input[type=checkbox] {
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !important;
  border: 1px solid #e6e6e6 !important;
  background: #ffffff !important;
  accent-color: #fe9c29;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 0;
}

.cf-step .wpcf7-acceptance .wpcf7-list-item-label,
.cf-step .wpcf7-acceptance label {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.5;
}

.cf-step .wpcf7-acceptance a {
  color: #ffffff;
  text-decoration: underline;
}

/* Validation errors */
.cf-step .wpcf7-not-valid {
  border-color: #e05252 !important;
}

.cf-step .wpcf7-not-valid-tip {
  font-size: 11px;
  color: #e05252;
  margin-top: 4px;
  display: block;
}

.cf-step input.cf7-invalid,
.cf-step select.cf7-invalid,
.cf-step textarea.cf7-invalid {
  border-color: #e05252 !important;
  animation: cf7-shake 0.28s ease;
}

/* 3-col measurement row for Step 3 */
.cf-step[data-step="3"] .wpcf7-form-control-wrap[data-name="s3-length"],
.cf-step[data-step="3"] .wpcf7-form-control-wrap[data-name="s3-width"],
.cf-step[data-step="3"] .wpcf7-form-control-wrap[data-name="s3-height"] {
  display: block;
}

/* Nav row inside cf-multistep-wrap (outside CF7) */
/*.cf-step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  margin-bottom: 20px;
}*/

/* Step 1 nav — only Next, align right */
.cf-step-nav[data-nav-step="1"] {
/*  justify-content: flex-end;*/
}

/* Hide CF7 response output and spinner */
.wpcf7-form .wpcf7-response-output { display: none !important; }
.wpcf7-spinner { display: none !important; }

/* Step 3 measurement fields — auto 3-column layout */
/* CF7 renders: <p>s3-length</p><p>s3-width</p><p>s3-height</p><p>s3-message</p> */
/* We use CSS grid on the step itself and limit to first 3 p tags */
/*.cf-step[data-step="3"] {
  display: block;
}*/

/* Wrap the first 3 measurement p tags in a grid via JS — OR use CSS :nth-child */
/* Simpler: target by data-name on the wraps */
/*.cf-step[data-step="3"] p:has([data-name="s3-length"]),
.cf-step[data-step="3"] p:has([data-name="s3-width"]),
.cf-step[data-step="3"] p:has([data-name="s3-height"]) {
  display: inline-block;
  width: calc(33.333% - 8px);
  vertical-align: top;
  margin-right: 8px;
  margin-bottom: 24px !important;
}*/

/*.cf-step[data-step="3"] p:has([data-name="s3-height"]) {
  margin-right: 0;
}*/

/* Fallback: grid on the p that wraps all 3 (if CF7 puts them in one p) */

/* ================================================================
   CONTACT FORM — ФІНАЛЬНА ВЕРСІЯ CSS
   Архітектура: CF7 inline, .cf-step[data-step], split layout в CF7
   ================================================================ */

/* ── CF7 wpcf7-form — скидаємо зайві відступи ─────────────────── */
.cf-multistep-wrap .wpcf7-form {
  margin: 0;
  padding: 0;
}

/* Ховаємо native CF7 submit і response output */
.cf-multistep-wrap .wpcf7-submit { display: none !important; }
.cf-multistep-wrap .wpcf7-response-output { display: none !important; }
.wpcf7-spinner { display: none !important; }

/* ── CF7 <p> всередині .cf-step — кожне поле в p ───────────────── */
.cf-step > p {
  margin: 0 0 24px !important;
  padding: 0 !important;
}
.cf-step > p:last-child { margin-bottom: 0 !important; }
.cf-step br { display: none; }

/* ── Всі inputs в .cf-step ────────────────────────────────────── */
.cf-step input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]) {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px 0 24px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 16px;
  color: #222222;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.18s ease;
}
.cf-step input::placeholder { color: #999999; }
.cf-step input:focus { border-color: #222222; }

/* ── Selects в .cf-step ──────────────────────────────────────── */
.cf-step select {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 40px 0 24px;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23888' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 20px no-repeat;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 16px;
  color: #333333;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  transition: border-color 0.18s ease;
}
.cf-step select:focus { border-color: #222222; }
.cf-step select option { background: #fff; color: #222; }

/* ── Textarea в .cf-step ─────────────────────────────────────── */
.cf-step textarea {
  display: block;
  width: 100%;
  height: 160px;
  min-height: 160px;
  padding: 14px 24px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 16px;
  color: #222222;
  outline: none;
  resize: vertical;
  line-height: 1.6;
  box-sizing: border-box;
  transition: border-color 0.18s ease;
}
.cf-step textarea::placeholder { color: #999999; }
.cf-step textarea:focus { border-color: #222222; }

/* ── Checkbox в .cf-step ─────────────────────────────────────── */
.cf-step .wpcf7-acceptance,
.cf-step .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cf-step .wpcf7-list-item input[type=checkbox] {
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !important;
  border: 1px solid #e6e6e6 !important;
  background: #ffffff !important;
  accent-color: #fe9c29;
  flex-shrink: 0;
  margin-top: 0;
  cursor: pointer;
}
.cf-step .wpcf7-acceptance .wpcf7-list-item-label {
  font-family: var(--sans);
  font-size: 16px;
  color: #ffffff;
  line-height: 1.5;
}
.cf-step .wpcf7-acceptance a { color: #fff; text-decoration: underline; }

/* ── Validation ──────────────────────────────────────────────── */
.cf-step .wpcf7-not-valid { border-color: #e05252 !important; }
.cf-step .wpcf7-not-valid-tip { font-size: 11px; color: #e05252; display: block; margin-top: 4px; }
.cf-step input.cf7-invalid,
.cf-step select.cf7-invalid,
.cf-step textarea.cf7-invalid {
  border-color: #e05252 !important;
  animation: cf7-shake 0.28s ease;
}

/* ── Navigation (поза CF7, in .cf-multistep-wrap) ────────────── */
.cf-step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 8px;
}
/*.cf-step-nav[data-nav-step="1"] { justify-content: flex-end; }*/

/* ── Step 4 screens ──────────────────────────────────────────── */
.cf-thankyou,
.cf-error-msg {
  padding: 80px 24px;
  text-align: center;
  display: none;
  flex-direction: column;
  align-items: center;
  min-height: 500px;
  justify-content: center;
}
.cf-thankyou:not(.cf-step--hidden),
.cf-error-msg:not(.cf-step--hidden) {
  display: flex !important;
}

/* Step 4 icon: 48px circle border #fe9c29 */
.cf-s4-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid #fe9c29;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
}

/* Step 4 title: Playfair 56px white */
.cf-s4-title {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.14;
  margin-bottom: 20px;
}

/* Step 4 desc: Montserrat 24px white */
.cf-s4-desc {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.4;
  margin-bottom: 40px;
  max-width: 728px;
  margin-left: auto;
  margin-right: auto;
}

/* ── STEP 3 SPLIT LAYOUT ─────────────────────────────────────── */
/* .cf-step[data-step="3"] займає повну ширину блоку */
.cf-step[data-step="3"] {
  display: grid  ;           /* override display:block від cf-step */
  grid-template-columns: 1fr 1fr;     /* 50/50 */
  min-height: 860px;
  width: 100%;
  /* Треба вийти за межі .contact-block__inner (max-width: 600px) */
  margin-left: calc(-50vw + 300px);
  width: 100vw;
}

/* Якщо блок вже full-width (не в центрованій колонці) — скасувати margin */
.contact-block .cf-step[data-step="3"] {
  margin-left: 0;
  width: 100%;
  max-width: 100vw;
}

/* ── Left: біла панель — caption top + image bottom ─────────── */
.cf-step3-left {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Image via CSS background (PHP inject inline <style>) */
.cf-step3-img-bg {
  flex: 1;
  background-size: cover;
  background-position: center;
  min-height: 400px;
}

/* Caption (якщо є — додаєш напряму в CF7 template) */
.cf-step3-caption {
  flex-shrink: 0;
  padding: 56px 40px 24px;
  background: #ffffff;
  order: -1;    /* caption ПЕРЕД image */
}
.cf-step3-caption-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  color: #222222;
  line-height: 1.33;
  margin-bottom: 8px;
}
.cf-step3-caption-desc {
  font-family: var(--sans);
  font-size: 13px;
  color: #222222;
  line-height: 1.6;
  margin-bottom: 16px;
}
.cf-step3-caption-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: #222222;
  text-decoration: none;
}
.cf-step3-caption-link:hover { opacity: 0.7; }

/* ── Right: форма (bg #214033) ───────────────────────────────── */
.cf-step3-right {
/*  background: #214033;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px;
  overflow-y: auto;
}

/* Заголовок в правій панелі — Playfair 32px */
.cf-step3-title {
  font-size: 32px !important;
  text-align: center;
  margin-bottom: 24px !important;
}

/* 3-col measurement row */
.cf-measure-row p {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.cf-measure-row > p { margin: 0 !important; }
.cf-measure-row .wpcf7-form-control-wrap { display: block; width: 100%; }

/* Nav в step3-right */
.cf-step3-right .cf-step-nav { width: 100%; }
.cf-step3-right .cf-step-nav > p{
  justify-content: space-between; display: flex;
  margin-top: 24px;
  width: 100%;
}
.cf-step3-right .cf-dots > p{
  justify-content: center;  display: flex;
  width: 100%;
  margin-top: 16px;
  gap: 8px;
}

/* ── Dots ────────────────────────────────────────────────────── */
.cf-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
  min-width: 100%;
}
.cf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cccccc;
  transition: background 0.18s ease;
  display: inline-block;
}
.cf-dot.active { background: #fe9c29; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cf-step[data-step="3"] { grid-template-columns: 1fr; }
  .cf-step3-left { min-height: 300px; }
  .cf-step3-right { padding: 40px 24px; }
}
@media (max-width: 640px) {
  .cf-measure-row { grid-template-columns: 1fr; }
  .cf-s4-title { font-size: 36px; }
  .cf-s4-desc { font-size: 18px; }
}




.tt-404-hero {
    flex: 1;
    background: #214033;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 80px 0 64px;
}
.tt-404-hero:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat;
    background-image: url('../images/bg-clip-mission.png');
    width: 100%;
    height: 100%;
}



.info-card-popup { display: none; }
.info-card-popup.is-visible { display: block; }

button.cya11y-menu-btn{background: var(--forest)  !important;
        box-shadow: none  !important; }
        
button.cky-btn-accept{
    background-color:  var(--forest) !important;
    border-color: var(--forest) !important;
}
button.cky-btn-reject, button.cky-btn-customize, button.cky-btn-preferences{
    color:  var(--forest) !important;
    border-color: var(--forest) !important;
}

.cky-btn-revisit-wrapper{   background-color:  var(--forest) !important; }