@import url("reset.css");
/* @import url("fonts.css"); */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

/* VARIABLES */
:root {
  /* COLORS */
  --color-background: #fff;
  --color-bg-secondary: #f4f7f9;
  --color-white: #fff;
  --color-black: #1c1b1b;
  --color-dark-blue: #001a33;
  --text-color: #657078;
  --link-color: #52baf0;
  --light-blue: #f4f7f9;
  --light-gray-1: #f2f2f2;
  --light-gray-2: #e1e4e6;
  --primary-green: #079247;
  --primary-blue: #202959;
  --primary-orange: #ee572b;
  --light-green-bg: #eef5e9;
  /* Header navigation active-link accent — deliberately NOT primary-green:
     green read poorly both over transparent-Hero photos and against the
     dark-blue scrolled Header, and clashed with the CTA button's green. One
     warm gold works cleanly in both Header states (see .main-nv-ln.current-page
     below, the single source for this on desktop AND mobile — they share
     the same <li> markup). */
  --header-active-color: #f4c95d;

  /* BORDER RADIUS */
  --border-radius-8: 12px;
  --border-radius-12: 12px;
  --border-radius-24: 24px;
  --border-radius-32: 32px;
  --border-rounded: 100%;

  /* LINE HEIGHT */
  --line-height-115: 115%;
  --line-height-135: 135%;
  --line-height-150: 150%;
  --line-height-175: 175%;
  --line-height-200: 200%;

  /* Z-INDEX SCALE (mobile Header/menu stacking)
     Deliberate hierarchy, low to high — every mobile-menu-related layer
     reads its z-index from here instead of a standalone magic number, so
     "Header must always sit above the mobile drawer/backdrop" is expressed
     once and can't drift back out of sync between app.css/responsive.css:
       backdrop  <  drawer  <  drawer submenu  <  header (+ its dropdowns)
     .frontend-admin-bar (99999, see the admin-bar rules further down) stays
     the one deliberate exception above all of this. */
  --z-backdrop: 500;
  --z-drawer: 600;
  --z-drawer-submenu: 610;
  --z-header: 700;
}

body {
  font-family: "Roboto", sans-serif;
  background-color: var(--color-background);
}

._lock {
  /* height is required here — body has no explicit height of its own (it
     grows to fit its content), so overflow:hidden alone has nothing to
     clip and the page keeps scrolling behind the modal, showing the
     browser's own full-height scrollbar instead of the modal's embedded
     one. Giving it a 100vh box makes the hidden overflow actually apply. */
  height: 100vh;
  overflow: hidden;
}

.site-wrapper {
  min-height: 100vh;
  position: relative;
}

.container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.container-max {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}

.page-dark-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.5s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.page-dark-overlay._active {
  visibility: visible;
  opacity: 1;
  z-index: var(--z-backdrop);
}

.ds-none {
  display: none !important;
}

.border-red {
  border: 1px solid red !important;
}

.section {
  margin-top: 80px !important;
  margin-bottom: 80px !important;
}

/***** Header *****/

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  /* Must outrank --z-drawer/--z-drawer-submenu/--z-backdrop: the Header
     creates its own stacking context here (position:fixed + z-index), so
     everything painted inside it — the language switcher trigger AND its
     dropdown — automatically stays above the mobile menu/backdrop too,
     without needing a separate, larger z-index of their own. */
  z-index: var(--z-header);
  transition: all 0.3s ease-in-out;
}

/* .__scrolled is driven purely by scroll position (transparentNavbar() in
   script.js) and .__menu-open purely by the burger menu's open/close state
   (burgerMenu() in script.js) — two independent listeners that used to fight
   over the single .__scrolled class (open the menu near the top of a Hero,
   then close it, and unlockBodyScroll()'s scrollTo could trigger the scroll
   listener to strip .__scrolled again while the menu/backdrop were still
   visually settling, snapping the Header back to transparent). Kept as
   separate classes so neither listener ever needs to know about the other. */
.__scrolled,
.__fixed-scrolled,
.__menu-open {
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(0, 0, 0, 0.04);
  background: var(--primary-blue);
}


.pre-header {
  padding: 10px 35px;
  width: 100%;
  /* background-color: var(--primary-green); */
  border: 1px solid #f2f2f2;
}

.pre-header span {
  height: 100%;
  width: 1px;
  background-color: #e6e6e6;
  /* border: 1px solid red; */
}

.pre-header a {
  color: var(--text-color);
  font-weight: 300;
  font-size: 14px;
  /* color: var(--color-white);
  text-decoration: underline; */
}

.pre-header a.message {
  color: var(--primary-green);
  font-weight: 500;
  text-decoration: underline;
}

header._sticky {
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(0, 0, 0, 0.04);
}

.header-row {
  gap: 32px;
  padding: 10px 35px;
  height: 80px;
}

.header-row .header-logo {
  max-width: 175px;
  width: 100%;
  height: auto;
}

.navigation-bar {
  flex: 1;
  min-width: 0;
}

.menu-links {
  gap: 28px;
  width: 100%;
}

.lang-item {
  margin-left: auto;
  /* Superseded by .mobile-lang-switcher below (same RO/EN/RU dropdown,
     living next to .menu-icon instead of buried in here) — hidden rather
     than removed so the markup stays in place if it's ever needed again.
     !important: the element also carries Bootstrap's .d-flex utility
     class, which is display: flex !important. */
  display: none !important;
}

/* The site's one RO language switcher — lives in .header-row next to
   .menu-icon (grouped together in .mobile-header-actions) instead of
   inside .menu-links (see .lang-item above), so the same element works at
   every width: the compact hover-opened dropdown (.hd-drop-link:hover
   .sub-menu, below) on desktop, opened by tap instead on mobile once
   .menu-icon becomes the burger (see the ._active rule further down). */

/* Its trigger link lives outside .menu-links, so it misses that rule's
   color: var(--color-white) and falls back to the browser's default link
   color (blue) instead of inheriting white like every other nav link. */
.mobile-lang-switcher > a {
  color: var(--color-white);
}

/* Sits near the right edge of the viewport (next to the burger button), so
   anchor the dropdown to its right edge instead of .hd-drop-link.shop's
   default left:0% — opening leftward instead of rightward keeps it from
   overflowing off the edge of the screen. */
.mobile-lang-switcher .sub-menu {
  left: auto;
  right: 0;
}

/* responsive.css sets .lang-name to white unconditionally, for the drawer's
   dark-blue background — this dropdown keeps the default white background
   instead, so that rule makes "EN"/"RU" invisible (white on white). Restore
   a readable color, and re-add the white-on-green hover state it also lost. */
.mobile-lang-switcher .lang-name {
  color: var(--color-black);
}

.mobile-lang-switcher .sub-menu li:hover .lang-name {
  color: var(--color-white);
}

.mobile-header-actions {
  gap: 18px;
}

/* Header Product-Category search — icon-only trigger at every width (see
   the "site's one RO language switcher" comment above for why a single
   element working at every breakpoint, rather than separate desktop/mobile
   markup, is the established pattern here). White like the burger icon and
   language switcher: the Header is either transparent-over-dark-Hero or
   solid --primary-blue when scrolled/menu-open — white reads cleanly on
   both, so no extra state-based color swap is needed. */
.header-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px touch target (was 30px) — the visible icon stays the same size via
     font-size, this only grows the actual hit area/padding around it. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-white);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  /* Explicit — this is the one place a stray ancestor rule (e.g. a decorative
     ::before/::after or an EditMode overlay) could otherwise leave the
     button unclickable despite being visibly on top. */
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.category-search-widget--header {
  position: relative;
}

