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

body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif !important;
  background-color: var(--background);
  color: var(--foreground);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: 1rem;
}

.elementor-icon-wrapper {
  line-height: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.lwc-carousel-slide {
  opacity: 0;
  transition: opacity 700ms ease-out;
}

.lwc-carousel-slide--active {
  opacity: 1;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5em 1em;
}

.gallery-item {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  padding: 0 0.5em 1em;
  text-align: center;
  vertical-align: top;
}

.gallery-item img {
  margin: 0 auto;
}

.gallery-columns-1 .gallery-item { width: 100%; }
.gallery-columns-2 .gallery-item { width: 50%; }
.gallery-columns-3 .gallery-item { width: 33.3333%; }
.gallery-columns-4 .gallery-item { width: 25%; }
.gallery-columns-5 .gallery-item { width: 20%; }
.gallery-columns-6 .gallery-item { width: 16.6666%; }
.gallery-columns-7 .gallery-item { width: 14.2857%; }
.gallery-columns-8 .gallery-item { width: 12.5%; }
.gallery-columns-9 .gallery-item { width: 11.1111%; }

/* vinyaara-task1-logo-overflow-fix */
/* The header logo image widget is wrapped in a height-constrained container (h-12/h-16 etc.)
   but the <img> itself has no matching height rule, so on some header states it renders at
   its native ~900x607 size and overflows the wrapper, bleeding a huge logo mark over page
   content below the header (confirmed on both Home and Shop hero sections). Cap every
   instance of the logo image to its wrapper's height and let width scale proportionally. */
img[src*="vinyaara-logo"] {
  max-height: 100% !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
}