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

:root {
  --orange: #ff5b07;
  --orange-dark: #d96a0e;
  --dark: #1c1c2e;
  --dark2: #181826;
  --text: #2c2c3a;
  --text-light: #7a7a90;
  --border: #e8e8f0;
  --bg-light: #f5f5fa;
  --white: #fff;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Open Sans", sans-serif;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
}
img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ========== TOP BAR ========== */
.topbar {
  background: #242434;
  color: #fff;
  font-size: 12px;
  padding: 8px 0;
  position: sticky;
  top: 0;
  z-index: 1000001;
}
.topbar .header-cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.topbar-left {
  display: flex;
  gap: 20px;
  align-items: center;
}
.topbar-block {
  display: flex;
  align-items: center;
  gap: 5px;
}
.topbar-right {
  display: flex;
  gap: 16px;
  align-items: center;
}
.topbar a {
  color: #fff;
  font-size: 12px;
}
.topbar a:hover {
  color: var(--orange);
}
.topbar-sep {
  color: #444;
}

/* ========== HEADER ========== */
header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 34px;
  z-index: 1000000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.header-cont {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  justify-content: space-between;
}
.header-blocks {
  display: flex;
  align-items: center;
  gap: 50px;
}
/* LOGO — реальний вигляд Karter Truck */
.logo {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}
.logo-svg {
  height: 38px;
  width: auto;
}
nav a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dark);
  padding: 6px 12px;
  padding-bottom: 4px;
  border-radius: 0;
  transition: color 0.2s;
  font-family: "Montserrat", sans-serif;
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  align-items: center;
}

nav a::after {
  content: "";
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: calc(100% - 24px); /* 24px = padding left + right (12px * 2) */
  height: 2px;
  background: var(--orange);
  border-radius: 2px 2px 0 0;
  transition: transform 0.2s ease;
}

nav a:hover::after,
nav a.active::after {
  transform: translateX(-50%) scaleX(1);
}
.header-search {
  display: flex;
  align-items: center;
  /* border: 2px solid var(--orange); */
  border-radius: 6px;
  overflow: hidden;
  flex: 1;
  max-width: 300px;
}

.header-search input {
  border: none;
  outline: none;
  padding: 12px 14px;
  font-size: 12px;
  flex: 1;
  background: #dde3f5;
  border-radius: 7px;
}
.header-search button {
  background: var(--orange);
  border: none;
  padding: 11px 11px;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: 15px;
  transition: background 0.2s;
  border-radius: 11px;
}
.header-search button:hover {
  background: var(--orange-dark);
}

.header-phones {
  text-align: right;
  flex-shrink: 0;
}
.header-phones-block {
  display: flex;
  gap: 5px;
  align-items: center;
}
.header-phones-block:first-child {
  margin-bottom: 2px;
}
.header-phones a {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--dark);
  font-family: "Montserrat", sans-serif;
  line-height: 1.5;
}
.header-phones a:hover {
  color: var(--orange);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  /* margin-left: auto; */
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: 0.3s;
}

/* Коли меню відкрите — робимо хрестик */
.hamburger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
/* ========== HERO ========== */
.hero-top-bg {
  background: #c4cbe247;
  padding: 15px 0;
}
.hero {
  background: #eaefff66;
  position: relative;
  overflow: hidden;
  min-height: 380px;
}
.main-bg {
  position: absolute;
  position: absolute;
  top: -185px;
  height: 453px;
  width: 603px;
  z-index: 100000;
}
/* Gear decorations like on original */
.hero-deco {
  position: absolute;
  pointer-events: none;
  opacity: 0.08;
}
.hero-deco-1 {
  right: 66%;
  top: 52%;
  transform: translateY(-25%);
  width: 312px;
  height: 224px;
}
.hero-deco-2 {
  right: -3%;
  top: 10%;
  /* width: 180px; */
  height: 266px;
  opacity: 0.05;
  transform: translateY(-45%);
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 54px 0 50px;
  position: relative;
  z-index: 1;
}
.hero-text {
  flex: 1;
  max-width: 480px;
}
.hero-text h1 {
  font-size: 36px;
  color: var(--dark);
  line-height: 1.15;
  margin-bottom: 20px;
}
.hero-text ul {
  margin-bottom: 30px;
  list-style: none;
}
.hero-text ul li {
  font-size: 14px;
  color: var(--text-light);
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.hero-text ul li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}
.hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-orange {
  background: var(--orange) !important;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 30px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer !important;
  text-decoration: none;
}
.btn-orange:hover {
  background: var(--orange-dark);
  transform: translateY(-1px);
}

/* "Підібрати запчастину" — outline orange як на скріні */
.btn-outline-orange {
  background: #ff953e44;
  color: var(--orange);
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 30px;
  border-radius: 8px;

  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.btn-outline-orange:hover {
  background: var(--orange);
  color: #fff;
  transform: translateY(-1px);
}

.hero-image {
  flex-shrink: 0;
  width: 600px;
  position: relative;
}

/* ========== FILTER BAR ========== */
.filter-section {
  padding: 100px 0 26px 0;
}
.filter-card {
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(28, 28, 46, 0.09);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: -28px;
  position: relative;
  z-index: 10;
}

/* ===== CUSTOM SELECT (Ск.rubric-cardрін 1) ===== */
.custom-select-wrap {
  position: relative;
  flex: 1;
  min-width: 130px;
}
.custom-select-wrap select {
  width: 100%;
  padding: 14px 38px 14px 16px;
  border: unset;
  border-radius: 10px;
  font-size: 13.5px;
  opacity: unset !important;
  color: #777787 !important;
  background: #dde3f575 !important;
  appearance: none;
  -webkit-appearance: none;
  filter: unset !important;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-weight: 500;
}
.custom-select-wrap select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(240, 123, 28, 0.12);
}
/* Кастомна стрілочка SVG (як на скріні 1) */
.custom-select-wrap::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%239090a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.filter-card .btn-orange {
  white-space: nowrap;
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 14px;
  gap: 8px;
  flex-shrink: 0;
  opacity: unset !important;
  cursor: unset !important;
  filter: unset !important;
  /* background-color: #e0e0e0; */
  color: #fff !important;
  border-color: unset;
  cursor: pointer !important;
}

/* ========== RUBRIC SECTION ========== */
.rubric-section {
  padding: 0px 0px 36px 0px;
  background: #eaefff66;
}
.rubric-cont {
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(28, 28, 46, 0.06);
  padding: 24px;
}
.section-title-left {
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 20px;
}
.rubric-wrap {
}
.rubric-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.rubric-card {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 6px 6px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  background: #dde3f575;
}
.rubric-card:hover {
  border-color: var(--orange);
  box-shadow: 0 4px 16px rgba(240, 123, 28, 0.1);
  transform: translateY(-2px);
}
.rubric-icon {
  /* width: 80px;
  height: 64px; */
  margin: 0 auto 12px;
  display: flex;
  background-color: #fff;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  height: 133px;
}
.rubric-icon img {
  width: 130px;
  object-fit: cover;
}
.rubric-card p {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.35;
  padding: 6px;
}
.show-more {
  text-align: center;
  margin-top: 18px;
}
.show-more a {
  font-size: 13px;
  color: var(--dark);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.show-more a:hover {
  color: var(--orange);
}

/* ========== CATALOG ========== */
.catalog-section {
  padding: 50px 0;
  background: var(--white);
}
.section-title-big {
  font-size: 26px;
  /* font-weight: 800; */
  color: var(--dark);
  margin-bottom: 28px;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 32px;
}

/* Картка товару — hover показує плашку з кнопкою */
.product-card {
  background: #eaefff66;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
  height: 252px;
}
.product-card:hover {
  box-shadow: 0 8px 28px rgba(28, 28, 46, 0.12);
  transform: translateY(-3px);
  border-color: #d0d0e0;
}

.product-img {
  width: 100%;
  background: #eaefff66;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  /* height: 160px; */
}
.product-img a {
  width: 163px !important;
  height: 129px !important;
}
.product-img svg,
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Панель прихована — виїжджає знизу при hover */
.product-hover-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1.5px solid var(--border);
  padding: 12px 12px 10px;
  transform: translateY(30%); /* ховаємо вниз */
  transition: transform 0.25s ease;
  z-index: 5;
}
.product-card:hover .product-hover-panel {
  transform: translateY(0); /* виїжджає при hover */
}
.product-hover-panel h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.4;
  margin-bottom: 4px;
  font-family: "Montserrat", sans-serif;
}
.product-hover-panel .product-code {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 18px;
}
.product-hover-panel .btn-price {
  width: 100%;
}
.blog-img {
  height: 196px !important;
  width: 234px !important;
  margin: 0 auto !important;
}
.product-info {
  padding: 14px 14px 10px;
}
.product-info h3 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.4;
  margin-bottom: 8px;
  height: 48px;
}
.product-code {
  font-size: 11px;
  color: var(--text-light);
}

.btn-price {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  transition: background 0.2s;
  width: 100%;
  display: block;
  text-align: center;
}
.btn-price:hover {
  background: var(--orange-dark);
}

.catalog-more {
  text-align: center;
}
.btn-more-catalog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ff953e44;
  color: var(--orange);
  border-radius: 8px;
  padding: 11px 22px;
  font-weight: 700;
  font-size: 13.5px;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}
.btn-more-catalog:hover {
  background: var(--orange);
  color: #fff;
}
/* ========== SWIPER ========== */
.swiper-track-wrap {
  position: relative;
  margin-bottom: 0;
}

.swiper-outer {
  overflow: hidden;
}

/* Перевизначаємо grid → flex тільки для слайдера */
.product-grid.swiper-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  margin-bottom: 0;
}

.product-grid.swiper-track .product-card {
  flex-shrink: 0;
}

.swiper-fade-l,
.swiper-fade-r {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.3s;
}
.swiper-fade-l {
  left: 0;
  background: linear-gradient(to right, var(--white), transparent);
}
.swiper-fade-r {
  right: 0;
  background: linear-gradient(to left, var(--white), transparent);
}

.swiper-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
  position: relative;
  margin-bottom: 30px;
}

