/* =========================================================
   GAY-FETISCHHOF — GLOBAL THEME (CSS)  ·  "NEON CRUISE"
   ---------------------------------------------------------
   Subsite von peitschenhandel.de (Shopware 6 / Themeware Modern).
   JS у окремому файлі: gay-fetischhof-theme.js (підключати ПІСЛЯ цього CSS).

   Підключення через Theme-Manager:
     CSS-Datei        → https://cdn.jsdelivr.net/gh/virusecho/Gay-Fetischhof@main/gay-fetischhof-theme.css
     JavaScript-Datei → https://cdn.jsdelivr.net/gh/virusecho/Gay-Fetischhof@main/gay-fetischhof-theme.js

   ЗМІСТ:
     0)  Fonts + :root tokens
     1)  Base / типографіка / темний неон-фон
     2)  Header (sticky, glow, neon top-bar через JS-клас)
     3)  Navigation
     4)  Buttons / forms
     5)  Product box / listing
     6)  CMS sections (головна та сторінки)
     7)  Footer
     8)  Scroll-reveal анімації ([data-gf-animate])
     9)  Checkout safety (не ламати оформлення)

   НЕЙМСПЕЙС: усі власні класи з префіксом .gf-  ·  html.gf-neon як корінь.
   ========================================================= */

/* =========================================
   0) FONTS + ROOT TOKENS
   ========================================= */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@300;400;500;600;700;800&display=swap");

:root {
  --gf-version: "v2.0-neon-cruise";

  /* Base surfaces */
  --gf-bg:        #07070d;
  --gf-bg-2:      #0d0d18;
  --gf-bg-3:      #14142400;
  --gf-surface:   #12121f;
  --gf-surface-2: #1a1a2e;
  --gf-line:      rgba(255, 255, 255, 0.08);
  --gf-line-2:    rgba(255, 255, 255, 0.14);

  /* Neon accents */
  --gf-magenta:   #ff2d95;
  --gf-magenta-2: #ff5cb0;
  --gf-cyan:      #00e5ff;
  --gf-cyan-2:    #5af3ff;
  --gf-violet:    #8a5cff;

  /* Text */
  --gf-text:      #f3f1fb;
  --gf-text-soft: #b9b6cf;
  --gf-text-mute: #7d7a96;

  /* Effects */
  --gf-glow-m: 0 0 22px rgba(255, 45, 149, 0.55);
  --gf-glow-c: 0 0 22px rgba(0, 229, 255, 0.50);
  --gf-grad:   linear-gradient(100deg, var(--gf-magenta) 0%, var(--gf-violet) 50%, var(--gf-cyan) 100%);
  --gf-grad-soft: linear-gradient(135deg, rgba(255,45,149,.16), rgba(0,229,255,.12));

  --gf-radius:    16px;
  --gf-radius-lg: 24px;
  --gf-radius-pill: 999px;
  --gf-shadow:    0 24px 60px rgba(0, 0, 0, 0.55);

  --gf-font-display: "Space Grotesk", "Sora", system-ui, sans-serif;
  --gf-font-body:    "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* =========================================
   1) BASE / TYPOGRAPHY / DARK NEON
   ========================================= */
html.gf-neon body,
body.themeware {
  background: var(--gf-bg);
  color: var(--gf-text);
  font-family: var(--gf-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Атмосферне неонове підсвічування фону сторінки */
html.gf-neon body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(255, 45, 149, 0.16), transparent 60%),
    radial-gradient(55% 45% at 92% 8%, rgba(0, 229, 255, 0.14), transparent 60%),
    radial-gradient(70% 60% at 50% 110%, rgba(138, 92, 255, 0.14), transparent 60%);
}
html.gf-neon .header-main,
html.gf-neon main,
html.gf-neon .footer-main { position: relative; z-index: 1; }

