/* =========================================================
   MEHFARO - RESPONSIVE STORE DENSITY
   Equal image/video size + compact responsive storefront
========================================================= */


/* =========================================================
   HERO MEDIA - SAME SIZE
========================================================= */

.hero.mf-commerce-hero .hero-visual,
.hero.mf-commerce-hero .mf-hero-promo-slot,
.hero.mf-commerce-hero .mf-hero-video-slot {
  min-width: 0 !important;
}


/* Image, promotion and video all follow same height */

.hero.mf-commerce-hero .hero-visual,
.hero.mf-commerce-hero .main-product-card,
.hero.mf-commerce-hero .mf-promo-frame,
.hero.mf-commerce-hero .mf-promo-slide,
.hero.mf-commerce-hero .mf-promo-slide img,
.hero.mf-commerce-hero .mf-premium-video-card,
.hero.mf-commerce-hero .mf-premium-video-media {
  height: clamp(180px, 28vw, 360px) !important;
  min-height: clamp(180px, 28vw, 360px) !important;
}


/* =========================================================
   OLD STATIC IMAGE CARD
========================================================= */

.hero.mf-commerce-hero .hero-visual {
  width: 100% !important;

  min-height: clamp(180px, 28vw, 360px) !important;

  margin: 0 !important;

  transform: none !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;
}

.hero.mf-commerce-hero .main-product-card {
  width: 100% !important;
  max-width: none !important;

  overflow: hidden !important;

  border-radius: 26px !important;
}

.hero.mf-commerce-hero .main-product-card img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: cover !important;

  border-radius: inherit !important;
}


/* Old decorative circles should never increase page height */

.hero.mf-commerce-hero .hero-orbit {
  pointer-events: none !important;
}

.hero.mf-commerce-hero .orbit-one {
  width: min(34vw, 390px) !important;
  height: min(34vw, 390px) !important;
}

.hero.mf-commerce-hero .orbit-two {
  width: min(41vw, 470px) !important;
  height: min(41vw, 470px) !important;
}


/* =========================================================
   PROMOTION IMAGE
========================================================= */

.hero.mf-commerce-hero .mf-promo-frame {
  width: 100% !important;

  overflow: hidden !important;

  border-radius: 26px !important;
}

.hero.mf-commerce-hero .mf-promo-slide,
.hero.mf-commerce-hero .mf-promo-slide img {
  width: 100% !important;
}

.hero.mf-commerce-hero .mf-promo-slide img {
  object-fit: cover !important;
}


/* =========================================================
   VIDEO
========================================================= */

.hero.mf-commerce-hero .mf-premium-video-card {
  width: 100% !important;

  border-radius: 26px !important;
}

.hero.mf-commerce-hero .mf-premium-video-media {
  width: 100% !important;
}

.hero.mf-commerce-hero .mf-premium-video-media video,
.hero.mf-commerce-hero .mf-premium-video-media iframe {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
}


/* =========================================================
   DESKTOP STORE DENSITY
========================================================= */

@media (min-width: 1101px) {

  .hero.mf-commerce-hero {
    gap: 15px !important;

    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }


  /* More products visible at once */

  .product-grid {
    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;

    gap: 12px !important;
  }

  .product-image-wrap {
    height: 170px !important;
  }

  .product-card {
    padding: 6px !important;

    border-radius: 16px !important;
  }

  .product-info {
    padding: 9px 5px 5px !important;
  }

  .product-title {
    font-size: 13px !important;

    min-height: 32px !important;
  }

  .product-price {
    font-size: 15px !important;
  }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (min-width: 781px) and (max-width: 1100px) {

  .hero.mf-commerce-hero {
    gap: 12px !important;

    padding:
      36px
      20px !important;
  }


  .hero.mf-commerce-hero .hero-content {
    grid-column: 1 / -1 !important;
  }


  .hero.mf-commerce-hero .mf-hero-promo-slot {
    grid-column: 1 !important;
  }


  .hero.mf-commerce-hero .mf-hero-video-slot,
  .hero.mf-commerce-hero .hero-visual {
    grid-column: 2 !important;
  }


  .hero.mf-commerce-hero .hero-visual,
  .hero.mf-commerce-hero .main-product-card,
  .hero.mf-commerce-hero .mf-promo-frame,
  .hero.mf-commerce-hero .mf-promo-slide,
  .hero.mf-commerce-hero .mf-promo-slide img,
  .hero.mf-commerce-hero .mf-premium-video-card,
  .hero.mf-commerce-hero .mf-premium-video-media {
    height: clamp(210px, 30vw, 300px) !important;
    min-height: clamp(210px, 30vw, 300px) !important;
  }


  .product-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    gap: 11px !important;
  }

  .product-image-wrap {
    height: 155px !important;
  }

}


