/* Ratinger Hero V4 — loaded only on the front page */

.ratinger-hero-v4{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
  font-family:Montserrat,Arial,sans-serif;
}

.ratinger-hero-v4__container{
  width:min(1300px,calc(100% - 64px));
  margin:0 auto;
}

.ratinger-hero-v4__content{
  max-width:760px;
  padding-top:100px;
  padding-bottom:85px;
}

.ratinger-hero-v4__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  margin:0 0 25px;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.90);
  border-radius:999px;
  background:linear-gradient(110deg,rgba(255,255,255,.88),rgba(226,252,244,.62),rgba(255,255,255,.78));
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
  box-shadow:0 8px 26px rgba(5,140,102,.11),inset 0 1px 0 rgba(255,255,255,.98);
  color:#078868;
  font-size:14px;
  line-height:1;
  font-weight:500;
}

.ratinger-hero-v4__leaf{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
}

.ratinger-hero-v4__leaf svg{
  width:18px;
  height:18px;
  fill:rgba(11,160,117,.07);
  stroke:#07936d;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ratinger-hero-v4__title{
  max-width:760px;
  margin:0 0 25px;
  color:#17231f;
  font-size:54px;
  line-height:1.08;
  font-weight:600;
  letter-spacing:-.035em;
}

.ratinger-hero-v4__title-text{display:inline}

.ratinger-hero-v4__dot{
  display:inline-block;
  margin:0 .10em;
  color:#8b9490;
  font-weight:400;
}

.ratinger-hero-v4__brand{
  display:inline-flex;
  align-items:center;
  vertical-align:.04em;
  white-space:nowrap;
  font-size:.68em;
  line-height:1;
  font-weight:500;
  letter-spacing:.015em;
}

.ratinger-hero-v4__brand .brand-grey{color:#737b78}

.ratinger-hero-v4__brand .brand-e{
  width:.67em;
  height:.74em;
  margin:0 .035em;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.ratinger-hero-v4__brand .brand-e i{
  display:block;
  width:.65em;
  height:.11em;
  border-radius:999px;
  background:#e64232;
}

.ratinger-hero-v4__brand .brand-yellow{color:#e5ad2d}

.ratinger-hero-v4__lead{
  width:fit-content;
  max-width:100%;
  margin:0 0 29px;
  color:#5d6964;
  font-size:16px;
  line-height:1.45;
  font-weight:400;
  white-space:nowrap;
}

.ratinger-hero-v4__benefits{
  display:grid;
  gap:15px;
  margin-bottom:31px;
}

.ratinger-hero-v4__benefit{
  display:flex;
  align-items:flex-start;
  gap:13px;
}

.ratinger-hero-v4__check{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  margin-top:1px;
  border-radius:50%;
  background:linear-gradient(145deg,#078561,#10bc88);
  color:#fff;
  font-size:14px;
  font-weight:600;
  box-shadow:0 5px 13px rgba(6,139,101,.17);
}

.ratinger-hero-v4__benefit>div{
  display:grid;
  gap:2px;
}

.ratinger-hero-v4__benefit strong{
  color:#1c2824;
  font-size:16px;
  line-height:1.25;
  font-weight:600;
}

.ratinger-hero-v4__benefit>div>span{
  color:#747f7a;
  font-size:13px;
  line-height:1.3;
  font-weight:400;
}

.ratinger-hero-v4__button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  min-width:250px;
  min-height:57px;
  gap:40px;
  margin-bottom:34px;
  padding:0 23px 0 28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.40);
  border-radius:17px;
  background:linear-gradient(110deg,#047c5c 0%,#079c73 27%,#10c38d 59%,#08a779 78%,#11ce97 100%);
  background-size:190% 190%;
  box-shadow:0 13px 28px rgba(7,148,106,.23),inset 0 1px 0 rgba(255,255,255,.30);
  color:#fff!important;
  text-decoration:none!important;
  font-size:16px;
  font-weight:600;
  transition:transform .25s ease,box-shadow .25s ease,background-position .35s ease;
}

.ratinger-hero-v4__button::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.18) 43%,transparent 63%);
  transform:translateX(-120%);
  transition:transform .6s ease;
}

.ratinger-hero-v4__button:hover{
  transform:translateY(-2px);
  background-position:100% 50%;
  box-shadow:0 16px 34px rgba(7,148,106,.29),inset 0 1px 0 rgba(255,255,255,.34);
}

.ratinger-hero-v4__button:hover::before{transform:translateX(120%)}

.ratinger-hero-v4__arrow{
  position:relative;
  z-index:2;
  font-size:24px;
  line-height:1;
}

/* Delivery cards: glass + subtle warm/green brand tint */
.ratinger-hero-v4__delivery{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.ratinger-hero-v4__delivery-item{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  gap:11px;
  min-width:250px;
  padding:11px 14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.92);
  border-radius:16px;
  background:
    linear-gradient(
      118deg,
      rgba(255,255,255,.88) 0%,
      rgba(244,250,236,.82) 28%,
      rgba(255,243,205,.44) 52%,
      rgba(226,249,240,.74) 76%,
      rgba(255,255,255,.86) 100%
    );
  backdrop-filter:blur(12px) saturate(135%);
  -webkit-backdrop-filter:blur(12px) saturate(135%);
  box-shadow:
    0 9px 25px rgba(47,91,67,.10),
    0 2px 8px rgba(190,146,49,.06),
    inset 0 1px 0 rgba(255,255,255,.98);
}

