/*
Theme Name: Hello Elementor Child
Description: Child theme for Hello Elementor - Cermat
Author: mpipin
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Your custom CSS goes below this line */

@font-face {
  font-family: "ZonaPro";
  src: url("/wp-content/uploads/2026/03/ZonaPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ZonaPro";
  src: url("/wp-content/uploads/2026/03/ZonaPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ZonaPro";
  src: url("/wp-content/uploads/2026/03/ZonaPro-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

body {
    font-family: "ZonaPro", sans-serif;
}

:root {
  --banner-left: clamp(32px, 6vw, 100px);
  --banner-width: 75%;
  --p-width: 30%;
  --p-offset-inside-banner: calc((var(--banner-width) - var(--p-width)) / 2);
}


/* posts */

.post-template--custom .site-main {
  max-width: none;
}

.post-template--custom .post-layout__bg {
  width: 100%;
  background: #f5f1ea;
}

.post-layout__outer {
  width: 100%;
}

.post-layout__bg {
  width: 100%;
  background:#3C150A;
}

.single-product-left > figure.wp-block-image:first-child img  {
    max-width: 82%;
}

.post-layout__bg__ice-cream {
	background:#D1E8F2;
	
	.post-layout__content {
	   padding: 0px 0px 120px 0px;
		background:#D1E8F2;
		
		 p.wp-block-paragraph:empty {
    display: none;
}
		
.wp-block-columns.single-product-columns {
    display: grid !important;
    grid-template-columns: 50% 50%;
    gap: 0;
    margin: 0;
    align-items: start;
}

/* Do NOT put padding-top here */
.wp-block-columns.single-product-columns > .single-product-left {
    padding: 0;
    margin: 0;
}

/*
 * BLUE BLOCK:
 * starts at the page's top-left corner,
 * contains the large image,
 * ends after the image.
 */
.single-product-left > figure.wp-block-image:first-child {
    box-sizing: border-box;
    width: 100%;
    min-height: 760px; /* Adjust if needed */
    margin: 0;
    padding: 250px 70px 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #8BD3F4;
}
		.wp-block-columns.single-product-columns > .single-product-right {
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 250px 70px 80px;
}
		
			
	}
	
	table tbody tr:nth-child(odd) {
  		background: #00469B !important;
	}
	
	table tbody tr:nth-child(even) td:first-child {
    color: #00469B !important;
}

/* Even rows: every other column */
table tbody tr:nth-child(even) td:not(:first-child) {
    color: #53311E !important;
}
	.wp-block-table {
		padding-left: 100px;
	}
	
	.back-button {
		padding-left: 100px;
	}
	
	p, h1 {
		color: #53311E !important;
	}
	
	.alergens svg path {
    stroke: #53311E !important;
}
}

.post-layout__container {
  width: 100%;
  margin: 0 auto;
}

.post-layout__article {
  width: 100%;
}

.wp-block-table {
	margin-top: 100px;
}

.a2a_svg svg {
	width: 32px;
  height: 32px;
}

.single-product-columns {
	gap: 100px;
}

.post-layout__content {
  width: 100%;
  padding: 250px 100px 120px 100px;
	
	p, h1 {
		color: #fff;
	}
	
	table {
		border-collapse: separate;
  		border-spacing: 0 3px;
		color: #fff;
	}
	
	table thead th {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  padding: 12px 14px;
  text-align: center;
  white-space: nowrap;
}
	
	table thead th:first-child {
  text-align: left;
}
	
table tbody td {
  padding: 12px 16px;
  font-size: 14px;
  vertical-align: top;
}

table tbody td:first-child {
  color: #ffffff;
  font-weight: 700;
  width: 33%;
  text-align: left;
}
	
	table tbody tr:nth-child(odd) {
  background: #3E2C2F;
}
	
	table,
table th,
table td,
table tr {
  border: none !important;
}

table tbody tr:nth-child(even) {
  background: transparent;
}

table tbody td:not(:first-child) {
  color: #fff;
  font-weight: 400;
  text-align: center;
  width: 17%;
}

table tbody tr.striped td:first-child {
  color: #ffffff;
}

table tbody tr:not(.striped) td {
  background: transparent;
}

 table .multiline {
  line-height: 1.2;
}
	.back-button {
  width: 100%;
}

.back-button .btn-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 8px 24px;
  background: #fff;
  border-radius: 999px;
  text-decoration: none;
  color: #6b3a1e;
}

.back-button .btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.back-button .btn-text {
  line-height: 1;
  text-align: center;
}
}

.post-layout__bg__brands {
  width: 100%;
  background:#D1E8F2;
	
		table tbody tr:nth-child(odd) {
  		background: #00469B !important;
	}
	
	table tbody tr:nth-child(even) td:first-child {
    color: #00469B !important;
}

/* Even rows: every other column */
table tbody tr:nth-child(even) td:not(:first-child) {
    color: #53311E !important;
}
	
	p, h1 {
		color: #53311E !important;
	}
	
	.alergens svg path {
    stroke: #53311E !important;
}
	
	.single-product-left > figure.wp-block-image:first-child {
    box-sizing: border-box;
    width: 100%;
    min-height: 660px;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;
		border: 1px solid #00469B;
		border-radius: 40px;
		padding: 120px;

}
	
	
	
}

.alergens {
	border: 1px solid #7D5331;
    border-radius: 32px;
    padding: 5px 18px;
    width: fit-content;
	
	svg {
	    min-width: 35px;
   		min-height: 35px;
	}
}

.single-product-left {
	.wp-block-image {
		text-align: center;
	}
}

.news-template {
	    padding: 200px 100px 100px 100px;
    text-align: initial;
	background:#D1E8F2;
	
	.post-layout-news__content {
		padding: 50px 0px 40px 0px;
	}
	
	.news-single__title {
		color: #00469B;
		font-size: clamp(34px, 4vw, 56px);
		font-weight:600;
		line-height: 1.2;
		max-width: 1200px;
        margin: 0 auto;
		text-align: center;
		
	}
	
	.news-single__source {
  display: flex;
  gap: 0.35rem;
  margin-top: 1.25rem;
  font-size: 16px;
  justify-content: center;
		
}

.news-single__source-label {
  font-weight: 600;
}

.news-single__source-link {
  text-decoration: underline;
	color: #00469B;
	font-weight: 600;
}
	
	.news-single__meta {
		font-size:20px;
		color: #00469B;
		padding-bottom: 24px;
		text-align: center;
	}
	
	p {
		color: #00469B;
		font-size: 18px;
        line-height: 32px;
	}
	hr {
		color: #000;
	}
	
	.wp-block-heading {
		 max-width: 800px;
    		margin: 0 auto;
		color: #00469B;
		line-height:clamp(38px, 3vw, 54px);
		font-size: clamp(26px, 3vw, 32px);
	}
	
	.wp-block-paragraph:first-child {
		text-align: center;
		max-width: 600px;
		margin: 0 auto;
	}
	
	.wp-block-paragraph:not(:first-child) {
		    max-width: 800px;
    		margin: 0 auto;
	}
	
	.wp-block-image img:first-child {
		width: 100%;
        border-radius: 36px;
		margin: 100px 0;
	}
	
	.news-read-more {
  position: relative;
  max-width: initial;
  margin: 60px auto 0;
  padding-top: 30px;
  border-top: none;
}

.news-read-more__heading {
  margin-bottom: 28px;
  text-align: center;
}

.news-read-more__heading h2 {
  margin: 0;
  color: #005da6;
  font-size: clamp(32px, 3vw, 48px);
  line-height: 1.1;
	font-weight: 600;
	padding-bottom:30px;
}

.news-carousel {
  position: relative;
}

.news-carousel__track {
  --news-card-gap: 40px;

  display: flex;
  gap: var(--news-card-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.news-carousel__track::-webkit-scrollbar {
  display: none;
}

.news-carousel__slide {
  flex: 0 0 calc(
    (100% - (var(--news-card-gap) * 3)) / 4
  );
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.news-card__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.news-card__image {
  overflow: hidden;
  aspect-ratio: 1 / 0.72;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.25);
}

.news-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.news-card__link:hover .news-card__image img {
  transform: scale(1.05);
}

.news-card__body {
  padding-top: 13px;
}

.news-card__meta {
  display: block;
  margin-bottom: 7px;
  color: rgba(83, 58, 40, 0.72);
  font-size: 12px;
  line-height: 1.3;
}

.news-card__title {
  margin: 11px 0 11px;
  color: #005da6;
  font-size: clamp(16px, 3vw, 24px);
  line-height: 1.2;
	font-weight: 600;
}

.news-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #005da6;
  font-size: 13px;
  font-weight: 700;
}

.news-card__arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.news-card__link:hover .news-card__arrow {
  transform: translateX(4px);
}

.news-carousel__arrow {
  position: absolute;
  z-index: 2;
  top: 38%;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #00469B;
  color: #ffffff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.news-carousel__arrow:hover {
  background: #004a84;
}

.news-carousel__arrow:focus-visible,
.news-card__link:focus-visible {
  outline: 3px solid #005da6;
  outline-offset: 4px;
}

.news-carousel__arrow:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.news-carousel__arrow--prev {
  left: -65px;
}

.news-carousel__arrow--next {
  right: -65px;
}
	
	.news-single__share {
    max-width: 800px;
    margin: 2rem auto 4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Keep the heading and icons on the same line */
.news-single__share-title {
    flex: 0 0 auto;
    margin: 0;
	font-size: 16px;
	color: #005da6;
}

/* AddToAny wrapper */
.news-single__share .addtoany_share_save_container {
    margin: 0 !important;
    padding: 0 !important;
}

/* AddToAny icon row */
.news-single__share .a2a_kit {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    line-height: 1 !important;
}

/* Remove default spacing from each icon */
.news-single__share .a2a_kit > a {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
}

/* Keep the SVG icons at their normal size */
.news-single__share .a2a_svg {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
	
	.addtoany_shortcode {
		padding-top: 0px
	}

}

/* news */

.news-content {
	padding: 100px;
	background: #D1E8F2;
	
	/* Intro */
.news-intro {
    padding: 90px 0 10px;
    text-align: center;
}

.news-intro h1 {
    margin: 0 0 20px;
    color: #00469B;
    font-size: clamp(32px, 4vw, 70px);
    line-height: 1;
	font-weight: 600;
}

.news-intro p {
    max-width: 700px;
    margin: 0 auto;
    color: #00469B;
    font-size: 18px;
    line-height: 1.8;
}

/* News list */
.news-list {
    padding: 20px 0 60px;
	border-bottom: 0.5px solid #00469B;
}

.news-card {
    display: grid;
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    gap: 120px;
    align-items: start;
	border-top: 0.5px solid #00469B;
    padding-top: 60px;
    margin-top: 60px;
}

.news-card-content {
    height: auto;
    display: flex;
	flex-direction: column;
	min-height: 420px;
	
	.news-meta {
    margin-bottom: 14px;
    color: #00469B;
    font-size: 16px;
    line-height: 1.4;
    margin-top: 0;
    display: flex;
}
	.news__source-link {
		color: #00469B;
	}
}
	
	.news-botom {
		    text-align: center;
    background: linear-gradient(
        90deg,
        #0054A6 0%,
        #00AEFF 100%
    );
    padding: 76px 62px;
    border-radius: 40px;
		color: #ffffff;
		        margin-top: 120px;
		
		.title-lines {
			text-align: center;
			justify-content: center;
			display: inline-flex;
			margin-bottom: 30px;
		}
		
		h3 {
			margin: 0 auto;
			line-height: 1.4;
			max-width: 800px;
		}
	}



.news-separator {
    margin: 0 4px;
}

.news-card-title {
    max-width: fit-content;
    margin: 10px 0px 0px 0px;
    color: #5b3a28;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.2;
	font-weight: 600;
}

.news-card-title a {
    color: #00469B;
    text-decoration: none;
}

.news-card-title a:hover {
    color: #00469B;
}

.news-card-excerpt {
    max-width: fit-content;
    color: #456273;
    font-size: 18px;
    line-height: 1.8;
	margin-top: auto;
    margin-bottom: 20px;
}
	
	.desktop-button {
    margin-top: 0;
}

.news-card-excerpt p {
    margin: 0;
	color: #00469B;
	font-size: 18px;
}

.news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 8px 12px;
    color: #fff;
    background: #8d5a2b;
    border-radius: 999px;
    font-size: 12px;
    text-decoration: none;
}

.news-read-more-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #8d5a2b;
    background: #fff;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
}

.news-card-image {
    display: block;
    overflow: hidden;
    border: 3px solid transparent;
    border-radius: 30px;
    line-height: 0;
}

.news-card-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.news-card-placeholder {
    height: 260px;
    background: #b6d4e2;
}
}



/* news */


/* posts */


/* ice creams */

.ice-creams-content {
	background: #b6d4e2;
	padding: 100px;
	
}

.ice-creams-hero {
    position: relative;
    margin: 0 0px 110px;
	    overflow: visible;
}

.ice-creams-hero__media {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 18px 18px;
	    overflow: visible;
}

.ice-creams-hero__image {
    display: block;
    width: 100%;
    height: auto;
    min-height: 335px;
    max-height: 600px;
    object-fit: cover;
    object-position: center;
	border-radius: 30px;
}

.ice-creams-hero__title-wrap {
    position: absolute;
    top: calc(65% - 30px);
    left: 50%;
    z-index: 1;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.ice-creams-hero__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(40px, 6vw, 76px);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.ice-creams-hero__filters {
    position: absolute;
    right: 50%;
    bottom: -75px;
    z-index: 2;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 14px;

    width: 85%;
    min-height: 184px;
    padding: 24px 2%;

    background: #01AEEf;
    border-radius: 18px;
    box-sizing: border-box;
    transform: translateX(50%);
}

.ice-creams-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 8px 16px;

    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;

    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
	letter-spacing: 0.03em;
    text-decoration: none;
	text-transform: uppercase;
	flex: 0 0 auto;
    width: max-content;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.ice-creams-filter:hover,
.ice-creams-filter.is-active {
    background-color: #653A2E;
    border-color: #ffffff;
    color: #fff;
}

.ice-creams-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 200px 80px;
    margin: 0 auto;
	padding: 70px 0px;
}

.ice-creams-card2 {
  width: 90%;
  margin-inline: auto;
  justify-self: center;
}

.ice-creams-card2 > a {
  position: relative;
  display: block;
  width: 100%;
  height: 620px;
  overflow: visible;
  text-decoration: none;
}

.ice-creams-image2 {
  position: relative;
  z-index: 10;

  display: flex;
  align-items: flex-start;
  justify-content: center;

  width: 100%;
  height: 0;
  padding-top: 100%;

  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ice-creams-image2::before {
  content: "";
  position: absolute;
  z-index: 1;

  top: 50%;
  left: 0;

  width: 100%;
  height: 35%;

  border-radius: 24px;
  background: #01AEEf;
  transform: translateY(-50%);
}

.ice-creams-image2::after {
  content: "";
  position: absolute;
  z-index: 0;

  top: calc(30% + 80px);
  left: 0;

  width: 100%;
  height: 50%;

  background: #ffffff;
  border-radius: 0px;
}

.product-title-info3 {
	z-index: 10;
	border-radius: 0 0 24px 24px;
  	background: #ffffff;
	width: 100%;
	text-align: center;
	min-height: 120px;
	margin-top: -15px;
}

.ice-creams-image2 img {
  position: absolute;
  z-index: 2;

  top: 50%;
  left: 50%;

  width: auto;
  height: auto;
  max-width: 70%;

  transform: translate(-50%, -50%);
	    max-height: 85%;
}

.btn-arrow-ice-creams {
  position: relative;
  z-index: 4;
  bottom: -125px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
  transform: translateX(-50%);
}

.btn-arrow-ice-creams svg {
  width: 22px;
  height: 22px;
}


/* .product-title-info1 {
	    display: flex;
    justify-content: center;
    height: 130px;
    min-height: 130px;
    padding: 24px 40px;
    background: #ffffff;
    border-radius: 0 0 40px 40px;
    box-sizing: border-box;
} */

.ice-creams-post-title {
    margin: 14px 0 5px;
    color: #00469B;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    margin-block-end: 10px;
    margin-block-start: 0px;
	max-width: 180px;
	margin: 0 auto;
}

/* ice creams */


/* brands */

.brands-content {
	background: #b6d4e2;
	padding: 100px;
	
}

.brands-hero {
    position: relative;
    margin: 0 0px 110px;
	    overflow: visible;
}

.brands-hero__media {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 18px 18px;
	    overflow: visible;
}

.brands-hero__image {
    display: block;
    width: 100%;
    height: auto;
    min-height: 335px;
    max-height: 600px;
    object-fit: cover;
    object-position: center;
	border-radius: 38px;
}

.brands-hero__title-wrap {
    position: absolute;
    top: calc(65% - 30px);
    left: 50%;
    z-index: 1;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.brands-hero__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(40px, 6vw, 76px);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.brands-hero__filters {
    position: absolute;
    right: 50%;
    bottom: -75px;
    z-index: 2;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 14px;

    width: 85%;
    min-height: 184px;
    padding: 24px 12%;

    background: #00a5e5;
    border-radius: 18px;
    box-sizing: border-box;
    transform: translateX(50%);
}

.brands-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 8px 16px;

    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;

    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
	letter-spacing: 0.03em;
    text-decoration: none;
	text-transform: uppercase;
	flex: 0 0 auto;
    width: max-content;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.brands-filter:hover,
.brands-filter.is-active {
    background-color: rgba(255, 255, 255, 0.8) ;
    border-color: #ffffff;
    color: #0054A6;
}

.brands-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 240px 80px;
    margin: 0 auto;
	padding-top: 120px;
}

.brands-page-card {
    text-align: center;
}

.brands-page-card a {
    position: relative;
    z-index: 0;

    display: block;
    color: inherit;
    text-decoration: none;

    overflow: visible;
}

.brands-page-card > a::before {
    content: "";

    position: absolute;
    top: 36%;
    right: 0;
    bottom: 16px;
    left: 0;
    z-index: -1;

    border: 1px solid #5aa9cf;
    border-radius: 18px;

    pointer-events: none;
}

.brands-image {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;

    width: 100%;
    

    overflow: visible;
    border: 0;
    border-radius: 0;
	height: 0;
    padding-top: 100%;
}

.brands-image img {
    position: absolute;
    z-index: 1;
    display: block;
    max-width: 90%;
    max-height: 90%;
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
	inset: 0;
}

.brand-title-info {
    min-height: 90px;
	padding: 0 20%;
}

.brands-post-title {
    margin: 14px 0 5px;
    color: #00469B;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    margin-block-end: 10px;
    margin-block-start: 0px;
}


/* brands */


/* metropoli */

.metropoli-content {
	background: #3C150A;
	padding: 150px 100px;
	
}

.metropoli-hero {
	text-align: center;
	padding: 120px 0px;
	background-image: url(/wp-content/uploads/2026/03/Rectangle.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
	
	h3 {
		color: #fff !important;
		font-size: clamp(24px, 3vw, 38px);
		color: #53311E;
		padding-bottom: 70px;
		padding-top: 20px;
		margin-block-end: 0px;
        margin-block-start: 0px;
		
	}
}

.metropoli-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 200px 80px;
    margin: 0 auto;
}

.metropoli-card {
    text-align: center;
}

.metropoli-card a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.metropoli-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 1 / 1.25; /* Same width and height ratio for every card */
    overflow: visible;
    isolation: isolate;
	height: 0;
    padding-top: 110%;
	
}

.metropoli-image::before {
    content: "";
    position: absolute;
    z-index: -1;

    top: -10%;
    left: 50%;
    width: 65%;
    height: 100%;

    transform: translateX(-50%);

    background: radial-gradient(
        ellipse at center,
        rgba(255, 239, 195, 0.75) 0%,
        rgba(255, 205, 125, 0.38) 35%,
        rgba(255, 155, 70, 0.14) 60%,
        transparent 78%
    );

    filter: blur(28px);
    pointer-events: none;
}

.metropoli-image img {
    position: absolute;
    z-index: 1;
	inset: 0;

    display: block;
    max-width: 90%;
    max-height: 90%;
    margin: 0 auto;

    object-fit: contain;
    object-position: center;
}

.btn-arrow-new {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 14px auto 0;
    border-radius: 50%;
    background-color: #fff;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-arrow-new svg {
    display: block;
    width: 24px;
    height: 24px;
}

.product-title-info {
	min-height: 90px;
}

.metropoli-post-title {
    margin: 14px 0 5px;
	color: #fff;
    font-size: 30px;
    line-height: 1.3;
    font-weight: 700;
	margin-block-end: 10px;
    margin-block-start: 0px;
}


.metropoli-text {
    white-space: normal;
    margin: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1.3;
}
.metropoli-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 auto 42px;
}

.metropoli-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.metropoli-filter:hover,
.metropoli-filter.is-active {
    background-color: #D58207;
    border-color: #fff;
    color: #fff;
}

/* metropoli */

/* private labels */

.private-labels-title-wrap {
	position: absolute;
    left: 100px;
    bottom: 330px;
    max-width: 650px;
}
.private-labels-news {
	
	border-top: 1px solid #C9C9C9;
	border-bottom: 1px solid #C9C9C9;
	
	h3 {
		font-size: clamp(24px, 3vw, 50px);
		color: #53311E;
		font-weight: 900;
		padding-bottom: 70px;
		margin-block-end: 0px;
        margin-block-start: 0px;
	}
	
	p{
		color: #53311E;
		font-size: clamp(16px, 2.5vw, 18px);
		line-height: clamp(24px, 2.5vw, 28px);
	}
}

.private-labels-botom-2 {
	text-align: center;
	background: rgba(0, 70, 155, 0.68);
	padding: 76px 62px;
	border-radius: 40px;
	
	.title-lines {
		justify-content: center;
    	align-items: center;
	}

	
	h3 {
		font-size: clamp(24px, 3vw, 42px);
		color: #fff;
		font-weight: 500;
		line-height:  clamp(32px, 4vw, 72px);
		margin-block-end: 0px;
        margin-block-start: 0px;
		padding-top: 45px;
	}
}

.private-labels-botom-1 {
	
	padding: 55px 0px;
	
	h3 {
		font-size: clamp(24px, 3vw, 50px);
		color: #53311E;
		font-weight: 900;
		margin-block-end: 0px;
        margin-block-start: 0px;
	}
	
	p {
		color: #53311E;
		font-size: clamp(16px, 2.5vw, 18px);
		line-height: clamp(24px, 2.5vw, 28px);
	}
}

.private-labels-botom-1-grid {
	grid-template-columns: 1fr 1fr;
    display: grid;
	gap: 160px;
}

.private-labels-news-grid {
	grid-template-columns: 1fr 1fr;
    display: grid;
	gap: 160px;
	padding: 90px 0;
}
.private-labels-news-left {
	align-content: center;
}

.private-labels-news-right {
	text-align: center;
}

.private-labels-hero__info {
	position: unset;
    margin-top: -200px;
    margin-left: 55px;
    margin-right: 0px;
    background: rgba(0, 70, 155, 0.7);
    color: #fff;
    border-radius: 24px;
    padding: 64px 40px;
    font-size: clamp(16px, 2.5vw, 18px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    max-width: 60%;
	line-height: clamp(24px, 2.5vw, 28px);
}

.private-labels-text {
	
	margin-top: 130px;
	margin-bottom: 60px;
	h2 {
		max-width: 50%;
	    font-size: clamp(29px, 4vw, 80px);
        font-weight: 900;
		color: #53311E;
		margin: 0;
    }
	
	p {
		font-size: clamp(16px, 2.5vw, 50px);
		color: #53311E;
		text-indent: 165px;
		padding: 30px 0;
	}
} 

/* private labels */


/* contact */
.contact-content {
	padding: 100px;
	background: #D1E8F2;
}

.contact-intro {
    padding: 120px 0px;
}

.contact-intro-grid {
    grid-template-columns: 0.6fr 1.4fr;
    display: grid;
    gap: 50px;
	
	h2 {
		font-size: clamp(38px, 3.5vw, 70px);
        line-height: clamp(42px, 3.5vw, 74px);
        color: #53311E;
        font-weight: 700;
	}
	
	p {
		color: #53311E;
		font-size: clamp(16px, 3vw, 19px);
		line-height: clamp(32px, 3vw, 36px);
	}
}

.contact-form-section {
	background: #fff;
    padding: 80px;
    border-radius: 24px;
	margin-bottom: 40px;
}
.contact__image {
	    width: 100%;
    height: auto;
    border-radius: 24px;
}
.cermat-contact-form-wrapper {
    width: 100%;
}

.cermat-contact-form-wrapper .wpcf7-form {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    padding: 38px 48px 32px;

    background: #ffffff;
    border-radius: 16px;
}

/* Make all dimensions predictable */
.cermat-contact-form-wrapper *,
.cermat-contact-form-wrapper *::before,
.cermat-contact-form-wrapper *::after {
    box-sizing: border-box;
}

/* Two fields in the first row */
.cermat-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* Field wrapper */
.cermat-form-field {
    position: relative;
    margin: 0 0 28px;
}

/* Label sitting over the border */
.cermat-field-label {
    position: absolute;
    top: 17px;
    left: 30px;
    z-index: 2;

    display: inline-block;
    padding: 0 16px;

    background: #ffffff;
    color: #00469B;

    font-family: inherit;
    font-size: 15px;
    line-height: 1.2;
}

/* All text inputs */
.cermat-contact-form-wrapper .cermat-input {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0;

    border: 1px solid #9EB8CE;
    border-radius: 8px;
    background: #ffffff;

    color: #53311E;
    font: inherit;
    font-size: 14px;
}

/* Text input and email input padding */
.cermat-contact-form-wrapper input.cermat-input {
    padding: 12px 18px;
}

/* Message textarea */
.cermat-contact-form-wrapper textarea.cermat-input {
    min-height: 122px;
    padding: 16px 18px;
    resize: vertical;
}

/* Hide placeholder if you do not need one */
.cermat-contact-form-wrapper .cermat-input::placeholder {
    color: transparent;
}

/* Focus state */
.cermat-contact-form-wrapper .cermat-input:focus {
    border-color: #00469B;
    outline: 2px solid rgba(0, 84, 166, 0.12);
    outline-offset: 1px;
}

/* Bottom row */
.cermat-form-bottom {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

/* Submit button */
.cermat-contact-form-wrapper input.cermat-submit {
    position: relative;

    min-width: 102px;
    min-height: 50px;
    padding: 8px 70px 8px 18px;

    border: 0;
    border-radius: 999px;
    background: #0054A6 !important;

    color: #ffffff !important;
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

/* Arrow before the button text */
.cermat-contact-form-wrapper input.cermat-submit {
    text-indent: 4px;
	font-size: 15px;
}

/*
 * Input[type="submit"] cannot contain a real child span,
 * so create the arrow with a background image.
 */
.cermat-contact-form-wrapper input.cermat-submit {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%230054A6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        radial-gradient(circle, #fff 61%, transparent 47%) !important;
	background-position: right 12px center !important;
    background-size: 32px 32px, 32px 32px !important;
	background-repeat: no-repeat !important;
}

/* Button hover/focus */
.cermat-contact-form-wrapper input.cermat-submit:hover,
.cermat-contact-form-wrapper input.cermat-submit:focus {
    background-color: #00469B !important;
    color: #ffffff !important;
}

/* Validation error: required field missing or invalid input */
.cermat-contact-form-wrapper .wpcf7-form.invalid .wpcf7-response-output {
    color: red !important;
    border-color: #D13F51 !important;
    background-color: transparent !important;
}

.cermat-contact-form-wrapper .wpcf7-response-output {
    margin: 12px 0 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    color: #E60004 !important;
    font-size: 15px;
}
.cermat-contact-form-wrapper .wpcf7-not-valid-tip {
    display: none !important;
}

.cermat-thank-you {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;

    min-height: 220px;
    padding: 40px;

    border: 1px solid #65BFEA;
    border-radius: 16px;
    background: #D1E8F2;
}

.cermat-thank-you[hidden] {
    display: none !important;
}

.cermat-thank-you__icon {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
	border: none;
    border-radius: 0px;
    background: transparent;
    color: transparent;
    font-size: 20px;
}

.cermat-thank-you__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cermat-thank-you__content h2 {
    margin: 0 0 20px;

    color: #0054A6;
    font-size: clamp(38px, 3.5vw, 70px);
    line-height: clamp(42px, 3.5vw, 74px);
}

.cermat-thank-you__content p {
    margin: 0;
    color: #53311E;
    font-size: 18px;
    line-height: 1.4;
}

.cermat-thank-you__content p + p {
    margin-top: 4px;
}




/* contact */

/* about */

.about-content {
	padding: 100px;
}

.about-hero-mobile {
	display: none;
}

.about-hero {
	padding-bottom: 0px;
	
	.title-lines {
		margin-top: 0px;
		margin-bottom: 12px;
		
		.line-red {
			width: 60px;
		}
	}
}

.about-hero__media {
  position: relative;
  margin: 0 auto;
}

.about-hero__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 38px;
}

.about-hero__title-wrap {
  position: absolute;
  left: 60px;
  bottom: 140px;
  max-width: 750px;
}

.about-hero__title {
  margin: 0;
  color: #fff;
  font-size: clamp(40px, 3.5vw, 74px);
  line-height: clamp(46px, 3.5vw, 83px);
  font-weight: 800;
}

.about-hero__info {
  position: unset;
  margin-top: -40px;
  margin-left: 55px;
  margin-right: 55px;
  background: rgba(0, 70, 155, 0.7);
  color: #fff;
  border-radius: 24px;
  padding: 32px;
  font-size: 16px;
  line-height 28px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.about-hero__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
}

.about-intro,.about-news {
	
	h2 {
		font-size: clamp(44px, 4vw, 80px);
		line-height: clamp(48px, 4vw, 84px);
		color: #53311E;
		font-weight: 900;
		
	}
	
	p {
		font-size: clamp(16px, 2.5vw, 18px);
		color: #53311E;
		line-height:clamp(24px, 2.5vw, 28px);
	}
}

.current_page_item > a,
.current-menu-item > a {
  position: relative;
  display: inline-block;
}

.current_page_item > a::after,
.current-menu-item > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0d57a1;
}

.about-intro {
	padding: 120px 0px;
}

.about-intro-grid {
	grid-template-columns: 1fr 1fr;
	display: grid;
    gap: 50px;
}

.about-news {
	img {
		border-radius: 42px;
	}
	
	.title-lines {
		margin-bottom: 80px;
		margin-top: 30px;
	}
}

.about-news-grid {
	grid-template-columns: 1.2fr 0.8fr;
	display: grid;
	background: #D9E9FF;
    gap: 50px;
	border-top-left-radius: 40px;
	border-top-right-radius: 40px;
	padding: 200px 100px 0px 100px;
}

.about-news-grid-reverse {
	grid-template-columns: 0.8fr 1.2fr;
	display: grid;
	background: #D9E9FF;
    gap: 50px;
	border-bottom-left-radius: 40px;
	border-bottom-right-radius: 40px;
	padding: 200px 100px 200px 100px;
}

.about-news-grid .about-news-right {
	text-align: center;
	
}
.title-lines {
  margin-top: 8px;
}

.title-lines span {
  	display: block;
	height: 10px;
    border-radius: 10px;
}

.line-red {
  width: 160px;
  background: #E60004;
  margin-bottom: 4px;
}

.line-blue {
  width: 140px;
  background: #00469B;
}

/* about */


.btn-blue {
  --btn-bg: #0054A6;
  --btn-text: #fff;
  --arrow-bg: #fff;
  --arrow-color: #0054A6;
}


.btn-light-blue {
  --btn-bg: #00AEEF;
  --btn-text: #fff;
  --arrow-bg: #fff;
  --arrow-color: #00AEEF;
}

.btn-brown {
  --btn-bg: #53311E;
  --btn-text: #fff;
  --arrow-bg: #fff;
  --arrow-color: #53311E;
}

.btn-white {
  --btn-bg: #fff;
  --btn-text: #53311E;
  --arrow-bg: #53311E;
  --arrow-color: #fff;
}


.btn-white-blue {
  --btn-bg: #fff;
  --btn-text: #00469B;
  --arrow-bg: #00469B;
  --arrow-color: #fff;
}


.container {
  width: 100%
  margin: 0 auto;
}
.home-page img {
  width: 100%;
  display: block;
}

.hero-section {
  background: linear-gradient(90deg, #0054A6 0%, #00AEEF 100%);
  padding: 170px 0 40px;
}
.hero-grid,
.product-grid,
.banner-grid,
.row-grid,
.bottom-grid,
.intro-grid {
  display: grid;
  gap: 50px;
  align-items: center;
}

.hero-grid {
	grid-template-columns: 1.2fr 0.9fr;
}

.hero-heading {
	padding-left: 100px
}

.product-grid {
  grid-template-columns: 0.9fr 1.1fr;
}


.hero-section-mobile {
	display: none;
}
.panama-section-mobile {
	display: none;
}
.mobile-button {
	display: none;
}

.banner-text-1 {
    padding-left: calc(100px + 11%);
    margin-top: -3%;
    padding-bottom: 70px;
    width: 40%;
	color: #3C150A;
	
	p {
		  font-size: 16px;
  		  line-height: 26px;
	}
}

.custom-heading {
  position: relative;
  text-indent: 165px;
}

/* Blue line */
.custom-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  width: 120px;
  height: 8px;
  background: #00469B;
  border-radius: 12px;
}

/* Red line (shorter, above) */
.custom-heading::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 150px;
  height: 8px;
  background: #E60004;
  border-radius: 12px;
}

.banner-image {
  position: absolute;
  right: 100px;
  bottom: 78px;
  width: 25%;
  z-index: 3;
}

.banner-image img {
  display: block;
  width: 100%;
  height: auto;
}


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

.hero-content h1 {
  font-size: clamp(48px, 4vw, 80px);
  color: #fff;
  margin: 0 0 20px;
  line-height: 1;
  font-weight: 900;
}
.hero-box {
  margin-top: 35px;
  max-width: 80%;
  border-radius: 0 12px 12px 0;
  padding: 44px 36px 44px 100px;
  color: #fff;
  background: #0054A6;
  z-index: 1;
  position: relative;
  font-size: 16px;
  line-height: 26px;
}

.hero-box::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: 0px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0px 18px 18px 0px;
  pointer-events: none;
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 18px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-text);
  text-decoration: none;
  font-weight: 700;
  margin-top: 15px;
  width: fit-content;
}

.btn-pill:hover {
  color: var(--btn-text);
}

.btn-pill .btn-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--arrow-bg);
  color: var(--arrow-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.hero-image img,
.product-image img,
.banner-image img {
  border-radius: 42px;
  object-fit: cover;
}

.hero-image {
	padding: 0px 100px 0px 0px;
}

.row-image {
   z-index:9;
   position: relative;
	
	img {
		border-radius: 42px;
		object-fit: cover;
		  position: relative;
  		  z-index: 2;
  display: block;
  width: fit-content;
  max-height: 500px;
  margin: 0 auto;
	}
}

.row-image::before {
  content: "";
  position: absolute;
  inset: 20% 0% 20% 0%;
  background: #ffffff66;
  border-radius: 18px;
}


.sustainable-section {
	padding: 50px 0px;
}

.intro-section,
.brands-section,
.bottom-text {
  padding: 50px 100px;
}
.intro-grid {
  grid-template-columns: 1fr 1fr;
}

.heading-arrows {
  display: flex;
  align-items: flex-start;
  gap: 22px;
} 

.title-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  flex-shrink: 0;
}

.line-red,
.line-blue {
  display: block;
  height: 8px;
  border-radius: 999px;
}

.line-red {
  width: 165px;
  background: #f00000;
}

.line-blue {
  width: 125px;
  background: #0d57a1;
}

.intro-right {
   font-size: 16px;
   color: #53311E;
   line-height: 26px;
	
	p {
		margin-block-end: 0;
	}
}

.intro-left h2,
.title-wrap h2 {
  font-size: clamp(26px, 3vw, 32px);
  line-height: 44px;
  margin: 0;
  font-weight: 600;
	color: #53311E;
}
.brown {
	background: #3C150A;
	color: #fff;
	padding: 50px 100px; 
	background-image: url("/wp-content/uploads/2026/03/Rectangle.jpg");
  background-repeat: no-repeat;
  background-position: bottom center; /* or bottom right / bottom left */
  background-size: contain;
}

.sustainable-section {
	border-top: 1px solid #53311E;
    margin: 0 100px;
	
	.custom-heading::before {
  top: 54px;

}

.custom-heading::after {
  top: 36px;

}
	
	.title-wrap {
		padding-left: 11%;
		margin-bottom: 55px;
	}
	
	.title-lines {
		margin-top: 40px;
		padding-left: 100px;
	}
	.text-wrap {
		color: #3C150A;
		font-size: 16px;
		line-height: 26px;
		padding-left: 21%;
	}
	
	h2 {
		font-size: clamp(29px, 4vw, 80px);
		font-weight: 900;
		line-height: 86px;
			
	}
}


.center-text {
  display: grid;
  gap: 18px;
  justify-items: center;
}

.product-info {
	min-height: 450px;
	align-content: center;
}
.product-row {
  padding: 0px 100px; 
  margin: 20px 0px;
  position: relative;

	
	h3 {
		font-size: clamp(38px, 4vw, 44px);
  		line-height: .95;
		font-weight: 900;
	}
	
	h4 {
		font-size: clamp(24px, 3vw, 30px);
	}
	
	p {
		font-size: 16px;
		line-height: 26px;
		color: #fff;
	    margin-block-end: 0rem;
		padding: clamp(30px, 2.5vw, 70px) 0;
		width: 55%;
	}
	.divider {
    position: absolute;
    left: 100px;
    right: 100px;
    bottom: 45px;
    margin: 0;
    border: 0;
    border-top: 1px solid #fff;
	}
}

.product-row.pink .row-info {
  padding-left: 150px;
  min-height: 450px;
  align-content: center;
	
	p {
		width: 75%;
	}
}

.product-row.blue { background: #00AEEF; color: #fff; }
.product-row.pink { background: #DF4C64; color: #fff; }
.product-row.brown2 { background: #8F5544; color: #fff; }
.row-grid.reverse { grid-template-columns: 1.1fr 0.9fr; }
.product-text {
	padding: 100px 0px;
	text-align: center;
    font-size: 16px;
	line-height: 26px;
	
	p {
		padding: 40px 0px;
	}
}
.product-text h3,
.row-text h3 {
  margin: 20px 0 12px 0px;
  font-size: clamp(25px, 6vw, 32px);
  line-height: .95;
}
.brands-section {
  background: #f6f6f6;
}

.brands-title {
   padding: 100px 100px 0px;
}
.section-tag {
  display: inline-block;
  background: #14a7e8;
  color: #fff;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 32px);
  padding: 10px 16px;
  border-radius: 4px;
}
.brands-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 40px;
  justify-items: start;
  align-items: center;
	
	img {
	   padding: 25px 0;
		max-width: 180px;
	}
	
	img:nth-child(n + 5) {
  justify-self: end;
  align-self: auto;
		max-width: 180px;
}
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.gallery-grid img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.bottom-grid {
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
	
	p {
		color: #53311E;
		font-size: 16px;
		line-height: 26px;
	}
}

.bottom-button {
	justify-self: center;
}

/* ===== CERMAT HEADER ===== */
.cermat-header {
  background: transparent;
  padding: 20px 0;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

.header-container {
 position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 40px;
}

/* MENU STYLES */
.header-menu {
  flex: 1;
	position: relative;
	z-index: 2;
}

.header-menu--left,
.header-menu--right {
    flex: 1 1 0;
    min-width: 0;
}

.header-menu--left {
    display: flex;
    justify-content: end;
    padding-right: 120px;
}

.header-menu--right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    padding-left: 120px;
}

/* LEFT MENU - center origin, items go RIGHT */
.header-menu--left .menu-list {
  justify-content: flex-start;
	justify-content: flex-end;
  margin-left: auto;
}

/* RIGHT MENU - center origin, items go LEFT */
.header-menu--right .menu-list {
  justify-content: flex-start;
  margin-right: auto;
}


.menu-list {
  display: flex;
    align-items: center;
    gap: 28px;

    margin: 0;
    padding: 0;
    list-style: none;
	flex-wrap: wrap;
    width: 100%;
    min-width: 0;
}

.menu-list a {
  color: #0054A6;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  padding: 8px 16px;
  border-radius: 6px;
  white-space: nowrap;
  transition: none;
  border: 1px solid transparent;
}

.page-template-page-metropoli, .post-template-single-product, .page-template-page-metropoli-en, .page-template-page-metropoli-rs {
	.menu-list a {
  color: #53311E;

}
	.header-contact .contact-btn {
		color: #53311E;
		    border: 1px solid #53311E;
	}
	.header-contact .contact-btn:hover {
    background: #53311E;
	}
	
	.lang-globe, .lang-arrow {
		color: #53311E;
	}
	
	.lang-list {
		color: #53311E;
		border: 1px solid #53311E;
	}
	.lang-item {
		color: #53311E;
	}
	.current_page_item > a::after, .current-menu-item > a::after {
		background:#53311E;
	}
}

.menu-list a:hover {
  border: 1px solid transparent;
  border-radius: 999px;
}

/* CENTER LOGO */
.header-logo {
  position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    transform: translate(-50%, -50%);
}

.header-logo a,
.header-logo .logo-img {
    display: block;
}

.header-logo .logo-img {
    width: 175px;
    max-width: none;
    height: auto;
}

/* BLUE PILL BAR - behind menus only */
.header-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 60px;     /* start after left menu */
  right: 60px;    /* end before right menu */
  height: 54px;
  background: rgba(249, 246, 243, 0.65);
  border-radius: 999px;
  z-index: 1;
  transform: translateY(-50%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header-contact .contact-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 20px;
  background: transparent;
  color: #0b63c7;
  text-decoration: none;
  border: 1px solid #0054A6;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s;
}

.header-contact .contact-btn:hover {
  background: #0054A6;
  color: white;
}

.cermat-lang-dropdown {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    z-index: 10001;
	margin-right: 25px;
}

.lang-trigger {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: 88px;
    height: 42px;
    padding: 0 12px;

    color: #0054a6;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 28px;
    cursor: pointer;
}
.lang-globe,
.lang-globe svg,
.lang-arrow {
    display: block;
    flex: 0 0 auto;
}

.lang-trigger:hover {
	border: 1px solid transparent;
	background-color: transparent;
    color: #0054a6;
}

.lang-trigger:focus {
	background-color: transparent;
    color: #0054a6;
}

.lang-globe svg {
    width: 24px;
    height: 24px;
}


/* Dropdown positioning */
.lang-list {
    position: absolute;
    top: 0;
    right: 0px;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    width: 88px;
    min-height: 120px;
    box-sizing: border-box;
    padding: 50px 12px 16px;

    color: #0054a6;
    background: rgba(249, 246, 243, 0.65);
    border: 1px solid #0054a6;
    border-radius: 28px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0s linear 0.2s;
}

.cermat-lang-dropdown:hover .lang-list,
.cermat-lang-dropdown.is-open .lang-list,
.cermat-lang-dropdown:focus-within .lang-list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

/* Optional arrow rotation */
.cermat-lang-dropdown.is-open .lang-arrow,
.cermat-lang-dropdown:focus-within .lang-arrow,
.cermat-lang-dropdown:hover .lang-arrow {
    transform: rotate(180deg);
}

.lang-arrow {
    transition: transform 0.2s ease;
}

/* ENG and SRB links */
.lang-item {
    display: block;
    padding: 0;

    color: #0054a6;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
}

.lang-item:hover,
.lang-item:focus-visible {
    text-decoration: underline;
}

/* Mobile menu overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(249, 246, 243, 0.95);
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.mobile-menu-inner {
  display: block;  /* single column */
  padding: 120px 40px 40px;
}

.mobile-nav {
  width: 100%;
	text-align: end;
	
	.current_page_item > a::after, .current-menu-item > a::after {
		display: none;
	}
	
.current_page_item > a::before,
.current-menu-item > a::before {
    content: "";
    position: absolute;
    right: calc(100% + 28px);
    top: 50%;
    width: 78px;
    height: 18px;
    transform: translateY(-50%);
    pointer-events: none;
	left: auto;

    background:
        /* Red line: 52px wide */
        linear-gradient(#E60004 0 0) left top / 52px 6px no-repeat,

        /* Blue line: 78px wide */
        linear-gradient(#00469B 0 0) left bottom / 78px 6px no-repeat;
}
}

.mobile-menu-close {
  position: absolute;
  top: 65px;
  right: 25px;
  background: none;
  border: none;
  cursor: pointer;
	left: auto;
}

/* Mobile menu lists */

.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mobile-menu-list a {
  font-size: 20px;
  font-weight: 500;
  color: #00469B;
  text-decoration: none;
  padding: 12px 0;
  border-bottom: none;
}


.cermat-footer {
  background: #ffffff;
  font-family: inherit;
  padding-bottom: clamp(45px, 4vw, 90px);
}

.footer-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 auto;
  padding: 40px 60px 20px;
  gap: 80px;
}

.footer-col {
    flex: 1 1 0;
    min-width: 0;
}

.footer-links a {
  color: #1a1a1a;
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;       /* prevent word break */
}

.footer-heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 20px;
  text-transform: none;
  padding-left: 40px;
  color: #53311E;
}

.footer-divider {
  border: none;
  border-top: 1px solid #53311E;
  margin: 9px 0 9px;
}

/* Company links */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid #1a1a1a;
  padding: 0px 0px 12px 20px;
  box-sizing: border-box;
  min-width: 0;
	
	a::after {
		display: none;
	}
}

.footer-links a {
  color: #53311E;
  text-decoration: none;
  font-size: 1rem;
	font-weight: 500;
	overflow-wrap: anywhere;
}

/* Social icons */
.footer-social-icons {
  display: flex;
  gap: 16px;
  margin-top: 0px;
  padding: 0 40px;
	    align-items: center;
}

.footer-social a {
  color: #53311E;
  transition: opacity 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.footer-social a:hover {
  opacity: 0.6;
}

/* Contact */
.footer-contact {
  font-style: normal;
  font-size: 0.938rem;
  font-weight: 500;
  line-height: 1.8;
  padding: 0 40px;
}

.footer-contact p {
  margin: 0;
  color: #53311E;
}

.footer-contact a {
  color: #53311E;
  text-decoration: none;
}

/* Copyright bar */
.footer-bottom {
  margin: 0 auto;
  padding: 0px 100px;
}

.footer-bottom a {
  font-size: 0.938rem;
  color: #53311E;
  margin: 0;
  line-height: 1.8;
  font-weight: 400;
}

.mobile-controls {
	display: none;
}
/* Responsive */

/* MOBILE */
@media (max-width: 1299px) {
	
	  .cermat-header {
    position: fixed;      /* remove fixed */
    z-index: 9999;
		  padding: 15px 0;
		  top: 0;
        left: 0;
        right: 0;
        background: #fff;
		          transition: transform 0.25s ease;
        transform: translateY(0);
  }
	
	.content-area-full {
		margin-top: 100px;
	}
	
	 /* Hide when scrolling down */
    .cermat-header.header-hidden {
        transform: translateY(-100%);
    }

    /* Visible at top and when scrolling up */
    .cermat-header.header-visible {
        transform: translateY(0);
    }
	
   .header-container::after {
    display: none;
  }
  
  /* 2. Center logo */
  .header-container {
        display: flex;
        justify-content: center;
        min-height: 100px;
        padding: 0 24px;
    }

    .header-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
		z-index: 10001;
        pointer-events: auto;
		
		a {
			display: block;
        position: relative;
        z-index: 10002;
        pointer-events: auto;
        touch-action: manipulation;
		}
    }
	
	.header-logo .logo-img {
    	width: 140px;
		padding: 15px 0;
	}
  
  /* 3. Hide desktop menus */
  .header-menu {
    display: none !important;
  }
	.lang-globe {
    color: #0054A6 !important;
  }
	.lang-list {
	   right: 0px;
	}
	
	.lang-item {
		color: #0054A6 !important;
	}
	
	.lang-list {
		color: #0054A6;
        border: 1px solid #0054A6 !important;
	}
  
  /* 4. Show hamburger (left) + lang switcher (right) */
    .mobile-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
  }
  
  /* Hamburger button */
  .mobile-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 32px;
    height: 32px;
	  order: 3;
	  rotate: 180deg;
  }
	
.mobile-hamburger:hover,
.mobile-hamburger:focus,
.mobile-hamburger:focus-visible,
.mobile-hamburger:active {
    background-color: transparent !important;
    color: inherit !important;
    text-decoration: none;
}
	
.mobile-menu-close:hover,
.mobile-menu-close:focus,
.mobile-menu-close:focus-visible,
.mobile-menu-close:active {
    background-color: transparent !important;
    color: inherit !important;
    text-decoration: none;
}
  
  /* Language switcher stays */
  .cermat-lang-dropdown {
    margin: 0;
	  padding-right: 0px;
  }
}