/* =========================================================
   MOBILE
   Keep promotion/image/video side by side where possible
========================================================= */

@media (max-width: 780px) {

  .hero.mf-commerce-hero,
  .hero.mf-commerce-hero:not(.mf-has-promotions) {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;

    padding:
      28px
      12px
      26px !important;
  }


  /* Text remains full width */

  .hero.mf-commerce-hero .hero-content {
    grid-column: 1 / -1 !important;

    order: 1 !important;
  }


  /* Picture left */

  .hero.mf-commerce-hero .mf-hero-promo-slot {
    grid-column: 1 !important;

    order: 2 !important;
  }


  /* Video / old image right */

  .hero.mf-commerce-hero .mf-hero-video-slot,
  .hero.mf-commerce-hero .hero-visual {
    grid-column: 2 !important;

    order: 3 !important;
  }


  /* If only one media card exists, center it */

  .hero.mf-commerce-hero:not(.mf-has-promotions)
  .mf-hero-video-slot,
  .hero.mf-commerce-hero:not(.mf-has-promotions)
  .hero-visual {
    grid-column: 1 / -1 !important;

    width: min(100%, 360px) !important;

    justify-self: center !important;
  }


  /* Same compact media height */

  .hero.mf-commerce-hero .hero-visual,
  .hero.mf-commerce-hero .main-product-card,
  .hero.mf-commerce-hero .mf-promo-frame,
  .hero.mf-commerce-hero .mf-promo-slide,
  .hero.mf-commerce-hero .mf-promo-slide img,
  .hero.mf-commerce-hero .mf-premium-video-card,
  .hero.mf-commerce-hero .mf-premium-video-media {
    height: clamp(155px, 34vw, 230px) !important;
    min-height: clamp(155px, 34vw, 230px) !important;
  }


  /* Decorative circles hidden on phone */

  .hero.mf-commerce-hero .hero-orbit {
    display: none !important;
  }


  /* Smaller hero copy */

  .hero-content h1,
  .hero.mf-commerce-hero .hero-content h1 {
    font-size:
      clamp(38px, 10vw, 52px) !important;

    line-height: .94 !important;
  }

  .hero-description {
    margin:
      15px
      0
      17px !important;

    font-size: 12px !important;
  }

  .hero-points {
    gap: 10px !important;

    margin-top: 14px !important;

    font-size: 9px !important;
  }

  .hero-actions {
    gap: 8px !important;
  }

  .hero-actions a {
    min-height: 42px !important;

    padding:
      0
      15px !important;

    font-size: 10px !important;
  }


  /* =======================================================
     Compact sections
  ======================================================= */

  .section,
  .soft-section {
    padding:
      38px
      12px !important;
  }

  .section-heading {
    margin-bottom: 18px !important;
  }

  .section-heading h2,
  #products .section-heading h2,
  #new-arrivals .section-heading h2 {
    font-size:
      clamp(28px, 8vw, 38px) !important;
  }


  /* =======================================================
     Categories: 2 at once instead of 1 huge card
  ======================================================= */

  .category-grid,
  .category-grid-v2 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows:
      none !important;

    grid-auto-rows:
      135px !important;

    gap: 9px !important;
  }

  .category-card,
  .category-grid-v2 .category-card {
    min-height: 135px !important;

    border-radius: 16px !important;
  }

  .category-content {
    left: 12px !important;
    right: 12px !important;
    bottom: 11px !important;
  }

  .category-content h3 {
    font-size: 17px !important;
  }

  .category-content span,
  .category-content p {
    font-size: 8px !important;
  }


  /* =======================================================
     Products: show more cards
  ======================================================= */

  .product-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 8px !important;
  }

  .product-card {
    min-width: 0 !important;

    padding: 5px !important;

    border-radius: 14px !important;
  }

  .product-image-wrap {
    height:
      clamp(100px, 23vw, 145px) !important;

    border-radius: 11px !important;
  }

  .product-info {
    padding:
      7px
      3px
      4px !important;
  }

  .product-category {
    font-size: 6px !important;
  }

  .product-title {
    margin:
      3px
      0
      5px !important;

    min-height: 0 !important;

    font-size: 10px !important;

    line-height: 1.2 !important;
  }

  .product-price {
    font-size: 12px !important;
  }

  .old-price {
    font-size: 8px !important;
  }

  .product-stock-row {
    font-size: 7px !important;
  }

  .add-cart-btn {
    height: 32px !important;

    font-size: 9px !important;
  }


  /* =======================================================
     Video overlay becomes compact
  ======================================================= */

  .mf-premium-video-overlay {
    padding: 9px !important;

    gap: 6px !important;
  }

  .mf-premium-video-title {
    font-size: 14px !important;
  }

  .mf-premium-video-kicker {
    font-size: 6px !important;
  }

  .mf-premium-video-discount {
    min-height: 24px !important;

    padding:
      0
      7px !important;

    font-size: 7px !important;
  }

  .mf-premium-video-shop {
    min-height: 30px !important;

    padding:
      0
      10px !important;

    font-size: 8px !important;
  }

  .mf-premium-video-product {
    width: 112px !important;

    min-height: 46px !important;
  }

  .mf-premium-video-product-image {
    width: 35px !important;
    height: 35px !important;
  }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 520px) {

  /*
   Very small phone:
   keep 2 product columns for readability.
  */

  .product-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .product-image-wrap {
    height:
      clamp(112px, 34vw, 145px) !important;
  }


  .hero.mf-commerce-hero .hero-visual,
  .hero.mf-commerce-hero .main-product-card,
  .hero.mf-commerce-hero .mf-promo-frame,
  .hero.mf-commerce-hero .mf-promo-slide,
  .hero.mf-commerce-hero .mf-promo-slide img,
  .hero.mf-commerce-hero .mf-premium-video-card,
  .hero.mf-commerce-hero .mf-premium-video-media {
    height:
      clamp(145px, 40vw, 195px) !important;

    min-height:
      clamp(145px, 40vw, 195px) !important;
  }

}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (max-width: 380px) {

  .hero.mf-commerce-hero,
  .hero.mf-commerce-hero:not(.mf-has-promotions) {
    gap: 7px !important;

    padding-left: 8px !important;
    padding-right: 8px !important;
  }


  .category-grid,
  .category-grid-v2 {
    grid-auto-rows:
      115px !important;

    gap: 7px !important;
  }

  .category-card,
  .category-grid-v2 .category-card {
    min-height:
      115px !important;
  }


  .product-grid {
    gap: 7px !important;
  }

  .product-image-wrap {
    height:
      118px !important;
  }

}