html.gf-neon h1, html.gf-neon h2, html.gf-neon h3,
html.gf-neon h4, html.gf-neon h5, html.gf-neon h6 {
  font-family: var(--gf-font-display);
  color: var(--gf-text);
  letter-spacing: -0.01em;
  font-weight: 700;
}

html.gf-neon a { color: var(--gf-cyan-2); }
html.gf-neon a:hover { color: var(--gf-magenta-2); }

html.gf-neon ::selection { background: var(--gf-magenta); color: #fff; }

/* Контентні картки/панелі теми */
html.gf-neon .card,
html.gf-neon .product-box,
html.gf-neon .cms-block-category-navigation,
html.gf-neon .offcanvas {
  background: var(--gf-surface);
  border: 1px solid var(--gf-line);
  color: var(--gf-text);
}

/* Скролбар */
html.gf-neon ::-webkit-scrollbar { width: 11px; height: 11px; }
html.gf-neon ::-webkit-scrollbar-track { background: var(--gf-bg-2); }
html.gf-neon ::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gf-magenta), var(--gf-violet));
  border-radius: 999px;
  border: 2px solid var(--gf-bg-2);
}

/* =========================================
   2) HEADER
   ========================================= */
html.gf-neon .header-main {
  background: rgba(8, 8, 14, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--gf-line);
  box-shadow: 0 1px 0 rgba(255, 45, 149, 0.25), 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* sticky-стан (клас додає JS при скролі) */
html.gf-neon.gf-scrolled .header-main {
  background: rgba(7, 7, 13, 0.94);
  box-shadow: 0 1px 0 rgba(0, 229, 255, 0.30), 0 14px 34px rgba(0, 0, 0, 0.6);
}

/* Тонка неон-смужка зверху сайту (вставляє JS) */
.gf-topbar {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 16px;
  font-family: var(--gf-font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gf-grad);
  background-size: 200% 200%;
  animation: gf-flow 9s ease infinite;
}
.gf-topbar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@keyframes gf-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Логотип-текст fallback (якщо немає медіа-логотипу) */
html.gf-neon .header-logo-main a,
html.gf-neon .header-logo-main .header-logo-main-link { color: var(--gf-text); }

/* =========================================
   3) NAVIGATION
   ========================================= */
html.gf-neon .nav-main .nav-link,
html.gf-neon .main-navigation-link,
html.gf-neon .navbar-nav .nav-link {
  color: var(--gf-text-soft);
  font-family: var(--gf-font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
}
html.gf-neon .nav-main .nav-link:hover,
html.gf-neon .main-navigation-link:hover,
html.gf-neon .navbar-nav .nav-link:hover { color: var(--gf-text); }

html.gf-neon .main-navigation-link::after,
html.gf-neon .navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px; width: 0;
  background: var(--gf-grad);
  transition: width 0.28s ease;
}
html.gf-neon .main-navigation-link:hover::after,
html.gf-neon .navbar-nav .nav-link:hover::after { width: 100%; }

/* Іконки дій (Konto / Merkzettel / Warenkorb) */
html.gf-neon .header-actions .header-actions-btn,
html.gf-neon .header-actions a { color: var(--gf-text-soft); }
html.gf-neon .header-actions .header-actions-btn:hover { color: var(--gf-cyan); }
html.gf-neon .header-cart-badge,
html.gf-neon .badge.cart-badge {
  background: var(--gf-magenta) !important;
  color: #fff !important;
  box-shadow: var(--gf-glow-m);
}

/* Пошук */
html.gf-neon .header-search-input,
html.gf-neon input.form-control,
html.gf-neon select.form-select,
html.gf-neon textarea.form-control {
  background: var(--gf-surface-2);
  border: 1px solid var(--gf-line-2);
  color: var(--gf-text);
}
html.gf-neon .header-search-input::placeholder { color: var(--gf-text-mute); }
html.gf-neon .header-search-input:focus,
html.gf-neon input.form-control:focus,
html.gf-neon textarea.form-control:focus {
  border-color: var(--gf-cyan);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.18);
  background: var(--gf-surface-2);
  color: var(--gf-text);
}

