* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
 body {
   font-family: Arial, sans-serif;
   overflow-x: hidden;
 }
 
 /* Синяя полоса */
 .top-banner {
   background: #4a6ee0;
   color: #fff;
   text-align: center;
   padding: 12px 0; /* толще */
   font-size: 16px; /* крупнее */
   font-weight: 700;
 }
 
 /* Хедер */
 .mobile-header {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 22px 20px; /* увеличил отступы */
   border-bottom: 1px solid #e1e1e1;
 }
 
 /* Логотип */
.logo {
   height: 65px;
   width: auto;
   object-fit: contain;
}
 
 /* Home + Cart */
 .nav-links {
   display: flex;
   align-items: center;
   gap: 26px; /* увеличил расстояние */
 }
 
 .nav-links a {
   text-decoration: none;
   color: #111;
   font-size: 18px; /* крупнее */
   font-weight: 500;
 }
 
 /* Корзина и счетчик */
 .cart-wrapper {
   position: relative;
  padding-right: 20px;
 }
 
 .cart-count {
   position: absolute;
   top: -10px; /* поднял выше */
   right: 0px; /* сместил */
   background: #4a6ee0;
   color: #fff;
   width: 22px;      /* больше круг */
   height: 22px;
   border-radius: 50%;
   font-size: 14px;  /* крупнее цифры */
   display: flex;
   align-items: center;
   justify-content: center;
 }


 .carousel {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   /* Удаляем overflow: hidden отсюда если добавлял */
 }
 
 .carousel-track {
   display: flex;
   overflow-x: scroll;
   scroll-snap-type: x mandatory;
   gap: 14px; /* расстояние между слайдами */
   padding: 0 12px; /* чтобы не прилипали к краям */
   scrollbar-width: none;
 }
 .carousel-track::-webkit-scrollbar {
   display: none;
 }
 
 .carousel-slide {
   scroll-snap-align: center;
   flex: 0 0 calc(100% - 24px);  /* ✅ 1 слайд = ширина экрана, минус отступы */
   border-radius: 22px;
   overflow: hidden;
 }
 
 /* Размер изображения — делаем поменьше, как на примере */
 .carousel img {
   width: 90%;
   max-width: 380px;
   border-radius: 16px;  /* скругление уголков */
   object-fit: contain;  /* сохраняем пропорции */
 }
 
 /* Нижняя панель с кнопками и счётчиком */
 .carousel-bottom {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 30px;   /* расстояние как на примере */
   margin-top: 6px;
 }
 
 /* Стрелки, уменьшенные */
 .carousel-btn {
   background: none;
   border: none;
   font-size: 22px; /* было больше */
   cursor: pointer;
   opacity: 0.5;
 }
 
 .carousel-btn:hover {
   opacity: 0.8;
 }
 
 /* Счётчик */
 .carousel-counter {
   font-size: 14px;
   font-weight: 500;
   opacity: 0.8;
 }

 .carousel-container {
   width: 100%;
   overflow: hidden;
   display: flex;
   justify-content: center;
 }

 .product-header {
   font-family: Arial, sans-serif;
   padding: 5px 0;
   padding-left: 20px;
   max-width: 500px;
   margin: 0 auto; /* центрирование */
   
}

h1 {
   font-size: 32px;
   font-weight: 800;
   margin-bottom: 10px;
}

.rating-row {
   display: flex;
   align-items: center;
   gap: 5px;
   margin-bottom: 12px;
}

.stars {
   font-size: 22px;
   color: gold;
}

.rating-value {
   font-size: 18px;
   font-weight: bold;
}

.price-row span {
   font-size: 26px;
   font-weight: 700;
   margin-top: 5px;
   display: inline-block;
}

.discount-label {
   font-size: 14px;
   color: #005ce6;
   margin-top: 8px;
}

.quantity-box {
   margin-top: 10px;
   display: flex;
   align-items: center;
   justify-content: center; 
   gap: 15px;
}