@media (min-width: 1450px) and (max-width: 1650px) {
	.header-logo {
		padding: 0px 25px;
	}
	
	.menu-list {
		gap: 25px; 
	}  
}

@media (min-width: 1030px) and (max-width: 1450px) {
	
	
	.product-row {
		p {
			width: 80%
		}
	}
	
	.product-row.pink .row-info {
		 padding-left: 80px;
		
		p {
			width: 90%;
		}
	}
    
}

@media (min-width: 1651px) and (max-width: 1800px) {
	
	.ice-creams-card2 > a {
		height: 550px;
	}
	
.ice-creams-grid {
		gap: 200px 80px;
	}
}

@media (min-width: 1301px) and (max-width: 1650px) {

	.ice-creams-grid {
		gap: 200px 80px;
	}
	
	.ice-creams-card2 > a {
		height: 430px;
	}
	
		.menu-list a {
		padding: 8px;
	}
	
	.header-logo {
		padding: 0px;
	}
	
	.menu-list {
		gap: 10px; 
	} 
	.header-logo .logo-img {
		width: 145px;
	}
	
	.header-menu--right {
		padding-left: 50px;
	}
}

@media (min-width: 901px) and (max-width: 1300px) {
.product-title-info {
    min-height: 145px;
}
	.ice-creams-card2 > a {
		height: 320px;
	}
	
	.ice-creams-grid {
		gap: 200px 80px;
	}
	
	.ice-creams-image2::after {
		    top: calc(16% + 80px);
	}
    
}

