.partners-text {
    margin-left: calc(8.33% + 120px + 313px);
    max-width: 560px;
	}


.about-hero-text{
  font-size: 18px;
}

.mission-text {
    max-width: max-content;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    color: #3b4955;
}

.hero-carousel .hero-slide img{
	height: auto;
	aspect-ratio: auto;
	object-fit: initial;
}

.hero-carousel{
	height: auto;
}

.hero-carousel-track{
	height: auto !important;
}


.offer-list li {
    font-size: 18px;
    color: #3b4955;
    line-height: 1.65;
    margin-bottom: 6px;
    font-weight: 400;
}


.intro-text {
    font-size: 18px;
    color: #3b4955;
    line-height: 1.2;
    margin-bottom: 16px;
    max-width: 100%;
}

.partner-text {
    font-size: 22px;
    font-weight: 400;
    color: #3b4955;
    line-height: 1.2;
    max-width: 100%;
}


.col-list li{
  font-weight: 400;
}

.product-card-dims{
		color: #3b4955;
		margin:15px 0;
	}
.hero {
    display: flex;
    height: auto;
    column-gap: 8px;
}

  .hero-right img{
    width:100%;
    height: auto;
  }


.service-card{
  justify-content: flex-start;
}

.service-card-desc{
  margin-top: 15px;
}

.about-text{
  font-size: 18px;
  line-height: 22px;
}

.invite-list li {
    font-size: 18px;
    color: #333;
    line-height: 22px;
    padding-left: 14px;
    position: relative;
}

.invite-label{
  font-size: 18px;
}

.product-spec-row:first-child{
	border-top: none;
}

.product-spec-row{
	border:none;
}

.product-spec-label {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 20%;
}

.product-spec-row{
	justify-content: flex-start;
}

.product-spec-value{
	font-weight: 400;
	font-size: 16px;
}

.product-spec-list{
	margin:28px 0;
}

.product-tab-pane table tr td{
	border:none;
}

.product-tab-pane table tr:first-child td{
	border:none;
}


.product-specs{
	border-radius: 12px;
}

.header-left{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 100px;
}

@media(max-width: 1400px){
	.nav-menu {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    width: auto;
	    flex-shrink: 0;
	    gap: 20px;
	}

	.header {
    display: flex;
    align-items: center;
    gap: 52px;
    padding: 0 60px;
    height: 90px;
    width: calc(100% - 100px);
    justify-content: space-between;
    flex-wrap: wrap;
	}


	.header-left{
		width: 40%;
		gap: 40px;
	}
	
	body{
		min-width: 100%;
	}

	.header{
		width: 100%;
	}

	/* картки переваг тягнуться по контенту, а не по фіксованій висоті */
	.advantage-card {
		min-height: auto;
	}
}


/* --- <1200px : картки переваг однакової висоти і без сходинки --- */
@media (max-width: 1200px) {
	.advantages-grid {
		align-items: stretch;
		grid-auto-rows: 1fr;
	}

	.advantage-card.even {
		margin-top: 0;
	}
}


@media(max-width: 1310px){

  .header-search-btn{display: none;}
	.header-mobile-actions{display: flex;        align-items: center;
        gap: 8px;
        flex-shrink: 0;}
	    .header-right {
        display: none;
    }
    .btn-catalog-desktop{display: none;}
    .header-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px;
        flex-shrink: 0;
    }
        .header-hamburger span {
        display: block;
        width: 20px;
        height: 2px;
        background: #3b4955;
        border-radius: 2px;
        transition: transform .25s, opacity .2s;
        transform-origin: center;
    }

        .btn-catalog-mobile {
        display: inline-flex;
        height: 36px;
        padding: 0 12px;
        font-size: 13px;
        gap: 6px;
        border-radius: 40px;
        background: #0081d0;
        color: #fff;
        font-weight: 600;
        font-family: 'Golos Text', sans-serif;
        align-items: center;
        text-decoration: none;
        white-space: nowrap;
    }

        .btn-catalog-mobile img {
        width: 15px;
        height: 15px;
    }

        .header {
        padding: 0 16px;
        height: 60px;
        justify-content: space-between;
        gap: 0;
        position: relative;
        z-index: 1001;
        background: #fff;
        width: 100%;
    }

    .mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: #e3f5fc;
    z-index: 1000;
    padding: 0 20px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease, padding 0.35s ease;
  }
  .mobile-menu.open {
    max-height: 420px;
    padding: 20px 20px 28px;
  }
  .mobile-menu-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 40px;
    padding: 0 16px;
    height: 44px;
    margin-bottom: 20px;
    box-shadow: 0 1px 6px rgba(59, 73, 85, 0.08);
  }
  .mobile-menu-search img {
    width: 18px;
    height: 18px;
    opacity: 0.5;
    flex-shrink: 0;
  }
  .mobile-menu-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: "Golos Text", sans-serif;
    color: #3b4955;
    background: transparent;
  }
  .mobile-menu-search input::placeholder {
    color: #a0b0bc;
  }
  .mobile-nav-links {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
  }
  .mobile-nav-links a {
    font-size: 16px;
    font-weight: 500;
    color: #3b4955;
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid rgba(59, 73, 85, 0.08);
    transition: color 0.15s;
  }
  .mobile-nav-links a:last-child {
    border-bottom: none;
  }
  .mobile-nav-links a:hover,
  .mobile-nav-links a:active {
    color: #0081d0;
  }
  .mobile-menu-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #3b4955;
    margin-bottom: 14px;
    margin-top: 4px;
  }
  .mobile-menu-phone img {
    width: 18px;
    height: 18px;
  }
  .mobile-menu-lang {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #8a9aaa;
  }
  .mobile-menu-lang .active {
    color: #3b4955;
    font-weight: 700;
  }
  .mobile-menu-lang .sep {
    color: #c0cdd6;
  }
  .mobile-menu-lang span {
    cursor: pointer;
  }
  .mobile-menu-lang span:not(.sep):not(.active):hover {
    color: #0081d0;
  }
  .mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(59, 73, 85, 0.35);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .mobile-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  .logo-icon{width: 40px;}


}