.qty-btn {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   font-size: 28px;
   border: 1px solid #ccc;
   background: none;
   cursor: pointer;
}

.qty-number {
   font-size: 20px;
   font-weight: 600;
}

.discount-active {
   color: #008000;
   font-size: 14px;
   font-weight: bold;
}

.stats-row {
   margin-top: 12px;
   display: flex;
   gap: 6px;
   font-size: 14px;
   color: #707070;
}

.separator {
   opacity: 0.6;
}

/* кнопка Add to Cart — уменьшенная */
.cart-btn.add {
   width: 85%;          /* было 100%, теперь уже */
   background: #4a6ee0;
   color: white;
   padding: 10px 0;     /* было 14px — уменьшили высоту */
   font-size: 16px;     /* было 18px — уменьшили текст */
   font-weight: 600;    /* было 700 — чуть легче */
   border-radius: 10px; /* чуть меньше скругление */
   border: none;
   margin: 16px auto;   /* центрируем */
   display: block;      /* чтобы width работал корректно */
 }
 
 /* === CART MODAL === */
 .cart-modal {
   position: fixed;
   inset: 0;
   display: none;
   justify-content: center;
   align-items: center;
   z-index: 9999;
 }
 
 .cart-modal.active {
   display: flex;
 }
 
 /* затемнение */
 .cart-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0,0,0,0.45);
 }
 
 /* окно корзины */
 .cart-content {
   position: relative;
   background: #fff;
   width: 430px;
   max-width: 94%;
   padding: 22px;
   border-radius: 16px;
   animation: slideUpCart .25s ease;
 }
 
 @keyframes slideUpCart {
   from { transform: translateY(40px); opacity: 0; }
   to { transform: translateY(0); opacity: 1; }
 }
 
 .cart-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #efefef;
   padding-bottom: 12px;
 }
 
 .close-cart {
   background: none;
   border: none;
   font-size: 30px;
   cursor: pointer;
   opacity: .7;
 }
 
 /* содержимое */
 .cart-summary {
   margin-top: 20px;
   font-size: 17px;
 }
 
 .checkout-btn {
   display: block;
   background: #4a6ee0;
   color: #fff;
   padding: 14px;
   text-align: center;
   border-radius: 10px;
   margin-top: 18px;
 }

 .cart-summary p {
   display: flex;
   justify-content: space-between;
   font-size: 18px;
   margin: 8px 0;
 }
 
 .cart-summary span {
   font-weight: 600;
 }

 /* 🔥 Purchase popup — красивый Shopify стиль */
/* 🔥 popup с выездом */
.purchase-popup {
   position: fixed;
   top: 22px;
   right: -320px;
   background: #ffffff;
   padding: 14px 18px;
   border-radius: 14px;
   font-size: 15px;
   box-shadow: 0 12px 35px rgba(0,0,0,0.18);
   transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1);
   z-index: 9999;
   opacity: 0;
   min-width: 250px;
   max-width: 300px;
 
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
 .purchase-popup.show {
   right: 22px;
   opacity: 1;
 }
 
 /* 🚚 анимация грузовика */
 .popup-icon {
   width: 32px;
   height: 32px;
   object-fit: contain;
   animation: truckWiggle 0.6s ease;
 }
 
 /* keyframes для мягкого "покачивания" */
 @keyframes truckWiggle {
   0%   { transform: translateX(0) rotate(0deg); }
   25%  { transform: translateX(-2px) rotate(-3deg); }
   50%  { transform: translateX(2px) rotate(3deg); }
   75%  { transform: translateX(-1px) rotate(-2deg); }
   100% { transform: translateX(0) rotate(0deg); }
 }


 /* Универсальный контейнер контента */
