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

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

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

/* Layout components */
.main-container {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
}

.header {
     background-color: #2d030b;
}

.header-top {
     background-color: #fbfbfb;
     padding: 8px 16px;
}

.header-top-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     max-width: 1140px;
     margin: 0 auto;
}

.header-main {
     padding: 32px 16px;
}

.header-main-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     max-width: 1140px;
     margin: 0 auto;
}

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

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

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

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

.cart-badge {
     position: relative;
}

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

.navigation-bar {
     background-color: #fbfbfb;
     border: 1px solid #eceaea;
     padding: 16px;
}

.navigation-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     max-width: 1140px;
     margin: 0 auto;
}

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

.search-container {
     position: relative;
     flex: 1;
     max-width: 500px;
     margin: 0 24px;
}

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

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

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

/* Main content */
.main-content {
     flex: 1;
     background-color: #f2f2f2;
     padding: 48px 16px;
}

.content-wrapper {
     max-width: 1140px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     gap: 10px;
}

.page-title {
     font-family: "Dihjauti", sans-serif;
     font-size: 48px;
     font-weight: 700;
     line-height: 110%;
     text-align: center;
     /* было left → center, как в Figma */
     color: #060606;
     margin-bottom: 16px;
}

.cart-page {
     padding: 32px 0 48px;
}

.cart-empty {
     min-height: 640px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     gap: 16px;
}

/* Заголовок «Корзина» в пустом состоянии — крупный, центрированный, как в Figma */
.cart-empty__title {
     font-family: "Dihjauti", sans-serif;
     font-size: 48px;
     font-weight: 700;
     line-height: 110%;
     color: #060606;
     margin: 0 0 8px 0;
     text-align: center;
}

.cart-empty__text {
     font-family: "Gill Sans Nova", sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 140%;
     color: #978080;
     max-width: 520px;
     margin: 0 auto;
}

.cart-empty__btn {
     margin-top: 16px;
     text-transform: uppercase;
}

/* Mobile: уменьшенный заголовок и текст пустой корзины */
@media (max-width: 639px) {
     .cart-empty__title {
          font-size: 32px;
     }
     .cart-empty__text {
          font-size: 14px;
          padding: 0 16px;
     }
}

.remove-btn {
     display: none;
}

.cart-header {
     display: flex;
     justify-content: space-between;
     /* было flex-start → space-between (count слева, clear справа, как в Figma) */
     align-items: center;
     font-family: "Gill Sans Nova", sans-serif;
     margin-bottom: 8px;
     gap: 16px;
}

.cart-header .cart-clear-form {
     margin: 0;
     padding: 0;
}

.cart-info {
     font-size: 16px;
     font-weight: 400;
     color: #978080;
}

.count_product_in_card {
     font-family: 'Gill Sans Nova', sans-serif !important;
     font-weight: 500 !important;
     font-size: 18px !important;
     line-height: 120% !important;
     letter-spacing: 0% !important;
     text-align: right !important;
}

.cart-footer-actions {
     margin-top: 24px;
     display: flex;
     justify-content: flex-end;
}

.clear-cart {
     font-family: "Gill Sans Nova", sans-serif;
     font-size: 16px;
     /* было 14 → 16 (как "X товаров" слева, симметрично) */
     color: #978080;
     font-weight: 400;
     text-decoration: none;
     /* было underline → без подчёркивания, как в Figma */
     background: transparent;
     /* сбрасываем дефолтный <button> фон */
     border: none;
     padding: 0;
     cursor: pointer;
     transition: color .15s ease;
}

.clear-cart:hover {
     color: #780d00;
     text-decoration: underline;
     /* подчёркивание появляется только на hover */
}

/* CSS Grid вместо flex — чтобы:
   - cart-header (row 1, col 1) был только над cart-items по ширине
   - order-summary (row 2, col 2) начиналась на уровне cart-items, а не cart-header
   Так выглядит карточка корзины в Figma — summary не «съезжает» наверх к header. */
.cart-content {
     display: grid;
     grid-template-columns: 1fr auto;
     /* левая колонка — гибкая, summary — по содержимому */
     grid-template-rows: auto 1fr;
     gap: 12px 24px;
     /* row-gap 12, col-gap 24 */
     align-items: start;
}

.cart-content .cart-header {
     grid-column: 1;
     /* первая колонка */
     grid-row: 1;
     /* первый ряд */
}

.cart-content .cart-items {
     grid-column: 1;
     /* первая колонка */
     grid-row: 2;
     /* второй ряд */
}

.cart-content .order-summary {
     grid-column: 2;
     /* вторая колонка */
     grid-row: 2;
     /* ТОЛЬКО второй ряд — на уровне cart-items, не cart-header */
}

.cart-items {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 12px;
}

.cart-item {
     background-color: #fbfbfb;
     border-radius: 8px;
     padding: 20px;
     display: flex;
     gap: 28px;
}

.item-image-container {
     width: 26%;
     display: flex;
     flex-direction: column;
     gap: 4px;
     padding: 12px;
     background-color: #fbfbfb;
     border-radius: 8px;
}