@media (max-width: 768px) {
    .header {
        padding: 0 16px;
        height: 60px;
        justify-content: space-between;
        gap: 0;
        position: relative;
        z-index: 1001;
        background: #fff;
        width: 100%;
    }

    /* повертаємо мобільне значення, бо блок max-width:1400px діє і тут */
    .advantage-card {
        min-height: 160px;
    }

        .hero {
        height: auto;
        flex-direction: column;
        gap: 0;
    }

        .hero-right {
        width: 100%;
        flex-shrink: 0;
        border-radius: 0;
        height: auto;
        align-self: stretch;
        margin-top: 5px;
    	}

    	.hero-carousel-arrow {
        width: 36px;
        height: 36px;
    	}
    	.hero-carousel-arrow.prev {
        left: 10px;
    	}
    	.hero-carousel-arrow.next {
        right: 10px;
    	}
    	.hero-carousel-arrow svg {
        width: 18px;
        height: 18px;
    	}
    	.hero-carousel-dots {
        bottom: 10px;
        gap: 7px;
    	}
    	.hero-carousel-dot {
        width: 7px;
        height: 7px;
    	}

    	.partners-text {
	    margin-left: 0;
	    padding:30px 0 30px 30px;
	    max-width: 100%;
	}

	    .partners-banner {
        height: auto;
        min-height: 580px;
        border-radius:30px 6px 6px 6px;
        margin-top: 32px;
        overflow: hidden;
                display: flex;
        align-items: flex-start;
    	}

    	    .partners-worker {
        position: absolute;
        left: 16px;
        bottom: 0;
        width: 290px;
        height: auto;
        z-index: 5;
    	}

    	.partners-banner:before {
    content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 2;
        background: url(/img/b_bg.svg);
        background-size: 100%;
        background-repeat: no-repeat;
        transform: scale(2.1);
        top: 54%;
	}    .partners-text {
        margin-left: 0;
        max-width: 90%;
    }

        .partners-text p {
        font-size: 22px;
    	}

    	.mobile-nav-links a{border:none;}

    	.mobile-menu-lang a {text-decoration: none;}

    	.catalog-page {
		    padding: 40px 22px 80px;
		}

		.catalog-grid {
		    display: flex;
		    gap: 15px;
		    flex-direction: column;
		    align-items: flex-start;
		}


		.subcat-tabs {
	        flex-wrap: wrap;
	        overflow-x: none;
	        padding-bottom: 4px;
	    }

	    #productsGrid{
	    	grid-template-columns: 1fr;
	    }

	    .filter-toggle {
		    display: inline-flex;
		    align-items: center;
		    gap: 8px;
		    height: 42px;
		    padding: 0 20px;
		    border-radius: 40px;
		    border: 1.5px solid #d0dce5;
		    background: #fff;
		    color: #3b4955;
		    font-size: 14px;
		    font-weight: 500;
		    font-family: 'Golos Text', sans-serif;
		    cursor: pointer;
		    transition: border-color .18s;
		    user-select: none;
		    width: 100%;
		    justify-content: space-between;
		}

		.product-hero {
		    display: flex;
		    flex-direction: column;
		    align-items: flex-start;
		    justify-content: flex-start;
			}

			.product-title {
    font-size: 22px;
    font-weight: 700;
    color: #3b4955;
    margin-top: 16px;
	}

	.product-page .breadcrumb{
		display: none;
	}

	.product-gallery {
    padding: 0 20px;
	}

	.product-top {
    padding: 0 20px 20px;
	}

	.product-specs {
    border-radius: 12px;
    margin-top: 24px;
	}
}


/* =========================================================
   HEADER SEARCH — адаптивний інпут + кнопка "Пошук"
   1520px+          -> інпут з кнопкою (десктоп)
   1311px – 1519px  -> тільки іконка пошуку (не влазить інпут)
   769px  – 1310px  -> меню сховане, місця багато -> знову інпут
   768px і менше    -> мобільний лейаут без змін
   ========================================================= */