.content-block {
   width: 100%;
   max-width: 900px;      /* ограниченная ширина на больших экранах */
   margin: 0 auto;        /* центрирование */
   padding: 0 16px;       /* одинаковые отступы по краям */
 }
 
 /* Отступы между секциями */
 .section {
   margin-top: 40px;
 }
 
 /* Видео чтобы адаптировалось */
 .content-block video {
   width: 100%;
   border-radius: 12px;
 }
 
 /* Картинки чтобы не вылазили */
 .content-block img {
   width: 100%;
   border-radius: 14px;
   display: block;
 }

 /* Заголовок секции */
.content-block h2 {
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 8px;
 }
 
 /* Текст описания */
 .content-block p {
   font-size: 15px;
   line-height: 1.45;
   margin: 4px 0;
 }

 /* === Product Info Block (фон как на скрине) === */
.product-info-block {
   background: #F7F8FC;
   border-radius: 26px;
   padding: 22px;
   margin: 25px auto;
   width: 92%;
   box-shadow: 0px 4px 12px rgba(0,0,0,0.05);
}

.product-info-block h3 {
   font-size: 18px;
   font-weight: 700;
   margin: 15px 0;
}

.product-info-block .info-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.product-info-block .info-list li {
   font-size: 15px;
   line-height: 1.5;
   margin-bottom: 6px;
   display: flex;
   align-items: flex-start;
}

.product-info-block img.info-block-img {
   width: 100%;
   border-radius: 18px;
   margin-bottom: 15px;
}

