/* budget-electronics component */

.budget-electronics {
  display: grid;
  grid-template-columns: minmax(330px, 41%) minmax(0, 59%);
  min-height: 500px;
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid #ece7e7;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 34px rgb(62 31 34 / 8%);
}

.budget-electronics-hero {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 38px 30px;
  background:
    radial-gradient(circle at 18% 85%, rgb(237 0 23 / 14%), transparent 26%),
    linear-gradient(135deg, #f7f4f4 0%, #fff 47%, #efe8e8 100%);
  isolation: isolate;
}

.budget-electronics-hero::after {
  position: absolute;
  z-index: -1;
  top: -60px;
  right: -65px;
  width: 160px;
  height: 370px;
  border: 18px solid var(--brand-red);
  border-top: 0;
  border-bottom: 0;
  border-radius: 50%;
  content: "";
  opacity: .82;
  transform: rotate(-19deg);
}

.budget-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 340px;
}

.budget-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--brand-red);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.budget-eyebrow img {
  width: 17px;
  filter: invert(14%) sepia(99%) saturate(6348%) hue-rotate(350deg) brightness(101%);
}

.budget-hero-copy h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.budget-hero-copy h2 strong {
  display: block;
  color: var(--brand-red);
  font-weight: 800;
}

.budget-hero-copy p {
  max-width: 310px;
  margin: 14px 0 20px;
  color: #666;
  font-size: 13px;
  line-height: 1.55;
}

.budget-hero-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 9px;
  background: var(--brand-red);
  box-shadow: 0 8px 18px rgb(237 0 23 / 24%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease;
}

.budget-hero-link:hover,
.budget-hero-link:focus-visible {
  box-shadow: 0 11px 24px rgb(237 0 23 / 32%);
  outline: none;
  transform: translateY(-2px);
}

.budget-hero-link img {
  width: 17px;
  filter: brightness(0) invert(1);
}

.budget-coupon {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 8px 13px 8px 8px;
  border: 1px dashed #f2a5ad;
  border-radius: 10px;
  background: rgb(255 255 255 / 82%);
  backdrop-filter: blur(5px);
}

.budget-coupon b {
  padding: 8px;
  border-radius: 7px;
  background: var(--brand-red);
  color: #fff;
  font-size: 18px;
}

.budget-coupon span {
  color: #686868;
  font-size: 10px;
  line-height: 1.35;
}

