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

button {
     border: none;
     cursor: pointer;
     font-family: inherit;
}

input {
     font-family: inherit;
     border: none;
     outline: none;
}

/* Layout components */
.container {
     width: 100%;
     max-width: 1440px;
     margin: 0 auto;
     padding: 0 16px;
}

.container-narrow {
     width: 100%;
     max-width: 1140px;
     margin: 0 auto;
     padding: 0 16px;
     position: relative;
}

.flex-row {
     display: flex;
     flex-direction: row;
     align-items: center;
}

.flex-column {
     display: flex;
     flex-direction: column;
}

.flex-center {
     justify-content: center;
     align-items: center;
}

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

.flex-start {
     justify-content: flex-start;
}

.flex-end {
     justify-content: flex-end;
}

.section {
     padding: 48px 0;
}

/* Header styles */
.header {
     background-color: #fbfbfb;
     width: 100%;
}

.header-top {
     background-color: #fbfbfb;
     padding: 8px 0;
     border-bottom: 1px solid #eceaea;
}

.header-top .container {
     padding: 0 150px;
}

.header-contact {
     font-size: 16px;
     font-weight: 700;
     line-height: 26px;
     color: #210201;
}

.header-main {
     background-color: #2d030b;
     padding: 32px 0;
}

.header-logo {
     width: 294px;
     height: 66px;
}

.header-actions {
     display: flex;
     gap: 60px;
     align-items: center;
}

.header-action {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     color: #fbfbfb;
     text-decoration: none;
}

.header-action img {
     width: 24px;
     height: 24px;
}

.header-action-text {
     font-size: 16px;
     font-weight: 700;
     line-height: 16px;
     text-align: center;
}

.cart-badge {
     position: relative;
}

.cart-count {
     position: absolute;
     top: -6px;
     right: -6px;
     background-color: #fbfbfb;
     color: #060606;
     font-size: 12px;
     font-weight: 600;
     line-height: 11px;
     padding: 2px 6px;
     border-radius: 6px;
     min-width: 14px;
     text-align: center;
}

.header-nav {
     background-color: #fbfbfb;
     padding: 16px 0;
     border-bottom: 1px solid #eceaea;
}

.nav-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 80%;
     margin: 0 auto;
}

.menu-button {
     background-color: #2d030b;
     color: #fbfbfb;
     padding: 6px;
     border-radius: 4px;
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 14px;
     font-weight: 700;
     line-height: 23px;
     text-transform: uppercase;
}

.dropdown-menu {
     display: none;
     background-color: #fbfbfb;
     border: 1px solid #eceaea;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 4px;
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     z-index: 10;
     min-width: 200px;
     max-width: 900px;
     height: 220px;
}

.menu__list {
     display: flex;
     list-style: none;
     padding: 32px;
     margin: 0;
     gap: 24px;
}

.menu__title {
     font-weight: 700;
     font-size: 18px;
     color: #2D030B;
     margin-bottom: 16px;
}

.menu__link {
     text-decoration: none;
     color: #2D030B;
     font-size: 16px;
     font-weight: 500;
     display: block;
     margin-bottom: 8px;
}


.search-container {
     position: relative;
     width: 46%;
}

.search-input {
     width: 100%;
     padding: 10px 36px 10px 16px;
     background-color: #eceaea;
     border-radius: 5px;
     font-size: 16px;
     font-weight: 700;
     color: #978080;
}

.search-icon {
     position: absolute;
     right: 16px;
     top: 50%;
     transform: translateY(-50%);
     width: 20px;
     height: 20px;
}

.show-all-button {
     background-color: #2d030b;
     color: #fbfbfb;
     padding: 6px 24px;
     border-radius: 4px;
     font-size: 14px;
     font-weight: 700;
     line-height: 23px;
     text-transform: uppercase;
}

/* ===== EVENTS PAGE ===== */
.events-page {
     padding: 48px 0 48px;
}

/* Заголовок */
.events-header {
     text-align: center;
     margin-bottom: 48px;
}

.events-title {
     color: #060606;
     font-family: 'Dihjauti', serif;
     font-weight: 700;
     font-style: Bold;
     text-align: center;
     font-size: 48px;
     leading-trim: NONE;
     line-height: 110.00000000000001%;
     letter-spacing: 0%;
     text-align: center;
}

.events-subtitle {
     font-size: 16px;
     color: #896246;
}

/* Секции */
.events-section {
     margin-bottom: 80px;
}

.events-section-title {
     text-align: center;
     font-size: 32px;
     font-weight: 400;
     margin-bottom: 12px;
}