@media (min-width: 901px) {
	.private-labels-news.reversed .private-labels-news-left {
    order: 2;
  }

  .private-labels-news.reversed .private-labels-news-right {
    order: 1;
  }

}

@media (max-width: 900px) {
  .hero-grid,
  .product-grid,
  .banner-grid,
  .intro-grid,
  .row-grid,
  .bottom-grid,
	.about-news-grid-reverse,
	.about-news-grid,
	.about-intro-grid,
	.private-labels-news-grid,
	.private-labels-botom-1-grid,
	.contact-intro-grid {
    grid-template-columns: 1fr;
  }
	
	.row-grid, .product-grid {
		gap: 0px;
		
	}
	
	.news-content {
		.news-card {
			grid-template-columns: 1fr;
		}
	}
	
.metropoli-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 116px 15px;
}
	
.brands-page-grid {
        grid-template-columns: 1fr;
		padding: 80px 20px;
		padding-top: 0px;
	gap: 116px 15px;
	margin-top: 200px;
}

.ice-creams-grid {
        grid-template-columns: 1fr;
		padding: 80px 20px;
		padding-top: 0px;
	gap: 116px 15px;
	margin-top: 140px;
}

.footer-links {
	   padding-left: 0px;
}
.footer-heading {
	padding-left: 20px;	
}
	.footer-social-icons {
		padding: 0 20px;
	}
	
	.footer-contact {
		padding: 0 20px;
	}