.pagination-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, width 0.25s, border-radius 0.25s;
}
.pag-dot.active {
  background: var(--orange);
  width: 22px;
  border-radius: 4px;
}
.pag-dot:hover:not(.active) {
  background: #c0c0d8;
}

.swiper-nav-btns {
  display: flex;
  gap: 8px;
}

.nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--dark);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.nav-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
  background-color: #ff953e44;
}
/* ========== BRANDS ========== */
.brands-section {
  padding: 36px 0;
  background: #eaefff66;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.brands-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
}
.brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 25px;
  cursor: pointer;
  background-color: #fff;
  transition: filter 0.2s, opacity 0.2s;
  border-radius: 10px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.brand-item img {
  width: 120px;
  object-fit: contain;
  height: 51px;
}
.brand-item:hover {
  filter: none;
  opacity: 1;
}
.brand-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
}

/* ========== MODELS ========== */
.models-section {
  padding: 50px 0;
  background: var(--white);
}
.section-title-center {
  font-size: 26px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 28px;
  text-align: center;
}
.models-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.model-card {
  background: #dde3f575;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
}
.model-img {
  background-color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px;
}
.model-img img {
  width: 140px;
  object-fit: contain;
  height: 60px;
}
.model-list {
  margin-left: 3%;
  padding: 9px;
}
.model-card:hover {
  box-shadow: 0 4px 20px rgba(28, 28, 46, 0.09);
  transform: translateY(-2px);
}
.model-brand-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 26px;
  margin-bottom: 16px;
}
.model-brand-name.iveco {
  color: #0038a8;
}
.model-brand-name.daf {
  color: #1b5ea8;
}
.model-brand-name.man {
  color: #e2001a;
}
.model-card ul li {
  font-size: 13px;
  color: var(--text);
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #f0f0f5;
}
.model-card ul li:last-child {
  border-bottom: none;
}
.model-card ul li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}
.models-more {
  text-align: center;
}

/* ========== WHY US ========== */
.why-section {
  padding: 64px 20px 15px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.why-stripes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.container-large {
  max-width: 1300px;
  margin: 0 auto;
  background: #ff5a1b;
  padding: 40px 0 60px 0;
  border-radius: 20px;
}
.why-section h2 {
  font-size: 28px;

  color: #fff;
  margin-bottom: 44px;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.why-item {
  text-align: center;
  color: #fff;
}
.why-icon-wrap {
  margin: 0 auto 31px;
}
.why-icon-bg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-icon-bg img {
  width: 146px;
  height: 143px;
}
.why-icon-bg svg {
  width: 52px;
  height: 52px;
}
.why-item h3 {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 8px;
}
.why-item p {
  font-size: 13px;
  opacity: 0.9;
  line-height: 1.5;
  max-width: 220px;
  margin: 0 auto;
}

/* ========== ABOUT ========== */
.about-section {
  padding: 60px 0;
  background: #eaefff66;
}
.about-inner {
  position: relative;
}
.about-inner-img {
  position: absolute;
  left: 28%;
  top: 26%;
  opacity: 0.3;
}
.about-inner-img img {
  width: 450px;
}
.about-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 10000;
}
.about-text h2 {
  font-size: 28px;
  color: var(--dark);
  margin-bottom: 16px;
}
.about-text p {
  font-size: 18px;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.65;
}

.about-text p strong {
  color: var(--orange);
}
.strng1 {
  color: #000 !important;
  font-weight: 500;
}
.about-text ul {
  margin-bottom: 22px;
}
.about-text ul li {
  font-size: 13.5px;
  color: var(--text);
  padding: 5px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
.about-text ul li::before {
  content: "•";
  color: var(--orange);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.about-img {
  border-radius: 14px;
  overflow: hidden;
  height: 441px;
  width: 500px;
  position: relative;
}
.warehouse-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2a2a3a 0%, #1a1a2a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ========== FOOTER ========== */
footer {
  background: #10101f;
  color: #8888a0;
  padding: 52px 0 0;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./../img/footer.png") right center / cover no-repeat;
  background-position: center;
  pointer-events: none;
  opacity: 0.2;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* Лого футеру */
.footer-logo-wrap {
  margin-bottom: 28px;
}
.footer-logo-svg {
  height: 44px;
  width: auto;
}

.footer-logo-subtitle {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #555570;
  margin-top: 2px;
  font-family: "Montserrat", sans-serif;
  margin-left: 2px;
}

.footer-contacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-contacts a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 13.5px;
  transition: color 0.2s;
  line-height: 1.4;
}
.footer-contacts a:hover {
  color: var(--orange);
}
.footer-contact-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-contact-icon svg {
  width: 16px;
  height: 16px;
}

/* Інфо колонка */
.footer-col h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--white);
  margin-bottom: 14px;
  letter-spacing: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #2a2a42;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col ul li a {
  font-size: 13.5px;
  color: #9090aa;
  transition: color 0.2s;
}
.footer-col ul li a:hover {
  color: var(--orange);
}

/* Графік роботи */
.footer-schedule {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-schedule-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.footer-schedule-day {
  color: #9090aa;
}
.footer-schedule-time {
  color: #c0c0d8;
  font-weight: 500;
}
.footer-schedule-time.off {
  color: var(--orange);
  font-weight: 600;
}

/* Нижній бар футеру */
.footer-bottom-bar {
  margin-top: 40px;
  border-top: 1px solid #22223a;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.footer-copy {
  font-size: 12.5px;
  color: #555570;
}
.footer-policy a {
  font-size: 12.5px;
  color: #555570;
  transition: color 0.2s;
}
.footer-policy a:hover {
  color: var(--orange);
}

/* ========== MOBILE NAV ========== */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 16px 20px;
  gap: 4px;
  position: relative;
  z-index: 200;
}
.mobile-nav a {
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  border-bottom: 1px solid var(--border);
  font-family: "Montserrat", sans-serif;
  display: block;
}
.mobile-nav a:last-child {
  border-bottom: none;
}
.mobile-nav.open {
  display: flex;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1142px) {
  .header-blocks {
    flex-direction: column;
    gap: 15px;
    align-items: unset;
  }
  nav a::after {
    bottom: -5%;
  }
  .header-inner {
    padding: 7px 0;
  }
  .header-search button {
    width: 40px;
  }
}

@media (max-width: 1100px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .rubric-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1067px) {
  .hero-image {
    width: 567px;
  }

  .hero-text h1 {
    font-size: 31px;
  }
}
@media (max-width: 990px) {
  .hero-btns {
    flex-direction: column !important;
  }
  .hero-btns .btn-orange,
  .btn-outline-orange {
    width: 230px;
    align-items: center;
    flex-direction: column !important;
    justify-content: center;
  }
}
@media (max-width: 900px) {
  .main-bg {
    height: 404px;
  }
  /* .hero-image {
    width: 478px;
  } */
  .hero-text h1 {
    font-size: 28px;
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .rubric-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .models-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .about-block {
    grid-template-columns: 1fr;
  }
  .about-img {
    height: 240px;
  }
  .hamburger {
    display: flex;
  }
  nav {
    display: none;
  }
  .header-phones {
    display: none;
  }
  .header-blocks {
    flex-direction: unset !important;
    align-items: center;
  }
}
.simple-content .button,
#simplecheckout_login .button {
  margin: 0px !important;
  background: var(--orange) !important;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 30px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  margin-top: 20px !important;
}
#simplecheckout_button_cart span {
  color: #fff !important;
}
ul.breadcrumb {
  display: flex;
  gap: 10px;
  padding: 50px 0 10px 0;
}
@media (max-width: 516px) {
  .simplecheckout-button-right,
  .right {
    width: 100%;
    text-align: center;
  }
  .simple-content .button {
    width: 100%;
    text-align: center;
    justify-content: center !important;
  }
  .simple-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 768px) {
  nav {
    display: none;
  }

  .hero-text h1 {
    font-size: 31px;
    text-align: left;
  }
  .header-inner {
    padding: 11px 0;
  }
  .hero-btns {
    flex-direction: unset !important;
  }
  .models-section {
    padding-bottom: 0 !important;
  }
  .header-search {
  }

  .hero-inner {
    flex-direction: column;
    padding: 30px 0;
    text-align: center;
    display: block;
  }
  .hero-text {
    position: relative;
    z-index: 1000000000;
  }
  .hero-image {
    /* width: 100%; */
    /* max-width: 360px; */
    margin: 0 auto;
  }
  .main-bg {
    opacity: 0.2;
  }
  .hero-btns {
    /* justify-content: center; */
  }
  .filter-card {
    flex-direction: column;
  }
  .custom-select-wrap {
    min-width: 100%;
  }
  .rubric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .models-grid {
    grid-template-columns: 1fr;
  }
  .why-grid {
    grid-template-columns: 1fr;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .brands-row {
    gap: 12px;
  }
  .section-title-center,
  .section-title-big {
    font-size: 20px;
  }
}
@media (max-width: 646px) {
  /* header {
          top: 58px;
} */
}
@media (max-width: 600px) {
  .about-img {
    width: 100%;
  }

  .form-row {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 571px) {
  .search-bar form select {
    width: 100%;
  }
}

.agree-row {
  align-items: center !important;
}
.agree-row input {
  width: unset !important;
}
.agree-row input[type="checkbox"] {
  width: 16px !important;
  height: 16px;
  accent-color: #ff5b07;
  cursor: pointer;
}
input[type="checkbox"] {
  width: 16px !important;
  height: 16px;
  accent-color: #ff5b07;
  cursor: pointer;
}
@media (max-width: 516px) {
  .header-blocks {
    flex-direction: column !important;
    align-items: flex-end;
  }
  .auth-card {
    width: 100% !important;
  }
  .hero-btns .btn-orange,
  .btn-outline-orange {
    width: 100%;
  }
  .rubric-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .catalog-page-grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .hero-text h1 {
    font-size: 22px;
  }
  header {
    /* top: 85px; */
  }
  .topbar-right {
    flex-wrap: wrap;
    gap: 8px;
  }
  /* .rubric-grid {
    grid-template-columns: repeat(2, 1fr);
  } */
  .product-grid {
    grid-template-columns: 1fr;
  }
  /* .header-search input {
    display: none;
  } */
  .header-search {
    position: absolute;
    /* width: 50px; */
    top: 65px;
    left: 0;
    /* right: 41px; */
    max-width: 100%;
    width: 100%;
  }
  /* .header-search {
    position: relative;
    width: 50px;
  } */
  .hero-top-bg {
    background: #c4cbe247;
    padding: 21px 0;
  }
  /* .header-search.search-open input {
    display: block;
    position: fixed;
    top: 11%;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 100;
    border-radius: 0;
    background-color: #cdd9ff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
    border-radius: 10px;
  } */
}

@media screen and (min-width: 480px) {
  
}
@media (max-width: 371px) {
  header {
    top: 57px;
  }
}
/* ========== PAGES COMMON ========== */
.breadcrumbs {
  padding: 16px 0;
  font-size: 12.5px;
  color: var(--text-light);
}
.breadcrumbs a {
  color: var(--text-light);
  transition: color 0.2s;
}
.breadcrumbs a:hover {
  color: var(--orange);
}
.breadcrumbs span.sep {
  margin: 0 6px;
  color: #bbb;
}
.page-title {
  font-family: "Montserrat", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 24px;
  display: none;
}
.page-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 30px;
  align-items: start;
}

/* ========== SIDEBAR ========== */
.sidebar {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.sidebar-title {
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.sidebar-cats ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-cats ul li a {
  font-size: 13.5px;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  transition: color 0.2s;
}
.sidebar-cats ul li a:hover {
  color: var(--orange);
}
.sidebar-cats ul li a .count {
  font-size: 11px;
  color: var(--text-light);
  background: var(--bg-light);
  padding: 2px 8px;
  border-radius: 20px;
}
.filter-group {
  margin-bottom: 20px;
}
.filter-group h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
}
.filter-group .custom-select-wrap {
  margin-bottom: 8px;
}
.filter-group .custom-select-wrap select {
  padding: 11px 34px 11px 14px;
  font-size: 13px;
}
.btn-filter {
  width: 100%;
  margin-top: 4px;
}

/* ========== CATALOG GRID (no swiper) ========== */
.catalog-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 32px;
}
.catalog-page-grid .product-card {
  height: auto;
}
.catalog-page-grid .product-img {
  height: 180px;
}
.catalog-page-grid .product-img img {
  object-fit: fill;
}
.catalog-page-grid .product-info {
  position: static;
  transform: none;
  background: transparent;
  border-top: none;
  padding: 12px;
}
.catalog-page-grid .product-info h3 {
  height: auto;
  margin-bottom: 6px;
}
.catalog-page-grid .btn-price {
  margin-top: 10px;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.pagination a,
.pagination span {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  border: 1.5px solid var(--border);
  background: var(--white);
  transition: all 0.2s;
}
.pagination a:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.pagination span.current {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

/* ========== PRODUCT PAGE ========== */
.product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.product-gallery {
  background: #eaefff66;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 400px;
}
.product-gallery a {
  width: 100%;
  height: 100%;
}
.product-gallery img {
  max-height: 100%;
  object-fit: contain;
}
.product-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.product-meta h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
}
.product-meta .sku {
  font-size: 13px;
  color: var(--text-light);
}
.product-meta .price {
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--orange);
}
.product-meta .price .old {
  font-size: 16px;
  color: var(--text-light);
  text-decoration: line-through;
  margin-left: 10px;
  font-weight: 500;
}
.product-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.qty-control {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.qty-control button {
  width: 38px;
  height: 42px;
  background: var(--bg-light);
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--dark);
}
.qty-control input {
  width: 50px;
  text-align: center;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
}
.btn-cart {
  padding: 12px 32px;
}
.product-attrs-short {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  font-size: 13px;
}
.product-attrs-short .row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.product-attrs-short .row .label {
  color: var(--text-light);
}
.product-attrs-short .row .val {
  color: var(--dark);
  font-weight: 600;
}

/* Tabs */
.tabs-nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
}
.tabs-nav button {
  padding: 12px 20px;
  font-family: "Montserrat", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-light);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all 0.2s;
}
.tabs-nav button.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.tabs-nav button:hover {
  color: var(--orange);
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
.tab-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
.analogs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.analogs-table th,
.analogs-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.analogs-table th {
  background: var(--bg-light);
  font-weight: 700;
  color: var(--dark);
  font-family: "Montserrat", sans-serif;
  font-size: 12.5px;
}
.analogs-table td {
  color: var(--text);
}
.analogs-table tr:hover td {
  background: #f9f9fc;
}

/* ========== CART PAGE ========== */
.cart-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
  font-size: 14px;
}
.cart-table th {
  text-align: left;
  padding: 14px;
  background: var(--bg-light);
  font-weight: 700;
  color: var(--dark);
  font-family: "Montserrat", sans-serif;
  font-size: 12.5px;
  border-bottom: 2px solid var(--border);
}
.cart-table td {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.cart-product {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cart-product-img {
  width: 70px;
  height: 70px;
  background: #eaefff66;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cart-product-img img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}
.cart-product-info h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 4px;
}
.cart-product-info .sku {
  font-size: 12px;
  color: var(--text-light);
}
.cart-remove {
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: color 0.2s;
}
.cart-remove:hover {
  color: #e2001a;
}
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 30px;
  align-items: start;
}
.cart-sidebar {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}
.cart-sidebar h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 20px;
}
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
}
.cart-summary-row.total {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
  border-top: 2px solid var(--border);
  padding-top: 14px;
  margin-top: 14px;
}
.cart-summary-row.total .price {
  color: var(--orange);
}
.btn-checkout {
  width: 100%;
  margin-top: 16px;
  justify-content: center;
}
.btn-continue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--orange);
  font-weight: 600;
  font-size: 13.5px;
  margin-top: 16px;
  transition: opacity 0.2s;
}
.btn-continue:hover {
  opacity: 0.8;
}
.empty-cart {
  text-align: center;
  padding: 60px 20px;
}
.empty-cart h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  color: var(--dark);
  margin-bottom: 12px;
}
.empty-cart p {
  color: var(--text-light);
  margin-bottom: 20px;
}

