/* =========================================================
   FLORAL SHOP — СТРАНИЦА ГОТОВОГО РЕШЕНИЯ
   Здесь можно менять оформление только этой страницы.
   ========================================================= */

.floral-case-page {
  --case-ink: #4b2f27;
  --case-muted: #7d685f;
  --case-gold: #b97942;
  --case-gold-dark: #87502c;
  --case-blush: #f6dfd8;
  --case-paper: rgba(255, 251, 247, 0.92);
  color: var(--case-ink);
  /* ФИРМЕННЫЙ ФОН ВСЕЙ СТРАНИЦЫ: меняется только эта картинка */
  background:
    linear-gradient(rgba(255, 244, 228, 0.20), rgba(255, 244, 228, 0.20)),
    url("assets/hero-bg-softflow.webp") center top / cover fixed no-repeat;
}

.floral-case-page main { overflow: hidden; }

.floral-case-page .container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.floral-case-hero {
  position: relative;
  padding: clamp(88px, 10vw, 150px) 0 clamp(72px, 8vw, 120px);
  background: transparent;
}

.floral-case-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(185,121,66,.28) 1px, transparent 1.5px);
  background-size: 23px 23px;
  mask-image: linear-gradient(90deg, #000, transparent 75%);
}

.floral-case-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, .75fr);
  align-items: center;
  gap: clamp(40px, 7vw, 100px);
}

.case-back,
.case-text-link {
  color: var(--case-gold-dark);
  font-weight: 600;
  text-decoration: none;
}

.case-back { display: inline-block; margin-bottom: 34px; }
.case-back:hover, .case-text-link:hover { color: var(--case-ink); }

.case-label {
  margin: 0 0 12px;
  color: var(--case-gold-dark);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.floral-case-hero h1 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(4rem, 8vw, 7.5rem);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.055em;
}

.case-lead {
  max-width: 690px;
  margin: 28px 0 32px;
  color: var(--case-muted);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.7;
}

.case-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.floral-case-page .btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; }

.case-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
}

.case-facts li {
  padding: 17px 16px;
  border: 1px solid rgba(135,80,44,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.48);
  backdrop-filter: blur(8px);
}

.case-facts strong, .case-facts span { display: block; }
.case-facts strong { margin-bottom: 5px; color: var(--case-gold-dark); }
.case-facts span { color: var(--case-muted); font-size: .79rem; line-height: 1.4; }

.floral-case-hero__visual { position: relative; }
.floral-case-hero__visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% -12% -3% 12%;
  border-radius: 50%;
  background: rgba(185,121,66,.23);
  filter: blur(55px);
}
.floral-case-hero__visual img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 590px;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  margin-inline: auto;
  border: 7px solid rgba(255,255,255,.75);
  border-radius: 30px;
  box-shadow: 0 28px 65px rgba(75,47,39,.2);
  transform: rotate(2deg);
}

.case-section { padding: clamp(72px, 9vw, 120px) 0; }
.case-section--soft { background: rgba(255, 248, 241, 0.18); }
.case-heading { max-width: 800px; margin: 0 auto clamp(38px, 6vw, 66px); text-align: center; }
.case-heading h2, .case-final h2, .case-seo h2 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.2rem, 4.5vw, 4.1rem);
  font-weight: 400;
  line-height: 1.08;
}
.case-heading > p:last-child { margin: 22px auto 0; color: var(--case-muted); line-height: 1.75; }

.pain-grid, .included-grid, .case-price-grid {
  display: grid;
  gap: 18px;
}
.pain-grid { grid-template-columns: repeat(4, 1fr); }
.included-grid, .case-price-grid { grid-template-columns: repeat(3, 1fr); }

.pain-grid article, .included-grid article, .price-card {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(135,80,44,.17);
  border-radius: 24px;
  background: var(--case-paper);
  box-shadow: 0 14px 34px rgba(75,47,39,.07);
}
.pain-grid span { color: var(--case-gold); font-size: .78rem; font-weight: 700; letter-spacing: .15em; }
.pain-grid h3, .included-grid h3, .price-card h3 { margin: 17px 0 12px; }
.pain-grid p, .included-grid p, .price-card li { color: var(--case-muted); line-height: 1.65; }

.floral-gallery {
  display: grid;
  grid-template-columns: 1.45fr repeat(3, 1fr);
  gap: 15px;
  align-items: stretch;
}
.floral-gallery img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 16px 34px rgba(75,47,39,.12);
}
.floral-gallery img:first-child { object-position: center 36%; }

.price-card { display: flex; flex-direction: column; }
.price-card--featured {
  border-color: rgba(185,121,66,.6);
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,223,216,.92));
  box-shadow: 0 20px 44px rgba(135,80,44,.14);
}
.price-card .price { margin: 10px 0 20px; color: var(--case-gold-dark); font-size: 1.5rem; font-weight: 700; }
.price-card .price small { display: block; margin-top: 5px; font-size: .82rem; font-weight: 500; }
.price-card ul { flex: 1; margin: 0 0 26px; padding-left: 20px; }
.price-card .btn { align-self: flex-start; }
.price-note { margin: 25px auto 0; color: var(--case-muted); text-align: center; }

.case-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 50px;
  padding: clamp(35px, 6vw, 70px);
  border: 1px solid rgba(185,121,66,.34);
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(246,223,216,.87));
  box-shadow: 0 22px 55px rgba(75,47,39,.1);
}
.case-final p:not(.case-label) { max-width: 680px; margin: 20px 0 0; color: var(--case-muted); line-height: 1.7; }
.case-final .case-actions { flex-direction: column; }

.case-seo { padding: 0 0 clamp(70px, 9vw, 110px); }
.case-seo .container { max-width: 880px; }
.case-seo h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
.case-seo p { color: var(--case-muted); line-height: 1.8; }

@media (max-width: 980px) {
  .floral-case-hero__grid { grid-template-columns: 1fr 340px; gap: 32px; }
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
  .floral-gallery { grid-template-columns: repeat(2, 1fr); }
  .floral-gallery img { height: 360px; }
  .case-price-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .floral-case-page .container { width: min(100% - 28px, 620px); }
  .floral-case-hero { padding-top: 58px; }
  .floral-case-hero__grid { grid-template-columns: 1fr; }
  .floral-case-hero__copy { text-align: center; }
  .case-back { margin-bottom: 26px; }
  .case-actions { justify-content: center; }
  .case-facts { grid-template-columns: 1fr; }
  .floral-case-hero__visual { grid-row: 2; max-width: 370px; margin: 14px auto 0; }
  .floral-case-hero__visual img { transform: none; }
  .pain-grid, .included-grid { grid-template-columns: 1fr; }
  .floral-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .floral-gallery img { height: 260px; border-radius: 16px; }
  .case-final { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .case-final .case-actions { align-items: center; }
  .price-card .btn { align-self: stretch; }
}

@media (max-width: 430px) {
  .floral-case-hero h1 { font-size: 3.45rem; }
  .floral-gallery img { height: 205px; }
  .case-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .floral-case-page *, .floral-case-page *::before, .floral-case-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}