/* ============================================================
   ТЕМА СТОРІНКИ СОРТУ «Про троянди» — темна, скляна, у стилі каталогу.
   Підключається ТІЛЬКИ на сторінках varieties/*.html (після styles.css).
   Закріплено з пілота preview-sort.html (A Shropshire Lad), 2026-06-21.
   Правити дизайн сторінок сортів — ТУТ.
   ============================================================ */

/* ── Фон: глибокий смарагд + ізумрудні свічення + троянди за склом + зерно ── */
html{ background:#061a10; overscroll-behavior:none; }
body{
  background:
    radial-gradient(38vw 38vw at 14% 0%,  rgba(16,185,129,.34), transparent 66%),
    radial-gradient(42vw 42vw at 92% 112%, rgba(52,211,153,.26), transparent 70%),
    radial-gradient(26vw 26vw at 80% 34%, rgba(20,120,90,.30),  transparent 72%),
    radial-gradient(46vw 46vw at -2% 102%, rgba(196,246,226,.12), transparent 70%),
    radial-gradient(circle at 50% 42%, #092B1B 0%, #061a10 52%, #03110A 100%) !important;
  background-attachment: fixed !important;
  color:#f4f1e9 !important;
  overscroll-behavior:none;
  min-height:100vh;
}
/* фото-троянда за матовим склом (праворуч, із розчиненням ліворуч) */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url("cards-photos/rose-garden-pink.jpg") right center/cover no-repeat;
  opacity:.30; mix-blend-mode:screen; filter:saturate(1.1) brightness(1.05);
  -webkit-mask-image:linear-gradient(to left,#000 42%,transparent 88%);
          mask-image:linear-gradient(to left,#000 42%,transparent 88%);
}
/* зерно-туман */
body::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.topbar{ position:relative; z-index:5; }
.variety-page{ position:relative; z-index:1; }

/* усі змістові блоки → матове скло */
.rose-card, .rcs-hero, .rcs-card, .rcs-scheme, .rcs-scheme-details,
.rcs-landscape, .rcs-bottom-bar, .rcs-duo > *{
  background: radial-gradient(130% 130% at 28% 18%, rgba(255,255,255,.06), rgba(255,255,255,.015) 60%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.1); backdrop-filter:blur(22px) saturate(1.1);
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 14px 40px rgba(0,0,0,.20) !important;
  border-radius:22px !important;
}
.rose-card{ border-radius:30px !important; }

/* текст — світлий, читабельний */
.variety-page, .rose-card, .rcs-hero, .rcs-card, .rcs-scheme, .rcs-scheme-details,
.rcs-landscape, .rcs-bottom-bar, .breadcrumbs, .variety-back,
.big, .small, .top, .rcs-name, .rcs-tone, .rcs-field, .rcs-group-value{
  color:#f4f1e9 !important;
}
.small, .top, .breadcrumbs, .rcs-scheme-col-label{ color:rgba(244,241,233,.72) !important; }

/* акценти — зелений неон замість строкатих кольорів */
.rcs-card .top, .rcs-scheme-name, .rcs-group-series{ color:#7ef0c8 !important; }
a{ color:#7ef0c8; }
.breadcrumbs a, .variety-back{ color:rgba(244,241,233,.8) !important; }

/* фото в hero / схемі — білий ободок + неонове свічення */
.rcs-photo, .rcs-hero img{ box-shadow:0 0 0 1px rgba(255,255,255,.5), 0 0 0 2px rgba(52,211,153,.35) !important; }

/* верхнє меню → темне скло */
.topbar{
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 45%, rgba(8,32,24,.5) 100%) !important;
  -webkit-backdrop-filter:blur(28px) saturate(1.1); backdrop-filter:blur(28px) saturate(1.1);
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}
.topbar *{ color:#f4f1e9 !important; }
.topbar .nav a, .topbar nav a{ color:rgba(207,238,222,.92) !important; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.topbar .brand{ display:none !important; }

/* breadcrumbs → прозорі, світлий текст */
.breadcrumbs{ background:transparent !important; color:rgba(244,241,233,.7) !important; }
.breadcrumbs *{ color:rgba(244,241,233,.7) !important; }
.breadcrumbs a{ color:rgba(244,241,233,.88) !important; }

/* текст нижніх блоків → зелений малахіт */
.rcs-tiles, .rcs-tiles *, .rcs-duo, .rcs-duo *, .rcs-scheme, .rcs-scheme *,
.rcs-scheme-details, .rcs-scheme-details *, .rcs-landscape, .rcs-landscape *,
.rcs-bottom-bar, .rcs-bottom-bar *{ color:#b6f0d6 !important; }
/* значення / заголовки секцій — яскравіший малахіт зі свіченням */
.rcs-tiles .big, .rcs-duo .big, .rcs-scheme h2, .rcs-scheme h3, .rcs-scheme-name,
.rcs-scheme-stage, .rcs-scheme-hero, .rcs-landscape h2, .rcs-landscape h3,
.rcs-bottom-bar strong, .rcs-duo h2, .rcs-duo h3{
  color:#43e6a6 !important; text-shadow:0 0 9px rgba(52,211,153,.42);
}

/* пілюлі-кнопочки (сусіди / компаньйони / акценти) → темне скло */
.rcs-pill{
  background: rgba(255,255,255,.09) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.rcs-pill, .rcs-pill *{ color:#eafff5 !important; text-shadow:0 1px 2px rgba(0,0,0,.45) !important; }
.rcs-pill.rose{ border-color:rgba(224,96,138,.6) !important; }
.rcs-pill.leaf{ border-color:rgba(82,200,138,.6) !important; }

/* ── ШИРОКОФОРМАТ: картка сорту на всю ширину екрана ── */
.variety-page{ max-width:1800px !important; width:94% !important; margin:0 auto !important;
               padding-left:clamp(16px,2vw,30px) !important; padding-right:clamp(16px,2vw,30px) !important; }
.rose-card.rcs.rcs, .rcs{ max-width:100% !important; }

/* ── 7 плашок строго в ОДИН горизонтальний ряд ── */
.rcs-tiles{ grid-template-columns: repeat(7, 1fr) !important; gap:12px !important; align-items:stretch !important; }
@media (max-width:1180px){ .rcs-tiles{ grid-template-columns: repeat(auto-fit, minmax(150px,1fr)) !important; } }

/* плашки → компактне «леденцове» скло + кольорова полоска-акцент злива */
.rcs-tile{
  min-width:0 !important;
  padding:11px 13px !important;
  justify-content:flex-start !important;
  background: rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.13) !important; border-left-width:3px !important;
  border-radius:16px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 14px rgba(52,211,153,.07), 0 8px 22px rgba(0,0,0,.16) !important;
}
.rcs-tile, .rcs-tile *{ color:#f4f1e9 !important; }
.rcs-tile .top, .rcs-tile .small{ color:rgba(244,241,233,.68) !important; }
.rcs-tile.rose{ border-left-color:#e0608a !important; }
.rcs-tile.berry{ border-left-color:#c662a0 !important; }
.rcs-tile.leaf{ border-left-color:#52c08a !important; }
.rcs-tile.gold{ border-left-color:#d8b15a !important; }
.rcs-tile.sky{ border-left-color:#5aa6dc !important; }
.rcs-tile.sun{ border-left-color:#e2a352 !important; }
.rcs-tile.cream{ border-left-color:#d8c9a0 !important; }
.rcs-tile .big{ font-size:1.32rem !important; line-height:1.05 !important; margin:1px 0 !important; }
.rcs-tile .top{ font-size:.62rem !important; letter-spacing:.05em !important; min-height:3.1em !important; line-height:1.25 !important; position:relative !important; }
/* неонове підкреслення заголовка плашки (absolute → не зсуває цифри) */
.rcs-tile .top::after{
  content:'' !important; position:absolute !important;
  left:0 !important; right:0 !important; bottom:3px !important;
  height:1.5px !important; border-radius:2px !important;
  background:linear-gradient(90deg,#34d399,rgba(52,211,153,.12)) !important;
  box-shadow:0 0 7px rgba(52,211,153,.5) !important;
}
.rcs-tile .small{ font-size:.72rem !important; line-height:1.28 !important; }

/* тег селекції (AUSled тощо) — крупніший, контрастний */
.rcs-hero .meta, .rcs-hero .meta *{ color:#eafff5 !important; font-size:15px !important; font-weight:500 !important; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.rcs-hero .meta strong, .rcs-hero .meta b{ color:#43e6a6 !important; }

/* ── ШКАЛА ШИПІВ (Габітус куща): читабельно — зелений на білому ── */
.rcs-thorn-step{
  background:#ffffff !important;
  color:#0f7a4f !important;
  font-weight:700 !important;
  border:1px solid rgba(16,122,79,.35) !important;
  box-shadow:0 1px 4px rgba(0,0,0,.20) !important;
  text-shadow:none !important;
  opacity:1 !important;
}
.rcs-thorn-step.active{
  background:linear-gradient(135deg,#0f9d63,#0b6e46) !important;
  color:#ffffff !important;
  border-color:rgba(52,211,153,.9) !important;
  box-shadow:0 0 0 1px rgba(52,211,153,.55), 0 0 12px rgba(52,211,153,.5), 0 3px 10px rgba(0,0,0,.3) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.4) !important;
}

/* ── ЗАГОЛОВКИ БЛОКІВ (h4): яскравий малахіт + тонке неонове підкреслення ── */
.rose-card.rcs h4{
  color:#43e6a6 !important;
  text-shadow:0 0 10px rgba(52,211,153,.45) !important;
  display:inline-block !important;
  position:relative !important;
}
.rose-card.rcs h4::after{
  content:'' !important; display:block !important;
  height:2px !important; margin-top:7px !important; width:100% !important;
  border-radius:2px !important;
  background:linear-gradient(90deg,#34d399,rgba(52,211,153,.18)) !important;
  box-shadow:0 0 8px rgba(52,211,153,.6) !important;
}

/* ── НАВІГАЦІЯ МІЖ СОРТАМИ (низ): ← попередній · до каталогу · наступний → ── */
.rcs-pager{ display:flex !important; gap:14px !important; align-items:stretch !important; justify-content:space-between !important; flex-wrap:wrap !important; margin:32px auto 6px !important; }
.rcs-pager-btn{
  flex:1 1 0 !important; min-width:210px !important; display:flex !important; align-items:center !important; gap:12px !important;
  padding:13px 18px !important; border-radius:18px !important; text-decoration:none !important;
  background:radial-gradient(130% 130% at 28% 18%, rgba(255,255,255,.07), rgba(255,255,255,.02) 60%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.1); backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 22px rgba(0,0,0,.18) !important;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.rcs-pager-btn.next{ justify-content:flex-end !important; }
.rcs-pager-btn.catalog{ flex:0 1 auto !important; justify-content:center !important; }
.rcs-pager-arrow{ font-size:22px !important; color:#34d399 !important; text-shadow:0 0 10px rgba(52,211,153,.65) !important; line-height:1 !important; flex:none !important; }
.rcs-pager-text{ display:flex !important; flex-direction:column !important; gap:2px !important; min-width:0 !important; }
.rcs-pager-text.rcs-pager-right{ text-align:right !important; align-items:flex-end !important; }
.rcs-pager-text.rcs-pager-center{ text-align:center !important; align-items:center !important; }
.rcs-pager-text small{ font-size:11px !important; letter-spacing:.05em !important; text-transform:uppercase !important; color:rgba(244,241,233,.6) !important; }
.rcs-pager-text b{ font-size:15px !important; color:#eafff5 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; max-width:100% !important; }
.rcs-pager-btn:hover{ transform:translateY(-3px) !important; border-color:rgba(52,211,153,.55) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px rgba(52,211,153,.3), 0 12px 30px rgba(0,0,0,.24) !important; }

/* === Телефон: головне фото сорту робимо гнучким, щоб не вилазило за край і не зʼявлялась бічна прокрутка (фікс №1, 2026-06-30) === */
@media (max-width: 640px){
  html, body{ overflow-x:hidden !important; }
  .rcs-hero .photo{ width:min(100%, 340px) !important; height:auto !important; aspect-ratio:1 / 1; }
  .rcs-hero .photo img{ height:100% !important; }
}

/* === Підпис-джерело під фото (для вільних фото з Wikimedia та ін. — вимога ліцензії; пілот 2026-06-30) === */
.rcs-hero .photo{ position:relative !important; }
.rcs-hero .photo .photo-credit{
  position:absolute !important; left:0; right:0; bottom:0; margin:0 !important;
  padding:6px 9px !important; font-size:9.5px !important; line-height:1.3 !important;
  font-weight:400 !important; text-align:right !important; letter-spacing:.01em !important;
  color:rgba(255,255,255,.82) !important; text-shadow:0 1px 2px rgba(0,0,0,.6) !important;
  background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)) !important;
}
.rcs-hero .photo .photo-credit a{ color:rgba(255,255,255,.92) !important; text-decoration:underline !important; }


/* ── Підвал сайту ─────────────────────────────────────────── */
.site-footer{margin-top:clamp(40px,6vw,72px);padding:clamp(26px,4vw,40px) 20px clamp(30px,4vw,44px);
  border-top:1px solid rgba(216,176,106,.28);background:linear-gradient(180deg,rgba(10,20,14,.55),rgba(10,20,14,.85));
  backdrop-filter:blur(6px);position:relative;z-index:2}
.sf-inner{max-width:900px;margin:0 auto;text-align:center}
.sf-brand{font-family:var(--font-display,Georgia,serif);font-size:clamp(19px,2.4vw,23px);color:#e8c874;margin-bottom:8px}
.sf-tag{color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.6;margin:0 auto 16px;max-width:560px}
.sf-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-bottom:18px}
.sf-nav a{color:#7fe0a8;text-decoration:none;font-size:14px;padding:3px 2px;border-bottom:1px solid transparent}
.sf-nav a:hover{border-bottom-color:#7fe0a8}
.sf-note{color:rgba(255,255,255,.5);font-size:12.5px;line-height:1.6;max-width:640px;margin:0 auto 12px}
.sf-copy{color:rgba(255,255,255,.42);font-size:12.5px;margin:0}
@media(max-width:560px){.sf-nav{gap:6px 12px}.sf-nav a{font-size:13px}}