/* ===== EVAWAY — Premium EVA mats for car & home =====
   Palette
   --navy:    #002366  primary
   --orange:  #E65100  accent
   --grey:    #808080  technical neutral
   --ink:     #1A1A1A  text
   --bg:      #FFFFFF
   --bg-soft: #F8F9FA
   --hair:    #E5E5E5
   --hair-2:  #D0D0D0
*/

:root {
  --navy: #002366;
  --navy-700: #001a4d;
  --navy-50: #eef2fb;
  --orange: #E65100;
  --orange-600: #c84600;
  --orange-50: #fff2e8;
  --grey: #808080;
  --grey-600: #5e5e5e;
  --ink: #1A1A1A;
  --bg: #FFFFFF;
  --bg-soft: #F8F9FA;
  --hair: #E5E5E5;
  --hair-2: #D0D0D0;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(0, 35, 102, 0.05), 0 1px 1px rgba(0,0,0,0.03);
  --shadow: 0 12px 32px -12px rgba(0, 35, 102, 0.18), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 30px 60px -20px rgba(0, 35, 102, 0.22);

  --container: 1280px;
  --gutter: 32px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "Inter Tight", "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Cyrillic", sans-serif;
  font-feature-settings: "ss01", "cv11";
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sticky-footer scaffold: short pages (e.g. /mahazyn/ with 0 products,
   * empty cart, 404) used to leave a tall white strip below content
   * because the footer sat at content-end height. Stretch main vertically
   * so footer hugs the viewport bottom whenever content is shorter. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* page.php / front-page.php / custom templates render multiple sibling
 * <section>s as body direct children (hero / page-body / page-end ...)
 * instead of a single wrapper, so flex:1 on a known wrapper doesn't
 * apply. Use auto margin on the footer to claim all remaining vertical
 * space — works regardless of how many sections sit above. */
body > .site-footer,
body > footer,
body > .footer-widgets,
body footer.site-footer {
  margin-top: auto;
  flex-shrink: 0;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }

/* Form elements — base reset (Astra's normalize is no longer loaded). */
input, select, textarea {
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 10px 14px;
  outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0, 35, 102, 0.12);
}
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px;
  padding: 0; border-width: 1.5px;
  vertical-align: middle;
  cursor: pointer;
  accent-color: var(--orange);
}
select { cursor: pointer; }
label { cursor: pointer; }
fieldset { border: none; padding: 0; margin: 0; }
hr { border: none; border-top: 1px solid var(--hair); margin: 24px 0; }
ul, ol { padding-left: 1.25em; }
table { border-collapse: collapse; width: 100%; }

/* Display type — geometric, premium, supports Ukrainian */
.display, h1, h2, h3 {
  font-family: "Manrope", "Inter Tight", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.05;
  margin: 0;
}

h1 { font-size: clamp(40px, 5.6vw, 76px); letter-spacing: -0.035em; }
h2 { font-size: clamp(32px, 3.6vw, 52px); letter-spacing: -0.025em; }
h3 { font-size: clamp(20px, 1.6vw, 24px); letter-spacing: -0.015em; }

p  { margin: 0; color: #2b2b2b; }
.lede { color: var(--grey-600); font-size: clamp(16px, 1.1vw, 18px); line-height: 1.55; max-width: 56ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange);
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--orange);
}
.eyebrow.navy { color: var(--navy); }
.eyebrow.navy::before { background: var(--navy); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ===================== HEADER ===================== */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hair);
}
.utility-bar {
  background: var(--navy);
  color: #cdd5e8;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.utility-bar .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px;
}
.utility-bar .ut-left { display: flex; gap: 22px; }
.utility-bar .ut-left span { display: inline-flex; align-items: center; gap: 8px; }
.utility-bar .ut-right { display: flex; gap: 16px; }
.utility-bar .ut-right a:hover { color: #fff; }
.utility-bar .lang { color: #fff; font-weight: 600; }

.header-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 36px;
  height: 84px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 38px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; justify-self: center; }
.nav a {
  position: relative;
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 8px;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav a:hover { color: var(--navy); background: var(--navy-50); }
.nav a.has-sub::after {
  content: ""; display: inline-block; margin-left: 6px;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .6;
}

.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--ink);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.icon-btn:hover { background: var(--navy-50); color: var(--navy); }
.icon-btn .badge {
  position: absolute; transform: translate(12px, -10px);
  background: var(--orange); color: #fff; font-size: 10px;
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 22px;
  border-radius: 999px;
  font-weight: 600; font-size: 14.5px; letter-spacing: 0.005em;
  transition: transform .18s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap;
}
.btn .arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  transition: transform .25s var(--ease);
}
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary {
  background: var(--orange); color: #fff;
  box-shadow: 0 8px 22px -10px rgba(230, 81, 0, 0.65);
}
.btn-primary:hover { background: var(--orange-600); transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(230, 81, 0, 0.7); }
.btn-secondary {
  background: var(--navy); color: #fff;
  box-shadow: 0 8px 22px -12px rgba(0, 35, 102, 0.6);
}
.btn-secondary:hover { background: var(--navy-700); transform: translateY(-1px); }
.btn-ghost {
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--hair-2);
}
.btn-ghost:hover { border-color: var(--navy); background: var(--navy-50); }
.btn-lg { height: 56px; padding: 0 28px; font-size: 15.5px; }

.menu-toggle { display: none; }

/* ===================== HERO ===================== */
.hero {
  position: relative; overflow: hidden;
  background: var(--bg-soft);
  padding: 64px 0 0;
}
.hero::before {
  /* subtle Ukrainian rushnyk-inspired geometric pattern in the background */
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23002366' stroke-width='0.6' opacity='0.07'><path d='M40 4 L60 24 L40 44 L20 24 Z'/><path d='M40 36 L60 56 L40 76 L20 56 Z'/><path d='M0 24 L20 24 M60 24 L80 24 M0 56 L20 56 M60 56 L80 56'/></g></svg>");
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.2) 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.2) 70%, transparent);
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 32px 0 80px;
}
.hero-copy { max-width: 620px; min-width: 0; }
.hero-meta { flex-wrap: wrap; }
.hero h1 { margin: 14px 0 22px; }
.hero h1 .accent { color: var(--orange); }
.hero h1 .nb { white-space: nowrap; }
.hero-sub {
  font-size: clamp(18px, 1.4vw, 22px);
  color: var(--grey-600);
  max-width: 32ch;
  line-height: 1.45;
}
.hero-cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero-meta {
  display: flex; gap: 36px; margin-top: 44px;
  padding-top: 28px; border-top: 1px solid var(--hair);
}
.hero-meta .stat .num { font-family: "Manrope", sans-serif; font-size: 28px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
.hero-meta .stat .lbl { font-size: 12.5px; color: var(--grey-600); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }

.hero-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #1a2340 0%, #2a3760 60%, #14213d 100%);
  box-shadow: var(--shadow-lg);
}
.hero-visual img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.4s var(--ease);
}
.hero-visual:hover img { transform: scale(1.06); }
.hero-visual.placeholder::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.07) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.07) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.07) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.07) 75%);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
}
.hero-visual.placeholder::after {
  content: "";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 2px 24px rgba(0,0,0,0.3);
}

.hero-tag {
  position: absolute; left: 24px; bottom: 24px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  padding: 14px 18px;
  border-radius: var(--radius);
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow);
}
.hero-tag .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(230,81,0,0.18); }
.hero-tag .t { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.hero-tag .s { font-size: 11.5px; color: var(--grey-600); margin-top: 1px; }

.hero-badge {
  position: absolute; right: 20px; top: 24px;
  background: var(--navy); color: #fff;
  padding: 12px 16px; border-radius: var(--radius);
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow);
}
.hero-badge svg { color: var(--orange); }
.hero-badge .t { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.hero-badge .s { font-size: 11px; opacity: .8; }

/* trust bar */
.trustbar {
  border-top: 1px solid var(--hair);
  background: #fff;
  padding: 26px 0;
}
.trustbar-row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 36px;
}
.trust-rating { display: flex; align-items: center; gap: 12px; }
.trust-rating .stars { color: var(--orange); letter-spacing: 2px; font-size: 18px; }
.trust-rating .score { font-weight: 700; color: var(--navy); font-size: 17px; }
.trust-rating .meta { color: var(--grey-600); font-size: 13px; }
.trust-icons {
  display: flex; justify-content: center; gap: 36px; flex-wrap: wrap;
  font-size: 13px; color: var(--grey-600); font-weight: 500;
}
.trust-icons span { display: inline-flex; align-items: center; gap: 8px; }
.trust-icons svg { color: var(--navy); }
.trust-pay { display: flex; gap: 8px; align-items: center; }
.trust-pay .pay {
  height: 26px; padding: 0 10px; border: 1px solid var(--hair); border-radius: 6px;
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--grey-600);
}

/* ===================== SECTION SCAFFOLD ===================== */
section { position: relative; }
.section { padding: 120px 0; }
.section-header { display: flex; flex-direction: column; gap: 14px; margin-bottom: 56px; max-width: 720px; }
.section-header.center { margin-left: auto; margin-right: auto; align-items: center; text-align: center; }
.section-header .lede { font-size: clamp(15px, 1.05vw, 17px); }

/* ===================== CATEGORIES ===================== */
.categories {
  background: var(--bg);
}
.cat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.cat-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 5/6;
  isolation: isolate;
  background: var(--navy);
}
.cat-card .cover {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.cat-card:hover .cover { transform: scale(1.05); }
.cat-card .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,35,102,0.55) 75%, rgba(0,35,102,0.85));
}
.cat-card.car .scrim { background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,35,102,0.55) 75%, rgba(0,35,102,0.92)); }
.cat-card.home .scrim { background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(26,26,26,0.45) 75%, rgba(26,26,26,0.85)); }

.cat-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 32px 36px; color: #fff;
}
.cat-tag {
  align-self: flex-start;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  padding: 7px 14px; border-radius: 999px;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
}
.cat-tag { background: var(--orange); }
.cat-bottom h3 {
  color: #fff;
  font-size: clamp(28px, 2.6vw, 38px);
  margin-bottom: 8px;
}
.cat-bottom p { color: rgba(255,255,255,0.85); font-size: 15px; max-width: 36ch; }
.cat-cta {
  margin-top: 20px;
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 14.5px; color: #fff;
}
.cat-cta .circle {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.16); backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease), transform .25s var(--ease);
}
.cat-cta .circle { background: var(--orange); }
.cat-card:hover .cat-cta .circle { transform: translateX(4px); background: var(--orange); }