.hero-section {
  padding: 20px 0px 0px;
}
	.hero-heading {
    padding-left: 20px;
}
	.hero-box {
	   padding: 44px 20px 44px 20px;
	}
	
	.hero-image {
	   padding: 0px 20px 20px;
	}
	
	.brown {
	    padding: 50px 20px;
	}
	.product-text {
		padding: 20px 0px;
	}
	
	.intro-section {
		padding: 50px 20px;
	}
	.heading-arrows {
	   gap: 12px;
	}
	
	.sustainable-section {
		margin: 0px;
		border-top: none;
		
		.title-wrap {
			padding-left: 20px;
		}
		
		.text-wrap {
		   padding: 0px 20px;
		}
	}
	
	.panama-section {
	   margin: 20px 0;
	}
	
	.panama-media { 
	  min-height: 520px;
	}
	.panama-media::after {
	  height: 230px;
	}
	
	.banner-text {
		    left: 20px;
    bottom: 165px;
		width: 100%;
		
		p {
			max-width: 100%;
			padding-right: 15%;
		}
	}
	
	.banner-image {
		left: 20px;
		right: 20px;
		width: calc(200px + 20%);
		bottom: 0px;
	}
	
	.product-row {
		padding: 20px;
		
		hr {
			display: none;
		}
		
		p {
			width: 100%;
		}
		
		.row-info {
			padding-left: 0px !important;
			
			p {
				width: 100% !important;
			}
		}
	}
	