/* ========== TEXT PAGE ========== */
.page-content {
  max-width: 900px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text);
}
.page-content h2,
.page-content h3 {
  font-family: "Montserrat", sans-serif;
  color: var(--dark);
  margin: 28px 0 14px;
}
.page-content h2 {
  font-size: 20px;
}
.page-content h3 {
  font-size: 16px;
}
.page-content p {
  margin-bottom: 14px;
}
.page-content ul {
  margin-bottom: 14px;
  padding-left: 20px;
}
.page-content ul li {
  list-style: disc;
  margin-bottom: 6px;
}

/* ========== RUBRIC SHOW MORE ========== */
.rubric-card.rubric-hidden {
  display: none;
}
.rubric-card.rubric-hidden.is-visible {
  display: block;
}

/* ========== MODEL LIST LINKS ========== */
.model-list li a {
  color: var(--text);
  transition: color 0.2s;
}
.model-list li a:hover {
  color: var(--orange);
}

/* ========== AUTH (LOGIN / REGISTER) ========== */
.auth-section {
  padding: 40px 0 80px;
  background: var(--bg-light);
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.auth-card {
  width: 460px;
  margin: 0 auto;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 36px;
  margin-top: 31px;
}
.auth-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 28px;
}
.auth-tabs button {
  flex: 1;
  padding: 12px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-light);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all 0.2s;
}
.auth-tabs button.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 6px;
}
.form-group input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-light);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(240, 123, 28, 0.12);
}
.btn-block {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}
.auth-links {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-light);
}
.auth-links a {
  color: var(--orange);
  font-weight: 600;
}
.auth-links a:hover {
  text-decoration: underline;
}
.auth-form {
  display: none;
}
.auth-form.active {
  display: block;
}

/* ========== CHECKOUT ========== */
.checkout-section {
  padding: 30px 0 80px;
  background: var(--white);
}
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 30px;
  align-items: start;
}
.checkout-form-block {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 20px;
}
.checkout-form-block h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.checkout-form-block h3 .num {
  width: 28px;
  height: 28px;
  background: var(--orange);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-group input::placeholder {
  color: #aaa;
}
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s;
  font-size: 14px;
  color: var(--text);
}
.radio-label:hover {
  border-color: var(--orange);
}
.radio-label input {
  width: 18px;
  height: 18px;
  accent-color: var(--orange);
}
.radio-label strong {
  color: var(--dark);
  font-weight: 600;
}
.checkout-summary {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}
.checkout-summary h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 20px;
}
.checkout-item {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.checkout-item:last-child {
  border-bottom: none;
}
.checkout-item-img {
  width: 56px;
  height: 56px;
  background: #eaefff66;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.checkout-item-img img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.checkout-item-info {
  flex: 1;
}
.checkout-item-info h4 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 2px;
  line-height: 1.35;
}
.checkout-item-info .qty {
  font-size: 12px;
  color: var(--text-light);
}
.checkout-item-price {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--dark);
  white-space: nowrap;
}

/* ========== RESPONSIVE PAGES ========== */
@media (max-width: 1100px) {
  .page-layout {
    grid-template-columns: 1fr 240px;
  }
  .catalog-page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-layout {
    grid-template-columns: 1fr;
  }
  .cart-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .page-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    order: -1;
  }
}
@media only screen and (max-width: 1000px) {
  .simplecheckout-cart col.model,
  .simplecheckout-cart th.model,
  .simplecheckout-cart td.model {
    display: unset !important;
  }
}
@media (max-width: 768px) {
  .catalog-page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cart-table thead {
    display: none;
  }
  .cart-table tr {
    display: block;
    margin-bottom: 16px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 12px;
  }
  .cart-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
    padding: 8px 0;
  }
  .cart-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--dark);
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
  }
}
@media only screen and (max-width: 640px) {
  .simplecheckout-cart col.image,
  .simplecheckout-cart th.image,
  .simplecheckout-cart td.image,
  .simplecheckout-cart col.model,
  .simplecheckout-cart th.model,
  .simplecheckout-cart td.model,
  .simplecheckout-cart col.price,
  .simplecheckout-cart th.price,
  .simplecheckout-cart td.price,
  .simplecheckout-cart td.quantity [data-onclick*="increase"],
  .simplecheckout-cart td.quantity [data-onclick*="decrease"] {
    display: unset !important;
  }
}

