/*
Theme Name: FoodMart
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: FoodMart is specially designed product packaged for eCommerce store websites.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Floating & Alignment
  2.3 Forms
  2.4 Lists
  2.5 Code
  2.6 Tables
  2.7 Spacing
  2.8 Utilities
  2.9 Misc
    - Row Border
    - Zoom Effect
  2.10 Buttons
    - Button Sizes
    - Button Shapes
    - Button Color Scheme
    - Button Aligns
  2.11 Section
    - Hero Section
    - Section Title
    - Section Paddings
    - Section Margins
    - Section Bg Colors
    - Content Colors
    - Content Borders

3. EXTENDED TYPOGRAPHY
  3.1 Blockquote / Pullquote
  3.2 Text Highlights

4. CONTENT ELEMENTS
  4.1 Tabs
  4.2 Accordions
  4.3 Brand Carousel
  4.4 Category Carousel

5. BLOG STYLES
  5.1 Blog Single Post
  5.2 About Author
  5.3 Comments List
  5.4 Comments Form3

6. SITE STRUCTURE
  6.1 Header
    - Header Menu
    - Nav Sidebar
  6.2 Billboard
  6.3 About Us Section
  6.4 Video Section
  6.5 Selling Products Section
  6.6 Quotation Section
  6.7 Latest Blogs Section
  6.8 Newsletter Section
  6.9 Instagram Section
  6.10 Footer
    - Footer Top
    - Footer Bottom

7. OTHER PAGES
  7.1 Product detail
  7.2 Shop page

    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  /* widths for rows and containers
     */
  --header-height: 160px;
  --header-height-min: 80px;
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}

/* Theme Colors */
:root {
  --accent-color: #FFC43F;
  --dark-color: #222222;
  --light-dark-color: #727272;
  --light-color: #fff;
  --grey-color: #dbdbdb;
  --light-grey-color: #fafafa;
  --primary-color: #6995B1;
  --light-primary-color: #eef1f3;
}

/* Fonts */
:root {
  --body-font: "Open Sans", sans-serif;
  --heading-font: "Nunito", sans-serif;
}

body {
  --bs-link-color: #333;
  --bs-link-hover-color: #333;

  --bs-link-color-rgb: 40, 40, 40;
  --bs-link-hover-color-rgb: 0, 0, 0;

  /* --bs-link-color: #FFC43F;
  --bs-link-hover-color: #FFC43F; */

  --bs-light-rgb: 248, 248, 248;

  --bs-font-sans-serif: "Open Sans", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 2;
  --bs-body-color: #747474;

  --bs-primary: #FFC43F;
  --bs-primary-rgb: 255, 196, 63;

  --bs-success: #a3be4c;
  --bs-success-rgb: 163, 190, 76;

  --bs-primary-bg-subtle: #FFF9EB;
  --bs-success-bg-subtle: #eef5e5;

  --bs-border-color: #F7F7F7;

  --bs-secondary-rgb: 230, 243, 251;
  /* --bs-success-rgb: 238, 245, 228; */
  --bs-danger-rgb: 249, 235, 231;
  --bs-warning-rgb: 255, 249, 235;
  --bs-info-rgb: 230, 243, 250;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ffc43f;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #f7a422;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ffc43f;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: transparent;
}

.btn-outline-primary {
  --bs-btn-color: #ffc43f;
  --bs-btn-border-color: #ffc43f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ffc107;
  --bs-btn-hover-border-color: #ffc107;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ffc107;
  --bs-btn-active-border-color: #ffc107;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff3cd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #fff3cd;
  --bs-gradient: none;
}

.btn-outline-light {
  --bs-btn-color: #747474;
  --bs-btn-border-color: #EFEFEF;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #EFEFEF;
  --bs-btn-hover-border-color: #EFEFEF;
  --bs-btn-focus-shadow-rgb: 248, 249, 250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #EFEFEF;
  --bs-btn-active-border-color: #EFEFEF;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #EFEFEF;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #EFEFEF;
  --bs-gradient: none;
}

.btn-warning {
  --bs-btn-color: #747474;
  --bs-btn-bg: #FCF7EB;
  --bs-btn-border-color: #FCF7EB;
  --bs-btn-hover-color: #747474;
  --bs-btn-hover-bg: #FFECBE;
  --bs-btn-hover-border-color: #FFECBE;
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #FFECBE;
  --bs-btn-active-border-color: #FFECBE;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #FCF7EB;
  --bs-btn-disabled-border-color: #FCF7EB;
}