/* =========================================
   3.1) ICONS (Shopware-Sprite: .icon > svg > use)
   ---------------------------------------
   Default-Icons sind #333/#4a545b → auf dunkler Chrome unsichtbar.
   svg fill folgt currentColor → wir setzen color hell + erzwingen fill.
   ========================================= */
html.gf-neon .header-main .icon svg,
html.gf-neon .header-main .icon svg *,
html.gf-neon .offcanvas .icon svg,
html.gf-neon .offcanvas .icon svg *,
html.gf-neon .footer-main .icon svg,
html.gf-neon .footer-main .icon svg * {
  color: var(--gf-text-soft) !important;
  fill: currentColor !important;
}
html.gf-neon .header-main .btn:hover .icon svg,
html.gf-neon .header-main a:hover .icon svg,
html.gf-neon .header-main .icon svg:hover,
html.gf-neon .footer-main a:hover .icon svg {
  color: var(--gf-cyan) !important;
}
html.gf-neon .header-nav-main-toggle-label,
html.gf-neon .header-actions-btn .header-actions-btn-label {
  color: var(--gf-text-soft);
}

/* 3.1b) Action-Icon-Buttons: weiße Kästen + Rahmen entfernen
   (Default-bg #f8f8fa, border #dadae5) → transparent, Neon-Hover */
html.gf-neon .header-main .header-actions-btn,
html.gf-neon .header-main .header-actions .btn,
html.gf-neon .header-main .header-search-btn,
html.gf-neon .header-main .header-close-btn,
html.gf-neon .header-main .nav-main-toggle-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease;
}
html.gf-neon .header-main .header-actions-btn:hover,
html.gf-neon .header-main .header-search-btn:hover,
html.gf-neon .header-main .nav-main-toggle-btn:hover {
  background: rgba(255, 45, 149, 0.12) !important;
  border-color: rgba(255, 45, 149, 0.40) !important;
  box-shadow: 0 0 16px rgba(255, 45, 149, 0.22) !important;
}
html.gf-neon .header-main .header-actions-btn:hover .icon svg,
html.gf-neon .header-main .nav-main-toggle-btn:hover .icon svg { color: var(--gf-cyan) !important; }

/* Such-Feld + Gruppe: keine hellen Default-Rahmen */
html.gf-neon .header-main .header-search-input,
html.gf-neon .header-main .input-group,
html.gf-neon .header-main .input-group .btn { border-color: var(--gf-line-2) !important; }

/* Header-Hairline: kein weißer Strich, nur die Neon-Shadow-Linie */
html.gf-neon .header-main { border-bottom-color: transparent !important; }

/* =========================================
   3.2) DARK CHROME — weiße Flächen killen
   ---------------------------------------
   CMS-Blöcke (.cms-block-html u.a.) haben per Default #fff Hintergrund
   → auf dunklem Theme „zerbrochene“ weiße Kästen. Transparent erzwingen
   (nur background-COLOR, Hintergrundbilder bleiben erhalten).
   ========================================= */
html.gf-neon .content-main,
html.gf-neon .cms-sections,
html.gf-neon .cms-section,
html.gf-neon .cms-block,
html.gf-neon .cms-block-container,
html.gf-neon .cms-block-html,
html.gf-neon .cms-element-html,
html.gf-neon .cms-element-text {
  background-color: transparent !important;
}
/* CMS-Block hatte einen 1px hellen Vollrahmen rund um den ganzen
   Seiteninhalt (das war „die weiße Rahmen“). Border killen. */
html.gf-neon .cms-block,
html.gf-neon .cms-block-html,
html.gf-neon .cms-section,
html.gf-neon .cms-section-default {
  border: 0 !important;
  box-shadow: none !important;
}