.discount-badge {
     position: relative !important;
     top: -20px !important;
     left: -20px !important;
     background-color: #780d00;
     color: #fbfbfb;
     padding: 2px 8px;
     border-radius: 5px;
     font-size: 16px;
     align-self: flex-start;
     font-family: "Behrens Antiqua", serif;
     font-weight: 400;
     line-height: 19px;
}

.item-image {
     width: auto;
     height: 210px;
     align-self: center;
     margin-bottom: 12px;
}

.item-details {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 16px;
     /* было 80px → 16px (компактнее, низ держит margin-top: auto на actions) */
     min-height: 100%;
     /* растянуть на всю высоту карточки, чтобы actions ушёл вниз */
}

.item-info {
     display: flex;
     flex-direction: column;
     gap: 14px;
}

.item-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
}

.item-title {
     font-size: 25px;
     font-weight: 700;
     line-height: 27px;
     color: #2d030b;
     flex: 1;
}

.item-price-container {
     display: flex;
     flex-direction: column;
     gap: 2px;
     align-items: flex-end;
}

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

.price-current {
     font-size: 24px;
     color: #780d00;
}

.price-old {
     font-size: 18px;
     color: #978080;
     position: relative;
}

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

.ruble-icon {
     width: 13px !important;
     height: 24px !important;
     margin-top: 0px !important;
}

.ruble-icon-small {
     width: 9px;
     height: 18px;
     margin-top: 3px;
}

.total-value .ruble-icon {
     /* margin-top: 6px !important; */
     margin-left: 3px;
}

.item-tags {
     display: flex;
     gap: 12px;
}

.item-tag {
     border: 1px solid #210201;
     border-radius: 5px;
     padding: 0 8px;
     font-size: 16px;
     font-weight: 700;
     color: #210201;
}

.item-actions {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: 12px;
     margin-top: auto;
     /* прижимает блок (сердце + счётчик) к НИЗУ карточки независимо
                                  от того, сколько строк у заголовка и есть ли чипы */
}

.favorite-btn {
     background-color: #f2f2f2;
     border-radius: 4px;
     width: 40px;
     height: 40px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: background-color .2s ease;
}

.favorite-btn:hover {
     background-color: #e6e4e4;
}

.favorite-btn img,
.favorite-btn svg {
     width: 20px;
     height: 20px;
}

.quantity-controls {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     background-color: #f2f2f2;
     border-radius: 4px;
     padding: 0 2px;
     height: 40px;
}

.quantity-btn {
     background-color: transparent;
     border-radius: 4px;
     width: 36px;
     height: 36px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: background-color .2s ease;
}

.quantity-btn:hover {
     background-color: #e6e4e4;
}

.quantity-btn img {
     width: 16px;
     height: 16px;
}

.quantity-input {
     background-color: transparent;
     font-family: "Gill Sans Nova", sans-serif;
     font-size: 16px;
     line-height: 100%;
     text-align: center;
     width: 40px;
     height: 36px;
}

/* Order summary */
.order-summary {
     width: auto;
     background-color: #fbfbfb;
     border-radius: 8px;
     padding: 16px;
     box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
     height: fit-content;
}

.promo-section {
     display: flex;
     gap: 12px;
     margin-bottom: 16px;
}

.promo-input {
     flex: 1;
     height: 40px;
     padding: 0 14px !important;
     border: 1px solid #eceaea;
     border-radius: 4px;
     background-color: #fbfbfb;
     font-family: "Gill Sans Nova", sans-serif;
     font-size: 16px;
     line-height: 100%;
     color: #210201;
}

.promo-input::placeholder {
     color: #978080;
}

.promo-input:focus {
     border-color: #2d030b;
     color: #210201;
}

.promo-btn {
     background-color: #780d00;
     border-radius: 4px;
     width: 40px;
     height: 40px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: background-color .2s ease;
}

.promo-btn:hover {
     background-color: #5a0a00;
}

.promo-btn img {
     width: 18px;
     height: 18px;
}

.order-details {
     display: flex;
     font-size: 18px;
     flex-direction: column;
     gap: 4px;
     margin-bottom: 16px;
}

.order-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-family: "Gill Sans Nova", sans-serif;
}

.order-label {
     font-size: 18px;
     color: #060606;
}

.order-value {
     font-size: 18px;
     color: #060606;
     display: flex;
     align-items: center;
     gap: 4px;
     font-family: 'Behrens Antiqua', serif;
     font-weight: 400;
}

.discount-label {
     color: #780d00;
}

.discount-value {
     color: #780d00;
}

.total-row {
     margin-top: 12px;
     font-family: "Gill Sans Nova", sans-serif;
     font-weight: 400;
}

.total-label {
     font-family: "Dihjauti", sans-serif;
     color: #210201;
     font-weight: 700;
     font-style: Bold;
     font-size: 24px;
     line-height: 110.00000000000001%;
     letter-spacing: 0%;
}