/* ===== Account & Success pages styling ===== */
[id^="account-"],
#common-success {
  padding: 30px 0 60px;
  background: #fff;
}
[id^="account-"] .container,
#common-success .container {
  max-width: 1200px;
}
[id^="account-"] h1,
#common-success h1 {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 20px;
}
[id^="account-"] .breadcrumb,
#common-success .breadcrumb {
  display: none;
}
[id^="account-"] .form-horizontal .form-group {
  margin-bottom: 16px;
}
[id^="account-"] .form-horizontal .control-label {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 6px;
  display: block;
  text-align: left;
  padding: 0;
}
[id^="account-"] .form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d8d8e8;
  border-radius: 8px;
  font-size: 14px;
  background: #fafaff;
  height: auto;
  box-shadow: none;
}
[id^="account-"] .form-control:focus {
  border-color: #ff6b00;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
  background: #fff;
}
[id^="account-"] .btn-primary,
[id^="account-"] .btn-info {
  background: #ff6b00;
  border-color: #ff6b00;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  border-width: 1px;
  border-style: solid;
}
[id^="account-"] .btn-primary:hover,
[id^="account-"] .btn-info:hover {
  background: #e55f00;
  border-color: #e55f00;
}
[id^="account-"] .btn-default {
  background: #f4f4f8;
  border: 1px solid #e8e8f0;
  color: #1a1a2e;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
}
[id^="account-"] .btn-default:hover {
  background: #e8e8f0;
}
[id^="account-"] .table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
[id^="account-"] .table thead th {
  background: #f8f8fc;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #e8e8f0;
  font-size: 13px;
  color: #1a1a2e;
}
[id^="account-"] .table tbody td {
  padding: 12px;
  border-bottom: 1px solid #e8e8f0;
  font-size: 14px;
  color: #333;
}
[id^="account-"] .table tbody tr:hover {
  background: #fafaff;
}
[id^="account-"] .panel {
  background: #fff;
  border: 1px solid #e8e8f0;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: none;
}
[id^="account-"] .panel-heading {
  background: #f8f8fc;
  padding: 16px 20px;
  border-bottom: 1px solid #e8e8f0;
  border-radius: 12px 12px 0 0;
}
[id^="account-"] .panel-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
}
[id^="account-"] .panel-body {
  padding: 20px;
}
[id^="account-"] .list-unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
}
[id^="account-"] .list-unstyled li a {
  display: block;
  padding: 8px 0;
  color: #444;
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f5;
}
[id^="account-"] .list-unstyled li a:hover {
  color: #ff6b00;
}
[id^="account-"] .well {
  background: #f8f8fc;
  border: 1px solid #e8e8f0;
  border-radius: 10px;
  padding: 20px;
}
[id^="account-"] legend {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  border-bottom: 1px solid #e8e8f0;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
[id^="account-"] .text-danger {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 4px;
}
[id^="account-"] .alert-success {
  background: #d4edda;
  color: #155724;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 15px;
}
[id^="account-"] .alert-danger {
  background: #f8d7da;
  color: #721c24;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 15px;
}
[id^="account-"] .buttons {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Account breadcrumbs override */
[id^="account-"] .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  background: none;
  font-size: 13px;
}
[id^="account-"] .breadcrumb li {
  display: flex;
  align-items: center;
}
[id^="account-"] .breadcrumb li + li::before {
  content: "›";
  margin: 0 8px;
  color: #7a7a90;
}
[id^="account-"] .breadcrumb a {
  color: #ff6b00;
  text-decoration: none;
}
[id^="account-"] .breadcrumb li:last-child {
  color: #1a1a2e;
  font-weight: 600;
}
/* Account forms grid override */
[id^="account-"] .form-horizontal .form-group::before,
[id^="account-"] .form-horizontal .form-group::after {
  display: none;
}
[id^="account-"] .form-horizontal .col-sm-2,
[id^="account-"] .form-horizontal .col-sm-10,
[id^="account-"] .form-horizontal .col-sm-4,
[id^="account-"] .form-horizontal .col-sm-6,
[id^="account-"] .form-horizontal .col-sm-8 {
  width: 100%;
  float: none;
  padding-left: 0;
  padding-right: 0;
}

/* ===== Account pages buttons & borders fix ===== */
[id^="account-"] .btn-primary,
[id^="account-"] .btn-info,
[id^="account-"] .btn-danger {
  background: #ff6b00 !important;
  border-color: #ff6b00 !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-width: 1px !important;
  border-style: solid !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
[id^="account-"] .btn-primary:hover,
[id^="account-"] .btn-info:hover,
[id^="account-"] .btn-danger:hover {
  background: #e55f00 !important;
  border-color: #e55f00 !important;
}

[id^="account-"] .btn-default {
  background: #f4f4f8 !important;
  border-color: #e8e8f0 !important;
  color: #1a1a2e !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-width: 1px !important;
  border-style: solid !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
[id^="account-"] .btn-default:hover {
  background: #e8e8f0 !important;
}

/* Remove heavy table borders */
[id^="account-"] .table-bordered,
[id^="account-"] .table-bordered > thead > tr > th,
[id^="account-"] .table-bordered > tbody > tr > td,
[id^="account-"] .table-bordered > tbody > tr > th,
[id^="account-"] .table-bordered > tfoot > tr > td {
  border-color: #e8e8f0 !important;
}
[id^="account-"] .table-bordered > thead > tr > th {
  border-bottom-width: 2px !important;
}

/* Form controls focus */
[id^="account-"] .form-control:focus {
  border-color: #ff6b00 !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1) !important;
}

/* Panel fixes */
[id^="account-"] .panel {
  box-shadow: none !important;
  border-color: #e8e8f0 !important;
}
[id^="account-"] .panel-heading {
  background: #f8f8fc !important;
  border-color: #e8e8f0 !important;
}

/* Well / list group */
[id^="account-"] .well {
  background: #f8f8fc !important;
  border-color: #e8e8f0 !important;
  box-shadow: none !important;
}
[id^="account-"] .list-group-item {
  border-color: #e8e8f0 !important;
}

/* ===== Full account-content styling ===== */
[id^="account-"] #column-right {
  display: none !important;
}

[id^="account-"] .account-content fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

[id^="account-"] .account-content .btn,
[id^="account-"] .account-content button[type="submit"],
[id^="account-"] .account-content input[type="submit"] {
  background: #ff6b00;
  border: 1px solid #ff6b00;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  display: inline-block;
  text-decoration: none;
  line-height: 1.4;
  box-shadow: none;
  text-shadow: none;
}

[id^="account-"] .account-content .btn:hover,
[id^="account-"] .account-content button[type="submit"]:hover,
[id^="account-"] .account-content input[type="submit"]:hover {
  background: #e55f00;
  border-color: #e55f00;
  color: #fff;
}

[id^="account-"] .account-content .btn-default {
  background: #f4f4f8;
  border-color: #e8e8f0;
  color: #1a1a2e;
}

[id^="account-"] .account-content .btn-default:hover {
  background: #e8e8f0;
  border-color: #d8d8e8;
  color: #1a1a2e;
}

[id^="account-"] .account-content .btn-danger {
  background: #e74c3c;
  border-color: #e74c3c;
}

[id^="account-"] .account-content .btn-danger:hover {
  background: #c0392b;
  border-color: #c0392b;
}

[id^="account-"] .account-content input[type="text"],
[id^="account-"] .account-content input[type="email"],
[id^="account-"] .account-content input[type="tel"],
[id^="account-"] .account-content input[type="password"],
[id^="account-"] .account-content select,
[id^="account-"] .account-content textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d8d8e8;
  border-radius: 8px;
  font-size: 14px;
  background: #fafaff;
  color: #1a1a2e;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: none;
}

[id^="account-"] .account-content input:focus,
[id^="account-"] .account-content select:focus,
[id^="account-"] .account-content textarea:focus {
  outline: none;
  border-color: #ff6b00;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
  background: #fff;
}

[id^="account-"] .account-content a {
  color: #ff6b00;
  text-decoration: none;
}

[id^="account-"] .account-content a:hover {
  text-decoration: underline;
}

[id^="account-"] .account-content .table {
  width: 100%;
  border-collapse: collapse;
}
.btn-submit {
  text-align: center !important;
  justify-content: center !important;
}
[id^="account-"] .account-content .table thead th {
  background: #f8f8fc;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #e8e8f0;
  font-size: 13px;
}

[id^="account-"] .account-content .table tbody td {
  padding: 12px;
  border-bottom: 1px solid #e8e8f0;
}

[id^="account-"] .account-content .table-bordered,
[id^="account-"] .account-content .table-bordered > thead > tr > th,
[id^="account-"] .account-content .table-bordered > tbody > tr > td,
[id^="account-"] .account-content .table-bordered > tfoot > tr > td {
  border-color: #e8e8f0;
}

[id^="account-"] .account-content .pagination {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  flex-wrap: wrap;
}

[id^="account-"] .account-content .pagination li a,
[id^="account-"] .account-content .pagination li span {
  display: block;
  padding: 8px 14px;
  border: 1px solid #e8e8f0;
  border-radius: 6px;
  color: #444;
  text-decoration: none;
  font-size: 14px;
  background: #fff;
}

[id^="account-"] .account-content .pagination li.active span {
  background: #ff6b00;
  border-color: #ff6b00;
  color: #fff;
}

[id^="account-"] .account-content .alert-success {
  background: #d4edda;
  color: #155724;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 15px;
  border: none;
}
.pagination ul li:nth-child(1) {
  order: 1;
}
.pagination ul li:nth-child(2) {
  order: 1;
}
.pagination ul li:nth-child(3) {
  order: 1;
}
/* .pagination ul li:nth-child(3) {
order: 1;
} */
.pagination li:nth-child(4) a {
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* малюємо стрілку вліво */
.pagination li:nth-child(4) a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-left: 1.5px solid var(--dark);
  border-bottom: 1.5px solid var(--dark);
  transform: rotate(45deg);
}
.pagination li:nth-child(3) a {
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination li:nth-child(3) a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #00112c;
  border-top: 1.5px solid #00112c;
  transform: rotate(45deg);
}
[id^="account-"] .account-content .alert-danger {
  background: #f8d7da;
  color: #721c24;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 15px;
  border: none;
}

[id^="account-"] .account-content .text-danger {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 4px;
}

/* ===== Unified account page styles (using .account-page class) ===== */
.account-page .account-content fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.account-page .account-content .btn,
.account-page .account-content button[type="submit"],
.account-page .account-content input[type="submit"] {
  background: #ff6b00;
  border: 1px solid #ff6b00;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  display: inline-block;
  text-decoration: none;
  line-height: 1.4;
  box-shadow: none;
  text-shadow: none;
}

.account-page .account-content .btn:hover,
.account-page .account-content button[type="submit"]:hover,
.account-page .account-content input[type="submit"]:hover {
  background: #e55f00;
  border-color: #e55f00;
  color: #fff;
}

.account-page .account-content .btn-default {
  background: #f4f4f8;
  border-color: #e8e8f0;
  color: #1a1a2e;
}

.account-page .account-content .btn-default:hover {
  background: #e8e8f0;
  border-color: #d8d8e8;
  color: #1a1a2e;
}

.account-page .account-content .btn-danger {
  background: #e74c3c;
  border-color: #e74c3c;
}

.account-page .account-content .btn-danger:hover {
  background: #c0392b;
  border-color: #c0392b;
}

.account-page .account-content input[type="text"],
.account-page .account-content input[type="email"],
.account-page .account-content input[type="tel"],
.account-page .account-content input[type="password"],
.account-page .account-content select,
.account-page .account-content textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d8d8e8;
  border-radius: 8px;
  font-size: 14px;
  background: #fafaff;
  color: #1a1a2e;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: none;
}

