@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;500;700&display=swap");

/* Variables */
:root {
  --bg: #ffffff;
  --text: #1f242c;
  --muted: #8a7f7f;
  --line: #262626;
  --accent: #f1c14a;
  --black: #030102;
}

/* Section */
.section-hero {
  position: relative;
  width: 100%;
  background: var(--bg);
  overflow: hidden;
  font-family: "Montserrat Alternates", "Segoe UI", sans-serif;
}
.section-hero {
	 .button-block{
		 .product-button {
			  background: #FCC449;
			  min-width: 290px;
				height: 56px;
				border: 2px solid var(--black);
				border-radius: 12px;
				font-size: 20px;
				font-weight: 500;
				font-family: inherit;
				cursor: pointer;
				transition: all 0.25s ease;
				text-transform: unset;
			}
	 }
	
	.container {
	  position: relative;
	  height: 100%;
	  margin: 0 auto;
	  padding: 20px;
	  box-sizing: border-box;
	}

	.container > * {
	  width: 100%;
	  box-sizing: border-box;
	}
	.lazy-blur {
	  transform: none;
	  transition: none;
	  filter: none;
	}
	/* Header */
	.header {
	  display: grid;
	  grid-template-columns: 1fr auto 1fr;
	  align-items: center;
	  column-gap: 18px;
	  position: relative;
	  width: 100%;
	  z-index: 4;
	  margin-top: 16px;
	}

	.logo-link {
	  grid-column: 1;
	  justify-self: start;
	}

	.logo {
	  width: 127px;
	  height: auto;
	  display: block;
	}

	/* Navigation */
	.nav {
	  grid-column: 2;
	  justify-self: center;
	  display: flex;
	  gap: 42px;
	}

	.nav-link {
	  text-decoration: none;
	  color: var(--text);
	  font-size: 16px;
	  font-weight: 500;
	  transition: all 0.25s ease;
	  position: relative;
	}

	.nav-link::after {
	  content: "";
	  position: absolute;
	  left: 0;
	  bottom: -4px;
	  width: 100%;
	  height: 2px;
	  background: currentColor;
	  opacity: 0;
	  transition: opacity 0.25s ease;
	}

	.nav-link:hover::after,
	.nav-link:focus-visible::after {
	  opacity: 1;
	}

	/* Actions */
	.actions {
	  grid-column: 3;
	  justify-self: end;
	  display: flex;
	  align-items: center;
	  gap: 16px;
	}

	.icon-btn {
	  width: 52px;
	  height: 48px;
	  display: inline-grid;
	  place-items: center;
	  border: 0;
	  background: transparent;
	  padding: 0;
	  position: relative;
	  cursor: pointer;
	}

	.cart-icon,
	.menu-icon {
	  display: block;
	}

	.cart-icon {
	  height: 28px;
	  width: 28px;
	}

	.menu-icon {
	  width: 22px;
	  height: 22px;
	}

	.cart-btn {
	  position: relative;
	}

	.cart-btn::after {
	  content: "Моя корзина";
	  clip: rect(0 0 0 0);
	  height: 1px;
	  margin: -1px;
	  overflow: hidden;
	  position: absolute;
	  width: 1px;
	  bottom: -28px;
	  left: 50%;
	  transform: translateX(-50%);
	  white-space: nowrap;
	  background: var(--black);
	  border-radius: 8px;
	  font-size: 13px;
	  font-weight: 500;
	  color: #ffffff;
	  z-index: 10;
	  opacity: 0;
	  transition: opacity 0.25s ease;
	}

	.cart-btn:hover::after,
	.cart-btn:focus-visible::after {
	  clip: auto;
	  height: auto;
	  margin: 0;
	  overflow: visible;
	  position: static;
	  width: auto;
	  position: absolute;
	  padding: 7px 10px;
	  opacity: 1;
	}

	.menu-btn {
	  display: none;
	  width: 40px;
	  height: 40px;
	  padding: 0;
	}

	.btn-login {
	  min-width: 143px;
	  height: 46px;
	  border: 2px solid var(--black);
	  background: transparent;
	  border-radius: 12px;
	  color: var(--text);
	  font-size: 20px;
	  font-weight: 500;
	  font-family: inherit;
	  cursor: pointer;
	  transition: all 0.25s ease;
	}

	.btn-login:hover,
	.btn-login:focus-visible {
	  background: var(--text);
	  color: #ffffff;
	}

	/* Background Elements */
	.bg-elements {
	  position: absolute;
	  inset: 0;
	  overflow: hidden;
	  pointer-events: none;
	  z-index: 1;
	}

	.bg-item {
	  position: absolute;
	  opacity: 0.32;
	  filter: grayscale(1);
	  user-select: none;
	  transform: translateY(0);
	  max-width: clamp(44px, 5.8vw, 98px);
	  height: auto;
	  object-fit: contain;
	}

	.floating {
	  position: absolute;
	  will-change: transform;
	  transform: translateY(0);
	  user-select: none;
	  pointer-events: none;
	}

	/* Background positions */
	.bg-l1 { left: 3.5%; top: 16%; width: clamp(88px, 9.5vw, 142px); }
	.bg-l2 { left: 1.8%; top: 49%; width: clamp(72px, 7.2vw, 112px); }
	.bg-l3 { left: 2.2%; top: 75%; width: clamp(80px, 8vw, 124px); }
	.bg-l4 { left: 12.8%; top: 82%; width: clamp(92px, 9.1vw, 140px); }
	.bg-r2 { right: 2.2%; top: 76%; width: clamp(96px, 10vw, 150px); }
	.bg-r3 { right: 3.2%; top: 54%; width: clamp(90px, 9.2vw, 142px); }
	.bg-r4 { right: 3%; top: 16%; width: clamp(72px, 7vw, 108px); }
	.bg-r5 { right: 14.5%; top: 84%; width: clamp(86px, 8.8vw, 132px); }

	/* Media/Product */
	.media {
	  display: grid;
	  place-items: center;
	  margin-top: 36px;
	  position: relative;
	  z-index: 3;
	}

	.product-stage {
	  margin-bottom: 40px;
	  position: relative;
	  width: 428px;
	  height: 428px;
	}

	.product-img {
	  position: absolute;
	  inset: 0;
	  width: 100%;
	  height: 100%;
	  object-fit: contain;
	  object-position: center;
	  will-change: transform, opacity;
	  transform: translate3d(0, 0, 0);
	  image-rendering: auto;
	  backface-visibility: hidden;
	  -webkit-backface-visibility: hidden;
	}

	.print-wrapper {
	  position: absolute;
	  inset: 0;
	  width: 100%;
	  height: 100%;
	  pointer-events: none;
	}

	.product-print {
	  will-change: transform, clip-path, opacity;
	}

	/* Hero Content */
	.hero-content {
	  position: relative;
	  z-index: 3;
	  text-align: center;
	  margin-top: 18px;
	  margin-bottom: 40px;
	}

	.hero-title {
	  margin: 0;
	  color: var(--text);
	  font-size: 58px;
	  line-height: 1.05;
	  font-weight: 700;
	}

	.hero-text {
	  max-width: 760px;
	  margin: 22px auto 0;
	  color: var(--muted);
	  font-size: 20px;
	  line-height: 1.25;
	  font-weight: 400;
	}

	/* CTA Buttons */
	.cta-group {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  gap: 18px;
	  margin-top: 34px;
	}

	.btn {
	  min-width: 290px;
	  height: 56px;
	  border: 2px solid var(--black);
	  border-radius: 12px;
	  font-size: 20px;
	  font-weight: 500;
	  font-family: inherit;
	  cursor: pointer;
	  transition: all 0.25s ease;
	  
	}

	.btn-primary {
	  background: var(--accent);
	  text-transform: unset;
	}

	.btn-secondary {
	  background: #ffffff;
	  color: #000;
	  text-transform: unset;
	}

	.btn-primary:hover,
	.btn-primary:focus-visible {
	  background: #f6cd66 !important;
	  box-shadow: 0 8px 20px rgba(38, 38, 38, 0.18) !important;
	}

	.btn-secondary:hover,
	.btn-secondary:focus-visible {
	  background: var(--text) !important;
	  color: #ffffff;
	  -webkit-text-fill-color: #fff;
	}

	/* Responsive */
	@media (max-width: 1512px) {
	  .btn-login { font-size: 16px; }
	}

	@media (max-width: 1440px) {
	  .floating { opacity: 0.3; }
	}

	@media (max-width: 1024px) {
	  .menu-btn {
		display: inline-block;
		grid-column: 1;
		justify-self: start;
	  }

	  .logo-link {
		grid-column: 2;
		justify-self: center;
	  }

	  .nav,
	  .btn-login {
		display: none;
	  }

	  .actions {
		grid-column: 3;
		justify-self: end;
	  }

	  .logo { width: 132px; }
	  .hero-title { font-size: 44px; }
	  .hero-text { font-size: 16px; margin-top: 18px; }
	  .btn { min-width: 280px; font-size: 20px; height: 56px; }
	}

	@media (max-width: 480px) {
	   .hero-content div.button-block {
			min-width: 100%;
	   }
	  .section-hero { height: 100vh; }
	  .header { column-gap: 10px; align-items: center; margin-top: -16px; }
	  .logo { width: 100px; height: 40px; }
	  .menu-icon,
	  .cart-icon { width: 28px; height: 28px; }
	  .product-stage { width: 281px; height: 281px; margin-top: 8px; margin-bottom: 20px;}
	  .media { margin-top: 18px; }
	  .hero-content { margin-top: 10px; }
	  .hero-title { font-size: 28px; line-height: 1.12; }
	  .hero-text { font-size: 14px; margin-top: 16px; margin-bottom: 32px; line-height: 1.35; }
	  .cta-group { flex-direction: column; gap: 10px; margin-top: 18px; }
	  .btn, .button-block .product-button { min-width: 100%; height: 56px; font-size: 15px; font-weight: 600; border: 1px solid var(--black); }
	  .bg-item { max-width: clamp(48px, 16vw, 82px); }
		.btn {
		color: #000000;  /* Force black text */
		-webkit-text-fill-color: #000000; /* Override any default blue */
	  }
	}

	/* Mobile image quality guardrails for animated product assets */
	@media (max-width: 480px) {
	  .product-stage,
	  .print-wrapper,
	  .product-img {
		transform: translate3d(0, 0, 0);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	  }
	}
}