.events-section-subtitle {
     text-align: center;
     font-size: 16px;
     color: #896246;
     margin-bottom: 40px;
}

/* СЕТКА: 3 × 3 */
.events-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 367px));
     gap: 40px 24px;
     justify-content: center;
}

.events-inner {
     max-width: 1140px;
     margin: 0 auto;
}

/* Карточка */
.event-card {
     display: flex;
     flex-direction: column;
     gap: 12px;
}

/* Контейнер фото — задаёт высоту 230px, ширина по grid (~367px при 3 колонках),
   что точно совпадает с Figma (367×230). */
.event-image {
     width: 100%;
     height: 230px;
     overflow: hidden;
     border-radius: 8px;
}

/* Фото — заполняет контейнер 367×230, сохраняя пропорции через cover */
.event-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     border-radius: 8px;
}


.image-placeholder {
     width: 100%;
     height: 100%;
     background-color: #eceaea;
     border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     color: #978080;
}

/* Название */
.event-title {
     font-size: 18px;
     font-weight: 700;
     line-height: 120%;
     margin-top: 24px;
     margin-bottom: 24px;
     color: #210201;
     cursor: pointer;
}

/* Цена и дата */
.event-meta {
     display: flex;
     justify-content: space-between;
     font-size: 14px;
     color: #896246;
}

/* Просмотры */
.event-views {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 14px;
     color: #896246;
}

/* Место под SVG */
.event-eye {
     width: 16px;
     height: 16px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
}

/* Если SVG будет внутри */
.event-eye svg {
     width: 100%;
     height: 100%;
     fill: currentColor;
}

/* Product sections */
.products-section {
     background-color: #fbfbfb;
     padding: 48px 0;
}

.section-header {
     text-align: center;
     margin-bottom: 32px;
}

.section-title {
     font-size: 36px;
     font-weight: 700;
     line-height: 41px;
     color: #2d030b;
     margin-bottom: 8px;
}

.section-subtitle {
     font-size: 18px;
     font-family: "Behrens Antiqua", serif;
     font-weight: 400;
     line-height: 19px;
     color: #896246;
}

.products-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
     gap: 20px;
     max-width: 1140px;
     margin: 0 auto;
}

.product-card {
     background-color: #fbfbfb;
     border-radius: 8px;
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.product-image-container {
     position: relative;
     background-color: #fbfbfb;
     padding: 12px;
     border-radius: 5px;
     margin: 12px;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 280px;
}

.discount-badge {
     position: absolute;
     top: 12px;
     left: 12px;
     background-color: #780d00;
     color: #fbfbfb;
     padding: 2px 8px;
     border-radius: 5px;
     font-size: 16px;
     font-family: "Behrens Antiqua", serif;
     font-weight: 400;
     line-height: 19px;
}

.favorite-icon {
     position: absolute;
     top: 12px;
     right: 12px;
     width: 28px;
     height: 28px;
     cursor: pointer;
     transition: transform 0.2s ease;
}

.favorite-icon:hover {
     transform: scale(1.1);
}

.product-image {
     width: 78px;
     height: 244px;
     object-fit: contain;
}

.product-info {
     padding: 16px;
}

.product-title {
     font-size: 18px;
     font-weight: 700;
     line-height: 21px;
     color: #2d030b;
     text-align: center;
     margin-bottom: 12px;
}

.product-pricing {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 12px;
}

.price-section {
     display: flex;
     align-items: center;
     gap: 4px;
}

.current-price {
     font-size: 24px;
     font-family: "Behrens Antiqua", serif;
     font-weight: 400;
     line-height: 29px;
     color: #780d00;
}

.old-price-container {
     position: relative;
     display: flex;
     align-items: center;
     gap: 4px;
}

.old-price {
     font-size: 18px;
     font-family: "Behrens Antiqua", serif;
     font-weight: 400;
     line-height: 22px;
     color: #978080;
}

.price-strikethrough {
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     height: 1px;
     background-color: #978080;
}

.ruble-icon {
     width: 12px;
     height: 24px;
}

.ruble-icon-small {
     width: 10px;
     height: 18px;
}

.add-to-cart-btn {
     background-color: #780d00;
     border-radius: 18px;
     padding: 6px;
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background-color 0.3s ease, transform 0.2s ease;
}

.add-to-cart-btn:hover {
     background-color: #5a0a00;
     transform: scale(1.05);
}

.add-to-cart-btn img {
     width: 20px;
     height: 20px;
}

/* Advantages section */
.advantages-section {
     background-color: #fbfbfb;
     padding: 38px 0;
}

.advantages-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 60px;
     max-width: 1140px;
     margin: 0 auto;
}

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

