/*
Theme Name: Neft - Motor Oil Theme
Theme URI: https://example.com/neft
Author: Developer
Author URI: https://example.com
Description: Тема WordPress для продажи моторных масел оптом. Тёмный дизайн с жёлтыми акцентами.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: neft
Tags: e-commerce, dark, oil, wholesale
*/
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
/* ============================================
   CSS Variables & Reset
   ============================================ */
:root {
    --bg-dark: #131313;
    --bg-card: #1a1a1a;
    --bg-card-hover: #252525;
    --yellow: #FFCC00;
    --yellow-hover: #FFC400;
    --white: #ffffff;
    --gray-light: #999999;
    --gray-medium: #666666;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --font-main:  "Space Grotesk", sans-serif;
    --container-width: 1280px;
    --section-padding: 80px 0;
    --border-radius: 12px;
    --transition: 0.3s ease;
}





* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body { 
    font-family: var(--font-main);
  background:url(images/bg.jpg); background-size:3%;
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden; position:relative;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

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

button,
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

/* ============================================
   Container & Layout
   ============================================ */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
   width:100%;
}

.section {
    padding: var(--section-padding);
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

h1 {
    font-size: 50px;  font-weight: 700;  margin-bottom:50px;
}

h2 {
    font-size: 48px;
    margin-bottom: 40px;
}

h3 {
    font-size: 24px;
}

.text-yellow {
    color: var(--yellow);
}

.text-gray {
    color: var(--gray-light);
}

/* ============================================
   Header
   ============================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
 height: 80px;  background: rgba(25.75, 25.75, 25.75, 0.70); box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.40); backdrop-filter: blur(13px); justify-content: space-between; align-items: center; display: inline-flex;
 z-index:233;
}

.header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.header__logo {
    font-size: 32px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--white);
    letter-spacing: 2px;
    flex-shrink: 0;
}

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

.header__nav-list {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header__nav-list li {
    display: flex;
    align-items: center;
}



.header__nav-list a {
    font-size: 14px;
    font-weight: 700;
 
    color: var(--gray-light);
    position: relative;
    padding:  0;
    transition: var(--transition);
}



.header__nav-list a:hover {
    color: var(--white);
}



.header__nav-list .menu-item:hover a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--white);
}



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

.header__phone {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 28px;
    font-weight: 600;
    color: var(--white);
    white-space: nowrap;
}

.header__phone svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.header__social {
    display: flex;
    gap: 10px;
}

.header__social-link {
    width: 30px;
    height: 30px;
    border-radius: 50%;
   
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}

.header__social-link:hover {
    background-color: var(--yellow);
}

.header__social-link svg {
    width: 18px;
    height: 18px;
    fill: var(--white);
}

.header__social-link:hover svg {
    fill: var(--bg-dark);
}

/* Mobile Menu Toggle */
.header__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.header__toggle span {
    width: 30px;
    height: 3px;
    background-color: var(--white);
    transition: var(--transition);
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
    position: relative;
   
    display: flex;
    align-items: center;
    padding-top: 137px;
   
}

.hero__container {
    
}

.hero__content {
    position: relative;
    z-index: 2;
}

.hero__subtitle {
    font-size: 50px;
    color: var(--white);
    
    font-weight: 700;
}

.hero__title {
    font-size: 80px;
	font-weight: 700;
    color: var(--yellow);
    text-transform: uppercase;
    margin-bottom: 50px;
    line-height: 1.1;
	
}

.hero__description {
    font-size: 24px;
    color: var(--white);
    margin-bottom: 20px;
}

.hero__text {
    font-size: 30px;
    color: var(--white);
	font-weight: 400;
    margin-bottom: 100px;
}

.hero__btn {
    width: 300px; padding-top: 20px; padding-bottom: 20px; background: linear-gradient(177deg, #FFF1A8 0%, var(--yellow, #FFCC00) 100%); box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.40); border-radius: 60px; justify-content: center; align-items: center; gap: 30px; display: inline-flex; cursor:pointer;
	text-align: center; justify-content: center; display: flex;  color: var(--BG, #131313); font-size: 14px;  font-weight: 500; line-height: 20px; box-sizing:border-box;
}

.hero__btn:hover {
    background-color: var(--yellow-hover);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 214, 0, 0.3);
}

.hero__btn svg {
    width: 24px;
    height: 24px;
    transition: var(--transition);
}

.hero__btn:hover svg {
    transform: translateX(5px);
}

.hero__image {
    position: absolute;  top:0px; right:280px;
}

.hero__image img {
    width: 100%;
    max-width: 600px;
  
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

.hero__oil-splash {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ============================================
   Features Section
   ============================================ */
    #features .container{position:relative;}
   #features .container:after{display:table; content:" "; width:1167px; height:638px;  position:absolute; bottom:-5px; left:0; z-index:-1; background:url(images/oil_4.png) no-repeat center;}
   


.features__grid { flex-wrap: wrap;
   display:flex; 
    gap: 20px;
}
.features__grid .rightpreim{     display: flex;
    flex-wrap: wrap;     justify-content: flex-end;
    gap: 20px; max-width:calc(75% - 10px);}

.feature-card.whitebl{background:#fff;}
.feature-card.whitebl.bol{height:300px; display: flex;
    flex-direction: column;
    justify-content: center;
	
	 width:100%; max-width:calc(25% - 10px);
	}

.feature-card { 
    background-color: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 20px;
    transition: var(--transition);
	box-sizing:border-box;
	width: calc((100% - 40px) / 3); /* 33.33% минус отступы */
	height:auto;
	    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.feature-card--white {
    background-color: var(--white);
    color: var(--bg-dark);
}

.feature-card:hover {
    transform: translateY(-5px);
    
}



.feature-card__title {
	color: white;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1;
	display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.whitebl .feature-card__title {
    color: var(--bg-dark);
}

.feature-card__text {
    font-size: 14px;
   
	color: white;
    line-height: 1.2;
	 font-weight: 400;
}
.feature-card.whitebl .feature-card__text { color: #131313;}

.feature-card--white .feature-card__text {
    color: var(--gray-medium);
}

/* ============================================
   Products Section
   ============================================ */


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

.products__title {
    font-size: 48px;
    margin-bottom: 0;
}

.products__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.prcarobsh{max-width:calc(100% - 326px); width: 100%;}
.products__grid.katalog{ grid-template-columns: repeat(3, 1fr); } 
.post-type-archive-product .products .container{display: flex;
    justify-content: space-between; gap:20px;}
.filter-submit-btn.hero__btn{border:0; width:100%; font-weight: 500;}
.product-card { box-sizing: border-box;
  height: auto;   background: #282828; box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.40); overflow: hidden; border-radius: 20px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; display: inline-flex;
    padding: 30px 20px ; 
    position: relative;
    transition: var(--transition);
}

.product-card:hover {
    transform: translateY(-5px);
    background-color: var(--bg-card-hover);
}

.product-card__badge,.product-card__badge2 {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 28px;
    height: 40px;
   z-index:9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-card__badge2{right:auto; left:20px;}
.product-card__badge svg {
    width: 24px;
    height: 24px;
}

.product-card__image {     width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
   
}

.product-card__image img {
    max-height: 100%;
    object-fit: contain;
}

.product-card__category {
    font-size: 14px;
    color: #fff;
    margin-bottom: 4px;
}

.product-card__title {
    display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;          /* современный стандарт */
  overflow: hidden;
  overflow-wrap: break-word; 
  min-height: 91px;
  font-size:20px;
}

.product-card__volume {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #fff;
	font-weight:700;

}

.product-card__volume svg {
    width: 16px;
    height: 16px;
}

.podsvetskidka img{    box-shadow: 0 8px 32px rgb(255 255 255 / 90%);}

.product-card__volumeflex{display: flex;
    gap: 20px;         flex-direction: row;}

.product-card__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
      flex-wrap: wrap;
}

.product-card__price-current {
    font-size: 24px;
    font-weight: 700;
    color: var(--yellow);
}

.product-card__price-current span{font-size: 22px;}

.product-card__price-unit {
    font-size: 14px;
    color: var(--gray-light);
}

.product-card__btn {
    width: 100%;
    padding: 15px;
    background-color: var(--yellow);
    color: var(--bg-dark);
    font-size: 14px;
    font-weight: 500;
  
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition);
}

.product-card__btn:hover {
    background-color: var(--yellow-hover);
}
.archive .site-main,.page-template-default .site-main{padding-top:100px;} 
.bread-header{margin-bottom:50px;}
	.aioseo-breadcrumbs{display: flex;
    justify-content: flex-start; gap:10px;
    align-items: center;}
.aioseo-breadcrumb{ color: #FFCC00; font-size: 14px;  font-weight: 400; }
.aioseo-breadcrumb a{opacity: 0.50; color: white; }
.aioseo-breadcrumb-separator{background:url(images/arrowbread.svg) center no-repeat; font-size: 0px; width:10px; height:10px; display: inline-table;}
/* Dark Pagination Style */
.dark-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 40px 0;
    padding: 20px;
    flex-wrap: wrap;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0 15px;
    background: #1a1a1a;
    color: #ffffff;
    text-decoration: none;
    border-radius: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 500;
    border: 2px solid #2a2a2a;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pagination-btn:hover {
    background: linear-gradient(177deg, #FFF1A8 0%, var(--yellow, #FFCC00) 100%);
    color: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

.pagination-active {
      background: linear-gradient(177deg, #FFF1A8 0%, var(--yellow, #FFCC00) 100%);
    color: #1a1a1a !important;
    font-weight: 600;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.pagination-active:hover {
     
    color: #1a1a1a !important;
}

.pagination-disabled {
    background: #1a1a1a;
    border-color: #2a2a2a;
    color: #555555;
    cursor: not-allowed;
    opacity: 0.5;
}

.pagination-prev,
.pagination-next {
    padding: 0 25px;
    font-weight: 600;
}

/* Адаптивность */
@media (max-width: 768px) {
    .pagination-btn {
        min-width: 40px;
        height: 40px;
        font-size: 14px;
        padding: 0 12px;
    }
    
    .pagination-prev span,
    .pagination-next span {
        display: none;
    }
}

/* ============================================
   Reviews Section
   ============================================ */

.reviews__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}
.reviews__header .contacts__title{margin:0;}



.reviews__avito {
    display: flex;
    align-items: center;
    gap: 15px;
}

.reviews__avito img {
    height: 30px;
}

.reviews__rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reviews__score {
    font-size: 32px;
    font-weight: 700;
}

.reviews__stars {
    display: flex;
    gap: 5px;
}

.reviews__stars svg {
    width: 24px;
    height: 24px;
    fill: var(--yellow);
}

.reviews__count {
    font-size: 16px;
    color: var(--gray-light);
}

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

.review-card {
   
   
}

.review-card__stars {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}



.review-card__text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
  
}

.review-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color:  #D9D9D9;
	overflow:hidden;
}

.review-card__name {
    font-size: 16px;
    font-weight: 600;
}

.review-card__date {
    font-size: 12px;
    color: var(--gray-light);
}

.reviews__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #FFCC00;
    font-size: 20px;
    font-weight: 600;
    margin-top: 50px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #FFCC00;
}

.reviews__link svg {
    width: 20px;
    height: 20px;
    transition: var(--transition);
}

.reviews__link:hover svg {
    transform: translateX(5px);
}

/* ============================================
   CTA Form Section
   ============================================ */
.cta {
    position: relative;
   
}

#cta .container{position: relative;}
#cta .container:after{display: table;
    content: " ";
    width: 699px;
    height: 495px;
    position: absolute;
        top: -165px;
    right: -270px;
    z-index: -1;
    background: url(images/oil_form.png) no-repeat center;}

#cta .container:before{display: table;
    content: " ";
    width: 221px;
    height: 309px;
    position: absolute;
     bottom: -45px;
    left: -30px;
    z-index: 1;
    background: url("images/form_barrel_3 1.png") no-repeat center;}

.cta__container { margin:auto;
    width: 1064px; padding-top: 30px; padding-bottom: 30px; background: rgba(40.46, 40.46, 40.46, 0.70); box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.40); border-radius: 20px; backdrop-filter: blur(13px); flex-direction: column; justify-content: center; align-items: center; gap: 30px; display: flex;
	padding-left:108px; padding-right:108px; box-sizing:0;
}

.cta__title {
  text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 30px;  font-weight: 700;
}

.cta__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.cta__form-row {
    display: flex;
    gap: 20px;
}
.wpcf7-list-item {
    display: inline-block;
    margin: 0 !important;
}
.wpcf7-spinner,.wpcf7-list-item-label::before, .wpcf7-list-item-label::after {display:none;}
.cta__input { width: 100%;
    flex: 1;
   height: 60px; text-align:center; background: var(--BG, #131313); border-radius: 30px; outline: 1px white solid; outline-offset: -1px; backdrop-filter: blur(13px); justify-content: space-between; align-items: center; display: inline-flex; color: white; font-size: 20px;
}
.cta__input input{width:100%;}
.cta__input input::placeholder {
    opacity: 0.5; /* Делаем бледнее при фокусе */
}


.cta__input:focus {
    outline: none;
    border-color: var(--yellow);
}

.cta__checkboxes { margin-top:30px; margin-bottom:30px;
       display: flex;
    gap: 20px;
	column-gap:40px;
    text-align: left;
    flex-wrap: wrap;
    justify-content: center;
}

.cta__checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    color: var(--gray-light);
}

.cta__checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--yellow);
    flex-shrink: 0;
    margin-top: 2px;
}

.cta__btn {
    width: 414px; padding-top: 20px; padding-bottom: 20px; background: linear-gradient(177deg, #FFF1A8 0%, var(--yellow, #FFCC00) 100%); box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.40); border-radius: 60px; justify-content: center; align-items: center; gap: 30px; display: inline-flex;
	border:0 !important;
	margin:auto; display:table;
	color: var(--BG, #131313); font-size: 14px;
}

.cta__checkboxes input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.cta__checkboxes label .wpcf7-list-item-label{position:relative; padding-left:26px; font-size:12px;}
.cta__checkboxes label .wpcf7-list-item-label:after { cursor:pointer;
    position: absolute; left:0; top:0;
    display: inline-block;
    width: 16px;
    height: 16px;
   border-radius: 4px; outline: 1px white solid; 
    margin-right: 12px;
    flex-shrink: 0; content:" ";
}

.cta__checkboxes label input[type="checkbox"]:checked + .wpcf7-list-item-label:before{content:" "; position: absolute; left:3px; top:3px; width: 10px; height: 10px; background: var(--yellow, #FFCC00); border-radius: 2px; cursor:pointer; display:table;}

.cta__checkboxes label a{text-decoration:underline;}
.cta__btn:hover {
    background-color: var(--yellow-hover);
}

.cta__oil-splash {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.cta__barrel {
    position: absolute;
    left: -50px;
    bottom: -30px;
    width: 200px;
    z-index: 3;
}

/* ============================================
   About Section
   ============================================ */




.about__content {
    display: flex;
 justify-content: space-between;
    gap: 20px;
    align-items: center;
	align-items: start;
}

.about__image {
    border-radius: 20px;
    overflow: hidden;
	max-width:40.7%; min-width:40.7%;
}

.about__image img {
    width: 100%;
	
    height: auto;
    object-fit: cover;
}

.about__text {
    font-size: 14px;
    color: var(--white);
    line-height: 1.2;
	font-weight: 400;
}

.about__text p {
    margin-bottom: 20px;
}

/* ============================================
   FAQ Section
   ============================================ */
.faq {
   
    position: relative;
}

.faq__title {
    font-size: 48px;
    margin-bottom: 40px;
}
.flexccartin{
	background:url("images/img_barrel_2 1.png") right top no-repeat;
	min-height:440px;
}
.faq__list {
    max-width: 66%;
	display:flex; gap:20px;
	flex-direction: column;
}

.faq-item {
    
	 padding:17px 50px; background: rgba(40.46, 40.46, 40.46, 0.70); border-radius: 30px; backdrop-filter: blur(13px);
}

.faq-item__question {
    width: 100%;
  
    color: var(--white);
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.faq-item__question:hover {
     color: var(--yellow)
}

.faq-item__question.active {
     color: var(--yellow)
}

.faq-item__question span {
    flex: 1;
}

.faq-item__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: 15px;
	background:url(images/faqstrel.svg) center no-repeat;
	max-width:20px;
	
}

.faq-item__question.active .faq-item__icon {
 background:url(images/faqstrel2.svg) center no-repeat;
}

.faq-item__answer {display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
	margin-top:20px;
}
.faq-item__question.active ~ .faq-item__answer{display: block;}

.faq-item__answer-content {
   
    font-size: 14px;
    color: var(--white);
  line-height: 20px;
}

.faq__barrels {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 400px;
    pointer-events: none;
}
.marbot100{margin-bottom:100px;}
/* ============================================
   Contacts Section
   ============================================ */
.contacts {
   
}

.contacts__title {
    font-size: 50px;  font-weight: 700;
    margin-bottom: 50px;
}

.contacts__content {
    display: flex;
  
    gap: 20px;
}

.contacts__info {
    display: flex;
    flex-direction: column;
    gap: 0px; max-width:413px; min-width:413px; justify-content: space-between;
}

.contacts__company {
    margin-bottom: 8px;
}

.contacts__company-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.contacts__company-inn {
    font-size: 16px;
    color: var(--gray-light);
}

.contacts__item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.contacts__icon {
    width: 30px;
    height: 30px;
  
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contacts__icon svg {
   
    fill: var(--white);
}

.contacts__text {
    font-size: 16px;
}

.contacts__map {
    border-radius: var(--border-radius);
    overflow: hidden;
    height: 316px;
	width:calc(100% - 413px); cursor:pointer;
}

.contacts__map iframe {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(100%) invert(92%) contrast(83%);
}

/* ============================================
   Footer
   ============================================ */
.footer {width:100%;
  padding-top: 30px; padding-bottom: 30px; background: rgba(25.75, 25.75, 25.75, 0.70); box-shadow: 0px -20px 40px rgba(0, 0, 0, 0.40); backdrop-filter: blur(13px); flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 50px; display: inline-flex
}
.fonfoot .container{position:relative;}
.fonfoot{position:absolute; bottom:0; width:100%; z-index:-1; }

.fonfoot .container:after{content:" "; display:table; width:655px; height:495px; background:url("images/oil_1 3.png") center no-repeat; position:absolute; z-index:-1; bottom:0px; right:-320px;}

.fonfoot .container:before{content:" "; display:table; width:389px; height:578px; background:url("images/oil_left.png") center no-repeat; position:absolute; z-index:-1; bottom:0px; left:-314px;}


.footer__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 50px;

 
}

.footer__logo {
    font-size: 32px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--white);
    letter-spacing: 2px;
}

.footer__nav {
    display: flex;
    gap: 0;
}

.footer__nav-list {
    display: flex;
    align-items: center;
    gap: 50px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__nav-list li {
    display: flex;
    align-items: center;
}



.footer__nav-list a { position:relative;
    font-size: 16px;
    font-weight: 700;
   line-height:1.2;
    color: var(--gray-light);
}

.footer__nav-list a:hover{
    color: var(--white);
}



.footer__phone {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 28px;
    font-weight: 700;
	line-height:1;
    color: var(--white);
}

.footer__social {
    display: flex;
    gap: 15px;
}

.footer__social-link {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.footer__social-link:hover {
    background-color: var(--yellow);
}

.footer__social-link svg {
    width: 20px;
    height: 20px;
    fill: var(--white);
}

.footer__social-link:hover svg {
    fill: var(--bg-dark);
}

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

.footer__copyright {
    font-size: 12px;
    color: var(--gray-light);
}

.footer__privacy {
    font-size: 12px;
    color: var(--gray-light);
}

.footer__privacy:hover {
    color: var(--white);
}



/* ============================================
   Фильтр
   ============================================ */


.acf-product-filter {

    color: #fff;
   

    min-width: 306px;
	max-width:306px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.filter-title {

    font-size: 16px;
    font-weight: 400;
    margin-bottom: 15px;
    color: #fff;
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Кастомные чекбоксы */
.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 12px;
}

.custom-checkbox input {
    display: none; /* Скрываем стандартный чекбокс */
}

.checkmark {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Желтый квадрат внутри при выборе */
.checkmark::after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #FFCC00;
    border-radius: 2px;
    display: none;
}

/* Состояние checked */
.custom-checkbox input:checked + .checkmark {
    border-color: #fff; /* Или прозрачный, если нужен только outline */
    outline: 1px solid #fff;
    outline-offset: -1px;
}

.custom-checkbox input:checked + .checkmark::after {
    display: block;
}

.label-text {
	font-size: 16px; font-weight: 400;
	
    font-size: 16px;
   
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* Секция цены */
.price-section {
    gap: 15px;
}

.price-inputs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 10px 15px;
    font-size: 18px;
    margin-bottom: 10px;
}

/* Стилизация Range Slider */
.range-slider {
    position: relative;
    height: 5px;
    margin-top: 10px;
}

.slider-track {
    position: absolute;
    width: 100%;
    height: 2px;
    background: #282828;
    top: 50%;
    transform: translateY(-50%);
}

.slider-range {
    position: absolute;
    height: 2px;
    background: #FFCC00;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* Нативные инпуты поверх трека */
.range-slider input[type="range"] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    pointer-events: none; /* Чтобы клики проходили сквозь, кроме ползунка */
    background: none;
    -webkit-appearance: none;
    appearance: none;
    z-index: 2;
    height: 0; /* Скрываем стандартный трек */
}

.range-slider > input[type="range"]#range-min {
    z-index: 5 ;
  
}


/* Стили ползунка (Thumb) */
.range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #FFCC00;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto; /* Включаем клики на ползунке */
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.range-slider input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #FFCC00;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
}



/* ============================================
   Табы
   ============================================ */

   .tabs-container {
            width: 100%;
          
            margin: 0 auto;
        }

        .tabs-header {
            display: flex;
            align-items: flex-end;
            gap: 10px;
            margin-bottom: 0;
        }

        .tab-button {
            padding: 15px 30px;
            background: transparent;
            border: none;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 20px;
            font-weight: 700;
            color: white;
        }

        .tab-button.active {
            background: #282828;
            color: white;
        }

        .tab-button:hover:not(.active) {
            color: white;
            background: rgba(255, 255, 255, 0.05);
        }

        .tab-content-wrapper {
           
        }

        .tab-content {  background: #282828;
            border-radius: 20px;
            padding: 30px;
			color: white; font-size: 16px;  font-weight: 400; 
            display: none;
        }
		.tab-content h2{ color: white;
            font-size: 20px;  font-weight: 700;
            margin-bottom: 10px;}
			.tab-content ul{padding-left:20px;}
			.tab-content ul li{list-style: disc; }

       #description.tab-content{ border-radius: 0 20px 20px  20px}
        .tab-content.active {
            display: block;
        }

        .section-title {
            color: white;
            font-size: 20px;  font-weight: 700;
            margin-bottom: 30px;
        }

        .specs-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
			    row-gap: 30px;
            column-gap: 20px;
        }

        .spec-row {
            display: flex;
            padding: 12px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        }

        

        .spec-label {
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            font-weight: 700;
            min-width: 200px;
            flex-shrink: 0;
        }

        .spec-value {
            color: white;
            font-size: 16px;
            font-weight: 400;
            flex: 1;
        }

        .spec-row-full {
            grid-column: 1 / -1;
        }

     
	 
/* ============================================
   Блок с галереей в детальной
   ============================================ */
.single-product	.site-main {
    padding-top: 100px;
}

     /* Основные стили */
      
        .product-card-singled-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
        gap: 20px;
        }

        .product-card-singled {
          width:100%;
            max-width: 522px;
           
            display: flex;
            
            padding: 0px;
           
        }

        /* Левая колонка - Изображения */
        .product-images {
            width: 522px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 20px; position:relative;
        }
		
		 .product-images .owl-item a{height:402px;
		 width: 100%;
		 height: 402px;
    object-fit: contain;
  display: flex;
    align-items: center;
    justify-content: center;
		 }
		 .product-images .owl-item a img{  object-fit: contain; /* or 'cover' depending on desired effect */
  width: auto;
  height: auto;}

        /* Слайдер для главного фото */
        .main-slider-container {
            position: relative;
            background-color: #282828;
            border-radius: 20px;
          
            height: 402px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .owl-carousel .item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }



        /* Бейдж "Честный знак" */
        .honest-badge {
            position: absolute;
            bottom: 20px;
            right: 10px;
            width: 42px;
            height: 60px;
            background-color: #706F6F;
            border-radius: 50% 50% 0 0 / 50% 50% 0 0; /* Форма полумесяца */
            z-index: 10;
        }

        /* Галерея миниатюр */
        .thumbnails-container {
            display: flex;
            gap: 20px;
        }

        .thumbnail-box {
            width: 88px;
            height: 88px;
            background-color: #282828;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
			padding:9px;
        }

.thumbnail-box img{width:100%; object-fit: contain;
    width: 100%;
    height: 100%;}
        .thumbnail-box.active {
            outline: 2px var(--yellow, #FFCC00) solid !important;
            outline-offset: -2px;
            opacity: 1;
			
			
        }

        .thumbnail-box.inactive {
            opacity: 0.5;
            border: none; /* Убрали рамку у неактивных элементов */
        }

        /* Правая колонка - Информация */
        .product-info {
            width: calc(100% - 522px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
			height:510px;
        }

        h1.product-title {
            color: white;
            font-size: 50px;
            font-weight: 700;
            margin: 0 0 20px 0;
        }

        .product-description {
            color: white;
            font-size: 16px;
            line-height: 1.5;
            font-weight: 400;
			 margin-bottom: 50px;
        }

        /* Блок объема */
        .volume-selector {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 50px;
        }

        .label-text {
            color: white;
            font-size: 20px;
            font-weight: 700;
			
        }

        .volume-options {
            display: flex;
            gap: 20px;
        }

        .volume-btn {
            outline: 1px #fff solid;
			 outline-offset: -1px;
            height: 40px;
            border-radius: 10px;
   padding-left:10px; padding-right:10px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 20px;
            font-weight: 700;
            cursor: pointer;
			opacity: 0.50;
			position:relative;
        }

.volume-btn img{width:33%; position:absolute; 
    top: -35%;
    right: -20%;}

        .volume-btn.active {
            outline: 1px var(--yellow, #FFCC00) solid;
           opacity: 1;
        }

        .volume-btn.inactive {
            opacity: 0.5;
            border: 1px white solid;
            outline-offset: -1px;
        }

        /* Блок цены */
        .price-block {
            display: flex;
            flex-direction: column;
            gap: 10px;
          position:relative;
        }
          
		 .new-price-block.starprice{position:absolute;     text-decoration: line-through;  opacity:0.8; top: -30px; color: red;}
      .new-price-block.starprice .price-value{font-size:26px;}
	  .new-price-block.starprice .price-per-unit{font-size:16px;}
	  .product-card__price.starprice{text-decoration: line-through;  opacity:0.8; color: red;}
.product-card__price.starprice .product-card__price-current{font-size:18px; line-height:1;}
.product-card__price.starprice .product-card__price-unit{font-size:12px; line-height:1;}
        .new-price-block {
            display: flex;
            align-items: baseline;
            gap: 20px;
        }

        .price-value {
            color: #FFCC00;
            font-size: 40px;
            font-weight: 700;
        }

        .price-per-unit {
            opacity: 0.5;
            color: white;
            font-size: 20px;
        }

        /* Контакты */
        .contact-section {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .contact-link-text {
           
            color: white;
            font-size: 20px;
            cursor: pointer;
        }

        .contact-actions {
            display: flex;
            gap: 50px;
        }

        .action-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .icon-box {
            width: 30px;
            height: 30px;
            background-color: white; /* Имитация иконки */
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .action-text {
            color: white;
            font-size: 28px;
            font-weight: 700;
            line-height: 1.5;
        }


/* ============================================
   Блок с галереей в детальной
   ============================================ */	
	
	/* Основные переменные */


.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 1064px;
    max-width: calc(100vw - 40px); /* Адаптивность */
    background: #282828;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    z-index: 9999;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5);
    font-family: var(--font-family);
}

.cookie-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}



.cookie-desc {
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
	padding: 0 30px;
}

/* Кнопки */
.cookie-actions {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.cookie-btn {
    height: 60px;
    padding: 20px;
    border-radius: 60px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Кнопка "Принять все" */
.cookie-btn.primary {
    width: 265px;
   
}

/* Кнопка "Отклонить все" */
.cookie-btn.secondary {
    width: 265px;
  
                height: 60px;
                padding-top: 20px;
                padding-bottom: 20px;
                box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.40);
                border-radius: 60px;
                outline: 1px #FFF1A8 solid;
                outline-offset: -1px;
                justify-content: center;
                align-items: center;
                gap: 30px;
                display: inline-flex;
                ext-align: center;
                justify-content: center;
                display: flex;
                flex-direction: column;
                color: white;
                font-size: 14px;
              
                font-weight: 500;
                line-height: 20px;
}

.cookie-btn.secondary:hover {
                background-color: #ffc400;
                transform: translateY(-3px);
                box-shadow: 0 10px 30px rgba(255, 214, 0, 0.3);
            }

/* Кнопка закрытия */
.cookie-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.cookie-close svg {
    display: block;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .cookie-banner {
        width: calc(100vw - 20px);
        padding: 20px;
        bottom: 10px;
    }

    .cookie-actions {
        flex-direction: column;
        gap: 15px;
    }

    .cookie-btn {
        width: 100%;
        height: 48px;
    }
}

	
	 
/* ============================================
   Responsive Design
   ============================================ */


@media (max-width: 1300px) {
    .container {
        max-width: 1000px;
    }

.hero__title{font-size: 60px;}
.hero__subtitle{font-size: 38px;}

.hero__image {
    position: absolute;
    top: 0px;
    right: 0px;
}

.hero__text{margin-bottom: 50px;}

.feature-card__title{font-size: 16px;}
.feature-card__text{font-size: 12px;}

.product-card__price-current{font-size: 20px;}

.product-card__price-current span{font-size: 18px;}

.acf-product-filter{min-width: 240px;
    max-width: 240px;}
	.prcarobsh {
    max-width: calc(100% - 266px);
    width: 100%;
}
.action-text{font-size: 20px;}
}
.mobilemenu{display:none;}
.mobile,.product-titlemobile{display:none;}
@media (max-width: 700px) {
	
	.info-top .price-block{padding-top:30px;}
	.new-price-block.starprice{top:-0px;}
	
	.mobilemenu.active{display:flex; height:calc(100vh - 40px); overflow-y:scroll;left: 0;  top: 40px; padding-top:30px;
	width:100%;
	position: fixed;
        z-index: 10;
		background: rgba(25.75, 25.75, 25.75, 1);
		backdrop-filter: blur(13px); gap:20px;
		flex-direction: column;
		align-items: center;
		
	}
	.header__nav-list a{font-size: 18px}
	.mobilemenu.active .header__nav,.mobilemenu.active .header__contact,.mobilemenu.active .header__social{display:flex;}
	
	.mobilemenu.active .header__nav .header__nav-list{    flex-direction: column; gap:20px;}
	.container {
        max-width: 320px;
    }
	.header{    height: 40px;}
	.header__logo img{height:20px;}
	.header__nav,.header__social{display:none;}
	.header__contact a{font-size:18px;}
	.header__contact img{width:20px; height:20px;}
	.header__container{gap:10px;}
	.header__toggle{display:table; width: 28px;
        height: 20px; background:url(images/menu.svg) no-repeat center; border:0;}
		
	.header__toggle.active{background:url(images/close.svg) no-repeat center;}
	
	.hero{padding-top: 291px;}
	.hero__title{font-size:30px; margin-bottom:10px;}
    .hero__subtitle{font-size:16px;}
	.hero__text{font-size:12px; margin-bottom:20px;}
	.hero__btn{    padding-top: 10px;
    padding-bottom: 10px; width:100%;}
	.marbot100 {
    margin-bottom: 30px;
}
.features__grid{    flex-direction: column;}
.feature-card.whitebl.bol,.features__grid .rightpreim{max-width:100%;}
	.feature-card.whitebl.bol{height: auto; margin-bottom:0px;}
	    .feature-card__title { margin-bottom: 10px;
        font-size: 14px;
    }
	.feature-card{width: 100%; height: auto; padding: 10px; margin-bottom:20px;}
	
	.features__grid .rightpreim{display:block; column-count: 2;  break-inside: avoid; gap: 20px;}
	
	#features .container:after{background: url(images/oil_4-mob.png) no-repeat center;     width: 360px;
    height: 579px;     bottom: 50px;
    left: -30px;}
	.contacts__title{font-size:16px; margin-bottom:10px;}
	.products__grid{grid-template-columns: repeat(2, 1fr); row-gap:10px;}
	.product-card{padding:10px; gap: 10px;}
	.product-card__image{height: 100px;}
	.product-card__badge{top: 10px;
    right: 10px; width: 14px;
    height: 20px;}
	.product-card__category{margin-bottom:10px;}
	.product-card__title{font-size:14px;}
	.product-card__price-current{font-size:20px;}
	.product-card__price{flex-direction: column;}
	.product-card__price-unit{font-size:12px;}
	.reviews__link{margin-top: 10px; font-size:12px;}
	.mt-20{margin-top:0 !important;}
	.products .text-center.mt-20{text-align:left;}
	.reviews__header{flex-direction: column; align-items: flex-start;}
	.reviews__avito img{height:20px;}
	.reviews__score{font-size:20px;}
	.review-card__stars img,.reviews__stars img{height:10px;}
	.reviews__rating,.reviews__avito{gap:0;}
	.imgavlogo{margin-right:29px;}
	.reviews__score{margin-right:4px;}
	.reviews__count{font-size:12px; color: fff; margin-left:30px;}
	.reviews__grid{    grid-template-columns: repeat(1, 1fr);}
	
	.review-card__text{margin-bottom: 10px; font-size: 12px;     line-height: 1.4;}
	.review-card__stars,.reviews__header{margin-bottom: 10px;}
	.review-card__name{font-size: 14px;}
	.reviews .text-center{text-align:left;}
	.reviews__link img{width:12px; height:12px;}
	#cta .container:before,#cta .container:after{display:none;}
	.cta__container{width:100%; padding:10px;}
	.cta__title{font-size:16px; line-height: 1.4;}
	.cta__title br{display:none;}
	.cta__container{gap:10px;}
	.cta__form-row{flex-wrap: wrap; justify-content: center; gap:10px;}
	.cta__input{width:300px; height: 40px; font-size: 14px;}
	.cta__btn{width:100%; padding-top: 10px;
    padding-bottom: 10px; height:40px;}
	.cta__checkboxes{    gap: 10px;
    column-gap: 10px; margin-top: 10px;
    margin-bottom: 10px; justify-content: flex-start;}
	.cta__checkboxes label .wpcf7-list-item-label{display: block;}
	.about__content{flex-wrap: wrap; gap:10px;}
	.about__image{max-width: 100%;
    min-width: 100%;}
	.faq__list{width:100%; max-width:100%;}
	.flexccartin {background:none; min-height:auto;}
	.faq-item {
    padding: 12px 10px; }
	.faq-item__icon {
    width: 10px; max-height:10px; max-width:10px;
    height: 10px;
	background-size:cover; background-size: cover !important;}
	.faq-item__question{font-size:14px;}
	.faq-item__answer{margin-top:10px; font-size:12px;}
	.faq-item{border-radius:10px;}
	.contacts__info{font-size:16px;}
	.mobile{display:inline;}
	.contacts__company-inn{color:#fff; display:flex; gap:10px; flex-direction: column;}
	.contacts__icon img{width:20px; height:20px;}
	.contacts__item{gap: 10px;}
	.contacts__info{max-width: 100%;
    min-width: 100%;}
	.contacts__content{flex-wrap: wrap;}
	.contacts__map{width:100%; height: 120px;}
	.fonfoot{display:none;}
	.footer {

    padding-top: 20px;
    padding-bottom: 20px;}
	.footer__top{    flex-direction: column; padding-bottom:10px; gap:10px;
	
	    justify-content: center;
    align-items: center;
	}
	.footer__nav-list{gap:10px; flex-direction: column;}
	.footer__logo img{height:20px;}
	.footer__social{padding-top:5px; padding-bottom:5px;}
	.footer__bottom{flex-direction: column; gap:10px;}
	.acf-product-filter{width:100%;
	min-width: 100%;
        max-width: 100%;
	}
	.post-type-archive-product .products .container{    flex-direction: column;}
	h1{font-size:16px; margin-bottom:20px;}
	.archive .site-main, .page-template-default .site-main{padding-top: 60px;}
	.filter-title{margin-bottom:10px;}
	.label-text{font-size: 16px;
    font-weight: 400; line-height: 1.2;}
	.acf-product-filter{gap:20px;}
	.price-inputs{font-size:20px; height: 45px;}
	.prcarobsh{max-width:100%;}
	.products__grid.katalog {
    grid-template-columns: repeat(2, 1fr);
	
}
.product-card{border-radius:10px;}
.single-product .site-main{padding-top: 60px;}
.aioseo-breadcrumbs{flex-wrap: wrap;}
.product-images .owl-item a{    height: 220px;}
.product-images{width:100%;}
.product-card-singled-wrapper{flex-direction: column;}
.main-slider-container{height: 220px;}
.product-titlemobile{display:block; color: white; font-size: 16px; font-weight: 700; text-align:left;}
h1.product-title{display:none;}
.product-info{width:100%;}
.product-description{font-size:12px; margin-bottom: 20px;}
.volume-btn{font-size:16px;}
.volume-selector{margin-bottom: 20px;}
.product-info{height:auto;}
.contact-link-text{text-align:center;}
.contact-actions {
width: auto;
        margin: auto;
    gap: 20px;
    flex-direction: column;
	
}
.action-text{font-size:28px;}
.new-price-block{line-height:1.3; margin-bottom:20px;}
.tab-button{padding:10px; font-size: 16px; border-top-left-radius: 10px;
    border-top-right-radius: 10px;}
	.section-title,.tab-content h2{font-size: 14px; margin-bottom:10px;}
	.tab-content{border-radius: 10px 10px 10px 10px; padding: 10px; font-size:12px;}
	#description.tab-content{    border-radius: 0 10px 10px 10px; }
	.specs-grid{column-gap: 0px; row-gap: 20px; grid-template-columns: 1fr;}
	.spec-row{padding: 8px 0;}
	.spec-label{min-width:170px;}
	.spec-value{word-wrap:break-word ; width:130px;}
	.cookie-btn.secondary{height:40px; width:100%;}
	.cookie-btn.primary{width:100%;}
	.cookie-banner{padding:10px;}
	.cookie-btn{height:40px;}
	.cookie-close{top:10px; right:10px;}
	.cookie-desc{font-size:12px;}
	.cookie-close,.cookie-close svg{width:10px; height:10px;}
	.cookie-content{gap:10px;}
	.cookie-banner{border-radius:10px;}
}


/* ============================================
   Utility Classes
   ============================================ */
.text-center {
    text-align: center;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.hidden {
    display: none;
}

/* ============================================
   WordPress Core Styles
   ============================================ */
.aligncenter {
    display: block;
    margin: 0 auto;
}

.alignleft {
    float: left;
    margin-right: 20px;
}

.alignright {
    float: right;
    margin-left: 20px;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    text-align: center;
    font-size: 14px;
    color: var(--gray-light);
    margin-top: 10px;
}

.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 40px 0;
}

.gallery-item {
    text-align: center;
}

.gallery-caption {
    font-size: 14px;
    color: var(--gray-light);
    margin-top: 10px;
}

/* Forms */
.comment-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
}

.comment-form input,
.comment-form textarea {
    padding: 15px 20px;
    background-color: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--white);
    font-size: 16px;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--yellow);
}

.comment-form textarea {
    min-height: 150px;
    resize: vertical;
}

.comment-form-submit {
    padding: 15px 40px;
    background-color: var(--yellow);
    color: var(--bg-dark);
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition);
    align-self: flex-start;
}

.comment-form-submit:hover {
    background-color: var(--yellow-hover);
}