/* 	.panama-bg {
		
	} */
	
	.bottom-text {
	   padding: 50px 20px;
	}

  .brands-grid {
    grid-template-columns: repeat(1, 1fr);
	  
	  img{
  justify-self: center !important;
  align-self: center !important;
  max-width: 75%;
  }
}
	.brands-title {
	   padding: 70px 20px 0px;
       text-align: center;
	}
	
  .gallery-grid {
    grid-template-columns: 1fr;
  }
	
	.news-read-more {
    max-width: 100%;
  }

  .news-carousel__arrow--prev {
    left: -12px;
  }

  .news-carousel__arrow--next {
    right: -12px;
  }

@media (max-width: 768px) {
	.header-container {
    padding: 0px 16px;
  }
	
	.hero-section {
		display: none;
	}
	
	.custom-heading {
		text-indent: 85px;
	}
	
		.custom-heading::before {
  top: 26px !important;
  width: 45px;

}
	
/* brands */ 
	.brands-content {
		padding: 0px;
	}
	
    .brands-hero__filters {
        position: absolute;
        right: 0;
        bottom: -115px;
        left: 0;
        z-index: 2;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;

        width: 100%;
        min-height: 115px;
        margin: 0;
        padding: 4px 80px 12px 18px;

        overflow-x: auto;
        overflow-y: hidden;

        background: #00a5e5;
        border-radius: 0px;
        box-sizing: border-box;

        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
		transform: none;
		
		 -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 0,
            #000 calc(100% - 45px),
            transparent 100%
        );

        mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 0,
            #000 calc(100% - 60px),
            transparent 100%
        );
    }

    .brands-hero__filters::-webkit-scrollbar {
        display: none;
    }

	.brands-hero__image {
		border-radius: 0px;
	}
	
    .brands-filter {
        flex: 0 0 auto;
        scroll-snap-align: end;
        white-space: nowrap;
    }
	
	