/* ===================== WHY ===================== */
.why {
  background: var(--bg-soft);
}
.why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--hair); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--hair);
}
.feat {
  background: #fff;
  padding: 36px 32px 40px;
  display: flex; flex-direction: column; gap: 18px;
  transition: background .25s var(--ease);
}
.feat:hover { background: #fff; }
.feat:hover .feat-icon { color: var(--orange); border-color: var(--orange); }
.feat-icon {
  width: 56px; height: 56px; border-radius: 14px;
  border: 1.5px solid var(--hair-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--navy);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.feat h3 { font-size: 19px; }
.feat p { color: var(--grey-600); font-size: 14.5px; line-height: 1.55; }
.feat-num { font-size: 12px; color: var(--grey); font-weight: 700; letter-spacing: 0.18em; }

/* ===================== CONFIGURATOR ===================== */
.configurator {
  background: var(--bg);
}
.config-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #001a4d 0%, #002366 60%, #003088 100%);
  overflow: hidden;
  color: #fff;
  padding: 72px 64px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center;
}
.config-card::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23ffffff' stroke-width='0.7' opacity='0.05'><path d='M50 5 L75 30 L50 55 L25 30 Z'/><path d='M50 45 L75 70 L50 95 L25 70 Z'/></g></svg>");
  background-size: 100px 100px;
  pointer-events: none;
}
.config-card::after {
  content: "";
  position: absolute; right: -200px; top: -200px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(230,81,0,0.5) 0%, rgba(230,81,0,0) 60%);
  pointer-events: none;
}

.config-text { position: relative; z-index: 2; }
.config-text .eyebrow { color: #ff8a3d; }
.config-text .eyebrow::before { background: #ff8a3d; }
.config-text h2 { color: #fff; margin: 14px 0 18px; }
.config-text p { color: rgba(255,255,255,0.78); font-size: 17px; line-height: 1.55; max-width: 50ch; }

.config-steps {
  display: flex; gap: 28px; margin-top: 32px;
}
.config-step .num {
  font-family: "Manrope"; font-weight: 700; font-size: 22px; color: var(--orange);
  margin-bottom: 6px;
}
.config-step .lbl { font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 500; }

.config-cta { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; }
.config-cta .btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }

.config-form {
  position: relative; z-index: 2;
  background: #fff;
  border-radius: var(--radius);
  padding: 24px;
  color: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.45);
}
.config-form .form-title {
  font-size: 13px; color: var(--grey-600); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 14px;
}
.field {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; border: 1px solid var(--hair); border-radius: 10px;
  margin-bottom: 10px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.field:hover { border-color: var(--navy); }
.field .label { font-size: 11.5px; color: var(--grey-600); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }
.field .val { font-size: 15px; font-weight: 600; color: var(--navy); display: flex; justify-content: space-between; align-items: center; }
.field .val .chev {
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--grey); border-bottom: 1.5px solid var(--grey);
  transform: rotate(45deg);
}
.field.empty .val { color: var(--grey); font-weight: 500; }
.config-form .btn { width: 100%; justify-content: center; margin-top: 8px; }
.config-form .meta {
  margin-top: 14px; font-size: 12px; color: var(--grey-600); text-align: center;
}

/* ===================== GALLERY ===================== */
.gallery {
  background: var(--bg-soft);
}
.gal-tabs {
  display: flex; gap: 8px; margin-bottom: 36px; flex-wrap: wrap;
}
.gal-tab {
  padding: 10px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--grey-600);
  background: #fff; border: 1px solid var(--hair);
  transition: all .18s var(--ease);
}
.gal-tab:hover { color: var(--navy); border-color: var(--navy); }
.gal-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.gal-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px;
  grid-auto-rows: 220px;
}
.gal-item {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--hair);
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gal-item:hover img { transform: scale(1.06); }
.gal-item .meta {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  display: flex; align-items: flex-end; justify-content: space-between;
  color: #fff;
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.gal-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
  opacity: 0; transition: opacity .25s var(--ease);
}
.gal-item:hover::after { opacity: 1; }
.gal-item:hover .meta { opacity: 1; transform: translateY(0); }
.gal-item .meta .t { font-weight: 600; font-size: 14.5px; }
.gal-item .meta .price { font-size: 12.5px; opacity: 0.9; }
.gal-item .badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--orange); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 6px;
}

.gal-a { grid-column: span 5; grid-row: span 2; }
.gal-b { grid-column: span 4; grid-row: span 1; }
.gal-c { grid-column: span 3; grid-row: span 1; }
.gal-d { grid-column: span 4; grid-row: span 1; }
.gal-e { grid-column: span 3; grid-row: span 1; }
.gal-f { grid-column: span 4; grid-row: span 1; }
.gal-g { grid-column: span 4; grid-row: span 1; }
.gal-h { grid-column: span 4; grid-row: span 1; }

/* ===================== TESTIMONIALS / REVIEWS ===================== */
.reviews {
  background: var(--bg);
}
.review-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.review {
  border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 28px; background: #fff;
  display: flex; flex-direction: column; gap: 16px;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.review:hover { border-color: var(--navy); transform: translateY(-4px); }
.review .stars { color: var(--orange); letter-spacing: 2px; font-size: 16px; }
.review .quote { color: var(--ink); font-size: 16px; line-height: 1.6; }
.review .who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hair); }
.review .av {
  width: 40px; height: 40px; border-radius: 50%; background: var(--navy-50);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--navy); font-size: 14px;
}
.review .who .n { font-weight: 600; font-size: 14px; color: var(--ink); }
.review .who .c { font-size: 12.5px; color: var(--grey-600); }

/* ===================== MATERIAL / CTA ===================== */
.material {
  background: var(--bg-soft);
}
.material-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.material-image {
  position: relative;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--hair);
  box-shadow: var(--shadow-lg);
}
.material-image img { width: 100%; height: 100%; object-fit: cover; }
.material-image .float-spec {
  position: absolute;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
}
.material-image .float-spec .v { font-family: "Manrope"; font-size: 24px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
.material-image .float-spec .l { font-size: 11px; color: var(--grey-600); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; margin-top: 2px; }
.material-image .spec-1 { left: 24px; top: 24px; }
.material-image .spec-2 { right: 24px; top: 50%; transform: translateY(-50%); }
.material-image .spec-3 { left: 24px; bottom: 24px; }

.material-text h2 { margin-bottom: 22px; }
.material-list {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px;
}
.material-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14.5px; color: var(--ink);
}
.material-list .check {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange-50); color: var(--orange);
  display: inline-flex; align-items: center; justify-content: center;
}
.material-text .btn { margin-top: 36px; }

/* ===================== BIG CTA ===================== */
.bigcta {
  background: var(--bg);
  padding: 80px 0 120px;
}
.bigcta-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 80px 64px;
  background: var(--orange);
  color: #fff;
  overflow: hidden;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
}
.bigcta-card::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23ffffff' stroke-width='0.6' opacity='0.18'><path d='M40 4 L60 24 L40 44 L20 24 Z'/></g></svg>");
  background-size: 80px 80px;
}
.bigcta-card h2 { color: #fff; max-width: 18ch; }
.bigcta-card p { color: rgba(255,255,255,0.92); font-size: 17px; max-width: 44ch; margin-top: 16px; }
.bigcta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-self: end; position: relative; }
.bigcta .btn-primary { background: #fff; color: var(--orange); box-shadow: 0 8px 22px -10px rgba(0,0,0,0.25); }
.bigcta .btn-primary:hover { background: #fff; color: var(--orange-600); box-shadow: 0 14px 28px -10px rgba(0,0,0,0.3); }
.bigcta .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
.bigcta .btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* ===================== FOOTER ===================== */
.site-footer {
  background: var(--navy);
  color: #cdd5e8;
  padding: 80px 0 24px;
}
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 56px;
  padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand img { height: 36px; filter: brightness(0) invert(1); margin-bottom: 18px; }
.footer-brand .desc { font-size: 14px; color: rgba(255,255,255,0.7); max-width: 36ch; }
.footer-brand .social {
  display: flex; gap: 10px; margin-top: 22px;
}
.footer-brand .social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.footer-brand .social a:hover { background: var(--orange); border-color: var(--orange); }

.footer-col h4 {
  font-family: "Manrope"; color: #fff; font-size: 14px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col a {
  color: rgba(255,255,255,0.72); font-size: 14px;
  transition: color .18s var(--ease);
}
.footer-col a:hover { color: var(--orange); }

.newsletter {
  margin-top: 8px;
  display: flex; gap: 0;
  border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}
.newsletter input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  padding: 0 18px; height: 46px; color: #fff; font-size: 14px;
}
.newsletter input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter button {
  background: var(--orange); color: #fff;
  padding: 0 22px; font-weight: 600; font-size: 14px; height: 46px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s var(--ease);
}
.newsletter button:hover { background: var(--orange-600); }

.footer-bottom {
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,0.55);
}
.footer-bottom__legal {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.footer-bottom .links { display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.footer-bottom a:hover { color: #fff; }
.footer-bottom__copy { display: flex; flex-direction: column; gap: 4px; }
.footer-bottom .footer-credit {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
}
.footer-bottom .footer-credit a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,0.25);
}
.footer-bottom .footer-credit a:hover {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.6);
}

/* ===================== REVEAL ANIMATIONS ===================== */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: .05s; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .12s; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .19s; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .26s; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .33s; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .40s; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .47s; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .54s; opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  /* With .nav display:none the grid auto-placer drops .header-actions
   * into the 1fr middle track, so its icons render left-aligned within
   * that wide track. Force header-actions to hug the right edge. */
  .header-row { grid-template-columns: auto 1fr auto; }
  .header-actions { justify-self: end; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1.2fr repeat(2, 1fr); gap: 40px; }
  .config-card { padding: 56px 40px; grid-template-columns: 1fr; gap: 40px; }
  .material-grid { gap: 56px; }
}

@media (max-width: 860px) {
  :root { --gutter: 20px; }
  .utility-bar { display: none; }
  .header-row { height: 68px; gap: 12px; }
  .brand img { height: 32px; }
  .header-actions .btn { display: none; }

  .hero { padding-top: 32px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; padding: 16px 0 56px; }
  .hero-visual { aspect-ratio: 4/3; }
  .hero-meta { gap: 24px; }
  .hero-badge { right: 16px; top: 16px; transform: rotate(0); padding: 10px 14px; }
  .hero-badge .s { display: none; }

  .trustbar-row { grid-template-columns: 1fr; gap: 20px; text-align: center; justify-items: center; }
  .trust-icons { justify-content: center; }

  .section { padding: 80px 0; }
  .section-header { margin-bottom: 36px; }

  .cat-grid { grid-template-columns: 1fr; }
  .cat-card { aspect-ratio: 4/5; }
  .cat-content { padding: 24px; }

  .why-grid { grid-template-columns: 1fr; }
  .feat { padding: 28px 24px; }

  .config-card { padding: 40px 24px; }
  .config-card::after { width: 360px; height: 360px; right: -120px; top: -120px; }
  .config-text h2 { font-size: 32px; }
  .config-steps { gap: 20px; flex-wrap: wrap; }

  .gal-grid { grid-auto-rows: 180px; gap: 12px; }
  .gal-a { grid-column: span 12; grid-row: span 2; }
  .gal-b, .gal-c, .gal-d, .gal-e, .gal-f, .gal-g, .gal-h { grid-column: span 6; grid-row: span 1; }

  .review-grid { grid-template-columns: 1fr; }

  .material-grid { grid-template-columns: 1fr; gap: 40px; }
  .material-list { grid-template-columns: 1fr; }

  .bigcta-card { grid-template-columns: 1fr; padding: 48px 32px; }
  .bigcta-actions { justify-self: start; }

  .footer-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; }
  .site-footer { padding: 56px 0 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom__legal { align-items: flex-start; }
  /* Stack the legal links vertically — a single horizontal row at 375px
   * wraps onto a second line awkwardly and the dotted separators read
   * better as a column. */
  .footer-bottom .links { flex-direction: column; gap: 10px; justify-content: flex-start; }
}