.header-search-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 14px;
  background: var(--color-white, #fff);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.category-search-widget--header._active .header-search-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* .header-search-panel already sits inside <header>'s own stacking context
   (--z-header, above the mobile drawer/backdrop — see the header z-index
   comment further up), so its own contents just need to paint above the
   panel's siblings within that context; no extra z-index scale entry
   needed here. */
.category-search-widget--header .category-search-field {
  box-shadow: none;
  border-color: var(--light-gray-2, #e1e4e6);
  padding: 10px 14px;
}

.category-search-widget--header .category-search-results {
  position: static;
  box-shadow: none;
  border: 1px solid var(--light-gray-1, #f2f2f2);
  margin-top: 8px;
  max-height: 320px;
  transform: none;
}

.category-search-widget--header .category-search-results._active {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 430.98px) {
  .header-search-panel {
    width: calc(100vw - 32px);
    right: -10px;
  }
}

/* Below 1200px the Header search icon opens the global .category-search-modal
   (see views/partials/_category-search-modal.php + script.js
   MOBILE_SEARCH_BREAKPOINT) instead of this inline panel — script.js never
   adds ._active to the widget on mobile, but this is a defensive belt/braces
   hide matching responsive.css's own max-width: 1199.98px convention, in
   case anything ever toggles the class at this width regardless. */
@media (max-width: 1199.98px) {
  .header-search-panel {
    display: none !important;
  }
}

/* ── Mobile Product-Category search MODAL ──────────────────────────────
   Wrapper reuses the project's existing .modal-overlay system (app.css,
   "MODAL WINDOW" section) — same fixed full-screen dim backdrop, same
   proven z-index: 1000 (already above --z-header:700/--z-drawer:600/
   --z-backdrop:500, and above the language dropdown which lives inside
   the Header's own, lower context) — deliberately not a new ad hoc value.
   Only .category-search-modal-body below is this component's own. */
.category-search-modal-body {
  width: calc(100% - 24px);
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--color-white, #fff);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  padding: 24px;
  /* Fade + small translateY, not .modal-body's bottom-slide (that's the
     Product Quick View's own, larger two-column layout's effect). */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.category-search-modal._active .category-search-modal-body {
  opacity: 1;
  transform: translateY(0);
}

.category-search-modal-header {
  margin-bottom: 16px;
}

.category-search-modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: var(--primary-blue);
}

.category-search-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  background: var(--light-gray-1, #f2f2f2);
  border-radius: 50%;
  color: var(--color-black, #1c1b1b);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.category-search-modal-close:hover {
  background: var(--light-gray-2, #e1e4e6);
}

.category-search-modal .category-search-field {
  box-shadow: none;
  border: 1px solid var(--light-gray-2, #e1e4e6);
  padding: 12px 16px;
}

.category-search-modal .category-search-results {
  position: static;
  box-shadow: none;
  border: 1px solid var(--light-gray-1, #f2f2f2);
  margin-top: 10px;
  max-height: 50vh;
  transform: none;
  opacity: 1;
  visibility: visible;
  /* The shared JS still toggles ._active on this element for
     open/no-results/loading states, but the modal itself is what's
     hidden/shown — this stays visible whenever it has content, no separate
     fade needed on top of the modal's own. */
}

.category-search-modal .category-search-results:empty {
  display: none;
}

/* Desktop never sees this modal (Header icon opens the inline panel
   instead, see script.js) — this media query only documents/enforces
   intent, matching the same 1200px breakpoint used throughout the mobile
   Header/menu system. */
@media (min-width: 1200px) {
  .category-search-modal {
    display: none !important;
  }
}

/* Explicit visual order for this shared action bar (used at every width —
   see the "site's one RO language switcher" comment above), independent of
   DOM order: Phone, CTA, then Search immediately before Language, then the
   burger last. Phone/CTA are hidden at xxl-down (responsive.css), leaving
   exactly "Search, Language, Burger" on mobile, as required. Previously the
   language switcher alone had order:-1 (jumping ahead of Search); now every
   sibling has an explicit position so the relationship is unambiguous. */
.mobile-header-actions .header-actions-item {
  order: 1;
}

.mobile-header-actions .header-cta-item {
  order: 2;
}

.mobile-header-actions .category-search-widget--header {
  order: 3;
}

.mobile-header-actions .mobile-lang-switcher {
  order: 4;
}

.mobile-header-actions .menu-icon {
  order: 5;
}

/* Phone + CTA moved here from inside .menu-links (still .header-actions-item
   / .header-cta-item, now <div>s instead of <li>s). responsive.css's
   breakpoint rules for those classes assume they're still list items —
   .header-actions-item{display:none!important} at xxl-down and
   {display:list-item!important} inside the drawer (wrong box type for a
   div, and would leave a stray marker) — override both with a selector
   specific enough (2 classes) to outrank them despite the shared !important. */
.mobile-header-actions .header-actions-item,
.mobile-header-actions .header-cta-item {
  display: flex !important;
}

/* The phone icon's circular badge (.phone-wrapper i, further down) ties
   on specificity with the generic .contact-wrapper i and only wins on
   source order — border-radius alone did nothing because .contact-wrapper i's
   background-color: transparent was still winning too, leaving a round but
   invisible (fill-less) circle. Pin every property the badge needs here so
   it renders regardless of where either rule ends up relative to the other. */
.mobile-header-actions .contact-wrapper.phone-wrapper i,
.nav-footer-actions .contact-wrapper.phone-wrapper i {
  border-radius: 50%;
  background: var(--color-white);
  color: var(--primary-green);
  padding: 10px 10px;
}

/* Second copy of phone + CTA, living inside the drawer (<nav>, after
   .menu-links) instead of the collapsed header row — see responsive.css
   for the breakpoint that shows this one (pinned to the bottom of the
   open drawer) and hides .mobile-header-actions's copy instead, so only
   one is ever visible at a time. !important: Bootstrap's .d-flex utility
   on this element is itself display: flex !important. */
.nav-footer-actions {
  display: none !important;
}

/* dropMenu() (script.js) toggles ._active by click below 1200px, which is
   exactly when this element is visible — the desktop :hover/:focus-within
   reveal (app.css, .hd-drop-link:hover .sub-menu) doesn't fire on touch,
   so drive the same reveal off ._active here instead. */
.mobile-lang-switcher .sub-menu._active {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu-links li {
  position: relative;
}

/* .menu-links li .sub-menu {
  position: absolute;
  top: 250%;
  left: -50%;
  width: 250px;
  background-color: var(--color-white);
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.menu-links li .sub-menu:after,
.menu-links li .sub-menu:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.menu-links li .sub-menu:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: var(--color-white);
  border-width: 10px;
  left: 50%;
  margin-left: -10px;
}

.menu-links li .sub-menu:before {
  border-width: 20px;
  left: 50%;
  margin-left: -20px;
}

.menu-links li .sub-menu li {
  transition: all 0.3s ease-in-out;
}

.menu-links li .sub-menu li a {
  display: flex;
  padding: 12.5px 15px;
  cursor: pointer;
}

.menu-links li .sub-menu li:hover {
  background-color: var(--primary-green);
}

.menu-links li .sub-menu._active {
  top: 205%;
  visibility: visible;
  opacity: 1;
} */

.hd-drop-link {
  position: relative;
}

/* submenu */
.hd-drop-link .sub-menu {
  position: absolute;
  top: 110%;
  left: -25%;
  overflow: hidden;
  min-width: 30px;
  background: #fff;
  border-radius: 8px;
  text-wrap: nowrap;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.18),
    0 6px 12px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s ease;
  z-index: 1000;
}

.hd-drop-link.shop .sub-menu {
  position: absolute;
  top: 110%;
  left: 0%;
}

.hd-drop-link.products-drop .sub-menu {
  position: absolute;
  top: 110%;
  left: 0%;
  min-width: 190px;
}

/* Right-aligned (not left, like .products-drop) — "More" is the last item
   in the row, so a left-aligned panel would overflow past the viewport's
   right edge. */
.hd-drop-link.more-drop .sub-menu {
  position: absolute;
  top: 110%;
  left: auto;
  right: 0;
  min-width: 170px;
}

/* show dropdown */
.hd-drop-link:hover .sub-menu,
.hd-drop-link:focus-within .sub-menu {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* submenu links */
.sub-menu li a {
  padding: 5px 10px;
  display: flex;
  color: var(--color-black);
  text-decoration: none;
  font-size: 16px;
}

.sub-menu li {
  transition: all 0.25s ease;
}

.sub-menu li:hover {
  background: var(--primary-green);
}

.sub-menu li:hover a {
  color: var(--color-white)
}

/* Same accent as the top-level nav (--header-active-color) for whichever
   "More" child matches the current route (see $subLinkClass in
   views/layouts/main.php: Gallery/FAQ/Fabrica). Kept above the :hover rule
   so hovering a *different* item never dims the actually-active one. */
.sub-menu li a.current-page {
  color: var(--header-active-color);
  font-weight: 600;
}

.sub-menu li:hover a.current-page {
  color: var(--color-white);
}

/* Mobile-only "back" row inside a sliding sub-menu panel (see responsive.css).
   !important: the element also carries Bootstrap's .d-flex utility class,
   which is display: flex !important. */
.sub-menu-back {
  display: none !important;
}


/* rotate arrow */
.hd-drop-link:hover .hd-drop-smb {
  transform: rotate(180deg);
}

.hd-drop-smb {
  margin-left: 6px;
  transition: transform 0.25s ease;
}

.menu-links a {
  gap: 5px;
  color: var(--color-white);
  font-weight: 500;
  font-size: 17px;
  line-height: var(--line-height-150);
  text-transform: capitalize;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.main-nv-ln {
  position: relative;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}

/* Marks the nav link for the section currently being viewed (see
   $navLinkClass in views/layouts/main.php — computed from the current
   controller, e.g. Products stays active on the catalog/category/product
   routes, More stays active on gallery/faq/fabric). One warm-gold accent,
   identical on the transparent Hero Header and the dark-blue scrolled
   Header — intentionally NOT --primary-green, which read inconsistently
   across both Header backgrounds and clashed with the green CTA button.
   Same var used by the mobile drawer and the More dropdown's active child
   below, so there is exactly one place to change this color. */
.main-nv-ln.current-page {
  color: var(--header-active-color);
}

.main-nv-ln.current-page::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--header-active-color);
}

/* The dropdown trigger ("More") shows the underline on itself; its own
   chevron icon should pick up the same accent instead of green while
   active, so it doesn't read as two different "this is active" colors. */
.main-nv-ln.current-page .hd-drop-smb {
  color: var(--header-active-color);
}

/* Hover on an inactive link gets a warm tint (not the full active gold —
   that stays reserved for "this is the current page") so hovering never
   reads as if you'd already navigated there. */
.main-nv-ln:not(.current-page):hover {
  color: #ffe9c2;
}

.main-nv-ln.current-page:hover {
  color: var(--header-active-color);
}

.hd-drop-smb {
  transition: all 0.2s ease-in-out;
}

.hd-drop-smb._active {
  transform: rotate(180deg);
  color: var(--primary-green);
}

.header-contacts {
  gap: 40px;
  cursor: pointer;
}

.header-contacts .search-bar {
  width: 350px;
}

.search-wrapper {
  position: relative;
}

.search-wrapper i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #cccccc;
}

.header-contacts .search-bar input {
  width: 100%;
  padding: 10px;
  border-radius: var(--border-radius-12);
  outline: none;
  border: 1px solid #d9d9d9;
  font-size: 14px;
}

.header-contacts .live-search {
  position: relative;
  max-width: 400px;
}

.results {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  z-index: 100;
}

.result-item {
  display: flex;
  gap: 12px;
  padding: 10px;
  text-decoration: none;
  color: #000;
  transition: background 0.2s;
}

.result-item:hover {
  background: #f5f7fa;
}

.result-item img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 8px;
}

.result-item .title {
  font-size: 16px;
  font-weight: 500;
  display: block;
}

.result-item .price {
  font-size: 13px;
  color: #777;
}

.no-result {
  padding: 12px;
  text-align: center;
  color: #999;
}

.contact-wrapper {
  gap: 0px;
}

.contact-wrapper span {
  font-size: 15px;
  line-height: var(--line-height-150);
  color: var(--color-black);
  font-weight: 500;
  transition: all 0.3s ease-in-out;
}

.contact-wrapper i {
  font-size: 18px;
  color: var(--primary-green);
  padding: 12px;
  /* border: 2px solid var(--color-black);
  border-radius: var(--border-rounded); */
  position: relative;
  transition: all 0.3s ease-in-out;
  background-color: transparent;
}

/* .contact-wrapper:hover i {
  background-color: var(--primary-green);
} */

.contact-wrapper:hover span {
  color: var(--primary-green);
}

.header-shop-icon {
  position: relative;
}

.header-shop-icon i {
  font-size: 28px;
  color: #297050;
}

.header-shop-icon span {
  font-size: 16px;
  color: #297050;
  text-transform: capitalize;
}

.header-shop-icon span.counter {
  position: absolute;
  top: 0;
  padding: 3px;
  right: -15px;
  font-size: 11px;
  border-radius: var(--border-rounded);
  color: var(--color-white);
  background-color: var(--primary-green);
  width: 18px;
  height: 18px;
}

.get-quote {
  display: inline-block;
  color: var(--color-white);
  background-color: var(--primary-green);
  padding: 16px 50px;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 500;
  border: none;
  border-radius: var(--border-radius-24);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.get-quote:hover {
  animation: pulse-animation 1.5s infinite;
}

.header-cta {
  display: flex;
  align-items: center;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 15px 25px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--border-radius-24);
  white-space: nowrap;
  transition: all 0.3s ease-in-out;
}

.header-cta:hover {
  margin-bottom: 5px;
}

.menu-icon {
  z-index: 5;
  display: block;
  position: relative;
  width: 30px;
  height: 18px;
  cursor: pointer;
  margin-left: 5px;
  display: none;
}

.menu-icon span,
.menu-icon::before,
.menu-icon::after {
  left: 0;
  position: absolute;
  height: 10%;
  width: 100%;
  transition: all 0.5s ease;
  background-color: var(--color-white);
}

.menu-icon::before,
.menu-icon::after {
  content: "";
  transform: perspective(1px) scale(1) translate3d(0, 0, 0);
}

.menu-icon::before {
  top: 0;
}

.menu-icon::after {
  bottom: 0;
}

.menu-icon span {
  top: 50%;
  transform: perspective(1px) scale(1) translate(0px, -50%) translate3d(0, 0, 0);
}

.menu-icon._active span {
  transform: scale(0) translate(0px, -50%);
}

.menu-icon._active::before {
  top: 50%;
  transform: rotate(-45deg) translate(0px, -50%);
}

.menu-icon._active::after {
  bottom: 50%;
  transform: rotate(45deg) translate(0px, 50%);
}

/***** End Header *****/

/***** CART *****/
/***** STEPS *****/
.checkout-steps.small {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-bottom: 24px;
}

/* BACK LINE */
.checkout-steps.small::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  /* half circle width */
  right: 16px;
  /* half circle width */
  height: 2px;
  background: #e5e7eb;
  z-index: 0;
}

/* PROGRESS LINE */
.checkout-steps.small::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  /* half circle width */
  height: 2px;
  background: var(--primary-green);
  width: var(--progress, 0%);
  transition: width 0.4s ease;
  z-index: 0;
}

/* STEP */
.checkout-steps.small .step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 50px;
}

/* CIRCLE */
.checkout-steps.small .step-index {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  transition: all 0.3s ease;
}

/* LABEL */
.checkout-steps.small .step-label {
  font-size: 12px;
  color: #6b7280;
}

/* DONE */
.checkout-steps.small .step._done .step-index {
  background: #198754;
  border-color: #198754;
  color: #fff;
}

.checkout-steps.small .step._done .step-label {
  color: #198754;
}

/* ACTIVE */
.checkout-steps.small .step._active .step-index {
  border-color: var(--primary-green);
  color: var(--primary-green);
  box-shadow: 0 0 0 6px rgba(13, 110, 253, 0.15);
}

.checkout-steps.small .step._active .step-label {
  color: var(--primary-green);
  font-weight: 600;
}

/* MOBILE */
@media (max-width: 768px) {

  .checkout-steps.small::before,
  .checkout-steps.small::after {
    left: 12px;
    right: 12px;
  }

  .checkout-steps.small .step-index {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .checkout-steps.small .step-label {
    font-size: 11px;
  }
}

/***** End STEPS *****/

/***** added cart modal *****/
/* ===== Overlay ===== */
.added-to-cart-overlay {
  position: fixed;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1055;
  backdrop-filter: blur(2px);
}

.added-to-cart-overlay._active {
  opacity: 1;
  visibility: visible;
}

/* ===== Popup box ===== */
.added-to-cart-box {
  width: 460px;
  max-width: calc(100% - 32px);
  border-radius: 16px;
  animation: cartPopupIn 0.25s ease;
}

.added-to-cart-box .added-header {
  margin-bottom: 18px;
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 15px;
}

.added-to-cart-box h6 {
  font-size: 16px;
  color: var(--color-black);
  font-weight: 500;
  line-height: var(--line-height-135);
  transition: all 0.2s ease-in-out;
}

.added-to-cart-box h6:hover {
  color: var(--primary-green);
}

/* ===== Animation ===== */
@keyframes cartPopupIn {
  from {
    transform: scale(0.92) translateY(10px);
    opacity: 0;
  }

  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* ===== Product image ===== */
.added-to-cart-box img {
  width: 125px;
  height: 125px;
  object-fit: cover;
}

.added-to-cart-box .qty {
  font-size: 14px;
  font-weight: 500;
}

.modal-added-img-wr .badge-discount {
  position: absolute;
  top: -2px !important;
  left: 5px;
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}

/* ===== Close button hover ===== */
.added-to-cart-box .btn-close {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.added-to-cart-box .btn-close:hover {
  opacity: 1;
}

/* ===== Buttons spacing ===== */

.added-to-cart-box .added-actions button,
.added-to-cart-box .added-actions a {
  font-size: 16px;
  padding: 15px 10px;
  width: 50%;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
  font-weight: 400;
}

.added-to-cart-box .added-actions button {
  border: none;
  background-color: #e6e6e6;
}

.added-to-cart-box .added-actions a {
  background-color: var(--primary-green);
  color: var(--color-white);
}

.added-to-cart-box .added-actions a:hover {
  background-color: #297050;
}

.added-to-cart-box .added-actions button:hover {
  background-color: #595959;
  color: var(--color-white);
}

/* ===== Mobile tweaks ===== */
@media (max-width: 480px) {
  .added-to-cart-box {
    width: 100%;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    animation: cartPopupMobile 0.25s ease;
  }

  @keyframes cartPopupMobile {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }
}

/***** End added cart modal *****/

/***** CHECKOUT PAGE *****/

.checkout-form .row label.form-label {
  font-size: 14px;
}

/***** End CHECKOUT PAGE *****/

/***** CART TOTALS *****/
.totals-wrapper {
  max-width: 30%;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: sticky !important;
  height: auto;
  top: 10px;
  left: 0;
  /* margin-top: 100px; */
}

.info-text {
  font-size: 16px;
  line-height: 165%;
  color: #181d25;
  font-weight: 400;
  background-color: #ebf7f0;
  padding: 10px;
  border-radius: 12px;
}

.info-text .item-succes {
  color: #297050;
  font-weight: 600;
}

.info-text i {
  font-size: 22px;
  color: #297050;
  margin-right: 4px;
}

.totals-header {
  margin-top: 10px;
  padding: 10px 10px;
  border-bottom: 1px solid #f2f2f2;
}

.totals-header h3 {
  font-size: 24px;
  font-weight: 400;
  color: var(--color-primary);
  padding: 0px 0px 0px 0px;
  margin-bottom: 0;
}

.totals-header .edit-cart {
  color: var(--text-color);
  font-size: 14px;
  transition: all 0.2s ease-in-out;
}

.totals-header .edit-cart:hover {
  color: var(--primary-green);
}

.totals-body .total-products img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
}

.totals-body .total-products .other-img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  background-color: #f2f2f2;
}

.totals-body .total-products .other-img span {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}

.chk-view-all-btn {
  border: none;
  outline: none;
  font-size: 14px;
  padding: 10px;
  border-radius: 4px;
  background-color: var(--primary-green);
  color: var(--color-white);
  transition: all 0.2s ease-in-out;
}

.chk-view-all-btn:hover {
  background-color: #297050;
}

.totals-body .body-item {
  padding-bottom: 10px;
}

.totals-body .body-item.total {
  padding-top: 20px;
  border-bottom: none;
  border-top: 1px solid #f2f2f2;
}

.totals-body .body-item h3 {
  font-size: 16px;
  color: var(--text-color);
  font-weight: 500;
}

.totals-body .body-item span {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-black);
}

.totals-body .body-item .promo-label {
  font-size: 14px;
  color: var(--color-black);
}

.totals-body .body-item h3.total {
  font-size: 18px;
  color: var(--text-color);
}

.totals-body .body-item span.total {
  font-size: 18px;
  color: var(--color-black);
}

.totals-body .body-item.promo-code input {
  width: 65%;
}

.totals-body .body-item.promo-code button {
  width: 35%;
}

.totals-body .body-item.promo-code input,
.totals-body .body-item.promo-code button {
  padding: 7px;
  font-size: 16px;
  border-radius: 4px;
  outline: none;
}

.totals-body .body-item.promo-code input {
  border: 1px solid #bfbfbf;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.totals-body .body-item.promo-code button {
  border: none;
  background-color: var(--primary-green);
  color: var(--color-white);
  letter-spacing: 1.1px;
  transition: all 0.2s ease-in-out;
}

.totals-body .body-item.promo-code button:hover {
  background-color: #297050;
}

.totals-body .body-item.promo-code .promo-list .promo-success {
  font-size: 14px;
  color: #297050;
  font-weight: 600;
}

.totals-body .body-item.promo-code .promo-list i {
  font-size: 30px;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.totals-body .body-item.promo-code .promo-list i:hover {
  color: #e74c3c;
}

.totals-body .body-item.promo-code .promo-list .promo-success span {
  font-size: 14px;
  color: var(--primary-green);
}

.checkout-button {
  border: none;
  outline: none;
  font-size: 18px;
  padding: 13px 40px;
  border-radius: 8px;
  color: var(--color-white) !important;
  font-weight: 500;
  text-decoration: none;
  background-color: var(--primary-green);
  transition: all 0.3s ease-in-out;
  letter-spacing: 1.1px;
}

.continue-shoppoing {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-color);
  transition: all 0.2s ease-in-out;
}

.points-info {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-color);
  transition: all 0.2s ease-in-out;
}

.continue-shoppoing:hover {
  color: var(--color-black);
}

.checkout-button i {
  font-size: 18px;
  margin-right: 5px;
}

.checkout-button:hover {
  background-color: #297050;
}

/***** End CART TOTALS *****/

/***** CART-MODAL *****/

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1500;
  visibility: hidden;
  opacity: 0;
  inset: 0;
  /* transition: all 0.4s ease-in-out; */
}

/* .modal-overlay .modal-backdrop {
  inset: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
} */
.modal-overlay._active {
  visibility: visible;
  opacity: 1;
}

.modal-body-class {
  /* transition: all 0.5s ease-in-out; */
  transition-delay: 0.2s;
  position: relative;
  bottom: -100%;
  opacity: 1;
  visibility: hidden;
}

.modal-overlay._active .modal-body-class {
  visibility: visible;
  opacity: 1;
  bottom: 0;
}

.modal-body-right {
  /* transition: all 0.5s ease-in-out; */
  transition-delay: 0.2s;
  position: relative;
  opacity: 0;
  visibility: hidden;
  right: -100%;
  height: 100%;
}

.modal-overlay._active .modal-body-right {
  visibility: visible;
  opacity: 1;
  visibility: visible;
  right: 0;
}

.cart-shop-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  padding: 0px 10px 10px 10px;
  background-color: #fff;
  box-shadow: 0 -10px 10px -10px #d9d9d9;
  border: 1px;
  margin-top: auto;
}

.cart-scroll-body {
  max-height: 450px;
  min-height: 320px;
}

.add-cart-modal-body {
  max-width: 450px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  /* padding: 20px; */
  overflow-y: scroll;
}

/* width */
.add-cart-modal-body::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.add-cart-modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  margin-top: 70px;
}

.add-cart-modal-body::-webkit-scrollbar-button {
  height: 12px;
}

/* Handle */
.add-cart-modal-body::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.add-cart-modal-body::-webkit-scrollbar-thumb:hover {
  background: #8c8c8c;
}

.add-cart-modal-body .cart-md-header {
  top: 0;
  left: 0;
  position: sticky;
  width: 100%;
  background-color: #fff;
  padding: 20px;
  z-index: 100;
}

.additional-info-oreder span {
  font-size: 14px;
  color: var(--text-color);
  font-weight: 500;
}

.add-cart-modal-body .cart-md-header.checkout {
  top: 0;
  left: 0;
  position: sticky;
  width: 100%;
  background-color: #fff;
  padding: 20px;
}

.add-cart-modal-body .cart-md-header h3 {
  font-size: 22px;
}

.add-cart-modal-body .cart-md-header h3 i {
  color: var(--primary-green);
}

.detail-block {
  padding: 5px 15px;
}

.detail-block h3 {
  font-size: 16px;
  font-weight: 500;
}

.detail-item-row-md .prim,
.detail-item-row-md .second {
  font-size: 14px;
  font-weight: 500;
}

.cart-md-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 -10px 10px -10px #d9d9d9;
  border: 1px;
  margin-top: auto;
}

.cart-md-total h5 {
  font-size: 20px;
}

.cart-md-total p {
  font-size: 14px;
}

.cart-md-button {
  display: flex;
  width: 100%;
  margin-top: 20px;
}

.cart-md-button a {
  width: 50%;
  font-size: 16px;
  color: #ffffff;
  border-radius: var(--border-radius-8);
  line-height: 1;
  padding: 16px 26px;
  background-color: var(--primary-green);
  font-family: "Quicksand", sans-serif;
  outline: none;
  transition: all 0.2s ease-in-out;
  opacity: 0.7;
  font-weight: 600;
}

.cart-md-button a.outline {
  background-color: #cccccc;
  color: #595959;
}

.cart-md-button a:hover {
  opacity: 1;
}

/* .history-aside-overlay .cart-md-products-wrap {
  border-bottom: 2px solid #e6e6e6;
} */

.cart-md-products-wrap {
  padding: 20px;
  gap: 25px;
}

.cart-md-products-wrap .product {
  margin: 0;
  padding: 0;
}

/* Discount badge */
.product-img .badge-discount {
  position: absolute;
  top: -5px !important;
  left: 8px;
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}

.cart-md-products-wrap .product img {
  max-width: 125px;
  width: 100;
  height: 125px;
}

.cart-md-products-wrap .product .product-cart-title {
  margin-top: 7px;
}

.cart-md-products-wrap .product .product-cart-title h3 a {
  color: var(--color-black) !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 135%;
  transition: all 0.2s ease-in-out;
}

.cart-md-products-wrap .product .product-cart-title h3 a:hover {
  color: var(--primary-green) !important;
}

.cart-md-products-wrap .product .product-cart-title h4 {
  font-size: 14px;
  font-weight: 500;
  margin-top: 5px;
}