.header-search-inline {
	display: none;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	height: 48px;
	padding: 4px 4px 4px 18px;
	background: #f4f7f9;
	border: 1.5px solid #d0dce5;
	border-radius: 40px;
	transition: border-color .2s;
}

.header-search-inline:focus-within {
	border-color: #0081d0;
}

.header-search-inline-input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-family: 'Golos Text', sans-serif;
	font-size: 15px;
	color: #3b4955;
}

.header-search-inline-input::placeholder {
	color: #a0b0bc;
}

.header-search-inline-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-shrink: 0;
	height: 38px;
	padding: 0 18px;
	border: none;
	border-radius: 40px;
	background: #0081d0;
	color: #fff;
	font-family: 'Golos Text', sans-serif;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background .2s;
}

.header-search-inline-btn:hover {
	background: #3b4955;
}

.header-search-inline-btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}


/* --- 1520px+ : інпут у десктопній шапці замість іконки --- */
@media (min-width: 1520px) {
	.header-search-inline-desktop {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
	}

	.search-open-btn {
		display: none;
	}

	.header-actions {
		flex: 0 1 320px;
		min-width: 175px;
	}
}

/* --- 1520–1799px : підтискаємо відступи, щоб інпут влазив --- */
@media (min-width: 1520px) and (max-width: 1799px) {
	.header {
		gap: 32px;
	}

	.header-left {
		gap: 40px;
	}

	.nav-menu {
		width: auto;
		gap: 22px;
	}

	.header-right {
		column-gap: 20px;
	}

	.header-search-inline-desktop {
		padding-left: 14px;
	}

	.header-search-inline-desktop .header-search-inline-btn {
		padding: 0 14px;
	}
}

/* --- 769–1310px : меню сховане -> вільного місця багато, повертаємо інпут --- */
@media (min-width: 769px) and (max-width: 1310px) {
	.header {
		flex-wrap: nowrap;
		gap: 24px;
	}

	.header-left {
		width: auto;
		flex-shrink: 0;
	}

	.header-mobile-actions {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: flex-end;
		gap: 12px;
	}

	.header-search-inline-tablet {
		display: flex;
		order: -1;
		flex: 0 1 380px;
		min-width: 190px;
		margin-right: auto;
		height: 44px;
		padding: 3px 3px 3px 16px;
	}

	.header-search-inline-tablet .header-search-inline-input {
		font-size: 14px;
	}

	.header-search-inline-tablet .header-search-inline-btn {
		height: 36px;
		padding: 0 16px;
		font-size: 13px;
	}

	.header-search-btn {
		display: none;
	}
}

/* --- <=768px : мобільний лейаут без змін --- */
@media (max-width: 768px) {
	.header-search-inline {
		display: none;
	}

	.about-content{
		padding:30px 20px;
	}
	.about-hero{
		padding: 30px 20px;
	}
	.about-hero-text{
		max-width: 100%;
	}
}


/* =========================================================
   PARTNERS BANNER — гумовий текст у межах блока (769px+)
   Мобільна версія (<=768px) не чіпається.
   ========================================================= */
@media (min-width: 769px) {
	.partners-banner {
		height: auto;
		min-height: clamp(240px, 26vw, 342px);
		padding: 30px 0;
	}

	.partners-worker {
		left: 0;
		width: clamp(180px, 20vw, 313px);
		height: auto;
		aspect-ratio: 313 / 391;
	}

	.partners-text {
		margin-left: calc(8.33% + clamp(180px, 20vw, 313px) + clamp(24px, 6vw, 120px));
		max-width: 560px;
		min-width: 0;
		padding-right: clamp(24px, 4vw, 60px);
	}

	.partners-text p {
		font-size: clamp(18px, 2.3vw, 36px);
		line-height: 1.25;
		overflow-wrap: break-word;
	}
}


/* =========================================================
   STICKY HEADER — шапка липне до верху при скролі
   ========================================================= */

/* position:sticky не працює, якщо предок створює scroll-контейнер, а body
   має overflow-x:hidden (style.css) саме такий і створює. overflow-x:clip
   обрізає по горизонталі так само, але scroll-контейнера не робить.
   Через @supports: де clip не підтримується — лишається старий hidden,
   шапка просто не липне, нічого не ламається. */
@supports (overflow-x: clip) {
	body {
		overflow-x: clip;
	}
}

.header {
	position: sticky;
	top: 0;
	/* нижче за .search-popup (2000) і .search-overlay (1999),
	   вище за .mobile-menu (1000) і .mobile-overlay (999) */
	z-index: 1001;
	background: #fff;
	transition: box-shadow .2s ease;
}

/* Тінь з'являється лише коли сторінку прокрутили (клас вішає JS у layouts/app.blade.php) */
.header.is-stuck {
	box-shadow: 0 2px 12px rgba(59, 73, 85, .12);
}