:root {
  --hov-border: oklch(0.84 0.008 255);
  --hov-shadow: 0 14px 28px -18px oklch(0.45 0.02 255 / 0.5);
}

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

@media (max-width: 1280px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


.pg-card--pirelli {
  --pg-accent: oklch(0.75 0.16 95);
}

.pg-card--formula {
  --pg-accent: oklch(0.58 0.2 25);
}

.pg-card--gislaved {
  --pg-accent: oklch(0.68 0.17 50);
}

.pg-card--hankook {
  --pg-accent: oklch(0.55 0.16 310);
}

.pg-card--winrun {
  --pg-accent: oklch(0.55 0.17 250);
}

.pg-card--michelin {
  --pg-accent: oklch(0.58 0.14 150);
}

.pg-card--cordiant {
  --pg-accent: oklch(0.58 0.2 25);
}

.pg-card--yokohama {
  --pg-accent: oklch(0.55 0.13 195);
}

.pg-card {
  background: white;
  border: 1px solid oklch(0.91 0.006 255);
  border-radius: 14px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pg-card:hover {
  box-shadow: var(--hov-shadow) !important;
}

.pg-card--featured:hover {
  border-color: var(--pg-accent) !important;
}

.pg-card--featured {
  box-shadow: oklch(0.91 0.006 255) 0px 0px 0px 1px, var(--pg-accent) 0px 10px 24px -12px;
}

.pg-card--plain {
  box-shadow: none;
}

.pg-card--featured .pg-card__topline {
  height: 4px;
  background: var(--pg-accent);
}

.pg-card--plain .pg-card__topline {
  height: 1px;
  background: oklch(0.93 0.006 255);
}

.pg-card__media {
  position: relative;
  padding: 16px 16px 0px;
}

.pg-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  /* padding: 3px 8px; */
  border-radius: 3px;
  z-index: 1;
  /* border: 1px solid; */
}

.pg-card--featured .pg-card__badge {
  border-color: var(--pg-accent);
  color: var(--pg-accent);
}

.pg-card--plain .pg-card__badge {
  border-color: oklch(0.88 0.006 255);
  color: oklch(0.4 0.01 255);
}

.pg-card__imgwrap {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: oklch(0.96 0.004 255);
}

.pg-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pg-card__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0%;
}

.pg-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.pg-card__size {
  font-size: 13px;
  color: oklch(0.5 0.01 255);
}

.pg-card__tags {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pg-card__stock {
  font-size: 13px;
  font-weight: 600;
}

.pg-card__stock--available {
  color: oklch(0.55 0.14 145);
}

.pg-card__stock--backorder {
  color: oklch(0.6 0.15 40);
}

.pg-card__price {
  font-size: 20px;
  font-weight: 700;
  margin-top: auto;
}

.pg-card__buy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  cursor: default;
}

.season-tag {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.season-tag--winter {
  background: #fff;
  color: oklch(0.45 0.1 250);
}

.season-tag--summer {
  background: #fff;
  color: oklch(0.5 0.13 70);
}

.season-tag--allseason {
  background: #fff;
  color: oklch(0.4 0.01 255);
}

.season-tag--studded {
  background: #fff;
  color: oklch(0.35 0.01 255);
}

.season-tag--friction {
  background: #fff;
  color: oklch(0.35 0.01 255);
}

.season-tag--runflat {
  background: #fff;
  color: oklch(0.5 0.18 48);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.filter__icon.mx-1 {
  width: 24px;
  height: 24px;
}

.catalog_filter_tire input[type=checkbox],
.catalog_filter_wheel input[type=checkbox],
.catalog_filter_prod input[type=checkbox],
.fltr input[type=checkbox] {
  margin-right: 0;
}

.catalog_filter_tire input[name=sale],
.catalog_filter_wheel input[name=sale] {
  margin-right: 0.25rem;
}

.pg-stepper {
  display: flex;
  align-items: center;
  border: 1px solid oklch(0.88 0.006 255);
  border-radius: 8px;
  overflow: hidden;
}

.pg-stepper__btn {
  width: 28px;
  height: 32px;
  border: none;
  background: oklch(0.96 0.004 255);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}

.pg-stepper__value {
  width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.pg-card__cart {
  flex: 1 1 0%;
  padding: 9px;
  border-radius: 8px;
  border: none;
  background: oklch(0.68 0.19 48);
  color: white;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.pg-card__cart:hover {
  background: oklch(0.6 0.19 48) !important;
}

/* ============ mirkoles productlist overrides ============ */

/* grid wrapper on the existing .products container */
.products.product-grid {
  display: grid;
  margin-left: 0;
  margin-right: 0;
  background: transparent;
  overflow: visible !important;
}

/* cards must be positioned to host absolute badges/actions */
.product-grid .pg-card,
.product-pairs-items .pg-card {
  position: relative;
}

/* brand badge with logo image */
.pg-card__badge-logo {
  height: 18px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
  display: block;
}

/* product image link fills the aspect-ratio wrapper */
.pg-card__imgwrap a {
  display: block;
  height: 100%;
}

/* discount badge */
.pg-card .skidka_badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: oklch(0.93 0.05 48);
  color: oklch(0.5 0.18 48);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 6px;
}

/* sale badge below the brand badge */
.pg-card__sale {
  background: oklch(0.55 0.22 25);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
}

.pg-card .pg-card__sale {
  position: absolute;
  top: 36px;
  left: 14px;
  z-index: 1;
}

/* larger sale badge on the product page */
.result-feature .pg-card__sale {
  font-size: 12px;
}

/* actions (акции) bottom-left of the media area */
.pg-card .product__property-actions {
  top: auto;
  bottom: 14px;
  left: 14px;
  right: auto;
  margin-left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.pg-card .product__property-actions img {
  width: 26px;
}

/* novinka badge bottom-right of the media area */
.pg-card__media .novinka {
  top: auto;
  bottom: 10px;
  left: auto;
  right: 14px;
  width: 52px;
}

/* stock / delivery / disk-props text */
.pg-card__delay,
.pg-card__props {
  font-size: 12px;
  color: oklch(0.5 0.01 255);
}

/* W-Silent tag */
.pg-card__silent img {
  width: 12px;
  height: 12px;
  display: block;
}

/* stepper in the buy block (keeps number-input classes for existing JS) */
.pg-card__buy .number-input {
  border: 1px solid oklch(0.88 0.006 255);
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
}
.pg-card__buy .number-input__left-arrow,
.pg-card__buy .number-input__right-arrow {
  width: 28px;
  height: 32px;
  background: oklch(0.96 0.004 255);
  color: inherit;
  font-size: 15px;
}
.pg-card__buy .number-input__left-arrow:hover,
.pg-card__buy .number-input__right-arrow:hover {
  color: oklch(0.68 0.19 48);
}
.pg-card__buy .number-input__input {
  width: 28px;
  border: none;
  text-align: center;
  line-height: 32px;
  background: white;
}

/* pairs (rasparki) cards */
.product-pairs-items {
  gap: 8px;
}
.product-pairs-items .pg-card {
  flex: 1 1 0%;
  min-width: 0;
}

/* pairs in the 4-col grid: span two tracks and stretch so the two cards
   keep a regular card width (the legacy width: calc(50% - 8px) would
   resolve to 50% of a single 1fr track and collapse the cards) */
.product-grid > .product-pairs {
  grid-column: span 2;
  width: auto;
  max-width: none;
  margin: 0;
}