.advantage-icon {
     width: 60px;
     height: 60px;
     background-color: #780d00;
     border-radius: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 12px;
}

.advantage-title {
     font-size: 20px;
     font-weight: 700;
     line-height: 23px;
     color: #2d030b;
     margin-bottom: 12px;
}

.advantage-description {
     font-size: 14px;
     font-weight: 700;
     line-height: 15px;
     color: #2d030b;
}

/* Sommelier section */
.sommelier-section {
     background-color: #f2f2f2;
     padding: 48px 0;
}

.sommelier-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(366px, 1fr));
     gap: 18px;
     max-width: 1140px;
     margin: 0 auto;
}

.sommelier-card {
     position: relative;
     width: 366px;
     height: 480px;
     border-radius: 8px;
     overflow: hidden;
}

.sommelier-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.sommelier-title {
     position: absolute;
     bottom: 24px;
     left: 24px;
     right: 24px;
     font-size: 18px;
     font-weight: 700;
     line-height: 21px;
     color: #fbfbfb;
}

/* Newsletter section */
.newsletter-section {
     background-color: #fbfbfb;
     padding: 48px;
}

.newsletter-form {
     max-width: 400px;
     margin: 0 auto;
     background-color: #f2f2f2;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
}

.form-group {
     margin-bottom: 16px;
}

.form-label {
     display: block;
     font-size: 16px;
     font-weight: 700;
     line-height: 16px;
     color: #2d030b;
     margin-bottom: 12px;
}

.form-input {
     width: 100%;
     padding: 12px;
     background-color: #fbfbfb;
     border-radius: 5px;
     font-size: 16px;
     font-weight: 700;
     line-height: 19px;
     color: #978080;
}

.submit-btn {
     width: 100%;
     background-color: #2d030b;
     color: #fbfbfb;
     padding: 6px 34px;
     border-radius: 4px;
     font-size: 14px;
     font-weight: 700;
     line-height: 23px;
     text-transform: uppercase;
     margin-bottom: 8px;
     transition: background-color 0.3s ease;
}

.submit-btn:hover {
     background-color: #1a0206;
}

.privacy-text {
     font-size: 12px;
     font-family: "Gill Sans Nova", sans-serif;
     font-weight: 400;
     line-height: 14px;
     color: #978080;
     text-align: center;
}

.privacy-link {
     text-decoration: underline;
}

/* Footer */
.footer {
     background-color: #2d030b;
     color: #fbfbfb;
     padding: 30px 0;
}

.footer-logo {
     width: 186px;
     height: 100px;
     margin: 0 auto 40px;
     display: block;
}

.footer-content {
     max-width: 1140px;
     margin: 0 auto;
     padding: 0 16px;
}

.footer-main {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     margin-bottom: 40px;
}

.footer-section {
     display: flex;
     flex-direction: column;
}

.footer-section-title {
     font-size: 20px;
     font-weight: 700;
     line-height: 32px;
     color: #cda27a;
     margin-bottom: 12px;
}

.footer-link {
     color: #fbfbfb;
     text-decoration: none;
     font-size: 18px;
     font-family: "Gill Sans Nova", sans-serif;
     font-weight: 400;
     line-height: 16px;
     margin-bottom: 8px;
     transition: color 0.3s ease;
}

.footer-link:hover {
     color: #cda27a;
}

.footer-contact {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 8px;
}

.footer-contact img {
     width: 22px;
     height: 22px;
}

.footer-contact-text {
     font-size: 16px;
     font-weight: 700;
     line-height: 26px;
     color: #fbfbfb;
}

.footer-social {
     display: flex;
     gap: 16px;
     justify-content: flex-end;
     margin-top: 20px;
}

.social-icon {
     width: 28px;
     height: 28px;
     padding: 6px;
     transition: transform 0.3s ease;
}

.social-icon:hover {
     transform: scale(1.1);
}

.footer-divider {
     width: 100%;
     height: 1px;
     background-color: rgba(236, 234, 234, 0.1);
     margin: 38px 0 6px;
}

.footer-copyright {
     font-size: 14px;
     font-family: "Gill Sans Nova", sans-serif;
     font-weight: 400;
     line-height: 13px;
     color: #896246;
     text-align: right;
}