/* MEHFARO SMART OFFER VISIBILITY V1
   =========================================================
   Only real active promotion/video offers use hero media.
   No offer = compact text-only hero.
========================================================= */


/* Old/static fallback artwork is no longer an offer. */
.hero.mf-commerce-hero .hero-visual {
  display: none !important;
}


.hero.mf-commerce-hero
.mf-hero-promo-slot[hidden],

.hero.mf-commerce-hero
.mf-hero-video-slot[hidden] {
  display: none !important;
}


/* =======================================================
   DESKTOP / TABLET
======================================================= */

@media (min-width: 781px) {

  /* IMAGE + VIDEO */
  .hero.mf-commerce-hero
  .mf-has-promotions {
    min-width: 0;
  }


  .hero.mf-commerce-hero.mf-has-promotions.mf-has-video {
    grid-template-columns:
      minmax(0, 1.16fr)
      minmax(260px, .84fr)
      minmax(260px, .84fr)
      !important;
  }


  /* IMAGE ONLY */
  .hero.mf-commerce-hero.mf-has-promotions:not(.mf-has-video),

  /* VIDEO ONLY */
  .hero.mf-commerce-hero.mf-has-video:not(.mf-has-promotions) {
    grid-template-columns:
      minmax(0, 1.28fr)
      minmax(300px, .72fr)
      !important;
  }


  .hero.mf-commerce-hero.mf-has-promotions:not(.mf-has-video)
  .mf-hero-promo-slot,

  .hero.mf-commerce-hero.mf-has-video:not(.mf-has-promotions)
  .mf-hero-video-slot {
    grid-column: 2 !important;
  }


  /* NO OFFER */
  .hero.mf-commerce-hero:not(.mf-has-promotions):not(.mf-has-video) {
    grid-template-columns:
      1fr !important;

    gap:
      0 !important;

    padding-top:
      26px !important;

    padding-bottom:
      26px !important;
  }


  .hero.mf-commerce-hero:not(.mf-has-promotions):not(.mf-has-video)
  .hero-content {
    grid-column:
      1 / -1 !important;

    max-width:
      860px !important;
  }
}