/* Flyout / Mega-Menü + Offcanvas (Menü & Warenkorb) dunkel */
html.gf-neon .navigation-flyout,
html.gf-neon .navigation-flyout-content,
html.gf-neon .main-navigation-menu,
html.gf-neon .offcanvas,
html.gf-neon .offcanvas-body,
html.gf-neon .js-flyout-menu {
  background-color: var(--gf-surface) !important;
  color: var(--gf-text);
  border-color: var(--gf-line) !important;
}
html.gf-neon .navigation-flyout a,
html.gf-neon .offcanvas a,
html.gf-neon .main-navigation-menu a { color: var(--gf-text-soft); }
html.gf-neon .navigation-flyout a:hover,
html.gf-neon .offcanvas a:hover { color: var(--gf-cyan); }
html.gf-neon .offcanvas .offcanvas-header,
html.gf-neon .offcanvas .offcanvas-close { border-color: var(--gf-line); color: var(--gf-text); }

/* Cookie-Banner dunkel */
html.gf-neon .cookie-permission-container,
html.gf-neon .js-cookie-permission {
  background: var(--gf-surface) !important;
  color: var(--gf-text);
  border-top: 1px solid var(--gf-line);
}

/* Modale / Dropdowns dunkel */
html.gf-neon .modal-content,
html.gf-neon .dropdown-menu {
  background-color: var(--gf-surface);
  color: var(--gf-text);
  border: 1px solid var(--gf-line);
}
html.gf-neon .dropdown-item { color: var(--gf-text-soft); }
html.gf-neon .dropdown-item:hover { background-color: var(--gf-surface-2); color: var(--gf-cyan); }

/* 3.3) Offcanvas-Cart + Alerts + btn-light (waren noch weiß) */
html.gf-neon .offcanvas-header,
html.gf-neon .offcanvas-cart-header,
html.gf-neon .cart-offcanvas-header {
  background-color: var(--gf-surface-2) !important;
  color: var(--gf-text) !important;
  border-bottom: 1px solid var(--gf-line) !important;
}
html.gf-neon .offcanvas-header .offcanvas-close,
html.gf-neon .offcanvas-cart-header * { color: var(--gf-text) !important; }

/* btn-light (Zur Kasse, Zurück) dunkel statt #f9f9f9 */
html.gf-neon .btn-light {
  background-color: var(--gf-surface-2) !important;
  color: var(--gf-text-soft) !important;
  border: 1px solid var(--gf-line-2) !important;
}
html.gf-neon .btn-light:hover:not(.disabled):not(:disabled) {
  background-color: var(--gf-surface) !important;
  color: var(--gf-cyan) !important;
  border-color: var(--gf-cyan) !important;
}
/* Aktiver Checkout-Button = Neon (nur wenn nicht disabled) */
html.gf-neon .begin-checkout-btn:not(.disabled):not(:disabled) {
  background: var(--gf-grad) !important;
  background-size: 180% 180%;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--gf-glow-m);
}
html.gf-neon .btn.disabled,
html.gf-neon .btn:disabled { opacity: .5; }