/* FAQ BLOCK WRAPPER */
.faq-wrapper {
   width: 90%;
   max-width: 900px;
   margin: 30px auto;
   padding: 20px;
   background: #fff;
   border-radius: 18px;
   box-shadow: 0 4px 16px rgba(0,0,0,0.08);
 }
 
 /* FAQ ITEM */
 .faq-item {
   border-bottom: 1px solid #e5e5e5;
   padding: 12px 0;
 }
 
 /* QUESTION */
 .faq-question {
   font-size: 17px;
   font-weight: 700;
   width: 100%;
   padding: 8px 4px;
   background: none;
   border: none;
   color: #0A1A3A;
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
 }
 
 /* ARROW ICON */
 .faq-arrow {
   transition: transform .3s ease;
 }
 
 .faq-item.open .faq-arrow {
   transform: rotate(180deg);
 }
 
 /* ANSWER */
 .faq-answer {
   max-height: 0;
   overflow: hidden;
   font-size: 15px;
   color: #4b4b4b;
   line-height: 1.45;
   transition: max-height .3s ease;
   padding-right: 5px;
 }
 
 .faq-item.open .faq-answer {
   max-height: 300px;
   margin-top: 8px;
 }

 .reviews-wrapper {
   width: 90%;
   max-width: 900px;
   margin: 40px auto;
   padding: 25px;
   background: #fff;
   border-radius: 18px;
   box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.reviews-title {
   text-align: center;
   font-size: 26px;
   font-weight: 800;
   color: #0A1A3A;
   margin-bottom: 15px;
}

.rating-summary {
   text-align: center;
   margin-bottom: 25px;
}

.rating-stars {
   font-size: 32px;
   color: #1e9374; /* зелёные звезды как на скрине */
}

.rating-score {
   font-size: 22px;
   font-weight: 600;
   margin-top: 5px;
}

.rating-count {
   font-size: 16px;
   color: #4a4a4a;
}

/* rating bar list */
.rating-bars {
   margin-top: 15px;
}

.rating-row {
   display: grid;
   grid-template-columns: 80px 1fr 35px;
   align-items: center;
   gap: 10px;
   margin: 6px 0;
   font-size: 14px;
}

.rating-bar {
   width: 100%;
   height: 12px;
   background: #e6e6e6;
   border-radius: 20px;
   overflow: hidden;
}

.rating-bar div {
   height: 100%;
   background: #1e9374;
   border-radius: 20px;
}

.rating-number {
   text-align: right;
   font-weight: 600;
   color: #0A1A3A;
}

.review-card {
   background: #fff;
   border-radius: 16px;
   padding: 16px;
   margin-bottom: 18px;
   box-shadow: 0px 4px 14px rgba(0,0,0,0.08);
 }
 
 .review-photo {
   width: 100%;
   border-radius: 12px;
   margin-bottom: 10px;
 }
 
 .review-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
 .stars { color: gold; font-size: 18px; }
 
 .verified { font-size: 13px; color: green; }
 
 .review-date {
   font-size: 13px;
   color: #777;
   display: block;
   margin-top: 6px;
 }
 
 .load-more-btn {
   width: 100%;
   border: none;
   padding: 12px;
   background: #4a6ee0;
   color: #fff;
   border-radius: 10px;
   font-size: 16px;
   cursor: pointer;
   margin-bottom: 20px;
 }

 /* -------- FOOTER -------- */
.site-footer {
   background: #000;
   color: white;
   padding: 30px 20px;
   font-family: Arial, sans-serif;
   border-radius: 12px 12px 0 0;
 }
 
 .footer-section {
   margin-bottom: 18px;
 }
 
 .footer-toggle {
   width: 100%;
   padding: 12px 18px;
   background: #fff;
   color: #000;
   border-radius: 12px;
   border: none;
   font-size: 18px;
   font-weight: 600;
   text-align: left;
   cursor: pointer;
 }
 
 .footer-links {
   list-style: none;
   padding-left: 0;
   margin: 0;
   display: none;
 }
 
 .footer-links li {
   border-bottom: 1px solid #2c2c2c;
 }
 
 .footer-links li a {
   display: block;
   padding: 12px 10px;
   color: #fff;
   text-decoration: none;
   font-size: 16px;
 }
 
 .footer-links li a:hover {
   opacity: 0.6;
 }
 
 .footer-copy {
   margin-top: 25px;
   text-align: center;
   font-size: 14px;
   opacity: 0.5;
 }

 /* -------------------------------------------
   WHY CHOOSE ECOEGRET PAGE
------------------------------------------- */

.why-page {
   width: 100%;
   max-width: 950px;
   margin: 0 auto;
   padding: 0 20px;
 }
 
 /* ===== HERO SECTION ===== */
.why-hero {
   background-image: url("../img/why1.webp");
   background-position: -120px center;
   background-size: cover;
   background-repeat: no-repeat;
   border-radius: 22px;
   min-height: 360px;
   margin: 0 auto 35px;
   padding: 40px 18px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
 }
 
 .why-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(50, 80, 200, 0.5);
   z-index: 0;
 }
 
 .why-hero-text {
   position: relative;
   z-index: 2;
   text-align: center;
   color: #fff;
 }
 
 /* HERO текст */
 .why-hero-text h1 {
   font-size: 28px;
   font-weight: 800;
   margin-bottom: 14px;
 }
 .why-hero-text p {
   line-height: 1.5;
   font-size: 16px;
   margin-bottom: 22px;
 }
 
 /* кнопка */
 .why-btn {
   background: #fff;
   color: #4257e9;
   padding: 12px 28px;
   border-radius: 10px;
   font-weight: 600;
   display: inline-block;
 }
 
 /* ===== CONTENT SECTION ===== */
 .why-section {
   width: 90%;
   margin: 0 auto 50px;
   text-align: center;
 }
 
 .why-heading {
   font-size: 24px;
   font-weight: 800;
   margin-bottom: 10px;
 }
 
 .why-subtext {
   font-size: 16px;
   color: #4a4a4a;
   margin-bottom: 24px;
 }
 
 /* Блок с картинкой + текст */
 .why-block {
   margin-bottom: 45px;
 }
 
 /* СКРУГЛЁННАЯ КАРТИНКА */
 .why-img {
   width: 100%;
   border-radius: 22px;
   display: block;
   margin: 0 auto 18px;
 }
 
 /* Заголовок и текст */
 .why-title {
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 12px;
 }
 
 .why-desc {
   font-size: 16px;
   color: #4a4a4a;
   line-height: 1.6;
   width: 90%;
   margin: 0 auto;
 }

 /* Benefit Block (Why Choose Us page) */