.account-page .account-content input:focus,
.account-page .account-content select:focus,
.account-page .account-content textarea:focus {
  outline: none;
  border-color: #ff6b00;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
  background: #fff;
}

.account-page .account-content a {
  color: #ff6b00;
  text-decoration: none;
}

.account-page .account-content a:hover {
  text-decoration: underline;
}

.account-page .account-content .table {
  width: 100%;
  border-collapse: collapse;
}

.account-page .account-content .table thead th {
  background: #f8f8fc;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #e8e8f0;
  font-size: 13px;
}

.account-page .account-content .table tbody td {
  padding: 12px;
  border-bottom: 1px solid #e8e8f0;
}

.account-page .account-content .table-bordered,
.account-page .account-content .table-bordered > thead > tr > th,
.account-page .account-content .table-bordered > tbody > tr > td,
.account-page .account-content .table-bordered > tfoot > tr > td {
  border-color: #e8e8f0;
}

.account-page .account-content .pagination {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  flex-wrap: wrap;
}

.account-page .account-content .pagination li a,
.account-page .account-content .pagination li span {
  display: block;
  padding: 8px 14px;
  border: 1px solid #e8e8f0;
  border-radius: 6px;
  color: #444;
  text-decoration: none;
  font-size: 14px;
  background: #fff;
}

.account-page .account-content .pagination li.active span {
  background: #ff6b00;
  border-color: #ff6b00;
  color: #fff;
}

.account-page .account-content .alert-success {
  background: #d4edda;
  color: #155724;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 15px;
  border: none;
}

.account-page .account-content .alert-danger {
  background: #f8d7da;
  color: #721c24;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 15px;
  border: none;
}

.account-page .account-content .text-danger {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 4px;
}

.account-page #column-right {
  display: none !important;
}

/* ===== Checkout Section ===== */
.checkout-section .checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 30px;
  align-items: start;
}

@media (max-width: 991px) {
  .checkout-section .checkout-layout {
    grid-template-columns: 1fr;
  }
}

.checkout-section .checkout-form-block {
  background: #fff;
  border: 1px solid #e8e8f0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}

.checkout-section .checkout-form-block h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e8f0;
}

.checkout-section .checkout-collapse {
  display: block !important;
}

.checkout-section .checkout-collapse .panel-body {
  padding: 0;
}

.checkout-section .checkout-summary {
  background: #fff;
  border: 1px solid #e8e8f0;
  border-radius: 12px;
  padding: 24px;
  height: fit-content;
  position: sticky;
  top: 20px;
}

.checkout-section .checkout-summary h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e8f0;
}

/* Hide accordion headings generated by standard JS */
.checkout-section .panel-heading,
.checkout-section .panel-title.accordion-toggle,
.checkout-section .panel-title > a[data-toggle="collapse"] {
  display: none !important;
}

/* Form elements inside checkout */
.checkout-section input[type="text"],
.checkout-section input[type="email"],
.checkout-section input[type="tel"],
.checkout-section input[type="password"],
.checkout-section select,
.checkout-section textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d8d8e8;
  border-radius: 8px;
  font-size: 14px;
  background: #fafaff;
  color: #1a1a2e;
  box-sizing: border-box;
  margin-bottom: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.checkout-section input:focus,
.checkout-section select:focus,
.checkout-section textarea:focus {
  outline: none;
  border-color: #ff6b00;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
  background: #fff;
}

.checkout-section label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #444;
  margin-bottom: 4px;
}

.checkout-section .btn-primary,
.checkout-section .btn-orange,
.checkout-section button[type="submit"] {
  background: #ff6b00;
  border: 1px solid #ff6b00;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  display: inline-block;
  text-decoration: none;
  line-height: 1.4;
  box-shadow: none;
}

.checkout-section .btn-primary:hover,
.checkout-section .btn-orange:hover,
.checkout-section button[type="submit"]:hover {
  background: #e55f00;
  border-color: #e55f00;
}

.checkout-section input[type="radio"],
.checkout-section input[type="checkbox"] {
  margin-right: 8px;
  width: auto;
}

.checkout-section .radio label,
.checkout-section .checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  font-size: 14px;
  cursor: pointer;
}

.checkout-section .table-responsive {
  overflow-x: auto;
}

.checkout-section .table {
  width: 100%;
  border-collapse: collapse;
}

.checkout-section .table td,
.checkout-section .table th {
  padding: 10px;
  border-bottom: 1px solid #e8e8f0;
  font-size: 14px;
}

.checkout-section .table thead th {
  font-weight: 600;
  background: #f8f8fc;
}

.checkout-section .form-group {
  margin-bottom: 12px;
}

.checkout-section .text-danger {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 4px;
}

.checkout-section .alert {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 15px;
  font-size: 14px;
}

.checkout-section .alert-danger {
  background: #f8d7da;
  color: #721c24;
  border: none;
}

.checkout-section .alert-warning {
  background: #fff3cd;
  color: #856404;
  border: none;
}

.checkout-section .alert-success {
  background: #d4edda;
  color: #155724;
  border: none;
}

.checkout-section .buttons {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.checkout-section .pull-right {
  float: right;
}

.checkout-section .pull-left {
  float: left;
}

.checkout-section .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive */
@media (max-width: 767px) {
  .checkout-section .checkout-form-block,
  .checkout-section .checkout-summary {
    padding: 16px;
  }
  .checkout-section .checkout-summary {
    position: static;
  }
}

/* Magnific Popup overlay above menu + smooth fade */
.mfp-bg {
  z-index: 10000002 !important;
}
.mfp-wrap {
  z-index: 10000003 !important;
}
.mfp-fade.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}
/* ================================
   CHECKOUT / SIMPLECHECKOUT STYLE
================================ */

.simple-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 15px 60px;
  color: #070b28;
}

.simple-content h1,
.simple-content .heading-title,
.simplecheckout h1 {
  margin: 8px 0 22px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  font-weight: 700;
  color: #070b28;
}

.simplecheckout {
  width: 100%;
}

.simplecheckout-block {
  margin-bottom: 24px;
  border: 1px solid #e6eaf3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(7, 11, 40, 0.08);
  overflow: hidden;
}

/* Повідомлення про помилку */
.simplecheckout .alert,
.simplecheckout .alert-danger,
.simplecheckout .simplecheckout-warning-block {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 91, 7, 0.35);
  border-left: 4px solid #ff5b07;
  border-radius: 10px;
  background: rgba(255, 91, 7, 0.06);
  color: #070b28;
  font-size: 15px;
  line-height: 1.45;
}

/* Обгортка таблиці */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid #e6eaf3;
  background: #fff;
  box-shadow: 0 8px 28px rgba(7, 11, 40, 0.07);
}

/* Таблиця корзини */
.simplecheckout-cart {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: #fff;
  color: #070b28;
}

.simplecheckout-cart thead {
  background: #f3f6fb;
}

.simplecheckout-cart th {
  padding: 16px 12px;
  font-size: 14px;
  font-weight: 700;
  color: #070b28;
  text-align: left;
  border-bottom: 1px solid #e2e7f0;
  white-space: nowrap;
}

.simplecheckout-cart td {
  padding: 16px 12px;
  font-size: 14px;
  color: #070b28;
  border-bottom: 1px solid #eef1f6;
  vertical-align: middle;
}

.simplecheckout-cart tbody tr {
  transition: background 0.25s ease;
}

.simplecheckout-cart tbody tr:hover {
  background: #fafbff;
}

.simplecheckout-cart td:first-child,
.simplecheckout-cart th:first-child {
  padding-left: 18px;
}

.simplecheckout-cart td:last-child,
.simplecheckout-cart th:last-child {
  padding-right: 18px;
  text-align: right;
}

