/* Start:/local/templates/happy/css/owl.carousel.css?17754704103971*/
/* ==========================================================================
   OWL CAROUSEL
   ========================================================================== */
.owl-carousel {
	display: none;
	width: 100%;
	-webkit-tap-highlight-color: transparent;
	/* position relative and z-index fix webkit rendering fonts issue */
	position: relative;
	z-index: 1;
}

.owl-carousel .owl-stage {
	position: relative;
	-ms-touch-action: pan-Y;
}

.owl-carousel .owl-stage:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.owl-carousel .owl-stage-outer {
	position: relative;
	overflow: hidden;
	/* fix for flashing background */
	-webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-item {
	position: relative;
	min-height: 1px;
	float: left;
	-webkit-backface-visibility: hidden;
	-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}

.owl-carousel .owl-item img {
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
	display: none;
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
	cursor: pointer;
	cursor: hand;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.owl-carousel.owl-loaded {
	display: block;
}

.owl-carousel.owl-loading {
	opacity: 0;
	display: block;
}

.owl-carousel.owl-hidden {
	opacity: 0;
}

.owl-carousel.owl-refresh .owl-item {
	display: none;
}

.owl-carousel.owl-drag .owl-item {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.owl-carousel.owl-grab {
	cursor: move;
	cursor: grab;
}

.owl-carousel.owl-rtl {
	direction: rtl;
}

.owl-carousel.owl-rtl .owl-item {
	float: right;
}

/* No Js */
.no-js .owl-carousel {
	display: block;
}

/*
*  Owl Carousel - Animate Plugin
*/
.owl-carousel .animated {
	-webkit-animation-duration: 1000ms;
	animation-duration: 1000ms;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.owl-carousel .owl-animated-in {
	z-index: 0;
}

.owl-carousel .owl-animated-out {
	z-index: 1;
}

.owl-carousel .fadeOut {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*
* 	Owl Carousel - Auto Height Plugin
*/
.owl-height {
	transition: height 500ms ease-in-out;
}

/*
* 	Owl Carousel - Lazy Load Plugin
*/
.owl-carousel .owl-item .owl-lazy {
	opacity: 0;
	transition: opacity 400ms ease;
}

.owl-carousel .owl-item img.owl-lazy {
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

/*
* 	Owl Carousel - Video Plugin
*/
.owl-carousel .owl-video-wrapper {
	position: relative;
	height: 100%;
	background: #000;
}

.owl-carousel .owl-video-play-icon {
	position: absolute;
	height: 80px;
	width: 80px;
	left: 50%;
	top: 50%;
	margin-left: -40px;
	margin-top: -40px;
	background: url("/local/templates/happy/css/owl.video.play.png") no-repeat;
	cursor: pointer;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	transition: -webkit-transform 100ms ease;
	transition: transform 100ms ease;
}

.owl-carousel .owl-video-play-icon:hover {
	-webkit-transform: scale(1.3, 1.3);
	-ms-transform: scale(1.3, 1.3);
	transform: scale(1.3, 1.3);
}

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
	display: none;
}

.owl-carousel .owl-video-tn {
	opacity: 0;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	transition: opacity 400ms ease;
}

.owl-carousel .owl-video-frame {
	position: relative;
	z-index: 1;
	height: 100%;
	width: 100%;
}
/* End */


/* Start:/local/templates/happy/css/swiper-bundle.min.css?177547041018454*/
/**
 * Swiper 11.2.10
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: June 28, 2025
 */

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
/* End */


/* Start:/local/templates/happy/css/magnific-popup.css?177547041011158*/
/* ==========================================================================
   MAGNIFIC POPUP
   ========================================================================== */
.mfp-bg {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1042;
	overflow: hidden;
	position: fixed;
	background: #0b0b0b;
	opacity: 0.8;
	filter: alpha(opacity=80);
}

.mfp-wrap {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1043;
	position: fixed;
	outline: none !important;
	-webkit-backface-visibility: hidden;
}

.mfp-container {
	text-align: center;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	padding: 0 8px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.mfp-container:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
	display: none;
}

.mfp-content {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin: 0 auto;
	text-align: left;
	z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
	width: 100%;
	cursor: auto;
}

.mfp-ajax-cur {
	cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
	cursor: -moz-zoom-out;
	cursor: -webkit-zoom-out;
	cursor: zoom-out;
}

.mfp-zoom {
	cursor: pointer;
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
	cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.mfp-loading.mfp-figure {
	display: none;
}

.mfp-hide {
	display: none !important;
}

.mfp-preloader {
	color: #CCC;
	position: absolute;
	top: 50%;
	width: auto;
	text-align: center;
	margin-top: -0.8em;
	left: 8px;
	right: 8px;
	z-index: 1044;
}

.mfp-preloader a {
	color: #CCC;
}

.mfp-preloader a:hover {
	color: #FFF;
}

.mfp-s-ready .mfp-preloader {
	display: none;
}

.mfp-s-error .mfp-content {
	display: none;
}

button.mfp-close,
button.mfp-arrow {
	overflow: visible;
	cursor: pointer;
	background: transparent;
	border: 0;
	-webkit-appearance: none;
	display: block;
	outline: none;
	padding: 0;
	z-index: 1046;
	-webkit-box-shadow: none;
	box-shadow: none;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

.mfp-close {
	width: 44px;
	height: 44px;
	line-height: 44px;
	position: absolute;
	right: 0;
	top: 0;
	text-decoration: none;
	text-align: center;
	opacity: 0.65;
	filter: alpha(opacity=65);
	padding: 0 0 18px 10px;
	color: #FFF;
	font-style: normal;
	font-size: 28px;
	font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
	opacity: 1;
	filter: alpha(opacity=100);
}

.mfp-close:active {
	top: 1px;
}

.mfp-close-btn-in .mfp-close {
	color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
	color: #FFF;
	right: -6px;
	text-align: right;
	padding-right: 6px;
	width: 100%;
}

.mfp-counter {
	position: absolute;
	top: 0;
	right: 0;
	color: #CCC;
	font-size: 12px;
	line-height: 18px;
	white-space: nowrap;
}

.mfp-arrow {
	position: absolute;
	opacity: 0.65;
	filter: alpha(opacity=65);
	margin: 0;
	top: 50%;
	margin-top: -55px;
	padding: 0;
	width: 90px;
	height: 110px;
	-webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
	margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
	opacity: 1;
	filter: alpha(opacity=100);
}

.mfp-arrow:before,
.mfp-arrow:after,
.mfp-arrow .mfp-b,
.mfp-arrow .mfp-a {
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	left: 0;
	top: 0;
	margin-top: 35px;
	margin-left: 35px;
	border: medium inset transparent;
}

.mfp-arrow:after,
.mfp-arrow .mfp-a {
	border-top-width: 13px;
	border-bottom-width: 13px;
	top: 8px;
}

.mfp-arrow:before,
.mfp-arrow .mfp-b {
	border-top-width: 21px;
	border-bottom-width: 21px;
	opacity: 0.7;
}

.mfp-arrow-left {
	left: 0;
}

.mfp-arrow-left:after,
.mfp-arrow-left .mfp-a {
	border-right: 17px solid #FFF;
	margin-left: 31px;
}

.mfp-arrow-left:before,
.mfp-arrow-left .mfp-b {
	margin-left: 25px;
	border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
	right: 0;
}

.mfp-arrow-right:after,
.mfp-arrow-right .mfp-a {
	border-left: 17px solid #FFF;
	margin-left: 39px;
}

.mfp-arrow-right:before,
.mfp-arrow-right .mfp-b {
	border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
	padding-top: 40px;
	padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
	line-height: 0;
	width: 100%;
	max-width: 900px;
}
.mfp-iframe-holder .mfp-close {
	top: -40px;
}

.mfp-iframe-scaler {
	width: 100%;
	height: 0;
	overflow: hidden;
	padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
	background: #000;
}

/* Main image in popup */
img.mfp-img {
	width: auto;
	max-width: 100%;
	height: auto;
	display: block;
	line-height: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 40px 0 40px;
	margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
	line-height: 0;
}

.mfp-figure:after {
	content: '';
	position: absolute;
	left: 0;
	top: 40px;
	bottom: 40px;
	display: block;
	right: 0;
	width: auto;
	height: auto;
	z-index: -1;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
	background: #444;
}

.mfp-figure small {
	color: #BDBDBD;
	display: block;
	font-size: 12px;
	line-height: 14px;
}

.mfp-figure figure {
	margin: 0;
}

.mfp-bottom-bar {
	margin-top: -36px;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	cursor: auto;
}

.mfp-title {
	text-align: left;
	line-height: 18px;
	color: #F3F3F3;
	word-wrap: break-word;
	padding-right: 36px;
}

.mfp-image-holder .mfp-content {
	max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
	cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
	/**
	 * Remove all paddings around the image on small screen
	*/
	.mfp-img-mobile .mfp-image-holder {
		padding-left: 0;
		padding-right: 0;
	}
	.mfp-img-mobile img.mfp-img {
		padding: 0;
	}
	.mfp-img-mobile .mfp-figure:after {
		top: 0;
		bottom: 0;
	}
	.mfp-img-mobile .mfp-figure small {
		display: inline;
		margin-left: 5px;
	}
	.mfp-img-mobile .mfp-bottom-bar {
		background: rgba(0, 0, 0, 0.6);
		bottom: 0;
		margin: 0;
		top: auto;
		padding: 3px 5px;
		position: fixed;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box; }
		.mfp-img-mobile .mfp-bottom-bar:empty {
			padding: 0;
		}
	.mfp-img-mobile .mfp-counter {
		right: 5px;
		top: 3px;
	}
	.mfp-img-mobile .mfp-close {
		top: 0;
		right: 0;
		width: 35px;
		height: 35px;
		line-height: 35px;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		text-align: center;
		padding: 0;
	}
}

@media all and (max-width: 900px) {
	.mfp-arrow {
		-webkit-transform: scale(0.75);
		transform: scale(0.75);
	}
	.mfp-arrow-left {
		-webkit-transform-origin: 0;
		transform-origin: 0;
	}
	.mfp-arrow-right {
		-webkit-transform-origin: 100%;
		transform-origin: 100%;
	}
	.mfp-container {
		padding-left: 6px;
		padding-right: 6px;
	}
}

.mfp-ie7 .mfp-img {
	padding: 0;
}

.mfp-ie7 .mfp-bottom-bar {
	width: 600px;
	left: 50%;
	margin-left: -300px;
	margin-top: 5px;
	padding-bottom: 5px;
}

.mfp-ie7 .mfp-container {
	padding: 0;
}

.mfp-ie7 .mfp-content {
	padding-top: 44px;
}

.mfp-ie7 .mfp-close {
	top: 0;
	right: 0;
	padding-top: 0;
}

/**
 * Fade-zoom animation for first dialog
 */

/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
	opacity: 0;

	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out; 



	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8); 
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
	opacity: 1;

	-webkit-transform: scale(1); 
	-moz-transform: scale(1); 
	-ms-transform: scale(1); 
	-o-transform: scale(1); 
	transform: scale(1); 
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8); 

	opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
	opacity: 0;
}



/**
 * Fade-move animation for second dialog
 */

/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
	opacity: 0;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;

	-webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );

}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
	opacity: 0;

	-webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
}

/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
	opacity: 0;

	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
	opacity: 0;
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	/* ideally, transition speed should match zoom duration */
	-webkit-transition: all 0.3s ease-out; 
	-moz-transition: all 0.3s ease-out; 
	-o-transition: all 0.3s ease-out; 
	transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
		opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
		opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}
/* End */


/* Start:/local/templates/happy/css/ion.rangeSlider.css?17754704102556*/
/* ==========================================================================
   ION RANGE SLIDER
   ========================================================================== */
.irs {
	position: relative; display: block;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	 -khtml-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
}

.irs-line {
	position: relative; display: block;
	overflow: hidden;
	outline: none !important;
}

.irs-line-left, .irs-line-mid, .irs-line-right {
	position: absolute; display: block;
	top: 0;
}

.irs-line-left {
	left: 0; width: 11%;
}

.irs-line-mid {
	left: 9%; width: 82%;
}

.irs-line-right {
	right: 0; width: 11%;
}

.irs-bar {
	position: absolute; display: block;
	left: 0; width: 0;
}

.irs-bar-edge {
	position: absolute; display: block;
	top: 0; left: 0;
}

.irs-shadow {
	position: absolute; display: none;
	left: 0; width: 0;
}

.irs-slider {
	position: absolute; display: block;
	cursor: default;
	z-index: 1;
}

.irs-slider.single {

}

.irs-slider.from {

}

.irs-slider.to {

}

.irs-slider.type_last {
	z-index: 2;
}

.irs-min {
	position: absolute; display: block;
	left: 0;
	cursor: default;
}
.irs-max {
	position: absolute; display: block;
	right: 0;
	cursor: default;
}

.irs-from, .irs-to, .irs-single {
	position: absolute; display: block;
	top: 0; left: 0;
	cursor: default;
	white-space: nowrap;
}

.irs-grid {
	position: absolute; display: none;
	bottom: 0; left: 0;
	width: 100%; height: 20px;
}

.irs-with-grid .irs-grid {
	display: block;
}

.irs-grid-pol {
	position: absolute;
	top: 0; left: 0;
	width: 1px; height: 8px;
	background: #000;
}

.irs-grid-pol.small {
	height: 4px;
}

.irs-grid-text {
	position: absolute;
	bottom: 0; left: 0;
	white-space: nowrap;
	text-align: center;
	font-size: 9px; line-height: 9px;
	padding: 0 3px;
	color: #000;
}

.irs-disable-mask {
	position: absolute; display: block;
	top: 0; left: -1%;
	width: 102%; height: 100%;
	cursor: default;
	background: rgba(0,0,0,0.0);
	z-index: 2;
}

.irs-disabled {
	opacity: 0.4;
}

.lt-ie9 .irs-disabled {
	filter: alpha(opacity=40);
}

.irs-hidden-input {
	position: absolute !important;
	display: block !important;
	top: 0 !important;
	left: 0 !important;
	width: 0 !important;
	height: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	outline: none !important;
	z-index: -9999 !important;
	background: none !important;
	border-style: solid !important;
	border-color: transparent !important;
}
/* End */


/* Start:/local/templates/happy/css/ion.rangeSlider.skinHTML5.css?17754704102385*/
/* ==========================================================================
   ION RANGE SLIDER SKIN HTML5
   ========================================================================== */
.irs {
	height: 55px;
}

.irs-with-grid {
	height: 75px;
}

.irs-line {
	height: 10px; top: 33px;
	background: #EEE;
	background: linear-gradient(to bottom, #DDD -50%, #FFF 150%); /* W3C */
	border: 1px solid #CCC;
	border-radius: 16px;
	-moz-border-radius: 16px;
}

.irs-line-left {
	height: 8px;
}
.irs-line-mid {
	height: 8px;
}
.irs-line-right {
	height: 8px;
}

.irs-bar {
	height: 10px; top: 33px;
	border-top: 1px solid #428bca;
	border-bottom: 1px solid #428bca;
	background: #428bca;
	background: linear-gradient(to top, rgba(66,139,202,1) 0%,rgba(127,195,232,1) 100%); /* W3C */
}

.irs-bar-edge {
	height: 10px; top: 33px;
	width: 14px;
	border: 1px solid #428bca;
	border-right: 0;
	background: #428bca;
	background: linear-gradient(to top, rgba(66,139,202,1) 0%,rgba(127,195,232,1) 100%); /* W3C */
	border-radius: 16px 0 0 16px;
	-moz-border-radius: 16px 0 0 16px;
}

.irs-shadow {
	height: 2px; top: 38px;
	background: #000;
	opacity: 0.3;
	border-radius: 5px;
	-moz-border-radius: 5px;
}

.lt-ie9 .irs-shadow {
	filter: alpha(opacity=30);
}

.irs-slider {
	top: 25px;
	width: 27px; height: 27px;
	border: 1px solid #AAA;
	background: #DDD;
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(220,220,220,1) 20%,rgba(255,255,255,1) 100%); /* W3C */
	border-radius: 27px;
	-moz-border-radius: 27px;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
	cursor: pointer;
}

.irs-slider.state_hover, .irs-slider:hover {
	background: #FFF;
}

.irs-min, .irs-max {
	color: #333;
	font-size: 12px; line-height: 1.333;
	text-shadow: none;
	top: 0;
	padding: 1px 5px;
	background: rgba(0,0,0,0.1);
	border-radius: 3px;
	-moz-border-radius: 3px;
}

.lt-ie9 .irs-min, .lt-ie9 .irs-max {
	background: #ccc;
}

.irs-from, .irs-to, .irs-single {
	color: #fff;
	font-size: 14px; line-height: 1.333;
	text-shadow: none;
	padding: 1px 5px;
	background: #428bca;
	border-radius: 3px;
	-moz-border-radius: 3px;
}

.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
	background: #999;
}

.irs-grid {
	height: 27px;
}

.irs-grid-pol {
	opacity: 0.5;
	background: #428bca;
}

.irs-grid-pol.small {
	background: #999;
}

.irs-grid-text {
	bottom: 5px;
	color: #99a4ac;
}

.irs-disabled {
}

/* End */


/* Start:/local/templates/happy/components/bitrix/search.title/header-search/style.css?1775470410111*/
.title-search-result__price-old{
    color: #666;
    font-size: 14px;
    text-decoration: line-through;
}
/* End */


/* Start:/local/templates/happy/components/bitrix/sale.basket.basket.line/header-link/style.css?17754704104804*/
.bx-basket { }

.bx-basket-block {
	margin: auto;
	position: relative;
	padding-bottom: 5px;
	padding-left: 20px;
	white-space: nowrap;
	font-size: 12px;
}

.bx-basket-block > .fa {
	position: absolute;
	top: 3px;
	left: 0;
	width: 12px;
	color: #97a1ab;
}

.bx-basket-block a { margin-right: 10px; }

/*FIXED BASKET*/

@media (min-width: 768px) {
	.bx-basket-fixed {
		position: fixed;
		z-index: 100;
		overflow: hidden;
		padding-top: 10px;
		width: 200px;
		border: 1px solid #f0f0f0;
		border-radius: 1px;
		background: #fff;
		box-shadow: 0 7px 10px rgba(0, 0, 0, 0.15);
	}

	.bx-basket-fixed.top { top: 10px }

	.bx-basket-fixed.right { right: 10px }

	.bx-basket-fixed.bottom { bottom: 10px }

	.bx-basket-fixed.left { left: 10px }

	.bx-basket-fixed.bx-max-height { top: 10px; bottom: 10px; }

	.block-store-catalog-list .bx-basket-fixed.bottom { bottom: 70px }
}

@media (min-width: 768px) and (width <= 992px) {
	.block-store-catalog-list .bx-basket-fixed.bottom { bottom: 90px }
}

@media (max-width: 767px) {
	.bx-basket-fixed {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 100;
		overflow: hidden;
		padding-top: 10px;
		border: 1px solid #f0f0f0;
		border-radius: 1px;
		background: #fff;
		box-shadow: 0 7px 10px rgba(0, 0, 0, 0.15);
	}

	.bx-basket-item-list { display: none; }

	.block-wrapper .bx-basket-fixed {
		padding-top: 0;
	}

	.block-wrapper .bx-basket-fixed .bx-hdr-profile {
		display: flex;
		justify-content: space-between;
	}

	.block-wrapper .bx-basket-fixed .bx-hdr-profile .bx-basket-block {
		padding-bottom: 0;
	}

	/*.bx-basket-fixed */
}

.bx-basket-item-list {
	position: relative;
	overflow: hidden;
	padding-bottom: 20px;
	border-top: 1px solid #f7f7f7;
}

.bx-opener .bx-basket-item-list { padding-bottom: 75px; }

.bx-max-height .bx-basket-item-list {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
}

.bx-closed .bx-basket-item-list {
	overflow: hidden;
	height: 20px;
}

.bx-basket-item-list-action {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 120;
	padding: 3px 0;
	height: 20px;
	background: #f7f7f7;
	color: #4f4f4f;
	vertical-align: middle;
	text-align: center;
	font-size: 12px;
	line-height: 14px;
	cursor: pointer;
}

.bx-basket-item-list-button-container {
	position: absolute;
	right: 0;
	bottom: 20px;
	left: 0;
	padding: 10px 0;
	border-top: 1px solid #f7f7f7;
	background: #fff;
	text-align: center;
}

.bx-basket-item-list-container {
	overflow-y: auto;
	max-height: 100%
}

.bx-basket-item-list-item {
	position: relative;
	margin-bottom: 15px;
	padding-top: 15px;
	padding-right: 10px;
	padding-left: 10px;
	border-bottom: 1px solid #f7f7f7;
}

.bx-basket-item-list-container .bx-basket-item-list-item:last-child {
	margin-bottom: 0;
	border-bottom: none;
}

.bx-basket-item-list-item-status {
	margin: 0 10px 20px;
	padding: 3px;
	border-radius: 3px;
	background: #ebebeb;
	text-align: center;
	white-space: normal;
	font-weight: bold;
	font-size: 12px;
	line-height: 16px;
}

.bx-basket-item-list-item-img {
	position: relative;
	padding-bottom: 5px;
	text-align: center;
}

.bx-basket-item-list-item-img img {
	max-width: 90px;
	height: auto;
	border: 1px solid #e6e6e6;
}

.bx-basket-item-list-item-name { padding-bottom: 5px; }

.bx-basket-item-list-item-name a {
	font-size: 13px;
	line-height: 16px;
}

.bx-basket-item-list-item-remove {
	position: absolute;
	top: -7px;
	right: 10px;
	width: 20px;
	height: 20px;
	opacity: .5;
	cursor: pointer;
	transition: 250ms linear all;
}

.bx-basket-item-list-item-remove:after,
.bx-basket-item-list-item-remove:before {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 10px;
	height: 2px;
	border-radius: 1px;
	background-color: #333;
	content: '';
	transform: translate(-50%, -50%);
}

.bx-basket-item-list-item-remove:after {
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	-moz-transform: translate(-50%, -50%) rotate(45deg);
	-ms-transform: translate(-50%, -50%) rotate(45deg);
	-o-transform: translate(-50%, -50%) rotate(45deg);
	transform: translate(-50%, -50%) rotate(45deg);
}

.bx-basket-item-list-item-remove:before {
	-webkit-transform: translate(-50%, -50%) rotate(135deg);
	-moz-transform: translate(-50%, -50%) rotate(135deg);
	-ms-transform: translate(-50%, -50%) rotate(135deg);
	-o-transform: translate(-50%, -50%) rotate(135deg);
	transform: translate(-50%, -50%) rotate(135deg);
}

.bx-basket-item-list-item-remove:hover { opacity: .7; }

.bx-basket-item-list-item-price-block {
	padding-bottom: 5px;
	font-size: 12px;
}

.bx-basket-item-list-item-price {
	display: inline-block;
	margin-right: 5px;
}

.bx-basket-item-list-item-price-old {
	display: inline-block;
	margin-right: 5px;
	color: #b0b0b0;
	text-decoration: line-through
}

.bx_cart_login_top .bx-hdr-profile { line-height: 1.44em; }

/* End */


/* Start:/local/templates/happy/components/bitrix/catalog.section.list/header-catalog/style.css?1775470410565*/
.header__bottom.active .header__categories ul.active ul.ul-list-custom{
    display: flex;
    flex-direction: column;
}
div.child-group__title {
    font-size: 23px;
    font-weight: 600;
    margin-bottom: 20px;
}

.child-block-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.child-block-section ul.ul-list-custom {
    display: flex;
    flex-direction: column;
}

@media(max-width: 767px){
    div.child-group__title{
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 20px;
    }
}
/* End */


/* Start:/local/templates/happy/components/bitrix/search.title/header-mobile-search/style.css?1775470410111*/
.title-search-result__price-old{
    color: #666;
    font-size: 14px;
    text-decoration: line-through;
}
/* End */


/* Start:/local/templates/happy/components/bitrix/form.result.new/popup_catalog/style.css?17754704101535*/
 .popup-catalog .popup__input{
     text-align: left;
     padding-left: 14px;
 }
 .popup-catalog .popup{
     max-width: 546px;
     width: 100%;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     margin: 0;
     padding: 20px;
     z-index: 100;
     overflow: hidden;
     background: white;
 }
 .popup-catalog  .popup__img {
     position: absolute;
     bottom: 0;
     right: 0;
 }
 .popup-catalog .popup .title{
     width: 100%;
     max-width: 390px;
     margin: 0;
     font-size: 24px;
     text-align: left;
 }
 .popup-catalog  .popup .popup__text {
     text-align: left;
 }
 .popup-catalog  .popup form {
     width: 100%;
     max-width: 390px;
     display: flex;

 }
 .popup-catalog .popup__submit {
     margin-left: 6px;
     max-width: 143px;
 }
 .close-popup-order {
     position: absolute;
     top: 14px;
     right: 14px;
     cursor: pointer;
     z-index: 1;
 }

 .pone_catalog-popup {
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     background: rgba(0, 0, 0, 0.4);
     z-index: 99;
 }
 @media(max-width: 767px){
     .popup-catalog .popup .popup__text{
         width: 80%;
     }
     .popup-catalog .popup{
         max-width: 95%;
     }
     .popup-catalog .popup .title{
         margin-bottom: 12px;
         font-size: 20px;
         max-width: 290px;
     }
     .popup-catalog .popup .popup__text{
         font-size: 16px;
     }
 }
/* End */


/* Start:/local/templates/happy/components/bitrix/form.result.new/popup_cart/style.css?17754704101306*/
 .popup-basket-order .popup__input{
     text-align: left;
     padding-left: 14px;
 }
 .popup-basket-order .popup{
     max-width: 546px;
     width: 100%;
     position: fixed;
     top: 50%;
     left: 50%;
     margin: 0;
     transform: translate(-50%, -50%);
     padding: 20px;
     z-index: 100;
     overflow: hidden;
 }
 .popup-basket-order .popup__img {
     position: absolute;
     bottom: 0;
     right: 0;
 }
 .popup-basket-order  .popup .title{
     width: 100%;
     max-width: 390px;
     margin: 0;
     font-size: 24px;
 }
 .popup-basket-order  .popup .popup__text {
     text-align: left;
 }
 .popup-basket-order  .popup form {
     width: 100%;
     max-width: 390px;
     display: flex;

 }
 .popup-basket-order  .popup__submit {
     margin-left: 6px;
 }
 .close-popup-order {
     position: absolute;
     top: 14px;
     right: 14px;
     cursor: pointer;
     z-index: 1;
 }
 @media(max-width: 767px){
     .popup-basket-order .popup {
         max-width: 95%;
     }
     .popup-basket-order .popup .title{
         font-size: 24px;
         margin-bottom: 12px;
     }
     .popup-basket-order .popup__text{
         font-size: 16px;
     }
     .popup-basket-order .popup .popup__text{
         width: 80%;
     }
 }
/* End */


/* Start:/local/templates/happy/styles.css?17888554114608*/
.basket-item-price-old {
    color: #a1a1a1;
    vertical-align: middle;
    line-height: 15px;
}

.basket-item-price-old-text {
    position: relative;
    display: inline-block;
    font: 400 13px/15px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.basket-item-price-old-text:after {
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    background: no-repeat center url(data:image/svg+xml;charset=US-ASCII,%0A%3Csvg%20width%3D%22491px%22%20height%3D%22125px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M1.23046875%2C121.410156%20C122.764455%2C80.3998661%20212.227997%2C52.9779911%20269.621094%2C39.1445312%20C327.014191%2C25.3110714%20400.420441%2C13.476436%20489.839844%2C3.640625%22%20stroke%3D%22%23B80909%22%20stroke-width%3D%2216%22%20/%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E);
    background-size: 100% 100%;
    content: '';
}
.cart__price {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row-reverse;
}

.popup_all-page .popup {
    max-width: 448px;
    width: 100%;
    position: fixed;
    max-height: 660px;
    height: 660px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px 20px;
    z-index: 100;
    overflow: hidden;
    background: rgba(255, 255, 255, 1);
}
.popup_all-page .popup .title{
    max-width: 100%;
    font-size: 30px;
}
.popup_all-page .popup .btn-container {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}
.popup_all-page .popup .btn-container .btn-copy-txt {
    max-width: 224px;
    width: 100%;
    height: 50px;
    text-align: center;
    background: transparent;
    border: 1px solid rgba(34, 34, 34, 1);
    border-radius: 6px;
    font-weight: 600;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0;
    color: rgba(34, 34, 34, 1);
    cursor: pointer;
}
.popup_all-page .popup .btn-container a.open_buket-popup {
    max-width: 174px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: rgba(34, 34, 34, 1);
    border-radius: 6px;
    font-weight: 600;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0;
    color: white;
}
.popup_all-page .popup  .popup__img {
    max-width: 100%;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.popup_all-page .popup  .close-popup-order {
    position: absolute;
    top: 14px;
    right: 14px;
    cursor: pointer;
    z-index: 1;
}
.popup_all-page .popup  .popup__img img{
    width: 100%;
}
.pone_catalog-popup {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
}
.delivery-block-header {
    margin-left: 13px;
    display: flex;
    gap: 8px;
    height: 48px;
    max-width: 175px;
    width: 175px;
    background: white;
    border: 1px solid rgba(34, 34, 34, 1);
    border-radius: 6px;
    align-items: center;
    padding: 9px 14px;
}
.delivery-block-header span{
    font-weight: 500;
    font-size: 14px;
    width: 109px;
    line-height: 110.00000000000001%;
    letter-spacing: 0;
    color: rgba(34, 34, 34, 1);
}
.delivery-block-header img{
    width: 30px;
    height: 30px;
}
.product-item-info-container[data-entity="buttons-block"]{
    order: 1;
    margin-top: auto;
}

@media(max-width: 767px){
    .basket-item-price-old{
        top: 0;
    }
    .popup-catalog .popup__img, .popup-basket-order .popup__img {
        z-index: -1;
    }
    .header__catalog .delivery-block-header {
        display: none;
    }
    .delivery-block-header span {
        width: 70px;
        font-size: 10px;
    }
    .delivery-block-header{
        max-width: 130px;
        margin-left: -2px;
        height: 34px;
        padding: 9px 9px;
    }
    .delivery-block-header img{
        width: 24px;
        height: 24px;
    }
    .popup_all-page .popup {
        max-width: 95%;
        max-height: 500px;
        padding: 20px;
        margin: 0;
    }
    .popup_all-page .popup .title{
        font-size: 24px;
    }
    .popup_all-page .popup__text{
        font-size: 16px;
    }
}
/* End */


/* Start:/local/templates/happy/template_styles.css?1791492062406864*/
/* ==========================================================================
   FONTS
   ========================================================================== */
@font-face {
  font-family: "Raleway";
  src: url("/local/templates/happy/fonts/Raleway-v4020-Regular.woff2") format("woff2"),
    url("/local/templates/happy/fonts/Raleway-v4020-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("/local/templates/happy/fonts/Raleway-v4020-Bold.woff2") format("woff2"),
    url("/local/templates/happy/fonts/Raleway-v4020-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway-v4020";
  src: url("/local/templates/happy/fonts/Raleway-v4020-SemiBold.woff2") format("woff2"),
    url("/local/templates/happy/fonts/Raleway-v4020-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("/local/templates/happy/fonts/Raleway-v4020-Medium.woff2") format("woff2"),
    url("/local/templates/happy/fonts/Raleway-v4020-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   NORMALIZE
   ========================================================================== */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-family: Raleway, sans-serif;
  color: #222;
  font-size: 1em;
  line-height: 1.5;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html * {
  max-height: 1000000px;
}

body {
  margin: 0;
  position: relative;
  background: #fff;
  min-width: 320px;
  font-variant-numeric: lining-nums proportional-nums;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
  border-radius: 0;
  -webkit-appearance: none;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
  border-radius: 0;
  -webkit-appearance: none;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #222;
  opacity: 0.6;
  transition: all 0.2s ease-out;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #222;
  opacity: 0.6;
  transition: all 0.2s ease-out;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #222;
  opacity: 0.6;
  transition: all 0.2s ease-out;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #222;
  opacity: 0.6;
  transition: all 0.2s ease-out;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
  color: transparent;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
  color: transparent;
}

input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder {
  color: transparent;
}

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
  color: transparent;
}

/* ==========================================================================
   HELPER CLASSES
   ========================================================================== */
.container {
  margin: auto;
  width: 1244px;
  padding: 0 20px;
}

.hidden {
  display: none;
}

.unselectable {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

/*body::after{
	position:absolute;
	width:0;
	height:0;
	overflow:hidden;
	z-index:-1;
	content:
		url(/local/templates/happy/img/youtube-hover.svg)
		url(/local/templates/happy/img/telegram-hover.svg)
		url(/local/templates/happy/img/whatsapp-hover.svg);
}*/

.ovh {
  overflow: hidden;
}

.section {
  margin: 80px 0;
}

.section.section_top {
  margin-top: 0;
}

.h1 {
  margin: 20px 0;
}

.title {
  color: #222;
  font-size: 36px;
  font-weight: 600;
  line-height: 130%;
  margin: 0;
}

.title h1 {
  font: inherit;
  margin: 0;
}

.more {
  display: inline-block;
  position: relative;
  color: #222;
  font-size: 15px;
  font-weight: 500;
  line-height: 130%;
  padding: 4px 20px 5px 10px;
  border-radius: 6px;
  background: #f6f6f6;
  text-decoration: none;
}

.more:after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  margin-top: -5px;
  width: 6px;
  height: 10px;
  background: url(/local/templates/happy/img/more.svg) no-repeat;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
  position: relative;
  background: #fff;
  height: 150px;
  transition: all 0.2s ease-out;
}

.header__top {
  background: #f4f4f4;
}

.header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__top .header__row {
  height: 36px;
}

.header__middle {
  background: #fff;
  position: relative;
}

.header__middle .header__row {
  height: 70px;
}

.header__bottom {
  border-top: 1px solid #f4f4f4;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
}

.header__menu ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 110%;
}

.header__menu ul li+li {
  margin-left: 30px;
}

.header__menu a {
  color: #222;
  text-decoration: none;
}

.header__menu a:hover {
  text-decoration: underline;
}

.header__phone {
  color: #222;
  font-size: 14px;
  font-weight: 600;
  line-height: 110%;
}

.header__phone a {
  text-decoration: none;
  color: #222;
}

.header__ratings {
  display: flex;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 110%;
}

.header__rating {
  text-decoration: none;
  color: #222;
  padding-left: 26px;
  position: relative;
}

.header__ratings>*+* {
  margin-left: 30px;
}

.header__rating:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: 0;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.header__rating_2gis:before {
  background-image: url(/local/templates/happy/img/2gis.webp);
}

.header__rating_yandex:before {
  background-image: url(/local/templates/happy/img/yandex.webp);
}

.header__logo {
  width: 231px;
  flex-shrink: 0;
}

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

.header__catalog {
  display: flex;
}

.header__button {
  border: 1px solid #222;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 110%;
  padding: 14px 17px 14px 47px;
  border-radius: 6px;
  background: #222;
  position: relative;
  cursor: pointer;
  margin-right: 6px;
  user-select: none;
  transition: all 0.2s ease-out;
}

.header__button:before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translate(0, -50%);
  width: 20px;
  height: 20px;
  background: url(/local/templates/happy/img/button.svg) no-repeat center;
  transition: all 0.2s ease-out;
}

.header__search {
  display: flex;
  width: 390px;
  position: relative;
}

.header__search button {
  display: none;
}

.header__search-close {
  display: none;
  width: 44px;
  height: 40px;
  border-radius: 6px;
  background: #222 url(/local/templates/happy/img/search-close.svg) no-repeat center;
  flex-shrink: 0;
  margin-right: 6px;
  cursor: pointer;
}

.header__search input[type="text"] {
  display: block;
  height: 48px;
  width: 100%;
  border-radius: 6px;
  border: 1px solid #d6d7db;
  background: #fff url(/local/templates/happy/img/search.svg) no-repeat;
  background-position: 14px center;
  padding: 0 14px 0 40px;
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: 120%;
  outline: none;
}

.header__search input[type="submit"] {
  display: none;
}

/* Правка №80 (22.08.2026). Было `transition: all 0.2s ease-out`.
   Номер именно 80: №51 в летописи занят правкой от 20.08, а параллельная
   сессия сегодня повторно взяла №50 — в этом файле теперь два разных «№50».
   Нумерацию ведут две сессии независимо, и это уже привело к столкновению.
   🔴 Это подозреваемый в отрыве меню от низа экрана при скролле ВВЕРХ в
   Chrome-iOS и Яндекс-iOS (в Safari ровно). Когда возвращается нижний тулбар
   браузера, видимая область сжимается и браузер пересчитывает положение
   прилипшего элемента. С `all` меню не перескакивает на новое место, а ДОЕЗЖАЕТ
   до него за 200 мс — и всё это время висит оторванным, а под ним видно
   страницу. Панель покупки .card__buttons на том же bottom: 0 вела себя ровно
   (опыт `?navtest`, 15.08) — и у неё перехода нет вовсе.
   Переход не убираем: он нужен для показа и скрытия меню (opacity/visibility).
   Сужаем до этих двух свойств, чтобы анимировалось появление, но не положение.
   История версий и что уже проверено — в DECISIONS.md, записи 12–15.08. */
.header__links {
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

.header__links>*+* {
  margin-left: 10px;
}

.header__link {
  width: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 44px;
  color: rgba(34, 34, 34, 0.6);
  text-align: center;
  font-size: 12px;
  line-height: normal;
  text-decoration: none;
  justify-content: space-between;
}

.header__link_disable {
  display: none;
}

.header__link span {
  position: absolute;
  left: 35px;
  top: -3px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 110%;
  padding: 1px 4px;
  border-radius: 40px;
  background: #222;
}

.header__link_home {
  display: none;
}

.header__link_catalog {
  display: none;
}

.header__link_home:before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(/local/templates/happy/img/home.svg) no-repeat center;
  background-size: cover;
}

.header__link_catalog:before {
  content: "";
  width: 32px;
  height: 20px;
  background: url(/local/templates/happy/img/catalog.svg) no-repeat center;
  background-size: cover;
}

.header__link_favorite:before {
  content: "";
  width: 24px;
  height: 24px;
  background: url(/local/templates/happy/img/favorite.svg) no-repeat center;
  background-size: cover;
}

.header__link_cart:before {
  content: "";
  width: 24px;
  height: 24px;
  background: url(/local/templates/happy/img/cart.svg) no-repeat center;
  background-size: cover;
}

.header__link_bonus:before {
  content: "";
  width: 24px;
  height: 24px;
  background: url(/local/templates/happy/img/bonus.svg) no-repeat center;
  background-size: cover;
  flex-shrink: 0;
}

.header__link_account:before {
  content: "";
  width: 24px;
  height: 24px;
  background: url(/local/templates/happy/img/account.svg) no-repeat center;
  background-size: cover;
}

.header__nav {
  position: relative;
}

.header__nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  color: #222;
  font-size: 16px;
  font-weight: 600;
  line-height: 110%;
}

.header__nav.active ul {
  display: none;
}

.header__categories {
  display: none;
}

.header__categories ul {
  display: none;
}

.header__categories ul.active {
  display: block;
}

.header__nav.active .header__categories {
  display: block;
}

.header__nav a {
  color: #222;
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 43px;
  line-height: 43px;
}

.header__nav a:hover {
  text-decoration: underline;
}

.header__nav li.parent>a:hover {
  text-decoration: none;
}

.header__btns {
  align-items: center;
  display: none;
}

.header__btn-search {
  cursor: pointer;
  width: 25px;
  height: 24px;
  flex-shrink: 0;
  background: url(/local/templates/happy/img/btn-search.svg) no-repeat;
}

.header__btn-close {
  cursor: pointer;
  width: 25px;
  height: 24px;
  flex-shrink: 0;
  background: url(/local/templates/happy/img/btn-close.svg) no-repeat;
  margin-left: 20px;
}

.header__back {
  display: none;
  align-items: center;
  color: #222;
  font-size: 16px;
  font-weight: 600;
  line-height: 110%;
  padding: 14px 16px;
  margin: 0 -16px;
  background: #f2f2f2;
  cursor: pointer;
}

.header__back:before {
  content: "";
  width: 7px;
  height: 14px;
  background: url(/local/templates/happy/img/back.svg) no-repeat;
  flex-shrink: 0;
  margin-right: 10px;
}

.promotion {
  border-radius: 10px;
  background: #f2c9be;
  box-shadow: 0 1px 12px 0 rgba(85, 85, 85, 0.05);
  padding: 20px;
  text-decoration: none;
  display: block;
}

.promotion_orange {
  background: #facd91;
}

.promotion__caption {
  color: #222;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 20px;
}

.promotion__description {
  color: #222;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
}

.promotion__img {
  margin: 0 -12px 20px;
}

.promotion_orange .promotion__img {
  margin-left: -20px;
  margin-right: -20px;
}

.promotion__img img {
  display: block;
  width: 100%;
  height: auto;
}

.promotion__more {
  display: flex;
  justify-content: center;
}

.promotion__more span {
  border-radius: 6px;
  background: #222;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  transition: all 0.2s ease-out;
}

.promotion:hover .promotion__more span {
  background: #2f2f2f;
}

.header__right {
  display: none;
}

/* ==========================================================================
   CITY
   ========================================================================== */
.city {
  position: relative;
}

.city__value {
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 110%;
  padding-left: 24px;
  padding-right: 14px;
  position: relative;
  cursor: pointer;
}

.slider__city {
  display: inline-block;
}

.slider__city .city__value {
  font: inherit;
  color: inherit;
  padding: 0 36px 0 0;
  display: inline-block;
  position: relative;
}

.slider__city .city__value span {
  display: none;
}

.slider__city .city__value span+span {
  display: inline;
}

.slider__city .city__value span+span:after {
  content: attr(data-decline);
}

.city__value:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: 0;
  width: 20px;
  height: 20px;
  background: url(/local/templates/happy/img/city.svg) no-repeat center;
}

.city__value:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 0;
  width: 10px;
  height: 5px;
  background: url(/local/templates/happy/img/down.svg) no-repeat center;
  margin-top: 1px;
}

.slider__city .city__value:before {
  display: none;
}

.slider__city .city__value:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 20px;
  height: 10px;
  background: url(/local/templates/happy/img/slider-down.svg) no-repeat;
  margin-top: 0;
}

.city__popup {
  position: absolute;
  filter: drop-shadow(0px 1px 12px rgba(85, 85, 85, 0.05));
  border-radius: 15px;
  top: 25px;
  left: 0;
  background: #fff;
  white-space: nowrap;
  padding: 15px;
  width: 358px;
  z-index: 5;
  display: none;
}

.slider__city .city__popup {
  top: 65px;
}

.city__popup:before {
  content: "";
  position: absolute;
  left: 10px;
  top: -10px;
  width: 39px;
  height: 10px;
  background: url(/local/templates/happy/img/city-arrow.webp) no-repeat;
}

.city__caption {
  color: #222;
  font-size: 15px;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 14px;
}

.city__list {
  white-space: nowrap;
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
  color: #222;
  font-size: 15px;
  font-weight: 500;
  line-height: 130%;
}

.city__list a {
  color: #222;
  text-decoration: none;
}

.city__list li+li {
  margin-top: 14px;
}

.city__close {
  position: absolute;
  background: url(/local/templates/happy/img/city-close.svg) no-repeat;
  width: 10px;
  height: 10px;
  right: 15px;
  top: 15px;
  cursor: pointer;
}

/* ==========================================================================
   TOP
   ========================================================================== */
.top {
  position: relative;
}

.top__link {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.top__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto;
}

.top__bg:before {
  content: "";
  position: absolute;
  width: 282px;
  height: 60px;
  left: 0;
  bottom: 0;
  background: url(/local/templates/happy/img/top-left.svg) no-repeat;
}

.top__bg:after {
  content: "";
  position: absolute;
  width: 282px;
  height: 60px;
  right: 0;
  top: 0;
  background: url(/local/templates/happy/img/top-right.svg) no-repeat;
}

.top .container {
  position: relative;
}

.top__row {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top__title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 110%;
}

@media screen and (max-width: 767px) {
  .top__title {
    font-size: 16px;
  }
}

/* ==========================================================================
   HEADER-MOBILE
   ========================================================================== */
.header-mobile {
  display: none;
  border-radius: 0 0 10px 10px;
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
  padding: 10px 0;
}

.header-mobile__bottom {
  margin-top: 10px;
}

.header-mobile__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-mobile__logo {
  width: 175px;
}

.header-mobile__logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

.header-mobile__button {
  /* Правка №4 (2026-07-24): было -- черный квадрат-иконка без подписи.
     Стало -- кнопка с текстом, брендовый розовый #ff7aa7 (тот же цвет,
     что у главной кнопки Смотреть специальное предложение),
     иконка вынесена в :before. */
  width: auto;
  height: 40px;
  border-radius: 6px;
  background: #ff7aa7;
  flex-shrink: 0;
  cursor: pointer;
  margin-right: 6px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 14px 0 34px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.header-mobile__button:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url(/local/templates/happy/img/button.svg) no-repeat center;
  background-size: contain;
}

.header-mobile__search {
  position: relative;
  flex-grow: 1;
}

.header-mobile__search button {
  display: none;
}

.header-mobile__search input[type="text"] {
  display: block;
  width: 100%;
  height: 40px;
  border-radius: 6px;
  border: 1px solid #d6d7db;
  background: #fff url(/local/templates/happy/img/search.svg) no-repeat;
  background-position: 10px center;
  padding: 0 10px 0 36px;
  outline: none;
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: 120%;
}

.header-mobile__search input[type="submit"] {
  display: none;
}

.header-mobile__hamburger {
  flex-shrink: 0;
  width: 25px;
  height: 24px;
  background: url(/local/templates/happy/img/hamburger.svg) no-repeat;
  cursor: pointer;
}

/* ==========================================================================
   SLIDER
   ========================================================================== */
.slider {}

.slider__item {
  position: relative;
}

.slider__item .container {
  position: relative;
}

.slider__img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.slider__img_mobile {
  display: none;
}

.slider__block {
  height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slider__title {
  color: #222;
  font-size: 55px;
  font-weight: 600;
  line-height: 110%;
  max-width: 590px;
}

.slider__title>span {
  display: inline-block;
}

.slider__title a {
  color: #222;
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}

.slider__text {
  color: #222;
  font-size: 20px;
  font-weight: 500;
  line-height: 130%;
  margin-top: 30px;
}

.slider__button {
  margin-top: 30px;
  display: flex;
}

.slider__button a {
  display: inline-block;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  padding: 14.5px 40px;
  border-radius: 6px;
  background: #222;
  text-decoration: none;
  transition: all 0.2s ease-out;
}

.slider__button a:hover {
  background: #2f2f2f;
}

.slider .owl-dots {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
}

.slider .owl-dot {
  background: #e1e1e1;
}

.slider .owl-dot.active {
  background: #e1e1e1;
}

/* ==========================================================================
   OWL-DOTS
   ========================================================================== */
.owl-dots {
  display: flex;
  justify-content: center;
  align-items: center;
}

.owl-dot {
  border-radius: 40px;
}

.owl-dot {
  width: 4px;
  height: 4px;
  border: none;
  background: #d6d7db;
  transition: all 0.2s ease-out;
  padding: 0;
  margin: 0 2px;
}

.owl-dot.active {
  width: 22px;
  height: 8px;
  background: #222;
}

.owl-dot.active+.owl-dot,
.owl-dot.m {
  width: 10px;
  height: 8px;
}

.owl-dot.active+.owl-dot+.owl-dot,
.owl-dot.s {
  width: 6px;
  height: 6px;
}

.owl-prev {
  position: absolute;
  font-size: 0;
  border: none;
  width: 34px;
  height: 34px;
  background: url(/local/templates/happy/img/owl-prev.svg) no-repeat;
  left: -64px;
  top: 50%;
  transform: translate(0, -50%);
  margin-top: -38px;
}

.owl-next {
  position: absolute;
  font-size: 0;
  border: none;
  width: 34px;
  height: 34px;
  background: url(/local/templates/happy/img/owl-next.svg) no-repeat;
  right: -64px;
  top: 50%;
  transform: translate(0, -50%);
  margin-top: -38px;
}

/* ==========================================================================
   SWIPER
   ========================================================================== */
.swiper-boot {
  position: relative;
}

.swiper-pagination {
  display: flex;
  justify-content: center;
  position: static;
}

.swiper-pagination-bullet {
  border-radius: 40px;
  width: 10px;
  height: 8px;
  border: none;
  background: #d6d7db;
  transition: all 0.2s ease-out;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0;
  opacity: 1;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet+.swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet+.swiper-pagination-bullet {
  margin-left: 4px;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 22px;
  background: #222;
}

.swiper-button-prev {
  position: absolute;
  font-size: 0;
  border: none;
  width: 34px;
  height: 34px;
  background: url(/local/templates/happy/img/owl-prev.svg) no-repeat;
  left: -64px;
  top: 50%;
  transform: translate(0, -50%);
  margin-top: -38px;
}

.swiper-button-next {
  position: absolute;
  font-size: 0;
  border: none;
  width: 34px;
  height: 34px;
  background: url(/local/templates/happy/img/owl-next.svg) no-repeat;
  right: -64px;
  top: 50%;
  transform: translate(0, -50%);
  margin-top: -38px;
}

.swiper-button-prev:after {
  display: none;
}

.swiper-button-next:after {
  display: none;
}

/* ==========================================================================
   PRODUCT-ITEM
   ========================================================================== */
.product-item {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.js-favorite {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(1.2px);
  border-radius: 50%;
  cursor: pointer;
}

.js-favorite:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background: url(/local/templates/happy/img/product-favorite.svg) no-repeat;
}

.js-favorite.active:after {
  background-image: url(/local/templates/happy/img/product-favorite-active.svg?v=1);
}

.product-item-image-wrapper {
  margin-bottom: 12px;
  position: relative;
  display: block;
  overflow: hidden;
}

.product-item-image-wrapper img {
  display: block;
  width: 100%;
  height: 370px;
  object-fit: cover;
  border-radius: 6px;
}

.columns__right .product-item-image-wrapper img {
  height: 280px;
}

.product-item-title {
  max-height: 37px;
  /* flex-grow: 1; */
  color: #222;
  font-size: 14px;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-item-title a {
  color: #222;
  text-decoration: none;
}

.product-item-price-container {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  color: #222;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
}

.product-item-price-old {
  margin-left: 6px;
  display: inline-block;
  vertical-align: top;
  opacity: 1;
  color: #B22222;
  font-weight: 500;
  font-size: 12px;
  text-decoration-line: line-through;
}

.product-item-button-container {
  margin-top: 12px;
}

.product-item-add a {
  color: #222;
  font-size: 15px;
  font-weight: 600;
  line-height: 130%;
  border-radius: 6px;
  border: 1px solid #f2f2f2;
  background: #f2f2f2;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease-out;
}

.product-item-add a:not(.active):hover {
  background: #2f2f2f;
  color: #fff;
}

.product-item-add.no_order a:before {
  display: none;
}

.card__fixed .product-item-add.no_order a {
  padding: 0 10px;
}

.product-item-add a:before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-right: 10px;
  background: url(/local/templates/happy/img/product-add.svg) no-repeat;
  transition: all 0.2s ease-out;
}

.product-item-add a:not(.active):hover:before {
  filter: grayscale(1) brightness(1000%);
}

.product-item-add a.active {
  border-color: #222;
  background-color: #fff;
}

.product-item-scu-container {
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
}

.product-item-properties {
  display: block;
  margin: 12px 0 0;
  padding: 0;
  list-style-type: none;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
}

.product-item-properties li+li {
  margin-top: 3px;
}

.product-item-scu-item-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0 0;
  padding: 0;
  list-style-type: none;
}

.product-item [id$="sku_tree"] {
  padding-top: 10px;
}

.product-item-scu-item-text-container {
  white-space: nowrap;
  padding: 4px 8px;
  background: #f6f6f6;
  border: 1px solid #f6f6f6;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.product-item-scu-item-text-container.selected {
  background: #fff;
  border-color: #222;
  cursor: default;
}

.product-item-image-alternative {
  display: none;
}

.product-item-container .product-item-info-container.product-item-hidden {
  display: none;
  opacity: 0;
  transition: opacity 300ms ease;
}

.bx-touch .product-item-info-container.product-item-touch-hidden {
  display: none !important;
}

/*.bx-touch .product-item-info-container.product-item-hidden,*/
/*.bx-no-touch .product-item-container.hover .product-item-info-container.product-item-hidden,*/
/*.product-item-line-card .product-item-container .product-item-info-container.product-item-hidden {*/
/*	display: block;*/
/*	opacity: 1;*/
/*}*/

.product-item-image-slider-slide-container {
  overflow: hidden;
  border-radius: 6px;
}

.product-item-image-slider-slide-container img {
  border-radius: 0;
}

.product-item-image-slide {
  position: relative;
  display: none;
  height: 100%;
  background-color: #fff;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transition: 0.6s ease-in-out left;
}

@media all and (transform-3d),
(-webkit-transform-3d) {
  .product-item-image-slide {
    transition: transform 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
  }

  .product-item-image-slide.next,
  .product-item-image-slide.active.right {
    left: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  .product-item-image-slide.prev,
  .product-item-image-slide.active.left {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  .product-item-image-slide.next.left,
  .product-item-image-slide.prev.right,
  .product-item-image-slide.active {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.product-item-image-slider-slide-container>.active,
.product-item-image-slider-slide-container>.next,
.product-item-image-slider-slide-container>.prev {
  display: block;
}

.product-item-image-slider-slide-container>.active {
  left: 0;
}

.product-item-image-slider-slide-container>.next,
.product-item-image-slider-slide-container>.prev {
  position: absolute;
  top: 0;
  width: 100%;
}

.product-item-image-slider-slide-container>.next {
  left: 100%;
}

.product-item-image-slider-slide-container>.prev {
  left: -100%;
}

.product-item-image-slider-slide-container>.next.left,
.product-item-image-slider-slide-container>.prev.right {
  left: 0;
}

.product-item-image-slider-progress-bar-container {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
}

.product-item-image-slider-progress-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: #f42c2c;
  opacity: 0.8;
}

.product-item-image-slider-control-container {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 15;
  padding: 0;
  text-align: center;
  opacity: 0;
  transition: opacity 300ms ease;
}

.product-item-container.hover .product-item-image-slider-control-container,
.product-item-line-card:hover .product-item-image-slider-control-container {
  opacity: 1;
}

.product-item-image-slider-control,
.product-item-image-slider-control.active {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  opacity: 0.6;
  cursor: pointer;
  transition: all 300ms ease;
}

.product-item-image-slider-control.active {
  opacity: 1;
}

.product-item-image-slider-control:hover,
.product-item-image-slider-control.active:hover {
  cursor: pointer;
}

.hit-block {
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.hit-block-container {
  margin-bottom: 40px;
}

.hit-block-container .products-control {
  max-width: 200px;
  margin-top: 40px;
}

.hit-block-container .products {
  padding-top: 20px;
}

.product-hit {
  width: max-content;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(1.2px);
  border-radius: 25px;
  padding: 0 10px;
  cursor: pointer;
  color: #222;
  font-size: 12px;
  font-weight: 500;
  line-height: 30px;
}

@media screen and (max-width: 767.98px) {
  .cart__item .product-hit {
    padding: 0 5px;
    font-size: 10px;
    line-height: 20px;
  }
}

.header__nav .parent ul.child-block-section {
  display: none;
  flex-wrap: wrap;
  position: absolute;
  width: 100%;
  background: white;
  padding: 20px;
  gap: 20px;
  z-index: 10;
  top: 100%;
  left: 0;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  justify-content: flex-start;
}

.header:not(:has(.header__button.active)) .header__nav .parent:hover>ul.child-block-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3 колонки */
  gap: 5px;
}

.header__nav ul li.parent .child-block-section li a {
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  padding: 10px 12px;
  border-radius: 6px;
  /*background: #f6f6f6;*/
  text-decoration: none;
  display: block;
  width: max-content;
}

/* ==========================================================================
   PRODUCT
   ========================================================================== */
.product {
  position: relative;
}

.product__hit {
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 6px;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(1.2px);
  border-radius: 50%;
  cursor: pointer;
  color: #222;
  font-size: 12px;
  font-weight: 500;
  line-height: 30px;
  text-align: center;
}

.product__favorite {
  position: absolute;
  z-index: 1;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(1.2px);
  border-radius: 50%;
  cursor: pointer;
}

.product__favorite:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background: url(/local/templates/happy/img/product-favorite.svg) no-repeat;
}

.product__img {
  margin-bottom: 12px;
  position: relative;
}

.product__img img {
  display: none;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.product__img img.active {
  display: block;
}

.product__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  top: 0;
  display: flex;
  gap: 5px;
  opacity: 0;
  transition: all 0.2s ease-out;
}

.product__img:hover .product__dots {
  opacity: 1;
}

.product__dot {
  flex-grow: 1;
  border-bottom: 1px solid #222;
  opacity: 0.4;
  transition: all 0.2s ease-out;
}

.product__dot.active {
  opacity: 1;
}

.product__name {
  color: #222;
  font-size: 14px;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 12px;
}

.product__name a {
  color: #222;
  text-decoration: none;
}

.product__price {
  display: flex;
  flex-wrap: wrap;
  color: #222;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
}

.product__price span {
  margin-left: 6px;
  display: inline-block;
  vertical-align: top;
  opacity: 0.6;
  color: #222;
  font-size: 10px;
  line-height: 13px;
  font-weight: 400;
  text-decoration-line: line-through;
}

.product__buttons {
  margin-top: 12px;
}

.product__add a {
  color: #222;
  font-size: 15px;
  font-weight: 600;
  line-height: 130%;
  border-radius: 6px;
  border: 1px solid #f2f2f2;
  background: #f2f2f2;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease-out;
}

.product__add a:hover {
  background: #2f2f2f;
  color: #fff;
}

.product__add a:before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-right: 10px;
  background: url(/local/templates/happy/img/product-add.svg) no-repeat;
  transition: all 0.2s ease-out;
}

.product__add a:hover:before {
  filter: grayscale(1) brightness(1000%);
}

.product__add a.active {
  border-color: #222;
  background-color: #fff;
  pointer-events: none;
}

/* ==========================================================================
   CAROUSEL
   ========================================================================== */
.carousel__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.carousel__row .more {
  margin: 10px 0;
}

.carousel .owl-dots {
  margin-top: 30px;
}

.carousel .swiper-pagination {
  margin-top: 30px;
}

.carousel .owl-stage {
  display: flex;
}

.product-item-container {
  height: 100% !important;
}

/*.carousel .owl-dots {*/
/*	margin-top: -70px;*/
/*}*/

/*.carousel .product-item-container {*/
/*	margin-bottom: 100px;*/
/*}*/

/* ==========================================================================
   SHOWCASE
   ========================================================================== */
.showcase .title {
  margin-bottom: 30px;
}

.showcase__text {
  color: #000;
  font-size: 16px;
  line-height: 140%;
}

.showcase__text a {
  color: inherit;
}

.showcase__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 20px;
}

.showcase__all {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
}

.showcase__all a {
  color: #222;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  padding-right: 15px;
  position: relative;
}

.showcase__all a:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -5.5px;
  width: 6px;
  height: 13px;
  background: url(/local/templates/happy/img/showcase-all.svg) no-repeat;
}

/* ==========================================================================
   CATEGORIES
   ========================================================================== */
.categories .title {
  margin-bottom: 30px;
}

.categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 20px;
}

.category {
  color: #222;
  font-size: 18px;
  font-weight: 600;
  line-height: 130%;
  text-decoration: none;
  padding: 15px;
  border-radius: 10px;
  background-color: #f6f6f6;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
  height: 150px;
}

/* ==========================================================================
   GRAB
   ========================================================================== */
.grab__block {
  padding: 66px;
  border-radius: 10px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.grab .title {
  margin-bottom: 26px;
}

.grab__description {
  color: #222;
  font-size: 18px;
  font-weight: 500;
  line-height: 130%;
}

.grab__button {
  margin-top: 26px;
  display: flex;
  justify-content: center;
}

.grab__button a {
  display: inline-block;
  border-radius: 6px;
  background: #222;
  padding: 15.5px 30px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  text-decoration: none;
  transition: all 0.2s ease-out;
}

.grab__button a:hover {
  background: #2f2f2f;
}

.grab__img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 365px;
}

.grab__img img {
  display: block;
  width: 100%;
  height: auto;
}

.grab__img+.grab__img {
  left: auto;
  right: 0;
  transform: scale(-1, 1);
}

/* ==========================================================================
   ADVANTAGES
   ========================================================================== */
.advantages .title {
  margin-bottom: 20px;
}

.advantages__columns {
  display: flex;
}

.advantages__left {
  flex-grow: 1;
}

.advantages__right {
  width: 490px;
  flex-shrink: 0;
  margin-left: 20px;
}

.advantages__text {
  color: #222;
  font-size: 16px;
  line-height: 150%;
}

.advantages__text>*:first-child {
  margin-top: 0;
}

.advantages__text>*:last-child {
  margin-bottom: 0;
}

.advantages__text p {
  margin: 20px 0;
}

.advantages__text ul {
  margin: 20px 0;
  padding: 0;
  list-style-type: none;
}

.advantages__text ul li {
  padding-left: 25px;
  position: relative;
}

.advantages__text ul li+li {
  margin-top: 6px;
}

.advantages__text ul li:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 3px;
  height: 3px;
  background: #222;
  border-radius: 50%;
}

.advantages__text b {
  font-weight: 600;
}

.advantages__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.advantages__grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.advantages__caption {
  color: #222;
  font-size: 32px;
  font-weight: 600;
  line-height: 120%;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(34, 34, 34, 0.4);
}

.advantages__description {
  color: #222;
  font-size: 16px;
  line-height: 150%;
  max-width: 200px;
}

/* ==========================================================================
   BUSINESS
   ========================================================================== */
.business__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
}

.business__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.business .title {
  margin-bottom: 20px;
}

.business__right {
  order: 2;
}

.business__left {
  order: 1;
}

/* ==========================================================================
   STOCK
   ========================================================================== */
.stock__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}

.stock__item {
  border-radius: 10px;
  overflow: hidden;
  padding: 30px;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: cover;
  box-shadow: 0 1px 12px 0 rgba(85, 85, 85, 0.05);
  text-decoration: none;
}

.stock__item .title {
  margin-bottom: 20px;
  max-width: 340px;
  line-height: 120%;
}

.stock__text {
  color: #222;
  font-size: 18px;
  font-weight: 500;
  line-height: 130%;
  max-width: 340px;
}

.stock__more {
  margin-top: 20px;
}

.stock__more {
  display: flex;
}

.stock__more span {
  display: inline-block;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  padding: 14px 30px;
  border-radius: 6px;
  background: #222;
  transition: all 0.2s ease-out;
}

.stock__item:hover .stock__more span {
  background: #2f2f2f;
}

/* ==========================================================================
   MODE
   ========================================================================== */
.mode__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
}

.mode__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.mode .title {
  margin-bottom: 20px;
  white-space: nowrap;
}

/* ==========================================================================
   GRIP
   ========================================================================== */
.grip__block {
  padding: 40px;
  overflow: hidden;
  background: #f6f6f6;
  border-radius: 10px;
  position: relative;
}

.grip .title {
  margin-bottom: 20px;
}

.grab__text {
  color: #222;
  font-size: 18px;
  font-weight: 500;
  line-height: 130%;
  margin-bottom: 20px;
}

.grip__row {
  display: flex;
}

.grip__input {
  height: 50px;
  border-radius: 6px;
  border: 1px solid #d6d7db;
  background: rgba(255, 255, 255, 0.7);
  width: 300px;
  padding: 0 20px;
  color: #222;
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  outline: none;
  transition: all 0.2s ease-out;
}

.grip__input.error {
  border-color: #f00;
}

.grip__submit {
  width: 230px;
  height: 50px;
  border-radius: 6px;
  background: #222;
  margin-left: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  border: none;
  transition: all 0.2s ease-out;
}

.grip__submit:hover {
  background: #2f2f2f;
}

.grip__agree {
  margin-top: 9px;
  color: #222;
  font-size: 11px;
  font-weight: 500;
  line-height: 130%;
}

.grip__agree a {
  color: #222;
}

.grip__block:after {
  content: "";
  position: absolute;
  right: 40px;
  bottom: 0;
  width: 297px;
  height: 260px;
  background: url(/local/templates/happy/img/grip.webp) no-repeat;
  background-size: cover;
}

/* ==========================================================================
   TELEGRAM
   ========================================================================== */
.telegram__columns {
  display: flex;
  align-items: center;
}

.telegram .title {
  margin-bottom: 20px;
}

.telegram__left {
  width: 388px;
  flex-shrink: 0;
  margin-right: 20px;
}

.telegram__right {
  flex-grow: 1;
}

.telegram__text {
  color: #222;
  font-size: 18px;
  line-height: 150%;
}

.telegram__button {
  display: flex;
  margin-top: 20px;
}

.telegram__right .telegram__button {
  display: none;
}

.telegram__button a {
  display: inline-block;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  padding: 17.5px 30px 17.5px 64px;
  border-radius: 6px;
  background: #222;
  text-decoration: none;
  position: relative;
  transition: all 0.2s ease-out;
}

.telegram__button a:before {
  content: "";
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translate(0, -50%);
  width: 22px;
  height: 22px;
  background: url(/local/templates/happy/img/telegram-button.svg) no-repeat;
}

.telegram__button a:hover {
  background: #2f2f2f;
}

.telegram__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.telegram__grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.telegram__grid>*:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

/* ==========================================================================
   CONTACTS
   ========================================================================== */
.contacts {}

.contacts .title {
  margin-bottom: 20px;
}

.contacts__description {
  color: #222;
  font-size: 18px;
  line-height: 150%;
  margin-bottom: 20px;
}

.contacts__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contacts__map {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 1px 12px 0 rgba(85, 85, 85, 0.05);
}

.contacts__map iframe,
.contacts__map-canvas {
  display: block;
  width: 100%;
  height: 260px;
}

.contacts__map img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.contacts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.contacts__item {
  border-radius: 10px;
  background: #f6f6f6;
  padding: 16px 15px 18px;
}

.contacts__item_address:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(/local/templates/happy/img/icon-address.svg) no-repeat;
  margin-bottom: 10px;
}

.contacts__item_time:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(/local/templates/happy/img/icon-time.svg) no-repeat;
  margin-bottom: 10px;
}

.contacts__item_phone:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(/local/templates/happy/img/icon-phone.svg) no-repeat;
  margin-bottom: 10px;
}

.contacts__item_socialize:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(/local/templates/happy/img/icon-socialize.svg) no-repeat;
  margin-bottom: 10px;
}

.contacts__caption {
  color: #222;
  font-size: 13px;
  line-height: 130%;
  margin-bottom: 4px;
  opacity: 0.6;
}

.contacts__text {
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
}

.contacts__item_phone .contacts__text a {
  color: #222;
  text-decoration: none;
}

.contacts__text>*:first-child {
  margin-top: 0;
}

.contacts__text>*:last-child {
  margin-bottom: 0;
}

.contacts__text p {
  margin: 4px 0;
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.breadcrumbs {
  margin: 20px 0;
  color: #a7a7a7;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
}

.breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.breadcrumbs ul li:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 3px;
  height: 3px;
  background: #a7a7a7;
  border-radius: 50%;
  margin: 0 6px;
}

.breadcrumbs ul li:last-child:after {
  display: none;
}

.breadcrumbs a {
  color: #222;
  text-decoration: none;
}

/* ==========================================================================
   PAGE
   ========================================================================== */
.page {
  color: #000;
  font-size: 16px;
  line-height: 140%;
  margin-bottom: 80px;
}

.page a {
  color: inherit;
}

.page p {
  margin: 1em 0;
}

.page__columns {
  display: flex;
}

.page__left {
  flex-grow: 1;
}

.page__left>*:first-child,
.page .container>*:first-child {
  margin-top: 0;
}

.page__left>*:last-child,
.page .container>*:last-child {
  margin-bottom: 0;
}

.page__right {
  width: 490px;
  flex-shrink: 0;
  margin-left: 20px;
}

.page__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.page__gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.page__gallery a {
  display: block;
}

.page__gallery *:last-child {
  grid-column: span 2;
}

.page_about ul {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
  margin: 20px 0;
  padding: 0;
  list-style-type: none;
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
}

.page_about ul li {
  border-radius: 10px;
  background: #f6f6f6;
  padding: 15px;
  display: flex;
}

.page_about ul li:before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 38px;
  background: url(/local/templates/happy/img/flower.svg) no-repeat;
  margin-right: 14px;
}

.page__edges {
  margin-top: 60px;
}

.edges__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}

.edges .title {
  margin-bottom: 10px;
}

.edges__text {
  color: #222;
  font-size: 16px;
  line-height: 150%;
}

/* ==========================================================================
   MENTION
   ========================================================================== */
.mention .title {
  margin-bottom: 30px;
}

.mention__wrapper {
  max-width: 592px;
}

.mention__tabs {
  display: flex;
  max-width: 358px;
}

.mention__tab {
  max-width: 179px;
  flex-grow: 1;
  color: #222;
  font-size: 17px;
  line-height: 140%;
  padding: 0 4px 5px 4px;
  border-bottom: 2px solid #d9d9d9;
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.mention__tab.active {
  border-color: #222;
  opacity: 1;
  cursor: default;
}

.mention__tab_yandex:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  background: url(/local/templates/happy/img/mention-yandex.webp) no-repeat;
  background-size: cover;
  margin-right: 6px;
}

.mention__tab_google:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  background: url(/local/templates/happy/img/mention-google.webp) no-repeat;
  background-size: cover;
  margin-right: 6px;
}

.mention__blocks {
  margin-top: 20px;
}

.mention__block {
  display: none;
}

.mention__block>div {
  max-width: 560px;
  width: auto !important;
}

.mention__block img {
  display: block;
  width: 100%;
  height: auto;
}

.mention__block.active {
  display: block;
}

/* ==========================================================================
   COLUMNS
   ========================================================================== */
.categories+.columns {
  margin-top: 40px;
}

.columns__row {
  display: flex;
}

.columns__left {
  width: 250px;
  margin-right: 20px;
  position: relative;
  flex-shrink: 0;
}

.columns__left .menu {
  display: none;
}

.columns__right {
  width: 934px;
}

.filter-button {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #f3f3f3 url(/local/templates/happy/img/filter-button.svg) no-repeat center;
  display: none;
  cursor: pointer;
}

.sort {
  width: 224px;
  position: absolute;
  top: 0;
  left: 270px;
}

.select {
  position: relative;
  z-index: 3;
}

.select__value {
  border-radius: 6px;
  border: 1px solid #d6d7db;
  background: #fff;
  color: #5e5e5e;
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  height: 37px;
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0 32px 0 12px;
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 1;
}

.select__value:after {
  content: "";
  position: absolute;
  right: 12px;
  top: 14px;
  width: 12px;
  height: 7px;
  background: url(/local/templates/happy/img/icon-select.svg) no-repeat;
  transition: all 0.2s ease-out;
}

.select.active .select__value:after {
  transform: rotate(-180deg);
}

.select__options {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  border: 1px solid #d6d7db;
  background: #fff;
  padding-top: 31px;
  border-radius: 6px;
  color: #5e5e5e;
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  display: none;
  padding-bottom: 4px;
}

.select__option {
  padding: 8px 12px;
  cursor: pointer;
}

.select__option.active {
  background: #f6f6f6;
  cursor: default;
}

/* ==========================================================================
   PRODUCTS
   ========================================================================== */
.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 20px;
  padding-top: 57px;
}

.products-wrapper .products {
  padding-top: 0;
}

.pagination {
  margin-top: 40px;
}

.pagination__more {
  max-width: 358px;
  margin: auto;
}

.pagination__more a {
  display: block;
  width: 100%;
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  border-radius: 6px;
  background: #222;
  padding: 14px;
  text-decoration: none;
}

.pagination__more+.pagination__items {
  margin-top: 16px;
}

.pagination__items {
  display: flex;
  gap: 10px;
  justify-content: center;
  color: #222;
  text-align: center;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}

.pagination__items a,
.pagination__items b,
.pagination__items span {
  color: inherit;
  border-radius: 6px;
  border: 1px solid #f2f2f2;
  background: #fff;
  width: 40px;
  height: 40px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination__items b {
  background: #222;
  color: #fff;
  font: inherit;
}

.pagination__items .pagination__dots {
  border-color: transparent;
}

.pagination .pagination__prev {
  background: url(/local/templates/happy/img/prev-pagination.svg) no-repeat center;
  font-size: 0;
}

.pagination .pagination__next {
  background: url(/local/templates/happy/img/next-pagination.svg) no-repeat center;
  font-size: 0;
}

.pagination .disabled {
  opacity: 0.6;
}

/* ==========================================================================
   MENU
   ========================================================================== */
.menu {
  border-radius: 6px;
  border: 1px solid #d6d7db;
  padding: 16px;
}

.menu__title {
  color: #222;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 16px;
}

.menu__list {
  color: #222;
  font-size: 14px;
  font-weight: 600;
  line-height: 120%;
}

.menu__list a {
  color: #222;
  text-decoration: none;
}

.menu__list ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.menu__list li+li {
  margin-top: 14px;
}

.menu__list a {
  padding-left: 0;
  position: relative;
  text-decoration: underline;
  text-underline-offset: 1px;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  transition: all 0.2s ease-out;
}

.columns__left .menu__list a:before {
  display: none;
}

.menu__list a:hover {
  text-decoration-color: #222;
}

li.list-parent {
  position: relative;
}

.list-parent span.arrow_open {
  position: absolute;
  right: 0;
  top: 1px;
  cursor: pointer;
  transition: .5s;
}

.list-parent span.arrow_open.active {
  transform: rotate(90deg);
}

.menu__list a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 10px;
  height: 13px;
  background: url(/local/templates/happy/img/icon-menu.svg) no-repeat;
}

.menu__list .children-sections a:before {
  display: none;
}

.menu__list .children-sections {
  margin-top: 15px;
  padding-left: 15px;
  overflow-y: auto;
  height: 300px;
}

.menu__list .children-sections.d-none {
  display: none;
}

/* ==========================================================================
       FILTER
       ========================================================================== */
.menu+.filter {
  margin-top: 16px;
}

.menu+.bx-filter {
  margin-top: 0;
}

.filter {
  border-radius: 6px;
  border: 1px solid #d6d7db;
  padding: 16px;
  transition: all 0.2s ease-out;
}

.bx-filter {
  border-radius: 6px;
  border: 1px solid #d6d7db;
  padding: 16px;
  transition: all 0.2s ease-out;
}

.filter__block+.filter__block {
  margin-top: 24px;
}

.filter__title {
  color: #222;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 16px;
}

.bx-filter-title {
  color: #222;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 16px;
}

.filter__caption {
  color: #222;
  font-size: 14px;
  font-weight: 600;
  line-height: 120%;
  position: relative;
  padding-right: 20px;
  cursor: pointer;
}

.filter__caption:after {
  content: "";
  position: absolute;
  right: 0;
  top: 5px;
  width: 12px;
  height: 7px;
  background: url(/local/templates/happy/img/icon-filter.svg);
  transition: all 0.2s ease-out;
}

.bx-filter-parameters-box-title {
  color: #222;
  font-size: 14px;
  font-weight: 600;
  line-height: 120%;
  position: relative;
  padding-right: 20px;
  cursor: pointer;
}

.bx-filter-parameters-box-title i {
  content: "";
  position: absolute;
  right: 0;
  top: 5px;
  width: 12px;
  height: 7px;
  background: url(/local/templates/happy/img/icon-filter.svg);
  transition: all 0.2s ease-out;
  transform: rotate(-90deg);
}

.filter__block.active .filter__caption:after {
  transform: rotate(0);
}

.bx-filter-parameters-box.bx-active .bx-filter-parameters-box-title i {
  transform: rotate(0);
}

.filter__content {
  padding-top: 14px;
  display: none;
}

.bx-filter-block {
  padding-top: 14px;
  display: none;
}

.bx-active .bx-filter-block {
  display: block;
}

.filter__content.active {
  display: block;
}

.range+.radio {
  margin-top: 18px;
}

.radio {
  display: flex;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  cursor: pointer;
  user-select: none;
}

.radio+.radio {
  margin-top: 12px;
}

.radio i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #b1b1b1;
  background: #fff;
  margin-right: 10px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s ease-out;
}

.radio input:checked+i {
  border-color: #222;
}

.radio input+i:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #222;
  opacity: 0;
  transition: all 0.2s ease-out;
}

.radio input:checked+i:after {
  opacity: 1;
}

.radio input {
  display: none;
}

.radio b {
  opacity: 0.4;
  font-weight: inherit;
  margin-left: 10px;
}

.checkbox {
  display: flex;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  cursor: pointer;
  user-select: none;
}

.checkbox+.checkbox {
  margin-top: 12px;
}

.checkbox i {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid #b1b1b1;
  background: #fff;
  margin-right: 10px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s ease-out;
}

.checkbox input:checked+i {
  border-color: #222;
  background: #222;
}

.checkbox input+i:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 14px;
  height: 11px;
  background: url(/local/templates/happy/img/icon-checkbox.svg) no-repeat;
  opacity: 0;
  transition: all 0.2s ease-out;
}

.checkbox input:checked+i:after {
  opacity: 1;
}

.checkbox input {
  display: none;
}

.checkbox b {
  opacity: 0.4;
  font-weight: inherit;
  margin-left: 10px;
}

.filter__buttons {
  margin-top: 16px;
}

.filter__apply {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 130%;
  height: 38px;
  border-radius: 6px;
  background: #222;
  border: none;
  transition: all 0.2s ease-out;
}

.filter__apply:hover {
  background: #2f2f2f;
}

#set_filter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 130%;
  height: 38px;
  border-radius: 6px;
  background: #222;
  border: none;
  transition: all 0.2s ease-out;
}

#set_filter:hover {
  background: #2f2f2f;
}

.filter__reset {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  color: #222;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  height: 38px;
  border-radius: 6px;
  border: 1px solid #222;
  background: #fff;
}

#del_filter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  color: #222;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  height: 38px;
  border-radius: 6px;
  border: 1px solid #222;
  background: #fff;
}

.filter__reset:before {
  content: "";
  flex-shrink: 0;
  margin-right: 10px;
  width: 10px;
  height: 10px;
  background: url(/local/templates/happy/img/icon-reset.svg) no-repeat;
}

#del_filter:before {
  content: "";
  flex-shrink: 0;
  margin-right: 10px;
  width: 10px;
  height: 10px;
  background: url(/local/templates/happy/img/icon-reset.svg) no-repeat;
}

.bx-filter-parameters-box-container_range {
  border-radius: 6px;
  border: 1px solid #dfe0e6;
  background: #fff;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  padding: 0 10px;
}

.bx-ui-slider-track-container {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
}

.bx-ui-slider-track {
  height: 2px;
  position: relative;
}

.bx-ui-slider-pricebar-vn {
  background: #a6a7ab;
  position: absolute;
  top: 0;
  bottom: 0;
}

.bx-ui-slider-pricebar-v {
  background: #222;
  position: absolute;
  top: 0;
  bottom: 0;
}

.bx-ui-slider-part {
  display: none;
}

.bx-ui-slider-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
  border: none;
  top: -7px;
}

.bx-ui-slider-handle.left {
  margin-left: -8px;
}

.bx-ui-slider-handle.right {
  margin-right: -8px;
}

.bx-ui-slider-handle:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #222;
}

.bx-filter-parameters-box-container-block .bx-ft-sub {
  display: none;
}

.bx-filter-parameters-box-container-block input {
  border: none;
  background: transparent;
  padding: 0;
}

.bx-filter-container-modef {
  display: none;
}

.bx-filter-parameters-box {
  position: relative;
}

.bx-filter-parameters-box+.bx-filter-parameters-box {
  margin-top: 24px;
}

.bx-filter-input-checkbox {
  display: flex;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  cursor: pointer;
  user-select: none;
}

.bx-filter-input-checkbox input {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid #b1b1b1;
  background: #fff;
  margin-right: 10px;
  flex-shrink: 0;
  position: relative;
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.bx-filter-input-checkbox input:checked {
  border-color: #222;
  background: #222 url(/local/templates/happy/img/icon-checkbox.svg) no-repeat center;
}

.bx-filter-input-checkbox span span {
  opacity: 0.4;
  font-weight: inherit;
  margin-left: 10px;
}

/* ==========================================================================
   RANGE
   ========================================================================== */
.range {
  border-radius: 6px;
  border: 1px solid #dfe0e6;
  background: #fff;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  padding: 0 10px;
}

.range__slider {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
}

.range .irs {
  height: 2px;
}

.range .irs-line {
  top: 0;
  height: 2px;
  background: #a6a7ab;
  border: none;
  border-radius: 0;
}

.range .irs-bar {
  top: 0;
  height: 2px;
  background: #222;
  border: none;
  border-radius: 0;
}

.range .irs-slider {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
  border: none;
  top: -7px;
}

.range .irs-slider:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #222;
}

/* ==========================================================================
   TEXT
   ========================================================================== */
.text {
  color: #222;
  font-size: 16px;
  line-height: 150%;
}

.text .container>*:first-child {
  margin-top: 0;
}

.text .container>*:last-child {
  margin-bottom: 0;
}

.text h2 {
  font-size: 36px;
  font-weight: 600;
  line-height: 130%;
  margin: 30px 0;
}

/* ==========================================================================
   SUBCATEGORIES
   ========================================================================== */
.subcategories {
  margin-bottom: 30px;
  margin-top: 20px;
}

.categories+.subcategories {
  margin-top: 30px;
}

.subcategories__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

}

.subcategories__row.open-list {
  height: 84px;
  overflow: hidden;
}

.subcategories__row a {
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  padding: 8px 12px;
  height: max-content;
  border-radius: 6px;
  background: #f6f6f6;
  text-decoration: none;
}

.subcategories__more {
  margin-top: 14px;
  color: #222;
  font-size: 13px;
  font-weight: 500;
  line-height: 130%;

}

.subcategories__more a {
  color: inherit;
  text-decoration: none;
  padding-right: 20px;
  position: relative;
}

.subcategories__more a:after {
  content: "";
  position: absolute;
  top: 6px;
  right: 0;
  width: 10px;
  height: 5px;
  background: url(/local/templates/happy/img/subcategories-down.svg) no-repeat;
}

/* ==========================================================================
   CARD
   ========================================================================== */
.card {}

.card__images-wrapper {
  display: none;
}

.card__images-wrapper.active {
  display: block;
  position: relative;
}

.card__columns {
  display: flex;
}

.card__left {
  width: 490px;
  flex-shrink: 0;
  margin-right: 20px;
}

.card__right {
  flex-grow: 1;
}

.card__slide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.card__slider .owl-dots {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
}

.card__slider .owl-dot.active,
.card__slider .owl-dot {
  background: #fff;
  opacity: 0.6;
}

.card__previews {
  margin-top: 10px;
  gap: 12px 10px;
  display: flex;
  flex-wrap: wrap;
}

.card__previews a {
  width: 80px;
  flex-shrink: 0;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0.3;
  transition: all 0.2s ease-out;
}

.card__previews a:hover {
  opacity: 0.6;
}

.card__previews a.active {
  opacity: 1;
}

.card__previews img {
  display: block;
  width: 100%;
  height: auto;
}

.card__title {
  color: #222;
  font-size: 26px;
  font-weight: 600;
  line-height: 110%;
  margin-bottom: 20px;
}

.card__title h1 {
  font: inherit;
  color: inherit;
  margin: 0;
}

.card__compound {
  color: #222;
  font-size: 15px;
  line-height: 150%;
  margin-bottom: 20px;
  opacity: 0.6;
}

.card div[id$="skudiv"] {
  margin-bottom: 20px;
}

.card__attention {
  color: #222;
  font-size: 15px;
  line-height: 150%;
  margin-bottom: 20px;
  border-left: 1px solid #222;
  padding-left: 8px;
}

.card__description {
  color: #222;
  font-size: 15px;
  line-height: 150%;
  margin-bottom: 20px;
}

.card__buttons {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.card__fixed {
  display: flex;
}

.card__add {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  border-radius: 6px;
  background: #222;
  display: inline-flex;
  height: 54px;
  align-items: center;
  padding: 0 30px;
  transition: all 0.2s ease-out;
  text-decoration: none;
  position: relative;
}

.card__add a {
  color: inherit;
  text-decoration: none;
}

.card__link {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.card__add.active {
  cursor: default;
}

.card__add.active .card__link {
  display: none;
}

.card__add:not(.active):hover {
  background: #2f2f2f;
}

.card__add:before {
  content: "";
  margin-right: 8px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url(/local/templates/happy/img/icon-cart.svg) no-repeat;
}

.card__add i {
  width: 1px;
  height: 18px;
  background: #fff;
  margin: 0 10px;
}

.card__favorite,
.card__favorite.js-favorite {
  position: static;
  margin-left: 10px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #f3f3f3 url(/local/templates/happy/img/icon-favorite.svg) no-repeat center;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.card__favorite.active,
.card__favorite.active.js-favorite {
  background-image: url(/local/templates/happy/img/icon-favorite-active.svg);
}

.card__favorite.js-favorite:after {
  display: none;
}

.card__bonus {
  height: 54px;
  display: none;
  align-items: center;
  color: #222;
  font-size: 15px;
  line-height: 150%;
  padding: 0 20px;
  border-radius: 30px;
  border: 1px dashed rgba(132, 132, 132, 0.55);
}

.card__bonus:before {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url(/local/templates/happy/img/icon-bonus.svg) no-repeat;
  margin-right: 9px;
  flex-shrink: 0;
}

.card__buttons {
  margin-bottom: 40px;
}

.card__caption {
  color: #222;
  font-size: 24px;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 20px;
}

.card__gifts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 14px;
  padding: 0 16px;
  margin-left: -16px;
  margin-right: -16px;
}

.card__gift {
  width: 112px;
  flex-shrink: 0;
  color: #222;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
}

.card__gift img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 10px;
}

.card__tabs {
  margin-top: 62px;
  margin-bottom: 30px;
  display: flex;
}

.card__tabs::-webkit-scrollbar {
  width: 0;
}

.card__tabs {
  -ms-overflow-style: none;
}

.card__tabs {
  overflow: -moz-scrollbars-none;
}

.card__tab {
  white-space: nowrap;
  padding: 5px 11px;
  background: #f6f6f6;
  border: 1px solid #f6f6f6;
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.card__tab+.card__tab {
  margin-left: 10px;
}

.card__tab.active {
  background: #fff;
  border-color: #222;
  cursor: default;
}

.card__block {
  display: none;
}

.card__block.active {
  display: block;
}

.card__block .card__caption {
  margin-bottom: 10px;
}

.card__text {
  color: #222;
  font-size: 16px;
  line-height: 150%;
}

.card__text mark {
  display: block;
  padding-left: 8px;
  border-left: 1px solid #222;
  background: transparent;
}

.card__auth {
  font-size: 0;
  margin-top: 10px;
}

.card__auth_hidden {
  display: none;
}

.link-auth {
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  color: #222;
  font-size: 15px;
  line-height: 150%;
  height: 54px;
  border-radius: 30px;
  border: 1px dashed rgba(132, 132, 132, 0.55);
}

.link-auth a {
  color: inherit;
  text-underline-offset: 1px;
  text-decoration-thickness: 1px;
  transition: all 0.2s ease-out;
}

.link-auth a:hover {
  text-decoration-color: transparent;
}

.card-count {
  display: none;
  width: 138px;
  flex-shrink: 0;
  justify-content: space-between;
  user-select: none;
}

.card-count.active,
.card__add.active .card-count {
  display: flex;
}

.card-price {
  font: inherit !important;
}

.card__add.active .card-price {
  display: none;
}

.card-count__minus {
  display: flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url(/local/templates/happy/img/icon-minus.svg) no-repeat center;
  background-size: cover;
  cursor: pointer;
}

.card-count__plus {
  display: flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url(/local/templates/happy/img/icon-plus.svg) no-repeat center;
  background-size: cover;
  cursor: pointer;
}

.card-count .card-count__count {
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  line-height: 130%;
  text-align: center;
  display: flex;
  justify-content: center;
  opacity: 0.5;
}

.card-count__value {
  margin-right: 3px;
}

.card-count .card-count__count input {
  width: 10px;
  display: inline;
  font-size: 10px;
  color: #fff;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
}

.card-count .card-count__sum {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 130%;
  text-align: center;
}

.card-count .card-count__sum strong {
  font-size: 13px;
  display: inline-block;
  line-height: 130%;
}

.card .bx_medium.bx_bt_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px !important;
  color: #222;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: normal !important;
  height: auto !important;
  border-radius: 6px;
  border: 1px solid #222;
  text-decoration: none;
  background: #fff;
}

.card .blog-comment-buttons input[type="button"] {
  border-radius: 6px;
  background: #222;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px !important;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  border: none;
  transition: all 0.2s ease-out;
}

.card .blog-comment-buttons input[type="button"]:hover {
  background: #2f2f2f;
}

.card .bx_soc_comments_div .bx-catalog-tab-body-container .bx-catalog-tab-container>div {
  padding: 0;
}

.card .blog-add-comment {
  padding: 0;
  text-align: left;
  margin-bottom: 20px;
}

.card div.blog-comment-fields {
  border-radius: 5px;
}

/* ==========================================================================
   CART
   ========================================================================== */
.cart {
  margin-bottom: 80px;
}

.cart__columns {
  display: flex;
}

.cart__left {
  flex-grow: 1;
}

.cart__right {
  width: 388px;
  margin-left: 20px;
  flex-shrink: 0;
}

.cart__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.cart__clear {
  color: #222;
  font-size: 13px;
  font-weight: 500;
  line-height: 130%;
  position: relative;
  display: inline-block;
  padding-right: 18px;
  text-decoration: none;
  opacity: 0.6;
  transition: all 0.2s ease-out;
}

.cart__clear:hover {
  opacity: 1;
}

.cart__clear:after {
  content: "";
  position: absolute;
  right: 0;
  top: 4px;
  width: 10px;
  height: 9px;
  background: url(/local/templates/happy/img/cart-clear.svg) no-repeat;
}

.cart__item {
  display: flex;
}

.cart__item_hidden {
  display: none;
}

.cart__item+.cart__item {
  margin-top: 20px;
}

.cart__img {
  width: 150px;
  flex-shrink: 0;
  margin-right: 20px;
  position: relative;
}

.cart__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.cart__block {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart__flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart__name {
  color: #222;
  font-family: Raleway;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
}

.cart__name a {
  color: inherit;
  text-decoration: none;
}

.cart__price {
  color: #222;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
}

.cart__count {
  width: 113px;
  height: 40px;
  border-radius: 4px;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  user-select: none;
}

.cart__minus {
  width: 36px;
  height: 40px;
  flex-shrink: 0;
  background: url(/local/templates/happy/img/cart-minus.svg) no-repeat center;
  cursor: pointer;
}

.cart__plus {
  width: 36px;
  height: 40px;
  flex-shrink: 0;
  background: url(/local/templates/happy/img/cart-plus.svg) no-repeat center;
  cursor: pointer;
}

.cart__minus.disabled,
.cart__plus.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.cart__value {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
  color: #222;
  font-size: 14px;
  font-weight: 600;
  line-height: 130%;
  text-align: center;
}

.cart__btns {
  display: flex;
  align-items: center;
}

.cart__delete {
  cursor: pointer;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: url(/local/templates/happy/img/cart-delete.svg) no-repeat;
}

.cart__favorite {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: url(/local/templates/happy/img/cart-favorite.svg) no-repeat;
}

.cart__description {
  margin-top: 9px;
  color: #222;
  font-size: 14px;
  line-height: 130%;
  max-width: 575px;
}

.cart__text {
  color: #222;
  font-size: 15px;
  line-height: 130%;
}

.cart__text a {
  color: #222;
}

.cart__quantity {
  color: #222;
  font-size: 14px;
  font-weight: 600;
  line-height: 130%;
}

.cart__form-wrapper {
  position: relative;
}

.cart__form-wrapper .maxma {
  position: absolute;
  top: 76px;
  left: 15px;
  right: 15px;
  z-index: 1;
}

.cart__form {
  padding: 15px;
  border-radius: 10px;
  background: #f6f6f6;
  position: relative;
}

.cart__buttons {
  margin-top: 20px;
}

.cart__buttons>*+* {
  margin-top: 6px;
}

.cart__one-click {
  display: block;
  width: 100%;
  color: #222;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  padding: 15px 19px;
  border-radius: 6px;
  border: 1px solid #222;
  background: #fff;
  text-align: center;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: all 0.2s ease-out;
}

.cart__one-click:hover {
  opacity: 0.8;
}

.cart__button {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  padding: 16px 20px;
  border-radius: 6px;
  background: #222;
  text-align: center;
  border: none;
  transition: all 0.2s ease-out;
}

.cart__button:hover {
  background: #2f2f2f;
}

.cart__promo-code {
  display: block;
  position: relative;
  margin-bottom: 15px;
}

.cart__form-wrapper_bonus .cart__promo-code {
  margin-bottom: 60px;
}

.cart__promo-code:after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translate(0, -50%);
  width: 24px;
  height: 14px;
  background: url(/local/templates/happy/img/cart-promo-code.svg) no-repeat;
}

.cart__promo-code input {
  display: block;
  width: 100%;
  border-radius: 6px;
  border: 1px solid #ececec;
  background: #fff;
  height: 46px;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  padding: 0 56px 0 15px;
  outline: none;
}

.cart__radio {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
}

.cart__radio span {
  margin-top: 2px;
}

.cart__radio span+span {
  margin-left: auto;
  font-weight: 600;
}

.cart__radio input {
  display: none;
}

.cart__radio i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #000;
  flex-shrink: 0;
  position: relative;
  margin-right: 6px;
}

.cart__radio i:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #000;
  border-radius: 50%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  transition: all 0.2s ease-out;
}

.cart__radio input:checked+i:before {
  opacity: 1;
}

.cart__info {
  margin-top: 25px;
}

.cart__total {
  display: flex;
  justify-content: space-between;
  color: #222;
  font-size: 18px;
  font-weight: 600;
  line-height: 130%;
  position: relative;
}

.cart__total b {
  font-weight: 600;
}

.cart__saving {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  position: relative;
}

.cart__saving span {
  background: #f6f6f6;
  position: relative;
  padding-right: 5px;
}

.cart__saving b {
  font-weight: 500;
  color: #17a32c;
  background: #f6f6f6;
  position: relative;
  padding-left: 5px;
}

.cart__saving:before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  border: 1px dashed rgba(132, 132, 132, 0.55);
}

.cart .basket-item-scu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0 0;
  padding: 0;
  list-style-type: none;
}

.cart .basket-item-scu-item {
  white-space: nowrap;
  padding: 4px 8px;
  background: #f6f6f6;
  border: 1px solid #f6f6f6;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.cart .basket-item-scu-item.selected {
  background: #fff;
  border-color: #222;
  cursor: default;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: #333;
  padding: 30px 0;
  border-radius: 10px 10px 0 0;
}

.footer__logo {
  width: 126px;
  margin-bottom: 40px;
}

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

.footer__row {
  display: flex;
}

.footer__columns {
  display: flex;
  justify-content: space-between;
}

.footer__caption {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 130%;
  opacity: 0.6;
  margin-bottom: 10px;
}

.footer__nav {
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  line-height: 130%;
}

.footer__nav ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.footer__nav a {
  color: #fff;
  text-decoration: none;
}

.footer__nav a:hover {
  text-decoration: underline;
}

.footer__nav li+li {
  margin-top: 10px;
}

.footer__left {
  width: 185px;
  margin-right: 40px;
}

.footer__right {
  flex-grow: 1;
}

.footer__phone {
  margin-top: 40px;
}

.phone__caption {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 110%;
  opacity: 0.4;
  margin-bottom: 6px;
}

.phone__number {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 110%;
}

.phone__number>*:first-child {
  margin-top: 0;
}

.phone__number>*:last-child {
  margin-bottom: 0;
}

.phone__number a {
  color: #fff;
  text-decoration: none;
}

.footer__socialize {
  margin-top: 40px;
}

/* Перенос ряда соцсетей в подвале (2026-08-09, добавлен пятый значок МАКС). */
.footer__socialize .socialize {
  flex-wrap: wrap;
  row-gap: 10px;
}

.footer__socialize .socialize a {
  flex: 0 0 auto;
}

.socialize {
  display: flex;
}

.socialize a {
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.socialize_decreased a {
  width: 34px;
  height: 34px;
}

.socialize a+a {
  margin-left: 8px;
}

.socialize_decreased a+a {
  margin-left: 10px;
}

.vk {
  background-image: url(/local/templates/happy/img/vk.svg);
}

.tg {
  background-image: url(/local/templates/happy/img/tg.svg);
}

.yt {
  background-image: url(/local/templates/happy/img/yt.svg);
}

.wa {
  background-image: url(/local/templates/happy/img/wa.svg);
}

/* МАКС (2026-08-09). Класс сужен до .socialize, потому что просто .max
   слишком общий: в шаблоне уже есть .max-price и модуль .maxma. */
.socialize .max {
  background-image: url(/local/templates/happy/img/max.svg);
  background-size: cover;
}

.footer__rating {
  margin-top: 40px;
}

.rating {
  width: 166px;
  /*	padding: 4px 8px;
	border-radius: 6px;
	border: 1px solid rgba(214, 215, 219, 0.20);
	background: #FFF;*/
}

.rating iframe {
  display: block;
}

.rating img {
  display: block;
  width: 100%;
  height: auto;
}

.footer__bottom {
  margin-top: 50px;
  display: flex;
  align-items: flex-end;
}

.footer__copyright {
  color: #fff;
  font-size: 13px;
  line-height: 130%;
  opacity: 0.6;
}

.footer__policy {
  margin-left: auto;
  padding-left: 200px;
  flex-shrink: 0;
  color: #fff;
  font-size: 13px;
  line-height: 130%;
  opacity: 0.6;
}

.footer__policy a {
  color: inherit;
  text-decoration: none;
}

.footer__policy a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   AGREEMENT
   ========================================================================== */
.agreement {
  display: none;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 20px;
  z-index: 100;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 12px 0 rgba(85, 85, 85, 0.05);
  padding: 20px;
  width: 410px;
  pointer-events: none;
}

.agreement__button a {
  pointer-events: auto;
}

.agreement.active {
  display: block;
}

.agreement__text {
  color: #222;
  font-size: 16px;
  line-height: 140%;
}

.agreement__button {
  margin-top: 15px;
  color: #222;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
}

.agreement__button a {
  display: block;
  color: #222;
  width: 100%;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid #222;
  padding: 15px;
  text-align: center;
}

/* ==========================================================================
   ORDER
   ========================================================================== */
.order {
  margin: 20px 0 80px;
}

.order__info-line {
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
}

.order__info-line strong {
  font-weight: 600;
}

.order__info-line+.order__info-line {
  margin-top: 10px;
}

.bx-step-completed .order__item+.order__item {
  margin-top: 10px;
}

.order__back {
  color: #a7a7a7;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  margin-bottom: 20px;
}

.order__back a {
  color: inherit;
  padding-left: 20px;
  position: relative;
  text-decoration: none;
}

.order__back a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 14px;
  height: 10px;
  background: url(/local/templates/happy/img/order-back.svg) no-repeat;
}

.order__columns {
  display: flex;
}

.order__left {
  flex-grow: 1;
}

.order__right {
  margin-left: 20px;
  flex-shrink: 0;
  width: 388px;
}

.order .title {
  margin-bottom: 20px;
}

.order__required {
  color: rgba(34, 34, 34, 0.6);
  font-size: 13px;
  font-weight: 500;
  line-height: 130%;
  margin-bottom: 20px;
}

.order__required span {
  color: #f00;
}

.order__caption {
  color: #222;
  font-size: 24px;
  font-weight: 600;
  line-height: 130%;
}

.order__caption-wrapper {
  margin-bottom: 20px;
  order: 1;
}

.order__content {
  order: 2;
}

.order__subcaption {
  color: #222;
  font-size: 20px;
  font-weight: 600;
  line-height: 130%;
  order: 1;
  width: 100%;
}

.order .form-group {
  width: 100%;
}

.bx-step-completed .order__subcaption {
  display: none;
}

.order__check {
  display: flex;
  color: #111;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  user-select: none;
  margin-bottom: 18px;
}

.order__check label {
  display: flex;
  cursor: pointer;
}

.order__check input {
  display: none;
}

.order__check i {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(34, 34, 34, 0.6);
  margin-right: 7px;
  margin-top: 2px;
  position: relative;
  transition: all 0.2s ease-out;
}

.order__check i:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #222;
  opacity: 0;
  transition: all 0.2s ease-out;
}

.order__check input:checked+i {
  border-color: rgba(34, 34, 34, 1);
}

.order__check input:checked+i:after {
  opacity: 1;
}

.order__label {
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  margin-bottom: 3px;
  opacity: 0.6;
}

.order__label span {
  color: #f00;
}

.order__input {
  display: block;
  width: 100%;
  height: 45px;
  border-radius: 6px;
  border: 1px solid #ececec;
  background: #fff;
  padding: 0 20px;
  color: #222;
  font-size: 15px;
  font-weight: 500;
  line-height: 130%;
  outline: none;
}

.order__items {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
  align-items: flex-start;
}

.order__item {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.bx-step-completed .order__item {
  display: block;
}

.order__items_radio {
  gap: 10px;
}

.order__field+.order__field {
  margin-top: 20px;
}

.order__row {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
}

.order__textarea {
  display: block;
  width: 100%;
  height: 140px;
  border-radius: 6px;
  border: 1px solid #ececec;
  background: #fff;
  padding: 10px 20px;
  color: #222;
  font-size: 15px;
  font-weight: 500;
  line-height: 130%;
  outline: none;
  resize: none;
}

.order__item_full {
  grid-column: span 2;
}

.order__step {
  display: none;
  flex-direction: column;
}

.order__step.bx-selected,
.order__step.bx-step-completed {
  display: flex;
}

.order__step+.order__step {
  margin-top: 50px;
}

.order__next {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  order: 3;
}

.order__btn {
  display: inline-block;
  padding: 14px 25px;
  border-radius: 6px;
  background: #222;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  text-decoration: none;
  transition: all 0.2s ease-out;
  min-width: 151px;
  text-align: center;
}

.order__btn_outline {
  padding: 13px 24px;
  background: #fff;
  color: #222;
  border: 1px solid #222;
}

.order__btn:hover {
  background: #2f2f2f;
  color: #fff;
}

.bx-selected .order__editstep {
  display: none;
}

.order__radio-wrapper {
  padding: 14px;
  border-radius: 6px;
  border: 1px solid #ececec;
  background: #fff;
}

.order__radio {
  display: flex;
  color: #111;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  user-select: none;
  margin-bottom: 18px;
}

.order__radio label {
  display: flex;
  cursor: pointer;
}

.order__radio input {
  display: none;
}

.order_opacity {
  opacity: 0.6;
}

.order__radio i {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #222;
  margin-right: 10px;
  position: relative;
}

.order__radio i:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #222;
  opacity: 0;
  transition: all 0.2s ease-out;
}

.order__radio input:checked+i:after {
  opacity: 1;
}

.order__radio b {
  font-weight: 600;
  display: block;
}

.order__radio-description {
  margin-top: 15px;
  color: #111;
  font-size: 14px;
  line-height: 140%;
}

.order__checks .order__check {
  margin-bottom: 0;
  font-weight: 400;
  flex-direction: column;
}

.order__checks .order__check+.order__check {
  margin-top: 15px;
}

.order__checks .order__check i {
  background: #f8f8f8;
  border-color: rgba(132, 132, 132, 0.55);
}

.order__check div {
  margin-top: 6px;
  color: #111;
  font-size: 14px;
  line-height: 140%;
  opacity: 0.6;
}

.order__form {
  padding: 15px;
  border-radius: 10px;
  background: #f6f6f6;
}

.order__wrapper-button {
  margin-top: 20px;
}

.order__button {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  padding: 16px 20px;
  border-radius: 6px;
  background: #222;
  text-align: center;
  border: none;
  text-decoration: none;
  transition: all 0.2s ease-out;
}

.order__button:hover {
  background: #2f2f2f;
}

.order__button_disabled {
  background: #c0c0c0;
  pointer-events: none;
}

.order__param {
  display: flex;
  justify-content: space-between;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  position: relative;
}

.order__param_total {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}

.order__param+.order__param {
  margin-top: 8px;
}

.order__param span {
  background: #f6f6f6;
  position: relative;
  padding-right: 5px;
}

.order__param b {
  font-weight: 500;
  background: #f6f6f6;
  position: relative;
  padding-left: 5px;
}

.order__param_total b {
  font-weight: 600;
}

.order__param_green b {
  color: #17a32c;
}

.order__param:before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  border: 1px dashed rgba(132, 132, 132, 0.55);
}

.order__param_total:before {
  display: none;
}

.order__agree {
  color: #222;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 130%;
  margin-top: 10px;
}

.order__agree a {
  color: inherit;
  text-underline-offset: 1px;
  text-decoration-thickness: 1px;
  transition: all 0.2s ease-out;
}

.order__agree a:hover {
  text-decoration-color: transparent;
}

.order__info {
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
}

.order__info ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.order__info ul li+li {
  margin-top: 10px;
}

.order #bx-soa-basket {
  display: none;
}

.order [data-group-id="7"] {
  display: none;
}

.order [data-group-id="6"] .bx-soa-custom-label {
  display: none;
}

.order #bx-soa-orderSave {
  display: none;
}

.order #bx-soa-total-mobile {
  display: none;
}

.order #bx-soa-region {
  display: none;
}

.order div[data-property-id-row="6"] {
  display: none;
}

.order div[data-property-id-row="5"] {
  display: none;
}

.bx-step-completed .order__item {
  margin-bottom: 0;
}

.order div[data-property-id-row="8"] {
  order: 2;
}

.order div[data-property-id-row="1"] {
  order: 3;
}

.order div[data-property-id-row="2"] {
  order: 4;
}

.order div[data-property-id-row="3"] {
  order: 5;
}

.order div[data-property-id-row="27"] {
  order: 2;
}

.order div[data-property-id-row="10"] {
  order: 3;
}

.order div[data-property-id-row="12"] {
  order: 4;
}

.order div[data-property-id-row="11"] {
  order: 2;
}

.order div[data-property-id-row="14"] {
  order: 3;
}

.order div[data-property-id-row="9"] {
  order: 2;
}

.order div[data-property-id-row="7"] {
  order: 3;
}

.order div[data-property-id-row="13"] {
  order: 2;
}

.order div[data-property-id-row="31"] {
  order: 2;
}

.order div[data-property-id-row="28"] {
  order: 4;
  width: calc(33.333% - 15px);
}

.order div[data-property-id-row="29"] {
  order: 5;
  width: calc(33.333% - 15px);
}

.order div[data-property-id-row="30"] {
  order: 6;
  width: calc(33.333% - 15px);
}

.bx-soa-customer-field[data-property-id-row="9"],
.bx-soa-customer-field[data-property-id-row="8"],
.bx-soa-customer-field[data-property-id-row="27"] {
  display: flex;
}

.bx-soa-customer-field[data-property-id-row="9"] .soa-property-container,
.bx-soa-customer-field[data-property-id-row="8"] .soa-property-container,
.bx-soa-customer-field[data-property-id-row="27"] .soa-property-container {
  order: 1;
  margin-right: 7px;
}

.bx-soa-customer-field[data-property-id-row="9"] .bx-soa-custom-label,
.bx-soa-customer-field[data-property-id-row="8"] .bx-soa-custom-label,
.bx-soa-customer-field[data-property-id-row="27"] .bx-soa-custom-label {
  order: 2;
}

.bx-soa-customer-field[data-property-id-row="9"] input[type="checkbox"],
.bx-soa-customer-field[data-property-id-row="8"] input[type="checkbox"],
.bx-soa-customer-field[data-property-id-row="CUSTOM_CHECKBOX"] input[type="checkbox"],
.bx-soa-customer-field[data-property-id-row="27"] input[type="checkbox"] {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(34, 34, 34, 0.6);
  position: relative;
  transition: all 0.2s ease-out;
}

.bx-soa-customer-field[data-property-id-row="9"] input[type="checkbox"]:checked,
.bx-soa-customer-field[data-property-id-row="8"] input[type="checkbox"]:checked,
.bx-soa-customer-field[data-property-id-row="CUSTOM_CHECKBOX"] input[type="checkbox"]:checked,
.bx-soa-customer-field[data-property-id-row="27"] input[type="checkbox"]:checked {
  border-color: #222;
  background: #222 url(/local/templates/happy/img/icon-checkbox.svg) no-repeat center;
  background-size: 10px 10px;
}

.order__item .bx-soa-customer-field[data-property-id-row="CUSTOM_CHECKBOX"] label {
  margin-bottom: 0;
}

.bx-soa-customer-field[data-property-id-row="CUSTOM_CHECKBOX"] {
  order: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.order div[data-property-id-row="14"] select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.order__selected-item {
  display: none;
}

.order .bx-soa-pp-company-block .checkbox input {
  margin-right: 7px;
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(34, 34, 34, 0.6);
  position: relative;
  transition: all 0.2s ease-out;
}

.order .bx-soa-pp-company-block .checkbox input:checked {
  border-color: #222;
  background: #222 url(/local/templates/happy/img/icon-checkbox.svg) no-repeat center;
  background-size: 10px 10px;
}

.order .bx-soa-pp-company-block .checkbox label {
  display: flex;
  flex-wrap: wrap;
}

.order .bx-soa-service-small {
  width: 100%;
  margin-top: 6px;
  color: #111;
  font-size: 14px;
  line-height: 140%;
  opacity: 0.6;
}

.order .bx-soa-pp-company-block .checkbox+.checkbox {
  margin-top: 15px;
}

.order .bx-soa-pp-company>*:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   SUCCESS
   ========================================================================== */
.success {
  text-align: center;
  margin: 40px 0 30px;
}

.success .title {
  margin-bottom: 20px;
}

.success__text {
  color: #222;
  font-size: 20px;
  font-weight: 500;
  line-height: 130%;
}

/* ==========================================================================
   ORD
   ========================================================================== */
.ord {
  margin: 30px 0 80px;
}

.ord__columns {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}

.ord__title {
  color: #222;
  font-size: 24px;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 30px;
}

.ord__text {
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
}

.ord__text ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.ord__text ul li+li {
  margin-top: 10px;
}

.ord__items {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
}

.ord__img {
  margin-bottom: 10px;
}

.ord__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.ord__name {
  color: #222;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
}

.ord__name a {
  color: inherit;
  text-decoration: none;
}

.ord__sum {
  margin-top: 10px;
  color: #222;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
}

.ord__quantity {
  color: #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  opacity: 0.3;
}

.ord__links {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ord__link {
  text-align: center;
  display: inline-block;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 6px;
  background: #222;
  transition: all 0.2s ease-out;
}

.ord__link_outline {
  padding: 13px 19px;
  background: #fff;
  border: 1px solid #222;
  color: #222;
}

.ord__link:hover {
  background: #2f2f2f;
  color: #fff;
}

/* ==========================================================================
   POPUPS
   ========================================================================== */
.popups {
  display: none;
}

.popup {
  max-width: 455px;
  margin: 54px auto;
  border-radius: 10px;
  background: #f6f6f6;
  padding: 30px 48px;
  position: relative;
}

.popup_thanks {
  max-width: 465px;
}

.global-ajax-wrapper {
  position: relative;
  max-width: 580px;
  margin: 30px auto;
  background: #fff;
  padding: 30px;
}

.popup__close,
.global-ajax-wrapper button.mfp-close,
.popup button.mfp-close {
  cursor: pointer;
  position: absolute;
  top: -34px;
  right: -34px;
  width: 18px;
  height: 18px;
  background: url(/local/templates/happy/img/popup-close.svg) no-repeat;
  font-size: 0;
  opacity: 1;
  transition: all 0.2s ease-out;
}

.popup__close:hover,
.global-ajax-wrapper button.mfp-close:hover,
.popup button.mfp-close:hover {
  opacity: 0.8;
}

.popup .title {
  max-width: 310px;
  margin: 0 auto 20px;
  text-align: center;
}

.popup__text {
  text-align: center;
  color: #222;
  font-size: 18px;
  font-weight: 500;
  line-height: 130%;
  margin-bottom: 20px;
}

.popup__input {
  display: block;
  width: 100%;
  height: 50px;
  border-radius: 6px;
  border: 1px solid #d6d7db;
  background: rgba(255, 255, 255, 0.7);
  color: #222;
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  margin-bottom: 8px;
  outline: none;
  transition: all 0.2s ease-out;
}

.popup__input.error {
  border-color: #f00;
}

.popup__submit {
  display: block;
  width: 100%;
  height: 50px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  border-radius: 6px;
  background: #222;
  border: none;
  transition: all 0.2s ease-out;
}

.popup__submit:hover {
  background: #2f2f2f;
}

.popup__agree {
  margin-top: 8px;
  color: #222;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  line-height: 130%;
}

.popup__agree a {
  color: #222;
}

.popup__img {
  margin: 14px auto 0;
  max-width: 304px;
}

.popup__img img {
  display: block;
  width: 100%;
  height: auto;
}

.popup .checkout-basket-list-items.checkout-table {
  display: none;
}

.popup .checkout-container .form-group:nth-child(2),
.popup .checkout-container .form-group:nth-child(3),
.popup .checkout-container .form-group:nth-child(4),
.popup .checkout-container .form-group:nth-child(5),
.popup .checkout-container .form-group:nth-child(7),
.popup .checkout-container .form-group:nth-child(8),
.popup .checkout-container .form-group:nth-child(10),
.popup .checkout-container .form-group:nth-child(11),
.popup .checkout-container .form-group:nth-child(12),
.popup .checkout-container .form-group:nth-child(13) {
  display: none;
}

.popup .checkout-basket-title {
  font-size: 0;
  color: #222;
  font-weight: 600;
  line-height: 130%;
  margin: 0 auto 40px;
  text-align: center;
  padding-top: 20px;
}

.popup .checkout-basket-title:before {
  content: "Купить в один клик";
  font-size: 36px;
  display: block;
}

.popup .asterisk-item {
  display: none;
}

.popup .form-control {
  display: block;
  width: 100%;
  height: 50px;
  border-radius: 6px;
  border: 1px solid #d6d7db;
  background: rgba(255, 255, 255, 0.7);
  color: #222;
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  margin-bottom: 8px;
  outline: none;
  transition: all 0.2s ease-out;
}

.popup .checkout-btn-container {
  padding: 0;
}

.popup .checkout-btn-container .btn {
  display: block;
  width: 100%;
  height: 50px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  border-radius: 6px;
  background: #222;
  border: none;
  transition: all 0.2s ease-out;
}

.popup .checkout-order-status-successful svg {
  display: none;
}

.popup .checkout-order-status-btn-container {
  display: none;
}

/* ==========================================================================
   LIST
   ========================================================================== */
.title-search-result__popup {
  background: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
  padding: 13px 0;
  position: relative;
  z-index: 5;
}

.title-search-result__item {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  text-decoration: none;
}

.title-search-result__image {
  width: 30px;
  flex-shrink: 0;
  margin-right: 10px;
}

.title-search-result__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.title-search-result__name {
  color: #222;
  font-size: 14px;
  line-height: 130%;
}

.title-search-result__category {
  color: #222;
  font-size: 14px;
  font-weight: 600;
  line-height: 130%;
  margin-top: 12px;
}

.title-search-result__price {
  color: #222;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  margin-top: 12px;
}

/* ==========================================================================
   ARTICLES
   ========================================================================== */
.articles__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px 20px;
}

.articles__item {
  display: block;
  text-decoration: none;
  transition: all 0.2s ease-out;
}

.articles__item:hover {
  opacity: 0.9;
}

.articles__img {
  margin-bottom: 12px;
}

.articles__img img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 6px;
}

.articles__name {
  color: #222;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
}

.articles__date {
  color: #222;
  font-size: 14px;
  line-height: 130%;
  margin-top: 12px;
}

/* ==========================================================================
   PERSONAL
   ========================================================================== */
.personal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px 20px;
}

.personal__icon {
  margin-bottom: 12px;
}

.personal__name {
  font-size: 17px;
  color: #222;
  line-height: 130%;
  text-transform: none;
}

.personal__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 150px;
  border: 1px solid #f2f2f2;
  background: #fff;
  text-decoration: none;
}

.personal__item .maxma {
  margin: 0;
}

.personal__item .svg.colored:not(.svg-inline-icon) * {
  fill: #222;
}

.personal__item .maxma-basket-bonus__bonus-amount-container {
  color: #222;
}

.personal__item .maxma-basket-bonus__bonus-logo circle {
  fill: #222;
}

/* ==========================================================================
   PROFILE
   ========================================================================== */
.profile {}

.profile .border_block {
  padding: 30px;
  border: 1px solid #f2f2f2;
  position: relative;
}

.profile .form-control+.form-control {
  margin-top: 20px;
}

.profile .line-block.form_footer__bottom {
  display: flex;
  align-items: center;
}

.profile .line-block__item+.line-block__item {
  margin-left: 20px;
}

.profile .required-fields-note {}

.profile .but-r {
  margin-top: 20px;
}

.profile .but-r button {
  display: inline-block;
  padding: 14px 25px;
  border-radius: 6px;
  background: #222;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  text-decoration: none;
  transition: all 0.2s ease-out;
  min-width: 151px;
  text-align: center;
  border: none;
}

.profile .but-r button:hover {
  background: #2f2f2f;
  color: #fff;
}

.profile .wrap_md {
  display: flex;
  align-items: center;
}

.profile .iblock.label_block {
  display: flex;
  flex-direction: column;
  width: 40%;
  flex-shrink: 0;
  margin-right: 20px;
}

.profile .iblock.text_block {
  color: #111;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
}

.profile .iblock.label_block label {
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  margin-bottom: 3px;
  opacity: 0.6;
}

.profile input[type="tel"],
.profile input[type="password"],
.profile input[type="text"] {
  display: block;
  width: 100%;
  height: 45px;
  border-radius: 6px;
  border: 1px solid #d6d7db;
  background: rgba(255, 255, 255, 0.7);
  color: #222;
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  padding: 0 20px;
  outline: none;
}

.profile .soc-avt.bottom-form {
  margin-top: 30px;
}

.profile .star {
  color: #f00;
}

/* ==========================================================================
   AUTH
   ========================================================================== */
.auth {}

.form .tabs.tabs--compact .nav {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px 20px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: #222;
  line-height: 130%;
  margin-bottom: 20px;
}

.form .tabs.tabs--compact .nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.form .tabs.tabs--compact .nav li.active a {
  border-color: #222;
}

.form .form_body .alert.alert-danger.compact {
  display: none;
}

.form .phone_or_login+.form-control {
  display: none;
}

.form .tab-content>.tab-pane {
  display: none;
}

.form .tab-content>.active {
  display: block;
}

.form .form_footer .block {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form {
  max-width: 560px;
}

.form .form-control {
  display: flex;
  flex-direction: column;
}

.form .form-control+.form-control {
  margin-top: 20px;
}

.form .form-control label {
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  margin-bottom: 3px;
  opacity: 0.6;
}

.form .star {
  color: #f00;
}

.form .form-control input[type="text"],
.form .form-control input[type="tel"],
.form .form-control input[type="email"],
.form .form-control input[type="password"] {
  display: block;
  width: 100%;
  height: 45px;
  border-radius: 6px;
  border: 1px solid #ececec;
  background: #fff;
  padding: 0 20px;
  color: #222;
  font-size: 15px;
  font-weight: 500;
  line-height: 130%;
  outline: none;
}

.top-text {
  margin-bottom: 20px;
}

.form .form_footer {
  margin-top: 20px;
}

.form .line-block__item+.line-block__item {
  margin-top: 20px;
}

.form .buttons {
  margin-top: 20px;
}

.form .line-block__item.width100 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form .btn.btn-default.btn-lg {
  border-radius: 6px;
  background: #222;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  transition: all 0.2s ease-out;
  border: none;
}

.form .btn.btn-default.btn-lg.hidden {
  display: none;
}

.form .btn.btn-transparent-border-color.btn-lg.pull-right.register {
  border-radius: 6px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 29px;
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  transition: all 0.2s ease-out;
  border: 1px solid #222;
  text-decoration: none;
}

.form .btn.btn-default.btn-lg:hover,
.form .btn.btn-transparent-border-color.btn-lg.pull-right.register:hover {
  color: #fff;
  background: #2f2f2f;
}

.form .prompt.remember.onoff {
  display: flex;
}

.form .prompt.remember.onoff input[type="checkbox"] {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(34, 34, 34, 0.6);
  position: relative;
  transition: all 0.2s ease-out;
  margin-right: 10px;
}

.form .prompt.remember.onoff input[type="checkbox"]:checked {
  border-color: #222;
  background: #222 url(/local/templates/happy/img/icon-checkbox.svg) no-repeat center;
  background-size: 10px 10px;
}

.form .prompt.remember.onoff label {
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  opacity: 0.6;
}

.form .forgot {
  color: #222;
  font-size: 13px;
}

.form .text-block {
  font-size: 13px;
  color: #222;
  line-height: 130%;
  margin-top: 4px;
}

.form .form-control.captcha-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 20px;
}

.form .form-control.captcha-row label {
  width: 100%;
}

.form .form-control.captcha-row .captcha_input {
  order: 1;
  width: 50%;
  padding-right: 30px;
}

.form .form-control.captcha-row .captcha_image {
  order: 2;
  display: flex;
  justify-content: flex-end;
  width: 50%;
  align-items: center;
}

.form .captcha_reload {
  width: 25px;
  height: 25px;
  background: #222;
  border-radius: 50%;
  font-size: 0;
  margin-left: 10px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}

.form .captcha_reload:after {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0) url(/local/templates/happy/img/icons_wish.png) repeat scroll -67px -82px;
  height: 13px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 15px;
}

.form .form_footer__bottom {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form .form_footer__bottom .line-block__item+.line-block__item {
  margin-top: 0;
}

.form .licence_block.label_block.onoff {
  display: flex;
}

.form .licence_block.label_block.onoff input[type="checkbox"] {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(34, 34, 34, 0.6);
  position: relative;
  transition: all 0.2s ease-out;
  margin-right: 10px;
}

.form .licence_block.label_block.onoff input[type="checkbox"]:checked {
  border-color: #222;
  background: #222 url(/local/templates/happy/img/icon-checkbox.svg) no-repeat center;
  background-size: 10px 10px;
}

.form .licence_block.label_block.onoff label {
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  opacity: 0.6;
}

.form .licence_block.label_block.onoff label a {
  color: inherit;
}

#wrap_ajax_auth.form .form_head h2 {
  margin-top: 0;
}

.form .form-control {
  position: relative;
}

.form .form-control label.error {
  color: #f00;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 12px;
  top: 2px;
}

/* ==========================================================================
   SEARCH
   ========================================================================== */
.search {}

.search__row {
  display: flex;
}

.search__row .input.input_without-placeholder {
  flex-grow: 1;
}

.search__row .input input {
  display: block;
  width: 100%;
  height: 43px;
  border-radius: 6px 0 0 6px;
  border: 1px solid #ececec;
  background: #fff;
  padding: 0 15px;
  color: #222;
  font-size: 15px;
  font-weight: 500;
  line-height: 130%;
  outline: none;
}

.search__row .button {
  display: inline-block;
  padding: 10px 30px;
  border-radius: 0 6px 6px 0;
  background: #222;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 130%;
  text-decoration: none;
  transition: all 0.2s ease-out;
  text-align: center;
  border: none;
  height: 43px;
}

.arrow_mobile {
  display: none;
}

/* ==========================================================================
   MEDIA
   ========================================================================== */
@media only screen and (max-width: 1339.98px) {
  .owl-prev {
    left: -34px;
  }

  .owl-next {
    right: -34px;
  }
}

@media only screen and (max-width: 1279.98px) {
  .container {
    width: 960px;
  }

  .header__search {
    width: 240px;
  }

  .header__button {
    font-size: 0;
    padding: 0;
    height: 48px;
    width: 48px;
  }

  .header__button:before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .header__ratings {
    display: none;
  }

  .footer__left {
    margin-right: 20px;
  }

  .promotion_orange .promotion__img {
    margin-left: 0;
    margin-right: 0;
  }

  .promotion__caption {
    margin-bottom: 13px;
  }

  .promotion__img {
    margin-bottom: 15px;
  }

  .grab__img {
    width: 250px;
  }

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

  .advantages__right {
    width: 440px;
  }

  .stock__item {
    padding-left: 15px;
    padding-right: 15px;
  }

  .grip__block:after {
    right: 0;
  }

  .grip__block {
    padding: 20px;
  }

  .telegram__left {
    width: 330px;
  }

  .contacts__map img {
    height: 299px;
  }

  .contacts__map iframe,
  .contacts__map-canvas {
    height: 299px;
  }

  .mode .title {
    white-space: normal;
  }

  .page__right {
    width: 400px;
  }

  .page_about ul {
    grid-template-columns: 1fr;
  }

  .products {
    grid-template-columns: repeat(3, 1fr);
  }

  .card__left {
    width: 380px;
  }

  .card__previews {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  .card__previews a {
    width: auto;
  }

  .card__gifts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .card__gift {
    width: auto;
  }

  .card__bonus {
    margin-top: 10px;
  }

  .cart__right {
    width: 320px;
  }

  .order__right {
    width: 320px;
  }

  .columns__right {
    width: 650px;
  }

  .product-item-image-wrapper img {
    height: 280px;
  }
}

@media only screen and (max-width: 991.98px) {
  * {
    -webkit-tap-highlight-color: transparent;
  }

  .arrow_mobile {
    display: block;
  }

  .container {
    width: 720px;
  }

  .arrow_open {
    display: none;
  }

  .top {
    display: none;
  }

  .header {
    position: fixed;
    left: -100%;
    width: 100%;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 10;
    overflow-y: auto;
    border-radius: 0;
  }

  .header.active {
    left: 0;
  }

  .header__top .header__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .header__middle .header__row {
    flex-wrap: wrap;
  }

  .header {
    height: auto;
  }

  .header__catalog {
    width: 100%;
  }

  .header__button {
    margin-right: 0;
    width: 100%;
    font-size: 16px;
    display: flex;
    align-items: center;
    height: auto;
    padding: 13px 17px;
    order: 2;
    margin-top: 20px;
  }

  .header__button:before {
    position: static;
    flex-shrink: 0;
    transform: translate(0, 0);
    margin-right: 10px;
  }

  .header .header__row {
    height: auto;
  }

  .header__middle {
    order: 1;
    padding-top: 10px;
  }

  .header__top {
    order: 2;
    background: none;
    margin-top: 4px;
  }

  .header_catalog .header__top {
    display: none;
  }

  .header_catalog .header__bottom {
    border-top: none;
    border-radius: 0;
    box-shadow: none;
  }

  .header_catalog .header__catalog {
    display: none;
  }

  .header__menu {
    order: 1;
    width: 100%;
    padding-bottom: 14px;
    position: relative;
  }

  .header__menu:after {
    content: "";
    position: absolute;
    left: -16px;
    bottom: 0;
    right: -16px;
    height: 1px;
    background: #ebebeb;
  }

  .header__phone {
    order: 2;
    margin-top: 30px;
  }

  .header__city {
    order: 3;
    margin-top: 19px;
  }

  .header__ratings {
    order: 4;
    flex-direction: column;
    display: flex;
    margin-top: 20px;
  }

  .header__ratings>*+* {
    margin-left: 0;
    margin-top: 16px;
  }

  .header__bottom {
    order: 3;
    display: none;
    margin-top: 20px;
  }

  .header_catalog .header__bottom {
    display: block;
  }

  .header__nav ul {
    display: block;
    font-weight: 500;
  }

  .header__nav ul li {
    border-bottom: 1px solid #ebebeb;
  }

  .header__nav a {
    height: auto;
    padding: 16px 0;
    line-height: 110%;
  }

  .header__nav ul li.parent>a {
    padding-right: 20px;
    position: relative;
  }

  .header__nav ul li.parent>a:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    background: url(/local/templates/happy/img/parent.svg) no-repeat;
    width: 7px;
    height: 17px;
    display: none;
  }

  .header__nav ul li.parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header__logo {
    width: 175px;
  }

  .header__btns {
    display: flex;
  }

  .header__back {
    display: flex;
  }

  .header__search {
    display: none;
    order: 1;
    margin-bottom: -2px;
  }

  .header__search input[type="text"] {
    height: 40px;
    font-size: 13px;
    background-position: 10px center;
  }

  .header__search-close {
    display: block;
  }

  .header__catalog {
    flex-direction: column;
  }

  .header_search .header__logo {
    display: none;
  }

  .header_search .header__search {
    display: flex;
  }

  .header_search .header__btns {
    display: none;
  }

  .header__links {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    opacity: 1;
    visibility: visible;
    height: 71px;
    padding: 0 16px;
    justify-content: space-between;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.11);
    pointer-events: none;
  }

  .header__links a {
    pointer-events: auto;
  }

  .header__link {
    height: 39px;
  }

  .header.active .header__links {
    opacity: 0;
    visibility: hidden;
  }

  body.keyboard-open .header__links,
  body.keyboard-open .agreement {
    display: none;
  }

  .header-mobile {
    display: block;
  }

  .header__menu ul {
    display: block;
    font-size: 16px;
  }

  .header__menu ul li+li {
    margin-left: 0;
    border-top: 1px solid #ebebeb;
  }

  .header__menu ul a {
    display: block;
    padding: 16px 0;
  }

  .header__link_favorite:before {
    width: 20px;
    height: 20px;
  }

  .header__link_cart:before {
    width: 20px;
    height: 20px;
  }

  .header__link_bonus:before {
    width: 20px;
    height: 20px;
  }

  .header__link_account:before {
    width: 20px;
    height: 20px;
  }

  .header__link span {
    font-size: 10px;
  }

  .header__link {
    color: rgba(34, 34, 34, 1);
    width: 63px;
    font-size: 11px;
    opacity: 0.5;
  }

  .header__link.active {
    opacity: 1;
  }

  .header__links>*+* {
    margin: 0;
  }

  .header__link_home {
    display: flex;
  }

  .header__link_catalog {
    display: flex;
  }

  .top__bg:before,
  .top__bg:after {
    display: none;
  }

  .footer__row {
    display: block;
  }

  .footer__left {
    width: auto;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
  }

  .footer__logo {
    margin: 0;
  }

  .footer__phone {
    margin: 0;
  }

  .footer__socialize {
    margin: 0;
  }

  .footer__rating {
    margin: 0;
  }

  .footer__nav {
    font-size: 15px;
  }

  .footer__caption {
    font-size: 15px;
  }

  .footer__bottom {
    margin-top: 40px;
    display: block;
  }

  .footer__policy {
    padding-left: 0;
    margin-top: 10px;
  }

  .advantages__columns {
    display: block;
  }

  .advantages__right {
    width: auto;
    margin-left: 0;
    margin-top: 20px;
  }

  .showcase__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px 10px;
  }

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

  .grab__img {
    width: 170px;
  }

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

  .business__columns {
    display: block;
  }

  .business__left {
    margin-top: 20px;
  }

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

  .mode__columns {
    display: block;
  }

  .mode__left {
    margin-top: 20px;
  }

  .grip {
    text-align: center;
  }

  .grip__block:after {
    display: block;
    position: static;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }

  .grip__block {
    padding: 40px 80px 0;
  }

  .grip .title {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .stock__item {
    padding: 30px;
  }

  .contacts__columns {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .contacts__map iframe,
  .contacts__map img,
  .contacts__map-canvas {
    height: 283px;
  }

  .footer {
    padding-bottom: 100px;
  }

  .telegram__columns {
    display: block;
  }

  .telegram__right {
    margin-top: 16px;
  }

  .telegram__left {
    width: auto;
    margin-right: 0;
  }

  .telegram__left .telegram__button {
    display: none;
  }

  .telegram__right .telegram__button {
    margin-top: 16px;
    display: flex;
    justify-content: center;
  }

  .page__columns {
    display: block;
  }

  .page__right {
    width: auto;
    margin-top: 16px;
    margin-left: 0;
  }

  .edges__items {
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
  }

  .menu+.filter {
    margin-top: 0;
  }

  .menu+.bx-filter {
    margin-top: 0;
  }

  .filter {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 10;
    border: none;
    padding: 16px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
  }

  .filter.active {
    opacity: 1;
    visibility: visible;
  }

  .bx-filter {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 10;
    border: none;
    padding: 16px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
  }

  .bx-filter.active {
    opacity: 1;
    visibility: visible;
  }

  .filter__close {
    position: absolute;
    top: 20px;
    right: 16px;
    width: 14px;
    height: 14px;
    background: url(/local/templates/happy/img/close-filter.svg) no-repeat;
  }

  .bx-filter-close {
    position: absolute;
    top: 20px;
    right: 16px;
    width: 14px;
    height: 14px;
    background: url(/local/templates/happy/img/close-filter.svg) no-repeat;
  }

  .filter__title {
    text-align: center;
    margin-bottom: 30px;
  }

  .columns__row {
    display: block;
  }

  .columns__left {
    width: auto;
    margin-right: 0;
  }

  .sort {
    position: static;
  }

  .products-control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .menu__title {
    display: none;
  }

  .menu {
    border: none;
    padding: 0;
    border-radius: 0;
    overflow-y: auto;
  }

  .menu::-webkit-scrollbar {
    width: 0;
  }

  .menu {
    -ms-overflow-style: none;
  }

  .menu {
    overflow: -moz-scrollbars-none;
  }

  .menu__list ul {
    display: flex;
    gap: 5px;
  }

  .menu__list li+li {
    margin-top: 0;
  }

  .menu__list a {
    padding: 6px 12px;
    display: block;
    border-radius: 6px;
    background: #f6f6f6;
    white-space: nowrap;
  }

  .menu__list a:hover {
    text-decoration-color: transparent;
  }

  .menu__list a:hover:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 1px solid #222;
    border-radius: 6px;
  }

  .menu__list a:before {
    display: none;
  }

  .products {
    padding-top: 0;
  }

  .columns__right {
    margin-top: 15px;
    width: auto;
  }

  .categories+.subcategories {
    margin-top: 15px;
  }

  .subcategories {
    margin-bottom: 15px;
  }

  .subcategories__row a {
    font-size: 13px;
  }

  .subcategories__row {
    gap: 6px;
  }

  .menu__list {
    font-size: 13px;
    font-weight: 500;
  }

  .select__value {
    font-size: 13px;
    height: 36px;
  }

  .filter-button {
    display: block;
  }

  .subcategories__row {
    height: 72px;
    overflow: hidden;
  }

  .subcategories__more {
    display: block;
  }

  .card__columns {
    display: block;
  }

  .card__left {
    width: auto;
    margin-right: 0;
  }

  .card__right {
    margin-top: 20px;
  }

  .card__bonus {
    margin-top: 0;
  }

  .card__previews {
    display: none;
  }

  .cart__columns {
    display: block;
  }

  .cart__right {
    width: auto;
    margin-left: 0;
    margin-top: 20px;
  }

  .order__columns {
    display: block;
  }

  .order__right {
    width: auto;
    margin-left: 0;
    margin-top: 50px;
  }

  .ord__columns {
    display: block;
  }

  .ord__right {
    margin-top: 20px;
  }

  .success {
    text-align: left;
  }

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

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

  .socialize {
    order: 3;
    margin-top: 10px;
  }
}

@media only screen and (max-width: 767.98px) {
  .container {
    width: 540px;
    padding: 0 16px;
  }

  .footer__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 10px;
  }

  .footer__left {
    flex-wrap: wrap;
  }

  .footer__logo {
    order: 1;
  }

  .footer__socialize {
    order: 2;
  }

  .footer__phone {
    order: 3;
    width: 50%;
    margin-top: 20px;
  }

  .footer__rating {
    order: 4;
    width: 50%;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .slider__block {
    height: 286px;
    width: 60%;

  }

  div.slider {
    width: 90%;
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
  }

  .slider__title {
    font-size: 26px;
    max-width: 320px;
    color: rgba(34, 34, 34, 1);
  }

  .slider__title a {
    color: rgba(34, 34, 34, 1);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  .slider__title .preview-text-block p {
    color: rgba(34, 34, 34, 1);
  }

  .slider__city .city__value:after {
    width: 14px;
    height: 6px;
    background-size: cover;
    filter: grayscale(1) brightness(1000%);
  }

  .slider__city .city__value {
    padding-right: 20px;
  }

  .slider__city .city__popup {
    top: auto;
    left: -8px;
    bottom: 29px;
    width: 300px;
  }

  .slider__city .city__popup:before {
    display: none;
  }

  .slider__city .city__popup a {
    color: #222;
  }

  .slider .owl-dots {
    bottom: 10px;
  }

  .slider__text {
    font-size: 15px;
    margin-top: 10px;
    max-width: 310px;
    color: black;
  }

  .slider__button {
    margin-top: 10px;
  }

  .slider__button a {
    padding: 10px 20px;
    font-size: 13px;
  }

  .slider__img:before {
    content: "";
    background: #372626;
    position: absolute;
    opacity: 0.2;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .slider__img {
    display: none;
  }

  .slider__img_mobile {
    display: block;
  }

  .owl-prev,
  .owl-next {
    display: none;
  }

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

  .title {
    font-size: 22px;
    line-height: 130%;
  }

  .popup .checkout-basket-title {
    padding-top: 5px;
    margin-bottom: 30px;
  }

  .popup .checkout-basket-title:before {
    font-size: 22px;
  }

  .promotion__caption {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .promotion__description {
    font-size: 13px;
  }

  .promotion__more span {
    font-size: 13px;
    padding: 10px 20px;
  }

  .promotion {
    padding: 10px;
  }

  .promotion_orange .promotion__img {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 0;
  }

  .carousel__row {
    margin-bottom: 14px;
  }

  .more {
    font-size: 13px;
    padding: 4px 18px 5px 10px;
  }

  .more:after {
    width: 5px;
    height: 8px;
    background-size: cover;
    margin-top: -4px;
  }

  .product__name {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .product-item-title {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .product__img {
    margin-bottom: 10px;
  }

  .product-item-image-wrapper {
    margin-bottom: 10px;
  }

  .product__buttons {
    margin-top: 10px;
  }

  .product__price {
    font-size: 15px;
  }

  .product-item-price-container {
    font-size: 15px;
  }

  .product-item-add a {
    font-size: 13px;
    height: 37px;
  }

  .product__add a {
    font-size: 13px;
    height: 37px;
  }

  .product__add a:before {
    width: 15px;
    height: 15px;
    background-size: cover;
  }

  .product-item-add a:before {
    width: 15px;
    height: 15px;
    background-size: cover;
  }

  .product-item-scu-container {
    font-size: 13px;
  }

  .product-item-scu-item-text-container {
    font-size: 13px;
  }

  .carousel .owl-dots {
    display: none;
  }

  .carousel {
    overflow: hidden;
  }

  .carousel .owl-carousel .owl-stage-outer {
    overflow: visible;
  }

  .showcase__all {
    margin-top: 20px;
    font-size: 15px;
  }

  .category {
    height: 125px;
    font-size: 13px;
    background-size: auto 90px;
    padding: 8px;
  }

  .categories {
    margin-bottom: -16px;
  }

  .categories__grid {
    overflow-y: auto;
    display: flex;
    gap: 6px;
    margin-right: -16px;
    margin-left: -16px;
    margin-bottom: -16px;
    padding: 0 16px;
    flex-direction: column;
    flex-wrap: wrap;
    height: 272px;
  }

  .categories__grid::-webkit-scrollbar {
    width: 0;
  }

  .categories__grid {
    -ms-overflow-style: none;
  }

  .categories__grid {
    overflow: -moz-scrollbars-none;
  }

  .categories__grid .category {
    width: calc(33% - 6px);
    flex-shrink: 0;
    min-width: 115px;
  }

  .categories .title {
    margin-bottom: 14px;
  }

  .grab__block {
    padding: 15px 176px 15px 15px;
    text-align: left;
  }

  .grab__button {
    justify-content: flex-start;
  }

  .grab__img {
    left: auto;
    right: 0;
    width: 200px;
  }

  .grab__img+.grab__img {
    display: none;
  }

  .grab__description {
    font-size: 13px;
  }

  .grab .title {
    margin-bottom: 14px;
  }

  .grab__button {
    margin-top: 20px;
  }

  .grab__button a {
    font-size: 13px;
    padding: 10px 20px;
  }

  .advantages__text {
    font-size: 15px;
  }

  .advantages__text ul {
    margin: 10px 0;
  }

  .advantages__caption {
    margin-bottom: 6px;
    padding-bottom: 6px;
  }

  .advantages__description {
    font-size: 13px;
  }

  .advantages__grid {
    gap: 30px 20px;
  }

  .business .title {
    margin-bottom: 16px;
  }

  .business__left {
    margin-top: 16px;
  }

  .business__cover img {
    height: 320px;
    object-fit: cover;
  }

  .stock__item {
    padding: 15px;
  }

  .stock__item .title {
    margin-bottom: 16px;
    max-width: 167px;
  }

  .stock__text {
    font-size: 13px;
    max-width: 167px;
  }

  .stock__more span {
    font-size: 13px;
    padding: 10px 20px;
  }

  .mode .title {
    margin-bottom: 16px;
  }

  .mode__left {
    margin-top: 16px;
  }

  .mode__cover img {
    height: 320px;
    object-fit: cover;
  }

  .grip__block {
    padding: 25px 15px 0;
  }

  .grip__row {
    display: block;
  }

  .grip__input {
    display: block;
    width: 100%;
    text-align: center;
    height: 47px;
    font-size: 13px;
  }

  .grip__submit {
    display: block;
    width: 100%;
    margin: 6px 0 0;
    height: 47px;
    font-size: 13px;
  }

  .grip__agree {
    margin-top: 10px;
  }

  .grip .title {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .grab__text {
    font-size: 15px;
  }

  .telegram .title {
    margin-bottom: 16px;
  }

  .telegram__text {
    font-size: 15px;
  }

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

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

  .contacts__item {
    padding: 15px 15px 15px 45px;
    position: relative;
  }

  .contacts__text {
    font-size: 15px;
  }

  .contacts__item:before {
    position: absolute;
    left: 15px;
    top: 15px;
  }

  .breadcrumbs {
    margin: 16px 0;
  }

  .h1 {
    margin: 16px 0;
  }

  .page {
    font-size: 15px;
  }

  .page_about ul {
    gap: 6px;
    font-size: 15px;
  }

  .edges .title {
    font-size: 36px;
  }

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

  .mention .title {
    margin-bottom: 20px;
  }

  .pagination__more a {
    font-size: 13px;
  }

  .card__buttons {
    position: fixed;
    z-index: 9;
    bottom: 61px;
    left: 0;
    right: 0;
    padding: 12px 16px 22px;
    border-radius: 10px 10px 0 0;
    background: #fff;
    box-shadow: 0 -4px 14px 0 rgba(118, 118, 118, 0.15);
    justify-content: space-between;
    flex-direction: column;
    margin-bottom: 0;
  }

  .card__fixed {
    order: 3;
  }

  .card__auth {
    order: 1;
    margin-bottom: 10px;
    margin-top: 0;
  }

  .card__bonus {
    order: 2;
    margin-bottom: 10px;
    justify-content: center;
  }

  .card__favorite,
  .card__favorite.js-favorite {
    order: 1;
    margin-left: 0;
    margin-right: 8px;
    flex-shrink: 0;
    height: 50px;
    width: 50px;
  }

  .card__add {
    font-size: 14px;
    padding: 0 15px;
    order: 2;
    flex-grow: 1;
    height: 50px;
  }

  .card__fixed div[data-entity="main-button-container"] {
    order: 2;
    flex-grow: 1;
  }

  .card__fixed div[data-entity="main-button-container"] .card__add {
    width: 100%;
  }

  .card__add i {
    margin: 0 auto;
  }

  .link-auth {
    font-size: 13px;
    padding: 0 15px;
    height: 41px;
  }

  .card__bonus {
    font-size: 14px;
    height: 41px;
  }

  .card__bonus:before {
    width: 18px;
    height: 18px;
    background-size: cover;
    margin-right: 9px;
    position: relative;
    top: -1px;
  }

  .card__title {
    font-size: 22px;
    margin-bottom: 16px;
  }

  .card__compound {
    margin-bottom: 16px;
  }

  .card div[id$="skudiv"] {
    margin-bottom: 16px;
  }

  .card__attention {
    margin-bottom: 16px;
  }

  .card__description {
    margin-bottom: 20px;
  }

  .card__caption {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .card__gifts {
    overflow-y: auto;
  }

  .card__gifts::-webkit-scrollbar {
    width: 0;
  }

  .card__gifts {
    -ms-overflow-style: none;
  }

  .card__gifts {
    overflow: -moz-scrollbars-none;
  }

  .card__gift {
    width: 108px;
  }

  .card__tabs {
    overflow-y: auto;
    padding: 0 16px;
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: 5px;
    margin-top: 31px;
  }

  .card__tab {
    font-size: 13px;
  }

  .card__text {
    font-size: 15px;
  }

  .cart__img {
    width: 110px;
    margin-right: 10px;
  }

  .cart__top .cart__flex {
    display: block;
  }

  .cart__name {
    font-size: 13px;
  }

  .cart__price {
    margin-top: 19px;
    font-size: 15px;
  }

  .cart__block {
    display: block;
  }

  .cart__bottom {
    margin-top: 19px;
  }

  .cart__count {
    width: 85px;
    height: 28px;
    padding: 2px;
  }

  .cart__minus {
    width: 24px;
    height: 24px;
    background-color: #fff;
  }

  .cart__plus {
    width: 24px;
    height: 24px;
    background-color: #fff;
  }

  .cart__value {
    font-size: 12px;
  }

  .cart__delete {
    width: 26px;
    height: 26px;
  }

  .cart__favorite {
    width: 26px;
    height: 26px;
  }

  .cart__description {
    font-size: 10px;
    margin-top: 5px;
  }

  .cart__quantity {
    font-size: 12px;
    font-weight: 500;
  }

  .cart__item+.cart__item {
    margin-top: 10px;
  }

  .cart__form {
    background: none;
    padding: 0;
  }

  .cart__form-wrapper .maxma {
    left: 0;
    right: 0;
    top: 60px;
  }

  .cart__saving span,
  .cart__saving b {
    background: #fff;
  }

  .cart__promo-code input {
    font-size: 13px;
    height: 45px;
  }

  .cart__radio {
    font-size: 13px;
  }

  .cart__total {
    font-size: 17px;
  }

  .cart__saving {
    font-size: 13px;
  }

  .cart__info {
    margin-top: 20px;
  }

  .cart__buttons {
    margin-top: 15px;
  }

  .cart__one-click {
    font-size: 15px;
  }

  .cart__button {
    font-size: 15px;
  }

  .order__items {
    display: block;
  }

  .order__item+.order__item {
    margin-top: 30px;
  }

  .order__items_radio .order__item+.order__item {
    margin-top: 10px;
  }

  .order__form {
    padding: 0;
    background: none;
  }

  .order__param span {
    background: #fff;
  }

  .order__param b {
    background: #fff;
  }

  .order__total {
    font-size: 17px;
    margin-bottom: 15px;
  }

  .order__param {
    font-size: 13px;
  }

  .order__button {
    font-size: 15px;
  }

  .order__agree {
    font-size: 11px;
  }

  .order__btn {
    font-size: 15px;
    padding: 14px 30px;
  }

  .success {
    margin-top: 26px;
  }

  .ord {
    margin-top: 26px;
  }

  .ord__title {
    font-size: 22px;
    margin-bottom: 18px;
  }

  .ord__text {
    font-size: 13px;
  }

  .ord__items {
    gap: 20px 10px;
  }

  .ord__name {
    font-size: 13px;
  }

  .ord__quantity {
    font-size: 12px;
  }

  .ord__sum {
    font-size: 15px;
  }

  .ord__links {
    margin-top: 20px;
    flex-direction: column;
  }

  .ord__link {
    font-size: 15px;
  }

  .success__text {
    font-size: 16px;
  }

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

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

  .product-item-title {
    max-height: 34px;
  }

  .product-item-image-wrapper img {
    height: 226px;
  }

  .columns__right .product-item-image-wrapper img {
    height: 226px;
  }
}

@media only screen and (max-width: 575.98px) {
  .container {
    width: 100%;
  }

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

  .products {
    grid-template-columns: 1fr 1fr;
    gap: 20px 10px;
  }

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

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

  .profile .wrap_md {
    display: block;
  }

  .profile .iblock.label_block {
    margin-right: 0;
    width: auto;
  }

  .profile .iblock.text_block {
    margin-top: 5px;
  }

  .profile .border_block {
    border: none;
    padding: 0;
  }

  .profile input[type="tel"],
  .profile input[type="password"],
  .profile input[type="text"] {
    padding: 0 10px;
  }

  .profile .line-block.form_footer__bottom {
    display: block;
  }

  .profile .line-block__item+.line-block__item {
    margin-left: 0;
    margin-top: 5px;
  }

  .global-ajax-wrapper {
    padding-left: 15px;
    padding-right: 15px;
  }

  .form .btn.btn-default.btn-lg {
    padding-left: 16px;
    padding-right: 16px;
  }

  .form .btn.btn-transparent-border-color.btn-lg.pull-right.register {
    padding-left: 16px;
    padding-right: 16px;
  }

  .promotion__img {
    margin-bottom: -3px;
  }

  .popup__close,
  .global-ajax-wrapper button.mfp-close,
  .popup button.mfp-close {
    right: 0;
  }

  .agreement {
    left: 10px;
    bottom: 10px;
    transform: translate(0, 0);
    width: 280px;
    padding: 10px;
  }

  .agreement__text {
    font-size: 12px;
  }

  .agreement__button {
    font-size: 12px;
    margin-top: 10px;
  }

  .agreement__button a {
    padding: 10px;
  }
}

@media only screen and (max-width: 374.98px) {
  .phone__number {
    font-size: 16px;
  }

  .phone__caption {
    font-size: 12px;
    margin-bottom: 3px;
  }

  .socialize a {
    width: 30px;
    height: 30px;
    background-size: cover;
    border-radius: 50%;
  }

  .footer__bottom {
    margin-top: 30px;
  }

  .footer__copyright {
    font-size: 12px;
  }

  .footer__policy {
    font-size: 12px;
  }

  .footer__caption {
    font-size: 14px;
  }

  .footer__nav {
    font-size: 14px;
  }

  .footer__columns {
    gap: 30px 10px;
  }

  .footer__logo {
    width: 110px;
  }

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

  .categories__grid .category {
    width: calc(40% - 6px);
    flex-shrink: 0;
    background-size: auto 80px;
  }

  .grab__block {
    padding-right: 127px;
  }

  .grab__img {
    width: 140px;
  }

  .contacts__text {
    font-size: 14px;
  }

  .grip__block:after {
    width: 257px;
    height: 229px;
  }

  .card__add {
    font-size: 13px;
    padding: 0 8px;
    height: 41px;
  }

  .card__favorite,
  .card__favorite.js-favorite {
    width: 41px;
    height: 41px;
    margin-right: 5px;
  }

  .card__add:before {
    width: 17px;
    height: 17px;
    background-size: cover;
    margin-right: 5px;
  }

  .card__add i {
    height: 16px;
  }

  .link-auth {
    display: inline-block;
    line-height: 130%;
    height: auto;
    padding: 10px 20px;
  }

  .card-count {
    width: 120px;
  }

  .popup {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/*==========  Mobile First Method  ==========*/
@media only screen and (min-width: 576px) {}

@media only screen and (min-width: 768px) {}

@media only screen and (min-width: 992px) {
  .header__bottom.active {
    position: absolute;
    left: 0;
    right: 0;
    top: 107px;
    background: #fff;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.08);
    z-index: 5;
    padding: 20px 0 55px;
  }

  .header__bottom.active:before {
    content: "";
    position: absolute;
    height: 11px;
    top: -11px;
    left: 0;
    right: 0;
  }

  .header__bottom.active .header__nav {
    display: flex;
  }

  .header__bottom.active .header__columns {
    display: flex;
  }

  .header__bottom.active .header__left {
    flex-grow: 1;
  }

  .header__bottom.active .header__right {
    width: 286px;
    flex-shrink: 0;
    margin-left: 20px;
    display: block;
  }

  .header__bottom.active .header__nav>ul {
    display: block;
    width: 204px;
  }

  .header__bottom.active .header__nav>ul a {
    height: 48px;
    line-height: 48px;
    padding: 0 30px 0 10px;
    transition: background-color 0.2s ease-out;
  }

  .header__bottom.active .header__nav>ul li.parent a {
    padding-right: 20px;
    position: relative;
  }

  .header__bottom.active .header__nav>ul li.parent a:after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%);
    background: url(/local/templates/happy/img/parent-desktop.svg) no-repeat;
    width: 7px;
    height: 12px;
  }

  .header__bottom.active .header__nav>ul li a:hover,
  .header__bottom.active .header__nav>ul li a.active {
    background: #f2f2f2;
  }

  .header__bottom.active .header__categories {
    border-left: 1px solid #d6d7db;
    padding-left: 20px;
    display: block;
    flex-grow: 1;
  }

  .header__bottom.active .header__categories ul.active {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }

  .header__bottom.active .header__categories ul {
    font-weight: 500;
    line-height: 110%;
  }

  .header__bottom.active .header__categories ul a {
    display: inline;
    height: auto;
    line-height: 110%;
  }

  .header__button.active {
    background: #fff;
    color: #222;
  }

  .header__button.active:before {
    background-image: url(/local/templates/happy/img/btn-close-desktop.svg);
  }
}

@media only screen and (max-width: 767px) {
  .header:not(:has(.header__button.active)) .header__nav .parent:hover>ul.child-block-section {
    display: none;
  }

  .slider__item .container {
    background: linear-gradient(90.18deg, #F8F8FA 28.62%, rgba(248, 248, 250, 0) 75.85%);
  }

  .slider__block {
    width: 60%;
  }
}

.articles__empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
  gap: 20px;
}

.articles__empty p {
  font-size: 20px;
  font-weight: 600;
  color: #222;
  text-align: center;
  margin: 0;
}

.articles__empty-btn {
  display: inline-block;
  padding: 10px 20px;
  font-weight: 500;
  background-color: #222;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  font-size: 16px;
}

.articles__empty-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

.popup-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  display: none;
  width: 320px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.popup-content {
  padding: 16px;
}

.popup-header h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #333;
}

.popup-body p {
  margin: 0;
  color: #555;
  font-size: 14px;
  line-height: 1.5;
}

.popup-body a {
  color: #222;
  font-weight: 600;
  text-decoration: underline;
}

.popup-footer {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-telegram {
  background-color: #222;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  position: relative;
  overflow: hidden;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background-color 0.3s ease;
  z-index: 1;
}

.btn-telegram::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  transition: none;
  pointer-events: none;
  z-index: 2;
}

.btn-telegram:hover::before {
  left: 150%;
  transition: left 0.7s ease;
}

.close-btn {
  font-size: 20px;
  cursor: pointer;
  color: #999;
  transition: color 0.3s;
}

.close-btn:hover {
  color: #333;
}

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

#telegramPopup .close-btn {
  position: absolute;
  z-index: 10000;
  top: 5px;
  right: 15px;
}
/* ============================================================
   Правка №3 (2026-07-24): виджет связи Битрикс24 на мобильной
   версии по умолчанию встаёт в правый верхний угол и перекрывает
   блок «Круглосуточная доставка» в шапке. Виджет грузится
   ВНЕШНИМ скриптом с серверов Битрикс24 (cdn-ru.bitrix24.ru),
   мы не управляем его версткой — только переопределяем позицию
   через !important с высокой устойчивостью к их обновлениям.
   Целимся в стабильный класс .b24-widget-button-wrapper,
   БЕЗ учёта класса -position-top-right — если Битрикс24 сменит
   этот вспомогательный класс, наше правило всё равно сработает.
   ============================================================ */
/* Дополнение от 15.08.2026 (после правки №45).
   Отступ снизу был 151px — он держал виджет над нижним фиксированным меню.
   Правка №45 это меню с мобильного убрала, и на всех страницах, кроме
   карточки товара, виджет повис в пустоте. Опущен в угол, к 20px — теми же
   20px, что и справа.

   Исключение — карточка товара: там внизу осталась панель покупки
   (.card__buttons, высота 110px, прижата к bottom: 0 правкой №45). Виджет
   с z-index 10150 лёг бы прямо на неё (у панели z-index 9), поэтому на
   таких страницах поднимаем его на 130px = 110 панели + 20 воздуха.
   Замер 390×844: панель занимает 735-844, виджет встаёт над ней.

   Признак «на странице есть панель покупки» берём через :has() — своего
   класса у body на этих страницах нет (проверено, className пуст), а
   разметку карточки ради одного признака трогать не хочется. :has()
   поддержан всеми актуальными браузерами (проверено на живой странице).
   Если он всё же не сработает, виджет просто останется внизу и на карточке
   товара — перекроет часть панели, но ничего не сломает. */
@media only screen and (max-width: 991.98px) {
  .b24-widget-button-wrapper {
    top: auto !important;
    right: 20px !important;
    bottom: 20px !important;
    left: auto !important;
  }

  body:has(.card__buttons) .b24-widget-button-wrapper {
    bottom: 130px !important;
  }
}

/* ============================================================
   Правка №5 (2026-07-24): оформление H1 на главной.
   Текст H1 НЕ менялся -- только добавлен span вокруг названия
   города (для стилей) и отдельный попап-переключатель городов
   РЯДОМ с h1 (не внутри тега h1 -- чтобы не менять h1.textContent).
   ============================================================ */
.h1.title .container {
  text-align: center;
}

.h1__city {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 8px auto 0;
  font-size: 44px;
  font-weight: 700;
  color: #ff7aa7;
  border-bottom: 2px dashed #ff7aa7;
  cursor: pointer;
  padding-bottom: 4px;
}

.h1__city:after {
  content: "";
  width: 12px;
  height: 7px;
  flex-shrink: 0;
  background: url(/local/templates/happy/img/down.svg) no-repeat center;
  background-size: contain;
}

.h1__city-popup {
  display: none;
  position: relative;
  margin: 12px auto 0;
  filter: drop-shadow(0px 1px 12px rgba(85, 85, 85, 0.05));
  border-radius: 15px;
  background: #fff;
  padding: 15px;
  width: 280px;
  text-align: left;
  z-index: 5;
}

.h1__city-popup.h1__city-popup_open {
  display: block;
}

@media only screen and (max-width: 767.98px) {
  .h1__city {
    font-size: 30px;
  }
}

/* ==========================================================================
   БАННЕР "БУКЕТ ДНЯ" (правка №6, 2026-07-25)
   Разметка и правка контента — local/templates/happy/include/buket-dnya/index.php
   ========================================================================== */
.bd-banner {
  display: flex;
  align-items: stretch;
  background: #fff5f8;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.bd-banner__photo {
  flex: 0 0 220px;
  height: 220px;
}

.bd-banner__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bd-banner__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 20px 32px;
  min-width: 0;
}

.bd-banner__label {
  font-size: 14px;
  font-weight: 600;
  color: #ff7aa7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bd-banner__prices {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.bd-banner__price {
  font-size: 32px;
  font-weight: 700;
  color: #222;
  line-height: 1.2;
}

.bd-banner__old-price {
  font-size: 18px;
  font-weight: 500;
  color: #999;
  text-decoration: line-through;
}

.bd-banner__save {
  font-size: 14px;
  color: #666;
}

.bd-banner__button {
  display: inline-block;
  width: fit-content;
  margin-top: 4px;
  padding: 10px 28px;
  border-radius: 6px;
  background: #ff7aa7;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s ease-out;
}

.bd-banner:hover .bd-banner__button {
  background: #ff5f96;
}

@media only screen and (max-width: 767.98px) {
  .bd-banner {
    height: 180px;
    border-radius: 12px;
  }

  .bd-banner__photo {
    flex: 0 0 180px;
    height: 180px;
  }

  .bd-banner__content {
    padding: 12px 16px;
    gap: 5px;
  }

  .bd-banner__label {
    font-size: 11px;
  }

  .bd-banner__price {
    font-size: 21px;
  }

  .bd-banner__old-price {
    font-size: 13px;
  }

  .bd-banner__save {
    font-size: 11px;
    line-height: 1.3;
  }

  .bd-banner__button {
    padding: 7px 18px;
    font-size: 12px;
    margin-top: 2px;
  }
}

/* ==========================================================================
   КОМПАКТНОСТЬ ГЛАВНОЙ НА МОБИЛЬНОМ/ПЛАНШЕТЕ (≤991.98px), правка 2026-07-25
   Затрагивает только главную (.home-h1, .home-sections — классы только там).
   Десктоп и другие страницы не тронуты: .title/.h1__city используются
   на других страницах, поэтому не переопределяем их напрямую.
   ========================================================================== */
@media only screen and (max-width: 991.98px) {
  .home-h1 h1 {
    font-size: 14px;
    line-height: 130%;
  }

  .home-h1 .h1__city {
    font-size: 19px;
  }

  .h1.home-h1 {
    margin-top: 3px;
  }

  .home-sections .title {
    font-size: 19px;
    line-height: 130%;
  }
}

/* ==========================================================================
   ОТСТУПЫ МЕЖДУ СЕКЦИЯМИ ГЛАВНОЙ (≤991.98px), правка 2026-07-25
   .home-sections — та же обёртка, что и для заголовков выше.
   Было 80px везде (общее правило .section, действует на всём сайте) —
   здесь только для главной: 56px между секциями, 48px сразу после баннера
   (переход к первому товарному блоку, стоит чуть плотнее).
   ========================================================================== */
@media only screen and (max-width: 991.98px) {
  .home-sections .section {
    margin: 56px 0;
  }

  .home-sections .showcase.section {
    margin-top: 24px;
  }
}

/* ==========================================================================
   ПРАВКА №14 (2026-07-28): скрытие поля "Местоположение" в форме заказа.
   Значение подставляется автоматически по домену (см. DECISIONS.md,
   local/php_interface/lib/Courier/Handlers/Sale/Location.php) — клиенту
   вводить/видеть его не нужно. Поле остаётся в DOM и в отправке формы,
   скрыт только визуально, поэтому значение всё равно попадёт в заказ.
   Селектор [data-property-id-row="6"] — тот же паттерн, что уже
   используется в этом файле/шаблоне для полей "31"/"14" (см. script.js
   в этом же компоненте).
   ========================================================================== */
#bx-soa-properties [data-property-id-row="6"] {
  display: none !important;
}

/* ==========================================================================
   ПРАВКА №15 (2026-07-28): экран подтверждения заказа (после кнопки
   "Оформить заказ" на обеих домена) — крупная кнопка оплаты сразу под
   номером заказа, лишний текст про личный кабинет/логин-пароль убран.
   Файл — sale.order.ajax/order/confirm.php. См. DECISIONS.md.
   ========================================================================== */
.order-complete {
  max-width: 480px;
  margin: 24px auto;
  padding: 0 16px;
}

.order-complete__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 130%;
  margin: 0 0 8px;
}

.order-complete__summary {
  font-size: 15px;
  color: #555;
  margin-bottom: 20px;
}

.order-complete__pay-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 15px 20px;
  border-radius: 8px;
  background: #222;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 130%;
  transition: background 0.2s ease-out;
}

.order-complete__pay-btn:hover {
  background: #2f2f2f;
  color: #fff;
}

.order-complete__pdf-link {
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
}

.order-complete__after {
  margin-top: 16px;
  font-size: 13px;
  color: #777;
  line-height: 140%;
}

.order-complete__after_wait {
  color: #333;
  font-size: 14px;
}

.order-complete__personal {
  margin-top: 24px;
  font-size: 13px;
}

.order-complete__personal a {
  color: #777;
  text-decoration: underline;
}

.order-complete__pay-widget {
  margin-top: 16px;
}

@media (max-width: 480px) {
  .order-complete {
    margin: 16px auto;
  }

  .order-complete__title {
    font-size: 21px;
  }
}

/* ==========================================================================
   ПРАВКА №17 (2026-07-29): блоки формы заказа в свёрнутом состоянии
   ("Кому и от кого" / "Способ доставки" / "Способ оплаты") — разделители
   между блоками и кнопка "Изменить..." на всю ширину на мобильном.
   Файл — sale.order.ajax/order/template.php. См. DECISIONS.md.
   Селекторы по ID блока — эти ID у Bitrix фиксированные (bx-soa-*),
   действуют только на эти 3 блока, остальные шаги формы (корзина,
   самовывоз, регион, авторизация) не затронуты.
   ========================================================================== */
#bx-soa-properties,
#bx-soa-delivery,
#bx-soa-paysystem {
  padding-bottom: 20px; /* было 24px — уточнено правкой №18 (компактный чекаут) */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 20px; /* было 24px — уточнено правкой №18 (компактный чекаут) */
}

#bx-soa-properties .order__next,
#bx-soa-delivery .order__next,
#bx-soa-paysystem .order__next {
  width: 100%;
  /* Правка №18: пошаговость убрана, кнопки "Изменить"/"Далее"/"Назад"
     в этих трёх блоках больше не нужны — вся обёртка скрыта. Само
     display у кнопки .order__editstep всё равно не трогаем (см. ниже),
     это просто скрывает контейнер целиком. */
  display: none !important;
}

/* display/visibility намеренно не трогаем — этим управляет штатное
   ".bx-selected .order__editstep { display: none; }" (кнопка скрыта,
   пока сам блок активен/раскрыт); наш селектор специфичнее по ID и
   перебил бы это правило, если бы тоже задавал display. */
#bx-soa-properties .order__next .order__btn_outline,
#bx-soa-delivery .order__next .order__btn_outline,
#bx-soa-paysystem .order__next .order__btn_outline {
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
}

@media (min-width: 992px) {
  #bx-soa-properties .order__next .order__btn_outline,
  #bx-soa-delivery .order__next .order__btn_outline,
  #bx-soa-paysystem .order__next .order__btn_outline {
    max-width: 320px;
  }
}

/* ==========================================================================
   ПРАВКА №18 (2026-07-29): компактный чекаут под мобильный — все три блока
   ("Кому и от кого" / "Способ доставки" / "Способ оплаты") развёрнуты
   постоянно (без пошаговости, см. правку в template.php), компактные поля,
   парные поля в один ряд. Мобильный приоритет — iPhone 393px и 320px,
   на десктопе исходную ширину формы не трогаем. См. DECISIONS.md.
   ========================================================================== */

/* ---- Всегда видимы, независимо от штатных классов bx-selected/
   bx-step-completed ----
   Штатное правило ".order__step {display:none}" +
   ".order__step.bx-selected, .order__step.bx-step-completed {display:flex}"
   показывает блок ТОЛЬКО когда Bitrix сам считает его "текущим" или
   "пройденным" шагом. Наш JS (template.php) заполняет данными все три
   блока сразу, но класс bx-selected/bx-step-completed при этом получает
   только ОДИН (естественно активный) — остальные два так и остаются с
   одним лишь классом bx-active и потому оставались бы невидимыми (данные
   есть, а блок скрыт !). Поэтому здесь принудительно показываем все три,
   не полагаясь на классы вообще. */
#bx-soa-properties,
#bx-soa-delivery,
#bx-soa-paysystem {
  display: flex !important;
  flex-direction: column;
}

/* ---- Компактные поля (высота, шрифт, отступы) ----
   Шрифт ВНУТРИ input/select/textarea — не меньше 16px: меньше — iOS Safari
   зумит страницу при фокусе. Раньше было 15px (см. style.css компонента) —
   это увеличение, а не уменьшение. Подписи полей уменьшены отдельно. */
/* Вертикальный отступ 12px между полями — там, где поля лежат в штатном
   флекс-контейнере ".order__item" (см. ниже), делает сам row-gap; margin
   здесь только как запасной вариант для полей вне этой структуры
   (например, в блоках доставки/оплаты, если там есть текстовые поля не
   внутри .order__item). Чтобы не удваивать отступ там, где уже есть
   row-gap, отступ снят с полей внутри .order__item отдельным правилом. */
#bx-soa-properties .form-group,
#bx-soa-delivery .form-group,
#bx-soa-paysystem .form-group {
  margin-bottom: 12px;
}

#bx-soa-properties .order__item > .form-group,
#bx-soa-delivery .order__item > .form-group,
#bx-soa-paysystem .order__item > .form-group {
  margin-bottom: 0;
}

#bx-soa-properties .bx-soa-custom-label,
#bx-soa-delivery .bx-soa-custom-label,
#bx-soa-paysystem .bx-soa-custom-label,
#bx-soa-properties .form-group label,
#bx-soa-delivery .form-group label,
#bx-soa-paysystem .form-group label {
  font-size: 13px;
  margin-bottom: 4px;
}

#bx-soa-properties .form-control,
#bx-soa-delivery .form-control,
#bx-soa-paysystem .form-control,
#bx-soa-properties .form-group select,
#bx-soa-delivery .form-group select,
#bx-soa-paysystem .form-group select {
  height: 46px;
  font-size: 16px;
}

#bx-soa-properties textarea.form-control,
#bx-soa-delivery textarea.form-control,
#bx-soa-paysystem textarea.form-control {
  height: 100px; /* было 140px — текст открытки не первоочередное поле */
  font-size: 16px;
}

/* ---- Подписи -> placeholder (компактные пары, где подпись избыточна) ----
   Placeholder-текст выставляется в template.php (JS), <label> остаётся
   в DOM для доступности, просто визуально скрыт.
   Расширено 2026-07-29 (убраны все заголовки-абзацы формы): + заказчик
   (1/3), дата доставки (11), период доставки (14 — у select нет настоящего
   placeholder, но собственный текст первого option уже читается как
   подсказка "Выберите период доставки" — подпись над ним просто лишняя),
   адрес (7), текст открытки (13). Точное время (31) сознательно НЕ трогали
   — это условное поле (появляется только по чекбоксу "доставить к опред.
   времени"), не входило в список задачи. */
#bx-soa-properties [data-property-id-row="1"] label,
#bx-soa-properties [data-property-id-row="3"] label,
#bx-soa-properties [data-property-id-row="10"] label,
#bx-soa-properties [data-property-id-row="12"] label,
#bx-soa-properties [data-property-id-row="11"] label,
#bx-soa-properties [data-property-id-row="14"] label,
#bx-soa-properties [data-property-id-row="28"] label,
#bx-soa-properties [data-property-id-row="29"] label,
#bx-soa-properties [data-property-id-row="30"] label,
#bx-soa-properties [data-property-id-row="7"] label,
#bx-soa-properties [data-property-id-row="13"] label {
  display: none;
}

/* ---- Убраны все заголовки-абзацы внутри формы (2026-07-29) ----
   ".order__caption" ("Кому и от кого") — только у properties-блока: не
   через удаление текста в PHP, а через display:none на обёртке — сама
   обёртка (.order__caption-wrapper) остаётся в DOM, на неё родной JS
   (editSection) вешает клик-обработчик заголовка (titleNode), трогать
   разметку рискованно, скрыть проще и безопаснее. У delivery/paysystem
   заголовки ("Способ доставки"/"Способ оплаты") сознательно НЕ трогаем —
   селектор скопирован строго под properties.
   ".order__subcaption" (Bitrix группирует свойства по PROPS_GROUP —
   "От кого"/"Кому"/"Дата и время"/"Адрес доставки"/"Текст открытки"/
   "Данные" — по одному на каждый data-group-id) — все разом, одним
   правилом, весь смысл подписей теперь несут placeholder-ы. */
#bx-soa-properties > .order__caption-wrapper {
  display: none;
}

#bx-soa-properties .order__subcaption {
  display: none;
}

/* ---- Парные поля в один ряд (блок "Кому и от кого") ----
   Пары: имя получателя(10)+телефон получателя(12); дата доставки(11)+
   интервал доставки(14); подъезд(28)+квартира(30). Этаж(29) — своей
   строкой (домофона как отдельного поля на этом сайте нет).
   Флекс-контейнер здесь — уже штатный ".order__item" (display:flex,
   flex-wrap:wrap, из template_styles.css выше, строка ~5318) — сами
   .form-group лежат прямо в нём, не в .order__items-wrapper (это на
   уровень выше, там лежит вся группа сразу, а не отдельные поля).
   У штатного .order__item gap:20px — переопределяем на нужные нам
   12px по вертикали / 8px по горизонтали. */
/* display:flex добавлен явно (2026-07-29) — раньше здесь не задавался,
   и штатное Aspro-правило ".bx-step-completed .order__item{display:block}"
   (см. ниже в этом файле) выигрывало по факту (наш селектор ID+класс
   специфичнее классового правила, но т.к. display тут не был объявлен,
   спорить было не с чем). Пока #bx-soa-properties не получает класс
   .bx-step-completed в обычном компактном режиме — не проявлялось, но
   ЭТО и есть причина старого нерешённого бага "order не работает на
   ≤374px" (см. DECISIONS.md, старая находка): воспроизведено вручную —
   добавление .bx-step-completed на #bx-soa-properties (JS,
   classList.add) ломало flex у group 5 (Адрес/Подъезд/Квартира/Этаж) —
   display становился block, order переставал действовать, порядок
   падал в чистый DOM-порядок (Квартира→Этаж→Подъезд вместо
   Подъезд→Квартира→Этаж). display:flex здесь — обход раз и навсегда,
   для ВСЕХ групп properties, не только адреса: ID-селектор бьёт
   специфичность классового правила, .bx-step-completed для properties
   больше не будет иметь эффекта на layout, даже если когда-то
   проставится (например, через сценарий SHOW_AUTH — см. разбор в
   DECISIONS.md, найдено при диагностике скачка страницы). */
#bx-soa-properties .order__item {
  display: flex;
  row-gap: 12px;
  column-gap: 8px;
}

#bx-soa-properties [data-property-id-row="1"],
#bx-soa-properties [data-property-id-row="3"],
#bx-soa-properties [data-property-id-row="10"],
#bx-soa-properties [data-property-id-row="12"],
#bx-soa-properties [data-property-id-row="11"],
#bx-soa-properties [data-property-id-row="14"] {
  width: calc(50% - 6px); /* было -4px, оставлен запас против сабпиксельного округления флекса */
}

/* Блок "От кого" (data-group-id="1"): имя заказчика(1) + телефон
   заказчика(3) в ряд, по образцу блока "Кому" (10+12). Email(2) лежит
   МЕЖДУ ними в DOM — с 2026-07-29 убран из разметки целиком через JS
   (template.php, courierApplyCompactPlaceholders — .remove() на каждом
   ajax-цикле), CSS-скрытие больше не нужно. order всё равно фиксируем
   явно (тот же принцип, что и у пары 11/14 — не полагаться на случайный
   DOM-порядок). */
#bx-soa-properties [data-property-id-row="1"] { order: 1; }
#bx-soa-properties [data-property-id-row="3"] { order: 2; }

/* Группа "Адрес доставки" (data-group-id="5"), порядок переставлен
   2026-07-29: раньше Подъезд/Квартира/Этаж шли ПЕРЕД Адресом — нелогично,
   уточняющие поля раньше самого адреса. Теперь Адрес(7) — первой строкой
   на всю ширину, Подъезд(28)/Квартира(30)/Этаж(29) — под ним, втроём в
   ряд (ширина ниже). Row 9 (hidden-чекбокс "уточнить у получателя") —
   визуально не участвует, order не важен, оставлен последним для
   порядка. */
#bx-soa-properties [data-property-id-row="7"] { order: 1; }
#bx-soa-properties [data-property-id-row="28"] { order: 2; }
#bx-soa-properties [data-property-id-row="30"] { order: 3; }
#bx-soa-properties [data-property-id-row="29"] { order: 4; }
#bx-soa-properties [data-property-id-row="9"] { order: 5; }
#bx-soa-properties [data-property-id-row="13"] { order: 6; }
#bx-soa-properties [data-property-id-row="15"] { order: 7; }

/* Адрес — на всю ширину, отдельной строкой (сам flex-wrap перенесёт
   тройку 28/30/29 на следующую строку, т.к. 100% не оставляет места
   в первой). Подъезд/Квартира/Этаж — по ~33% в ряд. Проверено замером
   на 320px (iPhone SE): по 90px на поле — плейсхолдер обрезается
   ("Подъе"/"Кварт"), но это ожидаемо и принято сознательно — поля
   принимают только короткие числа (1-3 цифры), не полный текст
   плейсхолдера; жертвовать шириной ради заголовка нет смысла. Отдельный
   fallback на ≤374px НЕ добавляли — тройка остаётся в ряд на всех
   ширинах, это и есть выбранный вариант (адрес на всю ширину, тройка
   всё равно в ряд), а не откат в один столбец. */
#bx-soa-properties [data-property-id-row="7"] {
  width: 100%;
}

#bx-soa-properties [data-property-id-row="28"],
#bx-soa-properties [data-property-id-row="30"],
#bx-soa-properties [data-property-id-row="29"] {
  width: calc(33.333% - 6px);
}

/* Пара "дата доставки(11) + интервал(14)" — в DOM между ними динамически
   вставляется поле CUSTOM_CHECKBOX (см. addCustomCheckbox() в template.php,
   правка ещё до №17), из-за чего 11 и 14 оказываются НЕ соседними и не
   встают в одну строку, даже когда по ширине оба вписываются. Порядок
   вывода фиксируем явно через order, независимо от фактической позиции
   в DOM. */
#bx-soa-properties [data-property-id-row="11"] { order: 1; }
#bx-soa-properties [data-property-id-row="14"] { order: 2; }
#bx-soa-properties [data-property-id-row="CUSTOM_CHECKBOX"] { order: 3; }
#bx-soa-properties [data-property-id-row="31"] { order: 4; }

/* Штатное правило ".order div[data-property-id-row="28/29/30"]" (см. выше
   в этом файле) делало из подъезда/этажа/квартиры три равные колонки по
   33% — с 2026-07-29 нам ОПЯТЬ нужны три равные колонки (см. правило
   width:calc(33.333% - 6px) выше), отдельный override под этаж
   (width:100%) больше не нужен и убран — раньше он держал этаж на всю
   ширину под парой подъезд+квартира, сейчас все три в одном ряду. */

/* На узких экранах (iPhone SE, 320px) парам тесно — откатываем в одну
   колонку. Подъезд(28)/Квартира(30) сюда больше НЕ входят — тройка с
   этажом(29) сознательно остаётся в ряд на всех ширинах (см. комментарий
   у width:calc(33.333%...) выше — замер на 320px, 90px/поле, выбор
   осознанный). */
@media (max-width: 374px) {
  #bx-soa-properties [data-property-id-row="1"],
  #bx-soa-properties [data-property-id-row="3"],
  #bx-soa-properties [data-property-id-row="10"],
  #bx-soa-properties [data-property-id-row="12"],
  #bx-soa-properties [data-property-id-row="11"],
  #bx-soa-properties [data-property-id-row="14"] {
    width: 100%;
  }
}

/* ---- Сжать воздух (2026-07-29) ----
   Заголовки-разделители убраны — родные отступы под них (30px между
   группами свойств, 50px между шагами формы) стали избыточны. Оба
   правила ниже переопределяют штатные Aspro-правила (".order__item +
   .order__item" и ".order__step + .order__step") с более высокой
   специфичностью (ID-селектор), не трогая сами штатные правила —
   на страницах, где заголовки НЕ убраны (delivery/paysystem — эти
   заголовки оставлены по прямому решению), отступы такие же, как были.
   Высота полей (46px, см. выше по файлу) и размер шрифта (16px, не меньше
   порога iOS-зума) — не трогали, это отдельные, уже соблюдённые пороги. */
#bx-soa-properties .order__item + .order__item {
  margin-top: 16px;
}

#bx-soa-order .order__step + .order__step {
  margin-top: 28px;
}

/* ---- Блок связи вверху формы (2026-07-29, финальная правка — один ряд) ----
   Было: кнопка по центру, под ней отдельной строкой два ярлыка. Стало:
   [Обратный звонок][Telegram][MAX] одной строкой — кнопка растягивается
   на всё оставшееся место (flex:1 1 auto), ярлыки фиксированные 44x44px
   справа, gap 8px между всеми тремя элементами. Кнопка — переиспользуем
   .grab__button (чёрный скруглённый вид с карточки товара), только сама
   ссылка внутри растянута на 100% ширины/высоты своего flex-родителя
   (родной .grab__button a — inline-block по контенту, этого недостаточно
   для растягивания в ряду). */
.order__contact-hint {
  text-align: center;
  font-size: 13px;
  color: rgba(34, 34, 34, 0.6);
  margin-bottom: 12px;
}

.order__contact-block {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 28px;
}

.order__contact-callback {
  flex: 1 1 auto;
  min-width: 0; /* даёт кнопке право сжиматься теснее контента — без этого flex-item не сжался бы уже своего inline-block-содержимого */
  margin-top: 0;
}

.order__contact-callback .order__contact-callback-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* На узких экранах (320-374px) текста+паддингов родного .grab__button a
   (30px с каждой стороны) уже не хватает вместе с двумя ярлыками 44px —
   строку НЕ разрываем (флекс и так не даёт технически перенести ряд,
   flex-wrap нигде не включён), а явно ужимаем горизontальные отступы
   кнопки, чтобы под текст осталось больше места и не обрезало многоточием.
   Проверено на 320px (iPhone SE) — текст "Обратный звонок" помещается
   полностью. */
@media (max-width: 374px) {
  .order__contact-callback .order__contact-callback-trigger {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.order__contact-icons {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.order__contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: #f5f5f5;
  color: #222;
  transition: background 0.2s ease-out;
}

.order__contact-icon:hover {
  background: #ececec;
}

/* Иконка MAX (2026-07-29) — файл local/templates/happy/images/max-icon.svg
   уже содержит СВОЙ фон и скруглённые углы (проверено — rect с ry на весь
   viewBox) — обычный .order__contact-icon поверх дал бы квадрат в квадрате
   (серый фон плитки + скруглённый цветной фон иконки). Этот модификатор
   явно снимает фон/скругление/паддинг у ЭТОЙ конкретной плитки, оставляя
   только размер и центрирование (общие с Telegram). */
.order__contact-icon--image {
  background: none;
  border-radius: 0;
}

.order__contact-icon--image:hover {
  background: none;
  opacity: 0.85;
}

.order__contact-icon--image img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Цвет подсказки в select "Период доставки" (2026-07-29) — см.
   courierApplyCompactPlaceholders() в template.php: класс ставится/
   снимается через JS в зависимости от того, выбрана ли опция-подсказка
   (value=""). Цвет и прозрачность — те же, что у ::placeholder текстовых
   полей выше в этом файле (#222 / opacity:0.6), чтобы подсказка не
   выглядела ярче остальных плейсхолдеров формы. */
#bx-soa-properties select.order__select-placeholder {
  color: #222;
  opacity: 0.6;
}

/* ==========================================================================
   ЭКРАН ПОДТВЕРЖДЕНИЯ: развилка по службе доставки + кнопка оплаты
   (2026-07-30). Файл — sale.order.ajax/order/confirm.php. См. DECISIONS.md.

   ГЛАВНОЕ ПРО СЕЛЕКТОР КНОПКИ. Разметку кнопки отдаёт чужой шаблон
   обработчика ЮKassa (bitrix/modules/sale/handlers/paysystem/yandexcheckout/
   template/template.php) в виде <a class="btn btn-lg btn-success">. Целимся в
   НАШ контейнер `.order-complete__pay-widget a`, а не в классы btn*:
   во-первых они общие и встречаются в шаблоне в других местах, во-вторых
   на этом сайте они всё равно не работают — проверено по всем шести реально
   загружаемым CSS-файлам плюс инлайну обработчика: `.btn-success` без скоупа
   не определён нигде, а `.btn`/`.btn-lg` существуют только в связках
   `.bx-blue .btn.btn-default`, `.form .btn.btn-default.btn-lg`,
   `.popup .checkout-btn-container .btn` и `.gray-theme .btn` — ни один из этих
   предков на экране подтверждения не появляется (`.gray-theme` не выставляется
   на сайте вообще). До этой правки клиент видел голый синий линк.
   ========================================================================== */

/* Кнопка оплаты из виджета ЮKassa. !important нужен: у ссылки есть инлайновый
   style="border-radius:32px" из чужого шаблона, инлайн иначе побеждает. */
.order-complete__pay-widget a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 15px 20px;
  border-radius: 8px !important;
  background: #222;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 130%;
  transition: background 0.2s ease-out;
}

.order-complete__pay-widget a:hover,
.order-complete__pay-widget a:focus {
  background: #2f2f2f;
  color: #fff;
}

/* Обёртки чужого шаблона рассчитаны на бутстрап (.d-flex/.col-auto/.mb-3),
   которого здесь нет. Обнуляем их отступы, чтобы кнопка не уезжала. */
.order-complete__pay-widget .col-auto,
.order-complete__pay-widget .col {
  padding: 0 !important;
}

.order-complete__pay-widget .d-flex {
  display: block;
}

/* Строка «Сумма к оплате по счету» из шаблона ЮKassa — единственная строка
   суммы на экране (свою мы убрали, чтобы не было двух одинаковых подряд). */
.order-complete__pay-widget .widget-payment-checkout-info {
  font-size: 15px;
  color: #555;
  margin-bottom: 14px;
}

/* Подпись «Вы будете перенаправлены на страницу оплаты» идёт ПОСЛЕ кнопки
   и должна читаться подсказкой, а не вторым заголовком. */
.order-complete__pay-widget .col.widget-payment-checkout-info {
  margin: 10px 0 0;
  font-size: 13px;
  color: #777;
}

/* Сценарий А: доставку считает менеджер, оплаты на экране нет. */
.order-complete__consult {
  margin: 12px 0 4px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #f5f5f5;
  font-size: 15px;
  line-height: 145%;
  color: #333;
}

/* Свёрнутые детали заказа. */
.order-complete__details {
  margin-top: 20px;
  border-top: 1px solid #e5e5e5;
  padding-top: 14px;
}

.order-complete__details-summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #222;
  list-style: none;
}

.order-complete__details-summary::-webkit-details-marker {
  display: none;
}

.order-complete__details-summary::after {
  content: " ▾";
  color: #888;
}

.order-complete__details[open] .order-complete__details-summary::after {
  content: " ▴";
}

.order-complete__details-body {
  margin-top: 12px;
}

.order-complete__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  line-height: 140%;
  padding: 5px 0;
  color: #333;
}

.order-complete__row-val {
  text-align: right;
  flex-shrink: 0;
  max-width: 55%;
  word-break: break-word;
}

.order-complete__row_total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #e5e5e5;
  font-weight: 700;
  font-size: 15px;
}

.order-complete__props {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e5e5e5;
}

.order-complete__row_prop {
  color: #666;
  font-size: 13px;
}

.order-complete__contact {
  margin-top: 18px;
  font-size: 14px;
  color: #444;
}

.order-complete__contact a {
  color: #222;
  text-decoration: underline;
}

/* Узкие экраны: 320px — фолбэк-ширина, значения в строках не должны
   выдавливать подписи. */
@media (max-width: 374px) {
  .order-complete__row {
    font-size: 13px;
  }

  .order-complete__row-val {
    max-width: 50%;
  }

  .order-complete__pay-widget a {
    font-size: 17px;
    padding: 15px 12px;
  }
}

/* ==========================================================================
   ЭКРАН ПОДТВЕРЖДЕНИЯ: три правки по живому экрану (заказ 11177, iPhone),
   2026-07-30. Разбор — DECISIONS.md.
   ========================================================================== */

/* 1. Блок «если вы откажетесь от покупки, для возврата денег вам придётся
   обратиться в магазин». Это НЕ наш текст: его печатает шаблон обработчика
   ЮKassa (bitrix/modules/sale/handlers/paysystem/yandexcheckout/template/
   template.php, строка 21, ключ SALE_HANDLERS_..._WARNING_RETURN) как
   <div class="alert alert-info">. Файл чужой и обновляемый, поэтому не
   правим его, а прячем блок в своём контейнере. Клиенту на экране
   «заказ принят» разговор про отказ и возврат денег не нужен. */
.order-complete__pay-widget .alert {
  display: none;
}

/* 2. Нижняя панель навигации (Главная/Каталог/Избранное/Корзина/Бонусы) —
   .header__links, на ширинах до 991.98px она position:fixed; bottom:0
   высотой 71px (правило на строке ~7189) и перекрывала низ контента.
   Даём экрану подтверждения отступ снизу: 71px панели + 16px воздуха,
   плюс safe-area на айфонах с домашней полосой. */
@media only screen and (max-width: 991.98px) {
  .order-complete {
    padding-bottom: calc(87px + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   ФОРМА ЗАКАЗА: поля на мобильном (2026-07-30, задача владельца).
   Паддинг .order__input был 0 20px — телефон «+7 (999) 999-99-99» занимает
   141px в Raleway 16px и в парном поле на 360-390px не влезал: последняя
   цифра обрезалась наполовину. Прижимаем текст к краям: слева 8px (первый
   символ ближе к левому краю), справа 4px — на 360px остаётся ~5px запаса.
   Десктоп не трогаем: там поля широкие, 20px выглядит правильно.
   ========================================================================== */
@media (max-width: 991.98px) {
  #bx-soa-order-form .form-control,
  #bx-soa-order-form .order__input {
    padding: 0 2px 0 6px;
  }
}

/* ==========================================================================
   ГЛАВНАЯ, H1 В ОДНУ СТРОКУ на мобильном/планшете (2026-07-30).
   Было: «Доставка цветов и букетов в» и город на второй строке — потому что
   .h1__city это display:flex с margin:8px auto 0, то есть блочный элемент
   на всю ширину. Делаем его строчным и выравниваем кегль с основным текстом,
   чтобы строка была одна. Стрелку-шеврон (:after) сохраняем — по городу
   по-прежнему кликают для смены. Десктоп не трогаем: там 44px и своя вёрстка.
   ========================================================================== */
@media only screen and (max-width: 991.98px) {
  /* Кегль плавающий: на 320px фраза «Доставка цветов и букетов в
     Санкт-Петербурге» требует 298px даже при 12px, а доступно 288 —
     фиксированный размер дал бы горизонтальный скролл. clamp держит
     строку одной на всех реальных телефонах (360px и шире) и сам
     ужимается на самых узких экранах. */
  .home-h1 h1 {
    font-size: clamp(11px, 3.5vw, 17px);
    white-space: nowrap;
  }

  .home-h1 .h1__city {
    display: inline-flex;
    vertical-align: baseline;
    width: auto;
    margin: 0 0 0 4px;
    font-size: inherit;
    gap: 5px;
  }

  .home-h1 .h1__city:after {
    width: 9px;
    height: 6px;
  }
}

/* ==========================================================================
   ВЕРХНЯЯ ПЛАШКА: текст стал длиннее (2026-07-30).
   У .top__row жёсткая height: 60px (строка ~1090). Прежний текст в одну-две
   строки в неё помещался, новый занимает 70px и обрезался снизу — «Круглосуточно
   24/7» уходило под шапку. Снимаем фиксацию: высота по содержимому, с полями.
   Кегль на мобильном чуть уменьшен — текста стало заметно больше.
   ========================================================================== */
.top .top__row {
  height: auto;
  min-height: 60px;
  padding: 10px 0;
}

@media screen and (max-width: 767px) {
  .top__title {
    font-size: 14px;
    line-height: 125%;
  }
}

/* ==========================================================================
   МОБИЛЬНАЯ ШАПКА: оценки вместо прямоугольника «24/7» (2026-07-30).
   Раньше справа от логотипа стоял .delivery-block-header с текстом
   «Круглосуточная доставка» — заменён на тот же блок оценок, что и на
   десктопе (компонент один, инфоблок 40). Иконки 2ГИС/Яндекса приходят
   из базовых правил .header__rating:before, их не дублируем.
   Раскладка: в столбик, чтобы уместиться между логотипом и гамбургером.
   ========================================================================== */
.header-mobile__ratings .header__ratings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.header-mobile__ratings .header__ratings > * + * {
  margin-left: 0;
}

.header-mobile__ratings .header__rating {
  font-size: 13px;
  line-height: 115%;
  white-space: nowrap;
  padding-left: 22px;
}

.header-mobile__ratings .header__rating:before {
  width: 17px;
  height: 17px;
  background-size: contain;
}

@media screen and (max-width: 374px) {
  .header-mobile__ratings .header__rating {
    font-size: 12px;
    padding-left: 19px;
  }
}

/* ======================================================================
   Правка №19 (30.07.2026) — корзина в цветах нового макета.
   Первый экран редизайна, взят как пробный: страница простая и изолированная.

   Токены объявлены на :root, но ПРИМЕНЯЮТСЯ ТОЛЬКО внутри .cart —
   пока это единственная перекрашенная страница, остальной сайт не меняется.
   Разметку и раскладку не трогаем: только цвет, радиусы и рамки.

   Специфичность: базовые правила корзины (стр. ~4469-4800) — одиночные
   классы (0,1,0). Здесь везде префикс .cart, то есть (0,2,0) — перебивают
   без !important. Мобильный блок (@media max-width 767.98px, стр. ~8399)
   идёт по файлу ниже, но проигрывает по специфичности, поэтому всё, что
   он намеренно отменяет (фон панели итогов), обёрнуто в min-width: 768px.
   ====================================================================== */
:root {
  --ch-wine: #a5254c;
  --ch-wine-deep: #8e1e40;
  --ch-blush: #fdf2f5;
  --ch-blush-line: #f0dde3;
  --ch-ink: #1c1a1b;
  --ch-r-panel: 18px;
  --ch-r-card: 16px;
  --ch-r-control: 12px;
}

/* --- карточка товара --- */
.cart .cart__item {
  background: #fff;
  border: 1px solid var(--ch-blush-line);
  border-radius: var(--ch-r-card);
  padding: 14px;
}

.cart .cart__img img {
  border-radius: 12px;
}

.cart .cart__name {
  color: var(--ch-ink);
}

.cart .cart__price,
.cart .cart__price .basket-item-price-current-text {
  color: var(--ch-wine);
}

/* --- счётчик количества --- */
.cart .cart__count {
  background: var(--ch-blush);
  border: 1px solid var(--ch-blush-line);
  border-radius: var(--ch-r-control);
}

.cart .cart__value {
  color: var(--ch-ink);
  background: transparent;
}

/* --- панель с итогом --- */
@media only screen and (min-width: 768px) {
  .cart .cart__form {
    background: var(--ch-blush);
    border-radius: var(--ch-r-panel);
  }
}

.cart .cart__promo-code input {
  border-radius: var(--ch-r-control);
  border-color: var(--ch-blush-line);
}

.cart .cart__promo-code input:focus {
  border-color: var(--ch-wine);
}

.cart .cart__total {
  color: var(--ch-ink);
}

.cart .cart__total b {
  color: var(--ch-wine);
}

/* --- кнопки --- */
.cart .cart__button {
  background: var(--ch-wine);
  border-radius: var(--ch-r-control);
}

.cart .cart__button:hover {
  background: var(--ch-wine-deep);
}

.cart .cart__one-click {
  border-radius: var(--ch-r-control);
  border-color: var(--ch-wine);
  color: var(--ch-wine);
}

.cart .cart__one-click:hover {
  background: var(--ch-blush);
  opacity: 1;
}

@media only screen and (max-width: 767.98px) {
  /* на узком экране карточка ужимается: 110px картинка + отступы иначе
     съедают ширину названия */
  .cart .cart__item {
    padding: 10px;
  }
}

/* ======================================================================
   Правка №20 (30.07.2026) — ягодный цвет выходит за пределы корзины.

   С этого момента токены --ch-* (объявлены выше, в правке №19) применяются
   НЕ только внутри .cart. Здесь — кнопка «Каталог» в шапке (по просьбе
   владельца) и все остальные места, где стоял прежний брендовый розовый
   #ff7aa7: два розовых на одной странице выглядели бы как ошибка.

   ВЕРХНЮЮ ПЛАШКУ (.top, сейчас #d17c91) НЕ ТРОГАЕМ — по ней отдельное
   решение владельца: там нужен не ягодный, а более песочный/светло-розовый.

   Состояние .header__button.active (белая кнопка с крестиком, когда каталог
   раскрыт) не задето намеренно: у него специфичность (0,2,0) против (0,1,0)
   здесь, поэтому раскрытый каталог по-прежнему белый.
   ====================================================================== */

/* --- кнопка «Каталог» в шапке --- */
/* десктоп: была чёрная #222; мобильный: был розовый #ff7aa7;
   с правки №24 (30.07) — пыльно-розовая заливка с вишнёвым текстом.
   Правило переписано на месте, а не перекрыто ещё одним слоем ниже:
   три противоречащих правила на одну кнопку читать невозможно.
   Вишнёвая рамка (правка №21) и радиус 12px (правка №23) остаются */
.header__button,
.header-mobile__button {
  background: var(--ch-dusty);
  color: var(--ch-wine);
}

.header__button:not(.active):hover,
.header-mobile__button:hover {
  background: var(--ch-dusty-hover);
}

/* --- город в заголовке главной --- */
/* пунктирное подчёркивание задано в border-bottom вместе с толщиной и
   стилем, поэтому меняем только цвет составного свойства */
.h1__city {
  color: var(--ch-wine);
  border-bottom-color: var(--ch-wine);
}

/* --- баннер «Букет дня» --- */
.bd-banner__label {
  color: var(--ch-wine);
}

.bd-banner__button {
  background: var(--ch-wine);
}

.bd-banner:hover .bd-banner__button {
  background: var(--ch-wine-deep);
}

/* ======================================================================
   Правка №21 (30.07.2026) — вишнёвый на весь сайт: кнопки, рамки, цены.

   Список селекторов собран не глазами, а разбором самого файла стилей:
   68 тёмных заливок, 28 тёмных рамок, 2 подчёркивания. Ниже — все из них,
   кроме сознательных исключений (см. в конце блока).

   ВАЖНО, ПОЧЕМУ background-color, А НЕ background:
   шесть базовых правил задают фон сокращённой записью вместе с картинкой,
   вида «background: #222 url(/local/templates/happy/img/icon-checkbox.svg) no-repeat». Если бы
   здесь стояло background, галочки и крестики исчезли бы вместе с цветом.
   background-color меняет только цвет и картинку не трогает.
   ====================================================================== */
:root {
  --ch-money: #2f9e5e;   /* выгода/экономия — единственный не-вишнёвый акцент */
}

/* ---------------------------------------------------------------------
   1. Заливные кнопки и элементы: были #222
   --------------------------------------------------------------------- */
.header__search-close,
.header__link span,
.promotion__more span,
.slider__button a,
.grab__button a,
.stock__more span,
.grip__submit,
.telegram__button a,
.pagination__more a,
.pagination__items b,
.filter__apply,
#set_filter,
.card__add,
.card .blog-comment-buttons input[type="button"],
.order__btn,
.order__button,
.ord__link,
.popup__submit,
.popup .checkout-btn-container .btn,
.profile .but-r button,
.form .btn.btn-default.btn-lg,
.form .captcha_reload,
.search__row .button,
.articles__empty-btn,
.btn-telegram,
.order-complete__pay-btn,
.order-complete__pay-widget a {
  background-color: var(--ch-wine);
}

/* ---------------------------------------------------------------------
   2. Наведение на те же кнопки: было #2f2f2f
   --------------------------------------------------------------------- */
.promotion:hover .promotion__more span,
.slider__button a:hover,
.grab__button a:hover,
.stock__item:hover .stock__more span,
.grip__submit:hover,
.telegram__button a:hover,
.filter__apply:hover,
#set_filter:hover,
.card__add:not(.active):hover,
.card .blog-comment-buttons input[type="button"]:hover,
.order__btn:hover,
.order__button:hover,
.ord__link:hover,
.popup__submit:hover,
.profile .but-r button:hover,
.form .btn.btn-default.btn-lg:hover,
.product-item-add a:not(.active):hover,
.product__add a:hover,
.order-complete__pay-btn:hover,
.order-complete__pay-widget a:hover {
  background-color: var(--ch-wine-deep);
}

/* ---------------------------------------------------------------------
   3. Кнопки-контуры: чёрная рамка -> вишнёвая рамка и вишнёвый текст
   --------------------------------------------------------------------- */
.filter__reset,
#del_filter,
.agreement__button a,
.order__btn_outline,
.ord__link_outline,
.card .bx_medium.bx_bt_button,
.form .btn.btn-transparent-border-color.btn-lg.pull-right.register {
  border-color: var(--ch-wine);
  color: var(--ch-wine);
}

/* у кнопки «Каталог» рамка осталась чёрной от базового правила —
   на вишнёвой заливке она давала тёмный ободок */
.header__button {
  border-color: var(--ch-wine);
}

/* ---------------------------------------------------------------------
   4. Состояния «выбрано» и активные вкладки: рамка была #222
   --------------------------------------------------------------------- */
.product-item-add a.active,
.product__add a.active,
.product-item-scu-item-text-container.selected,
.cart .basket-item-scu-item.selected,
.mention__tab.active,
.card__tab.active,
.form .tabs.tabs--compact .nav li.active a {
  border-color: var(--ch-wine);
}

/* ---------------------------------------------------------------------
   5. Переключатели: радио, галочки, ползунок цены, точки слайдеров
   --------------------------------------------------------------------- */
.radio input+i:after,
.checkbox input:checked+i,
.order__radio i:after,
.order__check i:after,
.cart__radio i:before,
.owl-dot.active,
.swiper-pagination-bullet.swiper-pagination-bullet-active,
.bx-ui-slider-pricebar-v,
.bx-ui-slider-handle:before,
.range .irs-bar,
.range .irs-slider:before,
.advantages__text ul li:before,
.bx-filter-input-checkbox input:checked,
.bx-soa-customer-field[data-property-id-row="9"] input[type="checkbox"]:checked,
.order .bx-soa-pp-company-block .checkbox input:checked,
.form .prompt.remember.onoff input[type="checkbox"]:checked,
.form .licence_block.label_block.onoff input[type="checkbox"]:checked {
  background-color: var(--ch-wine);
}

.radio input:checked+i,
.checkbox input:checked+i,
.order__radio i,
.cart__radio i,
.bx-filter-input-checkbox input:checked,
.bx-soa-customer-field[data-property-id-row="9"] input[type="checkbox"]:checked,
.order .bx-soa-pp-company-block .checkbox input:checked,
.form .prompt.remember.onoff input[type="checkbox"]:checked,
.form .licence_block.label_block.onoff input[type="checkbox"]:checked {
  border-color: var(--ch-wine);
}

/* ---------------------------------------------------------------------
   6. Цены и выгода
   --------------------------------------------------------------------- */
.product-item-price-current,
.bd-banner__price {
  color: var(--ch-wine);
}

/* старая цена была #B22222 — красный рядом с вишнёвым мутит оба.
   Уводим в серый, как на баннере «Букет дня», где так и было */
.product-item-price-old {
  color: #999;
}

.bd-banner__save,
.cart__saving,
.cart__saving b {
  color: var(--ch-money);
}

/* ---------------------------------------------------------------------
   7. Пунктирная плашка «Авторизуйтесь, чтобы увидеть доступные бонусы»
   ⚠️ ОТМЕНЕНО правкой №41 (2026-08-12) — блок приглушён, рамки и вишнёвого
   цвета у него больше нет. Правила ниже оставлены как история; действующие
   искать в блоке «Правка №41» в самом конце файла.
   --------------------------------------------------------------------- */
.link-auth {
  border-color: rgba(165, 37, 76, 0.45);
}

.link-auth a {
  color: var(--ch-wine);
}

/* ---------------------------------------------------------------------
   8. Мелкие акценты, где чёрный был декоративной чертой
   --------------------------------------------------------------------- */
.product__dot {
  border-bottom-color: var(--ch-wine);
}

.card__attention,
.card__text mark {
  border-left-color: var(--ch-wine);
}

.menu__list a:hover {
  text-decoration-color: var(--ch-wine);
}

.menu__list a:hover:after {
  border-color: var(--ch-wine);
}

/* ---------------------------------------------------------------------
   ЧТО СОЗНАТЕЛЬНО НЕ ТРОГАЛИ:
   .footer (#333) — тёмный подвал, это фон страницы, а не кнопка;
   .top (#d17c91) — верхняя плашка, по ней отдельное решение владельца;
   основной цвет текста #222 — перекрашивать текст никто не просил.
   --------------------------------------------------------------------- */

/* ----------------------------------------------------------------------
   Правка №21, добавка: кружок выбора способа доставки/оплаты.

   Это единственное чёрное, что осталось на форме заказа после общего
   блока выше — и живёт оно не здесь, а в стилях самого компонента
   (sale.order.ajax/order/style.css), поэтому в разбор template_styles.css
   не попало. Нашлось живым обходом формы.

   Точка внутри кружка рисовалась картинкой images/radio.svg — чёрный
   круг 10x10, перекрасить его CSS нельзя. Вместо правки файла картинки
   рисуем точку самим CSS: заливка вишнёвая, поверх белое кольцо в 3px
   внутренней тенью. Кружок 18px минус рамка минус кольцо = точка 10px,
   ровно как была. Картинка больше не нужна, файл не трогаем.

   ЛОВУШКА, на которой споткнулся с первого раза: Битрикс собирает style.css
   компонента в ТОТ ЖЕ бандл, что и template_styles.css, и кладёт его ПОСЛЕ
   нашего файла. Значит «наш файл грузится позже» здесь неверно — при равной
   специфичности (0,3,1) выигрывает компонент. Поэтому селектор якорится на
   #bx-soa-order: (1,3,1) бьёт (0,3,1) при любом порядке в файле.
   ---------------------------------------------------------------------- */
#bx-soa-order .bx-soa-pp-company input[type="checkbox"].bx-soa-pp-company-checkbox {
  border-color: var(--ch-wine);
}

#bx-soa-order .bx-soa-pp-company input[type="checkbox"].bx-soa-pp-company-checkbox:checked {
  background-image: none;
  background-color: var(--ch-wine);
  box-shadow: inset 0 0 0 3px #fff;
}

/* ----------------------------------------------------------------------
   Правка №21, добавка 2: рамка блока «Круглосуточная доставка» в шапке.

   Правило .delivery-block-header (border: 1px solid #222) лежит не в
   template_styles.css, а в другом подключаемом файле, поэтому в разбор
   не попало — нашлось живым обходом страниц.

   Якорим на .header__catalog: (0,2,0) против (0,1,0) у исходного правила,
   чтобы не зависеть от того, в каком порядке Битрикс склеит бандл.
   ---------------------------------------------------------------------- */
.header__catalog .delivery-block-header {
  border-color: var(--ch-wine);
}

/* ======================================================================
   Правка №22 (30.07.2026) — форма заказа: окантовка и скругления.

   В правке №21 менялся только ЧЁРНЫЙ, а поля формы серые (#ececec) —
   под тот фильтр они не попали, и форма осталась со старыми 6px, пока
   корзина уже жила на 12/16/18px. Здесь форма приводится к тому же
   масштабу скруглений и к той же розовой окантовке.

   Всё якорится на #bx-soa-order — единственный общий предок всей формы.
   Это не украшательство селектора: часть правил (карточки способов
   доставки/оплаты) приходит из style.css компонента sale.order.ajax,
   который Битрикс кладёт в общий бандл ПОСЛЕ template_styles.css.
   Выигрывать порядком нельзя, только специфичностью — ID даёт (1,x,y).
   ====================================================================== */

/* --- поля ввода, селекты, многострочные поля --- */
#bx-soa-order .form-control,
#bx-soa-order select,
#bx-soa-order textarea {
  border-radius: 12px;
  border-color: var(--ch-blush-line);
}

#bx-soa-order .form-control:focus,
#bx-soa-order select:focus,
#bx-soa-order textarea:focus {
  border-color: var(--ch-wine);
}

/* --- карточки способов доставки и оплаты --- */
#bx-soa-order .bx-soa-pp-company {
  border-radius: 16px;
  border-color: var(--ch-blush-line);
}

/* Выбранный способ раньше отличался ТОЛЬКО точкой в кружке — сама карточка
   оставалась серой, как остальные. Подсвечиваем её рамкой: то же правило
   «выбрано = вишнёвый», что уже действует на вкладках и вариантах товара */
#bx-soa-order .bx-soa-pp-company.bx-selected {
  border-color: var(--ch-wine);
}

/* --- кнопки формы --- */
#bx-soa-order .order__button,
#bx-soa-order .order__btn,
#bx-soa-order .order__btn_outline,
#bx-soa-order .order__editstep {
  border-radius: 12px;
}

/* --- панель с итогом --- */
/* Устроена ровно как панель корзины: на мобильном штатный блок стилей
   снимает у неё фон и паддинг (@media max-width 767.98px, ~стр. 8532),
   поэтому фон возвращаем только от 768px — иначе он «протечёт» на телефон */
#bx-soa-order .order__form {
  border-radius: 18px;
}

@media only screen and (min-width: 768px) {
  #bx-soa-order .order__form {
    background: var(--ch-blush);
  }
}

/* ======================================================================
   Правка №23 (30.07.2026) — строка шапки: поиск, «Каталог», «24/7».

   Просьба была про поле «Искать в каталоге»: серая рамка #d6d7db и
   радиус 6px, тогда как поля корзины и формы заказа уже на розовой
   окантовке и 12px.

   Вместе с полем поднимаю до 12px двух его соседей по той же строке —
   кнопку «Каталог» и блок «Круглосуточная доставка». Если округлить
   только поле, в шапке окажется 12px между двумя 6px, и это читается
   не как замысел, а как недоделка. Больше в этой правке ничего.

   Поле поиска — без класса, зацепка по контейнеру (.header__search
   и мобильный .header-mobile__search), а не по id: id выдаёт компонент
   поиска Битрикса, и он привязан к конкретному вызову компонента.
   ====================================================================== */

.header__search input[type="text"],
.header-mobile__search input[type="text"] {
  border-radius: 12px;
  border-color: var(--ch-blush-line);
}

.header__search input[type="text"]:focus,
.header-mobile__search input[type="text"]:focus {
  border-color: var(--ch-wine);
}

.header__button,
.header-mobile__button,
.header__catalog .delivery-block-header {
  border-radius: 12px;
}

/* ======================================================================
   Правка №24 (30.07.2026) — пыльно-розовый #FCEFF3: верхняя плашка
   и кнопка «Каталог».

   ГЛАВНОЕ, ЧТО ПРИШЛОСЬ СДЕЛАТЬ СВЕРХ ЗАМЕНЫ ФОНА.
   И плашка, и кнопка держали на себе БЕЛЫЙ текст и БЕЛЫЕ иконки —
   на #FCEFF3 всё это стало бы невидимым. Поэтому вместе с фоном
   перекрашены: текст плашки, два лиственных узора по краям плашки
   и иконка внутри кнопки.

   Фон самой плашки здесь НЕ задаётся. Он приходит инлайном из свойства
   BACKGROUND_COLOR элемента инфоблока 41 (шаблон news.list/top,
   строка 24) — то есть это данные, правятся в админке. Перебивать
   инлайн пришлось бы через !important; вместо этого значение изменено
   в самом инфоблоке, у обоих городов.

   Белые SVG перекрашены не заменой файлов, а масками: картинка идёт
   в mask-image, а видимый цвет даёт background-color. Файлы img/*.svg
   не тронуты, откат — удаление этого блока.
   Пути к маскам абсолютные: Битрикс переписывает относительные url(/local/templates/happy/)
   при склейке бандла для background, а на mask полагаться не стоит.
   ====================================================================== */
:root {
  --ch-dusty: #fceff3;         /* пыльно-розовый, задан владельцем */
  --ch-dusty-hover: #f6dfe6;   /* он же на полтона глубже — для наведения */
}

/* --- верхняя плашка: текст --- */
.top__title {
  color: var(--ch-wine);
}

/* --- верхняя плашка: лиственные узоры по краям --- */
/* Были белым по тёмно-розовому. На светлом фоне тот же приём —
   тон чуть глубже фона, поэтому вишнёвый с прозрачностью 10% */
.top__bg:before,
.top__bg:after {
  background-image: none;
  background-color: rgba(165, 37, 76, 0.10);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.top__bg:before {
  -webkit-mask-image: url(/local/templates/happy/img/top-left.svg);
  mask-image: url(/local/templates/happy/img/top-left.svg);
}

.top__bg:after {
  -webkit-mask-image: url(/local/templates/happy/img/top-right.svg);
  mask-image: url(/local/templates/happy/img/top-right.svg);
}

/* --- иконка внутри кнопки «Каталог» --- */
/* :not(.active) обязателен: в раскрытом состоянии штатное правило
   подставляет в :before другую картинку — крестик btn-close-desktop.svg.
   Без исключения маска каталожной иконки обрезала бы этот крестик
   по своей форме. В раскрытом состоянии всё остаётся штатным */
.header__button:not(.active):before,
.header-mobile__button:before {
  background-image: none;
  background-color: var(--ch-wine);
  -webkit-mask: url(/local/templates/happy/img/button.svg) no-repeat center;
  mask: url(/local/templates/happy/img/button.svg) no-repeat center;
}

/* мобильная иконка рисовалась с background-size: contain — повторяем,
   иначе она сменит размер. Десктопная шла в своём размере, ей не нужно */
.header-mobile__button:before {
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ======================================================================
   Правка №25 (31.07.2026) — кружок со скидкой на баннере «Букет дня».

   Число процента приходит из PHP (расчёт от реальных цен товара,
   include/buket-dnya/index.php), здесь только отрисовка кружка.

   Позиция — правый верхний угол ВСЕЙ плашки (.bd-banner), не фото и не
   контента отдельно: у .bd-banner уже нет своего position, значит нужно
   задать position: relative, иначе кружок уедет к ближайшему
   спозиционированному предку выше по DOM.
   ====================================================================== */
.bd-banner {
  position: relative;
}

.bd-banner__discount {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ch-wine);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(165, 37, 76, 0.35);
}

@media only screen and (max-width: 767.98px) {
  .bd-banner__discount {
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    font-size: 11px;
  }
}

/* ======================================================================
   Правка №27 (31.07.2026) — новый промо-баннер, ТОЛЬКО мобильный экран.
   Десктопная плашка (.top) не тронута, скрывается на мобильном тем же
   media-query, что открывает этот блок.

   Разметка: components/bitrix/news.list/top/template.php, блок
   .top-promo-mobile, отдельно от старого .top в том же цикле по $arItem.
   Фото — местные PNG/WebP с прозрачным фоном (img/promo-chocolate.*,
   img/promo-box.*), не растровые копии всего баннера. Текст — обычный
   HTML, три строки заданы жёстко в разметке (<br>), а не через свойства
   инфоблока: копия зафиксирована владельцем дословно, площадки для
   редактирования из админки в этой правке не делали.
   ====================================================================== */

.top-promo-mobile {
  display: none;
}

@media only screen and (max-width: 767.98px) {
  /* прячем старую текстовую плашку и открываем новую только на мобильном */
  .top { display: none; }

  /* ширина -- ровно как у баннера "Букет дня": тот же расчёт, что даёт
     мобильный .container (width:100%; padding:0 16px на этом брейкпоинте,
     width:540px levelfrom 575.98 до 767.98) -- calc + max-width повторяют
     оба режима без обращения к разметке .container напрямую */
  .top-promo-mobile {
    display: grid;
    /* центр расширен под строку оценок. Взято из пустых полей, замер:
       у шоколадки 12px letterbox (картинка 92px в колонке 104px),
       у коробки 15px (72px в 87px) -- сами картинки не уменьшились */
    grid-template-columns: 27% 51% 22%;
    align-items: stretch;
    column-gap: 4px;
    width: calc(100% - 32px);
    max-width: 508px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 6px 9px 6px 10px;
    background: linear-gradient(110deg, #fff7f9 0%, #fcecf2 55%, #fff8fa 100%);
    border: 1.5px solid #c91855;
    border-radius: 15px;
    box-shadow: 0 3px 12px rgba(111, 30, 60, 0.06);
    overflow: hidden;
  }

  /* --- левая колонка: шоколадки --- */
  .top-promo-mobile__choc {
    align-self: center;
  }
  /* Правка №46б (15.08.2026): было 132px. Высоту всего баннера задавала
     именно эта картинка — её тянет ШИРИНА колонки (600x860 при ширине
     ~91px даёт 130px высоты), а не max-height. Поэтому, чтобы баннер
     сел на высоту убранного текста, потолок пришлось опустить и здесь:
     object-fit: contain ужимает фото пропорционально, не обрезая. */
  .top-promo-mobile__choc img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    object-position: left top;
  }

  /* --- центральная колонка: текст --- */
  /* flex-колонка нужна, чтобы прижать чип к низу строки (см. .top-promo-mobile__chip) */
  .top-promo-mobile__content {
    display: flex;
    flex-direction: column;
  }

  .top-promo-mobile__title {
    margin: 0;
    color: #b01850;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-align: left;
  }

  /* Правка №46б (15.08.2026): подзаголовок «Сладкий комплимент для
     получателя» убран с МОБИЛЬНОГО по просьбе владельца — чип
     «Доставка на воде / В фирменной коробке» встаёт сразу под
     заголовком, и баннер садится по высоте на 26px текста + 5px отступа.
     Скрыт, а не удалён из разметки, СОЗНАТЕЛЬНО: шаблон
     news.list/top общий, и на десктопе этот же абзац показывается в
     промо рядом с «Букетом дня», где высота подогнана к баннеру ровно
     в 208px — удаление из разметки сломало бы там пару.
     Вернуть на мобильном: убрать display: none. */
  .top-promo-mobile__text {
    display: none;
    margin: 5px 0 0;
    color: #303030;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
  }

  .top-promo-mobile__chip {
    display: block;
    width: fit-content;
    max-width: 100%;
    /* чип теперь сразу под подзаголовком (не прижат к низу):
       нижнюю линию колонки держит строка оценок под ним */
    margin-top: 7px;
    padding: 4px 7px;
    background: #f9dfe8;
    color: #ba2858;
    border: 1px solid rgba(201, 55, 102, 0.16);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    /* две строки заданы <br> в разметке, каждая начинается с точки.
       Выравнивание по левому краю. nowrap на всём блоке нельзя (тогда
       <br> игнорируется по ширине и текст вылезает), поэтому разрешаем
       перенос только по <br>: строки короткие и сами не рвутся */
    text-align: left;
    word-break: keep-all;
    overflow-wrap: normal;
    box-sizing: border-box;
  }

  /* --- оценки на картах, под чипом --- */
  /* Компонент тот же, что в шапке, поэтому тащит её отступы: у
     .header__ratings свой margin-top:20px и высота 31px при тексте 15px.
     Гасим здесь, в шапке правила остаются нетронутыми */
  .top-promo-mobile__ratings {
    margin-top: auto;
    padding-top: 5px;
    line-height: 1;
  }

  .top-promo-mobile__ratings .header__ratings {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    line-height: 1;
  }

  /* margin-top:16px у второй оценки -- из мобильной шапки, где они стоят
     столбиком. Здесь строка горизонтальная, отступ обнуляем */
  .top-promo-mobile__ratings .header__rating {
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
    margin: 0;
  }

  /* --- правая колонка: коробка + 24/7 --- */
  .top-promo-mobile__side {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* без круглой подложки -- то же простое обращение с фото, что у шоколадки */
  .top-promo-mobile__box {
    align-self: center;
    width: 100%;
  }
  /* коробка показывается ЦЕЛИКОМ -- object-fit:contain и height:auto,
     обрезки нет. max-height не режет картинку, а ограничивает её масштаб:
     иначе вертикальная коробка (450x651) растягивает всю строку сетки и
     баннер вырастает по высоте. 104px подобрано так, чтобы правая колонка
     (коробка + бейдж 24/7) уложилась вровень с левой колонкой шоколадок */
  /* Правка №46б (15.08.2026): было 104px. Уменьшено пропорционально
     (height: auto + object-fit: contain — фото не обрезается и не
     искажается) под новую высоту строки: коробка 76 + бейдж 24 ≈ 100,
     вровень с левой колонкой. */
  .top-promo-mobile__box img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 76px;
    margin: 0 auto;
    object-fit: contain;
  }

  .top-promo-mobile__badge {
    /* margin-top: auto -- прижимает бейдж к низу колонки, вровень с чипом слева */
    margin-top: auto;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #e898b4;
    border-radius: 999px;
    color: #c92d61;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }
}

/* узкие экраны 360-374.98px: чуть уменьшаем, сетку не ломаем */
@media only screen and (max-width: 374.98px) {
  .top-promo-mobile {
    column-gap: 5px;
    padding: 5px 7px 5px 8px;
  }
  .top-promo-mobile__title { font-size: 14.5px; }
  .top-promo-mobile__text { font-size: 11px; }
  /* на 360px центр ~160px -- оценки в 11px (147px) влезают, но без запаса;
     10px даёт 134px и оставляет воздух */
  .top-promo-mobile__ratings .header__rating { font-size: 10px; }
  .top-promo-mobile__ratings .header__ratings { gap: 8px; }
  /* на узких экранах коробку не подрезаем, ширину задаёт сама колонка */
}

/* Добавка к правке 27: в header.php:1570 живёт старый инлайн-стиль,
   старше всех наших правок, который держит .top видимым через important
   на ширине до 991.98px. Чужой код не трогаем, перебиваем тем же
   important, но с более высокой специфичностью -- так побеждаем
   независимо от порядка в документе. */
@media only screen and (max-width: 767.98px) {
  body .top {
    display: none !important;
  }
}

/* ============================================================
   Правка №28, 2026-07-31 — блок «Букеты» первым на главной.
   Разметку не трогали: блок использует тот же шаблон showcase,
   что и Витрина, поэтому всё различие — в этой обёртке .home-bouquets.
   ============================================================ */

/* На компьютере 8 карточек (два ряда по четыре), на планшете и телефоне 6.
   Сетка .showcase__grid переходит на 3 колонки с 991.98px — там 8 штук легли бы
   как 3+3+2 с дырой, поэтому последние две карточки прячем. */
@media only screen and (max-width: 991.98px) {
  .home-bouquets .showcase__grid > *:nth-child(n + 7) {
    display: none;
  }
}

/* Правка №31, 2026-07-31 — единый вертикальный ритм главной, 15px.
   Половина прежних 30px между заголовком блока и первым рядом карточек;
   владелец попросил свести к этому же значению все зазоры первого экрана.
   Всё scoped внутрь .home-sections (и её ближайшего соседа): классы .section
   и .title — общие для всего сайта, глобальная правка задела бы остальные
   страницы (см. решение от 2026-07-25 про home-h1/home-sections). */

/* Заголовок блока → его содержимое: было 30px */
.home-sections h2.title {
  margin-bottom: 15px;
}

/* Между секциями внутри .home-sections: было 48px (баннер→Хиты),
   80px (Хиты→Витрина, Витрина→Каталог). Соседние margin схлопываются
   по большему, поэтому обе стороны выставляем одинаково. */
.home-sections .showcase.section,
.home-sections .categories.section {
  margin-top: 15px;
  margin-bottom: 15px;
}

/* Перебиваем прежние точечные правила правки №28 (48px/56px) —
   у них выше специфичность, одного правила выше не хватило бы. */
.home-sections .home-bouquets .showcase.section {
  margin-top: 15px;
  margin-bottom: 15px;
}

.home-bouquets + .showcase.section {
  margin-top: 15px;
  margin-bottom: 15px;
}

/* Соседний блок «Поможем с выбором букета цветов» — и зазор до него
   от блока «Каталог», и зазор от него вниз до «Курьер Счастья…».
   Оба были 80px от общего правила .section. */
.home-sections + .grab.section {
  margin-top: 15px;
  margin-bottom: 15px;
}


/* ======================================================================
   Правка №30 (31.07.2026) — в мобильной шапке вместо оценок иконки
   мессенджеров. Сами оценки переехали в промо-баннер выше (правка №28).

   Иконки .vk/.tg переиспользуют готовые фоновые картинки из блока
   «Мы в сети» в подвале (правила .vk/.tg, стр. ~4993) -- поэтому здесь
   для них только размер, без background-image. У MAX своей SVG нет,
   берём max-auth-icon.png, уже применяемый на форме авторизации.

   Старые правила .header-mobile__ratings оставлены в файле: разметки
   с этим классом больше нет, они ничего не находят и не мешают, но
   пригодятся, если оценки решат вернуть в шапку.
   ====================================================================== */
.header-mobile__social {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Официальные логотипы с Викисклада (общественное достояние), приведены
   к одному холсту 96x96 без искажения формы: Telegram и WhatsApp круглые,
   ВКонтакте и MAX -- скруглённый квадрат, как у самих компаний.
   Показ 32px, файлы 96px -- запас под Retina. Скругление НЕ задаём:
   форма зашита в саму картинку, иначе обрежем чужой логотип. */
.header-mobile__social {
  margin: 0 10px;
}

.header-mobile__social-link {
  display: block;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

.header-mobile__social-link_tg  { background-image: url(/local/templates/happy/img/social-tg-v1.png); }
.header-mobile__social-link_wa  { background-image: url(/local/templates/happy/img/social-wa-v1.png); }
.header-mobile__social-link_vk  { background-image: url(/local/templates/happy/img/social-vk-v1.png); }
.header-mobile__social-link_max { background-image: url(/local/templates/happy/img/social-max-v1.png); }

/* Правка №39 (Этап 3, п.6, 2026-08-08) — телефон в мобильной шапке.
   Не картинка-логотип, как у остальных (нет бренд-ассета для "звонка"),
   поэтому инлайновая SVG внутри <a> + подложка в цвет дизайн-системы,
   чтобы кружок не терялся рядом с цветными логотипами мессенджеров. */
.header-mobile__social-link_phone {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ch-blush, #fdf2f5);
  border-radius: 50%;
}

@media screen and (max-width: 374px) {
  .header-mobile__social {
    gap: 6px;
  }
  .header-mobile__social-link {
    width: 27px;
    height: 27px;
  }
}

/* ======================================================================
   Правка №33 (01.08.2026) — первый экран десктопа: баннер и H1 в две
   колонки, скидка подтянута к цене, карточки товара ниже.

   Замер до правки (окно 1280): баннер «Букет дня» занимал всю ширину
   1204px, при этом всё его содержимое (фото 220px + текст с кнопкой
   ~155px) укладывалось в левые ~375px -- справа больше 800px пустоты.
   Значок «−40%» висел в правом верхнем углу, в 800px от цены, к которой
   относится. Теперь баннер занимает половину, вторую половину забирает
   заголовок H1, который раньше стоял отдельной строкой выше.

   Обёртка .home-hero добавлена в header.php (H1 и баннер там прямые
   соседи в DOM -- отключённый старый блок между ними ничего не выводит).
   Всё ниже -- только для десктопа: на мобильном одна колонка, как было.
   ====================================================================== */

@media only screen and (min-width: 992px) {
  .home-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 30px;
    max-width: 1244px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* баннер -- левая колонка */
  .home-hero > .container:has(.bd-banner) {
    order: 1;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
  }

  /* заголовок -- правая колонка, больше не тянется на всю ширину */
  .home-hero .home-h1 {
    order: 2;
    margin: 0;
  }

  .home-hero .home-h1 .container {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
  }

  .home-hero .home-h1 h1 {
    text-align: left;
    margin: 0;
  }

  /* город в заголовке: на всю ширину строкой ниже он тут не нужен */
  .home-hero .home-h1 .h1__city {
    display: inline-flex;
    width: auto;
    margin: 0 0 0 6px;
    vertical-align: baseline;
  }

  /* фото букета: колонка вдвое уже, поэтому фото компактнее */
  .home-hero .bd-banner__photo {
    flex: 0 0 190px;
    height: 190px;
  }

  .home-hero .bd-banner__content {
    padding: 18px 22px;
  }
}

/* --- значок скидки: теперь в строке с ценой, а не в углу баннера --- */
.bd-banner__prices {
  align-items: center;
}

.bd-banner__discount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ch-wine);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* прежнее правило делало из значка круг 56px в углу -- гасим только то,
   что мешает: позиционирование и фиксированный размер */
.bd-banner .bd-banner__discount {
  position: static;
  top: auto;
  right: auto;
  width: auto;
  height: auto;
  box-shadow: none;
}

/* ======================================================================
   Карточки товара на десктопе -- ОТМЕНЕНО 01.08.2026 (правка №36).

   Была попытка укоротить карточку: фото 370px -> 300px при ширине 286px,
   то есть пропорция 1:1.29 -> 1:1.05. Владелец: фотографии снимают
   специально под 3:4, а при укорочении object-fit: cover срезал у них
   верх и низ. Возвращаем штатную высоту шаблона -- правило снято целиком,
   ничего взамен не ставим.

   Затем (01.08.2026, правка №36а) окну задана точная пропорция 3:4.
   Замер: исходники грузятся 360x480 -- это ровно 3:4, а штатное окно
   286x370 -- это 1:1.294. Из-за object-fit: cover у каждой фотографии
   срезалось ~11px по высоте, по ~1.5% сверху и снизу. Так было и до
   всех наших правок.

   Задаём aspect-ratio, а не фиксированную высоту: ширина карточки
   зависит от вьюпорта (286px на 1440, меньше на 1024), и жёсткая
   высота снова разошлась бы с пропорцией на других ширинах.
   ====================================================================== */
@media only screen and (min-width: 992px) {
  .product-item-image-wrapper,
  .product-item-image-slider-slide-container,
  .product-item-image-slide {
    height: auto !important;
    aspect-ratio: 3 / 4;
  }

  .product-item-image-wrapper img,
  .product-item-image-slide img {
    height: 100%;
  }
}

/* --- скидка на мобильном: как было, круг в углу баннера ---
   Просьба «подтянуть скидку к цене» относилась к десктопу. На узкой
   колонке пилюля не помещается в строку с ценой и переносится вниз,
   съедая строку (замер 390px: блок цен вырос с 38 до 61px). Поэтому
   на мобильном возвращаем прежний круглый значок в правом верхнем углу
   -- разметка одна, различается только оформление. */
@media only screen and (max-width: 991.98px) {
  .bd-banner .bd-banner__discount {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 11px;
    box-shadow: 0 2px 8px rgba(165, 37, 76, 0.35);
  }
}

/* ======================================================================
   Правка №35 (01.08.2026) — первый экран десктопа, вторая версия.

   Что изменилось против правки №33: заголовок H1 вернулся отдельной
   строкой под горизонтальное меню (и теперь помещается в одну строку,
   потому что снова занимает всю ширину), а в пару к «Букету дня» встал
   промо-баннер с шоколадкой -- тот, что раньше висел над шапкой.

   Промо-баннер на десктопе выводится ВТОРЫМ экземпляром компонента,
   внутри .home-hero. Первый экземпляр (над шапкой) остаётся мобильным
   и на десктопе скрыт. Перенос одного узла не подошёл бы: на мобильном
   баннер должен остаться наверху, а он там уже утверждён владельцем.

   Композиция промо на десктопе повторяет мобильную: шоколадки слева,
   текст с чипом в рамке по центру, коробка и «24/7» в окантовке справа.
   ====================================================================== */

/* второй экземпляр промо -- только для десктопа */
.home-hero__promo {
  display: none;
}

@media only screen and (min-width: 992px) {
  /* верхний экземпляр над шапкой прячем -- он мобильный */
  .top-promo-mobile {
    display: none;
  }

  /* Старую текстовую плашку прячем на десктопе ОБА раза: и наверху, и внутри
     hero. Шаблон news.list/top выводит в одном проходе и .top, и
     .top-promo-mobile, поэтому второй вызов компонента принёс с собой ещё
     одну копию старой плашки -- без этого правила она вылезала дважды. */
  body .top {
    display: none !important;
  }

  /* заголовок: одна строка под меню, во всю ширину */
  .home-h1 h1 {
    white-space: nowrap;
  }

  .home-h1 .h1__city {
    display: inline-flex;
    width: auto;
    margin: 0 0 0 8px;
    vertical-align: baseline;
  }

  /* два баннера в ряд, одинаковой ширины */
  /* min-width:0 обязателен: без него содержимое шире колонки распирает
     грид, и вместо «1fr 1fr» получается «1244px 356px» (замер) */
  /* отступ сверху равен нижнему: замер до правки -- от нижней линии букв
     H1 до баннеров 0px, от баннеров до букв «Хиты продаж» 17px */
  .home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 24px;
    max-width: 1244px;
    margin: 17px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .home-hero > .container:has(.bd-banner) {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
  }

  .home-hero__promo {
    display: block;
    min-width: 0;
  }

  /* order задаём явно: от правки №33 на контейнере остался order:1, из-за
     чего промо (order:0 по умолчанию) вставало ПЕРЕД «Букетом дня» --
     колонки менялись местами (замер: container left=732, promo left=118) */
  .home-hero > .container:has(.bd-banner) {
    min-width: 0;
    order: 1;
  }

  .home-hero__promo {
    order: 2;
  }

  /* промо в правой колонке: та же сетка, что на мобильном */
  .home-hero__promo .top-promo-mobile {
    display: grid;
    grid-template-columns: 30% 44% 26%;
    align-items: stretch;
    column-gap: 10px;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    box-sizing: border-box;
    padding: 14px 16px;
    background: linear-gradient(110deg, #fff7f9 0%, #fcecf2 55%, #fff8fa 100%);
    border: 1.5px solid #c91855;
    border-radius: 16px;
    box-shadow: 0 3px 12px rgba(111, 30, 60, 0.06);
    overflow: hidden;
  }

  .home-hero__promo .top-promo-mobile__choc {
    align-self: center;
  }

  .home-hero__promo .top-promo-mobile__choc img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
    object-position: left center;
  }

  .home-hero__promo .top-promo-mobile__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .home-hero__promo .top-promo-mobile__title {
    margin: 0;
    color: #b01850;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: left;
  }

  .home-hero__promo .top-promo-mobile__text {
    display: block;
    margin: 7px 0 0;
    color: #303030;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
  }

  /* чип «Доставка на воде • В фирменной коробке» -- в окантовке, как на мобильном */
  .home-hero__promo .top-promo-mobile__chip {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 10px 0 0;
    padding: 6px 10px;
    background: #f9dfe8;
    color: #ba2858;
    border: 1px solid rgba(201, 55, 102, 0.16);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    box-sizing: border-box;
  }

  /* оценки скрыты: на десктопе они уже есть в строке меню */
  .home-hero__promo .top-promo-mobile__ratings {
    display: none;
  }

  /* коробка сверху, «24/7» в окантовке под ней -- как на мобильном */
  .home-hero__promo .top-promo-mobile__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .home-hero__promo .top-promo-mobile__box {
    width: 100%;
  }

  .home-hero__promo .top-promo-mobile__box img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 116px;
    object-fit: contain;
  }

  .home-hero__promo .top-promo-mobile__badge {
    margin: 0;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #e898b4;
    border-radius: 999px;
    color: #c92d61;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }
}

/* на 992-1199px колонка уже -- ужимаем текст, чтобы баннер не рос */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .home-hero { gap: 16px; }
  .home-hero__promo .top-promo-mobile { padding: 12px; column-gap: 8px; }
  .home-hero__promo .top-promo-mobile__title { font-size: 16px; }
  .home-hero__promo .top-promo-mobile__text { font-size: 12px; }
  .home-hero__promo .top-promo-mobile__chip { font-size: 11px; padding: 5px 8px; }
  .home-hero__promo .top-promo-mobile__box img { max-height: 96px; }
}

/* ---------------------------------------------------------------------
   Правка №41 (2026-08-12): блок входа над рядом кнопок покупки в карточке
   товара приглушён.

   Было: пунктирная плашка-пилюля (высота 54px на десктопе, 41px на
   мобильном, border-radius 30px) с вишнёвой рамкой и вишнёвой ссылкой —
   базовые правила .link-auth выше плюс раздел 7 редизайна, который теперь
   помечен как отменённый. Подчёркивание ссылки бралось из умолчания
   браузера и потому окрашивалось в вишнёвый вместе с текстом.

   Стало: тихая мелкая серая строка без рамки и без плашки. Текст фразы
   сменён в card/template.php на «Войти в кабинет», адрес /auth/ тот же.

   Два решения, которые стоит знать:
   1. Подчёркивание НЕ убрано совсем, а перекрашено в серое и тонкое.
      Владелец просил убрать «красное/акцентное подчёркивание и яркий
      цвет», при этом строка должна оставаться находимой теми, кто её
      ищет. Совсем без подчёркивания серый текст перестаёт читаться как
      ссылка.
   2. Цвет #757575, а не более светлый серый: на белом фоне он даёт
      контраст ~4,6:1 и проходит WCAG AA для обычного текста. Ходовой
      #8a8a8a выглядел бы приглушённее, но даёт ~3,45:1 и для
      функциональной ссылки это уже плохо читаемо.

   Правила намеренно в базовой области, а не в медиазапросе: они идут
   последними в файле и потому перекрывают и базовые .link-auth, и
   мобильные переопределения на 767.98px и 374.98px (одинаковая
   специфичность, побеждает более позднее правило).
   --------------------------------------------------------------------- */
.link-auth {
  border: none;
  border-radius: 0;
  padding: 0;
  height: auto;
  font-size: 13px;
  line-height: 150%;
  color: #757575;
}

.link-auth a {
  color: inherit;
  text-decoration-color: rgba(117, 117, 117, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.link-auth a:hover {
  color: var(--ch-ink);
  text-decoration-color: rgba(28, 26, 27, 0.55);
}

/* ---------------------------------------------------------------------
   Правка №45 (15.08.2026). Три связанных изменения, решение владельца
   после подтверждённого опыта.

   ПРЕДЫСТОРИЯ — чтобы никто не искал заново. Панель покупки на iPhone
   отрывалась от низа при скролле ВВЕРХ (Chrome и Яндекс; в Safari ровно).
   Перебрали и закрыли четыре версии: слой композитора (правка №42 —
   снимали на пробу, не помогло), привязка к visualViewport (правки №43 и
   №44 — браузер расхождения не отдаёт вовсе, delta 0 на каждом кадре,
   измерено на самом устройстве), подложка под меню (вариант D — не
   сработала, потому что само меню в этот момент не рисуется).
   Опыт через временный режим `?navtest` показал: если убрать нижнее меню
   и посадить панель на bottom: 0 — отрыва НЕТ ни в Яндексе, ни в Chrome,
   ни в Safari. Причина всё это время была в меню, а не в тулбаре.

   1. НИЖНЕЕ МЕНЮ УБРАНО с мобильного — но не потеряно. Тот же самый блок
      `.header__links` показывается внутри РАСКРЫТОГО БУРГЕРА. Разметку в
      `header.php` не трогали вовсе: блок уже содержит «Главная»,
      «Каталог», «Избранное», компонент корзины со счётчиком и «Войти»
      (`header.php:615-660`). Это принципиально — живые счётчики
      продолжают работать сами, без дублирования кода.

      `repeat(5, minmax(0, 1fr))`, а НЕ `repeat(5, 1fr)`: с `1fr` колонки
      не сжимаются ниже min-content, и ряд вылезал за экран — 419px при
      вьюпорте 390 (замерено). С `minmax(0, 1fr)` — 331px, влезает.

   2. ПАНЕЛЬ ПОКУПКИ на `bottom: 0`. Отступ 61px существовал ровно под
      убранное меню (71px высотой, перекрытие 10px).

   3. КНОПКА «В КОРЗИНЕ» больше не ломает ряд. Причина была в
      `card/template.php`: `setActiveCardButton` делал
      `$('.card-add-label').text('В корзине')`, а `.text()` стирает оба
      вложенных `<div>` — `card-add-label-desktop` и `card-add-label-mobile`.
      Правило `white-space: nowrap` из правки №40 нацелено на
      `card-add-label-mobile`, и после этого переставало совпадать —
      подпись переносилась в две строки. Разметку теперь восстанавливаем
      через `.html()`, симметрично обратной функции (заодно там исправлена
      давняя опечатка `.catd-add-label` → `.card-add-label`, из-за которой
      подпись не возвращалась в «В корзину» при удалении товара).

      Но одной починки JS мало — замеры на 390px (доступно 358):
        обычное состояние ...................... ряд 358, вылет 0
        как было (.text() съел разметку) ....... ряд 359.1, подпись в 2 строки
        только починить JS ..................... ряд 370.1, вылет 12.1
        JS + скрыть галочку .................... ряд 358, вылет 0  ← берём
      Галочка `.card__add.active:before` (26px + 8px отступа) на мобильном
      скрыта: её смысл дублируют слово «В корзине» и появившийся счётчик.

      На 320px активное состояние не влезает даже так — вылет 39px,
      виноват блок счётчика (90px против 41.6 у цены). Там подпись
      скрываем, остаётся счётчик (вариант A, выбран владельцем).
      Отвергнутый вариант: прятать плитки Telegram/MAX — на них висят цели
      `lead_telegram`/`lead_max`, замеры лидов просели бы.

   4. `.order-complete` — компенсация 87px (71px меню + 16px воздуха,
      стр. 10108) больше не нужна, иначе на экране «заказ принят» остался
      бы пустой провал. Оставляем только воздух и safe-area.

   Заодно снято: подложка «вариант D» (была прицеплена к меню) и временный
   режим `?navtest` вместе с его JS-блоком.
   Осталось мёртвым, но безвредным: `body.keyboard-open .header__links`
   (стр. ~7235) — меню и так скрыто; правило правки №2 не трогаем.
   --------------------------------------------------------------------- */

/* 1. Меню: снято снизу, показано в бургере */
@media only screen and (max-width: 991.98px) {
  .header__links {
    display: none;
  }

  .header.active .header__links {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: static;
    opacity: 1;
    visibility: visible;
    height: auto;
    padding: 14px 8px;
    gap: 0;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid #eee;
  }

  .header.active .header__links > * {
    margin: 0;
    min-width: 0;
    justify-self: center;
  }

  /* 4. экран «заказ принят»: отступ был под убранное меню */
  .order-complete {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* 2. Панель покупки — к самому низу */
@media only screen and (max-width: 767.98px) {
  .card__buttons {
    bottom: 0;
  }

  /* 3. активное состояние кнопки: галочка не нужна, она распирала ряд */
  .card__fixed .card__add.active:before {
    display: none;
  }
}

/* 3а. На самых узких экранах в активном состоянии оставляем счётчик */
@media only screen and (max-width: 374.98px) {
  .card__fixed .card__add.active .card-add-label {
    display: none;
  }
}

/* ======================================================================
   Правка №46 (15.08.2026) — плашка «Предзаказ букетов к 1 сентября».
   Только мобильный экран (до 991.98px), самым верхом страницы, ВЫШЕ промо
   «Шоколадка» — так решил владелец 15.08. Цена решения: +56px к первому
   экрану, карточки товара уезжают с 521 на 577 (замер 390×844, DECISIONS.md).

   Разметка — header.php, сразу внутри .wrapper. Намеренно НЕ в шаблоне
   news.list/top: тот компонент подключается дважды (второй раз в hero), и
   всё, что в нём лежит, приезжает на страницу двумя копиями — на этом уже
   спотыкались, см. комментарий про дубль .top выше по файлу.

   Фон — img/sept-strip-school.jpg (750×117, 13 КБ), школьная тема, вторая
   картинка владельца (15.08, заменила цветочную). Имя файла НОВОЕ, а не
   перезапись старого, СОЗНАТЕЛЬНО: у картинок здесь `max-age` 30 дней, и
   при том же адресе все, кто уже открывал плашку, месяц видели бы прежнюю.
   Прежняя цветочная лежит рядом (img/sept-strip.jpg) — ни на что не
   ссылается, оставлена как быстрый возврат: поменять адрес обратно.
   Исходник был 2137×736 с белыми полями и вшитым скруглением; поля срезаны,
   белые уголки залиты цветом соседнего пикселя построчно (иначе после
   нашего border-radius по углам светились бы белые серпы), кроп подогнан
   ровно под 6,4:1 — пропорцию плашки, поэтому cover ничего не режет.
   Ценой этого срезан верх рюкзака: картинка сама по себе 5,17:1, целиком
   она влезла бы только при высоте плашки 69px вместо 56.

   Прежний фон (цветы) был: img/sept-strip.jpg (750×100, 26 КБ), пережата
   из исходных 1560×208 PNG на 491 КБ. Текст НЕ в картинке, а поверх неё
   обычным HTML — чтобы менять формулировку без перерисовки баннера.

   Путь к картинке абсолютный: относительные url(/local/templates/happy/) Битрикс переписывает при
   склейке бандла, лишний раз на это полагаться незачем.

   Читаемость текста держит белое свечение (text-shadow), а не подложка-
   плашка: середина картинки светлая и чистая, но по краям цветы — если
   владелец потом поставит другую картинку, буквы всё равно не потеряются.
   ====================================================================== */

.sept-strip {
  display: none;
}

@media only screen and (max-width: 991.98px) {
  .sept-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    /* по вертикали 4px, а не 8: две строки текста с подложкой занимают
       ~42px, и при 8px плашка выросла бы с 56 до ~61 — высоту держим */
    padding: 4px 16px;
    background-image: url(/local/templates/happy/img/sept-strip-school.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none;

    /* Ширина, рамка и скругление — ОДИН В ОДИН с промо «Шоколадка»
       (.top-promo-mobile выше по файлу): владелец попросил, чтобы две
       плашки читались как одна пара карточек. Значения скопированы, а не
       подобраны на глаз: calc(100% - 32px) / 508px / 1.5px #c91855 / 15px.
       Меняете там — поменяйте и здесь, иначе разъедутся.

       margin снизу 8px — та самая «пара пикселей», чтобы шоколадка не
       прилипала к плашке. Сверху 0: обе карточки в этом макете начинаются
       от самого верха, так было и до правки. */
    width: calc(100% - 32px);
    max-width: 508px;
    /* сверху 1px — тонкая белая полоска над плашкой (просьба владельца
       15.08), снизу 8px — зазор до промо «Шоколадка» */
    margin: 1px auto 8px;
    box-sizing: border-box;
    border: 1.5px solid #c91855;
    border-radius: 15px;
    box-shadow: 0 3px 12px rgba(111, 30, 60, 0.06);
    overflow: hidden;
  }

  /* inline-flex + wrap: стрелка держится рядом со словом, но если владелец
     впишет текст длиннее — строка перенесётся, а не вылезет за экран */
  /* Подложка под текстом (добавлена вместе со школьной картинкой).
     У прежней, цветочной, чистая середина была шире, и хватало одного
     свечения. У школьной предметы заходят к центру дальше: чистого места
     ~157px при тексте 243px, то есть надпись неизбежно ложится на книги и
     ручки — свечение её уже не вытягивало. Полупрозрачная плашка решает
     это независимо от картинки: поменяете фон ещё раз — читаемость не
     развалится. */
  /* Две строки — перенос задан <br> прямо в разметке (header.php), а не
     шириной: так строки рвутся там, где задумано («Предзаказ букетов» /
     «к 1 сентября»), а не там, куда попадёт.
     Поэтому блок именно inline-block, а НЕ inline-flex: во flex-контейнере
     <br> становится безучастным flex-элементом и переноса не даёт. */
  .sept-strip__text {
    display: inline-block;
    padding: 4px 13px;
    background: rgba(255, 255, 255, 0.82);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--ch-wine, #a5254c);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
  }

  .sept-strip__arrow {
    margin-left: 6px;
    font-weight: 400;
  }
}

@media only screen and (max-width: 374.98px) {
  .sept-strip {
    min-height: 50px;
  }

  .sept-strip__text {
    font-size: 13px;
  }
}


/* ============================================================
   Правка №60 (2026-08-21): липкая полоса «Итого · Оформить заказ»
   на странице оформления. Только мобильная версия.

   ЗАЧЕМ. Замер 21.08.2026 на 375x812: страница оформления 3 201 px,
   кнопка «Оформить заказ» лежит на отметке 1 971 px, итоговая сумма --
   на 1 853 px, и ни то, ни другое не липкое. То есть покупателю, уже
   заполнившему форму, нужно проскроллить 1 211 px (полтора экрана),
   чтобы найти кнопку. На десктопе та же кнопка -- 0,7 экрана. Оформление
   бросают 53,5% начавших, у мобильных 55,9% (логи за 30 дней).

   Полосу строит JS в шаблоне заказа (там же объяснено, почему не разметкой):
   она берёт сумму из живого блока .order__param_total и проксирует нажатие
   на настоящую кнопку .btn-order-save, а не дублирует её логику.

   Кнопке намеренно оставлен родной класс .order__button -- чтобы она
   выглядела ровно как кнопка сайта и менялась вместе с ней. Здесь
   переопределяется только раскладка: родная кнопка блочная во всю ширину,
   в полосе она должна делить строку с суммой.
   ============================================================ */
@media only screen and (max-width: 991.98px) {
  .courier-order-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
  }

  .courier-order-bar__total {
    font-size: 15px;
    font-weight: 600;
    line-height: 130%;
    white-space: nowrap;
    color: #1c1a1b;
  }

  .courier-order-bar__btn {
    width: auto;
    flex: 1 1 auto;
    padding: 12px 18px;
    min-height: 44px;
  }

  /* Место под полосу, чтобы она не закрывала последние поля формы. */
  body.courier-order-bar-on {
    padding-bottom: 72px;
  }

  /* Виджет Битрикс24 (z-index 10150) лёг бы прямо на полосу -- поднимаем его
     над ней тем же приёмом, что и над панелью покупки в карточке товара
     (правка №47): 72 полосы + 20 воздуха. */
  body.courier-order-bar-on .b24-widget-button-wrapper {
    bottom: 92px !important;
  }
}


/* ============================================================
   Правка №61 (2026-08-21): размер чипов выбора размера букета
   доведён до 44x44 px. Только мобильная версия.

   ЗАЧЕМ. Замер 21.08.2026 на 375x812: чипы XS/S/M имеют размеры
   34x27, 26x27 и 29x27 px при общепринятом минимуме зоны нажатия
   пальцем 44x44. Промахнуться по чипу 26 px легко, а это шаг, на
   котором покупатель выбирает, за сколько купить: карточка -> корзина
   даёт 9,2% перехода, теряется 91 человек из 100 (логи за 30 дней).

   Почему безопасно для карточек списка. Контейнер .product-item-scu-item-list
   уже flex с flex-wrap: wrap и gap 5px, ширина карточки на 375px -- 167px.
   Три чипа по 44 = 142px, помещаются. Четыре = 191px и переносятся на
   вторую строку, не вылезая за карточку. Товаров с четырьмя размерами
   в каталоге всего 4 из 93 (проверено по базе), с двумя -- 61, с тремя -- 28.

   Родной чип объявлен как display: list-item -- в inline-flex он ещё и
   центрует подпись, которая при min-height иначе прижалась бы кверху.
   Ничего, кроме раскладки, не меняется: фон, рамка, радиус и состояние
   .selected остаются прежними.
   ============================================================ */
@media only screen and (max-width: 991.98px) {
  .product-item-scu-item-text-container {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ============================================================
   Правка №63 (2026-08-21): блок «От нас в подарок» под фотографией
   в карточке товара. Что и почему — в комментарии в шаблоне карточки.

   Имя класса card__included, а НЕ card__gift: последний уже занят другим
   механизмом («Заказав этот букет вы получите в подарок» — товары-подарки
   из $arResult['GIFT'], строки 4157-4176 этого файла).

   Цвета взяты из фирменных переменных :root, чтобы блок жил вместе с
   остальной палитрой, а не выпадал из неё.
   ============================================================ */
.card__included {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--ch-blush, #fdf2f5);
  border: 1px solid var(--ch-blush-line, #f0dde3);
  border-radius: 12px;
}

.card__included-title {
  margin-bottom: 2px;
  color: var(--ch-wine, #a5254c);
  font-size: 14px;
  font-weight: 700;
  line-height: 130%;
}

.card__included-text {
  color: var(--ch-ink, #1c1a1b);
  font-size: 13px;
  line-height: 140%;
}


/* ============================================================
   Правка №65 (2026-08-21): первый экран карточки товара.
   Только мобильная версия, только страница товара.

   ЗАЧЕМ. Замер 21.08.2026 на 375x812: первые 278 px карточки (34% экрана)
   занимали две рекламные полосы и шапка, а не товар:
     .sept-strip       «Предзаказ букетов к 1 сентября»   56 px
     .top-promo-mobile «Шоколадка от нас» + рейтинги + 24/7  115 px
     .header-mobile    логотип, телефон, мессенджеры, каталог, поиск  98 px
   Решение владельца: обе полосы с карточки убрать, шапку закрепить сверху,
   чтобы каталог, поиск и телефон были под рукой на всей длине страницы.

   Про шоколадку: сообщение не потеряно, а переехало ближе к делу — правкой
   №63 оно попало в блок «От нас в подарок» прямо под фотографией букета,
   вместе с остальным комплектом.

   КАК ОГРАНИЧЕНО КАРТОЧКОЙ. Признак страницы товара — наличие липкой панели
   покупки .card__buttons; тот же приём применён правкой №47 для виджета
   Битрикс24. Своего класса у body на этих страницах нет (проверено).
   На главной, в каталоге и в корзине обе полосы остаются как были.

   🔴 ПРО СЛОЙ. z-index у закреплённой шапки намеренно 5, а не больше:
   выкатное меню-бургер (.header) — fixed с z-index 10 и разворачивается на
   весь экран. Дай шапке слой выше — она перекроет собственное меню.
   Панель покупки внизу (.card__buttons, z-index 9) с шапкой не пересекается.
   ============================================================ */
@media only screen and (max-width: 991.98px) {
  body:has(.card__buttons) .sept-strip,
  body:has(.card__buttons) .top-promo-mobile {
    display: none;
  }

  body:has(.card__buttons) .header-mobile {
    position: sticky;
    top: 0;
    z-index: 5;
  }
}


/* ============================================================
   Правка №66 (2026-08-21): подзаголовок блока «Дополните букет».
   Заголовок зовёт к действию, подзаголовок снимает главное возражение —
   «а это отдельная доставка и лишние деньги». Владелец подтвердил, что
   допник едет вместе с букетом одной доставкой.
   ============================================================ */
.carousel__subtitle {
  margin: -6px 0 14px;
  color: #6b6b6b;
  font-size: 14px;
  line-height: 140%;
}

@media only screen and (max-width: 767.98px) {
  .carousel__subtitle {
    margin: -2px 0 12px;
    font-size: 13px;
  }
}


/* ============================================================
   Правка №67 (2026-08-21): свёрнутый блок разделов каталога
   в карточке товара. Зачем и почему не удалён — в комментарии
   в шаблоне карточки.
   ============================================================ */
.courier-sections {
  border-top: 1px solid var(--ch-blush-line, #f0dde3);
  padding-top: 6px;
}

.courier-sections__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
}

/* убираем родной треугольник браузера, рисуем свой — он одинаков везде */
.courier-sections__summary::-webkit-details-marker {
  display: none;
}

.courier-sections__summary h2 {
  margin: 0;
  color: #6b6b6b;
  font-size: 15px;
  font-weight: 500;
  line-height: 130%;
}

.courier-sections__summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #9a9a9a;
  border-bottom: 2px solid #9a9a9a;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease-out;
}

.courier-sections[open] .courier-sections__summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.courier-sections .categories__grid {
  margin-top: 6px;
}


/* ============================================================
   Правка №64 (21.08.2026): «Купить в 1 клик» на карточке товара.
   Кнопка справа от размера + окно с двумя полями.
   Зачем именно заказ, а не заявка — в комментарии
   local/php_interface/CourierOneClickOrder.php.
   ============================================================ */
.courier-oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin-bottom: 18px;
}

/* Блок размеров занимает ровно столько, сколько нужно чипам, и отодвигает
   кнопку вправо. Так было не сразу: сначала он забирал всю строку (263 px из
   343 на экране 375), кнопке оставалось 72 px, и надпись ломалась на две
   строки — владелец справедливо сказал «не красиво».
   Нижний отступ у блока снимаем и переносим на весь ряд, иначе кнопка,
   выровненная по низу, провисала бы на 16–20 px ниже чипов. */
.courier-oc-row > div[id] {
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
  margin-bottom: 0;
}

.courier-oc-row > div[id] .product-item-scu-container,
.courier-oc-row > div[id] .product-item-scu-block,
.courier-oc-row > div[id] .product-item-scu-list,
.courier-oc-row > div[id] .product-item-scu-item-list {
  width: auto;
}

/* На карточках без размеров (625 из 718) кнопка занимает ряд целиком */
.courier-oc-row--alone .courier-oc-btn {
  flex: 1 1 100%;
}

/* Кнопка контурная, а не сплошная: сплошной винный прямоугольник спорил с
   такой же сплошной «В корзину» в нижней панели. «В корзину» — основной путь,
   «в 1 клик» — второй, и вид это показывает. Вернуть сплошную: поменять
   background на var(--ch-wine) и color на #fff. */
.courier-oc-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;            /* вровень с чипами размера, они ровно 44 px */
  padding: 0 18px;
  border: 1px solid var(--ch-wine, #a5254c);
  border-radius: 8px;
  background: #fff;
  color: var(--ch-wine, #a5254c);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease-out, color 0.15s ease-out;
}

.courier-oc-btn:hover {
  background: var(--ch-wine, #a5254c);
  color: #fff;
}

.courier-oc-btn:active { transform: translateY(1px); }

@media only screen and (max-width: 767.98px) {
  .courier-oc-row { gap: 10px; margin-bottom: 16px; }
  .courier-oc-btn { padding: 0 14px; }
}

/* ---------------------------------------------------- окно */
/* Прокручивается САМО окно, а не страница под ним: на телефоне клавиатура
   съедает около 330 px, и кнопка «Жду звонка» иначе оказывалась под ней,
   а прокрутить внутри было нечего. Поэтому выравнивание по верху и
   собственная прокрутка, а не центрирование. */
.courier-oc {
  position: fixed;
  inset: 0;
  z-index: 20;            /* выше выкатного меню (10) и панели покупки (9) */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px 32px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.courier-oc[hidden] { display: none; }

body.courier-oc-open { overflow: hidden; }

/* Виджет Битрикс24 сидит на слое 10150 и перекрывает всё, что ниже, — на
   экранах от 667 px и короче он ложился прямо на кнопку отправки. Пока окно
   открыто, убираем его; !important нужен, потому что виджет расставляет свои
   стили сам. */
body.courier-oc-open .b24-widget-button-wrapper {
  display: none !important;
}

.courier-oc__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 26, 27, 0.55);
}

.courier-oc__box {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: auto 0;
  padding: 24px 20px 20px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(28, 26, 27, 0.22);
}

.courier-oc__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6b6b6b;
  cursor: pointer;
  line-height: 0;
}

.courier-oc__close:hover { background: var(--ch-blush, #fdf2f5); }

.courier-oc__title {
  margin-bottom: 6px;
  padding-right: 28px;
  color: var(--ch-ink, #1c1a1b);
  font-size: 20px;
  font-weight: 500;
  line-height: 125%;
}

.courier-oc__what {
  margin-bottom: 16px;
  color: #6b6b6b;
  font-size: 14px;
  line-height: 140%;
}

.courier-oc__input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 13px 14px;
  border: 1px solid var(--ch-blush-line, #f0dde3);
  border-radius: 8px;
  background: #fff;
  color: var(--ch-ink, #1c1a1b);
  font-size: 16px;   /* 16px — иначе iOS увеличивает страницу при фокусе */
  line-height: 1.2;
}

.courier-oc__input:focus {
  outline: none;
  border-color: var(--ch-wine, #a5254c);
}

.courier-oc__error {
  margin: -2px 0 10px;
  color: #c0392b;
  font-size: 13px;
  line-height: 135%;
}

.courier-oc__error[hidden] { display: none; }

.courier-oc__submit {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 14px;
  border: 0;
  border-radius: 8px;
  background: var(--ch-wine, #a5254c);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.courier-oc__submit:hover { background: #8d1f41; }
.courier-oc__submit:disabled { opacity: 0.6; cursor: default; }

.courier-oc__note {
  margin-top: 12px;
  color: #8a8a8a;
  font-size: 12px;
  line-height: 145%;
}

.courier-oc__pane[hidden] { display: none; }



/* ============================================================
   Правки №69, №70, №71 (22.08.2026): вид карточки товара на телефоне.
   Всё — только мобильная ширина и только страница товара
   (признак — липкая панель покупки .card__buttons, тот же приём,
   что в правках №47 и №65).
   ============================================================ */
@media only screen and (max-width: 991.98px) {

  /* --- №71. Высота фотографии ---
     Было 457 px из 812 — 56% экрана, а от полезной площади (без липкой шапки
     98 px и панели покупки 110 px) все 75%. На первый экран не попадали ни
     название букета, ни выбор размера.
     Ограничиваем высоту БЕЗ кадрирования: ширина считается сама, картинка
     центрируется, по бокам появляются поля на белом фоне. Кадрирование в
     квадрат освободило бы столько же, но срезало бы четверть кадра — снимки
     вертикальные, «девушка держит букет», единой точки обреза для всех нет. */
  /* сужаем колонку, а не картинку */
  .card__left {
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- №70. Хлебные крошки над фотографией ---
     36 px плюс 32 px отступов в самом дорогом месте экрана, пользы покупателю
     на телефоне нет. Скрываем только здесь: на десктопе и на остальных
     страницах они остаются.
     🔴 Путь для поисковика при этом НЕ теряется: правка №70 добавила в шаблон
     крошек отдельное машинное описание (JSON-LD BreadcrumbList), которое не
     зависит от того, видно крошки или нет. */
  body:has(.card__buttons) .breadcrumbs {
    display: none;
  }

  /* --- №69. Зазор перед блоком «Дополните букет» ---
     У блока .carousel отступы по 80 px сверху и снизу (строка 379). Пока он
     лежал внизу страницы, это было уместно; после переноса правкой №66 он стоит
     вплотную к покупке, и 80 px читаются как пустая дыра между кнопкой
     «Купить в 1 клик» и заголовком блока. */
  .card__right #courier-gifts .carousel {
    margin-top: 24px;
    margin-bottom: 24px;
  }
}


/* ============================================================
   Правка №72 (22.08.2026): короткий состав прячем там, где есть детальный.
   Детальный переехал под название из убранной вкладки «Описание» —
   это тот же текст, но с количествами («Белые пионы — 3 шт.»).
   Там, где описания нет, короткий состав остаётся единственным и виден.
   ============================================================ */
.card__right:has(.courier-description:not(:empty)) .card__compound:not([id]) {
  display: none;
}

.courier-description {
  margin-bottom: 16px;
}



/* ============================================================
   Правка №73 (22.08.2026): миниатюры сбоку от фотографии на телефоне.
   Вариант А по выбору владельца: четыре квадратные плитки справа во всю
   высоту главного фото, на четвёртой — счётчик остальных снимков.
   Разметка .card__previews уже существовала, на телефоне была скрыта
   (строка 7698). Здесь мы её показываем и раскладываем в столбец.
   ============================================================ */
@media only screen and (max-width: 991.98px) {

  /* Полоса нужна только когда фотографий больше одной: признак — наличие
     второй миниатюры. У товара с единственным снимком столбец был бы пустым,
     поэтому там всё остаётся как было — фото по центру. */
  .card__left:has(.card__images-wrapper.active .card__previews a:nth-child(2)) {
    max-width: none;
  }

  .card__images-wrapper.active:has(.card__previews a:nth-child(2)) {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  /* 260 + 8 + 75 = 343 — ровно ширина карточки. Размер фотографии не меняется,
     она лишь перестаёт стоять по центру. Ширину задаём именно здесь: owl
     замеряет её при заведении карусели и дальше проставляет в пикселях сам. */
  .card__images-wrapper.active:has(.card__previews a:nth-child(2)) .card__slider {
    flex: 0 0 260px;
    max-width: 260px;
  }

  .card__images-wrapper.active:has(.card__previews a:nth-child(2)) .card__previews {
    display: flex;
    flex-direction: column;
    flex: 0 0 75px;
    gap: 15px;              /* 4 × 75 + 3 × 15 = 345 при высоте фото 346 */
    margin-top: 0;
  }

  .card__images-wrapper.active .card__previews a {
    position: relative;
    width: 75px;
    height: 75px;
    border-radius: 8px;
  }

  /* Квадратная плитка из вертикального снимка — обрезаем по центру.
     Здесь обрезка уместна: это указатель, а не сам товар. */
  .card__images-wrapper.active .card__previews img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Пятая и дальше не помещаются по высоте — прячем, счётчик на четвёртой */
  .card__images-wrapper.active:has(.card__previews a:nth-child(2)) .card__previews a:nth-child(n + 5) {
    display: none;
  }

  /* Точки под фотографией: там, где сбоку стоит полоса миниатюр, точки дублируют
     миниатюры и ничего не добавляют. Решение владельца, принятое уже после того,
     как он увидел полосу вживую. */
  .card__images-wrapper.active:has(.card__previews a:nth-child(2)) .card__slider .owl-dots {
    display: none;
  }

  .card__images-wrapper.active .card__previews a[data-courier-more] {
    opacity: 1;
  }

  .card__images-wrapper.active .card__previews a[data-courier-more]::after {
    content: attr(data-courier-more);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 26, 27, 0.55);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
  }
}


/* Правка №75 (22.08.2026): согласие на обработку данных в окне «Купить в 1 клик».
   Мельче основного текста, но читаемо — 12 px, не 10: согласие, которое нельзя
   прочесть, согласием не является. */
.courier-oc__agree {
  margin-top: 10px;
  color: #8a8a8a;
  font-size: 12px;
  line-height: 145%;
}

.courier-oc__agree a {
  color: #8a8a8a;
  text-decoration: underline;
}



/* ============================================================
   Правка №76 (22.08.2026): нижняя липкая панель убрана,
   «В корзину» встала рядом с «Купить в 1 клик».
   Только телефон и только карточка товара.

   Перед удалением проверено, что вместе с панелью ничего не теряется:
   мессенджеры остаются в липкой шапке (4 ссылки), цена есть в теле
   карточки (.card-price), «Войти в кабинет» есть в меню под бургером.
   Сердечко «в избранное» жило только здесь — оно переезжает на угол
   фотографии, иначе возможность добавить в избранное исчезла бы совсем.
   ============================================================ */
@media only screen and (max-width: 991.98px) {

  body:has(.courier-oc-row) .card__buttons {
    display: none;
  }

  /* Кнопки идут своей строкой под размерами и делят ширину поровну.
     Втиснуть их ТРЕТЬИМ элементом в строку с размерами не вышло: чипы
     занимают 142 px из 343, на две кнопки остаётся по 92 px, а «Купить
     в 1 клик» требует около 124 px — надпись снова ломалась бы на две
     строки, что мы уже чинили правкой №64. */
  .courier-basket-slot {
    flex: 1 1 0;
    min-width: 0;
    order: 1;
  }

  .courier-oc-row .courier-oc-btn {
    flex: 1 1 0;
    min-width: 0;
    order: 2;
  }

  /* размеры остаются отдельной строкой над кнопками */
  .courier-oc-row > div[id]:not(.courier-basket-slot) {
    flex: 1 1 100%;
    order: 0;
  }

  /* родная кнопка компонента растягивается на всю отведённую ей долю */
  .courier-basket-slot .action-block-detail,
  .courier-basket-slot .card__add,
  .courier-basket-slot a {
    width: 100%;
    box-sizing: border-box;
  }

  .courier-basket-slot .card__add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    min-height: 44px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    white-space: nowrap;
  }

  /* Значок корзины убираем: в половине строки он отнимает место у цены,
     а сама подпись «В корзину» и так говорит, что это за кнопка. */
  .courier-basket-slot .card__add:before {
    display: none;
  }

  .courier-basket-slot .card-add-label,
  .courier-basket-slot .card-add-label-mobile {
    height: auto;
    line-height: 1.2;
  }

  .courier-basket-slot .card-price {
    white-space: nowrap;
  }

  /* сердечко на углу фотографии, напротив плашки «Предзаказ» */
  .card__favorite.courier-fav-on-photo {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
  }

  /* Лента карусели подарков вылезала за края карточки: у обёртки
     overflow: visible — задумано для блока во всю ширину экрана, а внутри
     карточки соседние товары торчали за её границы и мешали. Подрезаем. */
  .card__right #courier-gifts .owl-stage-outer {
    overflow: hidden;
  }
}



/* ============================================================
   Правка №77 (22.08.2026): после добавления кнопка становится
   «Перейти в корзину».

   Было: в состоянии «в корзине» внутри половинной кнопки разворачивался
   счётчик количества (минус, «1 шт», сумма, плюс). Содержимое 183 px в
   кнопке 152 — подпись уезжала на 15 px левее кнопки и пропадала, плюсик
   вылезал за правый край, сумма падала на вторую строку.
   ============================================================ */
@media only screen and (max-width: 991.98px) {

  /* Счётчик количества с карточки убираем: менять количество удобнее в
     корзине, где видно весь заказ. В половину строки он не помещается,
     а ради него ломалась вся кнопка. */
  /* Вес селектора здесь не случайный: родное правило
     `.card__add.active .card-count { display: flex }` весит три класса,
     и вариант из двух классов ему проигрывал — счётчик оставался виден. */
  .courier-basket-slot .card__add .card-count,
  .courier-basket-slot .card__add.active .card-count {
    display: none;
  }

  /* Пока товар не добавлен — ссылки нет */
  .courier-basket-slot .courier-to-basket {
    display: none;
  }

  /* Товар добавлен: подпись «В корзине» и цену прячем, кнопка целиком
     становится ссылкой в корзину. Так покупатель и видит, что букет
     добавлен, и сразу видит, куда идти дальше. */
  /* Разделитель между подписью и ценой — отдельный тег <i> шириной 1 px.
     Спрятать подпись и цену, но забыть про него — и посреди кнопки остаётся
     висеть одинокая палочка. */
  .courier-basket-slot .card__add.active .card-add-label,
  .courier-basket-slot .card__add.active .card-price,
  .courier-basket-slot .card__add.active i {
    display: none;
  }

  .courier-to-basket__tick {
    margin-right: 6px;
    font-size: 15px;
    line-height: 1;
  }

  .courier-basket-slot .card__add.active .courier-to-basket {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
  }

  /* Фон закрепляем винным явно. 🔴 Смены цвета при добавлении НЕ происходит,
     хотя раньше в этом комментарии было написано обратное: базовый .card__add
     тёмный (#222, строка 4051), но его перебивает более позднее правило, и
     кнопка винная и до, и после. Замерено. Поэтому единственный сигнал
     «положил» — смена надписи, и ради этого рядом стоит галочка. */
  .courier-basket-slot .card__add.active {
    background: var(--ch-wine, #a5254c);
    cursor: pointer;
  }
}



/* ============================================================
   Правка №78 (22.08.2026): цена справа от размеров, кнопки строкой ниже.

       Размер  XS  S  M                        3 450 ₽
       [ В корзину ]            [ Купить в 1 клик ]

   Заодно снимается теснота, из-за которой кнопку правили дважды: цена
   больше не сидит внутри неё.
   ============================================================ */
@media only screen and (max-width: 991.98px) {

  /* Размеры больше не занимают всю строку — рядом встаёт цена */
  .courier-oc-row > div[id]:not(.courier-basket-slot) {
    flex: 0 1 auto;
    order: 0;
  }

  /* Цена занимает всё место, оставшееся справа от размеров, и центрируется
     в нём. Не margin-left: auto — тогда она прижималась бы к самому краю. */
  .courier-price-slot {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    align-self: flex-end;
    padding-bottom: 2px;
    color: var(--ch-ink, #1c1a1b);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }

  /* Размеров нет — слот занимает строку целиком, и по центру цена висела бы
     посреди пустоты. Прижимаем к левому краю: он же левый край кнопки «В корзину». */
  .courier-oc-row--alone .courier-price-slot {
    text-align: left;
  }

  /* Подпись на кнопке выглядела сдвинутой влево не случайно: сам блок подписи
     центрирован, но текст внутри него (блок шириной во всю кнопку) выровнен по
     левому краю. Центрируем именно текст. */
  .courier-basket-slot .card-add-label,
  .courier-basket-slot .card-add-label-mobile,
  .courier-basket-slot .card-add-label-desktop {
    text-align: center;
  }

  /* Пустой элемент нулевой высоты во всю ширину — переносит кнопки
     на следующую строку, не добавляя отступа */
  .courier-row-break {
    order: 2;
    flex: 1 0 100%;
    height: 0;
    margin: 0;
  }

  .courier-basket-slot { order: 3; }
  .courier-oc-row .courier-oc-btn { order: 4; }

  /* Цены в кнопке больше нет, поэтому разделитель между подписью и ценой
     повис бы один — прячем совсем, в обоих состояниях. */
  .courier-basket-slot .card__add i {
    display: none;
  }
}



/* ============================================================
   Правка №79 (22.08.2026): блок «Дополните букет» вровень с карточкой.

   У внутреннего контейнера боковые отступы по 16 px — они уместны, когда блок
   идёт во всю ширину экрана. После переноса правкой №66 он лежит внутри
   .card__right, у которой уже свои 16 px, и получался двойной отступ: карусель
   заведена под 343, а окно показа 311, отчего третья карточка обрезалась криво.
   ============================================================ */
@media only screen and (max-width: 991.98px) {
  .card__right #courier-gifts .carousel > .container {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================================
   Правка №50 (22.08.2026). Меню обратно на низ экрана, липкое.

   Возврат к тому, что было до правки №45. Владелец попросил прямо:
   «меню в бургере — главная / каталог / избранное / корзина / войти —
   верни в низ экрана и прилепи».

   Правки №43 и №45 это меню снизу убирали, поэтому возврат тянет за
   собой три зависимости, которые тогда подвинули следом. Их и чиним,
   иначе элементы налезут друг на друга:

   1. МЕНЮ. Разметку не трогаем вовсе — блок .header__links как лежал
      в header.php, так и лежит, живые счётчики избранного и корзины
      продолжают работать сами. Правило снизу (position: fixed, bottom: 0,
      height: 71px) никуда не делось со времён до правки №45, стоит на
      ~7206 строке. Правка №45 его лишь погасила через display: none и
      показала блок внутри раскрытого бургера. Возвращаем display и
      гасим показ в бургере — при открытом бургере меню прячется, как
      было раньше.

   2. ПАНЕЛЬ ПОКУПКИ на карточке. Правка №45 посадила её на bottom: 0,
      потому что меню ушло. Возвращаем на bottom: 61px — 71px меню минус
      10px нахлёста, ровно как было до №45 (правило на ~8274 строке).

   3. ВИДЖЕТ Б24. Правка №47 опустила его в угол на 20px, потому что
      под ним стало пусто, и подняла на 130px на карточке товара.
      Теперь под ним снова меню: база 91px = 71 меню + 20 воздуха,
      на карточке 191px = 61 отступ + 110 панель + 20 воздуха.

   4. ЭКРАН «ЗАКАЗ ПРИНЯТ». Правка №45 срезала нижний отступ до 16px,
      потому что меню не стало. Возвращаем запас под 71px меню.

   ИЗВЕСТНЫЙ РИСК. Меню снизу убирали не от хорошей жизни: у фиксированного
   элемента на bottom: 0 в мобильных браузерах наблюдался отрыв от нижней
   кромки. Правка №43 пробовала лечить его привязкой к visualViewport,
   правка №45 — псевдоэлементом .header__links::after; обе попытки в итоге
   закончились тем, что меню сняли совсем. Возврат может вернуть и отрыв.
   Если он появится — это не новая поломка, а старая, и решать её надо
   отдельно, а не откатом этой правки вслепую.
   ============================================================ */
@media only screen and (max-width: 991.98px) {
  .header__links {
    display: flex;
  }

  /* При раскрытом бургере меню снизу прячем: бургер — полноэкранный
     оверлей, и два меню одновременно на экране не нужны. До правки №45
     это делалось через opacity/visibility; display надёжнее, потому что
     сейчас его надо перебить у правила .header.active из той же правки. */
  .header.active .header__links {
    display: none;
  }

  .b24-widget-button-wrapper {
    bottom: 91px !important;
  }

  /* На карточке товара панели покупки БОЛЬШЕ НЕТ: правка №64 от 21.08.2026
     завела «Купить в 1 клик» прямо в строку под размером и погасила
     .card__buttons правилом body:has(.courier-oc-row). Проверено на четырёх
     карточках — courier-oc-row есть на всех, панель скрыта везде.

     Поэтому поднимать виджет на высоту панели больше не надо: он висел бы
     в пустоте с зазором в 120px. Держим его над меню, как на остальных
     страницах. Правило правки №47 со 130px перебиваем тем же селектором.

     Условие взято по courier-oc-row, а не по card__buttons: если «Купить
     в 1 клик» когда-нибудь снимут, панель вернётся, и виджет сам уедет
     обратно на 191px — сработает правило ниже. */
  body:has(.courier-oc-row) .b24-widget-button-wrapper {
    bottom: 91px !important;
  }

  body:has(.card__buttons):not(:has(.courier-oc-row)) .b24-widget-button-wrapper {
    bottom: 191px !important;
  }

  .order-complete {
    padding-bottom: calc(87px + env(safe-area-inset-bottom, 0px));
  }
}

@media only screen and (max-width: 767.98px) {
  .card__buttons {
    bottom: 61px;
  }
}

/* ============================================================
   Правка №81 (22.08.2026). Нижнее меню вынесено из .header — стили.

   Разбор механизма целиком — в scripts.js, блок правки №81, и в
   DECISIONS.md. Коротко: на мобильных ширинах .header это полноэкранная
   прокручиваемая фиксированная панель бургера на left: -100%, а меню
   лежало внутри неё; в WebKit фиксированный потомок такого контейнера во
   время жеста рисуется относительно слоя, то есть за левым краем экрана.
   JS переносит узел меню в <body>. Здесь два правила, обслуживающие
   перенос.

   СТАТУС: обе половины на боевом, JS дописан в js/scripts.js.
   Проверено на боевом после установки: меню — прямой потомок <body>,
   position: fixed, низ 812, высота 71, пять пунктов, z-index 10; бургер
   открывается (body.header-open, меню display: none) и закрывается (меню
   возвращается); счётчик корзины живой — штатное событие Битрикса
   OnBasketChange обновило «Корзина 0» → «Корзина 1» уже после переноса;
   при расширении окна до десктопа меню возвращается в ряд шапки к своей
   метке, при сужении снова уходит вниз. Оба домена, ошибок в консоли нет.

   Рядом работает правка №83 — она бьёт в тот же механизм с другой стороны
   (сужает transition у самой .header). Снимать её не надо: перенос
   лечит причину, а №83 убирает лишнюю анимацию высоты полноэкранной
   панели, что полезно само по себе.
   ============================================================ */
@media only screen and (max-width: 991.98px) {

  /* Меню лежало внутри .header с z-index: 10 и поднималось вместе с ним.
     Став прямым потомком body, оно осталось бы с z-index: auto — прежний
     уровень возвращаем явно. Виджет Б24 стоит на 10100/10150 и остаётся
     выше, как и был (замерено на боевом). */
  body > .header__links {
    z-index: 10;
  }

  /* Скрытие при раскрытом бургере. Прежнее правило правки №50
     `.header.active .header__links { display: none }` после переноса
     совпадать перестаёт — состояние зеркалит JS в класс body.header-open.
     Правило написано так, что работает В ОБОИХ случаях: и когда узел
     перенесён, и когда он остался в шапке (не выполнился JS, десктоп). */
  body.header-open .header__links {
    display: none;
  }
}

/* ============================================================
   Правка №83 (22.08.2026). Шапка на мобильном анимирует только свой
   сдвиг, а не «всё подряд».

   ЧТО НАШЛОСЬ (замер на боевом, не догадка). На ширинах до 991.98px
   .header — это НЕ полоска сверху, а полноэкранная фиксированная панель
   бургера, уведённая за левый край:
       position: fixed; left: -100%; width: 100%; top: 0; bottom: 0;
       overflow-y: auto; z-index: 10;
   А из базовых стилей у неё стоит `transition: 0.2s ease-out` — без списка
   свойств, то есть ВСЁ. Нижнее меню .header__links лежит внутри неё
   (header.php:633).

   МЕХАНИЗМ ПРОПАЖИ МЕНЮ. У .header задано top: 0 и bottom: 0, значит её
   высота равна высоте вьюпорта. Когда в Chrome-iOS и Яндекс-iOS на скролле
   ВВЕРХ возвращается нижний тулбар, вьюпорт становится ниже — и высота
   шапки МЕНЯЕТСЯ. С `transition: all` это не пересчёт, а 200-миллисекундная
   АНИМАЦИЯ. Анимируемый фиксированный элемент WebKit поднимает в отдельный
   слой композитора, и фиксированные потомки начинают рисоваться
   относительно этого слоя — а слой стоит на left: -100%. Меню уезжает за
   левый край экрана. Не «отрывается», не «съезжает» — именно ПРОПАДАЕТ,
   ровно так, как описал владелец.

   ПОЧЕМУ СХОДИТСЯ СО ВСЕМ ПРЕЖНИМ:
   — в Safari ровно: он не меняет layout viewport посреди жеста, высота
     шапки не едет, анимации нет, слоя нет;
   — панель покупки .card__buttons на том же bottom: 0 вела себя ровно
     (опыт ?navtest, 15.08) — она НЕ внутри .header;
   — вывод того же опыта дословно: «причина в меню, а не в тулбаре» —
     точнее, в его родителе;
   — вариант D (подложка под меню) не сработал, «потому что само меню в
     этот момент не рисуется»: рисуется, но за левым краем экрана;
   — delta visualViewport = 0 на каждом кадре — механизм вообще не в
     смещении вьюпорта, поэтому правки №43 и №44 помочь не могли;
   — правка №42 (свой слой у самого меню) мимо: слой создаёт РОДИТЕЛЬ.

   ПРАВКА. Сужаем переход до одного свойства — left. На мобильном у .header
   меняется только оно: .header.active задаёт ровно `left: 0` и больше
   ничего (проверено по всем правилам .header* в мобильной медиавыдаче).
   Открытие бургера едет как ехало, а высота теперь не анимируется —
   пересчитывается мгновенно, как у любого обычного блока.

   Десктоп не трогаем: правило заперто в ту же медиавыдачу, базовое
   `transition: 0.2s ease-out` там остаётся как было.

   🔴 ПРОВЕРИТЬ МОЖЕТ ТОЛЬКО ВЛАДЕЛЕЦ, на своём iPhone, в Chrome и Яндексе.
   Наш инструмент настоящий тулбар браузера не эмулирует.
   ============================================================ */
@media only screen and (max-width: 991.98px) {
  .header {
    transition: left 0.2s ease-out;
  }
}

/* ============================================================
   Правка №84 (22.08.2026). Карточка товара на мобильном: новый порядок
   блоков и единый вертикальный ритм.

   Просьба владельца дословно: «надо сделать карточку товара максимально
   компактнее: расстояние по вертикали между блоками сделать таким же как
   между фото основным и минифото справа. далее блок с размером и ценой
   переносим сразу под главное фото: слово "размер" ставим в строку, а не
   над размерами, так чтобы получилось слева направо — Размер: — размеры —
   цена. ниже блок с кнопками в корзину и купить в один клик. ниже блок
   "от нас в подарок". ниже название букета и состав. ниже блок "дополните
   букет"».

   ОТКУДА ВЗЯТО ЧИСЛО 8px. Замерено на боевом: у `.card__images-wrapper`
   стоит `gap: 8px`, и это ровно тот зазор, который владелец назвал
   образцом — между главным фото (правый край 276) и колонкой миниатюр
   (левый край 284). Не подбирал на глаз.

   БЫЛО (замеры на 375px, вертикальные промежутки вразнобой):
     фото → «От нас в подарок» ....... 20px
     «От нас в подарок» → название ... 14px
     название → состав ............... 16px
     состав → размер/цена/кнопки ..... 16px
     кнопки → «Дополните букет» ...... 24px
   СТАЛО: везде 8px.

   ПОРЯДОК МЕНЯЕМ ЧЕРЕЗ `order`, А НЕ ПЕРЕНОСОМ УЗЛОВ. Это принципиально:
   блок размеров `.product-item-detail-info-container` перерисовывает сам
   компонент Битрикса при смене размера, а блок подарков в `.card__right`
   уже переносит JS правки №66. Любой перенос узлов здесь дрался бы с
   чужим кодом и терялся при перерисовке. CSS `order` не трогает разметку
   вовсе и переживает любую перерисовку.

   Неизвестным детям `.card__right` даём order: 5 — они встанут между
   составом и подарками, а не улетят наверх. Скрытые `.card__compound` и
   `.card__buttons` (display: none) промежутков не создают: flex `gap` их
   не считает.
   ============================================================ */
@media only screen and (max-width: 991.98px) {

  /* 1. Отступ от фото до первого блока — было 20px */
  .card__columns > .card__right {
    margin-top: 8px;
  }

  /* 2. Единый ритм и новый порядок */
  .card__right {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .card__right > * {
    order: 5;
    margin-top: 0;
    margin-bottom: 0;
  }

  .card__right > .courier-oc-row { order: 1; }  /* размер, цена, кнопки */
  .card__right > .card__included { order: 2; }  /* От нас в подарок */
  .card__right > .card__title    { order: 3; }  /* название букета */
  .card__right > .card__text     { order: 4; }  /* состав */
  .card__right > #courier-gifts  { order: 9; }  /* Дополните букет */

  /* 3. Внутренние отступы, которые ломали бы ритм снаружи.
        У состава первый <p> и последний <ul> несут по 15px, у карусели
        подарков — по 24px сверху и снизу. Внутри блоков ничего не трогаем,
        только сняли то, что торчит наружу. */
  .card__right > .card__text > *:first-child { margin-top: 0; }
  .card__right > .card__text > *:last-child { margin-bottom: 0; }
  .card__right > #courier-gifts > .carousel { margin-top: 0; margin-bottom: 0; }

  /* 4. «Размер:» в строку с размерами, а не над ними.
        Двоеточие даём псевдоэлементом: сам текст «Размер» приходит из
        компонента, и при смене размера компонент перерисовывает этот блок
        целиком — правка в разметке не пережила бы перерисовку, а стиль
        переживает. */
  .courier-oc-row .product-item-detail-info-container {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Подпись приходит из компонента с хвостом табуляций — в узле лежит
     «Размер\t\t\t\t\t\t\t». Из-за него двоеточие отъезжало: «Размер :».
     display: flex у самой подписи срезает краевые пробелы анонимного
     текстового узла — замерено на боевом, ширина 63 → 59. */
  .courier-oc-row .product-item-detail-info-container-title {
    display: flex;
    align-items: center;
  }

  .courier-oc-row .product-item-detail-info-container-title::after {
    content: ":";
  }

  /* список размеров нёс отступ сверху под старую раскладку «подпись над» */
  .courier-oc-row .product-item-scu-item-list {
    margin-top: 0;
  }
}

/* ============================================================
   Правка №85 (22.08.2026). Узкие экраны: карточка перестаёт вылезать
   за правый край, цена остаётся в строке с размерами.

   НАЙДЕНО ПРИ ПРОВЕРКЕ ПРАВКИ №84, само по себе — старая беда правки №73.
   Боковые миниатюры она посадила на жёсткие числа:
       .card__slider   { flex: 0 0 260px; max-width: 260px; }
       .card__previews { flex: 0 0 75px; }
   плюс зазор 8px. Итого 343px — ровно ширина контейнера на экране 375.
   На экране УЖЕ 375 сумма не сжимается, и полоса миниатюр уезжает за край.
   Замер на 320px: правый край содержимого 359 при ширине экрана 320,
   горизонтальная прокрутка 39px. На 360px пронесло случайно: содержимое
   заканчивалось на 359 при экране 360 — то есть впритык, один пиксель.

   ЛЕЧЕНИЕ. Ширину миниатюрам оставляем жёсткой (75px — это размер плитки),
   а главному фото разрешаем занимать остаток: `flex: 1 1 auto` и снятый
   max-width. На 375px результат тот же самый — 343 − 8 − 75 = 260, то есть
   ровно как было, ничего не двигается. На 320px фото становится 205px и
   всё влезает.
   `min-width: 0` обязателен: без него flex-элемент не сжимается ниже
   min-content, и вылет остался бы.

   ЗАОДНО зазор в строке покупки с 10px до 8px — тем же числом, что и
   вертикальный ритм правки №84. Это не косметика: на 320px строка
   «Размер: S M L» + цена не помещалась ровно на один пиксель
   (59 + 8 + 142 + 10 + 70 = 289 при доступных 288), и цена срывалась на
   отдельную строку. С зазором 8px помещается.
   ============================================================ */
@media only screen and (max-width: 991.98px) {

  .card__images-wrapper.active:has(.card__previews a:nth-child(2)) .card__slider {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
  }

  .courier-oc-row {
    gap: 8px;
  }
}

/* ============================================================
   Правка №86 (23.08.2026). Страница корзины: убраны два верхних баннера,
   строки логотипа и каталога прилеплены к верхнему краю.

   Просьба владельца: «убираем сверху блоки предзаказ к 1 сентября и
   шоколадка от нас; строки лого и мессенджеры, каталог и поиск
   прилепляем к верхнему краю».

   Почему баннеры убираем именно здесь: до корзины человек уже выбрал
   букет, и оба баннера — про то, чтобы он выбрал. В корзине они только
   отодвигают вниз то, ради чего он сюда пришёл. На остальных страницах
   не трогаем.

   Замеры на 375px ДО правки: `.sept-strip` занимал 56px, а
   `.top-promo-mobile` — 115px, вместе 179px. Строки шапки начинались на
   180-й точке, «Корзина» — на 649-й.

   Прицел по `#basket-root` — это идентификатор компонента корзины, он
   есть только на этой странице, отдельного класса у body тут нет
   (проверено: `body.className` пустой).

   Прилипание: правило один в один такое же, как у карточки товара
   (`body:has(.card__buttons) .header-mobile`), только для корзины. Своих
   чисел не выдумываю — top: 0 и z-index: 5, как там.
   ============================================================ */

/* Баннеры убираем на любой ширине: они верхние промо, а в корзине
   промо уже не нужно. */
body:has(#basket-root) .sept-strip,
body:has(#basket-root) .top-promo-mobile {
  display: none;
}

@media only screen and (max-width: 991.98px) {
  body:has(#basket-root) .header-mobile {
    position: sticky;
    top: 0;
    z-index: 5;
  }
}

/* ============================================================
   Правка №88 (23.08.2026). Страница корзины: единый вертикальный ритм 8px.

   Просьба владельца: «также сделай между блоками — текстами и т.д. —
   расстояние 8px по вертикали». То же число, что и в карточке товара
   (правка №84), и взято оно оттуда же — из `gap: 8px` у обёртки фото.

   ЗАМЕРЫ ДО ПРАВКИ (375px), промежутки шли вразнобой:
     шапка → хлебные крошки .................... 16
     хлебные крошки → корзина .................. 16
     «Корзина» → список товаров ................ 20
     товар → поле купона ....................... 20
     купон → «Итого» ........................... 20
     «Итого» → «Экономия» ...................... 15
     «Экономия» → кнопки ....................... 15
     «Купить в 1 клик» → «Оформить заказ» ....... 6
     кнопки → «Дополните букет» ................ 80
     заголовок блока → подзаголовок ............ 14
     подзаголовок → карусель ................... 12
     карусель → подвал ......................... 80
   Двенадцать разных чисел на одном экране.

   Схлопывание margin учтено: `.cart` и `.carousel` — соседние блоки, их
   нижний и верхний отступы схлопываются в один, поэтому оба ставим в 8,
   а не в 4. То же у пары «купон / Итого» внутри `.cart__form`.

   Отступ до подвала тоже 8: у самого подвала есть свои `padding-top: 30px`,
   так что воздуха там остаётся 38px и тесно не выглядит.

   Внутренности блока «Дополните букет» правим по идентификаторам
   `#courier-gifts-basket` и `#courier-gifts` (карточка товара) — чтобы
   на обеих страницах блок выглядел одинаково. Общий класс `.carousel`
   НЕ трогаем: он же используется на главной, и правка задела бы её.

   Только мобильные ширины: на десктопе корзина двухколоночная, там ритм
   другой и владелец про него не говорил.
   ============================================================ */
@media only screen and (max-width: 991.98px) {

  /* верх страницы */
  body:has(#basket-root) .breadcrumbs {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  /* корзина → блок подарков (отступы соседей схлопываются) */
  body:has(#basket-root) .cart {
    margin-bottom: 8px;
  }

  /* внутри корзины */
  body:has(#basket-root) .cart__row {
    margin-bottom: 8px;
  }

  body:has(#basket-root) .cart__right {
    margin-top: 8px;
  }

  body:has(#basket-root) .cart__promo-code {
    margin-bottom: 8px;
  }

  body:has(#basket-root) .cart__info {
    margin-top: 8px;
  }

  body:has(#basket-root) .cart__saving {
    margin-top: 8px;
  }

  body:has(#basket-root) .cart__buttons {
    margin-top: 8px;
  }

  body:has(#basket-root) .cart__button {
    margin-top: 8px;
  }

  /* блок «Дополните букет» — одинаково в корзине и в карточке товара */
  #courier-gifts-basket .carousel {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  #courier-gifts-basket .carousel__row,
  #courier-gifts .carousel__row {
    margin-bottom: 8px;
  }

  #courier-gifts-basket .carousel__subtitle,
  #courier-gifts .carousel__subtitle {
    margin-top: 0;
    margin-bottom: 8px;
  }
}

/* ============================================================
   Правка №90 (23.08.2026). Вид строки «Подарочный комплект от нас»
   в корзине.

   Строку заводит правка №89 (`local/php_interface/CourierGiftSet.php`) —
   это настоящая позиция заказа с ценой 0, решение владельца.

   ПОЧЕМУ ПРИЦЕЛ ПО ССЫЛКЕ, А НЕ ПО КЛАССУ ИЛИ ID. У строки корзины нет
   ни признака товара, ни постоянного идентификатора: `id` там —
   `basket-item-49185`, номер строки корзины, он свой у каждого покупателя
   и меняется при каждом изменении корзины. Единственное, что в этой
   строке постоянно, — ссылка на символьный код товара. По ней и целимся.

   1. СЧЁТЧИК И УДАЛЕНИЕ УБРАНЫ. Комплект едет с каждым заказом, менять
      его количество и удалять покупателю незачем. Технически удалить он
      всё равно не смог бы: обработчик правки №89 вернёт строку на
      следующей загрузке корзины — а кнопка, которая «не работает», хуже
      отсутствующей.

   2. ССЫЛКИ ОТКЛЮЧЕНЫ. Товар создан ВНЕ разделов каталога, поэтому у него
      нет своей страницы: `/product/podarochnyy-komplekt-ot-nas/` отдаёт
      404 (проверено на обоих доменах). Это сделано намеренно — так товар
      не попадает ни в списки каталога, ни в поиск по сайту (тоже
      проверено: поиск его не находит). Но ссылку в корзине компонент
      рисует всё равно, и вести покупателя на 404 нельзя.

   3. ФОТО ЗАГРУЖЕНО 23.08.2026, временное скрытие заглушки снято.
      Владелец сказал, где лежит файл: `photo_2026-07-25_08-47-00.jpg` на
      рабочем столе, 960x1280. Кадр вертикальный и почти весь занят букетом
      в голубой коробке, а сам комплект лежит внизу мелко — в миниатюре
      корзины из него не читалось бы ничего, и, что хуже, вторая строка с
      фотографией букета выглядела бы как «в корзине два букета».
      Поэтому вырезал нижнюю часть — свеча, конверт с наклейкой, памятка по
      уходу, шоколадка, открытка, пакетик подкормки и угол фирменной коробки
      с логотипом. Итог 750x670, лежит в `/upload/iblock/`.
   ============================================================ */

/* 1 и 2 */
.cart__item:has(a[href*="podarochnyy-komplekt-ot-nas"]) .cart__count,
.cart__item:has(a[href*="podarochnyy-komplekt-ot-nas"]) .cart__delete {
  display: none;
}

.cart__item:has(a[href*="podarochnyy-komplekt-ot-nas"]) a[href*="podarochnyy-komplekt-ot-nas"] {
  pointer-events: none;
  cursor: default;
}


/* ============================================================
   Правка №91 (23.08.2026). Страница оформления заказа: убраны верхние
   баннеры, строка каталога и хлебные крошки; шапка прилеплена; единый
   вертикальный ритм 8px; из ряда кнопок убраны мессенджеры.

   Просьба владельца: «убери также верхние блоки — предзаказ букетов и
   шоколадку; лого-мессенджеры прилепить сверху; каталог и поиск убрать;
   хлебные крошки скрыть; расстояние по высоте между блоками и текстами
   8px; в ряду кнопок обратный звонок / ТГ / МАКС убираем ТГ и МАКС».

   ПРИЦЕЛ — `body:has(.order__contact-block)`. Этот блок рисует только
   шаблон `sale.order.ajax/order/template.php`, то есть он есть ровно на
   странице оформления и больше нигде (проверено поиском по шаблону).
   Прицеливаться по `.bx-soa` было бы неверно: тот же корень рисует и
   всплывающее оформление в корзине (`sale.order.checkout`, шаблон
   `popup`), и правила поехали бы туда.

   ЗАМЕРЫ ДО ПРАВКИ (375px):
     баннеры сверху ........................ 56 + 115 = 171px
     строка «Каталог / Поиск» .............. 40px + 10 отступа
     хлебные крошки ........................ 18px + 16 сверху и снизу
     шапка → крошки ........................ 16
     крошки → заголовок .................... 16
     заголовок → блок заказа ............... 20
     подсказка → ряд кнопок ................ 12
     ряд кнопок → форма .................... 28
     между шагами формы .................... 28
   Итого до первого поля формы было 480px — больше половины экрана на то,
   что к оформлению отношения не имеет.

   Схлопывание учтено: заголовок и блок заказа — соседние блоки, их
   отступы схлопываются, поэтому обоим ставим 8, а не 4. У шагов формы
   верхний отступ вешаем только на второй и последующие
   (`.order__step + .order__step`): у первого он и так 0, а лишние 8
   протекли бы наружу через родителя.
   ============================================================ */

/* Баннеры и крошки — на любой ширине: в оформлении заказа им не место */
body:has(.order__contact-block) .sept-strip,
body:has(.order__contact-block) .top-promo-mobile,
body:has(.order__contact-block) .breadcrumbs {
  display: none;
}

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

  /* Шапка: строка лого и мессенджеров прилипает, строка каталога и поиска
     убрана. Правило прилипания — то же, что на карточке и в корзине. */
  body:has(.order__contact-block) .header-mobile {
    position: sticky;
    top: 0;
    z-index: 5;
  }

  body:has(.order__contact-block) .header-mobile__bottom {
    display: none;
  }

  /* Ритм 8px */
  body:has(.order__contact-block) .h1.title {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  body:has(.order__contact-block) .order {
    margin-top: 8px;
  }

  body:has(.order__contact-block) .order__contact-hint {
    margin-bottom: 8px;
  }

  body:has(.order__contact-block) .order__contact-block {
    margin-bottom: 8px;
  }

  /* 🔴 Здесь обязателен `#bx-soa-order` в селекторе. Шаблон задаёт отступ
     шагов правилом `#bx-soa-order .order__step + .order__step` — с
     идентификатором, вес (1,2,0). Первая версия правки была без него,
     вес (0,3,1), и проиграла: замер показал прежние 28px вместо 8. */
  body:has(.order__contact-block) #bx-soa-order .order__step {
    margin-bottom: 8px;
  }

  body:has(.order__contact-block) #bx-soa-order .order__step + .order__step {
    margin-top: 8px;
  }

  /* Ряд кнопок: мессенджеры убраны. Кнопки в ряду делят ширину поровну —
     `flex: 1 1 0` вместо `1 1 auto`, иначе ширина зависела бы от длины
     подписи и «Обратный звонок» был бы шире «Купить в 1 клик». */
  body:has(.order__contact-block) .order__contact-icons {
    display: none;
  }

  body:has(.order__contact-block) .order__contact-callback,
  body:has(.order__contact-block) .order__contact-oneclick {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ============================================================
   Правка №92 (23.08.2026). Нижняя полоса оформления: две кнопки.

   Просьба владельца: «кнопку купить в 1 клик добавить справа от оформить
   заказ», обе одинаковой ширины.

   ПОЧЕМУ СУММА УЕХАЛА НА СВОЮ СТРОКУ. Замер на 375px: «Итого: 1 990 ₽»
   занимает 103px, зазор 12. На две кнопки оставалось бы 250 минус ещё один
   зазор — по 119px на каждую, и подписи «Оформить заказ» и «Купить в 1 клик»
   переносились бы в две строки. Убирать сумму совсем нельзя: пока человек
   листает форму, это единственное место, где он видит, сколько заплатит.
   Поэтому сумма первой строкой, кнопки второй.

   Одинаковая ширина — `flex: 1 1 0`, а не `1 1 auto`: с `auto` ширина
   зависела бы от длины подписи, и «Купить в 1 клик» вышла бы шире.
   ============================================================ */
.courier-order-bar {
  flex-wrap: wrap;
}

/* 🔴 Окно «Купить в 1 клик» должно быть ВЫШЕ нижней полосы. У окна с карточки
   z-index: 20 — там его никто не перекрывает, а здесь полоса стоит на 9000 и
   рисовалась поверх затемнения: обе кнопки оставались видимыми и нажимаемыми
   сквозь модальное окно (видно на снимке при проверке). Ставим выше и полосы,
   и виджета Битрикс24 (10150) — иначе виджет висел бы поверх формы. */
#courier-oc-order {
  z-index: 10200;
}

.courier-order-bar__total {
  flex: 1 0 100%;
}

.courier-order-bar__btn,
.courier-order-bar__oc {
  flex: 1 1 0;
  min-width: 0;
}

/* Вторая кнопка — не такая же тяжёлая, как основная: главное действие на
   странице всё-таки «Оформить заказ». Контур вместо заливки, как у пары
   «В корзину / Купить в 1 клик» на карточке товара. */
/* 🔴 Контур рисуем внутренней тенью, а НЕ `border`. При `flex-basis: 0`
   рамка не входит в базовый размер и прибавляется сверху: замер показал
   168px против 166 по ширине и 46 против 44 по высоте — ровно по пикселю
   с каждой стороны. Внутренняя тень выглядит так же, но размера не меняет,
   и кнопки остаются одинаковыми, как просил владелец. */
.courier-order-bar__oc {
  background: #fff;
  color: #8c2846;
  box-shadow: inset 0 0 0 1px #8c2846;
}

/* 🔴 Размеры повторяем за «Оформить заказ» дословно. У той кнопки есть своё
   мобильное правило `.courier-order-bar__btn { width: auto; padding: 12px 18px;
   min-height: 44px }`, а новая кнопка брала padding 16px 20px из общего
   `.order__button` — замер показал 54px против 44 по высоте и 170 против 164
   по ширине. Кнопки в одном ряду обязаны быть одного размера, иначе ряд
   выглядит съехавшим. */
@media only screen and (max-width: 991.98px) {
  .courier-order-bar__oc {
    width: auto;
    padding: 12px 18px;
    min-height: 44px;
  }
}

/* ============================================================
   Правка №92, продолжение (23.08.2026). Вторая кнопка в ВЕРХНЕМ ряду
   страницы оформления: «Обратный звонок» и «Купить в 1 клик» рядом,
   одинаковой ширины.

   Просьба владельца: «теперь точно также надо повторить вверху страницы:
   сейчас там во всю ширину обратный звонок, надо справа также поставить
   купить в один клик».

   Ширины уже заданы правкой №91 (`flex: 1 1 0` обеим обёрткам) — там я их
   подготовил заранее. Здесь только вид самой ссылки.

   Размеры списаны с соседа ЗАМЕРОМ, а не на глаз: у
   `.order__contact-callback-trigger` padding 10px 20px, радиус 6px, шрифт
   13px, насыщенность 600, высота 35px. Повторяем один в один, иначе кнопки
   в ряду будут разной высоты.

   🔴 Контур снова внутренней тенью, а не `border`. При `flex: 1 1 0` рамка
   не входит в базовый размер и прибавляется сверху — на нижней полосе это
   уже стоило двух пикселей расхождения и отдельного захода.
   ============================================================ */
.order__contact-oneclick {
  display: flex;
}

.order__contact-oneclick-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
  background: #fff;
  color: #a5254c;
  box-shadow: inset 0 0 0 1px #a5254c;
  transition: background 0.2s ease-out;
  /* Кнопка сделана ссылкой, и подчёркивание досталось ей по наследству от
     общих стилей ссылок — на снимке проверки «Купить в 1 клик» было
     подчёркнуто, у соседа нет. Снимаем и в обычном состоянии, и при наведении. */
  text-decoration: none;
}

.order__contact-oneclick-trigger:hover {
  background: #fdf2f5;
  color: #a5254c;
  text-decoration: none;
}

/* ============================================================
   Правка №93 (23.08.2026). Оформление заказа: убрана горизонтальная
   прокрутка в 2px.

   Замечено при проверке правки №91, чинить сразу не стал — сначала выяснил
   причину. Она такая: у ценника доставки в карточке способа доставки стоит
   `position: absolute; right: -2px`, то есть он НАМЕРЕННО свисает на два
   пикселя наружу (шаблонный стиль Аспро, не наша правка). Карточка способа
   доставки прижата к правому краю контейнера, поэтому эти два пикселя
   вылезают за экран: замер — правый край 377 при ширине экрана 375,
   `scrollWidth` 377 против `clientWidth` 375.

   Два пикселя, а полоса прокрутки от них появляется настоящая, и страница
   ездит вбок под пальцем.

   Правим только на оформлении и только на мобильном: на десктопе контейнер
   уже экрана, свес там ни во что не упирается и внешний вид карточки
   доставки трогать незачем.
   ============================================================ */
@media only screen and (max-width: 991.98px) {
  body:has(.order__contact-block) .bx-soa-pp-delivery-cost {
    right: 0;
  }
}

/* ============================================================
   Правка №94 (24.08.2026). Разделы каталога на мобильном: крошки убраны,
   город в заголовке кликабельный, сортировка по ширине слова, фильтр —
   кнопка со словом.

   Просьба владельца: «в каждом из разделов каталога убрать хлебные крошки;
   в заголовке город сделать кликабельным с возможностью изменения города
   как на главной; заголовок с городом в одну строку; кнопку сортировки
   сделать по ширине слова "популярные"; кнопку фильтра сделать вместо
   значка кнопку со словом "фильтр"». Страницы: хиты продаж, онлайн-витрина,
   1 сентября.

   ПРИЦЕЛ — `body:has(.products-control)`. Это строка с сортировкой и
   фильтром, она есть на страницах списков каталога и больше нигде.
   Отдельного класса у body на этих страницах нет.

   Только мобильные ширины: на десктопе кнопки фильтра нет вовсе
   (`.filter-button { display: block }` включается той же медиавыдачей),
   и трогать там нечего.
   ============================================================ */
@media only screen and (max-width: 991.98px) {

  /* 1. Хлебные крошки убраны.
        🔴 Скрываем стилем, а НЕ выключаем компонент: внутри его шаблона
        живёт разметка BreadcrumbList из правки №70 — та самая, что отдаёт
        поисковикам цепочку раздела. Компонент выключить — потерять её,
        а это страницы, на которые идёт реклама. Скрытый блок в разметке
        остаётся, поисковик его читает. */
  body:has(.products-control) .breadcrumbs {
    display: none;
  }

  /* 2. Город в заголовке: подчёркнутый и кликабельный, как на главной.
        Разметку добавляет правка №94 в header.php, обработчик клика уже
        есть — правка №5 в js/scripts.js целится по тем же идентификаторам
        `h1-city-trigger` / `h1-city-popup`.
        `white-space: nowrap` только на самом городе: «Санкт-Петербурге»
        не должно разрываться посередине. Заголовок целиком переносить
        не запрещаем — иначе длинные названия разделов вылезли бы за экран. */
  /* 🔴 Базовый `.h1__city` рассчитан на главную: `display: flex`,
     `width: fit-content`, `margin: 8px auto 0`, шрифт 30px. Это блочный
     элемент во всю строку — замер после первой версии правки показал, что
     заголовок раздела разъехался на две строки (71px вместо 29), город
     уехал вниз и стал крупнее самого заголовка. Возвращаем его в строку:
     строчный flex, свои отступы и шрифт снимаем, наследуем от заголовка.
     Пунктирное подчёркивание и стрелку оставляем — они показывают, что
     сюда можно нажать. */
  body:has(.products-control) .h1__city {
    display: inline-flex;
    width: auto;
    margin: 0;
    padding-bottom: 0;
    font-size: inherit;
    font-weight: inherit;
    white-space: nowrap;
    vertical-align: baseline;
  }

  /* Попап под заголовком, а не по центру: заголовок здесь прижат влево. */
  body:has(.products-control) .h1__city-popup {
    margin-left: 0;
  }

  /* 3. Сортировка по ширине слова «Популярные».
        🔴 Ширина ЖЁСТКАЯ, а не `max-content`. Замерено на боевом:
        «Популярные» — 125px, «Дешевле» — 104, «Дороже» — 98. При
        `max-content` кнопка прыгала бы в ширине при каждом выборе.
        125px — по самому длинному варианту, как и просил владелец. */
  body:has(.products-control) .sort {
    width: 125px;
  }

  /* 4. Фильтр: вместо голого значка — кнопка со словом.
        Значок остаётся фоном и уезжает влево, слово добавляем
        псевдоэлементом: разметку компонента не трогаем, правка снимается
        одной строкой. */
  body:has(.products-control) .filter-button {
    width: auto;
    display: inline-flex;
    align-items: center;
    padding: 0 12px 0 36px;
    background-position: 12px center;
    font-size: 13px;
    color: #5e5e5e;
  }

  body:has(.products-control) .filter-button::after {
    content: "Фильтр";
  }
}

/* ============================================================
   Правка №95 (24.08.2026). «Букет дня» на главной — в такую же рамку,
   как у блока с шоколадкой.

   Просьба владельца: «сделай букет дня на главной тоже в рамку как у блока
   с шоколадкой».

   Числа списаны с `.top-promo-mobile` замером на боевом, а не подобраны на
   глаз: рамка `1.5px solid #c91855`, скругление 15px, тень
   `0 3px 12px rgba(111,30,60,.06)`. У «Букета дня» было: рамки нет,
   скругление 12px, тень `0 2px 12px rgba(0,0,0,.06)`.

   Ширину не трогаем: у блока `box-sizing: border-box` (проверено), поэтому
   рамка укладывается внутрь прежних 343px и вбок ничего не уезжает —
   замерено, горизонтальной прокрутки нет. Фотография внутри не вылезает
   за скругление: у блока `overflow: hidden`.
   ============================================================ */
.bd-banner {
  border: 1.5px solid #c91855;
  border-radius: 15px;
  box-shadow: 0 3px 12px rgba(111, 30, 60, 0.06);
}

/* ============================================================
   Правка №96 (24.08.2026). Главная: заголовки «Хиты продаж:» и
   «Уже собрано, доставим быстрее:» — по центру.

   Просьба владельца: «на главной разделы хиты продаж и уже собрано,
   доставим быстрее: поставь в конце текста заголовка двоеточие, текст по
   центру расположи».

   Двоеточие добавлено в САМ ТЕКСТ (header.php, правка №96) — это часть
   фразы, а не оформление, дорисовывать его стилем было бы неправильно.
   Здесь только выравнивание.

   🔴 Прицел двойной и оба ограничения нужны:
   — `body:has(.home-h1)` — блок `.home-h1` рисуется только на главной
     (условие `GetCurPage() == SITE_DIR` в header.php). Без него правило
     уехало бы на /hit/ и /vitrina/, где стоит тот же компонент.
   — `.showcase > .container > .title` — а не просто `.title`: этот класс
     используется по всему сайту, в попапах, в оформлении заказа и в
     карточке товара. Правка по одному `.title` задела бы их все.
   ============================================================ */
body:has(.home-h1) .showcase > .container > .title {
  text-align: center;
}

/* ============================================================
   Правка №97 (25.08.2026). Фильтр по цене: крупные ручки и
   кнопки-диапазоны.

   Просьба владельца: «неудобный большой изначальный разбег по цене и
   хвататься пальцем за кружочек маленький неудобно».

   ЗАМЕРЫ ДО ПРАВКИ:
   — ручки ползунка 16×16 px при общепринятом минимуме для пальца 44×44,
     то есть площадь захвата примерно в восемь раз меньше нормы;
   — шкала на «Розах» 1 950 – 65 950 при том, что медиана каталога 5 400 ₽
     и 90% товаров дешевле 13 500 ₽. Промежуток «до 10 000», где лежит 82%
     каталога, занимал первые 13% трека — около 43 px из 329.

   1. РУЧКИ. С 16 до 28 px. Отрицательные поля и `top` пересчитаны под новый
      размер: трек 2 px, значит `top = -(28-2)/2 = -13`, а сдвиг вбок — на
      половину ширины. Сверху невидимая зона захвата 44×44 псевдоэлементом:
      палец попадает по норме, а на вид кружок остаётся аккуратным.

   2. КНОПКИ-ДИАПАЗОНЫ. Разметку добавляет скрипт (правка №97 в
      js/scripts.js), здесь только вид. Границы взяты из распределения цен
      по каталогу: до 3 000 — 17% товаров, 3 000–5 000 — 30%,
      5 000–10 000 — 35%, дороже 10 000 — 18%.
   ============================================================ */

/* --- 1. ручки ползунка --- */
.bx-ui-slider-handle {
  width: 28px;
  height: 28px;
  top: -13px;
}

.bx-ui-slider-handle.left {
  margin: 0 0 0 -14px;
}

.bx-ui-slider-handle.right {
  margin: 0 -14px 0 0;
}

/* Невидимая зона захвата 44×44 — палец попадает, вид не меняется.
   🔴 Именно `::after`, а НЕ `::before`. У темы `::before` уже занят: это
   тёмная точка 6×6 внутри кружка. Первая версия правки задала ему 44×44 —
   точка раздулась в огромный винный круг во всю ширину панели и накрыла
   поля «От/До». Видно на снимке проверки. `::after` у ручки свободен. */
.bx-ui-slider-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* --- 2. кнопки-диапазоны --- */
.courier-price-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.courier-price-preset {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: #f3f3f3;
  color: #222;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease-out;
}

.courier-price-preset:hover,
.courier-price-preset:focus-visible {
  background: #fdf2f5;
  color: #a5254c;
}

/* --- 3. приписка «и дороже» СНЯТА ---
   Задумывалась к последней метке шкалы после обрезки (правка №98). Проверка
   на боевом показала, что все метки шкалы в этой теме скрыты
   (`.bx-ui-slider-part { display: none }`) — правило было мёртвым, а
   комментарий к нему обещал то, чего на экране нет. Убрал.
   Верхнюю границу человек всё равно видит: она стоит в поле «До». А букеты
   дороже достаются кнопкой «от 10 000», у которой верхней границы нет. */

/* ==========================================================================
   Правка №99 (25.08.2026). Подразделы в разделе каталога — парный блок к JS
   --------------------------------------------------------------------------
   Высоту свёрнутого ряда задаёт скрипт построчно (inline height), потому что
   число плиток в ряду зависит от длины названий: на «Розах» их 5, на
   «Букетах» — 3. Здесь только то, что скрипту нужно от вёрстки.

   overflow:hidden ставим ВСЕМ рядам. Раньше он был лишь у .open-list (>10
   подразделов) и у всех рядов на телефоне; на десктопе у маленьких разделов
   его не было вовсе. Скрипт режет высоту и там тоже — без обрезки контент
   вылезал бы наружу.

   Прежние правила высоты (.subcategories__row.open-list { height:84px } и
   мобильные 72px) НЕ удаляем. Они остаются страховкой: если скрипт по любой
   причине не отработает, блок выглядит ровно как до правки, а не разъезжается.
   ========================================================================== */
.subcategories__row {
  overflow: hidden;
  transition: height 0.28s ease;
}

.courier-subcat-more {
  margin-top: 8px;
}

/* Кнопка-плитка. Прежняя была текстовой ссылкой с зоной касания 46×15 px
   при норме 44×44 — попасть пальцем было тяжело. */
.courier-subcat-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: 6px;
  background: #f6f6f6;
  color: #222;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Стрелка из двух бордеров, как у раскрывашки в карточке товара
   (.courier-sections). Своя, а не из img/subcategories-down.svg: ту нельзя
   повернуть, она нарисована фоном. */
.courier-subcat-btn::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.courier-subcat-btn[aria-expanded="true"]::after {
  transform: translateY(1px) rotate(-135deg);
}

.courier-subcat-btn:focus-visible {
  outline: 2px solid #a5254c;
  outline-offset: 2px;
}

@media only screen and (max-width: 991.98px) {
  .courier-subcat-btn {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .subcategories__row,
  .courier-subcat-btn::after {
    transition: none;
  }
}

/* ==========================================================================
   Правка №100 (25.08.2026). Город в заголовке — в одну строку на ВСЕХ
   страницах, а не только там, где есть список товаров
   --------------------------------------------------------------------------
   Правка №95 чинила это через `body:has(.products-control)` — то есть только
   на страницах со списком товаров и панелью сортировки. На «Каталоге»
   (/katalog/) списка товаров нет, панели тоже, поэтому городу доставался
   базовый стиль главной: `display: flex`, шрифт 30px при заголовке 22px.
   Блочный элемент во всю строку — заголовок разъезжался на две строки.

   Замерено на боевом до правки, «Каталог цветов в Астрахани»:
     375 px  — заголовок 71 px (две строки), город 30px против 22px у H1
     1240 px — заголовок 108 px (две строки), город 44px против 36px

   Теперь цепляемся за обёртку заголовка, а не за содержимое страницы:
   `.h1.title` есть у всех заголовков, а `home-h1` — только у главной, где
   крупный город по центру и задуман. Условие больше не зависит от того,
   что на странице выводится.

   Вес селектора (0,4,0) выше прежнего `body:has(.products-control)` (0,2,1),
   поэтому на страницах разделов правило просто повторяет уже достигнутое —
   ломать там нечего. Прежнее правило не удаляю: оно останется работать,
   если эту обёртку когда-нибудь переименуют.

   Медиазапроса нет намеренно: замер показал две строки и на телефоне,
   и на десктопе.
   ========================================================================== */
.h1.title:not(.home-h1) .h1__city {
  display: inline-flex;
  width: auto;
  margin: 0;
  padding-bottom: 0;
  font-size: inherit;
  font-weight: inherit;
  white-space: nowrap;
  vertical-align: baseline;
}

/* Попап под заголовком, а не по центру: заголовок здесь прижат влево. */
.h1.title:not(.home-h1) .h1__city-popup {
  margin-left: 0;
}

/* ==========================================================================
   Правка №101 (25.08.2026). Красная кнопка «Каталог» убрана из бургера
   --------------------------------------------------------------------------
   В бургере первой строкой стояла кнопка `.header__button` — 343×48,
   фон #fcedf3, текст #a5254c. Владелец: убрать.

   🔴 Удалять из разметки нельзя: ТОТ ЖЕ элемент на десктопе служит
   переключателем выпадающего каталога в верхней строке (`.header__middle`,
   обработчик scripts.js ~39: на широком экране разворачивает
   `.header__bottom`, на узком — открывает панель внутри бургера).
   Поэтому прячем только на ≤991.98px — там, где он и виден в бургере.

   Что остаётся входом в каталог на телефоне: ссылка «Каталог цветов» в том же
   бургере, «Каталог» в нижней панели и розовая кнопка в шапке.
   ========================================================================== */
@media only screen and (max-width: 991.98px) {
  .header__button {
    display: none;
  }
}

/* ==========================================================================
   Правка №104 (03.09.2026). Баннер «От нас — сладкий комплимент»:
   всё по центру относительно строки отзывов
   --------------------------------------------------------------------------
   Просьба владельца: «сделай по центру относительно нижней строки отзывов
   каждую строчку сверху и блок с „доставка на воде и фирменной упаковке“».

   Замер до правки (375px): текстовая колонка 118…282, её центр — 200.
   Строка отзывов занимает колонку целиком, значит её ось и есть 200.
   Заголовок был прижат влево, плашка с двумя пунктами — тоже: её центр
   стоял на 183, то есть на 17px левее оси отзывов. Расхождение и было видно.

   После правки центры заголовка, плашки и отзывов совпадают — 200.

   🔴 Внутри плашки текст НЕ центрируем. Там два пункта списка с точками
   («• Доставка на воде», «• В фирменной коробке») — при центрировании точки
   разъедутся по горизонтали и перестанут читаться столбиком. Центрируем саму
   плашку как блок, а её строки оставляем прижатыми влево.

   Фото шоколадки слева и колонка с коробкой и «24/7» справа — отдельные
   колонки сетки, их эта правка не трогает.
   ========================================================================== */
.top-promo-mobile__title {
  text-align: center;
}

.top-promo-mobile__chip {
  margin-left: auto;
  margin-right: auto;
}

/* Правка №105 (08.09.2026): поле промокода Maxma в блоке «Итого» корзины.
   Раньше блок был спрятан правилом display:none в styles.css (снято этой же правкой)
   и вдобавок ловил абсолют от .cart__form-wrapper .maxma (top:76px). */
.cart__form-wrapper .maxma-basket-promocode {
  position: static;
  top: auto; left: auto; right: auto; z-index: auto;
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 10px;
  background: #f6f6f6;
}
.cart__form-wrapper .maxma-basket-promocode__container { width: 100%; padding: 0; border: 0; }

.cart__form-wrapper .maxma-basket-promocode__promo-form-title {
  font-size: 14px; line-height: 130%; font-weight: 600; color: #222; margin: 0 0 10px;
}
.cart__form-wrapper .maxma-basket-promocode__promo-input-fields { display: flex; gap: 8px; align-items: stretch; }
.cart__form-wrapper .maxma-basket-promocode__promo-input-fields-container { flex: 1 1 auto; min-width: 0; }
.cart__form-wrapper .maxma-basket-promocode__promo-form input[name="maxma-promocode-value"] {
  width: 100%; height: 46px; padding: 0 15px;
  border: 1px solid #ececec; border-radius: 6px; background: #fff; font-size: 14px;
}
.cart__form-wrapper .maxma-basket-promocode__promo-form input[type="submit"] {
  width: auto; height: 46px; padding: 0 16px; border-radius: 6px;
  font-size: 14px; font-weight: 600; line-height: 46px;
}
.cart__form-wrapper .maxma-basket-promocode__promo-error-message {
  margin: 8px 0 0; font-size: 13px; line-height: 130%; color: #c91855;
}

/* Правка №105: понятный текст у купона Битрикса вместо «купон применен» */
.basket-coupon-alert .basket-coupon-text__note { display: block; margin-top: 4px; font-size: 13px; line-height: 130%; }
.basket-coupon-alert[data-coupon-status="ENTERED"] .basket-coupon-text__orig { display: none; }
.basket-coupon-alert[data-coupon-status="ENTERED"] .basket-coupon-text__note::before {
  content: "Промокод не действует: товар акционный, скидка уже максимальная.";
}
/* HAPPY1000: без акционной цены причина отказа не связана с товаром. */
.basket-coupon-alert[data-coupon-status="ENTERED"].is-happy1000-without-sale .basket-coupon-text__note::before {
  content: "Промокод не может быть применён";
}
.basket-coupon-alert[data-coupon-status="APPLYED"] .basket-coupon-text__note::before {
  /* Правка №120 (09.09.2026): при применённом купоне вторая подпись «на акционные не действует» читалась как
     противоречие («применён» и «не действует» одновременно). Статус всегда один: применён / не действует / не найден. */
  content: none;
}
.basket-coupon-alert[data-coupon-status="APPLYED"] .basket-coupon-text__note { display: none; }
/* Правка №120: ссылка отмены купона — заметная, как ссылка */
.basket-coupon-alert .close-link { color: var(--ch-wine, #9b2242); text-decoration: underline; cursor: pointer; margin-left: 6px; white-space: nowrap; }
/* Правка №105: пока активен промокод Maxma — поле купона Битрикса скрыто (два кода вместе не считаются). Временно, до перевода кодов в Maxma. */
.cart__form-wrapper.maxma-promo-active .cart__promo-code { display: none; }
.cart__form-wrapper .maxma-basket-promocode__promo-form.accepted input[type="submit"],
.cart__form-wrapper .maxma-basket-promocode__promo-form[accepted] input[type="submit"] { background: #222; color: #fff; pointer-events: auto; }

/* Правка №106 (08.09.2026): страница «Бонусный счет» в кабинете (компоненты Maxma, шаблон cabinet) */
.bonus-page { max-width: 640px; }
.bonus-card { padding: 20px; border-radius: 10px; background: #f6f6f6; margin-bottom: 15px; }
.bonus-card__label { font-size: 14px; color: #666; margin-bottom: 4px; }
.bonus-card__balance { font-size: 32px; font-weight: 700; line-height: 1.1; color: #c91855; }
.bonus-card__balance span { font-size: 16px; font-weight: 600; color: #222; }
.bonus-card__pending, .bonus-card__expire, .bonus-card__meta { margin-top: 8px; font-size: 14px; color: #222; }
.bonus-card__expire { color: #a8332b; }
.bonus-card__hint { margin-top: 12px; font-size: 13px; line-height: 130%; color: #666; }
.bonus-level { padding: 15px 20px; border: 1px solid #ececec; border-radius: 10px; margin-bottom: 25px; }
.bonus-level__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #222; }
.bonus-level__row--small { margin-top: 8px; font-size: 13px; color: #666; }
.bonus-level__pct { font-weight: 600; }
.bonus-level__bar { position: relative; height: 8px; margin-top: 10px; border-radius: 4px; background: #ececec; overflow: hidden; }
.bonus-level__bar i { display: block; height: 100%; border-radius: 4px; background: #c91855; }
.bonus-history__title { font-size: 18px; font-weight: 700; margin-bottom: 12px; color: #222; }
.bonus-history__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ececec; }
.bonus-history__name { font-size: 14px; color: #222; }
.bonus-history__date { margin-top: 3px; font-size: 12px; color: #888; }
.bonus-history__amount { flex: 0 0 auto; font-size: 16px; font-weight: 700; white-space: nowrap; }
.bonus-history__amount span { font-size: 12px; font-weight: 400; color: #666; }
.bonus-history__amount.is-plus { color: #1f8a3b; }
.bonus-history__amount.is-minus { color: #a8332b; }
.bonus-history__empty { padding: 20px; border-radius: 10px; background: #f6f6f6; font-size: 14px; color: #666; }
@media (max-width: 767px) { .bonus-card__balance { font-size: 28px; } }

/* Правка №107 (08.09.2026): блок «Как с вами связываться» на странице «Личные данные» (happy:maxma.consent) */
.consent { max-width: 640px; margin: 25px 0 10px; padding: 20px; border-radius: 10px; background: #f6f6f6; }
.consent.is-busy { opacity: .6; pointer-events: none; }
.consent__title { font-size: 18px; font-weight: 700; color: #222; margin-bottom: 4px; }
.consent__hint { font-size: 13px; line-height: 130%; color: #666; margin-bottom: 12px; }
.consent__row { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; font-size: 14px; line-height: 130%; color: #222; cursor: pointer; }
.consent__row input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: #c91855; }
.consent__row em { font-style: normal; color: #888; }
.consent__tg { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 600; color: #2AABEE; text-decoration: none; }
.consent__status { min-height: 18px; margin-top: 8px; font-size: 13px; }
.consent__status.is-ok { color: #1f8a3b; }
.consent__status.is-err { color: #a8332b; }

/* Правка №110 (08.09.2026): экран входа — телефон по умолчанию, пароль второй ссылкой, мобильные отступы */
.auth-page .nav-tabs { display: flex !important; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; border: 0; margin: 0 0 14px; }
.auth-page .nav-tabs li a { font-size: 16px; font-weight: 600; color: #222; }
.auth-page .nav-tabs li:nth-child(2) a { font-size: 13px; font-weight: 400; color: #888; text-decoration: underline; }
.auth-page .nav-tabs li:nth-child(2).active a { color: #222; text-decoration: none; }
.auth-page .auth-phone-chat-help { display: block; margin: 6px 0 0; font-size: 12px; line-height: 140%; color: #666; white-space: normal; }
.auth-page .auth-phone-chat-help img { vertical-align: middle; }
.auth--phone .form_footer .prompt.remember,
.auth--phone .form_footer a.forgot,
.auth--phone .form_footer .line-block__item:first-child { display: none; }
@media (max-width: 767px) {
  .auth-page .form_body input[type="tel"], .auth-page .form_body input[type="text"], .auth-page .form_body input[type="password"] { height: 46px; font-size: 16px; }
  .auth-page .buttons .btn { width: 100%; margin: 0 0 10px; float: none; }
  .auth-page .buttons .register { float: none; }
}

/* Правка №111 (08.09.2026): главная кабинета — лента карточек (бонусы → даты → заказы → данные и связь) */
.lk { max-width: 640px; }
.lk-card { padding: 18px 20px; border-radius: 12px; background: #f6f6f6; margin-bottom: 12px; }
.lk-card__title { font-size: 18px; font-weight: 700; color: #222; margin-bottom: 8px; }
.lk-card__text { font-size: 14px; line-height: 140%; color: #444; }
.lk-card__text > div { margin-bottom: 2px; }
.lk-card__hint { margin-top: 6px; font-size: 13px; color: #888; }
.lk-card__link { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: #c91855; text-decoration: none; }
.lk-card__btn { display: inline-block; margin-top: 12px; padding: 12px 18px; border-radius: 8px; background: #c91855; color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none; }
.lk-card__btn.is-soon { background: #cfcfcf; pointer-events: none; }
.lk-card--bonus .bonus-card { background: transparent; padding: 0; margin: 0; }
.lk-card--bonus .bonus-card__hint { display: none; }
.lk-card--bonus .bonus-level { margin: 12px 0 0; padding: 12px 14px; background: #fff; border: 0; }
.lk-order { padding: 12px 14px; border-radius: 8px; background: #fff; }
.lk-order__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #222; }
.lk-order__row + .lk-order__row { margin-top: 6px; }
.lk-order__status { color: #666; }
.lk-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0 0; font-size: 14px; }
.lk-links a { color: #666; }
@media (max-width: 767px) { .lk-card { padding: 16px; } .lk-card__btn { display: block; text-align: center; } }

/* Правка №112 (08.09.2026): страница «Мои даты» (happy:important.dates) */
.dates-page { max-width: 640px; }
.dates__intro { font-size: 14px; line-height: 140%; color: #444; margin-bottom: 16px; }
.dates.is-busy { opacity: .6; pointer-events: none; }
.dates__list { margin-bottom: 20px; }
.dates__empty { padding: 16px; border-radius: 10px; background: #f6f6f6; font-size: 14px; color: #666; }
.dates__item { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 44px 12px 16px; border-radius: 10px; background: #f6f6f6; margin-bottom: 8px; }
.dates__item.is-soon { background: #fdf1f5; }
.dates__when { font-size: 16px; font-weight: 700; color: #222; }
.dates__soon { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 10px; background: #c91855; color: #fff; font-size: 11px; font-weight: 600; vertical-align: middle; }
.dates__reason { font-size: 14px; color: #444; }
.dates__del { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #999; font-size: 22px; line-height: 32px; cursor: pointer; }
.dates__del:hover { background: #fff; color: #c91855; }
.dates__form { padding: 16px; border-radius: 10px; border: 1px solid #ececec; }
.dates__form-title { font-size: 16px; font-weight: 700; color: #222; margin-bottom: 10px; }
.dates__row { display: flex; gap: 10px; }
.dates__field { display: block; flex: 1 1 auto; margin-bottom: 10px; }
.dates__field--day { flex: 0 0 110px; }
.dates__field span { display: block; font-size: 13px; color: #666; margin-bottom: 4px; }
.dates__field input, .dates__field select { width: 100%; height: 46px; padding: 0 12px; border: 1px solid #ececec; border-radius: 6px; background: #fff; font-size: 16px; color: #222; }
.dates__btn { display: block; width: 100%; height: 46px; border: 0; border-radius: 8px; background: #c91855; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.dates__btn:disabled { background: #cfcfcf; cursor: default; }
.dates__limit { margin-top: 10px; font-size: 13px; color: #a8332b; }
.dates__status { min-height: 18px; margin-top: 8px; font-size: 13px; }
.dates__status.is-ok { color: #1f8a3b; }
.dates__status.is-err { color: #a8332b; }

/* Правка №114 (09.09.2026): поле промокода Maxma в корзине скрыто по решению владельца — до подтверждения связки
   Maxma ↔ МойСклад ↔ Битрикс24 работают только купоны Битрикса. Откат — удалить этот блок. */
.cart__form-wrapper .maxma-basket-promocode { display: none !important; }
.cart__form-wrapper.maxma-promo-active .cart__promo-code { display: block !important; }

/* Правка №118 (09.09.2026; в первом снимке названа №117 — номер занят расчётом доставки): iOS Safari увеличивает страницу при фокусе в поле со шрифтом меньше 16px.
   Поле купона в корзине было 13px на телефоне (правило в медиа 767.98px выше), поля оформления заказа
   (.order__input) и форм входа/профиля (.form .form-control) — 15px. На экранах до 767.98px — 16px.
   Откат: удалить этот блок. */
@media only screen and (max-width: 767.98px) {
  .cart__promo-code input,
  #bx-soa-order-form .order__input,
  .order__input,
  .form .form-control input[type="text"],
  .form .form-control input[type="tel"],
  .form .form-control input[type="email"],
  .form .form-control input[type="password"],
  .form .form-control textarea {
    font-size: 16px !important;
  }
}

/* Правка №121 (09.09.2026): поле купона — плейсхолдер «Введите промокод», пояснение про акционные — строкой под полем
   (в плейсхолдер на телефоне не влезает: нужно 416px при 16px, доступно 270px). Когда показан статус купона
   (применён / не действует / не найден) — пояснение прячем, чтобы статус был один. Откат: удалить блок + вернуть шаблон/lang из бэкапа. */
.cart__promo-note { margin: 6px 0 0; font-size: 13px; line-height: 130%; color: #777; }
.cart__form:has(.basket-coupon-alert) .cart__promo-note { display: none; }

/* Правка №122 (09.09.2026): виджет бонусов Maxma в корзине — в потоке под статусом купона, а не абсолютом поверх него.
   Класс cart__form-wrapper--bonus-inline ставит скрипт в template.php корзины. Откат: удалить блок + скрипт. */
.cart__form-wrapper--bonus-inline .maxma.maxma-basket-bonus { position: static; margin: 12px 0 4px; }
.cart__form-wrapper--bonus-inline.cart__form-wrapper_bonus .cart__promo-code { margin-bottom: 15px; }
.cart__form-wrapper--bonus-inline .maxma-basket-bonus__container { padding: 0; border: none; }

/* Правка №123 (09.09.2026): бонусы за покупку видны всем, как у mateflowers.
   Карточка товара: модуль Maxma пишет «+N бонусов» в span.bonus-price-txt (он в скрытом блоке соцсетей), скрипт
   карточки (правка №78, template.php) зеркалит его в span.courier-price-bonus рядом с ценой (для гостя —
   через служебного клиента «Гость сайта» +70000000000, создан в Maxma 09.09); показываем его, а
   многословную плашку .card__bonus («Максимум бонусов за этот заказ…») держим скрытой.
   Корзина: строка «За заказ начислим +N бонусов» (happy:basket.bonus.preview) после «Итого». Откат: удалить блок. */
.card__bonus { display: none !important; }
.courier-price-slot .courier-price-bonus:empty { display: none; }
.courier-price-slot .courier-price-bonus:not(:empty) {
  display: inline-flex; align-items: center; vertical-align: middle; margin-left: 10px;
  font-size: 14px; font-weight: 600; line-height: 1; color: var(--ch-wine, #9b2242); white-space: nowrap;
}
.courier-price-slot .courier-price-bonus:not(:empty)::before {
  content: ""; width: 18px; height: 18px; margin-right: 5px; flex-shrink: 0;
  background: url(/local/templates/happy/img/icon-bonus.svg) no-repeat center / contain;
}
.cart__bonus-preview { display: flex; align-items: center; margin: 8px 0 0; font-size: 13px; line-height: 130%; color: #222; }
.cart__bonus-preview::before { content: ""; width: 18px; height: 18px; margin-right: 6px; flex-shrink: 0; background: url(/local/templates/happy/img/icon-bonus.svg) no-repeat center / contain; }
.cart__bonus-preview__num { margin-left: 4px; color: var(--ch-wine, #9b2242); }
.cart__bonus-preview[hidden] { display: none; }
.cart__bonus-preview--choice { margin: 10px 0 0; font-size: 14px; font-weight: 500; }
.cart__bonus-preview--choice::before { display: none; }
.cart__bonus-preview--choice .cart__bonus-preview__num { font-weight: 600; }

/* Правка №126 (09.09.2026): окно «бонусы — на ваш номер» перед оформлением заказа для гостя (корзина). Откат: удалить блок и разметку в template.php корзины. */
.bonus-gate { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: flex-end; justify-content: center; }
.bonus-gate[hidden] { display: none; }
.bonus-gate__backdrop { position: absolute; inset: 0; background: rgba(28, 26, 27, 0.55); }
.bonus-gate__panel { position: relative; width: 100%; max-width: 480px; max-height: 92vh; overflow: auto; background: #fff; border-radius: 16px 16px 0 0; padding: 22px 20px 20px; box-shadow: 0 -8px 30px rgba(0,0,0,.2); }
@media (min-width: 768px) { .bonus-gate { align-items: center; } .bonus-gate__panel { border-radius: 16px; padding: 28px; } }
.bonus-gate__close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; background: transparent; font-size: 28px; line-height: 1; color: #888; cursor: pointer; }
.bonus-gate__title { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--ch-ink, #1c1a1b); padding-right: 36px; }
.bonus-gate__lead { margin: 8px 0 14px; font-size: 14px; line-height: 140%; color: #444; }
.bonus-gate__num { font-weight: 700; color: var(--ch-wine, #9b2242); }
.bonus-gate__form .auth-page { padding: 0; margin: 0; }
.bonus-gate__form .auth-page h1, .bonus-gate__form .auth-page .auth-title { display: none; }
.bonus-gate__skip { display: block; margin-top: 14px; text-align: center; font-size: 14px; color: #777; text-decoration: underline; }
html.bonus-gate-open { overflow: hidden; }
/* Правка №126: в окне перед оформлением лишнее прячем — кнопку «Регистрация» (регистрация = код) */
.bonus-gate__form a.register { display: none !important; }
.bonus-gate__form .line-block__item.width100:empty { display: none; }


/* Правка №130 (14.09.2026, аудит промокодов): статус промокода — свой текст (скрипт в template.php корзины), цвет по смыслу,
   индикатор загрузки в поле, пока идёт применение. Откат: удалить блок. */
.basket-coupon-alert.is-human .basket-coupon-text__orig { display: none; }
.basket-coupon-alert[data-coupon-status="APPLYED"].is-human .basket-coupon-text__note { display: block; }
.basket-coupon-alert[data-coupon-status="APPLYED"] .basket-coupon-text__note { color: #2e7d32; font-weight: 600; }
.basket-coupon-alert[data-coupon-status="BAD"] .basket-coupon-text__note,
.basket-coupon-alert[data-coupon-status="ENTERED"] .basket-coupon-text__note { color: #c91855; }
.cart__promo-code input[data-entity="basket-coupon-input"]:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%239b2242' stroke-width='3' stroke-dasharray='42 16'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 48px center; background-size: 20px 20px;
}

/* Правка №132 (14.09.2026): строки «промокод / бонусы» под «Итого» на оформлении заказа (скрипт в sale.order.ajax/order/template.php). */
.order__loyalty { margin: 10px 0 0; }
.order__loyalty-row { font-size: 14px; line-height: 140%; color: #444; margin-top: 4px; }
.order__loyalty-row a { color: var(--ch-wine, #9b2242); text-decoration: underline; }
.order__loyalty-row.is-ok { color: #2e7d32; }
.order__loyalty-row.is-bad { color: #c91855; }
.order__loyalty-row.is-bonus b { color: var(--ch-wine, #9b2242); }
.order__loyalty-row.is-bonus::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; background: url(/local/templates/happy/img/icon-bonus.svg) no-repeat center / contain; }

/* Правка №145 (16.09.2026). Оформление заказа.
   1) Сообщение модуля расчёта доставки под адресом («По этому адресу автоматический расчёт… невозможен…»)
      целиком, в несколько строк: в bitrix/css/corsik.yadelivery/corsik.yadelivery.css у .ck-error
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis — на телефоне видно только начало фразы. */
.bx-soa-customer-field .ck-error { white-space: normal; overflow: visible; text-overflow: clip; padding-right: 0; }
/* 2) «Текст открытки» перенесён скриптом под «Способ доставки» (template.php оформления, блок №145). */
.courier-card-text { width: 100%; margin: 0 0 8px; }
.courier-card-text > .order__item { margin-top: 0; }

/* ======================================================================
   Правка №154 (17.09.2026) — утверждённые плитки каталога на главной.
   Подпись и стрелка находятся внутри изображения, поэтому ссылка не имеет
   отдельного видимого текста. Размер задаёт сама картинка без обрезки.
   ====================================================================== */
.categories .category_tile {
  display: block;
  height: auto;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  background: none;
}

.categories .category_tile img {
  display: block;
  width: 100%;
  height: auto;
}

/* The bouquet photo keeps its full frame at every header breakpoint. */
.bd-banner__photo {
  flex: 0 0 165px;
  background: #fff5f8;
}

.bd-banner__photo img {
  object-fit: contain;
  object-position: center;
}

@media only screen and (max-width: 767.98px) {
  .bd-banner__photo { flex-basis: 135px; }
}

@media only screen and (min-width: 992px) {
  .home-hero .bd-banner__photo {
    flex: 0 0 156px;
    height: auto;
    align-self: stretch;
  }
}

/* Баннер ко Дню учителя на главной странице */
.teacher-day-home-banner {
  width: 100%;
  margin: 24px 0 0;
  border-radius: 12px;
  overflow: hidden;
}

.teacher-day-home-banner a,
.teacher-day-home-banner picture,
.teacher-day-home-banner img {
  display: block;
  width: 100%;
}

.teacher-day-home-banner img {
  height: auto;
}

@media (max-width: 767px) {
  .teacher-day-home-banner {
    margin-top: 16px;
  }
}

/* Home catalog: consistent burgundy captions over the existing ivory bands. */
.categories .category_tile {
  position: relative;
}

.categories .category_tile__caption {
  position: absolute;
  inset: auto 0 0;
  box-sizing: border-box;
  height: 15%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 7%;
  background: #fcf5ea;
  color: #951030;
  font-size: clamp(10px, 1.35vw, 20px);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.categories .category_tile__caption span:last-child {
  font-size: 1.35em;
  font-weight: 400;
}

.categories__grid_home .category:nth-child(1) .category_tile__caption { background: #fdf3e6; }
.categories__grid_home .category:nth-child(2) .category_tile__caption { background: #fcf5ea; }
.categories__grid_home .category:nth-child(3) .category_tile__caption { background: #fef7ee; }
.categories__grid_home .category:nth-child(4) .category_tile__caption { background: #fef5eb; }
.categories__grid_home .category:nth-child(5) .category_tile__caption { background: #fbf2e7; }
.categories__grid_home .category:nth-child(6) .category_tile__caption { background: #fdf3e8; }
.categories__grid_home .category:nth-child(7) .category_tile__caption { background: #fdf4ea; }
.categories__grid_home .category:nth-child(8) .category_tile__caption { background: #fef4e8; }

@media only screen and (max-width: 767.98px) {
  .categories__grid_home {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: repeat(2, max-content);
    grid-auto-columns: max(115px, calc(33% - 6px));
    grid-auto-flow: column;
    overflow-x: auto;
    overflow-y: hidden;
    height: auto;
    align-content: start;
  }

  .categories__grid_home .category {
    width: 100%;
    min-width: 0;
  }

  .categories__grid_home .category:nth-child(-n+4) { grid-row: 1; }
  .categories__grid_home .category:nth-child(n+5) { grid-row: 2; }
  .categories__grid_home .category:nth-child(4n+1) { grid-column: 1; }
  .categories__grid_home .category:nth-child(4n+2) { grid-column: 2; }
  .categories__grid_home .category:nth-child(4n+3) { grid-column: 3; }
  .categories__grid_home .category:nth-child(4n) { grid-column: 4; }

  .categories .category_tile__caption {
    font-size: 10px;
    padding: 0 6%;
    gap: 3px;
  }
}

@media only screen and (max-width: 575.98px) {
  .categories__grid_home {
    grid-auto-columns: max(115px, calc(40% - 6px));
  }
}

/* End */
/* /local/templates/happy/css/owl.carousel.css?17754704103971 */
/* /local/templates/happy/css/swiper-bundle.min.css?177547041018454 */
/* /local/templates/happy/css/magnific-popup.css?177547041011158 */
/* /local/templates/happy/css/ion.rangeSlider.css?17754704102556 */
/* /local/templates/happy/css/ion.rangeSlider.skinHTML5.css?17754704102385 */
/* /local/templates/happy/components/bitrix/search.title/header-search/style.css?1775470410111 */
/* /local/templates/happy/components/bitrix/sale.basket.basket.line/header-link/style.css?17754704104804 */
/* /local/templates/happy/components/bitrix/catalog.section.list/header-catalog/style.css?1775470410565 */
/* /local/templates/happy/components/bitrix/search.title/header-mobile-search/style.css?1775470410111 */
/* /local/templates/happy/components/bitrix/form.result.new/popup_catalog/style.css?17754704101535 */
/* /local/templates/happy/components/bitrix/form.result.new/popup_cart/style.css?17754704101306 */
/* /local/templates/happy/styles.css?17888554114608 */
/* /local/templates/happy/template_styles.css?1791492062406864 */