.cart-md-products-wrap .product .product-cart-title h4.qty {
  font-size: 13px;
  color: var(--text-color);
  display: inline-flex;
  /* or inline-block */
  align-self: flex-start;
}

.cart-md-products-wrap .product .product-cart-title h4.qty .price-old {
  position: absolute;
  top: -8px;
  right: -30px;
  font-size: 11px;
  color: var(--text-color);
}

.cart-md-products-wrap .product .product-cart-title h4.qty .price-new {
  font-size: 14px;
  color: var(--text-color);
}

/***** End CART-MODAL *****/

/* ===== WRAPPER ===== */

.cart-parent {
  margin-top: 100px;
}

.cart-layer {
  max-width: 74%;
  width: 100%;
}

.cart-info a {
  font-size: 16px;
  color: var(--text-color);
  transition: 0.2s ease-in-out;
}

.cart-info a:hover {
  color: #c82333;
}

.cart-info a.view-cart-info {
  font-size: 14px;
}

.cart-info a.view-cart-info:hover {
  color: var(--primary-green);
}

.cart-info .hd-cart p {
  font-size: 14px;
  font-weight: 400;
}

.cart-info .hd-cart p span {
  font-weight: 600;
}

.cart-info h3 {
  font-size: 24px;
  font-weight: 500;
}

.cart-wrapper {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  width: 100%;
}

/* ===== TABLE ===== */
.cart-table {
  width: 100%;
  border-collapse: collapse;
}

.sortable {
  cursor: pointer;
  user-select: none;
}

.sortable::after {
  content: " ⇅";
  opacity: 0.4;
}

.cart-table._history th {
  text-transform: capitalize !important;
}

span.circle {
  width: 10px;
  height: 10px;
  border-radius: var(--border-rounded);
  background-color: var(--primary-green);
}

.text-item span {
  font-size: 14px;
}

.cart-table td {
  padding: 18px;
  border-bottom: 1px solid #f1f1f1;
  vertical-align: middle;
}

td.details button {
  padding: 10px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  background-color: var(--primary-green);
  color: var(--color-white);
  transition: all 0.2s ease-in-out;
}

td.details button:hover {
  background-color: #297050;
}

/* ===== PRODUCT ===== */
.cart-product {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cart-product img {
  width: 125px;
  height: 125px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #eee;
}

.cart-product-info strong a {
  color: var(--color-dark-blue);
  display: block;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
  max-width: 250px;
  line-height: var(--line-height-150);
}

.cart-product-info strong a:hover {
  color: var(--primary-green);
  text-decoration: underline;
}

.cart-code {
  display: block;
  font-size: 14px;
  color: #888;
}

.stock {
  font-size: 14px;
}

.in-stock {
  color: #2ecc71;
}

.out-stock {
  color: #e74c3c;
}

/* ===== PRICE ===== */
.cart-price {
  white-space: nowrap;
}

.price-old {
  display: block;
  font-size: 14px;
  color: #aaa;
  text-decoration: line-through;
}

.price-new {
  font-size: 16px;
  font-weight: 600;
}

.cart-price .badge-discount {
  display: inline-flex;
  /* or inline-block */
  align-self: flex-start;
  margin: 0;
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 6px;
  color: var(--color-white);
}

/* ===== QTY ===== */
.qty-control {
  display: inline-flex;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.qty-control.md-cart {
  display: inline-flex;
  /* or inline-block */
  align-self: flex-start;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 5px;
}

.qty-control button {
  width: 34px;
  height: 34px;
  border: none;
  background: #f7f7f7;
  cursor: pointer;
}

.qty-control input {
  width: 44px;
  border: none;
  text-align: center;
  outline: none;
}

/* ===== TOTAL ===== */
.cart-total {
  font-size: 16px;
  font-weight: 700;
}

/* ===== REMOVE ===== */
.cart-remove {
  background: none;
  border: none;
  font-size: 22px;
  color: #bbb;
  cursor: pointer;
}

.cart-remove:hover {
  color: #ff4d4f;
}

.payment-card {
  display: block;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid #e6e9ec;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
}

.payment-card:hover {
  border-color: var(--primary-green);
  box-shadow: 0 4px 12px rgba(66, 184, 131, 0.15);
}

.btn-check:checked+.payment-card {
  /* border-color: var(--primary-green); */
  background: var(--primary-green);
  box-shadow: none;
}

.btn-check:checked+.payment-card .payment-title,
.btn-check:checked+.payment-card .payment-subtitle,
.btn-check:checked+.payment-card .payment-icon {
  color: var(--color-white);
}

.payment-title {
  font-weight: 600;
  font-size: 16px;
  color: #212529;
}

.payment-subtitle {
  font-size: 13px;
  color: #6c757d;
  margin-top: 10px;
}

.payment-icon {
  font-size: 26px;
  color: var(--primary-green);
}

.payment-img {
  width: 35px;
  height: auto;
}

.agreement-check {
  margin-top: 20px;
}

.agreement-check .form-check-input {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #42b883;
  cursor: pointer;
}

.agreement-check .form-check-input:checked {
  background-color: #42b883;
  border-color: #42b883;
}

.agreement-check .form-check-input:focus {
  box-shadow: 0 0 0 0.15rem rgba(66, 184, 131, 0.25);
}

.agreement-check .form-check-label {
  margin-left: 8px;
  font-size: 16px;
  color: #495057;
  margin-top: 6px;
}

.agreement-check .form-check-label a {
  color: #42b883;
  text-decoration: none;
  font-weight: 500;
}

.agreement-check .form-check-label a:hover {
  text-decoration: underline;
}

/***** End CART *****/

/***** Main  *****/

main._homepage {
  flex: 1 1 auto;
  overflow: hidden;
}

main._page {
  margin-top: 75px;
  margin-bottom: 50px;
}

.text-info-about-us {
  font-size: 16px;
  color: var(--text-color);
  font-weight: normal;
  line-height: var(--line-height-175);
}

/***** Why Choose Us / Our Benefits *****/

.why-choose-us {
  background-color: var(--color-bg-secondary);
  padding: 60px 0;
}

.why-choose-us .text-wrapper p {
  max-width: 750px;
}

.our-benefits-card {
  height: 100%;
  background: var(--color-white);
  border-radius: var(--border-radius-12);
  gap: 14px;
  text-align: left;
  padding: 32px 28px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.our-benefits-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

.our-benefits-card i {
  font-size: 34px;
  color: var(--primary-green);
  transition: all 0.3s ease-in-out;
}

.our-benefits-card h3 {
  font-size: 19px;
  line-height: var(--line-height-150);
  color: var(--color-dark-blue);
  font-weight: 600;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.our-benefits-card p {
  font-size: 15px;
  line-height: var(--line-height-175);
  color: var(--text-color);
  font-weight: 300;
}

/***** End Why Choose Us / Our Benefits *****/


/***** Main Slider homepage (index) *****/

.main-slider__slide {
  position: relative;
}

.main-slider__slide .img-wrapper {
  position: relative;
  width: 100%;
  padding: 0 0 47% 0;
}

.main-slider__slide .img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(55%);
}

.main-slider__slide .main-slider__text {
  /* A real left offset + a width that leaves matching room on the right,
     instead of left:X% + translateX(-50%) "centering" a fixed-width box —
     that trick put the block's actual edge at X%*containerWidth minus half
     the box's own width, which went negative (text clipped off the left
     edge) at several viewport widths once the box no longer had room to
     shrink. Percentages here scale safely at any width, so the many
     per-breakpoint left:X% !important overrides are gone. */
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  color: var(--color-white);
  gap: 10px;
  max-width: 800px;
  width: 84%;
}

/* 
.main-slider__slide.swiper-slide-active .main-slider__text {
  animation: leftright 2s;
} */

/* .main-slider__wrapper
  .main-slider__slide:nth-child(2n)
  .main-slider__text {
  left: unset;
  right: 0;
} */

.main-slider__slide .main-slider__text .text__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-white);
}

.main-slider__slide .main-slider__text .text__label::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--color-white);
}

.main-slider__slide .main-slider__text h2 {
  font-family: "Inter", sans-serif;
  font-size: 70px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: var(--line-height-115);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.main-slider__slide .main-slider__text p {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: var(--line-height-150);
  color: rgba(255, 255, 255, 0.85);
  max-width: 480px;
  margin-bottom: 20px;
}

.main-slider__actions {
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 4px;
}

.main-slider__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.main-slider__phone {
  gap: 10px;
  padding: 6px 22px 6px 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-white);
  transition: background-color 0.2s ease-in-out;
}

.main-slider__phone i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--primary-green);
  font-size: 14px;
}

.main-slider__phone span {
  font-size: 15px;
  font-weight: 600;
}

.main-slider__phone:hover {
  background: rgba(255, 255, 255, 0.22);
}

.main-slider__slide .main-slider__text .slider__link {
  margin-left: 20px;
}

.main-slider__slide .main-slider__text .text__label,
.main-slider__slide .main-slider__text h2,
.main-slider__slide .main-slider__text p,
.main-slider__slide .main-slider__text .slider__link,
.main-slider__slide .main-slider__text .main-slider__actions {
  position: relative;
  left: 0;
}

/* .main-slider__wrapper
  .main-slider__slide:nth-child(2n)
  .main-slider__text
  h2,
.main-slider__wrapper
  .main-slider__slide:nth-child(2n)
  .main-slider__text
  p,
.main-slider__wrapper
  .main-slider__slide:nth-child(2n)
  .main-slider__text
  .slider__link {
  left: unset;
  right: 0;
} */

.main-slider__wrapper .main-slider__slide.swiper-slide-active .main-slider__text .text__label {
  animation: leftright 1.5s;
}

.main-slider__wrapper .main-slider__slide.swiper-slide-active .main-slider__text h2 {
  animation: leftright 2s;
}

.main-slider__wrapper .main-slider__slide.swiper-slide-active .main-slider__text p {
  animation: leftright 2.5s;
}

.main-slider__wrapper .main-slider__slide.swiper-slide-active .main-slider__text .slider__link {
  animation: leftright 3s;
}

.main-slider__wrapper .main-slider__slide.swiper-slide-active .main-slider__text .main-slider__actions {
  animation: leftright 3s;
}

/* .main-slider__wrapper
  .main-slider__slide.swiper-slide-active:nth-child(2n)
  .main-slider__text
  h2 {
  animation: rightleft 2s;
}
.main-slider__wrapper
  .main-slider__slide.swiper-slide-active:nth-child(2n)
  .main-slider__text
  p {
  animation: rightleft 2.5s;
}
.main-slider__wrapper
  .main-slider__slide.swiper-slide-active:nth-child(2n)
  .main-slider__text
  .slider__link {
  animation: rightleft 3s;
} */

@keyframes leftright {

  0%,
  20% {
    opacity: 0;
    left: -100%;
  }

  80%,
  100% {
    opacity: 1;
    left: 0;
  }
}

/* @keyframes rightleft {
  0%,
  20% {
    left: unset;
    opacity: 0;
    right: -100%;
  }
  80%,
  100% {
    left: unset;
    opacity: 1;
    left: 0;
  }
} */

.main-slider .swiper-pagination .swiper-pagination-bullet {
  width: 45px;
  height: 7px;
  background-color: var(--color-white);
  border-radius: 2px;
  border: none !important;
}

.main-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-white);
  border: none !important;
}

.main-slide-btn-wr {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  padding: 0 10px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.main-slide-btn-wr button {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 50px;
  height: 50px;
  border-radius: var(--border-rounded);
  color: var(--color-white);
  outline: none;
  font-size: 20px;
  transition: all 0.3s ease-in-out;
}

.main-slide-btn-wr button:hover {
  background: var(--primary-green);
  color: var(--color-white);
  border-color: var(--primary-green);
}

.main-slider:hover .main-slide-btn-wr {
  visibility: visible;
  opacity: 1;
}

/***** End Main Slider homepage (index) *****/

/***** CART ITEM *****/
/* .swiper-container-wrapper {
  padding: 20px;
  border: 1px solid red;
  overflow: hidden;
} */
.prod-card-swiper,
.partners-swiper,
.product-cat-swiper {
  /* border: 1px solid red; */
  padding: 20px 20px;
}

.product-cat-swiper .swiper-slide {
  height: auto;
}

.img-wrapper {
  width: 100%;
  height: 100%;
}

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

.prod-card-swiper .swiper-slide {
  height: auto;
}

.prod-card {
  position: relative;
  /* flex: 1 1 200px; */
  border: 1px solid var(--light-gray-2);
  border-radius: var(--border-radius-8);
  overflow: hidden;
  box-shadow: none;
  transition:
    border-color 0.2s ease;
  cursor: pointer;
}

.prod-card.single {
  max-width: 340px;
  flex: 1 1 200px;
  width: 100%;
}

/* Base badge */
.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 8px;
  color: #fff;
  line-height: 1;
}

.badge.no-ab {
  position: static;
  top: unset;
  left: unset;
}

.badge.stock {
  /* max-width: 200px; */
  width: auto;
  position: relative;
  top: 0px;
  left: 0px;
  z-index: 1;
}

.partner-slide {
  height: 150px
}

.partner-slide img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

/* .stock-badge */

/* Variants */
.badge-stock,
.badge-discount {
  background: var(--primary-green);
}

.badge-best {
  background: #ff9800;
}

.badge-new {
  background: #2196f3;
}

.badge-nostock,
.badge-hot {
  background: #e53935;
}

.prod-card:hover {
  border-color: var(--primary-green);
}

.prod-card .img-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  /* 1:1 ratio */
  overflow: hidden;
}

.prod-card img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease-in-out;
}

.prod-card .seconadry-img {
  opacity: 0;
  visibility: hidden;
}

.prod-card:hover .seconadry-img {
  opacity: 1;
  visibility: visible;
}

/* Only fade the primary image out when a real .seconadry-img sibling exists
   to crossfade into (the original template's two-image hover swap). NEOFORST
   Products only ever have one image (Products.main_image), so no card ever
   renders a .seconadry-img — unscoped, this rule hid the primary image on
   hover with nothing to replace it, leaving the card visually blank. */
.prod-card:hover:has(.seconadry-img) .primary-img {
  opacity: 0;
  visibility: hidden;
}

.prod-card:hover img {
  transform: scale(1.08);
}

/* Alternate "dark overlay" product-card style — full-bleed image with a
   bottom gradient and the category/title/action pinned over it, instead
   of the default white panel below the image. Add .overlay-dark to a
   .prod-card to switch it. */
.prod-card.overlay-dark {
  aspect-ratio: 3 / 4;
  border-color: transparent;
  justify-content: flex-end !important;
}

.prod-card.overlay-dark .img-wrapper {
  position: absolute;
  inset: 0;
  height: 100%;
  padding-bottom: 0;
}

.prod-card.overlay-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(5, 8, 20, 0.9) 100%);
  pointer-events: none;
}

.prod-card.overlay-dark .prod-desc {
  /* .prod-desc has flex:1 by default so it grows to fill the card's flex
     column — override that here so it stays content-height and margin-top:
     auto is what pins it to the bottom edge. */
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-top: auto;
  border-top: none;
  padding-top: 0;
}

.prod-card.overlay-dark .prod-desc .cat {
  color: var(--color-white);
}

.prod-card.overlay-dark .prod-desc .title,
.prod-card.overlay-dark:hover .prod-desc .title {
  color: var(--color-white);
}

.prod-card.overlay-dark .action-item {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.prod-card.overlay-dark .action-item span,
.prod-card.overlay-dark .action-item i {
  color: var(--color-white);
}

.prod-card.overlay-dark .action-item:hover {
  background: var(--color-white);
  border-color: var(--color-white);
}

.prod-card.overlay-dark .action-item:hover span,
.prod-card.overlay-dark .action-item:hover i {
  color: var(--color-dark-blue);
}

/***** Product Category Cards *****/

.product-cat-card {
  height: 100%;
  background: var(--color-white);
  border-radius: var(--border-radius-12);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-cat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.product-cat-card .img-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 70%;
  overflow: hidden;
  height: 270px;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.08);
}

.product-cat-card .img-wrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 220px;
  top: 0;
  left: 0;
  object-fit: cover;
  transition: transform 0.5s ease-in-out;
}

.product-cat-card:hover .img-wrapper img {
  transform: scale(1.08);
}

.product-cat-card .content {
  flex: 1;
  padding: 22px 24px 28px;
  gap: 10px;
}

.product-cat-card .content h3 {
  color: var(--color-dark-blue);
  font-size: 20px;
  font-weight: 600;
  line-height: var(--line-height-150);
  transition: color 0.2s ease-in-out;
}

.product-cat-card:hover .content h3 {
  color: var(--primary-green);
}

.product-cat-card .content p {
  color: var(--text-color);
  font-size: 15px;
  font-weight: 300;
  line-height: var(--line-height-175);
}

.product-cat-card .content-more {
  align-self: flex-start;
  margin-top: auto;
  padding: 6px 6px 6px 20px;
  gap: 16px;
  background: var(--color-dark-blue);
  border-radius: 999px;
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background-color 0.2s ease-in-out, gap 0.2s ease-in-out;
}

.product-cat-card .content-more i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  font-size: 13px;
  transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.product-cat-card:hover .content-more {
  gap: 20px;
  background: var(--primary-green);
}

.product-cat-card:hover .content-more i {
  border-color: rgba(255, 255, 255, 0.8);
  transform: rotate(45deg);
}

/***** End Product Category Cards *****/