/* ============== Generic page (.page-default) prose ============== */
.evaway-prose {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}
.evaway-prose h2 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 32px 0 14px;
  font-weight: 700;
  line-height: 1.2;
}
.evaway-prose h3 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(18px, 1.8vw, 21px);
  color: var(--ink);
  margin: 24px 0 10px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.evaway-prose p { margin: 0 0 14px; color: #2b2b2b; }
.evaway-prose ul, .evaway-prose ol { margin: 0 0 18px 22px; padding: 0; }
.evaway-prose li { margin: 6px 0; }
.evaway-prose b, .evaway-prose strong { color: var(--ink); font-weight: 700; }
.evaway-prose a { color: var(--navy); border-bottom: 1px solid rgba(0, 35, 102, 0.25); transition: border-color .2s var(--ease); }
.evaway-prose a:hover { border-bottom-color: var(--navy); }
.evaway-prose blockquote {
  margin: 24px 0; padding: 18px 22px;
  background: var(--bg-soft);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: #2b2b2b;
}
.evaway-prose hr { border: 0; border-top: 1px solid var(--hair); margin: 32px 0; }
.evaway-prose table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.evaway-prose th, .evaway-prose td { padding: 10px 14px; border-bottom: 1px solid var(--hair); text-align: left; }
.evaway-prose th { background: var(--bg-soft); font-weight: 700; color: var(--navy); }

/* Two-col blocks used by Контакти */
.evaway-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin: 24px 0 8px;
}
.evaway-info-card {
  background: var(--bg-soft);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.evaway-info-card .lbl {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grey-600); font-weight: 600; margin-bottom: 6px;
}
.evaway-info-card .val { font-size: 17px; font-weight: 700; color: var(--navy); }
.evaway-info-card a { border-bottom: none; }

/* ==================== WooCommerce archive (Магазин/Shop) ==================== */
/* .woocommerce, .woocommerce-page { background: var(--bg); } */
body.woocommerce-page #content,
body.woocommerce #content,
body.woocommerce-page .ast-container,
body.woocommerce .ast-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px var(--gutter) 96px;
}
body.woocommerce .woocommerce-products-header,
body.woocommerce-page .woocommerce-products-header {
  margin-bottom: 36px;
}
body.woocommerce .woocommerce-products-header__title,
body.woocommerce-page .woocommerce-products-header__title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(32px, 4vw, 46px);
  color: var(--navy);
  letter-spacing: -0.025em;
  margin: 0;
  font-weight: 700;
}
.woocommerce-result-count, .woocommerce-ordering {
  color: var(--grey-600);
  font-size: 14px;
}
.woocommerce-ordering { float: right; }
.woocommerce-ordering select.orderby,
.woocommerce-ordering select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--hair-2) !important;
  border-radius: 999px !important;
  padding: 10px 38px 10px 18px !important;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23002366' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>") no-repeat right 14px center !important;
  cursor: pointer;
  transition: border-color .2s var(--ease);
  height: auto !important;
  min-width: 200px;
}
.woocommerce-ordering select:hover { border-color: var(--navy) !important; }
.woocommerce-ordering select:focus { outline: none !important; border-color: var(--navy) !important; box-shadow: 0 0 0 3px rgba(0,35,102,0.12) !important; }

/* Product loop — flex column so the CTA always sits at the bottom regardless
   of how long the title runs. */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: 16px 16px 22px;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.woocommerce ul.products li.product > a:first-of-type {
  display: flex; flex-direction: column; gap: 0;
}
.woocommerce ul.products li.product .price { margin-bottom: auto; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.added_to_cart {
  align-self: flex-start;
  margin-top: 14px !important;
}

/* After WC's AJAX add-to-cart succeeds it appends a sibling
   <a class="added_to_cart">Переглянути кошик</a>. Hide the now-redundant
   "Додати в кошик" so only "Переглянути кошик" stays. Uses :has()
   (supported in every modern browser since 2023). */
.woocommerce ul.products li.product:has(a.added_to_cart) a.add_to_cart_button {
  display: none !important;
}
.woocommerce ul.products li.product .button.added,
.woocommerce ul.products li.product .add_to_cart_button.added {
  display: none !important;
}
.woocommerce ul.products li.product a.added_to_cart {
  display: inline-flex !important;
  align-self: flex-start;
  margin-top: 14px;
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  height: 38px; padding: 0 16px;
  align-items: center; gap: 8px;
  font-weight: 600; font-size: 13.5px;
  text-decoration: none;
}
.woocommerce ul.products li.product a.added_to_cart:hover {
  background: var(--orange-600);
}
/* The "Переглянути кошик" link emitted by our gettext/loop filter when the
   item is already in cart on page load — same brand pill. */
.woocommerce ul.products li.product a.evaway-loop-view-cart {
  align-self: flex-start;
  margin-top: 14px;
  background: var(--orange) !important;
  color: #fff !important;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px;
  font-weight: 600; font-size: 13.5px;
  text-decoration: none;
}
.woocommerce ul.products li.product a.evaway-loop-view-cart:hover {
  background: var(--orange-600) !important;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: "Manrope", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 14px 0 8px;
  padding: 0;
}
.woocommerce ul.products li.product .price {
  color: var(--navy);
  font-size: 17px;
  font-weight: 700;
}
.woocommerce ul.products li.product .price ins { background: none; text-decoration: none; }
.woocommerce ul.products li.product img {
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.added_to_cart {
  display: inline-flex;
  align-items: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  margin-top: 10px;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.woocommerce ul.products li.product .button:hover { background: var(--orange-600); transform: translateY(-1px); }

.woocommerce span.onsale {
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
  top: 14px; left: 14px;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-color: var(--hair);
  color: var(--ink);
  padding: 8px 14px;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* Single product page baseline */
body.single-product .ast-container,
body.single-product #content {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px var(--gutter) 96px;
}
body.single-product .product .price {
  color: var(--navy);
  font-size: 26px;
  font-weight: 800;
}
body.single-product .product .summary .button {
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 600;
  border: none;
}
body.single-product .product .summary .button:hover { background: var(--orange-600); }

/* ==================== Related products band (configurator + non-product pages) ==================== */
/* Renders product-card grid identical to WC native related products on /product/<x>/.
   Match WC's look: no full-bleed band, just cards on the page background. */
.evaway-related-footer {
  background: transparent;
  border-top: none;
  padding: 56px 0 80px;
  margin-top: 0;
}
.evaway-related-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.evaway-related-footer h3 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}
.evaway-related-footer ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.evaway-related-footer ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}
.evaway-related-footer ul.products li.product .cat-label {
  display: block;
  font-size: 12px;
  color: var(--grey-600);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
@media (max-width: 980px) {
  .evaway-related-footer ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .evaway-related-footer ul.products { grid-template-columns: 1fr !important; }
}

/* ==================== Page bottom transition (page.php) ==================== */
/* The white card on simple pages used to butt up against the dark footer. Add a soft band. */
body.page:not(.home):not(.page-template-page-home):not(.page-template-page-car-mats):not(.page-template-page-doormats) .section + #colophon,
body.page-default + footer.site-footer,
.page-default + .site-footer { margin-top: 0; }

/* Normalise spacing under our generic page sections */
body.page .section[style*="padding: 56px 0 96px"] { padding-bottom: 120px !important; }

/* ==================== Cookie banner (cookie-notice plugin) ==================== */
/* Plugin only hides the .cookie-notice-container when consent is given; the outer
   #cookie-notice stays as an empty strip (made visible by our border/shadow).
   Hide the whole element when the user has accepted/refused. */
#cookie-notice.cookie-notice-hidden { display: none !important; }
/* Plugin's "×" close icon dismisses the banner WITHOUT persisting consent, so
   it re-appears on reload. Force users through Прийняти / Відмовитись. */
#cookie-notice .cn-close-icon { display: none !important; }
#cookie-notice {
  font-family: "Inter Tight", "Inter", system-ui, sans-serif !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 -10px 30px -10px rgba(0,0,0,0.25) !important;
}
#cookie-notice .cookie-notice-container { padding: 16px var(--gutter) !important; }
#cookie-notice .cn-text-container {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  max-width: 980px;
}
#cookie-notice .cn-text-container a { color: #fff !important; text-decoration: underline; }
#cookie-notice .cn-buttons-container { gap: 8px; }
#cookie-notice .cn-button, #cookie-notice .cn-set-cookie {
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border: none !important;
  transition: background .2s var(--ease), transform .2s var(--ease) !important;
}
#cookie-notice .cn-button:hover { transform: translateY(-1px); }
#cookie-notice .cn-button.bootstrap[data-cookie-set="refuse"],
#cookie-notice .cn-button.cn-button-custom-cookie {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

/* ==================== WooCommerce — Astra wrapper layout fixes ==================== */
/* Astra applies .ast-plain-container directly on <body>, so a descendant selector
   like "body .ast-plain-container" never matches. Use a compound selector instead.
   Site header sits inside body; we add top padding via #primary which holds the
   archive/single content only. */
body.woocommerce-page #primary,
body.woocommerce #primary {
  max-width: var(--container) !important;
  margin: 0 auto !important;
  padding: 64px var(--gutter) 96px !important;
  background: var(--bg);
}
body.woocommerce-page main, body.woocommerce main { padding: 0; }

/* Single product layout — image left, summary right, with breathing room */
body.single-product .product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
body.single-product .product .woocommerce-product-gallery,
body.single-product .product .summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
body.single-product .product > .woocommerce-tabs,
body.single-product .product > .related,
body.single-product .product > .up-sells {
  grid-column: 1 / -1;
}
body.single-product .product .product_title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--navy);
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 16px;
}
body.single-product .product .price {
  color: var(--navy);
  font-size: 28px;
  font-weight: 800;
}
body.single-product .product .summary .button,
body.single-product .product .summary button.single_add_to_cart_button {
  background: var(--orange) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  border: none !important;
  font-size: 15px !important;
}
body.single-product .product .summary .button:hover { background: var(--orange-600) !important; }

/* Tabs */
body.single-product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--hair) !important;
  padding: 0 !important;
  margin: 32px 0 0 !important;
}
body.single-product .woocommerce-tabs ul.tabs::before { display: none; }
body.single-product .woocommerce-tabs ul.tabs li {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.single-product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 14px 0 !important;
  margin-right: 28px !important;
  color: var(--grey-600) !important;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
body.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--navy) !important;
  border-bottom-color: var(--orange);
}
body.single-product .woocommerce-tabs .panel {
  padding: 24px 0 !important;
  font-size: 16px;
  line-height: 1.7;
}

/* Related products on single page */
body.single-product .related h2,
body.single-product .up-sells h2 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-top: 56px;
}

/* Result count + ordering bar */
.woocommerce-result-count, .woocommerce-ordering {
  margin-bottom: 24px !important;
}

/* Breadcrumb */
.woocommerce-breadcrumb {
  font-size: 13px;
  color: var(--grey-600);
  margin-bottom: 12px !important;
}
.woocommerce-breadcrumb a { color: var(--grey-600); }
.woocommerce-breadcrumb a:hover { color: var(--navy); }