.ratinger-hero-v4__delivery-item::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      rgba(229,173,45,.06) 35%,
      rgba(10,157,113,.08) 70%,
      transparent 100%
    );
  pointer-events:none;
}

.ratinger-hero-v4__delivery-icon{
  flex:0 0 auto;
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.92);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(232,247,240,.85));
  box-shadow:0 5px 14px rgba(33,86,65,.06);
  color:#078a67;
  font-size:17px;
}

.ratinger-hero-v4__delivery-icon svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:#078a67;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ratinger-hero-v4__delivery-item>div{
  display:grid;
  gap:2px;
}

.ratinger-hero-v4__delivery-item strong{
  color:#26302c;
  font-size:12px;
  line-height:1.25;
  font-weight:600;
}

.ratinger-hero-v4__delivery-item>div>span{
  color:#76817c;
  font-size:10px;
  line-height:1.3;
}

@media(max-width:1000px){
  .ratinger-hero-v4__container{width:calc(100% - 48px)}
  .ratinger-hero-v4__content{max-width:650px}
  .ratinger-hero-v4__lead{white-space:normal}
}

@media(max-width:640px){
  .ratinger-hero-v4__container{width:calc(100% - 32px)}
  .ratinger-hero-v4__content{padding-top:78px;padding-bottom:70px}
  .ratinger-hero-v4__badge{margin-bottom:19px;padding:9px 13px;font-size:12px}
  .ratinger-hero-v4__title{margin-bottom:22px;line-height:1.08}
  .ratinger-hero-v4__dot{margin:0 .06em}
  .ratinger-hero-v4__brand{font-size:.72em}
  .ratinger-hero-v4__lead{white-space:normal;margin-bottom:24px;font-size:15px}
  .ratinger-hero-v4__benefit strong{font-size:14px}
  .ratinger-hero-v4__button{width:100%;box-sizing:border-box;margin-bottom:25px}
  .ratinger-hero-v4__delivery{display:grid;grid-template-columns:1fr}
  .ratinger-hero-v4__delivery-item{min-width:0}
}


/* =========================================================
   Ratinger Theme 1.14 — mobile readability improvements
   ========================================================= */

@media(max-width:640px){

  /* Main explanatory line under H1 */
  .ratinger-hero-v4__lead{
    font-size:17px;
    line-height:1.48;
  }

  /* Benefit titles: "До 88 прань", "Німецька технологія" */
  .ratinger-hero-v4__benefit strong{
    font-size:17px;
    line-height:1.3;
  }

  /* Benefit secondary text */
  .ratinger-hero-v4__benefit>div>span{
    font-size:14px;
    line-height:1.4;
  }

  /* Slightly larger check circles to match text scale */
  .ratinger-hero-v4__check{
    width:27px;
    height:27px;
    font-size:15px;
  }

  /* Delivery card title */
  .ratinger-hero-v4__delivery-item strong{
    font-size:15px;
    line-height:1.3;
  }

  /* Delivery card subtext */
  .ratinger-hero-v4__delivery-item>div>span{
    font-size:13px;
    line-height:1.4;
  }

  /* Slightly larger delivery icon box */
  .ratinger-hero-v4__delivery-icon{
    width:42px;
    height:42px;
    font-size:18px;
  }

  .ratinger-hero-v4__delivery-icon svg{
    width:19px;
    height:19px;
  }

  /* A bit more vertical breathing room in delivery cards */
  .ratinger-hero-v4__delivery-item{
    padding:13px 14px;
    gap:12px;
  }
}


/* =========================================================
   Ratinger Theme 1.15 — mobile typography comes from Builder
   ========================================================= */
@media(max-width:640px){
  .ratinger-hero-v4__lead{
    font-size:var(--rbu-lead-mobile-size,18px)!important;
  }

  .ratinger-hero-v4__benefit strong{
    font-size:var(--rbu-benefit-title-mobile-size,18px)!important;
  }

  .ratinger-hero-v4__benefit>div>span{
    font-size:var(--rbu-benefit-text-mobile-size,15px)!important;
  }

  .ratinger-hero-v4__delivery-item strong{
    font-size:var(--rbu-delivery-title-mobile-size,16px)!important;
  }

  .ratinger-hero-v4__delivery-item>div>span{
    font-size:var(--rbu-delivery-text-mobile-size,14px)!important;
  }

  /* Always show a clean green house icon for Odesa free delivery. */
  .ratinger-hero-v4__delivery-item--odesa .ratinger-hero-v4__delivery-icon svg{
    display:block!important;
    width:20px;
    height:20px;
    stroke:#078a67!important;
    opacity:1!important;
  }
}