/***** Product Category search — Header-only widget (every page — see
       views/partials/_category-search.php; the /catalog inline copy was
       removed, but the markup/backend/JS are shared, so these rules stay
       shared too rather than being Header-prefixed) *****/

.category-search-field {
  position: relative;
  gap: 12px;
  background: var(--color-white, #fff);
  border: 1px solid var(--light-gray-2, #e1e4e6);
  border-radius: 999px;
  padding: 14px 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.category-search-field:focus-within {
  border-color: var(--primary-green);
  box-shadow: 0 6px 20px rgba(7, 146, 71, 0.12);
}

.category-search-field > i.bi-search {
  color: var(--text-color, #657078);
  font-size: 18px;
  flex-shrink: 0;
}

.category-search-input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--color-black, #1c1b1b);
  background: transparent;
}

.category-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--light-gray-1, #f2f2f2);
  color: var(--text-color, #657078);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.category-search-clear:hover {
  background: var(--primary-green);
  color: #fff;
}

/* Positioned/stacked so the dropdown floats above the category grid instead
   of pushing it down — no layout shift while typing. */
.category-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 360px;
  overflow-y: auto;
  background: var(--color-white, #fff);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.category-search-results._active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.category-search-status {
  padding: 16px 20px;
  font-size: 14px;
  color: var(--text-color, #657078);
  text-align: center;
}

.category-search-result {
  gap: 14px;
  padding: 10px 16px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--light-gray-1, #f2f2f2);
  transition: background 0.15s ease;
}

.category-search-result:last-child {
  border-bottom: none;
}

.category-search-result:hover,
.category-search-result:focus {
  background: var(--light-green-bg, #eef5e9);
}

.category-search-result-img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}

.category-search-result-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-search-result-text span:first-child {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-black, #1c1b1b);
}

.category-search-result-cta {
  display: block;
  font-size: 12px;
  color: var(--primary-green);
}

/***** End Product Category search *****/

/***** Wholesale CTA (product-list) *****/

.wholesale-cta__card {
  flex-direction: row;
  height: 400px;
  max-height: 400px;
  gap: 40px;
  background: var(--color-white);
  border-radius: var(--border-radius-24);
  padding: 24px;
}

.wholesale-cta__card .img-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 45%;
  height: 100%;
  max-width: 420px;
  border-radius: var(--border-radius-12);
  overflow: hidden;
}

.wholesale-cta__card .img-wrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

.wholesale-cta__actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.wholesale-cta__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: 15px;
}

.wholesale-cta__phone {
  gap: 10px;
  padding: 6px 20px 6px 6px;
  background: var(--color-white);
  border: 1px solid var(--light-gray-2);
  border-radius: 999px;
  color: var(--color-dark-blue);
  font-size: 15px;
  font-weight: 600;
  transition: border-color 0.2s ease-in-out;
}

.wholesale-cta__phone i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--light-green-bg);
  color: var(--primary-green);
  font-size: 14px;
}

.wholesale-cta__phone:hover {
  border-color: var(--primary-green);
}

.wholesale-cta__text {
  gap: 16px;
}

.wholesale-cta__text h2 {
  color: var(--color-dark-blue);
  font-size: 32px;
  font-weight: 700;
  line-height: var(--line-height-135);
}

.wholesale-cta__text p {
  color: var(--text-color);
  font-size: 16px;
  font-weight: 300;
  line-height: var(--line-height-175);
}

/***** End Wholesale CTA (product-list) *****/

/***** About Preview (homepage) *****/

.about-preview__row {
  gap: 32px;
}

.about-preview__gallery {
  position: relative;
  max-width: 600px;
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 80px;
}

.about-preview__gallery .img-wrapper {
  position: relative;
  border-radius: var(--border-radius-24);
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}

.about-preview__gallery .img-wrapper.main {
  width: 100%;
  padding-bottom: 105%;
}

.about-preview__gallery .img-wrapper.secondary {
  /* right/bottom kept small enough that the overflow (as a % of the now-600px
     gallery) stays under .about-preview__row's 32px gap — at -8% it was
     spilling ~48px into the text column, wider than the gap. */
  position: absolute;
  right: -3%;
  bottom: -8%;
  width: 45%;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 6px solid var(--color-white);
  z-index: 2;
}

/* Reversed variant: gallery on the right, secondary image mirrored to the bottom-left */
.about-preview__row.reversed .about-preview__gallery .img-wrapper.secondary {
  right: auto;
  left: -3%;
}

/* Top variant: secondary image sits on the top corner instead of the bottom one */
.about-preview__gallery .img-wrapper.secondary.top {
  top: -8%;
  bottom: auto;
}

.about-preview__gallery .img-wrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

.about-preview__content {
  max-width: 600px;
  width: 100%;
}

.about-preview__content .text__label {
  display: inline-block;
  color: var(--primary-green);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.about-preview__content h2 {
  color: var(--color-dark-blue);
  font-size: 42px;
  font-weight: 800;
  line-height: var(--line-height-115);
  margin-bottom: 18px;
}

.about-preview__content .lead {
  color: var(--color-dark-blue);
  font-size: 18px;
  font-weight: 600;
  line-height: var(--line-height-150);
}

.about-preview__content .divider {
  display: block;
  width: 60px;
  height: 3px;
  background: var(--primary-green);
  margin: 22px 0;
}

.about-preview__content p {
  color: var(--text-color);
  font-size: 16px;
  font-weight: 300;
  line-height: var(--line-height-175);
  margin-bottom: 16px;
}

.about-preview__content p:last-child {
  margin-bottom: 0;
}

/***** End About Preview (homepage) *****/

.prod-desc {
  padding: 10px;
  flex: 1;
}

/* Scoped to the product-card usage — .prod-desc is reused elsewhere (product
   page description block) with unrelated content, so this stays specific. */
.prod-card .prod-desc {
  border-top: 1px solid var(--light-gray-2);
  padding-top: 16px;
}

.prod-desc .cat {
  color: var(--text-color);
  font-size: 14px;
}

/* Scoped to the product-card usage — see the note on .prod-card .prod-desc
   above; the generic .prod-desc .cat rule stays untouched elsewhere. */
.prod-card .prod-desc .cat {
  color: var(--primary-green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.prod-desc .title {
  color: var(--color-dark-blue);
  font-size: 18px;
  line-height: var(--line-height-150);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.prod-card:hover .prod-desc .title {
  color: var(--primary-green);
}

.price {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.price-current {
  color: var(--primary-green);
  font-size: 1.1rem;
}

.price-old {
  color: #999;
  font-size: 0.8rem;
  text-decoration: line-through;
}

.actions-wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 12px;
  margin-top: auto;
}

.action-item {
  /* Light pill button — matches the rounded "View More" pill on the
     product card, not the flat text link the site used before. */
  position: relative;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--light-green-bg);
  border-radius: 999px;
  transition: background-color 0.2s ease, border-color 0.2s ease, gap 0.25s ease;
}

.action-item span {
  color: var(--primary-green);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color 0.2s ease-in-out;
}

.action-item i {
  color: var(--primary-green);
  font-size: 13px;
  transition: all 0.2s ease-in-out;
}

.action-item:hover {
  background: var(--primary-green);
  transform: none;
  gap: 10px;
}

.action-item:hover i,
.action-item:hover span {
  color: var(--color-white);
}

/***** End CART ITEM *****/

/***** Prodcut page *****/

.pro-sg-gall {
  top: 110px;
  align-self: flex-start;
}

.prod-page {
  overflow: hidden;
  margin-top: 75px;
}

.prod-page .product-gallery-main .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.prod-page .product-gallery-main .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prod-page .product-gallery-main {
  height: 600px;
}

.prod-page h1 {
  font-size: 28px;
  font-weight: 600;
}

.prod-page .hd-page {
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
}

.prod-page .prod-pricing {
  display: inline-flex;
  /* or inline-block */
  align-self: flex-start;
}

.prod-page .prod-pricing .price-new {
  font-size: 34px;
}

.prod-page .prod-pricing .price-old {
  font-size: 18px;
  font-weight: 500;
  position: absolute;
  top: -20%;
  right: -55%;
}

.variation {
  border: 1px solid #ddd;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
  font-size: 16px;
  font-weight: 500;
  padding: 12px;
  color: var(--color-black);
}

.variation:hover {
  border: 1px solid var(--primary-green) !important;
  color: var(--primary-green);
  background-color: rgba(242, 242, 242, 0.2);
}

.prod-page .add-to-cart-btn {
  transition: all 0.2s ease-in-out;
  max-width: 300px;
  width: 100%;
  font-size: 20px;
}

.prod-page .add-to-cart-btn i {
  font-size: 22px;
}

.prod-page .add-to-fav-btn {
  width: 50px;
  border-radius: var(--border-rounded);
  border: 1px solid var(--primary-green);
  transition: all 0.2s ease-in-out;
}

.prod-page .add-to-fav-btn i {
  color: var(--primary-green);
  transition: all 0.2s ease-in-out;
  font-size: 24px;
}

.prod-page .add-to-fav-btn:hover {
  width: 50px;
  background-color: #c82333;
  border: 1px solid #c82333;
}

.prod-page .add-to-fav-btn:hover i {
  color: var(--color-white);
}

.prod-page .prod-description h5 {
  font-size: 22px;
  color: var(--color-black);
  line-height: var(--line-height-150);
  font-weight: 500;
}

.prod-page .prod-description .prod-desc {
  font-size: 16px;
  line-height: var(--line-height-150);
  padding: 0;
}

.composition-table {
  padding: 0;
}

.composition-table h5 {
  font-size: 22px;
  color: var(--color-black);
  line-height: var(--line-height-150);
  font-weight: 500;
}

.composition-item {
  background: #f8f9fa;
  transition: all 0.2s ease;
}

.composition-item span {
  font-size: 0.95rem;
}

/* ===== Gallery thumbs ===== */
.prod-page .swiper-button-prev::after,
.prod-page .swiper-button-next::after {
  display: none !important;
}

.prod-page .swiper-button-prev,
.prod-page .swiper-button-next {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.prod-page .swiper-button-prev:hover,
.prod-page .swiper-button-next:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.prod-page .swiper-button-prev {
  left: 10px;
}

.prod-page .swiper-button-next {
  right: 10px;
}

.prod-page .swiper-button-prev i,
.prod-page .swiper-button-next i {
  pointer-events: none;
}

.product-gallery-thumbs img {
  width: 135px;
  height: 135px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  opacity: 0.6;
}

.product-gallery-thumbs .swiper-slide-thumb-active img {
  opacity: 1;
  border: 2px solid #198754;
}

/* ===== Variations ===== */

/* ===== Price badges ===== */
.prod-page .badge {
  font-size: 0.875rem;
}

/* ===== Price ===== */
.text-decoration-line-through {
  text-decoration: line-through;
}

/***** Product Hero (category ad_banner_image + overlay) *****/
.product-hero .product-hero__category {
  display: inline-block;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.85;
}

.product-hero h1 {
  font-size: 40px;
  font-weight: 600;
  margin: 0;
}

.product-hero .page-intro-txt p {
  max-width: 640px;
  font-size: 16px;
  opacity: 0.9;
}

/***** Product Detail (redesigned two-column section) *****/
.product-detail__body .text__label {
  display: inline-block;
  color: var(--primary-green);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.product-detail__title {
  font-size: clamp(26px, 3vw, 34px);
  line-height: var(--line-height-135);
  font-weight: 600;
  color: var(--color-dark-blue);
  margin-bottom: 14px;
}

.product-detail__lead {
  /* Was missing line-height entirely, so this fell back to the browser's
     tight UA default (~1.2) — the exact "compressed" look reported right
     under the title. */
  max-width: 62ch;
  font-size: 18px;
  line-height: var(--line-height-150);
  color: var(--text-color);
  margin-bottom: 32px;
}

.product-detail__block {
  margin-bottom: 32px;
}

.product-detail__block-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-dark-blue);
  margin-bottom: 16px;
}

.product-detail__prose {
  max-width: 68ch;
  font-size: 16px;
  line-height: var(--line-height-175);
  color: var(--text-color);
}

/* Rich CKEditor HTML (ProductTranslation.description /
   additional_information) — real <p>/<ul>/<li> tags, not escaped text, so
   give the tags themselves sensible rhythm instead of letting every
   paragraph collapse into one dense block. */
.product-detail__prose p {
  margin: 0 0 14px;
}

.product-detail__prose p:last-child {
  margin-bottom: 0;
}

.product-detail__prose ul,
.product-detail__prose ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.product-detail__prose li {
  margin-bottom: 6px;
}

.product-detail__highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-detail__highlights li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: var(--line-height-150);
  color: var(--text-color);
}

.product-detail__highlights li i {
  display: inline-flex;
  color: var(--primary-green);
  font-size: 18px;
  line-height: var(--line-height-150);
  flex-shrink: 0;
  /* Keeps the check icon pinned to the first text line instead of the
     icon's own line-box centering it against the full (possibly wrapped)
     height of a long RU/RO label. */
  transform: translateY(0.15em);
}

.product-detail__cta {
  /* The preceding .product-detail__block already carries margin-bottom: 32px
     (Highlights → CTA gap) — this only nudges the button off a block that
     has no trailing block wrapper (e.g. no Additional Information). */
  margin-top: 8px;
}

/* Other Categories now uses the same neutral page background as every
   surrounding section (the pale green tint tried earlier read as an
   unintended full-width color block, not a subtle separator) — the cards
   themselves already provide enough visual separation.
   No extra padding here on purpose: `.section` already applies its own
   80px !important top/bottom margin (app.css ~line 116) — adding
   padding-top/bottom on top of that doubled the space below this section,
   which is what produced the large empty gap before the Footer. */
.other-categories-section {
  background: transparent;
}

/* Equal-height Category/Product cards inside these two lower-page sliders.
   Swiper's own base CSS sets `.swiper-wrapper{align-items:normal}` (it
   deliberately does not stretch slides by default, to support variable-
   height content) — without this override, each slide sizes to its own
   content, so a card with a longer translated description/short_description
   renders visibly taller than its neighbors. `.product-cat-card`/`.prod-card`
   already fill 100% of their slide (flex-column, CTA pinned via
   margin-top:auto) — they just need a stretched slide to fill. */
.other-categories-slider .swiper-wrapper,
.related-products-slider .swiper-wrapper {
  align-items: stretch;
}

.other-categories-slider .swiper-slide,
.related-products-slider .swiper-slide {
  height: auto;
}

.other-categories-slider .swiper-slide .product-cat-card {
  height: 100%;
}

.related-products-slider .swiper-slide .prod-card {
  height: 100%;
}

/***** End Prodcut page *****/

/***** CATALOG-PAGE *****/

.filter-hd-title {
  font-size: 24px;
  font-weight: 600;
}

.filter-aside {
  /* position: sticky;
  top: 140px;
  align-self: flex-start; */
}

.filter-aside .filter-box {
  background-color: #f2f2f2;
  border-radius: var(--border-radius-8);
}

.filter-search {
  width: 100%;
  padding: 6px 12px;
  margin-bottom: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  outline: none;
  transition: all 0.2s ease;
}

.filter-search:focus {
  border-color: #0d6efd;
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.2);
}

.filter-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 10px 5px;
}

.filter-list::-webkit-scrollbar {
  width: 8px;
}

.filter-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.filter-list::-webkit-scrollbar-thumb {
  background-color: var(--primary-green);
  border-radius: 10px;
  border: 2px solid #f1f1f1;
}

.filter-list::-webkit-scrollbar-thumb:hover {
  background-color: #0556c1;
}

/* Firefox */
.filter-list {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-green) #f1f1f1;
}

/* Hide native checkbox */
.filter-list input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Label wrapper */
.filter-list label {
  display: inline-flex;
  /* or inline-block */
  align-self: flex-start;
  cursor: pointer;
  font-size: 16px;
  color: var(--color-black);
  gap: 7px;
  position: relative;
  padding-left: 28px;
  /* space for custom box */
}

/* Custom checkbox box */
.filter-list label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  transition: all 0.2s ease;
}

/* Hover effect */
.filter-list label:hover::before {
  border-color: var(--primary-green);
}

/* Checked box background */
.filter-list input[type="checkbox"]:checked+label::before {
  background-color: var(--primary-green);
  border-color: var(--primary-green);
}

/* Checkmark */
.filter-list input[type="checkbox"]:checked+label::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  left: 1px;
  top: 50%;
  transform: translate(6px, -50%) rotate(45deg);
  /* 6px shifts it inside the box */
}

.filter-aside .filter-box input {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.filter-aside .filter-box input:focus {
  border-color: var(--primary-green);
  /* optional focus color */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  /* slightly stronger on focus */
}

/* Toggle button */
.filter-toggle {
  width: 100%;
  background: none;
  border: none;
  font-weight: 600;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 6px 0;
}

/* Arrow rotation */
.filter-toggle .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.filter-section._collapsed .arrow {
  transform: rotate(-90deg);
}

/* Collapsed content */
.filter-section._collapsed ul {
  display: none;
}

.sorting-bar select {
  min-width: 200px;
  padding: 5px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  font-size: 16px;
  outline: none;
}

.sorting-bar .totals-sorting {
  font-size: 16px;
}

.sorting-bar .totals-sorting b {
  font-weight: 600;
}

/***** End CATALOG-PAGE *****/

/***** Our Offer Homepage *****/

.our-offer__homepage {
  padding: 100px 10px;
  background-color: var(--color-bg-secondary);
}

.our-offer__homepage .offer-links,
.about-us__homepage .offer-links {
  max-width: 700px;
  width: 100%;
  gap: 15px;
}

.our-offer__homepage .offer-link__item,
.about-us__homepage .offer-link__item {
  max-width: 48%;
  width: 100%;
  gap: 15px;
  text-align: center;
  padding: 25px 25px;
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 30px 60px -12px,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
  position: relative;
  overflow: hidden;
}

.our-offer__homepage .offer-link__item::before,
.about-us__homepage .offer-link__item::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--primary-green);
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