.why-benefit-block {
   width: 90%;
   margin: 40px auto 70px;
   padding: 0 5px;
   text-align: left;
 }
 
 /* Заголовок с подсветкой */
 .benefit-title {
   font-size: 24px;
   font-weight: 800;
   line-height: 1.3;
   margin-bottom: 20px;
   position: relative;
   display: inline-block;
 }
 
 .benefit-title::before {
   content: "";
   position: absolute;
   left: -6px;
   bottom: 3px;
   width: 105%;
   height: 12px;
   background: rgba(175, 183, 211, 0.4);
   z-index: -1;
   border-radius: 4px;
 }
 
 /* Список */
 .benefit-list {
   margin-bottom: 28px;
   padding-left: 18px;
 }
 
 .benefit-list li {
   margin-bottom: 12px;
   font-size: 16px;
   line-height: 1.6;
   color: #45526c;
 }
 
 /* Кнопка */
 .benefit-btn {
   display: inline-block;
   text-align: center;
   background: #4a6ee0;
   font-size: 18px;
   padding: 14px 32px;
   color: #fff;
   font-weight: 600;
   border-radius: 50px;
   text-decoration: none;
   width: fit-content;
   box-shadow: 0 6px 16px rgba(74, 110, 224, 0.3);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 .benefit-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 22px rgba(74, 110, 224, 0.38);
 }
 /* --- Privacy Policy page styles --- */
.policy-container {
   max-width: 900px;
   margin: 0 auto;
   padding: 40px 20px;
   line-height: 1.6;
   color: #1b1b1b;
}

.policy-container h1 {
   font-size: 32px;
   font-weight: 700;
   margin-bottom: 20px;
   text-align: left;
   color: #0e2554;
}

.policy-container h2 {
   font-size: 22px;
   font-weight: 700;
   margin: 35px 0 10px;
   color: #0e2554;
}

.policy-container p {
   margin-bottom: 16px;
}

.policy-container ul {
   margin: 10px 0 25px 25px;
}

.policy-container li {
   margin-bottom: 8px;
}

.cart-qty {
   display: flex;
   align-items: center;
   gap: 14px;
   font-size: 18px;
   margin: 10px 0;
 }
 
 .qty-btn {
   width: 36px;
   height: 36px;
   font-size: 22px;
   font-weight: bold;
   border: none;
   border-radius: 50%;
   cursor: pointer;
   background: #e6e6e6;
   transition: 0.2s;
 }
 
 .qty-btn:hover {
   background: #cfd1d4;
 }
 /* Исправление для блока рейтинга возле названия товара */
.product-header .rating-row {
   display: flex !important;
   align-items: center;
   gap: 6px;
 }
 
 /* Исправляем позицию рейтинга и количества отзывов */
 .product-header .rating-row .rating-count {
   margin-left: 4px;
   font-size: 16px;
   opacity: 0.8;
 }

 .about-section {
   padding: 80px 20px;
   max-width: 900px;
   margin: auto;
   line-height: 1.7;
 }
 
 .about-container {
   background: #ffffff;
   border-radius: 12px;
   padding: 40px;
 }
 
 .about-title {
   text-align: center;
   margin-bottom: 25px;
   font-size: 32px;
   font-weight: 700;
 }
 
 .about-list {
   list-style: none;
   padding-left: 0;
   margin: 10px 0 25px;
 }
 
 .about-list li {
   margin: 6px 0;
 }
 
 /* Links styling */
 .about-section a {
   color: #3556d6;
   text-decoration: underline;
 }

 /* Refund / Return Policy */