.btn-success {
  --bs-btn-color: #222;
  --bs-btn-bg: #EEF5E4;
  --bs-btn-border-color: #EEF5E4;
  --bs-btn-hover-color: #222;
  --bs-btn-hover-bg: #9de3c2;
  --bs-btn-hover-border-color: #9de3c2;
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: #9de3c2;
  --bs-btn-active-border-color: #9de3c2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #222;
  --bs-btn-disabled-bg: #EEF5E4;
  --bs-btn-disabled-border-color: #EEF5E4;
}

.btn-danger {
  --bs-btn-color: #222;
  --bs-btn-bg: #FFEADA;
  --bs-btn-border-color: #FFEADA;
  --bs-btn-hover-color: #222;
  --bs-btn-hover-bg: #ecc9af;
  --bs-btn-hover-border-color: #ecc9af;
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: #ecc9af;
  --bs-btn-active-border-color: #ecc9af;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #222;
  --bs-btn-disabled-bg: #FFEADA;
  --bs-btn-disabled-border-color: #FFEADA;
}

body {
  letter-spacing: 0;
  /* було 0.03em – спотворювало вигляд Rubik */
}

/* Щоб браузер не “домальовував” жирність */
.about-hero-v2 .hero-title,
.about-hero-v2 .hero-subtitle,
.about-hero-v2 .hero-text {
  font-family: 'Rubik', sans-serif;
  letter-spacing: 0;
  font-kerning: normal;
  font-synthesis: none;
  /* важливо */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  color: var(--dark-color);
  font-weight: 700;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-weight: 700;
}

.breadcrumb.text-white {
  --bs-breadcrumb-divider-color: #fff;
  --bs-breadcrumb-item-active-color: var(--bs-primary);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary);
}

.nav-pills .nav-link {
  --bs-nav-pills-link-active-color: #111;
  --bs-nav-pills-link-active-bg: #f1f1f1;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --bs-gutter-x: 3rem;
}

/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
/* Preloader */
.preloader-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 111;
  background: #fff;
}

.preloader-wrapper .preloader {
  margin: 20% auto 0;
  transform: translateZ(0);
}

.preloader:before,
.preloader:after {
  content: '';
  position: absolute;
  top: 0;
}

.preloader:before,
.preloader:after,
.preloader {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  animation: animation 1.2s infinite ease-in-out;
}

.preloader {
  animation-delay: -0.16s;
}

.preloader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}

.preloader:after {
  left: 3.5em;
}

@keyframes animation {

  0%,
  80%,
  100% {
    box-shadow: 0 2em 0 -1em var(--accent-color);
  }

  40% {
    box-shadow: 0 2em 0 0 var(--accent-color);
  }
}

/* *** Start editing below this line *** */
.container-fluid {
  max-width: 1600px;
}

.banner-blocks {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 2rem;
}

.block-1 {
  grid-area: 1 / 1 / 3 / 8;
}

.block-2 {
  grid-area: 1 / 8 / 2 / 13;
}

.block-3 {
  grid-area: 2 / 8 / 3 / 13;
}

@media screen and (max-width:1140px) {
  .banner-blocks {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }

  .block-1 {
    grid-area: 1 / 1 / 3 / 2;
  }

  .block-2 {
    grid-area: 3 / 1 / 4 / 2;
  }

  .block-3 {
    grid-area: 4 / 1 / 5 / 2;
  }

}

/* banner ad */
.banner-ad {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.banner-ad.blue {
  background: #e6f3fb;
}

.banner-ad .swiper-pagination {
  bottom: 40px;
  left: 0;
  right: 0;
}

.banner-ad .swiper-pagination .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  margin: 4px;
  background: #FFF;
  opacity: 1;
  transition: background 0.3s ease-out;
}

.banner-ad .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #FFC43F;
}

.banner-ad .swiper-slide {
  min-height: 630px;
  display: flex;
}

/* .banner-ad .banner-content {
  padding: 52px;
}
.banner-ad.large .banner-content {
  padding: 90px;
} */
.banner-ad .banner-content .categories {
  font-family: 'Garamond';
  font-size: 37px;
  text-transform: capitalize;
  color: var(--dark-color);
}

.banner-ad .banner-content .sale {
  position: relative;
  display: inline-block;
}

.banner-ad .banner-content .sale:before {
  content: '';
  width: 80px;
  border-bottom: 1px solid #111;
  position: absolute;
  bottom: 6px;
}

.banner-ad .banner-content .sale:after {
  content: 'SALE';
  font-family: var(--body-font);
  position: absolute;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #252525;
  bottom: 0;
  right: 0;
}

