body,
html {
  overflow-x: hidden;
}

/* ─────────────────────────  GENERAL / EXISTING STYLES  ───────────────────────── */
.header-section {
  margin-top: -128px;
  width: 100%;
  height: 548px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-items: center;
}

.wineyard-logo {
  margin-bottom: 40px;
  width: 100px;
}

.wineyard-name {
  margin-bottom: 16px;
  color: #fdfcfa;
}

.underline-button.wineyard {
  margin-bottom: 32px;
}

.wineyard-secondary-title {
  color: var(--quertanary-dark);
}

.wineyard-header-info-container {
  width: 600px;
  height: 104px;
  background-color: var(--transparent-black-70);
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 48px;
}

.info-container {
  width: 146px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.infromation-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 4px;
}

.info-text {
  color: var(--neutral-01);
  text-align: center;
  max-width: 132px;
}

.info-title {
  color: var(--quertanary-dark);
}

.flag {
  width: 22px;
  margin-top: 6px;
}

.website-link {
  color: var(--neutral-01);
}

.wineyard-title-section {
  width: 100%;
  height: 210px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  background-color: var(--beige-01);
}

.about-wineyard-container {
  width: 100%;
  min-height: 720px;
  height: 25vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-wineyard-container.reversed {
  flex-direction: row-reverse;
}

.about-wineyard-image {
  width: 50%;
  height: 100%;
  object-fit: cover;
}

.about-text-container {
  width: 50%;
  min-height: 720px;
  height: 100%;
  padding: 72px 96px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.text-title {
  color: var(--accent);
  position: relative;
  display: inline-block;
}

.text-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--accent);
  margin-top: 12px;
}

.about-description {
  margin-top: 64px;
  width: 100%;
  height: auto;
  text-align: start;
  color: #0d0d0d;
}

.btn-box-container.about-wineyard {
  margin-top: 48px;
}

/* ─────────────────────────────  CAROUSEL FIX  ───────────────────────────── */
.products-carrusel-container.wineyard {
  margin-top: 48px;
  /* (existing) */
  display: flex;
  /* NEW – arrows + viewport on one row */
  /* align-items: center; */
  gap: 12px;
  /* space around arrows */
  width: 100%;
}

/* arrow buttons */
.promotion-arrow {
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  /* never let them disappear */
}

/* scrollable viewport */
.carousel-viewport {
  /* NOTE: flex changed from 1 to 0 0 auto  → width we set in JS stays exact */
  flex: 0 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 66px;
  /* remove inner padding so first card is flush */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE & Edge (old) */
  justify-content: center;
}

.carousel-viewport::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari & friends */
}

/* row of product cards */
.products-container {
  display: flex;
  gap: 20px;
  /* spacing between cards */
  width: max-content;
  /* allow horizontal growth */
}

/* each individual card */
.product-card {
  flex: 0 0 320px;
  /* fixed width so scroll increments match */
  box-sizing: border-box;
  scroll-snap-align: start;
  /* snap nicely to viewport */
}

/* full-width images inside card (optional, but handy) */
.product-image {
  width: 100%;
  height: auto;
}

/* ───────────────────  DIVIDER & OTHER WINERY SECTIONS  ─────────────────── */
.divider-section {
  width: 100%;
  height: 206px;
  background-image: url("../../assets/images/Images/Desktop/wineyards-divider-desktop.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.wineyard-secondary-title.divide {
  color: var(--secondary-dark);
}

.wineyard-title.divide {
  color: var(--neutral-01);
}

.all-winery-section {
  padding: 64px 0;
  overflow: hidden;
  /* Ensures no overflow from the section */
}

.winery-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px;
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  position: relative;
}

.other-winery-card {
  width: 640px;
  height: 335px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.winery-arrow-container {
  background-color: var(--transparent-white-90);
  width: 40px;
  height: 40px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px var(--border-primary);
}

.winery-arrow-container:is(:hover, :focus-visible) {
  cursor: pointer;
}

.winery-arrow-container.left {
  left: calc(50% - 320px - 64px - 20px);
}

.winery-arrow-container.right {
  right: calc(50% - 320px - 64px - 20px);
}

.other-winery-type {
  color: #dadada;
}

.other-winery-name {
  color: var(--neutral-01);
}

.other-winery-logo-container {
  width: 228px;
  min-height: 116px;
  height: auto;
  background-color: var(--transparent-white-75);
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.other-winery-logo {
  max-width: 160px;
}

/* ===== WINERY CAROUSEL (horizontal, 1 full + ½ card each side) ===== */

.winery-carousel {
  position: relative;
  /* anchor for absolute arrows   */
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

/* arrows stay frozen */
.winery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--transparent-white-90);
  border: 1px solid var(--border-primary);
  cursor: pointer;
  z-index: 3;
}

.winery-arrow.left {
  right: calc(50% + 320px + 52px);
}

.winery-arrow.right {
  left: calc(50% + 320px + 52px);
}

/* scrollable window */
.winery-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* scroll-behavior: smooth; */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: auto !important;
  /* Disable smooth scroll for JS control */
  width: 100%;
  /* ← NEW: take the whole row */
  padding: 0;
}