/* Responsive media queries */
@media (max-width: 639px) {
     .container {
          padding: 0 8px;
     }

     .header-top .container {
          padding: 0 16px;
     }

     .header-contact {
          font-size: 12px;
          display: none;
     }

     .header-contact:first-child {
          display: block;
     }

     .header-actions {
          gap: 20px;
     }

     .header-logo {
          width: 200px;
          height: 45px;
     }

     .nav-content {
          width: 95%;
          flex-direction: column;
          gap: 16px;
     }

     .search-container {
          width: 100%;
     }

     .hero-title {
          font-size: 28px;
          line-height: 32px;
     }

     .hero-description {
          font-size: 16px;
     }

     .hero-content {
          left: 16px;
          width: 80%;
     }

     .section-title {
          font-size: 28px;
          line-height: 32px;
     }

     /* Events section mobile */
     .events-page {
          padding: 24px 0;
     }

     .events-header {
          margin-bottom: 24px;
          padding: 0 16px;
     }

     .events-title {
          font-size: 28px;
          margin-bottom: 12px;
     }

     .events-subtitle {
          font-size: 14px;
     }

     .events-section {
          margin-bottom: 40px;
     }

     .events-section-title {
          font-size: 24px;
          margin-bottom: 8px;
          padding: 0 16px;
     }

     .events-section-subtitle {
          font-size: 14px;
          margin-bottom: 24px;
          padding: 0 16px;
     }

     .events-inner {
          /* padding: 0 16px; */
     }

     /* ============================================================
        SENIOR-LEVEL КАРУСЕЛЬ — те же правила, что и в events.css.
        Подробное объяснение свойств — см. там. ============================================================ */
     .events-grid {
          display: flex;
          gap: 16px;
          padding: 0 64px 0 16px;
          overflow-x: auto;
          overflow-y: hidden;
          scroll-snap-type: x mandatory;
          scroll-padding-inline-start: 16px;
          overscroll-behavior-x: contain;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          -ms-overflow-style: none;
     }

     .events-grid::-webkit-scrollbar {
          display: none;
     }

     .event-card {
          flex: 0 0 calc(100vw - 64px);
          max-width: none;
          scroll-snap-align: start;
          scroll-snap-stop: always;
     }

     /* Картинка пропорционально уменьшается на мобильной (десктоп — 230px) */
     .event-image,
     .event-image img {
          height: 180px;
     }

     .event-title {
          font-size: 16px;
          margin-top: 16px;
          margin-bottom: 16px;
     }

     .event-meta {
          font-size: 12px;
     }

     /* Products grid mobile */
     .products-grid {
          grid-template-columns: 1fr;
          gap: 16px;
          padding: 0 16px;
     }

     .advantages-grid {
          grid-template-columns: 1fr;
          gap: 32px;
          padding: 0 16px;
     }

     .sommelier-grid {
          grid-template-columns: 1fr;
          gap: 16px;
          padding: 0 16px;
     }

     .sommelier-card {
          width: 100%;
          height: 300px;
     }

     .footer-main {
          grid-template-columns: 1fr;
          gap: 32px;
     }

     .footer-social {
          justify-content: center;
     }

     .footer-copyright {
          text-align: center;
     }
}

@media (min-width: 640px) and (max-width: 767px) {
     .header-logo {
          width: 250px;
          height: 56px;
     }

     .hero-title {
          font-size: 36px;
          line-height: 40px;
     }

     .products-grid {
          grid-template-columns: repeat(2, 1fr);
     }

     .advantages-grid {
          grid-template-columns: repeat(2, 1fr);
     }

     .sommelier-grid {
          grid-template-columns: repeat(2, 1fr);
     }
}

@media (min-width: 768px) and (max-width: 1023px) {
     .products-grid {
          grid-template-columns: repeat(3, 1fr);
     }

     .advantages-grid {
          grid-template-columns: repeat(2, 1fr);
     }

     .sommelier-grid {
          grid-template-columns: repeat(2, 1fr);
     }
}

@media (min-width: 1024px) {
     .products-grid {
          grid-template-columns: repeat(4, 1fr);
     }

     .advantages-grid {
          grid-template-columns: repeat(4, 1fr);
     }

     .sommelier-grid {
          grid-template-columns: repeat(3, 1fr);
     }
}

/* Interactive states */
.menu-button:hover {
     background-color: #1a0206;
}

.show-all-button:hover {
     background-color: #1a0206;
}

.search-input:focus {
     outline: 2px solid #2d030b;
     outline-offset: 2px;
}

.form-input:focus {
     outline: 2px solid #2d030b;
     outline-offset: 2px;
}

.header-action:hover {
     opacity: 0.8;
}