/* ============================================================
   ТЕМА СТОРІНКИ СОРТУ «Про троянди» — темна, скляна, у стилі каталогу.
   Підключається ТІЛЬКИ на сторінках varieties/*.html (після variety-base.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;
  background-image:image-set(url("cards-photos/rose-garden-pink.webp") type("image/webp"),url("cards-photos/rose-garden-pink.jpg") type("image/jpeg"));
  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; }

/* Додаткова родинна довідка: збережений старий матеріал, не друга схема посадки. */
.rcs-reference{padding:0 !important;overflow:hidden}
.rcs-reference-summary{
  display:flex;min-height:52px;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;cursor:pointer;list-style:none;font-size:14px;font-weight:800;line-height:1.35;
  color:#f4f1e9 !important
}
.rcs-reference-summary::-webkit-details-marker{display:none}
.rcs-reference-summary::after{
  content:'+';display:grid;width:28px;height:28px;flex:0 0 28px;place-items:center;
  border:1px solid rgba(126,240,200,.36);border-radius:50%;color:#7ef0c8 !important;font-size:19px;line-height:1
}
.rcs-reference[open] .rcs-reference-summary::after{content:'−'}
.rcs-reference-body{padding:16px 18px 18px;border-top:1px solid rgba(126,240,200,.22)}
.rcs-reference-badge{
  display:inline-flex;min-height:30px;align-items:center;margin:0 0 12px;padding:4px 10px;
  border:1px solid rgba(246,215,135,.45);border-radius:999px;background:rgba(246,215,135,.08);
  color:#f6d787 !important;font-size:11px;font-weight:900;line-height:1.25
}
@media(max-width:560px){
  .rcs-reference-summary{min-height:56px;padding:14px;font-size:13px}
  .rcs-reference-body{padding:14px}
}

/* ── ШИРОКОФОРМАТ: картка сорту на всю ширину екрана ── */
.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-hero .info .eyebrow{ color:#7ef0c8 !important; }
.rcs-hero .rose-name-uk{ color:#e8c874 !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-route-panel{
  max-width:1180px;margin:34px auto 10px;padding:clamp(18px,3vw,30px);
  border:1px solid rgba(126,240,200,.25);border-radius:26px;
  background:linear-gradient(145deg,rgba(8,48,37,.97),rgba(5,31,24,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 55px rgba(0,0,0,.24);color:#f4f1e9;
}
.rcs-route-panel *{box-sizing:border-box}
.rcs-route-heading{margin-bottom:18px}
.rcs-route-kicker{display:inline-block;margin-bottom:6px;color:#7ef0c8;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.rcs-route-heading h2{margin:0;color:#f6d787;font-size:clamp(24px,4vw,34px);line-height:1.12}
.rcs-route-heading p{max-width:640px;margin:7px 0 0;color:rgba(244,241,233,.72);font-size:14px;line-height:1.5}
.rcs-route-destinations{display:grid;grid-template-columns:minmax(260px,1.7fr) repeat(2,minmax(170px,1fr));gap:12px}
.rcs-route-card,.rcs-pager-btn{display:flex;align-items:center;min-height:68px;border:1px solid rgba(244,241,233,.17);border-radius:17px;color:#f4f1e9;text-decoration:none;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.rcs-route-card{gap:12px;padding:13px 15px;background:rgba(255,255,255,.055)}
.rcs-route-card--catalog{border-color:rgba(52,211,153,.7);background:linear-gradient(135deg,#34d399,#61e6b6);color:#042219;box-shadow:0 10px 28px rgba(52,211,153,.19)}
.rcs-route-icon{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border-radius:12px;background:rgba(126,240,200,.12);color:#7ef0c8;font-size:22px;font-weight:900}
.rcs-route-card--catalog .rcs-route-icon{background:rgba(4,34,25,.13);color:#042219}
.rcs-route-card span:last-child,.rcs-pager-btn span{min-width:0}
.rcs-route-card strong,.rcs-route-card small,.rcs-pager-text b,.rcs-pager-text small{display:block}
.rcs-route-card strong{font-size:15px;line-height:1.25}
.rcs-route-card small{margin-top:3px;color:rgba(244,241,233,.6);font-size:11px;line-height:1.3}
.rcs-route-card--catalog small{color:rgba(4,34,25,.68)}
.rcs-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.rcs-pager-btn{justify-content:flex-start;gap:12px;padding:12px 15px;background:rgba(0,0,0,.13)}
.rcs-pager-btn.next{justify-content:flex-end;text-align:right}
.rcs-pager-arrow{flex:none;color:#7ef0c8;font-size:22px;line-height:1}
.rcs-pager-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.rcs-pager-text.rcs-pager-right{text-align:right;align-items:flex-end}
.rcs-pager-text small{margin-bottom:3px;color:rgba(244,241,233,.57);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.rcs-pager-text b{max-width:100%;overflow:hidden;color:#eafff5;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.rcs-route-card:hover,.rcs-pager-btn:hover{transform:translateY(-2px);border-color:rgba(126,240,200,.62)}
.rcs-route-card:focus-visible,.rcs-pager-btn:focus-visible{outline:3px solid #f6d787!important;outline-offset:3px!important}
@media (max-width:720px){
  .rcs-route-panel{margin:24px auto 8px;border-radius:22px}
  .rcs-route-destinations{grid-template-columns:1fr 1fr}
  .rcs-route-card--catalog{grid-column:1/-1;min-height:76px}
  .rcs-pager-btn{min-width:0;padding-inline:12px}
}
@media (max-width:560px){
  .rcs-pager{grid-template-columns:1fr}
  .rcs-pager-text b{overflow:visible;text-overflow:clip;white-space:normal;line-height:1.3}
}
@media (max-width:380px){
  .rcs-route-panel{padding:16px 12px}
  .rcs-route-destinations,.rcs-pager{gap:8px}
  .rcs-route-card{padding:11px 10px}
  .rcs-route-icon{width:32px;height:32px;flex-basis:32px;font-size:18px}
  .rcs-route-card strong{font-size:13px}
  .rcs-route-card small{font-size:10px}
  .rcs-pager-text b{font-size:12px}
}

/* === Телефон: головне фото сорту робимо гнучким, щоб не вилазило за край і не зʼявлялась бічна прокрутка (фікс №1, 2026-06-30) === */
@media (max-width: 640px){
  .topbar{ flex-wrap:wrap !important; justify-content:center !important; padding-left:12px !important; padding-right:12px !important; }
  .topbar .nav{ width:100% !important; min-width:0 !important; max-width:100% !important; flex-wrap:wrap !important; justify-content:center !important; overflow-x:visible !important; }
  .topbar .nav a{ font-size:12px !important; padding:7px 9px !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,.52);font-size:12.5px;margin:0}
@media(max-width:560px){.sf-nav{gap:6px 12px}.sf-nav a{font-size:13px}}