/* Per-slide hero editor controls. Loaded after home.css so saved values win. */
.hero-adjustable {
  transform: translate(var(--hero-d-x, 0px), var(--hero-d-y, 0px));
}

.hero-adjustable-badge .hero-badge-text { font-size: var(--hero-d-font, 11px); }
.hero-adjustable-heading { font-size: var(--hero-d-font, clamp(48px, 5.5vw, 72px)) !important; }
.hero-adjustable-description { font-size: var(--hero-d-font, 17px); }
.hero-adjustable-price { font-size: var(--hero-d-font, 30px); }
.hero-adjustable-emi { font-size: var(--hero-d-font, 14px); }

.hero-button-adjust { display: inline-flex; }
.hero-adjustable-shop .btn-primary,
.hero-adjustable-cta .btn-outline {
  font-size: var(--hero-d-font, 15px);
}

.hero-controlled-image {
  transform: translate(var(--hero-image-d-x, 0%), var(--hero-image-d-y, 0%)) scale(var(--hero-image-d-scale, 1)) !important;
  transform-origin: center center;
}

.hero-spec-tag.hero-spec-custom {
  top: var(--hero-spec-d-top, auto) !important;
  right: var(--hero-spec-d-right, auto) !important;
  bottom: var(--hero-spec-d-bottom, auto) !important;
  left: var(--hero-spec-d-left, auto) !important;
  font-size: var(--hero-spec-d-font, 11px);
}

@media (max-width: 768px) {
  .hero-adjustable {
    transform: translate(var(--hero-m-x, 0px), var(--hero-m-y, 0px));
  }

  .hero-adjustable-badge .hero-badge-text { font-size: var(--hero-m-font, 11px); }
  .hero-adjustable-heading { font-size: var(--hero-m-font, 40px) !important; }
  .hero-adjustable-description { font-size: var(--hero-m-font, 17px); }
  .hero-adjustable-price { font-size: var(--hero-m-font, 30px); }
  .hero-adjustable-emi { font-size: var(--hero-m-font, 14px); }

  .hero-adjustable-shop .btn-primary,
  .hero-adjustable-cta .btn-outline {
    font-size: var(--hero-m-font, 15px);
  }

  .hero-controlled-image {
    transform: translate(
      var(--hero-image-m-x, var(--hero-image-d-x, 0%)),
      var(--hero-image-m-y, var(--hero-image-d-y, 0%))
    ) scale(var(--hero-image-m-scale, var(--hero-image-d-scale, 1))) !important;
  }

  .hero-spec-tag.hero-spec-custom {
    top: var(--hero-spec-m-top, var(--hero-spec-d-top, auto)) !important;
    right: var(--hero-spec-m-right, var(--hero-spec-d-right, auto)) !important;
    bottom: var(--hero-spec-m-bottom, var(--hero-spec-d-bottom, auto)) !important;
    left: var(--hero-spec-m-left, var(--hero-spec-d-left, auto)) !important;
    font-size: var(--hero-spec-m-font, var(--hero-spec-d-font, 11px));
  }
}