.policy-section {
   padding: 60px 20px;
   background: #f7f9fc;
 }
 
 .policy-container {
   max-width: 900px;
   margin: 0 auto;
   background: #fff;
   border-radius: 12px;
   padding: 36px;
   box-shadow: 0 6px 18px rgba(20,30,60,0.04);
   line-height: 1.7;
 }
 
 .policy-title {
   text-align: left;
   font-size: 30px;
   margin-bottom: 20px;
   font-weight: 700;
 }
 
 /* Section headings inside policy */
 .policy-container h3 {
   margin-top: 18px;
   margin-bottom: 8px;
   font-size: 18px;
   font-weight: 700;
 }
 
 /* Paragraphs and links */
 .policy-container p {
   margin-bottom: 12px;
   color: #333;
 }
 
 .policy-container a {
   color: #3556d6;
   text-decoration: underline;
 }
 
 /* Responsive tweaks */
 @media (max-width: 600px) {
   .policy-container {
     padding: 20px;
   }
 
   .policy-title {
     font-size: 24px;
   }
 }

 /* Terms of Service styling */
.policy-section {
   padding: 60px 20px;
   background: #f7f9fc;
 }
 
 .policy-container {
   max-width: 900px;
   margin: 0 auto;
   background: #fff;
   border-radius: 12px;
   padding: 36px;
   box-shadow: 0 6px 18px rgba(20,30,60,0.04);
   line-height: 1.7;
 }
 
 .policy-title {
   text-align: left;
   font-size: 30px;
   margin-bottom: 20px;
   font-weight: 700;
 }
 
 .policy-container h3 {
   margin-top: 20px;
   margin-bottom: 8px;
   font-size: 18px;
   font-weight: 700;
 }
 
 .policy-container p {
   margin-bottom: 12px;
   color: #333;
 }
 
 .policy-container a {
   color: #3556d6;
   text-decoration: underline;
 }
 
 @media (max-width: 600px) {
   .policy-container {
     padding: 20px;
   }
 }

 /* Contact Page Form */