.our-offer__homepage .offer-link__item .img-bg,
.about-us__homepage .offer-link__item .img-bg {
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  filter: brightness(40%);
  z-index: 0;
}

.our-offer__homepage .offer-link__item .vector-img,
.about-us__homepage .offer-link__item .vector-img {
  max-width: 75px;
  width: 100%;
  margin-bottom: 5px;
  position: relative;
}

.our-offer__homepage .offer-link__item h3,
.about-us__homepage .offer-link__item h3 {
  font-size: 18px;
  line-height: var(--line-height-150);
  color: var(--color-white);
  font-weight: 500;
  position: relative;
}

.our-offer__homepage .offer-link__item p,
.about-us__homepage .offer-link__item p {
  font-size: 15px;
  line-height: var(--line-height-150);
  color: var(--color-white);
  font-weight: 500;
  margin-bottom: 5px;
  position: relative;
}

.our-offer__homepage .offer-link__item .link-sign,
.about-us__homepage .offer-link__item .link-sign {
  font-size: 14px;
  padding: 10px;
  border: 1px solid var(--light-gray-1);
  border-radius: var(--border-rounded);
  background-color: var(--color-bg-secondary);
  color: var(--primary-green);
  font-weight: bold;
  position: relative;
}

.our-offer__homepage .offer-link__item .vector-img,
.our-offer__homepage .offer-link__item h3,
.our-offer__homepage .offer-link__item p,
.our-offer__homepage .offer-link__item .link-sign,
.about-us__homepage .offer-link__item .vector-img,
.about-us__homepage .offer-link__item h3,
.about-us__homepage .offer-link__item p,
.about-us__homepage .offer-link__item .link-sign {
  z-index: 2;
  transition: all 0.3s ease-in-out;
}

.our-offer__homepage .offer-link__item:hover h3,
.our-offer__homepage .offer-link__item:hover p,
.our-offer__homepage .offer-link__item:hover .link-sign,
.about-us__homepage .offer-link__item:hover h3,
.about-us__homepage .offer-link__item:hover p,
.about-us__homepage .offer-link__item:hover .link-sign {
  color: var(--color-white);
}

.our-offer__homepage .offer-link__item:hover .link-sign,
.about-us__homepage .offer-link__item:hover .link-sign {
  color: var(--color-white);
  background-color: var(--primary-green);
  border-color: var(--primary-green);
}

.our-offer__homepage .offer-link__item:hover::before,
.about-us__homepage .offer-link__item:hover::before {
  background-color: transparent;
}

.about-us__homepage .offer-link__item .vector-img {
  color: var(--color-white);
  font-size: 75px;
}

.our-offer__homepage .offer-text {
  max-width: 600px;
  width: 100%;
  padding: 35px;
}

.our-offer__homepage .offer-text h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  line-height: var(--line-height-150);
}

.our-offer__homepage .offer-text h2 {
  font-size: 48px;
  font-weight: 600;
  color: var(--color-dark-blue);
  line-height: var(--line-height-115);
  margin-bottom: 25px;
}

.our-offer__homepage .offer-text p {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-color);
  line-height: var(--line-height-175);
  margin-bottom: 30px;
}

a.view-more {
  max-width: 170px;
  width: 100%;
  padding: 13px 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color);
  border: 3px solid var(--light-gray-2);
  border-radius: var(--border-radius-32);
  text-align: center;
  transition: all 0.3s ease-in-out;
}

a.view-more i {
  margin-left: 10px;
  color: var(--primary-green);
  font-size: 13px;
  transition: all 0.3s ease-in-out;
}

a.view-more:hover {
  background-color: var(--primary-green);
  color: var(--color-white);
  border-color: var(--primary-green);
}

a.view-more:hover i {
  color: var(--color-white);
}

/***** End Our Offer Homepage *****/

/***** Our products Homepage *****/

.our-products {
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 0px 20px;
}

.our-products__column h2 {
  font-size: 48px;
  line-height: var(--line-height-150);
  font-weight: 500;
  color: var(--color-dark-blue);
  margin-bottom: 7px;
}

.our-products__column p {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-color);
  line-height: var(--line-height-175);
  margin-bottom: 30px;
  max-width: 600px;
  width: 100%;
}

.filtering-items-wrapper .filter-list {
  gap: 35px;
}

.filtering-items-wrapper .filter-item {
  padding: 15px 20px;
  border-radius: var(--border-radius-24);
  background-color: var(--color-white);
  border: 3px solid var(--light-gray-2);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.filtering-items-wrapper .filter-item._active {
  background-color: var(--primary-green);
  border: 3px solid var(--primary-green);
  color: var(--color-white);
}

.filtering-items-wrapper .filter-item:hover {
  background-color: var(--primary-green);
  border: 3px solid var(--primary-green);
  color: var(--color-white);
}

.__pods-row {
  gap: 30px;
  margin-top: 50px;
}

.filter__pod-single {
  max-width: 22.5%;
  width: 100%;
  padding: 0 0 18% 0;
  position: relative;
  border-radius: var(--border-radius-12);
  overflow: hidden;
  transition: all 0.8s ease-in-out;
}

.prod-cat .filter__pod-single {
  max-width: 31.5%;
  padding: 0 0 25% 0;
}

.filter__pod-single .pod-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(70%);
  transition: all 0.6s ease-in-out;
}

.filter__pod-single .heading-wr {
  position: absolute;
  bottom: 20px;
  left: 20px;
  gap: 7px;
  padding-bottom: 6px;
  overflow: hidden;
}

.filter__pod-single .heading-wr i {
  font-size: 18px;
  color: var(--color-white);
  transform: translate(-30px, 0);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.filter__pod-single h4 {
  font-size: 28px;
  color: var(--color-white);
  font-weight: 500;
  margin-bottom: 0;
  position: relative;
  line-height: var(--line-height-115);
}

.filter__pod-single h4::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: -5px;
  left: -100%;
  background-color: var(--primary-green);
  transition: all 0.3s ease-in-out;
}

.filter__pod-single:hover h4::before {
  left: 0;
}

.filter__pod-single:hover .pod-img {
  transform: scale(1.2);
  filter: brightness(50%);
}

.filter__pod-single:hover .heading-wr i {
  transform: translate(0, 0);
  opacity: 1;
}

.filterable.ds-none {
  display: none !important;
}

.filterable.ds-hide {
  visibility: hidden;
  opacity: 0;
}

/***** End Our products Homepage *****/

/***** Promo Offer Homepage *****/

/* Background is now an EditMode-managed <img> (see editableImageAuto() calls
   in each view using this section: fabric/home/about/gallery — each page
   keeps its own promo-bg, same as it already keeps its own promo heading/
   description text), not a CSS url() — background-color stays as the
   fallback while the image loads/if missing. The darkening that used to be
   baked into the CSS background-image (a linear-gradient layered under the
   url()) is now a separate ::before overlay, since the image is a real
   element on top of the color, not part of one composited background. */
.promo-offer {
  position: relative;
  overflow: hidden;
  padding: 100px 10px;
  background-color: var(--color-dark-blue);
}

.promo-offer > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.promo-offer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 26, 51, 0.68);
  z-index: 1;
  /* Purely decorative — without this, the overlay (sitting above the image
     in paint order) would intercept clicks meant for the EditMode-editable
     background <img> beneath it. */
  pointer-events: none;
}

.promo-offer__column {
  gap: 15px;
}

.promo-offer__row {
  position: relative;
  z-index: 2;
  justify-content: center !important;
  gap: 30px;
  text-align: center;
}

.promo-offer h2 {
  font-size: 48px;
  line-height: var(--line-height-150);
  color: var(--color-white);
  font-weight: 500;
  max-width: 800px;
  width: 100%;
}

.promo-offer p {
  font-size: 18px;
  line-height: var(--line-height-150);
  font-weight: 300;
  max-width: 800px;
  width: 100%;
  color: rgba(255, 255, 255, 0.8);
}

.promo-offer .call__action {
  font-size: 18px;
  font-weight: 500;
  max-width: 300px;
  width: 100%;
  padding: 18px 30px;
  border-radius: var(--border-radius-32);
  background-color: var(--primary-green);
  border: 3px solid var(--primary-green);
  box-shadow:
    rgba(0, 0, 0, 0.07) 0px 1px 2px,
    rgba(0, 0, 0, 0.07) 0px 2px 4px,
    rgba(0, 0, 0, 0.07) 0px 4px 8px,
    rgba(0, 0, 0, 0.07) 0px 8px 16px,
    rgba(0, 0, 0, 0.07) 0px 16px 32px,
    rgba(0, 0, 0, 0.07) 0px 32px 64px;
  color: var(--color-white);
  transition: all 0.3s ease-in-out;
}

.promo-offer .call__action:hover {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease-in-out;
  box-shadow: unset;
  color: var(--color-white);
}

/***** End Promo Offer Homepage *****/

/***** Legal pages (privacy / terms) *****/

.legal-content {
  padding: 20px 0 40px;
}

.legal-content__body {
  /* max-width: 1000px; */
  margin: 0 auto;
}

.legal-content__updated {
  color: var(--text-color);
  font-size: 14px;
  margin-bottom: 24px;
}

.legal-content__body > p {
  color: var(--text-color);
  font-size: 16px;
  line-height: var(--line-height-175);
  margin-bottom: 16px;
}

.legal-content__body h3 {
  color: var(--color-dark-blue);
  font-size: 22px;
  font-weight: 700;
  margin: 40px 0 12px;
}

.legal-content__body h3:first-of-type {
  margin-top: 0;
}

.legal-content__body ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal-content__body li {
  color: var(--text-color);
  font-size: 16px;
  line-height: var(--line-height-175);
  margin-bottom: 8px;
}

.legal-content__body a {
  color: var(--primary-green);
  font-weight: 600;
}

/***** End Legal pages *****/

/***** Contact CTA Homepage *****/

.contact-cta__card {
  position: relative;
  overflow: hidden;
  gap: 60px;
  padding: 60px;
  border-radius: var(--border-radius-24);
  background: linear-gradient(135deg, var(--primary-blue) 0%, #0f1a3d 100%);
}

.contact-cta__card::before,
.contact-cta__card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  z-index: 0;
}

.contact-cta__card::before {
  width: 400px;
  height: 400px;
  top: -150px;
  right: 280px;
}

.contact-cta__card::after {
  width: 300px;
  height: 300px;
  bottom: -150px;
  right: -60px;
}

.contact-cta__text {
  position: relative;
  z-index: 1;
  max-width: 480px;
  width: 100%;
  gap: 16px;
}

.contact-cta__text .text__label {
  color: var(--primary-green);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.contact-cta__text h2 {
  color: var(--color-white);
  font-size: 40px;
  font-weight: 700;
  line-height: var(--line-height-115);
}

.contact-cta__text p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  font-weight: 300;
  line-height: var(--line-height-175);
}

.contact-cta__links {
  position: relative;
  z-index: 1;
  gap: 16px;
  max-width: 460px;
  width: 100%;
  flex-shrink: 0;
}

.contact-cta__item {
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius-12);
  transition: all 0.3s ease-in-out;
}

.contact-cta__item:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.contact-cta__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--border-radius-8);
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  font-size: 18px;
}

.contact-cta__item small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-weight: 400;
}

.contact-cta__item strong {
  color: var(--color-white);
  line-height: var(--line-height-150);
  font-size: 16px;
  font-weight: 600;
}

.contact-cta__arrow {
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  transition: all 0.3s ease-in-out;
}

.contact-cta__item:hover .contact-cta__arrow {
  color: var(--color-white);
  transform: translate(3px, -3px);
}

/***** End Contact CTA Homepage *****/

.pod-detailed {
  margin-top: 60px;
  margin-bottom: 100px;
}

.pod-det-hd-wr {
  padding-left: 10px;
  width: 100%;
  gap: 20px;
}

.pod-det-hd-wr .text-wrapper {
  max-width: 600px;
  width: 100%;
  gap: 20px;
}

.pod-det-hd-wr a.view-more {
  margin-bottom: 0;
}

.text-wrapper .text__label {
  display: inline-block;
  color: var(--primary-green);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.pod-det-hd-wr h2 {
  font-size: 42px;
  line-height: var(--line-height-135);
  color: var(--color-dark-blue);
  font-weight: 500;
}

.pod-det-hd-wr p {
  font-size: 16px;
  line-height: var(--line-height-150);
  font-weight: 400;
  color: var(--text-color);
  max-width: 500px;
  width: 100%;
}

.pod-detail__slide {
  gap: 100px;
}

.pod-detail__slide .img-wrapper {
  max-width: 50%;
  width: 100%;
  position: relative;
  padding: 0 0 40% 0;
  border-radius: var(--border-radius-24);
  overflow: hidden;
}

.pod-detail__slide .img-wrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

.pod-detail__slide .prod-description {
  max-width: 40%;
  width: 100%;
  gap: 10px;
}

.pod-detail__slide .prod-description h2 {
  font-size: 48px;
  line-height: var(--line-height-150);
  font-weight: 500;
  color: var(--color-dark-blue);
  width: 100%;
}

.pod-detail__slide .prod-description p {
  max-width: 85%;
  width: 100%;
  font-size: 18px;
  line-height: var(--line-height-150);
  font-weight: 300;
  color: var(--text-color);
  margin-bottom: 10px;
}

.pod-features {
  max-width: 80%;
  width: 100%;
  gap: 20px;
}

.pod-features li {
  max-width: 45%;
  width: 100%;
  /* gap: 8px; */
}

.pod-features li h4 {
  font-size: 22px;
  color: var(--color-dark-blue);
  line-height: var(--line-height-135);
  font-weight: 500;
}

.pod-features li p {
  font-size: 17px;
  color: var(--text-color);
  line-height: var(--line-height-135);
  font-weight: 400;
}

.explore__btn {
  max-width: 60%;
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  padding: 15px 30px;
  color: var(--color-white);
  border-radius: var(--border-radius-32);
  background-color: var(--primary-green);
  border: 3px solid var(--primary-green);
  margin-top: 20px;
  gap: 20px;
  transition: all 0.2s ease-in-out;
  margin-bottom: 5px;
  position: relative;
  overflow: hidden;
}

.explore__btn::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  content: "";
  width: 50%;
  height: 120%;
  background: -webkit-linear-gradient(left,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 100%);
  background: linear-gradient(to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
  transition: all 1s ease-in-out;
}

.explore__btn:hover {
  background-color: #36966b;
  border-color: #36966b;
}

.explore__btn:hover::before {
  left: 125%;
}

.btn-wr-sl {
  margin-top: 60px;
}

.btn-wr-sl button {
  width: 50px;
  height: 50px;
  margin: 0px 10px;
  border-radius: var(--border-rounded);
  border: 3px solid var(--light-gray-1);
  padding: 0;
  background-color: rgba(255, 255, 255, 0);
  position: relative;
  transition: all 0.5s ease-in-out;
}

.btn-wr-sl button::before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "";
  background: var(--primary-green);
  border-radius: var(--border-rounded);
  width: 0;
  height: 0;
  transition: all 0.5s;
  z-index: 1;
}

.btn-wr-sl button:hover::before {
  width: 100%;
  height: 100%;
}

.btn-wr-sl button:hover {
  background-color: rgba(66, 184, 131, 0.7);
  border: 3px solid var(--primary-green);
}

.btn-wr-sl button i {
  margin: 0;
  padding: 0;
  color: var(--color-dark-blue);
  font-size: 18px;
  font-weight: 700;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease-in-out;
}

.btn-wr-sl button:hover i {
  color: var(--color-white);
}

.btn-wr-sl .line {
  margin: 0px 7px;
  background-color: var(--primary-green);
  height: 1px;
  width: 40px;
}

.btn-wr-sl.cl-gr button {
  border: 3px solid var(--light-gray-1);
  padding: 0;
  background-color: var(--light-gray-2);
  border: unset;
  position: relative;
  transition: all 0.5s ease-in-out;
}

.btn-wr-sl.cl-gr .line {
  margin: 0px 7px;
  background-color: var(--light-gray-2);
  height: 1px;
  width: 40px;
}

/***** About US *****/

.about-us__homepage {
  padding: 100px 10px;
  background-color: var(--primary-blue);
}

.about-us-row__homepage .text-wrapper h2,
.about-us-row__homepage .text-wrapper p {
  color: var(--color-white) !important
}

.about-us__homepage .offer-links {
  max-width: 700px;
  width: 100%;
  gap: 15px;
}


.about-us-row__homepage {
  gap: 100px;
}

.about-us__homepage .offer-link__item {
  max-width: 48%;
  width: 100%;
  min-height: 300px;
  gap: 15px;
  text-align: center;
  border-radius: var(--border-radius-8);
  background-color: var(--color-white);
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 30px 60px -12px,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  cursor: default;
}

