.rose-banner,
.rose-banner * { box-sizing: border-box; }

.rose-banner {
  position: relative;
  width: min(100%, 1200px);
  height: 320px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 12px 34px rgba(74, 50, 58, 0.10);
  font-family: Arial, Helvetica, sans-serif;
}

.rose-banner__slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(100%);
}

.rose-banner__slide--rose { background: linear-gradient(90deg,#fffefe 0%,#fffafb 30%,#fff5f7 62%,#f8dfe7 100%); }
.rose-banner__slide--compose { background: linear-gradient(90deg,#fffffe 0%,#fbfdf8 30%,#f2f8ed 62%,#dfeeda 100%); }

.rose-banner__slide.is-active { z-index: 2; visibility: visible; pointer-events: auto; transform: translateX(0); }
.rose-banner__slide.is-entering { z-index: 3; visibility: visible; pointer-events: auto; animation: rose-banner-enter .72s cubic-bezier(.22,.61,.36,1) forwards; }
.rose-banner__slide.is-leaving { z-index: 2; visibility: visible; animation: rose-banner-leave .72s cubic-bezier(.22,.61,.36,1) forwards; }

@keyframes rose-banner-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes rose-banner-leave { from { transform: translateX(0); } to { transform: translateX(-100%); } }

.rose-banner__copy { position: absolute; z-index: 5; top: 42px; left: 58px; width: 43%; }
.rose-banner__title { margin: 0; color: #252525; font-family: Georgia,"Times New Roman",serif; font-size: clamp(38px,4.3vw,58px); font-weight: 400; line-height: .98; letter-spacing: -1.5px; }
.rose-banner__slide--rose .rose-banner__title { color: #53694d; }
.rose-banner__slide--rose .rose-banner__title span { color: #d98ca3; font-style: italic; }
.rose-banner__title--compose span { color: #55754d; font-style: italic; }
.rose-banner__copy p { max-width: 430px; margin: 18px 0 0; color: #6e6669; font-size: 15px; line-height: 1.55; }

.rose-banner__visual { position: absolute; z-index: 1; top: 0; right: 0; width: 58%; height: 100%; overflow: visible; pointer-events: none; }
.rose-banner__image { position: absolute; top: 50%; right: 2%; display: block; width: auto; height: auto; max-width: 96%; max-height: 96%; object-fit: contain; object-position: center; transform: translateY(-50%); filter: drop-shadow(0 12px 16px rgba(72,55,61,.10)); }
.rose-banner__visual--rose { width: 60%; }
.rose-banner__visual--rose .rose-banner__image { right: 8%; max-width: 108%; max-height: 108%; }
.rose-banner__visual--compose { width: 62%; }
.rose-banner__visual--compose .rose-banner__image { right: 7%; max-width: 108%; max-height: 108%; }

.rose-banner__button {
  position: absolute; z-index: 7; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center; min-width: 208px; min-height: 46px;
  padding: 12px 25px; border-radius: 999px; background: #88AD35; color: #fff !important;
  font-size: 14px; font-weight: 700; text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(97,206,112,.22);
  transition: background-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.rose-banner__button:hover,
.rose-banner__button:focus,
.rose-banner__button:focus-visible,
.rose-banner__button:active { background: #6F9326; color: #fff !important; transform: translateX(-50%) translateY(-2px); box-shadow: 0 10px 22px rgba(63,175,82,.35); }

.rose-banner__arrow {
  position: absolute; z-index: 10; top: 50%; padding: 6px 10px; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; color: #53694d; font-family: Georgia,"Times New Roman",serif;
  font-size: 44px; line-height: 1; cursor: pointer; transform: translateY(-50%); box-shadow: none !important;
}
.rose-banner__arrow:hover,
.rose-banner__arrow:focus,
.rose-banner__arrow:focus-visible,
.rose-banner__arrow:active { background: transparent !important; color: #53694d; border: 0 !important; outline: none; box-shadow: none !important; }
.rose-banner__arrow--previous { left: 8px; }
.rose-banner__arrow--next { right: 8px; }

.rose-banner__dots { position: absolute; z-index: 10; left: 50%; bottom: 9px; display: flex; gap: 8px; transform: translateX(-50%); }
.rose-banner__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(83,105,77,.28); cursor: pointer; }
.rose-banner__dot.is-active { width: 20px; border-radius: 999px; background: #88AD35; }

/* Tablet stays in desktop layout. Only phones switch to the compact layout. */
@media (max-width: 600px) {
  .rose-banner { height: 340px; border-radius: 18px; }
  .rose-banner__copy { top: 18px; left: 34px; width: calc(100% - 68px); text-align: center; }
  .rose-banner__title { font-size: clamp(27px,8vw,34px); line-height: 1; }
  .rose-banner__copy p { max-width: 96%; margin: 9px auto 0; font-size: 12px; line-height: 1.35; }
  .rose-banner__visual,
  .rose-banner__visual--rose,
  .rose-banner__visual--compose { top: 112px; right: 28px; left: 28px; width: auto; height: 155px; overflow: visible; }
  .rose-banner__image,
  .rose-banner__visual--rose .rose-banner__image,
  .rose-banner__visual--compose .rose-banner__image { top: 50%; right: 50%; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; transform: translate(50%,-50%); }
  .rose-banner__visual--rose .rose-banner__image { max-width: 96%; max-height: 96%; }
  .rose-banner__button { bottom: 24px; min-width: 178px; min-height: 38px; padding: 9px 18px; font-size: 12px; }
  .rose-banner__dots { bottom: 8px; }
  .rose-banner__arrow { top: 55%; font-size: 36px; }
  .rose-banner__arrow--previous { left: 2px; }
  .rose-banner__arrow--next { right: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .rose-banner__slide.is-entering,
  .rose-banner__slide.is-leaving { animation-duration: .01ms; }
}

/* Prevent unstyled flash while Elementor/the page initializes. */
.rose-banner.is-ready {
  visibility: visible !important;
  animation: rose-banner-ready .18s ease-out both;
}

@keyframes rose-banner-ready {
  from { opacity: 0; }
  to { opacity: 1; }
}