/* ------------------------------------------------------------------
   Dragon Fruit changeover - additions only.
   The theme sheets (style1.css / responsive1.css) are untouched so the
   original Pomegranate build stays diffable. Loaded last so it wins.
   ------------------------------------------------------------------ */

/* --- 2026 round logo -------------------------------------------------- */

/* The retired logo was a wide lockup, so the theme sizes it in landscape
   boxes and crops with background-size:cover. The 2026 mark is circular, so
   every slot becomes square and switches to contain. Breakpoints mirror
   responsive1.css exactly - this sheet loads after it, so each one wins. */

header .customheader .logo,
header.stickyheader .logo {
  background-image: url(../images/logo-2026.png);
  background-size: contain;
  background-position: left center;
}

header .customheader .logo { width: 140px; height: 140px; }
header.stickyheader .logo  { width: 62px;  height: 62px; top: 0; }

@media screen and (max-width: 1366px) {
  header .customheader .logo { width: 112px; height: 112px; }
  header.stickyheader .logo  { width: 58px;  height: 58px; }
}

@media screen and (max-width: 767px) {
  header .customheader .logo { width: 80px; height: 80px; }
  header.stickyheader .logo  { width: 46px; height: 46px; }
}

@media screen and (max-width: 575px) {
  header .customheader .logo { width: 64px; height: 64px; margin-left: 10px; }
  header.stickyheader .logo  { width: 40px; height: 40px; }
}

/* The retired footer logo was 189x155 and the theme only constrains it below
   1366px, so it rendered near full size above that. The round mark is 320px,
   which is far too big unstyled - give it a size at every width. */
footer .footer-logo {
  height: 118px;
  width: auto;
}

@media screen and (max-width: 767px) {
  footer .footer-logo { height: 100px; }
}

/* --- Hero headline --------------------------------------------------- */

/* The theme's headline scale has a gap: responsive1.css sets 50px at
   <=1366px and again at >=1600px, so 1367-1599px falls through to the 60px
   base. "ANAR" was short enough not to care; "DRAGON FRUIT" at 60px runs
   straight off the green panel. Close the gap so the scale is monotonic. */
@media (min-width: 1367px) and (max-width: 1599px) {
  .top-slider-cnt1 h1,
  #healthBenefits h1 {
    font-size: 50px;
    line-height: 56px;
  }
}

/* "DRAGON FRUIT" is a much longer line than "ANAR" was. The hero copy sits
   in a centred .container, so as the viewport widens the text drifts right
   while the green panel only scales from the left - past ~1900px the line
   crossed onto the photograph. Cap how far the copy may drift; below
   ~1734px this evaluates to the theme's own offset and nothing moves. */
@media (min-width: 1367px) {
  .top-slider-cnt1 .topslider-bg .container {
    max-width: none;
    width: 100%;
    margin-left: 0;
    padding-left: min(calc((100vw - 1140px) / 2 + 15px), 14vw);
  }
}

/* --- What we offer -------------------------------------------------- */

.shopingarea .deliverynote {
  color: #fff;
  font-size: 16px;
  line-height: 26px;
  opacity: 0.92;
  margin: 0 auto;
  max-width: 640px;
  padding-bottom: 10px;
}

/* fixed box so both cards line up even though the two pack photos
   have different aspect ratios */
.shopingarea .prodphoto {
  margin: 0 0 14px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shopingarea .prodphoto img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* the theme's product radio is positioned for the plugin's own markup;
   selection here is driven by the card + button, so keep it out of sight */
.shopingarea .productSelection .radiobutton {
  opacity: 0;
  pointer-events: none;
}

/* "6 fruits" / "12 fruits" has to fit the 150px badge */
.shopingarea .kg-label {
  font-size: 46px;
  line-height: 46px;
}

.shopingarea .kg-label span {
  font-size: 17px;
  line-height: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.shopingarea .product-box .newPrice .ournewprice {
  letter-spacing: -2px;
}

@media screen and (max-width: 767px) {
  .shopingarea .product-shop2 .prodsele + .prodsele {
    margin-top: 90px;
  }
}

/* --- Hamare Khet: the farm reel is 1080x1920, so the slot goes portrait - */

.ourFarm .farmGallery .farmvideo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ourFarm .farmGallery .farmvideo video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 470px;
  border-radius: 15px 0 15px 0;
  background: #252525;
}

@media screen and (max-width: 991px) {
  .ourFarm .farmGallery .farmvideo {
    margin-top: 20px;
  }
  .ourFarm .farmGallery .farmvideo video {
    max-height: 520px;
  }
}