/* Mobile single-product stack */
@media (max-width: 880px) {
  body.single-product .product { grid-template-columns: 1fr; gap: 32px; }
}

/* ==================== Branded scroll-to-top ==================== */
/* Hide Astra's and use our own. */
#ast-scroll-top, .ast-scroll-top { display: none !important; }
/* Compound selector with button tag — beats Astra's button rule on specificity. */
button.evaway-scroll-top {
  position: fixed !important;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 44px !important;
  height: 44px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--navy) !important;
  background-color: var(--navy) !important;
  color: #fff !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  box-shadow: 0 12px 28px -8px rgba(0, 35, 102, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .2s var(--ease), visibility .25s;
  font-size: 0;
  line-height: 0;
}
button.evaway-scroll-top svg { width: 18px !important; height: 18px !important; flex-shrink: 0; display: block; }
button.evaway-scroll-top:hover,
button.evaway-scroll-top:focus {
  background: var(--orange) !important;
  background-color: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
  transform: translateY(-2px);
}
button.evaway-scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width: 640px) {
  button.evaway-scroll-top { right: 16px; bottom: 16px; }
  /* Avoid colliding with cookie bar */
  body.cookies-not-set button.evaway-scroll-top { bottom: 80px; }
}

/* ==================== Cart count badge + mini-cart toast ==================== */
.icon-btn .badge.evaway-cart-count.is-empty { display: none; }

.evaway-cart-toast {
  position: fixed;
  right: 22px;
  top: 96px;
  z-index: 95;
  width: 470px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -16px rgba(0, 35, 102, 0.25);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  gap: 6px 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.evaway-cart-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.evaway-cart-toast__icon {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.evaway-cart-toast__body {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}
.evaway-cart-toast__t {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 16px;
}
.evaway-cart-toast__s {
  font-size: 13px;
  color: var(--grey-600);
  margin-top: 4px;
  min-height: 18px;
}
.evaway-cart-toast__cta {
  grid-row: 2 / 3;
  grid-column: 1 / 3;
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.evaway-cart-toast__btn {
  flex: 1;
  text-align: center;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 14px;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
.evaway-cart-toast__btn--primary {
  background: var(--orange);
  color: #fff;
  border: 1px solid var(--orange);
}
.evaway-cart-toast__btn--primary:hover {
  background: var(--orange-600);
  border-color: var(--orange-600);
  transform: translateY(-1px);
}
.evaway-cart-toast__btn--ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--hair-2);
}
.evaway-cart-toast__btn--ghost:hover {
  border-color: var(--navy);
  color: var(--navy);
}

@media (max-width: 640px) {
  .evaway-cart-toast { right: 12px; left: 12px; top: 80px; width: auto; }
}

/* ==================== Cart / Checkout / Account ==================== */
/* WC Cart-block "empty cart" suggestion grid uses .wp-block-button — Astra
   styles those as solid blue. Brand them. */
.wp-block-cart-empty-block__container,
.wp-block-cart-empty-block,
.wc-block-grid {
  font-family: inherit;
}
.wc-block-grid .wc-block-grid__product .wp-block-button__link,
.wp-block-cart-empty-block .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link {
  background: var(--orange) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  border: none !important;
  transition: background .2s var(--ease), transform .2s var(--ease) !important;
}
.wc-block-grid .wc-block-grid__product .wp-block-button__link:hover,
.wp-block-cart-empty-block .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: var(--orange-600) !important;
  transform: translateY(-1px);
}
.wc-block-grid__product-title,
.wc-block-grid__product .wc-block-grid__product-title {
  font-family: "Manrope", sans-serif !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}
.wc-block-grid__product-price .wc-block-grid__product-price__value,
.wc-block-grid__product-price {
  color: var(--navy) !important;
  font-weight: 700 !important;
}

/* Cart page heading */
body.woocommerce-cart .wc-block-cart h1,
body.woocommerce-cart .entry-header h1,
body.woocommerce-cart .wp-block-post-title {
  font-family: "Manrope", sans-serif;
  color: var(--navy);
  letter-spacing: -0.025em;
}

/* Empty cart icon (the sad face) — tone down */
.wc-block-cart__empty-cart__title,
.wp-block-cart-empty-block .wc-block-components-notice-banner {
  color: var(--navy);
}

/* Astra paints add-to-cart buttons solid blue on body.woocommerce-cart and
   body.woocommerce-checkout via highly specific selectors. Compound selector
   keeps the brand orange on those pages too. */
body.woocommerce-cart .evaway-related-footer ul.products li.product a.button,
body.woocommerce-cart .evaway-related-footer ul.products li.product a.add_to_cart_button,
body.woocommerce-checkout .evaway-related-footer ul.products li.product a.button,
body.woocommerce-checkout .evaway-related-footer ul.products li.product a.add_to_cart_button,
body.woocommerce-cart .related.products a.button,
body.woocommerce-checkout .related.products a.button {
  background: var(--orange) !important;
  background-color: var(--orange) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  border: none !important;
  font-weight: 600 !important;
}
body.woocommerce-cart .evaway-related-footer ul.products li.product a.button:hover,
body.woocommerce-checkout .evaway-related-footer ul.products li.product a.button:hover {
  background: var(--orange-600) !important;
  background-color: var(--orange-600) !important;
}

/* Checkout primary action ("Підтвердити замовлення" / #place_order).
   WC defaults to its theme-coloured `.button.alt` — paint it with the
   brand orange pill so it matches every other primary CTA on the site.
   Astra's WC integration uses !important on its color rule, so we
   match that specificity. */
.woocommerce #place_order,
.woocommerce-page #place_order,
.woocommerce button.button.alt,
.woocommerce-page button.button.alt,
.woocommerce a.button.alt,
.woocommerce-page a.button.alt,
.woocommerce input.button.alt,
.woocommerce-page input.button.alt {
  background: var(--orange) !important;
  background-color: var(--orange) !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: none !important;
  height: 48px;
  padding: 0 24px !important;
  font-family: inherit;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 22px -10px rgba(230, 81, 0, 0.65);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  text-shadow: none;
  cursor: pointer;
}
.woocommerce #place_order:hover,
.woocommerce-page #place_order:hover,
.woocommerce button.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page input.button.alt:hover {
  background: var(--orange-600) !important;
  background-color: var(--orange-600) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(230, 81, 0, 0.7);
}
.woocommerce #place_order:focus,
.woocommerce-page #place_order:focus,
.woocommerce button.button.alt:focus,
.woocommerce-page button.button.alt:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.25), 0 8px 22px -10px rgba(230, 81, 0, 0.65);
}
.woocommerce #place_order:disabled,
.woocommerce button.button.alt:disabled {
  background: var(--hair-2, #d4d4d4) !important;
  background-color: var(--hair-2, #d4d4d4) !important;
  color: #fff !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.85;
}

/* ==========================================================================
   Cart-Block & Checkout-Block — brand override (React-rendered components)
   ========================================================================== */

/* The default page.php template wraps content in `.container { max-width: 880px }`
   plus a styled `<article>` card. For cart/checkout we need the full content
   width and a transparent article so the cart-block can render its own cards. */
body.woocommerce-cart .evaway-page-body .container,
body.woocommerce-checkout .evaway-page-body .container {
  max-width: 1200px !important;
}
body.woocommerce-cart .evaway-page-body article,
body.woocommerce-checkout .evaway-page-body article {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
/* Hide the bare hero band behind cart/checkout (we already have a heading
   inside the cart block; the page hero duplicates it). */
body.woocommerce-cart .hero,
body.woocommerce-checkout .hero { padding: 24px 0 0 !important; background: transparent; }
body.woocommerce-cart .evaway-page-body,
body.woocommerce-checkout .evaway-page-body { background: var(--bg-soft) !important; padding: 32px 0 96px !important; }

/* The cart/checkout cards sit in a soft container; widen breathing room */
body.woocommerce-cart .wc-block-cart,
body.woocommerce-checkout .wc-block-checkout {
  font-family: 'Inter Tight', system-ui, sans-serif;
  color: var(--ink);
}

body.woocommerce-cart main .wc-block-cart,
body.woocommerce-checkout main .wc-block-checkout {
  background: var(--bg-soft);
  padding: 40px 0 96px;
}

/* Cart layout: products card + summary card, both white with shadow */
.wc-block-cart .wp-block-woocommerce-cart-items-block,
.wc-block-cart .wp-block-woocommerce-cart-totals-block {
  background: #fff !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--radius-lg) !important;
  padding: clamp(20px, 3vw, 32px) !important;
  box-shadow: var(--shadow);
}

/* Header row of the cart table — ТОВАР · ЗАГАЛОМ */
.wc-block-cart__main .wc-block-cart-items thead th,
.wc-block-cart-items th {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-600) !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--hair) !important;
}

/* Cart line items */
.wc-block-cart-items__row,
.wc-block-cart-items tr.wc-block-cart-items__row {
  border-bottom: 1px solid var(--hair);
}
.wc-block-cart-items td { padding: 18px 0 !important; }
/* Add breathing room between thumbnail and product info */
.wc-block-cart-items td.wc-block-cart-item__image,
.wc-block-cart-item__image {
  padding-right: 20px !important;
  width: 96px;
}
.wc-block-cart-items td.wc-block-cart-item__image img,
.wc-block-cart-item__image img {
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: var(--bg-soft);
}
.wc-block-cart-items td.wc-block-cart-item__product,
.wc-block-cart-item__product { padding-left: 4px !important; }

.wc-block-cart-item__product-name,
.wc-block-cart-item__product-name a {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.wc-block-cart-item__product-name a:hover { color: var(--orange) !important; }

.wc-block-components-product-price__value,
.wc-block-cart-items .wc-block-components-product-metadata,
.wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-cart-item__total .wc-block-components-formatted-money-amount {
  font-weight: 700 !important;
  color: var(--navy) !important;
}

.wc-block-cart-item__product-metadata,
.wc-block-cart-item__short-description {
  font-size: 13px !important;
  color: var(--grey-600) !important;
  margin-top: 2px !important;
}

/* Quantity stepper inside cart row */
.wc-block-components-quantity-selector {
  border: 1.5px solid var(--hair) !important;
  border-radius: 999px !important;
  background: #fff !important;
  height: 40px !important;
  overflow: hidden;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  font-weight: 700 !important;
  color: var(--navy) !important;
  font-size: 14px !important;
  width: 36px !important;
  text-align: center !important;
}
.wc-block-components-quantity-selector__button {
  color: var(--navy) !important;
  background: transparent !important;
  font-weight: 700 !important;
  width: 32px !important;
  height: 38px !important;
  transition: background .15s var(--ease);
}
.wc-block-components-quantity-selector__button:hover {
  background: var(--navy-50) !important;
}

/* Trash/remove icon */
.wc-block-cart-item__remove-link,
button.wc-block-cart-item__remove-link {
  color: var(--grey-600) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: color .15s var(--ease);
}
.wc-block-cart-item__remove-link:hover { color: #dc2626 !important; }

/* Totals card on the right */
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block {
  position: sticky;
  top: 140px;
}
.wc-block-cart__totals-title,
.wc-block-components-totals-wrapper > h2,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block h2 {
  font-family: 'Manrope', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-600) !important;
  border: none !important;
  padding: 0 0 16px 0 !important;
  margin: 0 !important;
}

/* Coupon collapsible */
.wc-block-components-totals-coupon,
.wc-block-components-panel__button {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
}
.wc-block-components-panel__button { padding: 14px 0 !important; border-bottom: 1px solid var(--hair) !important; }

/* Subtotal / shipping / total rows */
.wc-block-components-totals-item {
  padding: 10px 0 !important;
  font-size: 14.5px !important;
  color: var(--ink) !important;
}
.wc-block-components-totals-item__label { color: var(--grey-600); font-weight: 500; }
.wc-block-components-totals-item__value { font-weight: 700; color: var(--ink); }

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-cart .wc-block-components-totals-footer-item {
  font-family: 'Manrope', sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  letter-spacing: -0.01em;
}

/* The dim "shipping calculated at checkout" note */
.wc-block-components-totals-footer-item-tax,
.wc-block-components-totals-shipping__via {
  font-size: 12.5px !important;
  color: var(--grey-600) !important;
  font-weight: 500;
}

/* ============== Primary buttons (the visible ugly one) ============== */
.wc-block-components-button.contained,
.wc-block-cart__submit-button.contained,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
button.wc-block-components-checkout-place-order-button {
  background: var(--orange) !important;
  background-color: var(--orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  height: 56px !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15.5px !important;
  letter-spacing: -0.005em;
  padding: 0 28px !important;
  width: 100% !important;
  box-shadow: 0 14px 28px -10px rgba(230, 81, 0, 0.55) !important;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
}
.wc-block-components-button.contained:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--orange-600) !important;
  background-color: var(--orange-600) !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 32px -10px rgba(230, 81, 0, 0.7) !important;
}
.wc-block-components-button.contained:disabled,
.wc-block-cart__submit-button:disabled {
  background: var(--hair-2) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

.wc-block-cart__submit-container { padding: 0 !important; margin-top: 18px; }

/* "Повернутися в кошик" link on checkout */
.wc-block-checkout__actions__back .wc-block-components-button.outlined,
.wc-block-checkout__actions__back a {
  color: var(--navy) !important;
  background: transparent !important;
  border: none !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  font-size: 14px !important;
}
.wc-block-checkout__actions__back a:hover { color: var(--orange) !important; }

/* ============== Checkout — section headings ============== */
.wc-block-checkout-step__heading,
.wp-block-woocommerce-checkout-contact-information-block .wc-block-checkout-step__heading,
.wp-block-woocommerce-checkout-shipping-address-block .wc-block-checkout-step__heading,
.wp-block-woocommerce-checkout-payment-block .wc-block-checkout-step__heading,
.wp-block-woocommerce-checkout-shipping-methods-block .wc-block-checkout-step__heading {
  font-family: 'Manrope', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  letter-spacing: -0.01em;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

/* Checkout layout — cards mirror cart */
.wc-block-checkout__main,
.wc-block-checkout__sidebar,
.wp-block-woocommerce-checkout-fields-block,
.wp-block-woocommerce-checkout-totals-block {
  background: #fff !important;
}
.wc-block-checkout__main {
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 36px) !important;
  box-shadow: var(--shadow);
}
.wc-block-checkout__sidebar {
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 28px) !important;
  box-shadow: var(--shadow);
}

/* Checkout step container spacing */
.wc-block-checkout-step {
  padding: 0 !important;
  margin-bottom: 28px !important;
  border: none !important;
}
.wc-block-checkout-step:last-child { margin-bottom: 0 !important; }

/* Inputs inside Checkout block */
.wc-block-components-text-input input,
.wc-block-components-text-input .input-text,
.wc-block-components-address-form input,
.wc-block-components-checkout-step input.input-text,
.wc-block-components-form .wc-block-components-text-input input {
  border: 1px solid var(--hair) !important;
  border-radius: 10px !important;
  background: #fff !important;
  padding: 14px 14px !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  font-family: inherit !important;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-text-input .input-text:focus {
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(0,35,102,0.12) !important;
  outline: none !important;
}

.wc-block-components-text-input label,
.wc-block-components-text-input.is-active label,
.wc-block-components-checkout-step label {
  color: var(--grey-600) !important;
  font-weight: 500 !important;
}

/* Country / region select */
.wc-block-components-combobox .components-form-token-field__input,
.wc-block-components-combobox-control input {
  border: 1px solid var(--hair) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
}

/* Payment method radio panels */
.wc-block-components-radio-control {
  border: 1px solid var(--hair) !important;
  border-radius: 12px !important;
  padding: 4px 14px !important;
  background: var(--bg-soft) !important;
}
.wc-block-components-radio-control__option {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--hair);
}
.wc-block-components-radio-control__option:last-child { border-bottom: none; }
.wc-block-components-radio-control__option input[type="radio"]:checked + .wc-block-components-radio-control__label {
  color: var(--navy);
  font-weight: 700;
}
.wc-block-components-radio-control__label {
  font-weight: 600 !important;
  color: var(--ink) !important;
  font-size: 14.5px !important;
}
.wc-block-components-radio-control__description {
  color: var(--grey-600) !important;
  font-size: 13px !important;
}

/* Order summary line items on checkout */
.wc-block-components-order-summary-item {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--hair) !important;
  gap: 12px;
}
.wc-block-components-order-summary-item:last-child { border-bottom: none; }
.wc-block-components-order-summary-item__name {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  line-height: 1.3 !important;
}
.wc-block-components-order-summary-item__quantity .wc-block-components-product-badge,
.wc-block-components-product-badge {
  background: var(--navy) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}
.wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item__individual-prices {
  color: var(--navy) !important;
  font-weight: 700 !important;
}

/* Notice / banners */
.wc-block-components-notice-banner {
  border-radius: 12px !important;
  border: 1px solid var(--hair) !important;
  background: var(--bg-soft) !important;
  font-family: inherit !important;
}

/* Page heading consistency */
body.woocommerce-cart .wc-block-cart h1,
body.woocommerce-checkout .wc-block-checkout h1,
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(34px, 4.4vw, 48px) !important;
  color: var(--navy) !important;
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
}

/* Gap between cart columns / sidebar — force grid no-wrap at desktop */
.wc-block-cart.wc-block-components-sidebar-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px;
  flex-wrap: nowrap !important;
}
@media (min-width: 900px) {
  .wc-block-cart.wc-block-components-sidebar-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important;
  }
}
.wc-block-cart .wc-block-cart__main { width: 100% !important; }
.wc-block-cart .wc-block-cart__sidebar { width: 100% !important; }

/* Same for checkout: 2-col main + sidebar at desktop */
.wc-block-checkout.wc-block-components-sidebar-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px;
  flex-wrap: nowrap !important;
}
@media (min-width: 900px) {
  .wc-block-checkout.wc-block-components-sidebar-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important;
  }
}
.wc-block-checkout .wc-block-checkout__main { width: 100% !important; }
.wc-block-checkout .wc-block-checkout__sidebar { width: 100% !important; }

/* ==================== /my-account/ ==================== */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
  font-family: inherit;
}
body.woocommerce-account h2 {
  font-family: "Manrope", sans-serif;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
body.woocommerce-account .woocommerce-form-row > label,
body.woocommerce-account .woocommerce form .form-row label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
/* Inline checkboxes (Запам'ятати мене) — keep checkbox + label on one row */
body.woocommerce-account .woocommerce-form__label-for-checkbox,
body.woocommerce-account label.checkbox,
body.woocommerce-account .woocommerce form .form-row label.checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* The login row contains both "Запам'ятати мене" checkbox and the "Увійти"
   button. Drop the button onto its own line with a small gap. */
body.woocommerce-account .woocommerce-form-login p.form-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
body.woocommerce-account .woocommerce-form-login button.woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-login button[name="login"] {
  margin-top: 0;
  align-self: flex-start;
}
body.woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="password"],
body.woocommerce-account input[type="tel"],
body.woocommerce-account .woocommerce form .form-row input.input-text {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--hair) !important;
  border-radius: 12px !important;
  background: #fff !important;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
body.woocommerce-account input[type="text"]:focus,
body.woocommerce-account input[type="email"]:focus,
body.woocommerce-account input[type="password"]:focus {
  outline: none !important;
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(0, 35, 102, 0.12) !important;
}
/* Submit buttons (login / register / save) */
body.woocommerce-account button.woocommerce-button,
body.woocommerce-account .woocommerce-Button,
body.woocommerce-account button[name="login"],
body.woocommerce-account button[name="register"],
body.woocommerce-account button[name="save_account_details"],
body.woocommerce-account button[name="save_address"] {
  background: var(--orange) !important;
  background-color: var(--orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.005em !important;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease) !important;
}
body.woocommerce-account button.woocommerce-button:hover,
body.woocommerce-account button[name="login"]:hover,
body.woocommerce-account button[name="register"]:hover,
body.woocommerce-account button[name="save_account_details"]:hover {
  background: var(--orange-600) !important;
  background-color: var(--orange-600) !important;
  transform: translateY(-1px);
}
/* Lost password link */
body.woocommerce-account .lost_password a,
body.woocommerce-account p a {
  color: var(--navy) !important;
  border-bottom: 1px solid rgba(0, 35, 102, 0.25);
  text-decoration: none !important;
}
body.woocommerce-account .lost_password a:hover {
  border-bottom-color: var(--navy);
}
/* Account dashboard nav (after login) */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  color: var(--ink);
  font-weight: 500;
  transition: background .15s var(--ease), color .15s var(--ease);
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--navy-50);
  color: var(--navy);
}

/* Related-products band on /my-account/ — same Astra blue override */
body.woocommerce-account .evaway-related-footer ul.products li.product a.button,
body.woocommerce-account .evaway-related-footer ul.products li.product a.add_to_cart_button {
  background: var(--orange) !important;
  background-color: var(--orange) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  border: none !important;
  font-weight: 600 !important;
}

