/**/

:root {
  --blue: #0B2EDB;
  --blue: #005abf;
  
  --blue-dark: #071D9A;
  --blue-mid: #1A47F5;
  --blue-light: #4D6DF7;
  --blue-pale: #E8ECFF;
  --blue-ultra: #F0F4FF;
  --white: #ffffff;
  --gray-50: #F7F8FC;
  --gray-100: #ECEEF5;
  --gray-300: #C5C9DC;
  --gray-500: #8187A3;
  --gray-700: #3E4466;
  --dark: #0A0E27;
  --gold: #F5A623;
  --red: #E8334A;
  --green: #22C55E;
}
.gap10 { gap: 10px; }
.gap15 { gap: 15px; }
.gap20 { gap: 20px; }
.trust-bar { background: var(--blue); }
.trust-inner { max-width: 1400px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { padding: 22px 24px; display: flex; align-items: center; gap: 14px; border-right: 1px solid rgba(255,255,255,0.12); }
.trust-item:last-child { border-right: none; }
.trust-icon { font-size: 26px; width: 40px; width: fit-content;}
.trust-text strong { display: block; font-size: 13.5px; font-weight: 700; color: white; margin-bottom: 2px; }
.trust-text span { font-size: 11.5px; color: rgba(255,255,255,0.6); }

.section { max-width: 1400px; margin: 0 auto; padding: 60px 0px; }
.section-0 { max-width: 1400px; margin: 0 auto; padding: 0px 0px; }
.section-5 { max-width: 1400px; margin: 0 auto; padding: 5px 0px; }
.section-15 { max-width: 1400px; margin: 0 auto; padding: 15px 0px; }
.section-30 { max-width: 1400px; margin: 0 auto; padding: 30px 0px; }
.section-45 { max-width: 1400px; margin: 0 auto; padding: 45px 0px; }
.section-60 { max-width: 1400px; margin: 0 auto; padding: 60px 0px; }
.section-header { display: flex; align-items: flex-end; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.section-title { font-family: 'Unbounded', sans-serif; font-size: 26px; font-weight: 800; color: var(--dark); letter-spacing: -0.5px; }
.section-title span { color: var(--blue); }

        /* .section-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 48px;
            flex-wrap: wrap;
            gap: 20px;
        } */

.section-title {font-size: 2.2rem; font-weight: 300; color: #1e1e1e; letter-spacing: -0.02em;}
.section-title strong {font-weight: 700; color: #2a2a2a;}
.section-link {color: var(--dark); text-decoration: none; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 8px; transition: color 0.2s; font-weight: 500;}
.section-link:hover  {color:  #063648; color: var(--blue);}
.section-link svg {transition: transform 0.2s;}
.section-link:hover svg {transform: translateX(4px);}

.see-all { font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: none; }
.see-all:hover { text-decoration: underline; }
.divider { height: 1px; background: var(--gray-100); max-width: 1400px; margin: 0 auto; }

.categories-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.cat-card { background: var(--blue-ultra); border: 1.5px solid var(--blue-pale); border-radius: 15px; padding: 28px 20px 22px; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 14px; transition: all 0.25s; position: relative; overflow: hidden; cursor: pointer; }
.cat-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--blue); transform: scaleX(0); transition: transform 0.25s; }
.cat-card:hover { border-color: var(--blue); background: var(--blue-pale); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(11,46,219,0.12); }
.cat-card.active { border-color: var(--blue); background: var(--blue-pale); transform: translateY(0px); box-shadow: 0 0px 0px rgba(11,46,219,0.12); }
.cat-card:hover::before { transform: scaleX(1); }
.cat-icon { width: 64px; height: 64px; background: white; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; box-shadow: 0 4px 16px rgba(11,46,219,0.1); }
.cat-name { font-family: 'Unbounded', sans-serif; font-size: 13px; font-weight: 700; color: var(--dark); text-align: center; line-height: 1.3; }
.cat-count { font-size: 11.5px; color: var(--gray-500); font-weight: 500; }

.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.product-card { background: white; border: 1.5px solid var(--gray-100); border-radius: 15px; overflow: hidden; transition: all 0.28s cubic-bezier(0.25,0.46,0.45,0.94); position: relative; cursor: pointer; display: flex; flex-direction: column; text-align: justify; margin-top:5px}
.product-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 20px 60px rgba(11,46,219,0.14); }
.product-img-wrap { position: relative; background: var(--white); padding: 20px; height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-img-wrap img { max-height: 160px; max-width: 100%; object-fit: contain; transition: transform 0.35s; z-index: 0; }
.product-card:hover .product-img-wrap img { transform: scale(1.05); }
.product-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 5px; z-index: 2; pointer-events: none; }
.badge-new { background: var(--blue); color: white; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.badge-hit { background: var(--gold); color: var(--dark); font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.badge-sale { background: var(--red); color: white; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.product-actions-hover { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateX(8px); transition: all 0.22s; z-index: 3; }
.product-card:hover .product-actions-hover { opacity: 1; transform: translateX(0); }
.action-btn { width: 34px; height: 34px; background: white; border: 1.5px solid var(--gray-100); border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.15s; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.action-btn:hover { border-color: var(--blue); background: var(--blue-pale); }
.action-btn.active { background: var(--blue); border-color: var(--blue); color: white; }
.product-body { padding: 16px 18px; display: flex; flex-direction: column; flex: 1; position: relative; z-index: 1; background: white; }
.product-series { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue); font-weight: 500; margin-bottom: 5px; }
.product-name { font-family: 'Unbounded', sans-serif; font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 10px; line-height: 1.3; text-decoration: none; display: block; }
.product-name:hover { color: var(--blue); }
.rating-detail i:before { margin: 2px;font-size: 100%; }
.rating em {    font-size: 12px; color: var(--gray-700); font-weight: 600; font-style: normal;}

.hardness-row { margin-bottom: 12px; width: stretch; }
.hardness-label { font-size: 10.5px; color: var(--gray-500); font-weight: 500; margin-bottom: 4px; }
.hardness-scale { display: flex; gap: 3px; align-items: center; height: 16px; }
.hardness-seg { flex: 1; height: 5px; border-radius: 3px; background: var(--gray-100); }
.hardness-seg.active { background: var(--blue); }
.hardness-text { font-size: 10.5px; color: var(--blue); font-weight: 600; margin-left: 6px; white-space: nowrap; }

.product-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.stars { color: var(--gold); font-size: 12px; letter-spacing: 1px; }
.rating-num { font-size: 12px; color: var(--gray-700); font-weight: 600; }
.rating-count { font-size: 11px; color: var(--gray-500); }
.compare-btn { font-size: 10.5px; color: var(--gray-500); cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 2px 0; border: none; background: none; font-family: 'Manrope', sans-serif; font-family: "Roboto", Arial, Helvetica, sans-serif; transition: color 0.15s; margin-bottom: 10px; }
.compare-btn:hover { color: var(--blue); }
.product-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--gray-100); }
.product-price { font-family: 'Unbounded', sans-serif; font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 17px; font-weight: 800; color: var(--dark); }
.product-price-old { font-size: 12px; color: var(--gray-500); text-decoration: line-through; font-weight: 500; }
.btn-cart { background: var(--blue); color: white; border: none; border-radius: 10px; padding: 9px 16px; font-family: 'Manrope', sans-serif; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 13px; cursor: pointer; transition: all 0.18s; display: flex; align-items: center; gap: 6px; }
.btn-cart:hover { background: var(--blue-dark); transform: translateY(-1px); }

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-size: 80%;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}


/**/

 /* ===== 4. ГОРИЗОНТАЛЬНЫЕ ПРОМО ===== */
        .promo-horizontal {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            gap: 30px;
            background: #fbf9f7;
			background-color: #f8f8f8;
            border-radius: 10px;
            overflow: hidden;
        }

        .promo-horizontal-content {
            padding: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

		.promo-horizontal-content span {
			color: #480606;
			color: #063648;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.15em;
			font-size: 0.75rem;
			margin-bottom: 16px;

			display: inline-block;
			background: rgba(184, 115, 51, 0.1);
			color: #B87333;
			padding: 8px 20px;
			border-radius: 40px;
			font-size: 0.8rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.1em;
			margin-bottom: 16px;
			border: 1px solid rgba(184, 115, 51, 0.2);
			width: fit-content;
		}	

        .promo-horizontal-title {
            font-size: 2.2rem;
            font-weight: 300;
            margin-bottom: 20px;
            color: #1e1e1e;
        }

        .promo-horizontal-title strong {
            font-weight: 700;
            color: #a67c4e;
			color: #063648;
        }

        .promo-horizontal-desc {
            font-size: 1.1rem;
            color: #5a5a5a;
            margin-bottom: 30px;
            font-weight: 300;
        }

        .promo-horizontal-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            /* padding: 14px 36px; */
			padding: 12px 25px;
            background: #063648;
            background: var(--blue);
            color: white;
            text-decoration: none;
            font-weight: 500;
            /* text-transform: uppercase; 
            letter-spacing: 0.1em;
            font-size: 0.85rem;*/
			font-size: 0.875rem;
            transition: background 0.2s;
            align-self: flex-start;
			border-radius: 10px;
			width: fit-content;
        }

        .promo-horizontal-btn:hover {
            /* background: #a67c4e; */
			/* background-color: #FFC107; */
            background: var(--blue-dark);
			color: #fff !important;
        }

        .promo-horizontal-image {
            height: 100%;
        }

        .promo-horizontal-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

		@media (max-width: 991px) {

		.promo-horizontal {
        	grid-template-columns: 1fr;
 	   	}
		.promo-horizontal-content {
			text-align: center;
			padding: 30px;
            align-items: center;
		}

		.promo-horizontal-btn {
			align-self: center;
		}

		}

        .btn-wish:disabled, .btn-wish[disabled]{
            border-color: var(--red);
            background: #FFF0F2;
        }

/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/
#newsletter input[type='email'].active {
    border: 1px solid red;
}

@media (max-width: 991px){
    .section{ padding: 5px; }
    .section-header { display: flex; flex-direction: column; margin: 0px;}
    .section-headers { display: flex; flex-direction: column; margin: 0px; display:none; }
    .section-title { font-size: x-large; }
    section.scategories { display:none; }
    .trust-inner { display: none; grid-template-columns: 1fr; }
    .categories-grid { display: grid; grid-template-columns: 1fr; gap: 16px; display: none;}
    .products-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
}