/* brands */ 
	
/* ice creams */ 
	
	.ice-creams-content {
		padding: 0px;
	}
	
    .ice-creams-hero__filters {
        position: absolute;
        right: 0;
        bottom: -115px;
        left: 0;
        z-index: 2;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;

        width: 100%;
        min-height: 115px;
        margin: 0;
        padding: 4px 80px 12px 18px;

        overflow-x: auto;
        overflow-y: hidden;

        background: #00a5e5;
        border-radius: 0px;
        box-sizing: border-box;

        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
		transform: none;
		
		 -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 0,
            #000 calc(100% - 45px),
            transparent 100%
        );

        mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 0,
            #000 calc(100% - 60px),
            transparent 100%
        );
    }

    .ice-creams-hero__filters::-webkit-scrollbar {
        display: none;
    }

	.ice-creams-hero__image {
		border-radius: 0px;
	}
	
    .ice-creams-filter {
        flex: 0 0 auto;
        scroll-snap-align: end;
        white-space: nowrap;
    }
	
	.ice-creams-card2 > a {
		height: 450px;
	}
	
	.ice-creams-image2::after {
		top: calc(28% + 80px)
	}
	
	
/* ice creams */ 

/* metropoli */ 
	.metropoli-grid {
        grid-template-columns: 1fr;
    }
	
	.metropoli-content {
	  padding: 80px 20px;
	}
	
	.metropoli-hero { 
	   padding: 20px 0px;
	}
	
	