/* =======================================================
   MOBILE
======================================================= */

@media (max-width: 780px) {

  /* IMAGE + VIDEO */
  .hero.mf-commerce-hero.mf-has-promotions.mf-has-video {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      )
      !important;
  }


  /* SINGLE OFFER / NO OFFER */
  .hero.mf-commerce-hero.mf-has-promotions:not(.mf-has-video),

  .hero.mf-commerce-hero.mf-has-video:not(.mf-has-promotions),

  .hero.mf-commerce-hero:not(.mf-has-promotions):not(.mf-has-video) {
    grid-template-columns:
      1fr !important;
  }


  /* IMAGE ONLY */
  .hero.mf-commerce-hero.mf-has-promotions:not(.mf-has-video)
  .mf-hero-promo-slot,

  /* VIDEO ONLY */
  .hero.mf-commerce-hero.mf-has-video:not(.mf-has-promotions)
  .mf-hero-video-slot {
    grid-column:
      1 / -1 !important;

    width:
      min(
        100%,
        430px
      )
      !important;

    justify-self:
      center !important;
  }


  /* NO OFFER = COMPACT TOP */
  .hero.mf-commerce-hero:not(.mf-has-promotions):not(.mf-has-video) {
    gap:
      0 !important;

    padding-top:
      18px !important;

    padding-bottom:
      18px !important;
  }


  .hero.mf-commerce-hero:not(.mf-has-promotions):not(.mf-has-video)
  .hero-content {
    grid-column:
      1 / -1 !important;
  }

}



/* MEHFARO WATERMARK WIDTH SYSTEM V2 */

/*
  FINAL WATERMARK SELECTION
  Width based instead of aspect-ratio.
*/

:root {
  --mf-watermark-image:
    url("../images/mehfaro-watermark-desktop.png") !important;
}


/* NORMAL DESKTOP / LAPTOP */
@media (min-width: 1181px) and (max-width: 1599px) {
  :root {
    --mf-watermark-image:
      url("../images/mehfaro-watermark-desktop.png") !important;
  }
}


/* LARGE / ULTRAWIDE */
@media (min-width: 1600px) {
  :root {
    --mf-watermark-image:
      url("../images/mehfaro-watermark-ultrawide.png") !important;
  }
}


/* TABLET / SMALL DESKTOP WINDOW */
@media (min-width: 601px) and (max-width: 1180px) {
  :root {
    --mf-watermark-image:
      url("../images/mehfaro-watermark-tablet.png") !important;
  }
}


/* PHONE / VERY NARROW WINDOW */
@media (max-width: 600px) {
  :root {
    --mf-watermark-image:
      url("../images/mehfaro-watermark-mobile.png") !important;
  }
}


/* Force watermark to stay visible */
body::before {
  content: "" !important;
  display: block !important;

  position: fixed !important;
  inset: 0 !important;

  background-image:
    var(--mf-watermark-image) !important;

  background-repeat:
    no-repeat !important;

  background-position:
    center center !important;

  background-size:
    cover !important;

  opacity:
    0.25 !important;

  pointer-events:
    none !important;

  z-index:
    0 !important;
}


/* Store content remains above watermark */
body > * {
  position: relative;
  z-index: 1;
}


/* Main store areas should not hide it */
main,
.hero,
.section {
  background-color:
    transparent !important;
}


/* Mobile visibility */
@media (max-width: 600px) {
  body::before {
    opacity:
      0.27 !important;

    background-position:
      center top !important;
  }
}