/* Назва товару */
.simplecheckout-cart td a,
.simplecheckout-cart .name a {
  color: #070b28;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.simplecheckout-cart td a:hover,
.simplecheckout-cart .name a:hover {
  color: #ff5b07;
}

/* Ціна */
.simplecheckout-cart td b,
.simplecheckout-cart strong {
  color: #070b28;
  font-weight: 700;
}

/* Кількість */
.simplecheckout-cart input[type="text"],
.simplecheckout-cart input[type="number"] {
  width: 64px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #dce2ec;
  border-radius: 8px;
  background: #f6f8fc;
  color: #070b28;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.simplecheckout-cart input[type="text"]:focus,
.simplecheckout-cart input[type="number"]:focus {
  border-color: #ff5b07;
  box-shadow: 0 0 0 3px rgba(255, 91, 7, 0.14);
}

/* Кнопки + - оновити/видалити */
.simplecheckout-cart button,
.simplecheckout-cart input[type="button"],
.simplecheckout-cart input[type="submit"] {
  min-width: 30px;
  height: 30px;
  margin: 0 2px;
  border: none;
  border-radius: 8px;
  background: #ff5b07;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.simplecheckout-cart button:hover,
.simplecheckout-cart input[type="button"]:hover,
.simplecheckout-cart input[type="submit"]:hover {
  background: #e94f00;
  box-shadow: 0 6px 16px rgba(255, 91, 7, 0.25);
  transform: translateY(-1px);
}

/* Рядки з підсумками */
.simplecheckout-cart tfoot td,
.simplecheckout-cart tbody tr:last-child td {
  background: #fff;
}

.simplecheckout-cart td[style*="text-align:right"],
.simplecheckout-cart tfoot td {
  font-size: 15px;
}

/* Купон / сертифікат */
.simplecheckout-cart input[name*="coupon"],
.simplecheckout-cart input[name*="voucher"],
.simplecheckout-cart input[name*="reward"],
.simplecheckout-cart input[type="text"]:not([size]) {
  max-width: 180px;
}

/* Загальний блок підсумків, якщо він окремо */
.simplecheckout-cart-total {
  margin-top: 1px;
  padding: 18px 20px;
  border: 1px solid #e6eaf3;
  border-radius: 14px;
  background: #f8fafde;
  color: #070b28;
  box-shadow: 0 8px 28px rgba(7, 11, 40, 0.06);
}
.simplecheckout-cart-total:nth-child(5) {
  display: none;
}
.simplecheckout-cart-total:nth-child(6) {
  display: none;
}

.simplecheckout-cart-total b,
.simplecheckout-cart-total strong {
  color: #070b28;
}

.simplecheckout-cart-total .price,
.simplecheckout-cart-total span:last-child {
  color: #ff5b07;
  font-weight: 700;
}

/* Кнопка оновити */
.simplecheckout-cart a,
.simplecheckout-cart .button,
.simplecheckout-cart .btn {
  color: #070b28;
  text-decoration: none;
}

.simplecheckout-cart .btn,
.simplecheckout-cart .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* min-height: 38px;
  padding: 10px 18px; */
  border-radius: 10px;
  background: #ff5b07;
  color: #fff;
  font-weight: 700;
  transition: 0.25s ease;
}

.simplecheckout-cart .btn:hover,
.simplecheckout-cart .button:hover {
  background: #e94f00;
}

/* ================================
   ADAPTIVE
================================ */

@media (max-width: 992px) {
  .simple-content {
    padding-top: 18px;
  }

  .simplecheckout-cart {
    min-width: 700px;
  }

  .simplecheckout-cart th,
  .simplecheckout-cart td {
    padding: 14px 10px;
  }
}
/* =====================================
   FIX CHECKOUT ADAPTIVE MOBILE
===================================== */

.simple-content,
.simplecheckout,
.table-responsive,
.simplecheckout-cart,
.simplecheckout-cart * {
  box-sizing: border-box;
}
#simplecheckout_cart .form-control {
  display: inline-block !important;
  min-width: 50px;
  padding: 7px;
  border: unset;
  border-radius: 6px;
  font-size: 13.5px;
  opacity: unset !important;
  color: #777787 !important;
  background: #dde3f575 !important;
}
.simplecheckout-cart-total .price,
.simplecheckout-cart-total span:last-child {
  color: #ff5b07;
  font-weight: 700;
  display: flex !important;
  justify-content: end !important;
  gap: 5px !important;
}
@media (max-width: 992px) {
  .simple-content {
    width: 100%;
    max-width: 100%;
    padding: 14px 12px 50px;
    overflow-x: hidden;
  }

  .simple-content h1,
  .simplecheckout h1 {
    margin-bottom: 20px;
    font-size: 30px;
    line-height: 1.15;
  }

  .simplecheckout-block {
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }

  .table-responsive {
    width: 100%;
    overflow: visible !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .simplecheckout-cart {
    width: 100% !important;
    min-width: 0 !important;
    display: block;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
  }

  .simplecheckout-cart thead {
    display: none !important;
  }

  .simplecheckout-cart tbody {
    display: block;
    width: 100%;
  }

  .simplecheckout-cart tr {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid #dfe5f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(7, 11, 40, 0.08);
  }

  .simplecheckout-cart td {
    width: auto !important;
    min-width: 0;
    display: block !important;
    padding: 13px 8px !important;
    border: none !important;
    border-bottom: 1px solid #eef1f6 !important;
    text-align: left !important;
    font-size: 14px;
    line-height: 1.35;
    color: #070b28;
    word-break: break-word;
  }

  .simplecheckout-cart td::before {
    display: block;
    margin-bottom: 7px;
    color: #7b8294;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
  }

  .simplecheckout-cart td:nth-child(1)::before {
    content: "Фото";
  }

  .simplecheckout-cart td:nth-child(2)::before {
    content: "Товар";
  }

  .simplecheckout-cart td:nth-child(3)::before {
    content: "Модель";
  }

  .simplecheckout-cart td:nth-child(4)::before {
    content: "Кільк.";
  }

  .simplecheckout-cart td:nth-child(5)::before {
    content: "Ціна";
  }

  .simplecheckout-cart td:nth-child(6)::before {
    content: "Разом";
  }

  .simplecheckout-cart td:nth-child(1),
  .simplecheckout-cart td:nth-child(2),
  .simplecheckout-cart td:nth-child(4) {
    grid-column: 1 / -1;
  }

  .simplecheckout-cart td:nth-child(5),
  .simplecheckout-cart td:nth-child(6) {
    border-bottom: none !important;
  }

  .simplecheckout-cart td:nth-child(6) {
    text-align: right !important;
  }

  .simplecheckout-cart td:nth-child(6)::before {
    text-align: right;
  }

  .simplecheckout-cart td:first-child:empty {
    display: none !important;
  }

  .simplecheckout-cart img {
    max-width: 90px;
    height: auto;
    display: block;
    border-radius: 10px;
  }

  .simplecheckout-cart input[type="text"],
  .simplecheckout-cart input[type="number"] {
    width: 72px !important;
    max-width: 72px;
    height: 38px;
    margin: 0 4px;
    padding: 0 10px;
    border: 1px solid #dfe5f0;
    border-radius: 10px;
    background: #f6f8fc;
    color: #070b28;
    font-size: 14px;
    text-align: center;
  }

  .simplecheckout-cart button,
  .simplecheckout-cart input[type="button"],
  .simplecheckout-cart input[type="submit"] {
    width: 38px;
    min-width: 38px;
    height: 38px;
    margin: 3px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: #ff5b07;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }

  .simplecheckout-cart button:hover,
  .simplecheckout-cart input[type="button"]:hover,
  .simplecheckout-cart input[type="submit"]:hover {
    background: #e94f00;
  }

  /* Рядки з Разом / Доставка / Купон */
  .simplecheckout-cart tr:has(td[colspan]) {
    display: block;
    padding: 16px;
  }

  .simplecheckout-cart tr:has(td[colspan]) td {
    display: block !important;
    width: 100% !important;
    padding: 8px 0 !important;
    text-align: right !important;
    border-bottom: none !important;
  }

  .simplecheckout-cart tr:has(td[colspan]) td::before {
    content: none !important;
  }

  .simplecheckout-cart tr:has(td[colspan]) input[type="text"] {
    width: 100% !important;
    max-width: 220px;
    margin-top: 8px;
  }
}
@media only screen and (max-width: 640px) {
  .simplecheckout-cart td.name div.image {
    display: none !important;
  }
}
@media (max-width: 520px) {
  .simple-content {
    padding-left: 10px;
    padding-right: 10px;
  }

  .simple-content h1,
  .simplecheckout h1 {
    font-size: 26px;
  }

  .simplecheckout-cart tr {
    grid-template-columns: 1fr;
    padding: 14px;
    border-radius: 14px;
  }

  .simplecheckout-cart td {
    padding: 12px 0 !important;
  }

  .simplecheckout-cart td:nth-child(5),
  .simplecheckout-cart td:nth-child(6) {
    text-align: left !important;
    border-bottom: 1px solid #eef1f6 !important;
  }

  .simplecheckout-cart td:nth-child(6)::before {
    text-align: left;
  }

  .simplecheckout-cart td:last-child {
    border-bottom: none !important;
  }

  .simplecheckout-cart input[type="text"],
  .simplecheckout-cart input[type="number"] {
    width: 68px !important;
    height: 36px;
  }

  .simplecheckout-cart button,
  .simplecheckout-cart input[type="button"],
  .simplecheckout-cart input[type="submit"] {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }
}

@media (max-width: 380px) {
  .simple-content h1,
  .simplecheckout h1 {
    font-size: 24px;
  }

  .simplecheckout-cart tr {
    padding: 12px;
  }

  .simplecheckout-cart input[type="text"],
  .simplecheckout-cart input[type="number"] {
    width: 60px !important;
    margin: 0 2px;
  }

  .simplecheckout-cart button,
  .simplecheckout-cart input[type="button"],
  .simplecheckout-cart input[type="submit"] {
    width: 34px;
    min-width: 34px;
    height: 34px;
    margin: 2px;
  }
}
/* @media (max-width: 768px) {
  .simple-content {
    padding: 16px 12px 50px;
  }

  .simplecheckout .alert,
  .simplecheckout .alert-danger,
  .simplecheckout .simplecheckout-warning-block {
    padding: 12px 14px;
    font-size: 14px;
  }

  .table-responsive {
    border: none;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }

  .simplecheckout-cart {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 12px;
    background: transparent;
  }

  .simplecheckout-cart thead {
    display: none;
  }

  .simplecheckout-cart tbody,
  .simplecheckout-cart tr,
  .simplecheckout-cart td {
    display: block;
    width: 100%;
  }

  .simplecheckout-cart tr {
    padding: 14px;
    border: 1px solid #e6eaf3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(7, 11, 40, 0.08);
  }

  .simplecheckout-cart td {
    padding: 10px 0;
    border-bottom: 1px solid #eef1f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: right;
  }

  .simplecheckout-cart td:last-child {
    border-bottom: none;
    text-align: right;
  }

  .simplecheckout-cart td::before {
    content: "";
    flex: 0 0 auto;
    color: #7a8191;
    font-weight: 600;
    text-align: left;
  }

  .simplecheckout-cart td:nth-child(1)::before {
    content: "Фото";
  }

  .simplecheckout-cart td:nth-child(2)::before {
    content: "Товар";
  }

  .simplecheckout-cart td:nth-child(3)::before {
    content: "Модель";
  }

  .simplecheckout-cart td:nth-child(4)::before {
    content: "Кільк.";
  }

  .simplecheckout-cart td:nth-child(5)::before {
    content: "Ціна";
  }

  .simplecheckout-cart td:nth-child(6)::before {
    content: "Разом";
  }

  .simplecheckout-cart input[type="text"],
  .simplecheckout-cart input[type="number"] {
    width: 70px;
  }
} */

@media (max-width: 480px) {
  .simple-content h1,
  .simplecheckout h1 {
    font-size: 26px;
  }
  .breadcrumbs {
    padding-top: 30px !important;
  }

  .simplecheckout-cart tr {
    padding: 12px;
  }

  .simplecheckout-cart td {
    font-size: 13px;
    gap: 10px;
  }

  .simplecheckout-cart td:nth-child(2) {
    align-items: flex-start;
  }

  .simplecheckout-cart td:nth-child(2)::before {
    padding-top: 2px;
  }

  .simplecheckout-cart input[type="text"],
  .simplecheckout-cart input[type="number"] {
    width: 58px;
    height: 32px;
  }

  .simplecheckout-cart button,
  .simplecheckout-cart input[type="button"],
  .simplecheckout-cart input[type="submit"] {
    min-width: 28px;
    height: 28px;
    border-radius: 7px;
  }
}

@media only screen and (max-width: 420px) {
  #total_shipping span:first-child {
    max-width: 100% !important;
    display: inline-block;
  }
}

/* =====================================
   CHECKOUT FORM BLOCKS — SAFE VERSION
   Не зачіпає #simplecheckout_cart
===================================== */

.simplecheckout,
.simplecheckout * {
  box-sizing: border-box;
}

/* Основна сітка checkout */
.simplecheckout-step {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* Колонки після корзини */
.simplecheckout-left-column,
.simplecheckout-right-column {
  width: 100% !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* На великих екранах форми стають у 2 колонки */
@media (min-width: 1101px) {
  .simplecheckout-left-column,
  .simplecheckout-right-column {
    width: 100% !important;
  }

  .simplecheckout-step {
    grid-template-columns: 1fr;
  }

  .simplecheckout-left-column,
  .simplecheckout-right-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* Карточки тільки для форми, не для корзини */
#simplecheckout_customer,
#simplecheckout_shipping_address,
#simplecheckout_shipping,
#simplecheckout_payment {
  width: 100%;
  margin: 0 0 22px;
  border: 1px solid #dfe5f0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(7, 11, 40, 0.08);
}

/* Заголовки тільки в блоках форми */
#simplecheckout_customer .checkout-heading,
#simplecheckout_customer .panel-heading,
#simplecheckout_shipping_address .checkout-heading,
#simplecheckout_shipping_address .panel-heading,
#simplecheckout_shipping .checkout-heading,
#simplecheckout_shipping .panel-heading,
#simplecheckout_payment .checkout-heading,
#simplecheckout_payment .panel-heading {
  position: relative;
  min-height: 52px;
  padding: 16px 20px 16px 24px !important;
  border: none !important;
  border-bottom: 1px solid #edf1f7 !important;
  background: #f6f8fc !important;
  color: #070b28 !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

#simplecheckout_customer .checkout-heading::before,
#simplecheckout_customer .panel-heading::before,
#simplecheckout_shipping_address .checkout-heading::before,
#simplecheckout_shipping_address .panel-heading::before,
#simplecheckout_shipping .checkout-heading::before,
#simplecheckout_shipping .panel-heading::before,
#simplecheckout_payment .checkout-heading::before,
#simplecheckout_payment .panel-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: -1px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #ff5b07;
}

/* Контент тільки у формах */
#simplecheckout_customer .simplecheckout-block-content,
#simplecheckout_shipping_address .simplecheckout-block-content,
#simplecheckout_shipping .simplecheckout-block-content,
#simplecheckout_payment .simplecheckout-block-content {
  padding: 20px !important;
  background: #fff;
}

/* Прибираємо старі рамки тільки в формах */
#simplecheckout_customer fieldset,
#simplecheckout_shipping_address fieldset,
#simplecheckout_shipping fieldset,
#simplecheckout_payment fieldset {
  margin: 0;
  padding: 0;
  border: none !important;
  min-width: 0;
}

#simplecheckout_customer legend,
#simplecheckout_shipping_address legend,
#simplecheckout_shipping legend,
#simplecheckout_payment legend {
  display: none;
}