.banner-ad .banner-content .banner-title {
  letter-spacing: 0.02em;
  font-size: 33px;
}

.banner-ad.large .banner-content .categories {
  color: var(--accent-color);
}

.banner-ad.large .banner-content .banner-title {
  font-size: 54px;
}

/* Swiper carousel */
.swiper-prev,
.swiper-next {
  width: 38px;
  height: 38px;
  line-height: 38px;
  background: #F1F1F1;
  color: #222222;
  padding: 0;
  text-align: center;
  border-radius: 10px;
  --bs-btn-border-color: transparent;
  --bs-btn-active-bg: #ec9b22;
  --bs-btn-active-border-color: transparent;
  --bs-btn-hover-bg: #FFC43F;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-disabled-color: #ccc;
  --bs-btn-disabled-bg: #eaeaea;
  --bs-btn-disabled-border-color: #eaeaea
}

.swiper-prev:hover,
.swiper-next:hover {
  background: #FFC43F;
}

.btn-link {
  margin-right: 30px;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  text-align: right;
  text-transform: capitalize;
  color: #787878;
}

/* category carousel */
.category-carousel .category-item {
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  text-align: center;
  padding: 60px 20px;
  margin: 20px 0;
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}

.category-carousel .category-item:hover {
  transform: translate3d(0, -10px, 0);
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}

.category-carousel .category-item .category-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #222222;
  margin-top: 20px;
}

/* brand carousel */
.brand-carousel .brand-item {
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  padding: 16px;
}

.brand-carousel .brand-item img {
  width: 100%;
  border-radius: 12px;
}

.brand-carousel .brand-item .brand-details {
  margin-left: 15px;
}

.brand-carousel .brand-item .brand-title {
  margin: 0;
}

/* product tabs */
.product-tabs .nav-tabs {
  justify-content: flex-end;
  border: none;

  --bs-nav-link-hover-color: #111;
  --bs-nav-link-color: #555;
  --bs-nav-tabs-link-border-color: #fff;
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-border-color: #fff;
}

.product-tabs .nav-tabs .nav-link.active,
.product-tabs .nav-tabs .nav-item.show .nav-link {
  /* border: none; */
  border-bottom: 3px solid var(--accent-color);
}

/* product-grid */
/* .product-grid {
  gap: 25px;
} */
.product-item {
  position: relative;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  margin-bottom: 30px;
  transition: box-shadow 0.3s ease-out;
}

.product-item:hover {
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}

.product-item h3 {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  text-transform: capitalize;
  color: #333333;
  margin: 0;
}

.product-item figure {
  background: #F9F9F9;
  border-radius: 12px;
  text-align: center;
}

.product-item figure img {
  max-height: 210px;
  height: auto;
}

.product-item .btn-wishlist {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d8d8d8;
  transition: all 0.3s ease-out;
}

.product-item .btn-wishlist:hover {
  background: rgb(240, 56, 56);
  color: #fff;
}

.product-item .qty {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #9D9D9D;
}

.product-item .rating {
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  text-transform: capitalize;
  color: #222222;
}

.product-item .rating iconify-icon {
  color: #FFC43F;
}

.product-item .price {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 22px;
  line-height: 30px;
  text-transform: capitalize;
  color: #222222;
}

.product-item .product-qty {
  width: 85px;
}

.product-item .btn-link {
  text-decoration: none;
}

.product-item #quantity {
  height: auto;
  width: 28px;
  text-align: center;
  border: none;
  margin: 0;
  padding: 0;
}

.product-item .btn-number {
  width: 26px;
  height: 26px;
  line-height: 1;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E2E2E2;
  border-radius: 6px;
  color: #222;
  padding: 0;
}

/* cart */
.cart .product-qty {
  min-width: 130px;
}

/* floating image */
.image-float {
  margin-top: -140px;
  margin-bottom: -140px;
}

@media screen and (max-width:991px) {
  .image-float {
    margin: 0;
  }
}

/* post item */
.post-item .post-meta {
  font-size: 0.8rem;
  line-height: 1;
}

.post-item .post-meta svg {
  margin-right: 5px;
}

@media screen and (max-width: 991px) {

  /* offcanvas menu */
  .offcanvas-body .nav-item {
    font-weight: 700;
    border-bottom: 1px solid #d1d1d1;
  }

  .offcanvas-body .filter-categories {
    width: 100%;
    margin-bottom: 20px !important;
    border: 1px solid #d1d1d1 !important;
    padding: 14px;
    border-radius: 8px;
  }

  /* dropdown-menu */
  .dropdown-menu {
    padding: 0;
    border: none;
    line-height: 1.4;
    font-size: 0.9em;
  }

  .dropdown-menu a {
    padding-left: 0;
  }

  .dropdown-toggle::after {
    position: absolute;
    right: 0;
    top: 21px;
  }
}