.contact-section {
   padding: 80px 20px;
   display: flex;
   justify-content: center;
 }
 
 .contact-container {
   width: 100%;
   max-width: 600px;
 }
 
 .contact-container h2 {
   font-size: 38px;
   font-weight: 700;
   margin-bottom: 30px;
   color: #0B1A39;
 }
 
 .contact-form {
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
 
 .contact-form input,
 .contact-form textarea {
   width: 100%;
   border: 2px solid #cbd3e1;
   border-radius: 40px;
   padding: 18px 20px;
   font-size: 18px;
   font-family: inherit;
   outline: none;
   resize: none;
   color: #0B1A39;
   transition: 0.2s ease;
 }
 
 .contact-form textarea {
   height: 150px;
   border-radius: 25px;
 }
 
 .contact-form input:focus,
 .contact-form textarea:focus {
   border-color: #3f63e0;
 }
 
 .contact-btn {
   background: #3f63e0;
   color: #fff;
   padding: 18px 40px;
   border-radius: 40px;
   font-size: 18px;
   border: none;
   cursor: pointer;
   align-self: flex-start;
   transition: 0.25s ease;
 }
 
 .contact-btn:hover {
   opacity: 0.9;
 }


 /* ============ CHECKOUT PAGE LAYOUT ============ */
/* ✅ MAIN PAGE WRAPPER */
.checkout-page {
   font-family: Arial, sans-serif;
   max-width: 420px;
   margin: 0 auto;
   padding: 20px;
   background: #f6f6f6;
}
.checkout-page * {
   box-sizing: border-box;
}

/* ✅ DELIVERY FORM CARD */
.checkout-form-box {
   background: #ffffff;
   border-radius: 26px;
   padding: 45px;              /* большой мягкий отступ */
   max-width: 900px;
   margin: 0 auto 50px;
   box-shadow: 0 0 25px rgba(0,0,0,0.05);  /* лёгкая тень */
}

/* ✅ FORM SPACING */
.checkout-container {
   display: flex;
   flex-direction: column;
   gap: 14px;   /* расстояние между полями как на твоём скрине */
}

.checkout-container h2 {
   text-align: center;
   font-size: 24px;
   margin-bottom: 24px;
   font-weight: bold;
   color: #111;
}


/* ✅ LABELS */
.checkout-container label {
   display: block;
   margin-bottom: 4px;
   font-size: 14px;
   font-weight: 600;
   color: #333;
}



/* === INPUTS (как на скрине) === */
.checkout-container input,
.checkout-container select {
   width: 100%;
   padding: 14px;
   font-size: 16px;
   border-radius: 16px;
   border: 1px solid rgba(0,0,0,0.18); /* тонкая светлая рамка */
   background: #fff;
   transition: all .25s ease;
}

/* === FOCUS (без синей рамки, только мягкая тень) === */
.checkout-container input:focus,
.checkout-container select:focus {
   outline: none !important;
   border-color: rgba(0,0,0,0.25); /* не меняем цвет */
   box-shadow: 0 0 12px rgba(0, 123, 255, 0.35); /* светлое голубое свечение */
}

/* ✅ FIELD VALIDATION */
.error-message {
   font-size: 14px;
   color: #d00;
   margin-top: -18px;
}

/* ✅ ORDER SUMMARY BOX */
.checkout-order-box {
   margin-top: 35px;
   padding: 30px;
   border-radius: 26px;
   border: 2px solid #000;
   background: #fff;
   max-width: 450px;
   margin-left: auto;
   margin-right: auto;
}

.checkout-order-box h3 {
   margin-bottom: 15px;
}

/* PRODUCT INFO */
.checkout-product {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   flex-direction: column;
   margin-bottom: 22px;
}

.product-title {
   font-weight: 600;
   font-size: 18px;
}

.product-qty {
   font-size: 14px;
   margin-top: 4px;
}

.product-price {
   font-size: 18px;
   font-weight: 700;
   margin-left: auto;
}

/* SUMMARY (Subtotal / Discount / Total) */
.checkout-summary {
   margin-top: 15px;
}

.summary-row {
   display: flex;
   justify-content: space-between;
   padding: 6px 0;
}

.summary-row.total {
   border-top: 2px solid #000;
   margin-top: 15px;
   padding-top: 10px;
   font-size: 20px;
   font-weight: bold;
}

/* ✅ GREEN BUTTON */
.place-order-btn {
   width: 100%;
   background: #28a745;
   color: #fff;
   padding: 18px;
   font-size: 19px;
   border-radius: 16px;
   border: none;
   cursor: pointer;
   margin-top: 25px;
}

.place-order-btn:hover {
   background: #1e9137;
}

/* Privacy note */
.checkout-privacy {
   margin-top: 16px;
   font-size: 13px;
   color: #555;
   text-align: center;
}

/* ✅ MOBILE FIX */
@media (max-width: 480px) {
   .checkout-form-box {
      padding: 26px;
      border-radius: 18px;
   }

   .checkout-container input,
   .checkout-container select {
      padding: 14px;
      font-size: 16px;
   }
}

.thank-you {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 80vh;
   background: #f9f9f9;
   padding: 40px 20px;
 }
 
 .thank-you-box {
   background: white;
   border-radius: 16px;
   padding: 40px;
   max-width: 500px;
   text-align: center;
   box-shadow: 0 4px 20px rgba(0,0,0,0.1);
 }
 
 .thank-you-box h1 {
   font-size: 26px;
   margin-bottom: 15px;
   color: #333;
 }
 
 .thank-you-box p {
   color: #555;
   line-height: 1.6;
   margin-bottom: 12px;
 }
 
 .thank-you-box hr {
   margin: 20px 0;
   border: none;
   border-top: 1px solid #eee;
 }
 
 .btn-home {
   display: inline-block;
   margin-top: 15px;
   background: black;
   color: white;
   padding: 10px 20px;
   border-radius: 8px;
   text-decoration: none;
   transition: 0.2s;
 }
 
 .btn-home:hover {
   background: #333;
 }