.budget-coupon strong { color: #242424; }

.budget-hero-products {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 62%;
  height: 62%;
}

.budget-pedestal {
  position: absolute;
  bottom: -18px;
  border-radius: 50% 50% 12px 12px;
  background: linear-gradient(145deg, #fff, #e6dede);
  box-shadow: 0 20px 25px rgb(75 34 34 / 18%);
}

.budget-pedestal-large { right: 6%; width: 82%; height: 35%; }
.budget-pedestal-small { right: 59%; bottom: 23%; width: 43%; height: 19%; }

.budget-orbit {
  position: absolute;
  border: 1px solid rgb(237 0 23 / 25%);
  border-radius: 50%;
}

.budget-orbit-one { right: -4%; bottom: 5%; width: 105%; aspect-ratio: 1; }
.budget-orbit-two { right: 11%; bottom: 19%; width: 68%; aspect-ratio: 1; }

.budget-hero-product {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 14px 14px rgb(51 15 18 / 25%));
}

.budget-hero-headphones { right: 5%; bottom: 16%; width: 50%; height: 58%; }
.budget-hero-watch { right: 52%; bottom: 33%; width: 35%; height: 43%; transform: rotate(-10deg); }
.budget-hero-coffee { right: 37%; bottom: 3%; width: 34%; height: 39%; transform: rotate(4deg); }

.budget-shop { min-width: 0; padding: 22px 20px 18px; }

.budget-brand-bar {
  display: grid;
  grid-template-columns: repeat(6, minmax(76px, 1fr));
  gap: 9px;
  overflow-x: auto;
  padding: 2px 2px 14px;
  scrollbar-width: none;
}

.budget-brand-bar::-webkit-scrollbar,
.budget-products::-webkit-scrollbar { display: none; }

.budget-brand {
  min-height: 54px;
  padding: 0 12px;
  border: 1px solid #eee;
  border-radius: 28px;
  background: #fff;
  color: #3d3d3d;
  font: 700 12px "Roboto", sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.budget-brand:hover,
.budget-brand:focus-visible,
.budget-brand.is-active {
  border-color: var(--brand-red);
  box-shadow: 0 5px 16px rgb(237 0 23 / 10%);
  color: var(--brand-red);
  outline: none;
  transform: translateY(-1px);
}

.budget-products-shell { position: relative; }

.budget-products {
  display: grid;
  grid-auto-columns: minmax(185px, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  overflow-x: auto;
  padding: 3px 2px 10px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.budget-product {
  overflow: hidden;
  border: 1px solid #eee;
  border-radius: 13px;
  background: #fff;
  scroll-snap-align: start;
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.budget-product:hover { box-shadow: 0 10px 24px rgb(58 23 27 / 10%); transform: translateY(-3px); }
.budget-product[hidden] { display: none; }

.budget-product-media {
  position: relative;
  display: grid;
  height: 155px;
  place-items: center;
  padding: 28px 15px 12px;
  background: linear-gradient(180deg, #fff, #fafafa);
}

.budget-product-media > img { width: 100%; height: 100%; object-fit: contain; }

.budget-badge {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  max-width: 90px;
  padding: 5px 7px;
  border-radius: 6px;
  background: #202124;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.budget-favorite {
  position: absolute;
  z-index: 3;
  top: 9px;
  right: 9px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 1px solid #eee;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.budget-favorite img { width: 17px; }
.budget-favorite.is-active { background: #fff0f2; }
.budget-favorite.is-active img { filter: invert(14%) sepia(99%) saturate(6348%) hue-rotate(350deg) brightness(101%); }

.budget-product-body { padding: 12px; }
.budget-brand-name { color: #999; font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.budget-product-body h3 { min-height: 35px; margin: 4px 0 7px; font-size: 11px; line-height: 1.45; }
.budget-rating { display: flex; gap: 5px; align-items: center; margin-bottom: 10px; }
.budget-rating span { color: #f5a400; font-size: 10px; font-weight: 700; }
.budget-rating small { color: #999; font-size: 9px; }
.budget-product-body del { display: block; color: #8c8c8c; font-size: 9px; }
.budget-product-body > strong { display: block; margin-top: 2px; color: var(--brand-red); font-size: 17px; }

.budget-shipping { display: flex; align-items: center; gap: 4px; margin: 8px 0; color: #259b48; font-size: 9px; font-weight: 700; }
.budget-shipping img { width: 14px; filter: invert(48%) sepia(68%) saturate(586%) hue-rotate(87deg) brightness(89%); }

.budget-cart {
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 7px;
  background: var(--brand-red);
  color: #fff;
  font: 700 10px "Roboto", sans-serif;
  cursor: pointer;
}

.budget-cart img { width: 16px; filter: brightness(0) invert(1); }
.budget-cart.is-added { background: #209447; }

.budget-arrow {
  position: absolute;
  z-index: 5;
  top: 45%;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid #e8e8e8;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 5px 14px rgb(0 0 0 / 12%);
  cursor: pointer;
  transform: translateY(-50%);
}

.budget-arrow img { width: 17px; }
.budget-prev { left: -17px; }
.budget-prev img { transform: rotate(180deg); }
.budget-next { right: -17px; }

.budget-electronics--hero-right {
  grid-template-columns: minmax(0, 59%) minmax(330px, 41%);
}

.budget-electronics--hero-right .budget-shop { order: 1; }
.budget-electronics--hero-right .budget-electronics-hero { order: 2; }

.budget-stationery-hero {
  background:
    linear-gradient(90deg, rgb(255 251 247 / 96%) 0%, rgb(255 251 247 / 84%) 38%, rgb(255 251 247 / 10%) 72%),
    url("../../../img/home/budget-electronics/stationery-hero-right.png") 66% center / cover no-repeat;
}

.budget-stationery-hero::after { display: none; }
.budget-stationery-hero .budget-hero-copy { max-width: 300px; }
.budget-stationery-hero .budget-hero-copy h2 { font-size: clamp(27px, 2.8vw, 39px); }

.stationery-product-shot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-image: url("../../../img/home/budget-electronics/stationery-hero-right.png");
  background-repeat: no-repeat;
  background-size: 350% auto;
  filter: drop-shadow(0 6px 8px rgb(66 36 31 / 10%));
}

.stationery-shot-markers { background-position: 79% 79%; }
.stationery-shot-notebooks { background-position: 67% 30%; }
.stationery-shot-pencilcase { background-position: 42% 72%; }
.stationery-shot-lamp { background-position: 100% 53%; }
.stationery-shot-deskset { background-position: 70% 78%; }

@media (max-width: 991.98px) {
  .budget-electronics { grid-template-columns: 1fr; }
  .budget-electronics--hero-right { grid-template-columns: 1fr; }
  .budget-electronics--hero-right .budget-electronics-hero { order: 1; }
  .budget-electronics--hero-right .budget-shop { order: 2; }
  .budget-electronics-hero { min-height: 390px; padding: 32px; }
  .budget-hero-products { width: 47%; height: 82%; }
  .budget-shop { padding-top: 18px; }
  .budget-stationery-hero { background-position: 60% center; }
}

@media (max-width: 575.98px) {
  .budget-electronics { border-radius: 15px; }
  .budget-electronics-hero { min-height: 470px; padding: 25px 20px; }
  .budget-hero-copy { max-width: none; }
  .budget-hero-copy h2 { font-size: 31px; }
  .budget-hero-copy p { max-width: 280px; }
  .budget-hero-products { width: 78%; height: 54%; }
  .budget-stationery-hero {
    min-height: 470px;
    background-position: 64% center;
  }
  .budget-stationery-hero .budget-hero-copy { max-width: 255px; }
  .budget-shop { padding: 16px 13px 14px; }
  .budget-brand-bar { grid-template-columns: repeat(6, 92px); }
  .budget-products { grid-auto-columns: 200px; }
  .budget-prev { left: -8px; }
  .budget-next { right: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .budget-hero-link,
  .budget-brand,
  .budget-product { transition: none; }
  .budget-products { scroll-behavior: auto; }
}