.about-us__homepage .offer-link__item h2 {
  font-size: 48px;
  line-height: var(--line-height-150);
  color: var(--primary-green);
  font-weight: 600;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.about-us__homepage .offer-link__item h3 {
  text-wrap: nowrap;
  line-height: var(--line-height-150);
  color: var(--color-white);
  font-weight: 500;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.about-us__homepage .offer-link__item:hover {
  background-color: #69c99e;
}

.about-us__homepage .offer-link__item:hover h3,
.about-us__homepage .offer-link__item:hover h2 {
  color: var(--color-white);
}

.about-us__homepage .offer-text {
  max-width: 600px;
  width: 100%;
}

.about-us__homepage .offer-text {
  max-width: 600px;
  width: 100%;
  padding: 35px;
}

.about-us__homepage .offer-text h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-white);
  line-height: var(--line-height-150);
}

.about-us__homepage .offer-text h2 {
  font-size: 48px;
  font-weight: 600;
  color: var(--color-white) !important;
  line-height: var(--line-height-115);
  margin-bottom: 25px;
}

.about-us__homepage .offer-text p {
  font-size: 17px;
  font-weight: 300;
  color: var(--color-white) !important;
  line-height: var(--line-height-175);
  margin-bottom: 30px;
}

.why-whe__row {
  margin-top: 80px;
  gap: 30px;
}

.why-we_item {
  max-width: 32%;
}

.why-we_item {
  max-width: 32%;
  padding: 25px;
}

.why-we_item i {
  font-size: 48px;
  color: var(--primary-green);
  margin-bottom: 15px;
}

.why-we_item h3 {
  font-size: 28px;
  line-height: var(--line-height-135);
  margin-bottom: 15px;
  font-weight: 500;
  color: var(--color-dark-blue);
}

.why-we_item p {
  font-size: 16px;
  line-height: var(--line-height-150);
  color: var(--text-color);
}

.partners-slider {
  margin-top: 80px;
}

.partners-slider h2 {
  font-size: 38px;
  line-height: var(--line-height-150);
  color: var(--color-dark-blue);
  font-weight: 600;
  margin-bottom: 50px;
}

.partners-slide img {
  max-width: 200px;
  width: 100%;
  height: auto;
}

.partners-slider .swiper-pagination {
  position: relative;
  margin-top: 35px;
}

.partners-slider .swiper-pagination .swiper-pagination-bullet {
  background-color: var(--primary-green);
  opacity: 0.5;
  padding: 5px;
}

.partners-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--primary-green) !important;
  opacity: 1;
}

/***** End About US *****/

/***** Video About *****/

.video-about {
  width: 100%;
  position: relative;
  padding: 0 0 25% 0;
}

.video-about img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(45%);
}

.video-about .text-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.video-about .text-wrapper h2 {
  color: var(--color-white);
  line-height: var(--line-height-150);
  font-size: 32px;
  font-weight: 500;
  max-width: 800px;
  width: 100%;
  margin-bottom: 40px;
}

.video-about .text-wrapper i {
  color: var(--primary-green);
  font-size: 32px;
  padding: 20px;
  background-color: var(--color-white);
  border-radius: var(--border-rounded);
  transition: all 0.3s ease-in-out;
  animation: pulse-animation 2s infinite;
  text-align: center;
}

.video-about .text-wrapper i:hover {
  background-color: var(--primary-green);
  color: var(--color-white);
  cursor: pointer;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(68, 187, 133, 1);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(68, 187, 133, 0);
  }
}

/***** End Video About *****/

/***** FAQ *****/

.faq .faq-text {
  max-width: 600px;
  width: 100%;
  gap: 28px;
}

.faq .faq-text .contact-btn {
  width: fit-content;
  cursor: pointer;
}

.faq-col {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: auto;
}

.faq-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.faq-items .item {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--color-white);
  border-radius: var(--border-radius-12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  padding: 4px 20px;
  transition: box-shadow 0.3s ease-in-out;
}

.faq-items .item.active {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

.faq-items .item .question {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  font-size: 17px;
  line-height: var(--line-height-150);
  color: var(--color-dark-blue);
  font-weight: 600;
  width: 100%;
  cursor: pointer;
}

.faq-items .item .smb {
  flex-shrink: 0;
  color: var(--primary-green);
  font-size: 16px;
  transition: transform 350ms ease;
  display: inline-flex;
}

.faq-items .item.active .smb {
  transform: rotate(135deg);
}

.faq-items .item .answer {
  position: relative;
  font-size: 15px;
  line-height: var(--line-height-175);
  font-weight: 300;
  color: var(--text-color);
  max-height: 0px;
  transition: all 0.4s ease;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  visibility: hidden;
}

.faq-items .item.active .answer {
  max-height: 300px;
  padding-bottom: 20px;
  visibility: visible;
  opacity: 1;
}

.faq-page-col {
  width: 100%;
}

.faq .sc-hd-wr .text-wrapper p a {
  color: var(--primary-green);
  font-weight: 600;
  text-decoration: underline;
}

/***** End FAQ *****/

/***** Gallery section Homepage *****/

.gallery {
  margin-top: 75px;
  padding: 0px 15px;
}

.gallery-heading {
  width: 100%;
  margin-bottom: 20px;
}

.gallery-heading .text-wrapper.pg {
  width: 100%;
}

.gallery-heading .text-wrapper.pg h2 {
  font-size: 38px;
  line-height: var(--line-height-135);
  font-weight: 400;
  color: var(--color-black);
}

.gallery-heading h2 {
  font-size: 48px;
  line-height: var(--line-height-150);
  font-weight: 500;
  color: var(--color-dark-blue);
  margin-bottom: 7px;
}

.gallery-heading p {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-color);
  line-height: var(--line-height-175);
  margin-bottom: 30px;
  max-width: 600px;
  width: 100%;
}

.gallery-slide {
  width: 100%;
  position: relative;
  padding: 0 0 20% 0;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--border-radius-12);
}

/***** lightGallery grid *****/
.light-gallery-grid {
  display: grid;
  /* auto-fit (not auto-fill): collapses empty tracks so the last row's
     items stretch to fill the remaining width instead of leaving a gap
     the size of the columns that have no image left to occupy them. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.light-gallery-item {
  display: block;
  position: relative;
  width: 100%;
  padding: 0 0 75% 0;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--border-radius-12);
}

.light-gallery-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.light-gallery-item:hover img {
  transform: scale(1.08);
}
/***** End lightGallery grid *****/

.gallery-wrapper-modal,
.gallery-slider-single {
  max-width: 1000px;
  width: 100%;
}

.gallery-slide-single {
  width: 100%;
  position: relative;
  aspect-ratio: 10 / 7;
  overflow: hidden;
}

.gallery-slide-single img,
.gallery-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-12);
  transition: all 0.3s ease-in-out;
}

.gallery-slide img:hover {
  transform: scale(1.1);
  border-radius: var(--border-radius-12);
}

/***** End Gallery section Homepage *****/

/***** Reviews Section Homepage *****/
.reviews {
  margin-top: 75px;
  padding: 0px 15px;
}

.reviews-heading {
  margin-bottom: 75px;
}

.reviews-heading h2 {
  font-size: 58px;
  line-height: var(--line-height-150);
  font-weight: 500;
  color: var(--color-dark-blue);
  margin-bottom: 7px;
}

.reviews-heading h2 span {
  color: var(--primary-green);
}

.reviews-heading p {
  font-size: 18px;
  font-weight: 300;
  color: var(--text-color);
  line-height: var(--line-height-175);
  margin-bottom: 30px;
  max-width: 600px;
  width: 100%;
}

.btn-call__now {
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.btn-call__now {
  font-size: 17px;
  color: var(--color-white);
  background-color: var(--primary-green);
  border-radius: var(--border-radius-24);
  padding: 18px 35px;
  max-width: 250px;
  width: 100%;
  border-radius: var(--border-radius-24);
  box-shadow:
    rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
  transition: all 0.3s ease-in-out;
  border: none;
}

.btn-call__now:hover {
  box-shadow: none;
  background-color: #297050;
}

.review-slide {
  height: unset;
  padding: 25px 15px;
  border: 3px solid var(--light-gray-1);
  border-radius: var(--border-radius-12);
}

.review-slide .stars-wrapper {
  margin-bottom: 15px;
}

.review-slide .stars-wrapper i {
  font-size: 18px;
  color: var(--primary-green);
}

.review-slide img {
  width: 60px;
  height: 60px;
  border-radius: var(--border-rounded);
  object-fit: cover;
}

.review-slide p {
  font-size: 18px;
  line-height: var(--line-height-150);
  color: var(--text-color);
  margin-bottom: 20px;
  flex: 1 1 auto;
}

.review-slide .client-info {
  gap: 20px;
}

.review-slide .client-initials h4 {
  font-size: 18px;
  color: var(--color-dark-blue);
  font-weight: 500;
}

.review-slide .client-initials p {
  font-size: 15px;
  color: var(--text-color);
  font-weight: 500;
  margin-bottom: 0;
}

/***** End Reviews Section Homepage *****/

/***** Blog Homepage section *****/

.view-more-itm {
  margin-bottom: 50px;
}

.blog__homepage {
  margin-top: 75px;
  padding: 0px 15px;
  margin-bottom: 75px;
}

.blog__row {
  gap: 50px 30px;
}

.blog-heading {
  width: 100%;
  margin-bottom: 20px;
}

.blog-heading h2 {
  font-size: 48px;
  line-height: var(--line-height-150);
  font-weight: 500;
  color: var(--color-dark-blue);
  margin-bottom: 7px;
}

.blog-heading p {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-color);
  line-height: var(--line-height-175);
  margin-bottom: 30px;
  max-width: 600px;
  width: 100%;
}

.blog-item {
  max-width: 31%;
  width: 100%;
  gap: 15px;
}

.blog-item .img-wrapper {
  position: relative;
  width: 100%;
  padding: 0 0 65% 0;
}

.blog-item .img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-12);
  transition: all 0.3s ease-in-out;
}

.blog-item .date-wrapper {
  gap: 10px;
}

.blog-item .date-wrapper span {
  font-size: 12px;
  line-height: var(--line-height-135);
  color: var(--text-color);
}

.blog-item .date-wrapper i {
  font-size: 12px;
  line-height: var(--line-height-135);
  color: var(--text-color);
}

.blog-item h3 {
  font-size: 22px;
  line-height: var(--line-height-135);
  color: var(--color-dark-blue);
  font-weight: 500;
}

.blog-item p {
  font-size: 16px;
  line-height: var(--line-height-150);
  color: var(--text-color);
  font-weight: 300;
}

.blog_btn {
  max-width: 200px;
  width: 100%;
  padding: 15px 30px;
  outline: none;
  border: none;
  border-radius: var(--border-radius-24);
  color: var(--color-white);
  background-color: var(--primary-green);
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

.blog_btn span {
  position: relative;
}

.blog_btn::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: -100%;
  left: 0;
  background-color: var(--link-color);
  transition: all 0.3s ease-in-out;
}

.blog-item:hover .blog_btn::before {
  top: 0;
}

.blog-item:hover .img-wrapper img {
  filter: grayscale(1);
}

.post-content {
  margin: 50px 10px;
}

.post-content p {
  font-size: 16px;
  color: var(--text-color);
  font-weight: normal;
  line-height: var(--line-height-175);
}

.post-content h1 {
  font-size: 2em;
  font-weight: 500;
  color: var(--color-black);
  line-height: var(--line-height-150);
  /* Add more styles as needed */
}

.post-content h2 {
  font-size: 1.5em;
  font-weight: 500;
  color: var(--color-black);
  line-height: var(--line-height-150);
  /* Add more styles as needed */
}

.post-content h3 {
  font-size: 1.17em;
  font-weight: 500;
  color: var(--color-black);
  line-height: var(--line-height-150);
  /* Add more styles as needed */
}

.post-content h4 {
  font-size: 1em;
  font-weight: 500;
  color: var(--color-black);
  line-height: var(--line-height-150);
  /* Add more styles as needed */
}

.post-content h5 {
  font-size: 0.83em;
  font-weight: 500;
  color: var(--color-black);
  line-height: var(--line-height-150);
  /* Add more styles as needed */
}

.post-content h6 {
  font-size: 0.67em;
  font-weight: 500;
  color: var(--color-black);
  line-height: var(--line-height-150);
  /* Add more styles as needed */
}

/***** End Blog Homepage section *****/

/***** Page Intro *****/
.page-intro {
  position: relative;
  width: 100%;
  padding: 0 0 45% 0;
}

.page-intro.min {
  position: relative;
  width: 100%;
  padding: 0 0 37.5% 0;
}

.page-intro img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(50%);
}

.page-intro.min img {
  object-position: 0 0;
}

.page-intro .intro-text-wrapper {
  position: absolute;
  width: 100%;
  bottom: 100px;
  left: 0;
}

.page-intro .page-intro-txt {
  color: var(--color-white);
  gap: 10px;
}

/* Compact, content-sized pill — NOT a full-width bar. `.page-intro-txt` /
   `.hd-page` are `d-flex flex-column`, whose default `align-items: stretch`
   would otherwise force this flex item to the full width of its column
   regardless of `display: inline-flex`; `align-self: flex-start` is what
   actually stops the stretch, `width: fit-content` is the belt-and-braces
   fallback for any other flex/grid ancestor. */
.breadcrumbs {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 6px 14px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.breadcrumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 5px;
  flex-wrap: wrap;
  row-gap: 4px;
  max-width: 100%;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.breadcrumbs__home-icon {
  font-size: 11px;
  opacity: 0.75;
}

.breadcrumbs__link,
.breadcrumbs__current {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.breadcrumbs__sep {
  display: flex;
  align-items: center;
  font-size: 9px;
  line-height: 1;
  opacity: 0.45;
}

.breadcrumbs__link {
  color: var(--color-white);
  opacity: 0.8;
  text-decoration: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.breadcrumbs__link:hover {
  opacity: 1;
  color: var(--primary-green);
}

.breadcrumbs .breadcrumbs__sep,
.breadcrumbs .breadcrumbs__home-icon {
  color: var(--color-white);
}

.breadcrumbs__current {
  color: var(--color-white);
  font-weight: 600;
  opacity: 0.97;
}

/* Light variant: dark-on-white, for placement on a plain page background —
   no pill/backdrop needed since there is no image to lift the text off. */
.breadcrumbs--light {
  background: none;
  border: none;
  padding: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.breadcrumbs--light .breadcrumbs__link {
  color: var(--text-color);
  opacity: 1;
}

.breadcrumbs--light .breadcrumbs__link:hover {
  color: var(--primary-green);
}

.breadcrumbs--light .breadcrumbs__sep,
.breadcrumbs--light .breadcrumbs__home-icon {
  color: var(--light-gray-2);
}

.breadcrumbs--light .breadcrumbs__current {
  color: var(--primary-blue);
  font-weight: 600;
}

@media (max-width: 576px) {
  .breadcrumbs {
    padding: 6px 12px;
  }

  .breadcrumbs__link,
  .breadcrumbs__current {
    max-width: 140px;
  }
}

nav .breadcrumb a {
  font-size: 15px;
  font-weight: 400;
  color: var(--primary-green);
}

.page-intro .page-intro-txt h2 {
  font-size: 62px;
  font-weight: 500;
  line-height: 135%;
}

.page-intro .page-intro-txt h2.ttl-min {
  font-size: 34px;
  font-weight: 500;
  line-height: 135%;
}

.page-intro .page-intro-txt h3 {
  font-size: 24px;
  font-weight: 300;
  line-height: 135%;
  margin-top: 15px;
  letter-spacing: 1.4px;
}

.page-intro .page-intro-txt p {
  font-size: 18px;
  font-weight: 300;
  line-height: 175%;
  max-width: 600px;
  width: 100%;
}

/***** End Page Intro *****/

/***** 404 Hero — same .page-intro.min banner, scaled up ~15-25% since it
       carries the whole page (no sections underneath it) *****/
.page-intro.min.error-404-hero {
  padding-bottom: 44%;
}

.error-404-hero .page-intro-txt {
  gap: 18px;
}

.error-404-hero .page-intro-txt h3 {
  font-size: 96px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 2px;
  margin: 0;
}

.error-404-hero .page-intro-txt h2 {
  font-size: 70px;
}

.error-404-hero .wholesale-cta__cta {
  padding: 16px 32px;
  font-size: 16px;
}

/***** PRODUCT PAGE *****/

.page-desc {
  margin-top: 50px;
}

.prod-desc {
  gap: 15px;
}

.prod-desc h2 {
  font-size: 38px;
  line-height: var(--line-height-135);
  font-weight: 400;
  color: var(--color-black);
}

.prod-desc p {
  font-size: 16px;
  font-weight: 400;
  line-height: var(--line-height-175);
  color: var(--color-black);
}

.specifications {
  margin-top: 75px;
}

.spec-heading h3 {
  font-size: 36px;
  font-weight: 400;
  color: var(--color-dark-blue);
  line-height: var(--line-height-135);
  margin-bottom: 35px;
}

.spec-wrapper {
  gap: 100px;
}

.spec-wrapper .img-wrapper {
  max-width: 650px;
  width: 100%;
  position: relative;
  padding: 0 0 45% 0;
}

.spec-wrapper .img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-12);
  filter: brightness(80%);
}

.spec-list {
  max-width: 580px;
  width: 100%;
  gap: 15px;
}

.spec-list h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: var(--line-height-150);
}

.spec-list .item {
  gap: 5px;
}

.spec-list .item h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: var(--line-height-150);
  color: var(--color-black);
}

.spec-list .item p {
  font-size: 17px;
  font-weight: 400;
  color: var(--color-dark-blue);
  line-height: var(--line-height-150);
}