/* ==================== Mobile polish ==================== */
.hero-meta .stat .num,
.evaway-info-card .val {
  white-space: nowrap;
}
@media (max-width: 720px) {
  .hero-meta {
    grid-template-columns: 1fr;
    gap: 18px !important;
  }
  .hero-meta .stat {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .hero-meta .stat .num { font-size: 22px !important; }
  .hero-meta .stat .lbl { font-size: 11.5px !important; }
}

/* ==================== Mobile drawer ==================== */
.evaway-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.evaway-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 60, 0);
  transition: background .25s var(--ease);
}
.evaway-drawer.is-open { pointer-events: auto; }
.evaway-drawer.is-open .evaway-drawer__scrim {
  background: rgba(20, 30, 60, 0.5);
}
.evaway-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 88vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
  box-shadow: -20px 0 40px -12px rgba(0, 35, 102, 0.25);
}
.evaway-drawer.is-open .evaway-drawer__panel {
  transform: translateX(0);
}
.evaway-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hair);
}
.evaway-drawer__head .brand img { height: 28px; }
.evaway-drawer__close {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s var(--ease);
  padding: 0 !important;
}
.evaway-drawer__close:hover { background: var(--navy-50) !important; color: var(--navy) !important; }
.evaway-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 8px;
  gap: 2px;
}
.evaway-drawer__nav a {
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.evaway-drawer__nav a:hover {
  background: var(--navy-50);
  color: var(--navy);
}
.evaway-drawer__cta {
  padding: 12px 20px 0;
}
.evaway-drawer__meta {
  margin-top: auto;
  padding: 20px;
  font-size: 13px;
  color: var(--grey-600);
  background: var(--bg-soft);
  border-top: 1px solid var(--hair);
  display: grid;
  gap: 6px;
}
.evaway-drawer__meta a {
  color: var(--navy);
  font-weight: 700;
  font-size: 16px;
}
@media (min-width: 1101px) {
  /* Drawer never opens on desktop */
  .evaway-drawer { display: none; }
}

/* ==================== Astra "on-card" overlay button ==================== */
/* Astra injects a duplicate icon-style add-to-cart button positioned over the
   product image (.ast-on-card-button). With our visible big-pill CTA below
   the card, the overlay just looks like a stray icon. Suppress it on the
   product loops we render. */
.related.products .ast-on-card-button,
.evaway-related-footer .ast-on-card-button,
ul.products li.product .astra-shop-thumbnail-wrap > .ast-on-card-button,
ul.products li.product .ast-on-card-button {
  display: none !important;
}

/* The "Супутні товари" price element on Astra cards uses ins/del; clean it. */
ul.products li.product .price {
  font-family: "Manrope", sans-serif;
  color: var(--navy);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
ul.products li.product .price del { color: var(--grey-600); font-weight: 500; opacity: .6; }
ul.products li.product .price ins { background: none; text-decoration: none; }

/* "Переглянути кошик" replacement in product loops — navy variant. */
ul.products li.product a.button.evaway-loop-view-cart,
.related.products a.button.evaway-loop-view-cart,
.evaway-related-footer a.button.evaway-loop-view-cart {
  background: var(--navy) !important;
  background-color: var(--navy) !important;
  color: #fff !important;
}
ul.products li.product a.button.evaway-loop-view-cart:hover,
.related.products a.button.evaway-loop-view-cart:hover,
.evaway-related-footer a.button.evaway-loop-view-cart:hover {
  background: var(--navy-700) !important;
  background-color: var(--navy-700) !important;
}

/* ==================== Home quick finder (config-form on dark card) ==================== */
.evaway-home-finder.config-form { display: flex; flex-direction: column; }
.evaway-home-finder .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px !important;
  border: 1px solid var(--hair) !important;
  border-radius: 12px !important;
  background: #fff !important;
  margin-bottom: 8px;
  cursor: pointer;
}
.evaway-home-finder .field:hover { border-color: var(--navy) !important; }
.evaway-home-finder .field .label {
  font-size: 11.5px !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grey-600) !important;
  font-weight: 600;
}
.evaway-home-finder .field select {
  appearance: none;
  -webkit-appearance: none;
  border: none !important;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23808080' stroke-width='1.6'><path d='M1 1l4 4 4-4'/></svg>") no-repeat right 0 center !important;
  padding: 0 18px 0 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
}
.evaway-home-finder .field select:focus { outline: none; }
.evaway-home-finder .field select:disabled {
  color: var(--grey) !important;
  cursor: not-allowed;
  opacity: 0.6;
}
.evaway-home-finder button[type="submit"] {
  cursor: pointer;
  border: none;
  font-family: inherit;
}

/* ==================== Searchable select widget (searchable-select.js) ==================== */
/* Hidden outright (not sr-only): a visible native <select> would still catch
   clicks and open its own dropdown. !important beats the more-specific
   `.evaway-select-grid select` / home-finder rules. The value still submits
   and the cascade JS reads `.value`, so nothing downstream breaks. */