/* Alerts dunkel (Warenkorb leer, Hinweise, Checkout, Formulare) */
html.gf-neon .alert {
  background-color: var(--gf-surface-2) !important;
  color: var(--gf-text) !important;
  border: 1px solid var(--gf-line-2) !important;
}
html.gf-neon .alert a { color: var(--gf-cyan); }
html.gf-neon .alert .icon svg,
html.gf-neon .alert .icon svg * { color: var(--gf-text-soft) !important; fill: currentColor !important; }
html.gf-neon .alert-info    { border-left: 3px solid var(--gf-cyan) !important; }
html.gf-neon .alert-success { border-left: 3px solid #38e08a !important; }
html.gf-neon .alert-warning { border-left: 3px solid #ffb648 !important; }
html.gf-neon .alert-danger  { border-left: 3px solid var(--gf-magenta) !important; }

/* =========================================
   4) BUTTONS / FORMS
   ========================================= */
html.gf-neon .btn-primary,
html.gf-neon .btn-buy,
html.gf-neon button.btn-primary {
  background: var(--gf-grad);
  background-size: 180% 180%;
  border: none;
  color: #fff;
  font-family: var(--gf-font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--gf-radius-pill);
  box-shadow: var(--gf-glow-m);
  transition: transform 0.18s ease, box-shadow 0.25s ease, background-position 0.5s ease;
}
html.gf-neon .btn-primary:hover,
html.gf-neon .btn-buy:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: var(--gf-glow-c);
  color: #fff;
}

html.gf-neon .btn-secondary,
html.gf-neon .btn-outline-primary {
  background: transparent;
  border: 1.5px solid var(--gf-line-2);
  color: var(--gf-text);
  border-radius: var(--gf-radius-pill);
  font-family: var(--gf-font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
}
html.gf-neon .btn-secondary:hover,
html.gf-neon .btn-outline-primary:hover {
  border-color: var(--gf-cyan);
  color: var(--gf-cyan);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12);
}

/* =========================================
   5) PRODUCT BOX / LISTING
   ========================================= */
html.gf-neon .product-box {
  border-radius: var(--gf-radius);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
html.gf-neon .product-box:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 45, 149, 0.45);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 45, 149, 0.25);
}
html.gf-neon .product-box .product-name,
html.gf-neon .product-box .product-name:hover { color: var(--gf-text); }
html.gf-neon .product-price,
html.gf-neon .product-box .product-price { color: var(--gf-cyan); font-weight: 700; }
html.gf-neon .product-badges .badge,
html.gf-neon .badge-discount {
  background: var(--gf-magenta);
  color: #fff;
  box-shadow: var(--gf-glow-m);
}
html.gf-neon .product-image-wrapper { background: #fff; border-radius: var(--gf-radius); }

/* =========================================
   6) CMS SECTIONS
   ========================================= */
html.gf-neon .cms-page,
html.gf-neon .cms-block,
html.gf-neon .cms-section { background: transparent; }

html.gf-neon .cms-block-text,
html.gf-neon .cms-element-text { color: var(--gf-text-soft); }
html.gf-neon .cms-element-text h1,
html.gf-neon .cms-element-text h2,
html.gf-neon .cms-element-text h3 { color: var(--gf-text); }

/* Заголовок секції в неон-стилі (утиліта для CMS) */
.gf-eyebrow {
  display: inline-block;
  font-family: var(--gf-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gf-cyan);
  margin-bottom: 12px;
}
.gf-gradient-text {
  background: var(--gf-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =========================================
   7) FOOTER
   ========================================= */
html.gf-neon .footer-main {
  background: linear-gradient(180deg, var(--gf-bg) 0%, #050509 100%);
  border-top: 1px solid var(--gf-line);
  color: var(--gf-text-soft);
}
html.gf-neon .footer-main::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--gf-grad);
  background-size: 200% 200%;
  animation: gf-flow 9s ease infinite;
}
/* Default-Footer-Text ist #333/#555 → auf dunklem Grund unlesbar.
   Hell erzwingen (Themeware-Selektoren überschreiben). */
html.gf-neon .footer-main,
html.gf-neon .footer-main p,
html.gf-neon .footer-main li,
html.gf-neon .footer-main dt,
html.gf-neon .footer-main dd,
html.gf-neon .footer-main span,
html.gf-neon .footer-main small,
html.gf-neon .footer-main strong {
  color: var(--gf-text-soft) !important;
}
html.gf-neon .footer-main .footer-column-headline,
html.gf-neon .footer-main .footer-headline,
html.gf-neon .footer-main h3,
html.gf-neon .footer-main h4 {
  color: var(--gf-text) !important;
  font-family: var(--gf-font-display);
}
html.gf-neon .footer-main a,
html.gf-neon .footer-main a strong,
html.gf-neon .footer-main .footer-link { color: var(--gf-text-soft) !important; }
html.gf-neon .footer-main a:hover,
html.gf-neon .footer-main a:hover strong { color: var(--gf-cyan) !important; }

/* =========================================
   8) SCROLL-REVEAL ([data-gf-animate])
   ========================================= */
[data-gf-animate] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-gf-animate].gf-in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-gf-animate] { opacity: 1 !important; transform: none !important; transition: none; }
  .gf-topbar, html.gf-neon .footer-main::before { animation: none; }
}