/* Labels тільки в формах */
#simplecheckout_customer label,
#simplecheckout_customer .control-label,
#simplecheckout_shipping_address label,
#simplecheckout_shipping_address .control-label,
#simplecheckout_shipping label,
#simplecheckout_shipping .control-label,
#simplecheckout_payment label,
#simplecheckout_payment .control-label {
  display: flex !important;
  align-items: center;
  margin-bottom: 7px;
  color: #070b28;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
#simplecheckout_shipping label {
  margin-bottom: 0 !important;
}
#simplecheckout_payment label {
  margin-bottom: 0 !important;
}
/* Інпути тільки в формах, НЕ в корзині */
#simplecheckout_customer input[type="text"],
#simplecheckout_customer input[type="email"],
#simplecheckout_customer input[type="tel"],
#simplecheckout_customer input[type="password"],
#simplecheckout_customer select,
#simplecheckout_customer textarea,
#simplecheckout_shipping_address input[type="text"],
#simplecheckout_shipping_address input[type="email"],
#simplecheckout_shipping_address input[type="tel"],
#simplecheckout_shipping_address input[type="password"],
#simplecheckout_shipping_address select,
#simplecheckout_shipping_address textarea,
#simplecheckout_shipping input[type="text"],
#simplecheckout_shipping input[type="email"],
#simplecheckout_shipping input[type="tel"],
#simplecheckout_shipping input[type="password"],
#simplecheckout_shipping select,
#simplecheckout_shipping textarea,
#simplecheckout_payment input[type="text"],
#simplecheckout_payment input[type="email"],
#simplecheckout_payment input[type="tel"],
#simplecheckout_payment input[type="password"],
#simplecheckout_payment select,
#simplecheckout_payment textarea {
  width: 100% !important;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #dfe5f0;
  border-radius: 10px;
  background: #dde3f575 !important;
  color: #070b28;
  font-size: 14px;
  outline: none;
  box-shadow: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
#simplecheckout_shipping_address select::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%239090a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
#simplecheckout_customer textarea,
#simplecheckout_shipping_address textarea,
#simplecheckout_shipping textarea,
#simplecheckout_payment textarea {
  min-height: 96px;
  padding-top: 12px;
  resize: vertical;
}

/* Focus тільки в формах */
#simplecheckout_customer input:focus,
#simplecheckout_customer select:focus,
#simplecheckout_customer textarea:focus,
#simplecheckout_shipping_address input:focus,
#simplecheckout_shipping_address select:focus,
#simplecheckout_shipping_address textarea:focus,
#simplecheckout_shipping input:focus,
#simplecheckout_shipping select:focus,
#simplecheckout_shipping textarea:focus,
#simplecheckout_payment input:focus,
#simplecheckout_payment select:focus,
#simplecheckout_payment textarea:focus {
  border-color: #ff5b07;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 91, 7, 0.14);
}

/* Radio / checkbox тільки в формах */
#simplecheckout_customer input[type="radio"],
#simplecheckout_customer input[type="checkbox"],
#simplecheckout_shipping_address input[type="radio"],
#simplecheckout_shipping_address input[type="checkbox"],
#simplecheckout_shipping input[type="radio"],
#simplecheckout_shipping input[type="checkbox"],
#simplecheckout_payment input[type="radio"],
#simplecheckout_payment input[type="checkbox"] {
  width: 16px !important;
  height: 16px;
  margin: 0 8px 0 0;
  accent-color: #ff5b07;
  cursor: pointer;
}

/* Блоки доставки/оплати */
#simplecheckout_shipping .radio,
#simplecheckout_shipping .checkbox,
#simplecheckout_shipping label.radio,
#simplecheckout_shipping label.checkbox,
#simplecheckout_payment .radio,
#simplecheckout_payment .checkbox,
#simplecheckout_payment label.radio,
#simplecheckout_payment label.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #e4e9f2;
  border-radius: 12px;
  background: #f9fbff;
  color: #070b28;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}

#simplecheckout_shipping .radio:hover,
#simplecheckout_shipping .checkbox:hover,
#simplecheckout_shipping label.radio:hover,
#simplecheckout_shipping label.checkbox:hover,
#simplecheckout_payment .radio:hover,
#simplecheckout_payment .checkbox:hover,
#simplecheckout_payment label.radio:hover,
#simplecheckout_payment label.checkbox:hover {
  border-color: rgba(255, 91, 7, 0.45);
  background: rgba(255, 91, 7, 0.04);
}