.evaway-ss-native { display: none !important; }
.evaway-ss { position: relative; width: 100%; }
.evaway-ss__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 44px;
  border: 1px solid var(--hair-2, #d4d4d4);
  border-radius: 10px;
  padding: 0 14px;
  background: #fff;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--ink, #1a1a1a);
  text-align: left; cursor: pointer;
  text-transform: none; letter-spacing: normal;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.evaway-ss__trigger:hover { border-color: var(--navy, #002366); }
.evaway-ss.is-open .evaway-ss__trigger,
.evaway-ss__trigger:focus-visible {
  outline: none; border-color: var(--navy, #002366);
  box-shadow: 0 0 0 3px rgba(0,35,102,0.12);
}
.evaway-ss__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evaway-ss.is-empty .evaway-ss__label { color: var(--grey-600, #545454); font-weight: 500; }
.evaway-ss__chev {
  flex: none; width: 10px; height: 6px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23808080' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  transition: transform .2s ease;
}
.evaway-ss.is-open .evaway-ss__chev { transform: rotate(180deg); }
.evaway-ss.is-disabled .evaway-ss__trigger {
  background: #f3f3f1; color: var(--grey-600, #545454);
  cursor: not-allowed; border-color: var(--hair-2, #d4d4d4); box-shadow: none;
}
.evaway-ss.is-disabled .evaway-ss__trigger:hover { border-color: var(--hair-2, #d4d4d4); }

/* Portaled to <body> and positioned (fixed) by JS, so it escapes the field
   <label> and any clipping/stacking. Font is normalised here so the list
   renders identically on every page regardless of the host context. */
.evaway-ss__panel {
  position: fixed; z-index: 9999;
  background: #fff;
  border: 1px solid var(--hair-2, #d4d4d4);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  padding: 6px;
  font-family: var(--font, "Inter Tight", Inter, system-ui, sans-serif);
  text-transform: none;
  letter-spacing: normal;
}
.evaway-ss__search { padding: 4px 4px 6px; }
.evaway-ss__search[hidden] { display: none; }
.evaway-ss__input {
  width: 100%; height: 38px;
  border: 1px solid var(--hair-2, #d4d4d4); border-radius: 8px;
  padding: 0 12px;
  font-family: inherit; font-size: 14px; color: var(--ink, #1a1a1a);
  background: #fff;
}
.evaway-ss__input:focus {
  outline: none; border-color: var(--navy, #002366);
  box-shadow: 0 0 0 3px rgba(0,35,102,0.12);
}
.evaway-ss__list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.evaway-ss__group {
  padding: 8px 12px 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--grey-600, #545454);
}
.evaway-ss__opt {
  padding: 9px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: normal;
  color: var(--ink, #1a1a1a); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.evaway-ss__opt[hidden] { display: none; }
.evaway-ss__opt:hover,
.evaway-ss__opt.is-active { background: var(--bg-soft, #f6f6f4); }
.evaway-ss__opt.is-selected { color: var(--navy, #002366); font-weight: 700; }
.evaway-ss__empty { padding: 14px 12px; font-size: 13px; color: var(--grey-600, #545454); text-align: center; }
.evaway-ss__empty[hidden] { display: none; }

/* Home quick-finder: the .field is the bordered box, so the trigger is bare. */
.evaway-home-finder .field .evaway-ss__trigger {
  height: auto; border: none; border-radius: 0; padding: 0;
  background: transparent; box-shadow: none;
  font-size: 15px; font-weight: 700; color: var(--navy, #002366);
}
.evaway-home-finder .field .evaway-ss.is-empty .evaway-ss__label {
  color: var(--grey, #9a9a9a); font-weight: 500;
}
.evaway-home-finder .field .evaway-ss.is-disabled .evaway-ss__trigger {
  background: transparent; opacity: 0.6;
}

/* ==========================================================================
   Content pages — Контакти / Про нас / Доставка / Повернення
   ========================================================================== */

.hero--page { padding: 64px 0 32px; background: var(--bg-soft); border-bottom: 1px solid var(--hair); }
.hero-page-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero-page-grid--reverse { grid-template-columns: 1fr 1.4fr; }
.hero-page-grid--reverse .hero-page-copy { order: 1; }
.hero-page-grid--reverse .hero-page-visual { order: 2; }
.hero-page-copy .lede { color: var(--grey-600); font-size: 17px; line-height: 1.55; max-width: 600px; margin: 16px 0 0; }
.hero-page-copy .lede b { color: var(--ink); font-weight: 700; }
.hero-page-title {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(34px, 4.4vw, 52px);
  color: var(--navy);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 14px 0 0;
}
.hero-page-stats { display: flex; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.hero-page-stats .kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi-num { font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
.kpi-lbl { font-size: 12px; color: var(--grey-600); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }

.hero-page-card {
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hero-page-card__row { display: flex; gap: 14px; align-items: flex-start; }
.hero-page-card__row .t { font-size: 12px; color: var(--grey-600); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.hero-page-card__row .s, .hero-page-card__row a.s { font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 2px; display: block; text-decoration: none; }
.hero-page-card__row a.s:hover { color: var(--orange); }
.ic-circle {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: var(--orange-50); color: var(--orange);
  display: inline-flex; align-items: center; justify-content: center;
}
.ic-circle--green { background: rgba(16, 185, 129, 0.1); color: #059669; }

.hero-page-visual { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--bg-soft); box-shadow: var(--shadow); }
.hero-page-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-page-visual__chip {
  position: absolute; top: 16px; left: 16px;
  background: rgba(0, 35, 102, 0.92); color: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}

/* Section container default */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section-header { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.section-header h2 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 14px 0 14px;
  font-weight: 700;
}
.section-header > .eyebrow + h2 { margin-top: 14px; }
.section-header p { color: var(--grey-600); font-size: 15.5px; line-height: 1.55; }

/* ============== Channels (Контакти) ============== */
.channels-section { background: var(--bg); }
.channels-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.channel-card {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid var(--hair);
  border-radius: var(--radius); padding: 24px;
  text-decoration: none; color: inherit;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.channel-card:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.channel-ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--navy-50); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.channel-name { font-size: 12px; color: var(--grey-600); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
.channel-val { font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: -0.005em; }
.channel-meta { font-size: 13px; color: var(--grey-600); margin-top: 2px; }

/* ============== Visit (Контакти) ============== */
.visit-section { background: var(--bg-soft); }
.visit-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.visit-h { font-family: 'Manrope', sans-serif; font-size: clamp(26px, 3vw, 36px); color: var(--navy); margin: 14px 0 12px; line-height: 1.1; letter-spacing: -0.02em; }
.visit-p { color: var(--grey-600); font-size: 15.5px; line-height: 1.55; }
.visit-meta {
  list-style: none; padding: 18px 0; margin: 22px 0 24px;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 8px;
}
.visit-meta li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.visit-meta li b { color: var(--navy); font-weight: 700; }
.visit-meta li span { color: var(--grey-600); }
.visit-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--orange-50); border: 1px dashed var(--orange);
  padding: 14px 16px; border-radius: 12px;
  font-size: 13.5px; color: var(--ink); line-height: 1.45;
}
.visit-note svg { color: var(--orange); flex-shrink: 0; margin-top: 1px; }
.visit-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

.visit-map { border-radius: var(--radius-lg); overflow: hidden; min-height: 380px; box-shadow: var(--shadow); border: 1px solid var(--hair); }
.visit-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

/* ============== Lead form + B2B ============== */
.form-section { background: var(--bg); }
.form-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 56px); }
.lead-form { display: flex; flex-direction: column; gap: 16px; background: var(--bg-soft); padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); border: 1px solid var(--hair); }
.lead-form > h2 { margin: 6px 0 4px; }
.lead-form > .lede { color: var(--grey-600); margin: 0 0 8px; font-size: 14.5px; }
.lead-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--grey-600); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
.lead-form label .hint { text-transform: none; letter-spacing: 0; color: var(--grey); font-weight: 500; font-size: 11.5px; }
.lead-form input, .lead-form textarea, .lead-form select {
  font-family: inherit; font-size: 15px; color: var(--ink); font-weight: 500;
  padding: 12px 14px; border: 1px solid var(--hair); border-radius: 10px;
  background: #fff; outline: none; letter-spacing: 0; text-transform: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0,35,102,0.12);
}
.lead-form textarea { resize: vertical; min-height: 96px; }
.lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lead-form .btn { align-self: flex-start; margin-top: 4px; }
.lead-form__msg { color: #059669; font-size: 14px; min-height: 18px; margin: 0; font-weight: 600; }
.form-disclaimer { font-size: 12px; color: var(--grey); line-height: 1.5; margin: 0; }
.form-disclaimer a { color: var(--navy); }

.b2b-card { background: var(--navy); color: #fff; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 18px; }
.b2b-card .eyebrow.navy { color: #fff; opacity: .8; }
.b2b-card .eyebrow.navy::before { background: var(--orange); }
.b2b-h { font-family: 'Manrope', sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0; color: #fff; }
.b2b-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.b2b-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; }
.b2b-list li svg { color: var(--orange); flex-shrink: 0; margin-top: 3px; }
.b2b-card .btn { align-self: flex-start; }
.b2b-meta { font-size: 12.5px; opacity: .7; line-height: 1.5; margin: 0; }

/* ============== Requisites ============== */
.requisites-section { background: var(--bg-soft); }
.requisites-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.req-card { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); padding: 18px 20px; }
.req-key { font-size: 11.5px; color: var(--grey-600); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.req-val { font-family: 'Inter Tight', sans-serif; font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 4px; word-break: break-word; }

/* ============== Про нас — KPI band ============== */
.kpi-section { background: var(--bg); padding: 56px 0; border-bottom: 1px solid var(--hair); }
.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; text-align: center; }
.kpi-cell { padding: 16px 8px; border-right: 1px solid var(--hair); }
.kpi-cell:last-child { border-right: none; }
.kpi-cell .kpi-num { font-size: 36px; line-height: 1; }
.kpi-cell .kpi-lbl { margin-top: 8px; }

/* ============== Про нас — Story ============== */
.story-section { background: var(--bg-soft); }
.story-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.story-h { font-family: 'Manrope', sans-serif; font-size: clamp(26px, 3.2vw, 40px); color: var(--navy); margin: 14px 0 18px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
.story-copy p { font-size: 15.5px; color: var(--ink); line-height: 1.65; margin: 0 0 14px; }
.story-copy p b { color: var(--navy); }
.story-visual { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--bg); box-shadow: var(--shadow-lg); }
.story-visual img { width: 100%; height: 100%; object-fit: cover; }

/* ============== Про нас — Differentiators ============== */
.diff-section { background: var(--bg); }
.diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.diff-card {
  background: #fff; border: 1px solid var(--hair);
  border-radius: var(--radius-lg); padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.diff-card:hover { border-color: var(--navy); transform: translateY(-2px); }
.diff-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--orange-50); color: var(--orange); display: inline-flex; align-items: center; justify-content: center; }
.diff-card h3 { font-family: 'Manrope', sans-serif; font-size: 19px; color: var(--navy); margin: 0; line-height: 1.2; font-weight: 700; }
.diff-card p { font-size: 14.5px; color: var(--grey-600); line-height: 1.55; margin: 0; }

/* ============== Про нас — Process timeline ============== */
.process-section { background: var(--bg-soft); }
.process-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.process-timeline::before {
  content: ''; position: absolute; top: 24px; left: 24px; right: 24px;
  height: 2px; background: linear-gradient(90deg, var(--orange) 0%, var(--orange) 100%);
  opacity: .35; z-index: 0;
}
.process-step { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); padding: 22px 18px; display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; }
.process-num { font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 800; color: #fff; background: var(--orange); width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.04em; }
.process-step h3 { font-size: 15.5px; color: var(--navy); margin: 6px 0 4px; line-height: 1.2; font-weight: 700; }
.process-step p { font-size: 13.5px; color: var(--grey-600); line-height: 1.5; margin: 0; }

/* ============== Про нас — Values ============== */
.values-section { background: var(--bg); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value-card {
  background: var(--navy-50);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: 28px;
  border-top: 4px solid var(--orange);
}
.value-card h3 { font-family: 'Manrope', sans-serif; font-size: 22px; color: var(--navy); margin: 0 0 10px; line-height: 1.2; font-weight: 700; }
.value-card p { font-size: 14.5px; color: var(--ink); line-height: 1.55; margin: 0; opacity: .85; }

/* ============== CTA strip ============== */
.cta-strip { background: var(--bg-soft); padding: 64px 0; }
.cta-card {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 24px;
  align-items: center;
  box-shadow: var(--shadow-lg);
}
.cta-card--soft { background: linear-gradient(135deg, var(--navy) 0%, #001a4d 100%); }
.cta-card h2 { font-family: 'Manrope', sans-serif; font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 6px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.cta-card p { margin: 0; opacity: .9; font-size: 15px; line-height: 1.5; color: #fff; }
.cta-card__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-card__actions .btn-ghost { border-color: rgba(255,255,255,0.4); color: #fff; }
.cta-card__actions .btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* ============== Доставка — Carriers ============== */
.carriers-section { background: var(--bg); }
.carriers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.carrier-card {
  background: #fff; border: 1px solid var(--hair);
  border-radius: var(--radius-lg); padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.carrier-card:hover { border-color: var(--navy); transform: translateY(-2px); }
.carrier-card--featured { border: 2px solid var(--orange); background: linear-gradient(180deg, var(--orange-50) 0%, #fff 60%); }
.carrier-card--ghost { background: var(--bg-soft); border-style: dashed; }
.carrier-badge { position: absolute; top: -10px; right: 18px; background: var(--orange); color: #fff; font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.06em; text-transform: uppercase; }
.carrier-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--navy-50); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; }
.carrier-card--featured .carrier-ic { background: rgba(230, 81, 0, 0.18); color: var(--orange); }
.carrier-card h3 { font-family: 'Manrope', sans-serif; font-size: 18px; color: var(--navy); margin: 4px 0 0; line-height: 1.2; font-weight: 700; }
.carrier-list { list-style: none; padding: 12px 0; margin: 8px 0 0; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 8px; }
.carrier-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.carrier-list li b { color: var(--grey-600); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.carrier-list li span { color: var(--ink); font-weight: 600; }
.carrier-meta { font-size: 13px; color: var(--grey-600); line-height: 1.5; margin-top: 4px; }
.carrier-empty-p { font-size: 14px; color: var(--grey-600); line-height: 1.5; margin: 0; }
.carrier-soft-link { color: var(--navy); font-weight: 600; font-size: 14px; text-decoration: none; margin-top: auto; }
.carrier-soft-link:hover { color: var(--orange); }

/* ============== Доставка — Production ============== */
.production-section { background: var(--bg-soft); }
.prod-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.prod-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.prod-list li { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; }
.prod-key { display: flex; gap: 12px; align-items: center; }
.prod-key b { color: var(--navy); font-size: 15.5px; font-weight: 700; }
.prod-tag { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--bg-soft); color: var(--grey-600); letter-spacing: 0.04em; text-transform: uppercase; }
.prod-tag--green { background: rgba(16, 185, 129, 0.15); color: #059669; }
.prod-tag--blue { background: var(--navy-50); color: var(--navy); }
.prod-val { color: var(--grey-600); font-size: 14px; line-height: 1.5; }

/* ============== Доставка — Tracking ============== */
.tracking-section { background: var(--bg); }
.tracking-card {
  background: linear-gradient(135deg, var(--navy-50) 0%, #fff 60%);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: flex-start;
}
.tracking-icon { width: 64px; height: 64px; border-radius: 16px; background: var(--orange-50); color: var(--orange); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tracking-card h3 { font-family: 'Manrope', sans-serif; font-size: 22px; color: var(--navy); margin: 0 0 10px; line-height: 1.2; font-weight: 700; }
.tracking-card p { font-size: 14.5px; color: var(--ink); line-height: 1.55; margin: 0 0 16px; }
.tracking-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.faq-section--page { background: var(--bg-soft); }

/* ============== Повернення — Pillars ============== */
.pillars-section { background: var(--bg); }
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar-card {
  background: #fff; border: 1px solid var(--hair);
  border-radius: var(--radius-lg); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
}
.pillar-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--orange);
}
.pillar-num { font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 800; color: var(--orange); letter-spacing: 0.1em; }
.pillar-card h3 { font-family: 'Manrope', sans-serif; font-size: 22px; color: var(--navy); margin: 0; line-height: 1.2; font-weight: 700; }
.pillar-card p { font-size: 14.5px; color: var(--ink); line-height: 1.6; margin: 0; opacity: .9; }
.pillar-card p b { color: var(--orange); font-weight: 700; }

/* ============== Повернення — Conditions ============== */
.conditions-section { background: var(--bg-soft); }
.conditions-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.conditions-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.conditions-list li { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); padding: 18px 20px; font-size: 14.5px; color: var(--ink); line-height: 1.5; }
.conditions-list li b { color: var(--navy); font-weight: 700; }
.cond-ic { width: 32px; height: 32px; border-radius: 50%; background: rgba(16, 185, 129, 0.15); color: #059669; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ============== Повернення — Remake ============== */
.remake-section { background: var(--bg); }
.remake-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.remake-step {
  background: #fff; border: 1px solid var(--hair);
  border-radius: var(--radius-lg); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.remake-step .remake-num { position: absolute; top: 16px; right: 20px; font-family: 'Manrope', sans-serif; font-size: 38px; font-weight: 800; color: var(--orange); opacity: .25; line-height: 1; }
.remake-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--navy-50); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; }
.remake-step h3 { font-family: 'Manrope', sans-serif; font-size: 17px; color: var(--navy); margin: 8px 0 0; line-height: 1.25; font-weight: 700; }
.remake-step p { font-size: 14px; color: var(--grey-600); line-height: 1.55; margin: 0; }

/* ============== Повернення — Warranty ============== */
.warranty-section { background: var(--bg-soft); }
.warranty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.warranty-col {
  background: #fff; border: 1px solid var(--hair);
  border-radius: var(--radius-lg); padding: 28px;
}
.warranty-col--yes { border-top: 4px solid #059669; }
.warranty-col--no { border-top: 4px solid #dc2626; }
.warranty-h { margin-bottom: 18px; }
.warranty-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; padding: 6px 12px; border-radius: 999px; letter-spacing: 0.06em; text-transform: uppercase; }
.warranty-pill--yes { background: rgba(16, 185, 129, 0.15); color: #059669; }
.warranty-pill--no { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.warranty-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.warranty-col ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink); line-height: 1.5; }
.warranty-col--yes ul li svg { color: #059669; flex-shrink: 0; margin-top: 2px; }
.warranty-col--no ul li svg { color: #dc2626; flex-shrink: 0; margin-top: 2px; }

/* ============== Повернення — How ============== */
.how-section { background: var(--bg); }
.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.how-step {
  background: var(--bg-soft); border: 1px solid var(--hair);
  border-radius: var(--radius-lg); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.how-num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--orange); color: #fff;
  font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.how-step h3 { font-family: 'Manrope', sans-serif; font-size: 18px; color: var(--navy); margin: 0; line-height: 1.2; font-weight: 700; }
.how-step p { font-size: 14px; color: var(--ink); line-height: 1.55; margin: 0; opacity: .9; }
.how-step p a { color: var(--navy); font-weight: 600; }

/* ============== Responsive ============== */
@media (max-width: 1100px) {
  .hero-page-grid { grid-template-columns: 1fr; }
  .hero-page-grid--reverse .hero-page-copy { order: 1; }
  .hero-page-grid--reverse .hero-page-visual { order: 0; }
  .channels-grid { grid-template-columns: repeat(2, 1fr); }
  .visit-grid, .form-grid, .story-grid, .conditions-grid, .prod-grid { grid-template-columns: 1fr; }
  .visit-map { min-height: 320px; }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .kpi-cell:nth-child(3) { border-right: none; }
  .diff-grid { grid-template-columns: 1fr; }
  .process-timeline { grid-template-columns: repeat(2, 1fr); }
  .process-timeline::before { display: none; }
  .values-grid, .pillars-grid, .remake-steps, .how-steps { grid-template-columns: 1fr; }
  .carriers-grid { grid-template-columns: repeat(2, 1fr); }
  .warranty-grid { grid-template-columns: 1fr; }
  .requisites-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-card { grid-template-columns: 1fr; text-align: left; }
}
@media (max-width: 720px) {
  .channels-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-cell { border-right: none; border-bottom: 1px solid var(--hair); padding: 12px; }
  .kpi-cell:last-child { border-bottom: none; }
  .process-timeline { grid-template-columns: 1fr; }
  .carriers-grid { grid-template-columns: 1fr; }
  .lead-form__row { grid-template-columns: 1fr; }
  .requisites-grid { grid-template-columns: 1fr; }
}

/* ===================== WC order-tracking form ===================== */
form.track_order {
  max-width: 640px;
  margin: 32px 0 64px;
  display: grid;
  gap: 18px;
}
form.track_order .form-row,
form.track_order .form-row-first,
form.track_order .form-row-last {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
form.track_order .form-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
form.track_order input.input-text {
  width: 100% !important;
  height: 48px;
  border: 1px solid var(--hair-2);
  border-radius: 12px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  box-sizing: border-box;
}
form.track_order input.input-text:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0, 35, 102, 0.12);
}
form.track_order button[type="submit"].button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-width: 200px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
form.track_order button[type="submit"].button:hover {
  background: var(--orange-600);
  transform: translateY(-1px);
}
form.track_order .clear { display: none; }
@media (max-width: 560px) {
  form.track_order button[type="submit"].button { width: 100%; }
}

/* ===================== WC coupon row (cart + checkout) ===================== */
/* Markup is <div class="coupon"><label><input.input-text><button.button>,
 * usually inside the cart actions row or above the order-review on checkout.
 * The shipped WC stylesheet leaves it bare on our trimmed theme. Style the
 * input as a pill text-field and the apply button as a navy secondary pill
 * (the primary CTA on the page is "Підтвердити замовлення" — orange — so
 * coupon-apply is intentionally one step quieter). */
.coupon,
form.checkout_coupon,
.woocommerce-cart-form .coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  margin: 0;
}
.coupon input.input-text,
form.checkout_coupon input.input-text,
.woocommerce-cart-form .coupon input.input-text {
  flex: 1 1 200px;
  min-width: 0;
  height: 48px;
  border: 1px solid var(--hair-2);
  border-radius: 12px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: #fff;
  box-sizing: border-box;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.coupon input.input-text:focus,
form.checkout_coupon input.input-text:focus,
.woocommerce-cart-form .coupon input.input-text:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0, 35, 102, 0.12);
}
.coupon input.input-text::placeholder,
form.checkout_coupon input.input-text::placeholder {
  color: var(--grey-600, #545454);
}
.coupon button[type="submit"].button,
form.checkout_coupon button[type="submit"].button,
.woocommerce-cart-form .coupon button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.coupon button[type="submit"].button:hover,
form.checkout_coupon button[type="submit"].button:hover,
.woocommerce-cart-form .coupon button.button:hover {
  background: var(--navy-700, #001b4f);
  transform: translateY(-1px);
}
.coupon button[type="submit"].button:focus,
form.checkout_coupon button[type="submit"].button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 35, 102, 0.25);
}
@media (max-width: 560px) {
  .coupon,
  form.checkout_coupon { max-width: 100%; }
  .coupon input.input-text,
  form.checkout_coupon input.input-text { flex: 1 1 100%; }
  .coupon button[type="submit"].button,
  form.checkout_coupon button[type="submit"].button { width: 100%; }
}

/* WC cart "Оновити кошик" (update_cart). Plain .button, no .alt — so
 * the orange-CTA rule doesn't catch it. Treat it as a secondary navy
 * pill like the coupon-apply button, with a clear disabled state
 * (the button starts disabled and only enables when a quantity
 * changes). */
.woocommerce button[name="update_cart"],
.woocommerce-page button[name="update_cart"],
.woocommerce-cart-form button[name="update_cart"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.woocommerce button[name="update_cart"]:hover:not(:disabled),
.woocommerce-page button[name="update_cart"]:hover:not(:disabled),
.woocommerce-cart-form button[name="update_cart"]:hover:not(:disabled) {
  background: var(--navy-700, #001b4f);
  transform: translateY(-1px);
}
.woocommerce button[name="update_cart"]:focus,
.woocommerce-page button[name="update_cart"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 35, 102, 0.25);
}
.woocommerce button[name="update_cart"]:disabled,
.woocommerce-page button[name="update_cart"]:disabled,
.woocommerce-cart-form button[name="update_cart"]:disabled {
  background: var(--hair-2, #d4d4d4);
  color: #fff;
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
  box-shadow: none;
}

.checkout-button { align-content: center; }
.password-input { width: 100%; }
.woocommerce-cart table.cart td.actions .coupon { width: 100%; }

/* ===================== Checkout shipping-method toggle =====================
   WC renders shipping methods as a narrow stacked radio list inside the
   order-review table's <td>. With Nova Post offering two options the
   choice is critical UX, so promote it: collapse the table row to full
   width, render the methods as two big pill buttons side-by-side. Active
   button = orange filled; inactive = outline. */
/* The theme override of cart-shipping.php merges the original
 * <th> + <td> into a single <td colspan="2"> so the toggle spans
 * the full table width naturally. See:
 *   themes/evaway/woocommerce/cart/cart-shipping.php */
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals.shipping > td {
  padding: 14px 0 10px;
  border: none;
}
.woocommerce-checkout-review-order-table .evaway-shipping-heading {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-600, #545454);
}
.woocommerce-checkout-review-order-table .evaway-address-hint {
  margin: 10px 0 4px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink, #1a1a1a);
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 8px;
}
/* Доставка row — customer pays courier on delivery, total excludes it. */
.woocommerce-checkout-review-order-table tr.evaway-shipping-cost th,
.woocommerce-checkout-review-order-table tr.evaway-shipping-cost td {
  padding: 8px 0;
  border-top: 1px solid var(--grey-100, #e5e5e5);
  font-size: 14px;
}
.woocommerce-checkout-review-order-table .evaway-shipping-estimate {
  font-weight: 600;
  color: var(--ink, #1a1a1a);
  white-space: nowrap;
}
.woocommerce-checkout-review-order-table .evaway-shipping-note {
  color: var(--grey-600, #545454);
  font-size: 12.5px;
}
.woocommerce-checkout-review-order-table ul.woocommerce-shipping-methods {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.woocommerce-checkout-review-order-table ul.woocommerce-shipping-methods li {
  margin: 0;
  width: 100%;
  display: block;
}
.woocommerce-checkout-review-order-table ul.woocommerce-shipping-methods li input.shipping_method {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.woocommerce-checkout-review-order-table ul.woocommerce-shipping-methods li label {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 56px;
  padding: 12px 18px;
  border: 2px solid var(--hair, #e5e5e5);
  border-radius: 999px;
  background: #fff;
  color: var(--ink, #1a1a1a);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color .2s var(--ease, ease), background .2s var(--ease, ease), color .2s var(--ease, ease), transform .15s var(--ease, ease);
}
.woocommerce-checkout-review-order-table ul.woocommerce-shipping-methods li label:hover {
  border-color: var(--navy, #002366);
}
.woocommerce-checkout-review-order-table ul.woocommerce-shipping-methods li input.shipping_method:checked + label {
  background: var(--orange, #E65100);
  border-color: var(--orange, #E65100);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(230, 81, 0, 0.55);
}
.woocommerce-checkout-review-order-table ul.woocommerce-shipping-methods li input.shipping_method:focus-visible + label {
  outline: 3px solid rgba(0, 35, 102, 0.25);
  outline-offset: 2px;
}

.nova-post-widget__error-block { margin-bottom: 10px; }

/* /order-received/ CTA for pending orders (LiqPay link is dead once
 * the customer closed the tab — this surfaces the regenerate URL). */
.evaway-pending-payment-cta {
  margin: 24px 0 32px;
  padding: 24px 28px;
  background: #fff7ed;
  border: 2px solid #fb923c;
  border-radius: 12px;
}
.evaway-pending-payment-cta h2 {
  margin: 0 0 8px;
  color: #c2410c;
  font-size: 20px;
  font-weight: 700;
}
.evaway-pending-payment-cta p {
  margin: 0 0 16px;
  color: var(--ink, #1a1a1a);
  font-size: 15px;
  line-height: 1.5;
}
.evaway-pending-payment-cta__button {
  display: inline-block;
  padding: 14px 28px;
  background: var(--orange, #E65100);
  color: #fff !important;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background .2s var(--ease, ease), transform .15s var(--ease, ease);
}
.evaway-pending-payment-cta__button:hover {
  background: #c2410c;
  transform: translateY(-1px);
}
/* ── Order-received / Thank-you page ──────────────────────────────
 * Astra styles the H2 "Подробиці замовлення" / "Адреса" titles as a
 * tab top (top + left + right borders, no bottom), expecting the
 * tables below to continue those borders. They don't, so the box
 * is "open" on the right and bottom. Close it.
 */
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
  border: 1px solid var(--ast-border-color, #e0e0e0);
  border-top: 0;                /* the H2 already supplies the top edge */
  background: #fff;
}
.woocommerce-order .woocommerce-order-details .woocommerce-table--order-details,
.woocommerce-order .woocommerce-customer-details address {
  border: 0;
  margin: 0;
  padding: 1em 1.25em;
  width: 100%;
  box-sizing: border-box;
}
.woocommerce-order h2.woocommerce-order-details__title,
.woocommerce-order h2.woocommerce-column__title {
  margin: 0;
  /* Make sure the H2 visually meets the section's left/right borders. */
  box-sizing: border-box;
}

/* The shipping line on old orders carries the carrier price; new
 * orders (post the package_rates filter) carry 0. Either way, keep
 * the row legible.
 */
.woocommerce-order .woocommerce-table--order-details tr.shipping td {
  white-space: normal;
}