/* =========================================
   9) CHECKOUT / ACCOUNT — DARK (Neon Cruise)
   ---------------------------------------
   Темний, але читабельний: панелі = темні поверхні,
   ВЕСЬ текст світлий. Ці правила свідомо перебивають
   старі фікси `color:#000 !important` зі старого коду
   (їх можна прибрати з поля "Eigener CSS-Code").
   ========================================= */
html.gf-neon body.is-ctl-checkout,
html.gf-neon body.is-ctl-account,
html.gf-neon body.is-ctl-register,
html.gf-neon body.is-ctl-checkout .content-main,
html.gf-neon body.is-ctl-account .content-main {
  background: var(--gf-bg-2);
  color: var(--gf-text);
}
html.gf-neon body.is-ctl-checkout .card,
html.gf-neon body.is-ctl-account .card,
html.gf-neon body.is-ctl-register .card,
html.gf-neon .checkout-aside-container,
html.gf-neon .checkout-main {
  background: var(--gf-surface);
  border: 1px solid var(--gf-line);
  color: var(--gf-text);
}

/* Кошик у сайдбарі оформлення — світлий текст (перебиває старий #000) */
html.gf-neon .checkout .checkout-aside-product-list .nesting-level-1 .line-item-details-container div,
html.gf-neon .checkout .checkout-aside-product-list .nesting-level-1 .line-item-price div,
html.gf-neon .checkout-aside-product-list .line-item-label,
html.gf-neon .checkout-aside-product-list .line-item-total-price,
html.gf-neon .checkout-aside-summary-list .checkout-aside-summary-label,
html.gf-neon .checkout-aside-summary-list .checkout-aside-summary-value {
  color: var(--gf-text) !important;
}
html.gf-neon .checkout-aside-summary-total .checkout-aside-summary-value { color: var(--gf-cyan) !important; }

/* link-кнопки: на темному фоні чорний нечитабельний → світлий неон
   (замінює старе .btn-link{color:#000}) */
html.gf-neon .btn-link { color: var(--gf-cyan-2); }
html.gf-neon .btn-link:hover { color: var(--gf-magenta-2); }

/* =========================================
   10) PRODUCT GALLERY (перенесено зі старого коду)
   ========================================= */
html.gf-neon .gallery-slider-item .gallery-slider-image {
  inline-size: -webkit-fill-available;
}

/* =========================================
   11) HINWEISSEITE / WARTUNG / GESPERRT — Block zentrieren
   ---------------------------------------
   Перенесено зі старого "Eigener CSS-Code". Навмисно БЕЗ
   неймспейсу html.gf-neon — щоб центрування працювало й тоді,
   коли на сторінці-заглушці тема не підвантажилась.
   ========================================= */
.is-ctl-maintenance .content-main,
.is-ctl-locked .content-main {
  display: flex;
  justify-content: center;
}
.is-ctl-maintenance .content-main .container,
.is-ctl-locked .content-main .container {
  max-width: none;
  width: 100%;
  display: flex;
  justify-content: center;
}
.is-ctl-maintenance .row,
.is-ctl-locked .row { justify-content: center; }
.is-ctl-maintenance .row > [class^="col"],
.is-ctl-locked .row > [class^="col"] {
  max-width: 1100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.is-ctl-maintenance .card,
.is-ctl-locked .card {
  max-width: 1100px;
  width: 100%;
}