/* Таблиці тільки всередині форм, не в корзині */
#simplecheckout_customer .simplecheckout-block-content table,
#simplecheckout_customer .simplecheckout-block-content tbody,
#simplecheckout_customer .simplecheckout-block-content tr,
#simplecheckout_customer .simplecheckout-block-content td,
#simplecheckout_shipping_address .simplecheckout-block-content table,
#simplecheckout_shipping_address .simplecheckout-block-content tbody,
#simplecheckout_shipping_address .simplecheckout-block-content tr,
#simplecheckout_shipping_address .simplecheckout-block-content td,
#simplecheckout_shipping .simplecheckout-block-content table,
#simplecheckout_shipping .simplecheckout-block-content tbody,
#simplecheckout_shipping .simplecheckout-block-content tr,
#simplecheckout_shipping .simplecheckout-block-content td,
#simplecheckout_payment .simplecheckout-block-content table,
#simplecheckout_payment .simplecheckout-block-content tbody,
#simplecheckout_payment .simplecheckout-block-content tr,
#simplecheckout_payment .simplecheckout-block-content td {
  border: none !important;
}
.simplecheckout-block-content p {
  margin-bottom: 7px !important;
}
#simplecheckout_customer .simplecheckout-block-content td,
#simplecheckout_shipping_address .simplecheckout-block-content td,
#simplecheckout_shipping .simplecheckout-block-content td,
#simplecheckout_payment .simplecheckout-block-content td {
  padding: 0 !important;
}

/* =====================================
   PROTECT CART — повертаємо корзину нормально
===================================== */

#simplecheckout_cart {
  border: 1px solid #dfe5f0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(7, 11, 40, 0.08);
}

#simplecheckout_cart .table-responsive {
  width: 100%;
  overflow-x: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

#simplecheckout_cart .simplecheckout-cart {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: #fff;
}

#simplecheckout_cart .simplecheckout-cart th,
#simplecheckout_cart .simplecheckout-cart td {
  display: table-cell !important;
  padding: 16px 12px !important;
  border-bottom: 1px solid #eef1f6 !important;
  text-align: left;
  vertical-align: middle;
}

#simplecheckout_cart .simplecheckout-cart th {
  background: #f6f8fc;
  color: #070b28;
  font-size: 14px;
  font-weight: 700;
}

#simplecheckout_cart .simplecheckout-cart td::before {
  content: none !important;
}

#simplecheckout_cart .quantity {
  white-space: nowrap;
}

#simplecheckout_cart .quantity input[type="text"],
#simplecheckout_cart .quantity input[type="number"],
#simplecheckout_cart input[name*="quantity"] {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  height: 42px;
  padding: 0 12px !important;
  border: 1px solid #dfe5f0 !important;
  border-radius: 10px !important;
  background: #f3f6fb !important;
  color: #070b28 !important;
  text-align: left;
}

#simplecheckout_cart .quantity button,
#simplecheckout_cart .quantity input[type="button"],
#simplecheckout_cart .remove button,
#simplecheckout_cart .remove input[type="button"] {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  margin: 0 3px !important;
  border: none !important;
  border-radius: 10px !important;
  background: #ff5b07 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* =====================================
   ADAPTIVE
===================================== */

@media (max-width: 1100px) {
  .simplecheckout-left-column,
  .simplecheckout-right-column {
    display: block;
  }
}

@media (max-width: 992px) {
  #simplecheckout_customer,
  #simplecheckout_shipping_address,
  #simplecheckout_shipping,
  #simplecheckout_payment {
    margin-bottom: 18px;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(7, 11, 40, 0.07);
  }

  #simplecheckout_customer .checkout-heading,
  #simplecheckout_customer .panel-heading,
  #simplecheckout_shipping_address .checkout-heading,
  #simplecheckout_shipping_address .panel-heading,
  #simplecheckout_shipping .checkout-heading,
  #simplecheckout_shipping .panel-heading,
  #simplecheckout_payment .checkout-heading,
  #simplecheckout_payment .panel-heading {
    min-height: 48px;
    padding: 14px 16px 14px 20px !important;
    font-size: 15px;
  }

  #simplecheckout_customer .simplecheckout-block-content,
  #simplecheckout_shipping_address .simplecheckout-block-content,
  #simplecheckout_shipping .simplecheckout-block-content,
  #simplecheckout_payment .simplecheckout-block-content {
    padding: 16px !important;
  }

  #simplecheckout_cart {
    border: none;
    box-shadow: none;
    background: transparent;
  }

  #simplecheckout_cart .table-responsive {
    overflow: visible;
  }

  #simplecheckout_cart .simplecheckout-cart {
    min-width: 0;
    display: block;
    background: transparent;
  }

  #simplecheckout_cart .simplecheckout-cart thead {
    display: none !important;
  }

  #simplecheckout_cart .simplecheckout-cart tr {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid #dfe5f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(7, 11, 40, 0.08);
  }

  #simplecheckout_cart .simplecheckout-cart td {
    padding: 12px 0 !important;
    border-bottom: 1px solid #eef1f6 !important;
    text-align: left !important;
  }

  #simplecheckout_cart .simplecheckout-cart td:last-child {
    border-bottom: none !important;
  }

  #simplecheckout_cart .simplecheckout-cart td::before {
    display: block;
    margin-bottom: 7px;
    color: #7b8294;
    font-size: 13px;
    font-weight: 700;
  }

  #simplecheckout_cart .simplecheckout-cart td.image::before {
    content: "Фото" !important;
  }

  #simplecheckout_cart .simplecheckout-cart td.name::before {
    content: "Товар" !important;
  }

  #simplecheckout_cart .simplecheckout-cart td.model::before {
    content: "Модель" !important;
  }

  #simplecheckout_cart .simplecheckout-cart td.quantity::before {
    content: "Кільк." !important;
  }

  #simplecheckout_cart .simplecheckout-cart td.price::before {
    content: "Ціна" !important;
  }

  #simplecheckout_cart .simplecheckout-cart td.total::before {
    content: "Разом" !important;
    text-align: left !important;
  }

  #simplecheckout_cart .simplecheckout-cart td.remove::before {
    content: none !important;
  }
}

@media (max-width: 480px) {
  #simplecheckout_customer .simplecheckout-block-content,
  #simplecheckout_shipping_address .simplecheckout-block-content,
  #simplecheckout_shipping .simplecheckout-block-content,
  #simplecheckout_payment .simplecheckout-block-content {
    padding: 14px !important;
  }

  #simplecheckout_customer input,
  #simplecheckout_customer select,
  #simplecheckout_customer textarea,
  #simplecheckout_shipping_address input,
  #simplecheckout_shipping_address select,
  #simplecheckout_shipping_address textarea,
  #simplecheckout_shipping input,
  #simplecheckout_shipping select,
  #simplecheckout_shipping textarea,
  #simplecheckout_payment input,
  #simplecheckout_payment select,
  #simplecheckout_payment textarea {
    min-height: 40px;
    font-size: 13px;
  }
}

/* =====================================
   CHECKOUT COLUMNS FULL WIDTH FIX
===================================== */

.simple-content {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* Головна сітка checkout */
.simplecheckout-step {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

/* Корзина завжди на всю ширину */
#simplecheckout_cart {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Ліва і права колонки */
.simplecheckout-left-column {
  grid-column: 1 / 2 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.simplecheckout-right-column {
  grid-column: 2 / 3 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* Самі блоки всередині колонок */
#simplecheckout_customer,
#simplecheckout_shipping_address,
#simplecheckout_shipping,
#simplecheckout_payment {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Щоб контент не стискався */
#simplecheckout_customer .simplecheckout-block-content,
#simplecheckout_shipping_address .simplecheckout-block-content,
#simplecheckout_shipping .simplecheckout-block-content,
#simplecheckout_payment .simplecheckout-block-content {
  width: 100% !important;
}

/* Адаптив */
@media (max-width: 992px) {
  .simplecheckout-step {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  #simplecheckout_cart .simplecheckout-cart tbody,
  #simplecheckout_cart .simplecheckout-cart tr,
  #simplecheckout_cart .simplecheckout-cart td {
    display: block !important;
    width: 100% !important;
  }
  .simplecheckout-left-column,
  .simplecheckout-right-column {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    gap: 18px !important;
  }

  #simplecheckout_customer,
  #simplecheckout_shipping_address,
  #simplecheckout_shipping,
  #simplecheckout_payment {
    width: 100% !important;
  }
}
/* .simplecheckout-left-column,
.simplecheckout-right-column {
  grid-column: 1 / -1 !important;
} */

/* =====================================
   CHECKOUT COMMENT BLOCK
===================================== */

#simplecheckout_comment {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 28px !important;

  border: 1px solid #dfe5f0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(7, 11, 40, 0.08);
}

/* Заголовок */
#simplecheckout_comment .checkout-heading,
#simplecheckout_comment .panel-heading {
  position: relative;
  min-height: 52px;
  padding: 16px 20px 16px 24px !important;

  border: none !important;
  border-bottom: 1px solid #edf1f7 !important;

  background: #f6f8fc !important;
  color: #070b28 !important;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

#simplecheckout_comment .checkout-heading::before,
#simplecheckout_comment .panel-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  bottom: -1px;

  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #ff5b07;
}

/* Контент */
#simplecheckout_comment .simplecheckout-block-content {
  width: 100% !important;
  padding: 20px !important;
  background: #fff;
}
/* .col-sm-8::after {
   content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%239090a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
} */
#shipping_address_zone_id {
  /* appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none; */

  padding-right: 45px !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%239090a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: calc(100% - 22px) center !important;
  background-size: 12px 8px !important;
}
#simplecheckout_payment_form {
  display: none;
}
/* Textarea */
#simplecheckout_comment textarea {
  width: 100% !important;
  min-height: 150px;
  padding: 14px 16px !important;

  border: 1px solid #dfe5f0 !important;
  border-radius: 12px !important;

  background: #f6f8fc !important;
  color: #070b28 !important;

  font-size: 14px;
  line-height: 1.45;

  outline: none !important;
  resize: vertical;
  box-shadow: none !important;

  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

#simplecheckout_comment textarea:focus {
  border-color: #ff5b07 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(255, 91, 7, 0.14) !important;
}

#simplecheckout_comment textarea::placeholder {
  color: #8a91a3;
}

/* Забираємо старі рамки таблиць, якщо вони є */
#simplecheckout_comment table,
#simplecheckout_comment tbody,
#simplecheckout_comment tr,
#simplecheckout_comment td {
  width: 100% !important;
  border: none !important;
}

#simplecheckout_comment td {
  padding: 0 !important;
}