.total-value {
     font-family: 'Behrens Antiqua', serif;
     font-size: 24px;
     font-weight: 400;
     display: flex;
     align-items: center;
     color: #210201;
}

.checkout-btn.checkout-btn {
     width: 100%;
     height: 40px;
     background-color: #210201;
     /* margin-top: 12px; */
}

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

.footer-content {
     max-width: 1140px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     gap: 40px;
}

.footer-logo {
     width: 186px;
     height: 100px;
     align-self: center;
}

.footer-main {
     display: flex;
     flex-direction: column;
     gap: 48px;
}

.footer-links {
     display: flex;
     justify-content: space-between;
}

.footer-column {
     display: flex;
     flex-direction: column;
     gap: 8px;
}

.footer-title {
     font-size: 20px;
     font-weight: 700;
     color: #cda27a;
     margin-bottom: 8px;
}

.footer-link {
     font-size: 18px;
     color: #fbfbfb;
     text-decoration: none;
}

.footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
}

.store-locations {
     width: 40%;
}

.location-item {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 16px;
}

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

.contacts-section {
     width: 36%;
}

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

.social-icons {
     display: flex;
     gap: 32px;
     padding: 6px;
}

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

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

.copyright {
     font-size: 14px;
     color: #896246;
     text-align: right;
}

/* Typography */
.contact-text {
     font-size: 16px;
     font-weight: 700;
     color: #210201;
}

.action-text {
     font-size: 16px;
     font-weight: 700;
     color: #fbfbfb;
}

/* Interactive states */
button:hover {
     opacity: 0.9;
     transform: translateY(-1px);
}

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

.cart-item:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Responsive media queries */
@media (max-width: 768px) {
     .cart-content {
          display: flex !important;
          flex-direction: column;
          gap: 16px;
     }

     .cart-content .cart-header,
     .cart-content .cart-items,
     .cart-content .order-summary {
          grid-column: auto;
          grid-row: auto;
     }

     .header-top-content {
          flex-direction: column;
          gap: 8px;
          text-align: center;
     }

     .header-main-content {
          flex-direction: column;
          gap: 24px;
     }

     .header-actions {
          gap: 16px;
     }

     .navigation-content {
          flex-direction: column;
          gap: 16px;
     }

     .search-container {
          order: 2;
          margin: 0;
          max-width: none;
     }

     .page-title {
          font-size: 32px;
          line-height: 1.2;
     }

     .cart-content {
          flex-direction: column;
     }

     .order-summary {
          width: 100%;
     }

     .cart-item {
          flex-direction: row;
          gap: 16px;
          padding: 16px;
     }

     .item-image-container {
          width: auto;
          align-items: flex-start;
          padding: 0;
          background-color: transparent;
          flex-shrink: 0;
     }

     .item-image {
          width: 110px;
          height: 201px;
          object-fit: contain;
          margin-bottom: 0;
     }

     .discount-badge {
          position: absolute !important;
          top: 8px !important;
          left: 8px !important;
     }

     .item-details {
          flex: 1;
          gap: 12px;
     }

     .item-header {
          flex-direction: column;
          gap: 8px;
          align-items: flex-start;
     }

     .item-title {
          font-size: 16px;
          line-height: 1.3;
          order: 1;
     }

     .item-price-container {
          order: -1;
          align-items: flex-start;
          gap: 8px;
     }

     .item-price {
          flex-direction: row;
     }

     .price-current {
          font-size: 20px;
     }

     .price-old {
          font-size: 14px;
     }

     .item-tags {
          gap: 8px;
     }

     .item-tag {
          padding: 2px 6px;
          font-size: 13px;
     }

     .item-actions {
          gap: 8px;
     }

     .favorite-btn,
     .quantity-btn {
          width: 30px;
          height: 30px;
          padding: 4px;
     }

     .quantity-input {
          width: 30px;
          height: 35px;
          padding: 4px 8px;
          font-size: 14px;
     }

     .footer-links {
          flex-direction: column;
          gap: 32px;
     }

     .footer-bottom {
          flex-direction: column;
          gap: 32px;
     }

     .store-locations,
     .contacts-section {
          width: 100%;
     }

     .cart-page {
          padding: 32px 12px !important;
     }

     .quantity-controls {
          height: 30px;
     }

     .cart-header {
          width: 100%;
     }

     .total-row{
          padding-top: 8px;
          margin-top: 0px;
     }
}

@media (min-width: 640px) {
     .header-top {
          padding: 8px 24px;
     }

     .header-main {
          padding: 32px 12px !important;
     }

     .main-content {
          padding: 32px 12px !important;
     }

     .footer {
          padding: 30px 24px;
     }
}

@media (min-width: 1024px) {
     .header-top {
          padding: 8px 32px;
     }

     .header-main {
          padding: 32px 32px;
     }

     .main-content {
          padding: 48px 32px;
     }

     .footer {
          padding: 30px 32px;
     }
}

.quantity-btn svg {
  stroke: #333;
}