.floor-paln {
  margin-top: 100px;
  margin-bottom: 100px;
}

.floor-paln h2 {
  font-size: 38px;
  line-height: var(--line-height-135);
  font-weight: 400;
  color: var(--color-black);
  margin-bottom: 20px;
}

.floor-paln .img-wrapper img {
  max-width: 950px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.features-wrapper {
  margin-top: 50px;
  margin-bottom: 75px;
}

.features-wrapper ul {
  max-width: 1000px;
  width: 100%;
  gap: 20px;
}

.features-wrapper ul li {
  font-size: 17px;
  line-height: var(--line-height-175);
  color: var(--color-black);
}

.features-wrapper ul li i {
  margin-right: 15px;
  color: var(--primary-green);
  font-size: 35px;
}

.features-wrapper h3 {
  margin-bottom: 30px;
  font-size: 38px;
  line-height: var(--line-height-135);
  font-weight: 400;
  color: var(--color-black);
}

.related-prod.pg {
  background-color: var(--color-bg-secondary);
}

.rel-hd-wr {
  margin-bottom: 30px;
  gap: 10px;
}

.rel-hd-wr h2 {
  font-size: 38px;
  line-height: var(--line-height-135);
  font-weight: 400;
  color: var(--color-black);
}

.rel-hd-wr p {
  font-size: 16px;
  line-height: var(--line-height-150);
  font-weight: 400;
  color: var(--text-color);
}

.related-slide {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.related-slide::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 0;
  height: 7px;
  width: 100%;
  background-color: var(--primary-green);
  transition: all 0.3s ease-in-out;
}

.related-slide:hover::after {
  bottom: 0px;
}

.related-slide .img-wrapper {
  position: relative;
  width: 100%;
  padding: 0 0 70% 0;
}

.related-slide .img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  filter: brightness(60%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease-in-out;
}

.related-slide .slide-text {
  position: absolute;
  bottom: 15px;
  left: 20px;
  z-index: 1;
  gap: 5px;
}

.related-slide .slide-text h3 {
  font-size: 24px;
  font-weight: 300;
  line-height: var(--line-height-150);
  color: var(--color-white);
}

.related-slide .slide-text h4 {
  font-size: 16px;
  font-weight: 300;
  line-height: var(--line-height-150);
  color: var(--color-white);
  letter-spacing: 1.4px;
}

.related-slide:hover .img-wrapper img {
  filter: brightness(40%);
}

/***** End PRODUCT PAGE *****/

/***** About page *****/

.we-are {
  margin: 100px 0px;
}

.we-are-row {
  gap: 60px;
}

.we-are-row+.we-are-row {
  margin-top: 90px;
}

.we-are-row .img-wrapper {
  width: 50%;
  position: relative;
  padding: 0 0 40% 0;
  border-radius: var(--border-radius-24);
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.we-are-row .img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.we-are-row .img-wrapper:hover img {
  transform: scale(1.06);
}

.we-are-row .text-wrapper {
  width: 45%;
  padding: 20px 5px;
}

.we-are-row .text-wrapper .text__label {
  display: inline-block;
  color: var(--primary-green);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.we-are-row .text-wrapper h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  line-height: var(--line-height-150);
}

.we-are-row .text-wrapper h2 {
  font-size: 40px;
  font-weight: 800;
  color: var(--color-dark-blue);
  line-height: var(--line-height-115);
  margin-bottom: 22px;
}

.we-are-row .text-wrapper .divider {
  display: block;
  width: 60px;
  height: 3px;
  background: var(--primary-green);
  margin-bottom: 24px;
}

.we-are-row .text-wrapper p {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-color);
  line-height: var(--line-height-175);
  margin-bottom: 24px;
}

.we-are-row .text-wrapper p:last-of-type {
  margin-bottom: 30px;
}

/***** End About page *****/

/***** Stats Bar *****/

.stats-bar {
  margin: 20px 0 90px;
}

.stats-bar__inner {
  background: var(--light-green-bg);
  border-radius: var(--border-radius-24);
  padding: 55px 70px;
}

.stats-bar__row {
  gap: 30px;
}

.stat-item {
  min-width: 140px;
}

.stat-number {
  display: flex;
  align-items: baseline;
  font-size: 52px;
  font-weight: 800;
  color: var(--primary-green);
  line-height: 1;
  margin-bottom: 14px;
}

.stat-suffix {
  font-size: 40px;
  font-weight: 800;
  color: var(--primary-green);
}

.stat-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-dark-blue);
}

/***** End Stats Bar *****/

/***** Contact Page *****/
.contact-pg {
  margin-top: 50px;
}

.contact-pg-wrapper {
  gap: 100px;
}

.contact-pg .text-wrapper {
  width: 50%;
  gap: 20px;
}

.contact-pg .text-wrapper .text__label {
  display: inline-block;
  color: var(--primary-green);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.contact-pg .text-wrapper h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: var(--line-height-115);
  color: var(--color-dark-blue);
}

.contact-pg .text-wrapper p {
  font-size: 16px;
  font-weight: 400;
  line-height: var(--line-height-175);
  color: var(--text-color);
}

.contact-pg .text-wrapper .contacts {
  gap: 16px;
}

/* The longer neofrost2017@gmail.com address has no spaces to wrap on
   naturally — without this it can overflow the li on narrow (320-375px)
   viewports instead of breaking onto a second line. */
.contact-pg .text-wrapper .contacts a.contact-email-break {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.contact-pg .text-wrapper .contacts li {
  margin-bottom: 0;
}

.contact-pg .text-wrapper .contacts a {
  color: var(--color-dark-blue);
  font-size: 17px;
  font-weight: 600;
  transition: color 0.25s ease-in-out;
}

.contact-pg .text-wrapper .contacts li:hover a {
  color: var(--primary-green);
}

.contact-pg .text-wrapper .contacts li i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  font-size: 18px;
  background-color: var(--primary-blue);
  color: var(--color-white);
  border-radius: var(--border-rounded);
  transition: all 0.3s ease-in-out;
}

.contact-pg .text-wrapper .contacts li:hover i {
  background: var(--primary-green);
  transform: translateY(-2px);
}

.contact-pg .working-hours {
  margin-top: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--light-gray-2);
}

.contact-pg .working-hours__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-dark-blue);
  margin-bottom: 14px;
}

.contact-pg .working-hours__list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--light-gray-1);
}

.contact-pg .working-hours__list li:last-child {
  border-bottom: none;
}

.contact-pg .working-hours__list .day {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-dark-blue);
}

.contact-pg .working-hours__list .time {
  font-size: 15px;
  font-weight: 400;
  color: var(--text-color);
}

.form-wrapper {
  width: 50%;
  gap: 20px;
  position: relative;
  background: var(--color-white);
  padding: 45px 40px;
  border-radius: var(--border-radius-24);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.form-wrapper h2 {
  font-size: 38px;
  font-weight: 400;
  line-height: var(--line-height-150);
  color: var(--color-black);
}

.form-wrapper form {
  max-width: 100%;
  gap: 30px;
}

.form-wrapper .contact-form-popup {
  max-width: 100%;
}

.form-wrapper .contact-form-popup input,
.form-wrapper .contact-form-popup textarea {
  width: 100%;
  background-color: var(--light-gray-1);
  border: 1px solid transparent;
  padding: 16px 22px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: var(--color-dark-blue);
  outline: none;
  transition: all 0.25s ease-in-out;
}

.form-wrapper .contact-form-popup input {
  border-radius: var(--border-radius-24);
}

.form-wrapper .contact-form-popup textarea {
  border-radius: var(--border-radius-12);
  min-height: 130px;
  line-height: var(--line-height-150);
  resize: vertical;
}

.form-wrapper .contact-form-popup input:focus,
.form-wrapper .contact-form-popup textarea:focus {
  background-color: var(--color-white);
  border-color: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(7, 146, 71, 0.12);
}

.form-wrapper .contact-form-popup input::placeholder,
.form-wrapper .contact-form-popup textarea::placeholder {
  color: var(--text-color);
}

.form-wrapper .contact-form-popup .get-quote {
  padding: 17px 50px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.form-wrapper .contact-form-popup .get-quote:disabled {
  opacity: 0.7;
  cursor: wait;
}

/* Field-level validation error — Yii ActiveForm's default {error} markup
   (a "help-block" right after the input, inside the "field-*" wrapper div)
   + validationStateOn: 'input' so the invalid/red-border class lands on the
   input itself, while the message text lives in normal document flow right
   below it (no absolute positioning, no fixed-height reservation — an empty
   .help-block takes 0 height, so fields with no error keep their normal
   30px flex gap and nothing else grows). */
.form-wrapper .contact-form-popup input.has-error,
.form-wrapper .contact-form-popup textarea.has-error {
  background-color: #fdf6f6;
  border-color: #e0a3a3;
}

.form-wrapper .contact-form-popup input.has-error:focus,
.form-wrapper .contact-form-popup textarea.has-error:focus {
  box-shadow: 0 0 0 3px rgba(227, 93, 93, 0.12);
}

.form-wrapper .contact-form-popup .help-block {
  color: #c73333;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  margin: 6px 4px 0;
}

/* AJAX success/error alert — one reusable style for both the AJAX response
   and the Yii flash-message fallback (see views/contact/index.php). */
.contact-alert {
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: var(--line-height-150);
  animation: contactAlertIn 0.25s ease;
}

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

.contact-alert--success {
  background-color: var(--light-green-bg);
  color: var(--primary-green);
  border: 1px solid rgba(7, 146, 71, 0.25);
}

.contact-alert--error {
  background-color: #fdecec;
  color: #b42323;
  border: 1px solid #f3b7b7;
}

/* Compact loading overlay scoped to the form card itself (.form-wrapper is
   already position:relative) — never a full-page overlay, so it can't shift
   scroll position or block the Header/nav. */
.form-wrapper.__loading {
  pointer-events: none;
}

.form-wrapper.__loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: var(--border-radius-24);
  z-index: 5;
}

.form-wrapper .loader {
  z-index: 6;
  flex-direction: column;
  gap: 10px;
}

.form-wrapper .loader .spinner-border {
  color: var(--primary-green);
  width: 2.4rem;
  height: 2.4rem;
}

.form-wrapper .loader .loader-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-blue);
}

iframe.map {
  margin-top: 50px;
}

/***** End Contact Page *****/

/***** CAtegory Prod Page *****/

.prod-cat {
  margin-bottom: 75px;
}

/***** End CAtegory Prod Page *****/

/***** Footer *****/

iframe {
  margin-top: 50px;
}

footer {
  width: 100%;
  background-color: var(--primary-blue);
  margin-top: auto;
}

.footer-nav {
  padding: 48px 0px;
}

.footer-nav-section {
  max-width: 307px;
  width: 100%;
  padding: 0px 15px;
}

.footer-nav-row .footer-info {
  gap: 22px;
}

.footer-nav-row .footer-info .footer-logo {
  max-width: 250px;
  width: 100%;
  height: auto;
}

.footer-nav-row .footer-info p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-white);
}

.footer-nav-row .footer-nav-section:nth-child(2) {
  padding-left: 48px;
}

.footer-nav-row .footer-nav-links h3 {
  font-size: 22px;
  line-height: var(--line-height-150);
  color: var(--color-white);
  font-weight: bold;
  margin-bottom: 15px;
}

.footer-nav-row .footer-nav-links .footer-link {
  margin-bottom: 8px;
}

/* neofrost2017@gmail.com has no spaces to wrap on naturally — without this
   it can overflow the column on narrow (320-375px) viewports instead of
   breaking onto a second line. */
.footer-nav-row .footer-nav-links .footer-link p.footer-email-break {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.footer-nav-row .footer-nav-links .footer-link a,
.footer-nav-row .footer-nav-links .footer-link p {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: var(--line-height-150);
  color: var(--color-white);
  transition: all 0.25s ease-in-out;
}

.footer-nav-row .footer-nav-section:last-child .footer-link a,
.footer-nav-row .footer-nav-section:last-child .footer-link p {
  font-size: 16px;
  line-height: 24px;
}

.footer-nav-row .footer-nav-links .footer-link a:hover,
.footer-nav-row .footer-nav-links .footer-link p:hover {
  color: var(--link-color);
}

/* Marks the footer link for the page currently being viewed (set by hand
   per page, e.g. class="current-page" on gallery.html's own "Galerie"
   footer link). */
.footer-nav-row .footer-nav-links .footer-link a.current-page {
  color: var(--primary-green);
}

.bottom-footer {
  height: 72px;
  background-color: var(--primary-blue);
  width: 100%;
}

.bottom-footer h4 {
  margin-bottom: 0;
  color: var(--color-white);
  font-size: 16px;
  line-height: 24px;
}

/***** End Footer *****/

/***** End Main  *****/

/***** BTN WOW *****/
a.btn-wow {
  max-width: 250px;
  width: 100%;
  height: 65px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  width: 100%;
  text-align: center;
  color: var(--color-white);
  /* background-color: transparent; */
  border-radius: var(--border-radius-3);
  font-weight: 500;
  position: relative;
  /* overflow: hidden; */
  transition-delay: 0.3s;
  transition: all 0.3s ease-in;
}

a.btn-wow span.txt {
  position: absolute;
  transition: all 0.3s ease-in-out;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}

a.btn-wow i.arrow {
  position: absolute;
  top: 50%;
  left: 18%;
  transform: translate(-50%, -50%);
  font-weight: 300;
  font-size: 30px;
  transition: all 0.3s ease-in-out;
  /* color: var(--primary-green); */
}

a.btn-wow::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8%;
  width: 65px;
  height: 100%;
  border-radius: 50px;
  /*1*/
  border: 2px solid var(--color-white);
  /*2*/
  box-shadow: 0 0 0 0 rgba(#5a99d4, 0.5);
  transition: all 0.3s ease-in-out;
}

a.btn-wow:hover::before {
  width: 108%;
  height: 100%;
  border-radius: 100px;
  border-color: var(--primary-green);
  background-color: var(--primary-green);
  animation: unset;
}

a.btn-wow:hover i.arrow {
  left: 73%;
  color: var(--primary-white);
}

a.btn-wow:hover span.txt {
  left: 40%;
  color: var(--primary-white);
}

a.btn-wow span {
  position: relative;
  z-index: 1;
}

/***** End BTN WOW *****/

/* MODAL WINDOW */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease-in-out;
}

.modal-overlay._active {
  visibility: visible;
  opacity: 1;
}

.modal-body {
  /* transition: all 0.5s ease-in-out; */
  transition-delay: 0.2s;
  position: relative;
  bottom: -100%;
  visibility: hidden;
}

.modal-overlay._active .modal-body {
  visibility: visible;
  bottom: 0;
}

.close-modal-window {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--color-white);
  font-size: 40px !important;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.modal-overlay .close-modal-window:hover {
  color: #ff8080;
}

.loader {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal-body.__loading {
  filter: blur(4px);
  pointer-events: none;
}

.loader._active {
  display: flex;
}

.modal-overlay.__loading {
  cursor: wait;
}

/* Only disable interactions inside the form */
.modal-overlay.__loading .modal-body {
  pointer-events: none;
  user-select: none;
}

.modal-overlay.__loading .close-modal-window {
  pointer-events: none;
  opacity: 0.4;
}

.loader._active {
  display: flex;
  pointer-events: none;
}

/* MODAL WIDNOW */

/***** CONTACT MODAL WINDOW *****/

.contact-modal-body {
  max-width: 800px;
  width: 100%;
  background-color: var(--color-white);
  border-radius: var(--border-radius-24);
  overflow: hidden;
  margin: 10px;
}

.contact-modal-body .img-wrapper {
  max-width: 40%;
  width: 100%;
  position: relative;
  padding: 0 0 66.25% 0;
}

.contact-modal-body .img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-modal-body .text-wrapper {
  padding: 35px 25px;
  width: 100%;
  gap: 10px;
}

.contact-modal-body .text-wrapper h2 {
  font-size: 32px;
  font-weight: 400;
  line-height: var(--line-height-150);
  color: var(--color-dark-blue);
}

.contact-modal-body .text-wrapper h4 {
  font-size: 18px;
  font-weight: 300;
  line-height: var(--line-height-150);
  color: var(--text-color);
  margin-bottom: 15px;
}

.contact-form-popup {
  max-width: 80%;
  width: 100%;
  gap: 20px;
}

.contact-form-popup input {
  width: 100%;
  background-color: var(--light-gray-1);
  border: none;
  padding: 15px 20px;
  border-radius: var(--border-radius-24);
  font-size: 17px;
  font-weight: 400;
  color: var(--color-dark-blue);
  outline: none;
}

.contact-form-popup .get-quote {
  border: none;
  color: var(--color-white);
  font-size: 18px;
  line-height: var(--line-height-150);
  /* transition: all 0.3s ease-in-out; */
  margin-top: 10px;
}

.contact-form-popup .get-quote:hover {
  animation: none;
  background-color: #36966b;
}

/***** End CONTACT MODAL WINDOW *****/

/***** PRODUCT MODAL WINDOW *****/

.product-modal-body {
  max-width: 1100px;
  width: 100%;
  background-color: var(--color-white);
  border-radius: var(--border-radius-24);
  overflow: hidden;
  margin: 10px;
  align-items: stretch;
}

.product-modal-body .img-wrapper {
  position: relative;
  width: 45%;
  height: auto;
  flex-shrink: 0;
  padding-bottom: 45%;
}

.product-modal-body .img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-modal-body .text-wrapper {
  padding: 48px 45px;
  width: 100%;
  gap: 16px;
}

.product-modal-body .text-wrapper .cat {
  color: var(--primary-green);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.product-modal-body .text-wrapper h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: var(--line-height-135);
  color: var(--color-dark-blue);
}

.product-modal-body .text-wrapper p {
  font-size: 15px;
  font-weight: 300;
  line-height: var(--line-height-175);
  color: var(--text-color);
}

.product-modal-perks {
  gap: 12px;
  margin-top: 6px;
}

.product-modal-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-dark-blue);
}