/* single product */
/* product-thumbnail-slider */
.product-thumbnail-slider {
  height: 740px;
}

@media screen and (max-width:992px) {
  .product-thumbnail-slider {
    margin-top: 20px;
    height: auto;
  }
}

@media screen and (min-width:992px) {
  .product-thumbnail-slider {
    height: 520px;
  }
}

@media screen and (min-width:1200px) {
  .product-thumbnail-slider {
    height: 740px;
  }
}

/* --- Language switcher styles --- */
.language-buttons {
  right: 60px;
  z-index: 1050;
  padding: 4px 10px 4px 10px;
  top: 30px;
}

.container-fluid {
  padding-left: 10px;
  padding-right: 10px;
}

.content {
  margin: 20px;
}

.lang-btn:visited,
.lang-btn:focus,
.lang-btn:active {
  color: #000 !important;
}

.lang-btn.active {
  font-weight: bold;
}

.lang-btn {
  color: #000 !important;
  border: none;
  background: none;
  padding: 1px;
}

.cart-block img {
  display: block;
  margin: 0 auto;
}

.cart-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cart-block button {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.cart-block img {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  display: block;
}

.cart-sum {
  margin-top: 0 !important;
  padding-top: 0 !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.1;
}

.cart-block,
.cart-block * {
  line-height: 1 !important;
}

.main-logo {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-logo img {
  max-height: 100%;
  width: auto;
  display: block;
}

.col-sm-8.col-lg-4 .rounded-circle.bg-light.p-2 {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

.cart-block {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 40px;
}

.cart-block>button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0;
  background: transparent;
}

.cart-block img {
  width: 24px;
  height: 24px;
  display: block;
}

.cart-block .cart-sum {
  position: absolute;
  top: calc(100% - 6px);
  left: 50%;
  transform: translate(-50%, 0);
  margin: 0;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.cart-block {
  flex-direction: row;
}

.search-bar svg {
  width: 20px;
  height: 20px;
}

.search-bar select {
  display: none !important;
}

.header-menu {
  gap: 1.25rem;
}

.header-menu .menu-link {
  color: #212529;
  text-decoration: none;
  font-weight: 500;
}

.header-menu .menu-link:hover,
.header-menu .menu-link:focus-visible,
.header-menu .menu-link.active {
  color: #000;
  text-decoration: none;
  font-weight: 700;
}

.header-top-row {
  --bs-gutter-x: .5rem;
}

.header-menu {
  gap: 1rem;
}

.search-bar {
  --bs-gutter-x: .5rem;
  padding: 6px 10px !important;
  border-radius: 20px;
  width: 320px;
  max-width: 320px;
}

@media (min-width: 1200px) {
  .search-bar {
    width: 420px;
    max-width: 420px;
  }
}

@media (min-width: 1400px) {
  .search-bar {
    width: 520px;
    max-width: 520px;
  }
}

.search-bar input.form-control {
  height: 34px;
  padding: 6px 10px;
  font-size: .95rem;
  min-width: 0;
}

/* Header layout: left + centered search + right */
.header-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 64px;
}

.header-bar .left-side {
  display: flex;
  align-items: center;
}

.header-bar .right-side {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-bar .center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

/* меню трохи далі від логотипа */
.header-menu {
  margin-left: 1rem;
}

.language-buttons .lang-btn {
  font-weight: 500;
}

.language-buttons .lang-btn.active {
  font-weight: 800 !important;
}

.header-bar .center {
  flex: 1 1 auto;
  min-width: 260px;
}

.right-side ul {
  margin: 0;
}

.language-buttons form {
  margin: 0 2px;
}


/* Language switcher – header style */
.language-buttons {
  position: static;
  top: auto;
  right: auto;
  padding: 0;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  height: 40px;
  border-radius: 9999px;
}

.lang-switch img {
  width: 18px;
  height: 18px;
  opacity: .85;
}

.lang-switch .divider {
  color: #adb5bd;
  font-weight: 600;
  line-height: 1;
}

.lang-switch .lang-btn {
  border: 0;
  background: transparent;
  padding: 6px 10px;
  border-radius: 9999px;
  line-height: 1;
  font-weight: 600;
  color: #000;
}

.lang-switch .lang-btn:hover {
  background: #efefef;
}

.lang-switch .lang-btn.active {
  background: #fff;
  box-shadow: 0 0 0 1.5px #efefef inset;
  font-weight: 600;
  /* було 800 */
  /* можна додати трохи темніший текст */
  color: #222;
  /* плавний перехід */
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}

.search-bar{
  width: auto;
  max-width: none;
  flex: 1 1 auto;   /* дозволяє стискатись/розширюватись у flex-контейнері */
  min-width: 0;     /* щоб інпут не роздувався */
}

/* За бажанням — мінімальна ширина на великих екранах */
@media (min-width: 992px){
  .search-bar{ flex-basis: 240px; }
}

.lang-btn{ background:transparent; border:0; padding:2px 6px; font-size:12px; line-height:1; }
.lang-btn.active{ font-weight:600; }
.lang-switch .divider{ opacity:.6; }

.navbar-toggler-icon{
    display:inline-block;width:1.5em;height:1.5em;
    background-repeat:no-repeat;background-position:center;background-size:100% 100%;
    background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0,0,0,.85)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  /* Трохи стислий інпут на мобілі (нижній пошук) */
@media (max-width: 991.98px){
  #search-form-m .form-control{ font-size:14px; }
}

#mobileMenu a:hover{ background:#f8f9fa; }
.collapse:not(.show){ display:none; }

/* Створення CSS-змінних з кольорів brandkit */
.about-hero-v2 {
  position: relative;
  height: 750px;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: cover;
  overflow: hidden;
  margin-top: 0;
  /* було: calc(var(--header-height-min) * -1) */
}

.about-hero-v2 .hero-title {
  position: absolute;
  top: calc(220px - var(--header-height-min));
  /* компенсуємо прибирання negative margin */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Rubik', sans-serif;
  font-weight: 900;
  font-size: 85px;
  line-height: 1.1;
  color: #000;
  text-align: center;
}

.about-hero-v2 .hero-subtitle {
  position: absolute;
  top: calc(320px - var(--header-height-min));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: #000;
  text-align: center;
}

.about-hero-v2 .hero-text {
  position: absolute;
  top: calc(400px - var(--header-height-min));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: 600px;
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: #000;
  text-align: center;
}

/* Hero: точніший вигляд Rubik, без глобального letter-spacing */
.about-hero-v2 .hero-title,
.about-hero-v2 .hero-subtitle,
.about-hero-v2 .hero-text {
  letter-spacing: 0;
  /* скидаємо body: 0.03em */
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Адаптивні правки */
@media (max-width: 991.98px) {
  .about-hero-v2 .hero-title {
    top: 100px;
    font-size: 64px;
  }

  .about-hero-v2 .hero-subtitle {
    top: 160px;
    font-size: 22px;
  }

  .about-hero-v2 .hero-text {
    top: 210px;
    font-size: 18px;
    max-width: 86vw;
  }
}

/* Блок з фото (для історії) */
.story-image {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
  border-radius: 15px;
}

/* Картка для філософії */
.philosophy-card {
  background-color: var(--k-white);
  border-radius: 15px;
  padding: 2rem;
  height: 100%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.philosophy-card-icon {
  font-size: 2.5rem;
  color: var(--k-blue);
  /* Іконки залишив синіми для акценту */
  margin-bottom: 1rem;
}

/* Картка для інгредієнтів */
.ingredient-card {
  background-color: #f8f9fa;
  border-radius: 15px;
  padding: 2rem;
  height: 100%;
}

/* ================================================
  ЗМІНА: Секція "Наша Команда"
  ================================================
*/
.team-card {
  border: none;
  /* Прибрали фон, тінь та рамку */
  background-color: transparent;
  text-align: center;
}

.team-card img {
  /* Зробили фото круглим */
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 1.5rem;
  /* Додаємо margin: auto, щоб центрувати, якщо колонка ширша */
  margin-left: auto;
  margin-right: auto;
}

.team-card-body {
  /* Прибрали зайві відступи */
  padding: 0;
}

/* Outline CTA — через змінні Bootstrap */
.btn-outline-k {
  --bs-btn-color: #000;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #111;
  --bs-btn-active-border-color: #111;
  --bs-btn-border-width: 2px;
  --bs-btn-border-radius: 12px;
  --bs-btn-padding-y: .75rem;
  --bs-btn-padding-x: 1.5rem;
}

/* Якщо Bootstrap підключений після style.css */
.btn.btn-outline-k {
  border-width: var(--bs-btn-border-width) !important;
  border-color: var(--bs-btn-border-color) !important;
  border-radius: var(--bs-btn-border-radius) !important;
}