.metropoli-filters {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;

        width: 100%;
        margin-bottom: 30px;
        padding: 4px 16px 12px;

        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
	 -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 0px,
        #000 calc(100% - 80px),
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 0px,
        #000 calc(100% - 80px),
        transparent 100%
    );
    }

    .metropoli-filters::-webkit-scrollbar {
        display: none;
    }

    .metropoli-filter {
        flex: 0 0 auto;
        width: auto;
        min-height: 38px;
        padding: 9px 15px;
        white-space: nowrap;

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
	
figure.wp-block-table {
        width: 100vw;
        max-width: 100vw;
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    figure.wp-block-table table {
        width: 100%;
        min-width: 650px;
        margin: 0;
        table-layout: fixed;
    }

    figure.wp-block-table th,
    figure.wp-block-table td {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    figure.wp-block-table tbody td:first-child {
        width: 160px;
        min-width: 160px;
    }

    figure.wp-block-table tbody td:not(:first-child) {
        width: 110px;
        min-width: 110px;
    }
	
/* metropoli */ 
	
/* posts */ 
	
    .wp-block-columns.single-product-columns {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
    }

    /* Let the existing child blocks be reordered without changing posts. */
    .wp-block-columns.single-product-columns > .single-product-left,
    .wp-block-columns.single-product-columns > .single-product-right {
        display: contents !important;
    }

    /* 1. Metropoli logo */
	.post-layout__bg {
		.single-product-right > figure:nth-of-type(1) {
        order: 1 !important;
        margin-bottom: 6px !important;
    }
	}

    /* 2. Large ice-cream image from the left column */
    .single-product-left > figure.wp-block-image {
        order: 3 !important;
        margin: 60px 0 50px !important;
    }

    /*
     * 3–5. Right-column text before the package image.
     * Works whether there is one or two paragraph blocks.
     */
    .single-product-right > h1 {
        order: 2 !important;
		text-align: center;
		margin-block-start: 12px;
    }

    .single-product-right > p:nth-of-type(1) {
        order: 4 !important;
    }

    .single-product-right > p:nth-of-type(2):not(:has(strong)) {
        order: 5 !important;
    }

    /* 6. Product package image */
    .single-product-right > figure:nth-of-type(2) {
        order: 6 !important;
        margin: 44px 0px !important;
    }
	
		.post-layout__bg__ice-cream, .post-layout__bg__brands {
		.single-product-right > figure:nth-of-type(1) {
        order: 6 !important;
        margin: 44px 0px !important;
		text-align: center;
			
			img{
				width: 90%;
			}
    }
	}

    /*
     * Ingredients:
     * Select any direct paragraph that contains the <strong>Состав:</strong> label.
     * This works for both Los Angeles and Panama.
     */
    .single-product-right > p:has(> strong) {
        order: 7 !important;
    }

    /* 8. Allergens section */
    .single-product-right > .wp-block-columns {
        order: 8 !important;
    }

    /* 9. Nutrition table */
    .single-product-left > figure.wp-block-table {
        order: 9 !important;
        width: 100%;
        max-width: 100%;
        margin-top: 30px !important;
        overflow-x: auto;
		position: relative;
    }
	
	.single-product-left > figure.wp-block-table .has-fixed-layout {
		padding-top: 50px
	}
	
	.single-product-left > figure.wp-block-table::before {
        content: ">";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    }
	
	.post-layout__bg__ice-cream, .post-layout__bg__brands .single-product-left > figure.wp-block-table::before {
		color: #00469B;
	}

    /* 10. Back button */
    .single-product-left > .back-button {
        order: 10 !important;
        margin-top: 24px !important;
    }
	.post-layout__content {
	   padding: 75px 20px 50px 20px;
	}
	
			.alergens {
			p {
				font-size: 14px;
			}
		} 
	
	.post-layout__bg__ice-cream {
		 .wp-block-columns.single-product-columns {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
    }
		
		.post-layout__content {
	   padding: 50px 0px 50px 0px;
	}
		
		.single-product-left > figure.wp-block-image:first-child {
			
			min-height: auto !important;
			padding: 70px 70px 70px !important;
		}

    .wp-block-columns.single-product-columns > .single-product-left,
    .wp-block-columns.single-product-columns > .single-product-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-basis: 100% !important;
    }
		
		.wp-block-table {
			padding: 0px 20px;
		}
		.back-button {
        padding: 0px 20px;
   	 }
		
		.wp-block-heading, .wp-block-paragraph, .wp-block-column {
			padding: 0px 20px;
		}
	}
	
	.post-layout__bg__brands {
		.single-product-left > figure.wp-block-image:first-child {
			  min-height: 400px;
			padding: 20px;
		}
	}
	.news-template {
		padding: 50px 20px;
		.news-read-more {
    margin-top: 56px;
    padding-top: 30px;
  }

  .news-read-more__heading {
    margin-bottom: 20px;
  }

  .news-carousel__track {
    --news-card-gap: 12px;
  }

  .news-carousel__slide {
    flex-basis: calc(
      (100% - var(--news-card-gap)) / 2
    );
  }

  .news-card__image {
    border-radius: 10px;
  }

  .news-card__title {
    font-size: 15px;
  }

  .news-card__meta,
  .news-card__read-more {
    font-size: 11px;
  }

  .news-carousel__arrow {
    top: 32%;
    width: 34px;
    height: 34px;
  }

  .news-carousel__arrow svg {
    width: 18px;
    height: 18px;
  }

  .news-carousel__arrow--prev {
    left: -9px;
  }

  .news-carousel__arrow--next {
    right: -9px;
  }
		
		.wp-block-image img:first-child {
			margin: 40px 0;
		}
	}
	
/* posts */

/* private labels */
	
	.private-labels-text {
		
		h2 {
			max-width: 100%;
		}
		padding: 40px 20px;
		margin-top: 10px;
		margin-bottom: 0px;
		
		p {
		text-indent: 40px;
		}
	}
	
	.private-labels-news-grid{
		padding: 40px 20px;
		gap: 60px;
	}
	
	.private-labels-botom-1-grid{
		padding: 0px 20px;
		gap: 60px;
	}
	
	.private-labels-botom-2 {
		padding: 40px 20px;
	}
	
/* private labels */
	
/* about */
	
	.about-hero {
		display: none;
	}
	
	.about-hero-mobile {
		display: block;
		
		img {
			object-fit: cover;
                object-position: center;
                width: 100%;
                height: auto;
                max-width: none;
		}
	}
	
	.about-images {
		img {
			max-width: none;
		    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 290px
		}
		
	}
	
	.about-hero-content {
		background: rgba(0, 70, 155, 0.7);
    	padding: 110px 20px;
    	margin: -100px 20px 0px 20px;
    	z-index: 9;
    	position: relative;
    	border-radius: 40px;
		backdrop-filter: blur(12px);
		
		.title-lines {
			 margin-top: 46px;
			 margin-bottom: 26px;
			
			.line-red {
				width: 65px;
			}
		}
		
		p {
			color: #fff;
			font-size: 16px;
			line-height: 24px;
		}
	}
	
	.about-content {
	    padding: 0px;
	}
	
	.about-news-grid {
	   padding: 30px 20px;
	   border-top-left-radius: 0px;
       border-top-right-radius: 0px;
	}
	
	.about-intro {
		 padding: 60px 20px;
	}
	
	.about-images {
		padding: 0px 20px;
	}
	
	.about-news-grid-reverse {
	   padding: 30px 20px;
	   border-bottom-left-radius: 0px;
       border-bottom-right-radius: 0px;
		
		.about-news-left {
			order: 2
		}
		.about-news-right {
			order: 1
		}
	}
/* about */
	
/* contact */
	
	.contact-content {
		padding: 0px;
	}
	.contact-image {
		display: none;
	}
	
	.contact-intro {
		padding: 60px 20px;
		text-align: center;
	}
	
	.contact-intro-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
		
		h2 {
			color: #00469B;
		}
		
		.title-lines {
       display: none;
   		 }
    }
	
	.contact-intro-right {
		p {
			color: #00469B;
		}
		
	}
	
	.contact-intro-grid {
	   gap: 20px;
	}
	
	.contact-form-section {
		padding: 20px;
		border-radius: 0px;
	}
	
	.cermat-form-bottom {
		padding-top: 12px;
		
		p {
			width: 100%;
		}
	}
	
	.cermat-contact-form-wrapper input.cermat-submit {
	}
	
.cermat-contact-form-wrapper .wpcf7-form {
        padding: 24px 18px;
        border-radius: 12px;
    }

    .cermat-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .cermat-form-field {
        margin-bottom: 16px;
    }

    .cermat-contact-form-wrapper input[type="submit"] {
        width: 100%;
	    text-align: left;
    }
	
	.cermat-thank-you {
		flex-direction: column;
        gap: 18px;
		text-align: center;
		padding: 30px 20px;
	} 
/* contact */
	
/* news page */
	.news-content {
		padding:90px 20px;
		
		.news-intro {
			padding: 0px 0 10px;
		}
		
		.news-card,
    .news-card-reverse {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
		.news-card{
			   padding-top: 60px;
               margin-top: 60px;
		}
		
		.news-card .news-card-image {
        order: -1;
    }

    .news-card-reverse .news-card-image {
        order: -1;
    }
		
		.news-card-content {
			height: auto;
		}
		.news-card-excerpt {
			margin-top: 40px;
		}
		
		.news-botom {
			margin-left: -20px;
			margin-right: -20px;
			border-radius: 0px;
		}
	}
	
/* news page */

.custom-heading::after {
  top: 12px !important;
  width: 70px;

}
	
	.panama-section-mobile {
		display: block;
		img {
			width: 100%;
		}
		.panama-media-1 {
			line-height: 0;
		}
		
		.panama-content {
			    text-align: center;
    			padding: 40px 15px;
					background: linear-gradient(
    					to bottom,
    					#2D1A1E 0%,
    					#2D1A1E 86%,
    					transparent 86%,
    					transparent 100%
					);
			
			p {
				padding: 0px 20px 30px;
				font-size: 18px;
                line-height: 26px;
                color: #fff;
                text-align: center;
			}
			
			.btn-pill {
			   margin-top: 60px;
			}
		}
	}
	
	.panama-section-1 {
		display: none;
	}
	
	.hero-section-mobile {
		display: block;
		background: linear-gradient(90deg, #0054A6 0%, #00AEEF 100%);
		
		img {
			border-radius: 0px;
			width: 100%;
		}
		
		p {
			color: #fff;
			font-size: 18px;
			line-height: 26px;
			margin-block-end: 0px;
            padding: 30px 0;
		}
		.hero-button {
			text-align: center;
		}
		
		.hero-content {
			padding: 45px 20px;
		}
		.hero-heading {
			padding-left: 0px;
		}
		
	}
	
	.brown {
		background-position: top center;
		background-image: url(/wp-content/uploads/2026/04/mobile-background.png);
		padding: 50px 15px;
		
		.product-text {
			padding: 0px 20px;
		}
		
		p {
			padding: 40px 0px 0px 0px
		}
	}
	
	.product-row.blue .product-grid .row-image,
  .product-row.brown2 .product-grid .row-image {
    order: -1;
  }

  .product-row.blue .product-grid .product-info,
  .product-row.brown2 .product-grid .product-info {
    order: 0;
  }
	
	.product-info {
		min-height: 0px;
	}
	.product-row.pink .row-info {
		min-height: 0px;
	}
	.sustainable-section {
		h2 {
			line-height: 46px;
		}
		}
	.intro-left h2 {
		line-height: 36px;
	}
	.title-lines {
		margin-top: 16px;
	}
	
	.desktop-button {
		display: none;
	}
	
	.mobile-button {
		display: block;
		text-align: center;
		padding-top: 30px;
	}
	
	.lang-trigger {
	   margin-right: 0px;
	   min-width: 65px;
	}
	
	.lang-list {
		width: 65px;
	}
	
	.lang-arrow {
		display: none;
	}
  
  .logo-img {
    height: 75px;
  }
	.footer-social {
		hr {
			display: none;
		}
		background: #fff;
		padding: 25px 0px;
	}
	
  .footer-inner {
    flex-direction: column;
    padding: 30px 0px 16px;
	align-items: stretch;
	gap: 30px
  }

  .footer-col--center,
  .footer-col--right {
    text-align: left;
  }

  .footer-social {
    justify-content: flex-start;
  }

  .footer-bottom {
    padding: 16px 20px;
  }
	.footer-links {
		.menu-list {
			gap: 14px;
			padding-left: 8px;
			
			a {
			 	padding: 8px;	
			}
		}
	}
}