.product-modal-perks li i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-green);
  color: var(--color-white);
  font-size: 12px;
}

.product-modal-origin {
  gap: 8px;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--light-gray-2);
  color: var(--text-color);
  font-size: 14px;
  font-weight: 300;
}

.product-modal-origin i {
  color: var(--primary-green);
  font-size: 15px;
}

.product-modal-actions {
  align-self: flex-start;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.product-modal-cta {
  /* Tighter, icon-led pill instead of the generic 50px-padded .get-quote —
     matches the modal's flat, restrained feel (thin check icons, no
     shadows) instead of the heavier sitewide CTA. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  font-size: 14px;
  font-weight: 600;
}

/* "DETALII / DETAILS / ДЕТАЛИ" — premium outlined secondary action next to
   the green .product-modal-cta (Contact), so the modal keeps one clear
   primary action instead of two competing green buttons. Navy text/border
   at rest, navy fill + white text + green arrow badge on hover. */
.product-modal-cta--secondary {
  height: 46px;
  padding: 0 26px;
  background: var(--color-white);
  color: var(--color-dark-blue);
  border: 1px solid var(--light-gray-2);
  border-radius: var(--border-radius-24);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 26, 51, 0.04);
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.product-modal-cta--secondary__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--light-green-bg);
  color: var(--primary-green);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.product-modal-cta--secondary__arrow i {
  font-size: 12px;
  transition: none;
}

.product-modal-cta--secondary:hover {
  background: var(--color-dark-blue);
  color: var(--color-white);
  border-color: var(--color-dark-blue);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 26, 51, 0.16);
}

.product-modal-cta--secondary:hover .product-modal-cta--secondary__arrow {
  background: var(--primary-green);
  color: var(--color-white);
  transform: translate(2px, -2px);
}

/* Phone link next to Contact Us — same pill/circle-icon shape as the header's
   .phone-wrapper, but recolored for the modal's white background (the header
   version is white-on-translucent-dark, invisible here). */
.product-modal-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 20px 6px 6px;
  border: 1px solid var(--light-gray-2);
  border-radius: 999px;
  transition: border-color 0.2s ease-in-out;
}

.product-modal-phone i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--light-green-bg);
  color: var(--primary-green);
  font-size: 13px;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.product-modal-phone span {
  color: var(--color-dark-blue);
  font-size: 14px;
  font-weight: 600;
}

.product-modal-phone:hover {
  border-color: var(--primary-green);
}

.product-modal-phone:hover i {
  background: var(--primary-green);
  color: var(--color-white);
}

.product-modal-cta i {
  font-size: 14px;
  transition: transform 0.2s ease-in-out;
}

.product-modal-cta:hover {
  animation: none;
  filter: brightness(0.92);
}

.product-modal-cta:hover i {
  transform: translate(2px, -2px);
}

/* Cancel the primary (.product-modal-cta) hover's brightness dip and icon
   nudge for the secondary variant — it already animates via its own navy
   fill + arrow-badge transform above, so both together would double up. */
.product-modal-cta--secondary:hover {
  filter: none;
}

.product-modal-cta--secondary:hover i {
  transform: none;
}

/***** End PRODUCT MODAL WINDOW *****/

/***** ACCOUNT PAGE *****/

.main._account {
  margin-top: 175px;
}

.account-info {
  border-radius: var(--border-radius-8);
  padding: 15px 15px;
  /* background-color: rgba(66, 184, 131, 0.2); */
  background-color: #f2f2f2;
}

.account-info h3 {
  font-size: 16px;
  font-weight: 600;
}

.account-info .account-bonuses {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-color);
}

.account-info .account-bonuses i {
  color: var(--primary-green);
  font-size: 16px;
}

.account-info .account-bonuses span {
  color: cornflowerblue;
  font-weight: 600;
}

.account-content {
  /* border: 1px solid red; */
}

.results-query-wrapper {
  font-size: 15px;
  color: var(--color-black);
}

.results-query-wrapper span {
  font-weight: 600;
}

.cig-select {
  position: relative;
  width: 220px;
}

.selected {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
}

.arrow {
  margin-left: auto;
  opacity: 0.6;
}

.options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  display: none;
  z-index: 10;
  overflow: hidden;
}

.option {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.option:hover {
  background: #f5f7fa;
}

/* status dots */
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot.all {
  background: #9ca3af;
  /* neutral */
}

.option._default {
  font-weight: 500;
}

.option._active {
  background: #f3f4f6;
}

.pending {
  background: #f59e0b;
}

.processing {
  background: #3b82f6;
}

.completed {
  background: #22c55e;
}

.cancelled {
  background: #ef4444;
}

/* open state */
.cig-select._open .options {
  display: block;
}

.placeholder-dot {
  background: #d1d5db;
}

.cig-select .arrow {
  margin-left: auto;
  cursor: pointer;
  opacity: 0.6;
}

.cig-select .arrow.reset {
  color: #4d4d4d;
  font-weight: bold;
}

.cart-table th {
  padding: 18px;
  text-align: left;
  font-size: 13px;
  text-transform: uppercase;
  color: #777;
  border-bottom: 1px solid #eee;
}

.acc-cnt-name {
  font-size: 24px;
  font-weight: 500;
}

.account-nav ul h2 {
  font-size: 16px;
  font-weight: 600;
  padding: 0px 5px;
}

.account-nav ul a {
  padding: 10px 15px;
  border-radius: var(--border-radius-8);
  transition: all 0.2s ease-in-out;
}

.account-nav ul a i {
  font-size: 16px;
  color: var(--text-color);
  font-size: 16px;
}

.account-nav ul a span {
  font-size: 14px;
  color: #595959;
  font-weight: 500;
}

.account-nav ul a i,
.account-nav ul a span {
  transition: all 0.1s ease-in-out;
}

.account-nav ul a._active {
  background-color: #f2f2f2;
}

.account-nav ul a._active i {
  color: var(--color-black);
}

.account-nav ul a:hover {
  background-color: #f2f2f2;
}

.account-nav ul a:hover i {
  color: var(--color-black);
}

.account-nav ul a:hover span {
  color: var(--color-black);
}

.history-pagination .pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border: 1px solid #d9d9d9;
  color: var(--color-black);
  border-radius: 5px;
}

/***** End ACCOUNT PAGE *****/

/***** AUTH *****/
._page-auth {
  margin-top: 120px;
}

._auth {
  height: 85vh;
  /* border: 1px solid red; */
}

.container {
  /* border: 1px solid red; */
}

._auth .img-wrapper {
  width: 100%;
  padding: 0 0 100% 0;
  position: relative;
  border-radius: var(--border-radius-12);
  overflow: hidden;
}

._auth .img-wrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

.auth-form .form-text h1 {
  color: var(--color-black);
  font-size: 32px;
  font-weight: 500;
}

.auth-form .form-text p {
  max-width: 65%;
  line-height: var(--line-height-135);
  font-size: 14px;
}

.auth-form-wr label {
  font-size: 14px;
  font-weight: 400;
  padding: 3px;
}

.auth-form-wr .form-control:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: #ced4da;
  /* or your custom color */
}

.auth-form-wr .form-control {
  font-size: 15px;
  border-radius: 4px !important;
}

.auth-form-wr .form-control::placeholder {
  font-size: 14px;
}

.auth-button {
  padding: 15px;
  border: none;
  border-radius: 4px;
  color: var(--color-white);
  background-color: var(--primary-green);
  transition: all 0.2s ease-in-out;
}

.auth-form-wr .auth-button:hover {
  background-color: #198754;
}

.auth-form-wr .form-check label {
  margin: 0 !important;
  padding: 0 !important;
}

.auth-form-wr .form-check input {
  margin-top: 0px;
  margin-right: 10px;
}

.auth-form-wr .auth-link {
  color: var(--primary-green);
  border-bottom: 1px solid var(--primary-green);
  transition: all 0.2s ease-in-out;
}

.auth-form-wr .auth-link.no-b {
  border: none;
}

.auth-form-wr .auth-link:hover {
  color: #27925f;
}

.auth-collage img {
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.collage-main {
  height: 320px;
}

.collage-small {
  height: 150px;
}

/***** End AUTH *****/

h1 {
  font-family: "Co Headline", sans-serif;
  font-size: 18px;
}


h2 {
  font-weight: bold;
  font-size: 16px;
}

h3 {
  font-size: 14px;
  font-weight: 500;
}

/* Language switcher — plain text codes (RO/EN/RU), no flag icons: the flag
   SVGs were referenced with a root-relative path (/core/...) that never
   resolves over file://, so they only ever rendered as broken-image icons. */
.lang-current {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lang-name {
  display: inline-block;
  color: var(--color-dark-blue);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}


/***** Pagiantion *****/
.pagiantion-container {
  width: 100%;
  padding: 30px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--primary-blue);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination__btn:hover {
  background-color: var(--primary-green);
}

.pagination__btn.active {
  background-color: var(--primary-green);
  color: var(--color-white);
  font-weight: 700;
}

.pagination__dots {
  color: var(--primary-blue);
  font-size: 16px;
  padding: 0 4px;
  user-select: none;
}

/***** End Pagiantion *****/

.our-offer-row__homepage .view-more {
  color: var(--text-color);
  background: var(--color-white);
}

.phone-wrapper,
.email-wrapper {
  cursor: pointer;
  gap: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 4px 20px 4px 4px;
  transition: all 0.3s ease-in-out;
}

.phone-wrapper:hover,
.email-wrapper:hover {
  margin-bottom: 5px;
}

.phone-wrapper i,
.email-wrapper i {
  color: var(--primary-green);
  background: var(--color-white);
  border-radius: 50%;
  padding: 5px 10px;
  max-height: 42px;
  max-width: 42px;
}

header.__scrolled .phone-wrapper i,
header.__scrolled .email-wrapper i,
header.__menu-open .phone-wrapper i,
header.__menu-open .email-wrapper i {
  color: var(--primary-blue);
}

.phone-wrapper:hover i,
.email-wrapper:hover i {
  background: var(--primary-green);
  color: var(--color-white);
}

.phone-wrapper span,
.email-wrapper span {
  color: var(--color-white);
}

.phone-btn {
  height: 44px;
  width: 44px;
  background: var(--primary-orange);
  border-radius: 50%;
  position: fixed;
  right: 3rem;
  bottom: 3rem;
  z-index: 1000;
  width: 2.75rem;
  height: 2.75rem;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.phone-btn i {
  color: var(--color-white);
}

/* Hide while any modal is open (body/html get ._lock — see script.js) —
   it's fixed at the same bottom-right corner the product modal's own
   Contact Us / phone row ends up in on mobile, and with matching z-index
   it floats on top of that content instead of behind it. Reuses the
   opacity/visibility transition already declared on .phone-btn above. */
body._lock .phone-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.phone-btn:hover {
  opacity: 0.7;
  transition: opacity 350ms ease;
}

.contact-pg form.__loading {
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
}

.contact-pg form.__loading button {
  opacity: 0.6;
  cursor: wait;
}

/* ===== Frontend admin quick-action bar (WordPress-style toolbar) ===== */
/* Ported from restaurant.com's app.css; header offset selector adapted to
   NEOFORST's markup, where <header class="header"> sits directly inside
   <div class="site-wrapper">, same as restaurant.com. */
:root { --frontend-adminbar-height: 34px; }
body.has-frontend-adminbar { padding-top: var(--frontend-adminbar-height); }
body.has-frontend-adminbar > .site-wrapper > header {
  top: var(--frontend-adminbar-height);
}

/* Mobile burger drawer / sub-menu panel top offset (responsive.css). Base
   value matches the guest header's height; bumped by the same toolbar
   height the header itself shifts down by, so the drawer always starts
   exactly where the header now ends instead of drifting under it when the
   Admin toolbar is visible. */
:root { --mobile-nav-top: 75px; }
body.has-frontend-adminbar { --mobile-nav-top: calc(75px + var(--frontend-adminbar-height)); }
.frontend-admin-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 99999;
  display: none;
  height: var(--frontend-adminbar-height);
  color: #fff;
  background: #111827;
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  font-family: inherit;
  line-height: 1;
}
.frontend-admin-bar.is-visible { display: block; }
.frontend-admin-bar__inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 8px;
}
.frontend-admin-bar a { text-decoration: none; }
.frontend-admin-bar__link,
.frontend-admin-bar__user,
.frontend-admin-bar__logout {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  height: var(--frontend-adminbar-height);
  padding: 0 10px;
  border: 0;
  color: rgba(255,255,255,.86);
  background: transparent;
  font-size: 12px;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.frontend-admin-bar__brand { color: #fff !important; }
.frontend-admin-bar__brand strong { font-size: 12px; font-weight: 700; }
.frontend-admin-bar__actions {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.frontend-admin-bar__link:hover,
.frontend-admin-bar__link:focus-visible { color: #fff; background: rgba(255,255,255,.1); }
.frontend-admin-bar__context { color: #a9d8ff; }
.frontend-admin-bar__account { display: flex; align-items: stretch; flex: 0 0 auto; margin-left: auto; }
.frontend-admin-bar__languages { display: flex; align-items: center; gap: 2px; padding: 0 5px; }
.frontend-admin-bar__languages a {
  display: grid;
  min-width: 27px;
  height: 24px;
  padding: 0 5px;
  place-items: center;
  border-radius: 5px;
  color: #9aa9bd;
  font-size: 10px;
  font-weight: 700;
}
.frontend-admin-bar__languages a.active,
.frontend-admin-bar__languages a:hover { color: #fff; background: rgba(255,255,255,.12); }
.frontend-admin-bar__user { color: #b9c5d5; }
.frontend-admin-bar__logout-form { display: flex; margin: 0; }
.frontend-admin-bar__logout { cursor: pointer; }
.frontend-admin-bar__logout:hover,
.frontend-admin-bar__logout:focus-visible { color: #fff; background: #8f3040; }
.frontend-admin-bar .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  font-family: "bootstrap-icons" !important;
  font-size: 14px;
  font-style: normal;
  line-height: 1;
  vertical-align: middle;
}
@media (max-width: 1100px) {
  .frontend-admin-bar__user,
  .frontend-admin-bar__secondary { display: none; }
}
@media (max-width: 767px) {
  .frontend-admin-bar { overflow: hidden; }
  .frontend-admin-bar__inner { overflow-x: auto; overflow-y: hidden; padding: 0 4px; scrollbar-width: none; }
  .frontend-admin-bar__inner::-webkit-scrollbar { display: none; }
  .frontend-admin-bar__link,
  .frontend-admin-bar__logout { padding: 0 9px; }
  .frontend-admin-bar__languages { display: none; }
  .frontend-admin-bar__account { margin-left: 0; }
}
@media (max-width: 520px) {
  .frontend-admin-bar__brand strong,
  .frontend-admin-bar__actions .frontend-admin-bar__link:not(.frontend-admin-bar__context) span,
  .frontend-admin-bar__logout span { display: none; }
  .frontend-admin-bar__link,
  .frontend-admin-bar__logout { min-width: 34px; justify-content: center; }
}
/***** Legal pages (Privacy / Terms) *****/
.legal-page .legal-content {
  max-width: 860px;
}
.legal-page .legal-content h2 {
  font-size: 1.35rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.legal-page .legal-content h2:first-child {
  margin-top: 0;
}
.legal-page .legal-content p {
  color: var(--text-muted, #6b6b6b);
  line-height: 1.7;
  margin-bottom: 0.9rem;
}
.legal-page .legal-contact-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  line-height: 1.9;
  color: var(--text-muted, #6b6b6b);
}

/***** Cookie notice *****/
.cookie-notice {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1050;
  max-width: 720px;
  margin: 0 auto;
  background: #1c1c1c;
  color: #f2f2f2;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  /* Height-independent hide: a fixed pixel bottom offset (e.g. -120px) is
     not guaranteed to clear the box once the text wraps to 3 lines on
     narrower viewports — the box can end up taller than the offset, so a
     ~25px sliver stays inside the viewport and looks "stuck" even though
     .is-visible has been removed. translateY(150%) always clears the full
     box regardless of its rendered height. pointer-events is dropped in
     the hidden state too, so a mis-measured hide can never eat clicks
     meant for the page underneath it. */
  transform: translateY(150%);
  pointer-events: none;
  transition: transform 0.35s ease;
}
.cookie-notice.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.cookie-notice__text {
  font-size: 0.9rem;
  line-height: 1.5;
}
.cookie-notice__link {
  color: #9fd68a;
  text-decoration: underline;
  margin-left: 6px;
  white-space: nowrap;
}
.cookie-notice__btn {
  flex: 0 0 auto;
  background: var(--primary-green, #4c8a3f);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.cookie-notice__btn:hover {
  opacity: 0.9;
}
@media (max-width: 576px) {
  .cookie-notice { left: 10px; right: 10px; padding: 14px; }
  .cookie-notice__inner { flex-direction: column; align-items: stretch !important; }
  .cookie-notice__btn { width: 100%; }
}