.winery-viewport::-webkit-scrollbar {
  display: none;
}

/* the horizontal track */
.winery-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 64px;
  width: max-content;
  white-space: nowrap;
  padding: 0 64px;
  /* Match your gap size */

  /* ★  required so JS can measure scrollWidth correctly */
  position: relative;
}

/* make the <a> wrappers block-level and non-shrinking */
.winery-track>a {
  display: block;
  flex: 0 0 auto;
  scroll-snap-align: center;
  text-decoration: none;
}

.winery-track a {

  text-decoration: none;
}

/* single card */
.other-winery-card {
  width: 640px;
  height: 335px;
  /* landscape card               */
  flex-shrink: 0;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  scroll-snap-align: center;
  /* center card in viewport      */
}

.winery-arrow img {
  pointer-events: none;
  /* clicks go through the <img> to the <button> */
}

/* WINERY COURASEL */

@media (width < 900px) {
  .winery-track {
    gap: 48px;
  }

  .winery-carousel {
    margin: 48px 0;
  }

  .other-winery-card {
    width: 550px;
    height: 300px;
  }

  .winery-arrow.left {
    right: calc(50% + 200px + 130px);
  }

  .winery-arrow.right {
    left: calc(50% + 200px + 130px)
  }
}

@media (width < 750px) {
  .other-winery-card {
    width: 420px;
    height: 318px;
  }

  .winery-arrow.left {
    right: calc(50% + 200px + 70px);
  }

  .winery-arrow.right {
    left: calc(50% + 200px + 70px)
  }

  .winery-track {
    gap: 32px;
  }
}

@media (width < 660px) {

  .winery-carousel {
    margin: 36px 0;
  }

  .other-winery-card {
    width: 420px;
  }

  .winery-arrow.left {
    right: calc(50% + 200px + 42px);
  }

  .winery-arrow.right {
    left: calc(50% + 200px + 42px)
  }

  .winery-track {
    gap: 24px;
  }
}

@media (width < 570px) {
  .winery-arrow.left {
    right: calc(50% + 200px + 20px);
  }

  .winery-arrow.right {
    left: calc(50% + 200px + 20px)
  }
}

@media (width < 530px) {
  .winery-arrow.left {
    right: calc(50% + 180px);
  }

  .winery-arrow.right {
    left: calc(50% + 180px)
  }
}

@media (width < 500px) {
  .other-winery-card {
    width: 318px;
  }

  .winery-track {
    gap: 16px;
  }

  .winery-arrow.left {
    right: calc(50% + 140px);
  }

  .winery-arrow.right {
    left: calc(50% + 140px)
  }

  .winery-carousel {
    margin: 32px 0;
  }
}

@media (width < 370px) {
  .winery-arrow.left {
    right: calc(50% + 125px);
  }

  .winery-arrow.right {
    left: calc(50% + 125px)
  }
}

/* OTHER PART */

@media (width < 1280px) {
  .wineyard-title-section {
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 66px 0 66px 0;
  }

  .products-container {
    width: 100%;
  }

  .about-wineyard-container {
    height: 20vh;
  }

}

@media (width < 1080px) {
  .wineyard-title-section {
    padding-left: 48px;
    padding-right: 48px;
  }

  .wineyard-title {
    text-align: center;
  }

  .about-text-container {
    padding-left: 72px;
    padding-right: 72px;
  }
}

@media (width < 970px) {
  .wineyard-title-section {
    padding-left: 32px;
    padding-right: 32px;
  }

  .about-wineyard-container {
    flex-direction: column;
    height: auto;
    align-items: flex-start;
  }

  .about-text-container {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .about-wineyard-container.reversed {
    flex-direction: column;
    height: auto;
  }

  .about-wineyard-image {
    width: 100%;
    height: 100%;
  }

}

@media (width < 800px) {
  .about-text-container {
    padding: 64px;
  }
}

@media (width < 700px) {
  .wineyard-title-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .all-winery-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .about-text-container {
    padding: 52px;
  }

  .about-description {
    margin-top: 52px;
  }
}


@media (width < 650px) {
  .wineyard-header-info-container {
    flex-direction: column;
    align-items: center;
    height: auto;
    gap: 16px;
  }

  .wineyard-header-info-container {
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
    gap: 56px;
  }

  .header-section {
    padding-left: 40px;
    padding-right: 40px;
    height: auto;
    min-height: 750px;
  }

}

@media (width < 500px) {
  .wineyard-title-section {
    padding: 32px 16px;
  }

  .wineyard-title {
    font-size: 24px;
    line-height: 32px;
  }

  .wineyard-secondary-title {
    font-size: 12px;
    line-height: 18px;
  }

  .all-winery-section {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .wineyard-name {
    font-size: 28px;
    line-height: 36px;
  }

  .underline-button.wineyard {
    font-size: 12px;
    line-height: 18px;
  }

  .wineyard-header-info-container {
    margin-bottom: 64px;
  }

  .header-section {
    min-height: 760px;
  }

  .about-text-container {
    padding: 48px 24px;
  }

  .about-description {
    margin-top: 40px;
  }
}