/* ============================================================
   ORTOPÉDIA NITRA – custom.css (Joomla 6)
   Prémiový medicínsky štýl: petrolejová + zlatá, serif nadpisy
   Všetky triedy s prefixom ox- (nekolidujú so šablónou)
   ============================================================ */

/* --- Premenné --- */
:root {
  --ox-petrol: #0e3a3d;
  /* tmavá petrolejová */
  --ox-petrol-deep: #092a2c;
  --ox-petrol-soft: #14555a;
  --ox-gold: #c9a24b;
  /* zlatý akcent */
  --ox-gold-light: #e3c98a;
  --ox-cream: #faf7f0;
  /* krémové pozadie */
  --ox-white: #ffffff;
  --ox-ink: #22333b;
  /* text */
  --ox-muted: #5c6b70;
  --ox-radius: 14px;
  --ox-shadow: 0 12px 34px rgba(9, 42, 44, .12);
  --ox-font-serif: 'Playfair Display', Georgia, serif;
  --ox-font-sans: 'Inter', -apple-system, Segoe UI, sans-serif;
}

/* inter-100 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/inter/inter-v20-latin-ext-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-100italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/inter/inter-v20-latin-ext-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-200 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/inter/inter-v20-latin-ext-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-200italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/inter/inter-v20-latin-ext-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-300 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/inter/inter-v20-latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-300italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/inter/inter-v20-latin-ext-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter/inter-v20-latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/inter/inter-v20-latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter/inter-v20-latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/inter/inter-v20-latin-ext-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter/inter-v20-latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/inter/inter-v20-latin-ext-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter/inter-v20-latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/inter/inter-v20-latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/inter/inter-v20-latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/inter/inter-v20-latin-ext-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/inter/inter-v20-latin-ext-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-sans);
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/inter/inter-v20-latin-ext-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-regular - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-serif);
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/playfair/playfair-display-v40-latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-serif);
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/playfair/playfair-display-v40-latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-500 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-serif);
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/playfair/playfair-display-v40-latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-500italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-serif);
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/playfair/playfair-display-v40-latin-ext-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-600 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-serif);
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/playfair/playfair-display-v40-latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-600italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-serif);
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/playfair/playfair-display-v40-latin-ext-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-700 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-serif);
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/playfair/playfair-display-v40-latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-700italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-serif);
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/playfair/playfair-display-v40-latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-800 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-serif);
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/playfair/playfair-display-v40-latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-800italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-serif);
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/playfair/playfair-display-v40-latin-ext-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-900 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-serif);
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/playfair/playfair-display-v40-latin-ext-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-900italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: var(--ox-font-serif);
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/playfair/playfair-display-v40-latin-ext-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


a,
button,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   2. GENERAL JOOMLA / HELIX BUG FIXES
   -------------------------------------------------------------------------- */

/* Hides the "edit" pencil icon Joomla injects into modules when logged in
   as an admin viewing the front end. */
.sp-module .jmodedit {
  display: none;
}

/* Bootstrap <select> collapses to the wrong height in some Joomla form
   renders (e.g. multi-line native selects). Forces normal auto height. */
select:not([multiple]) {
  height: auto;
}

/* Removes the default Joomla "offline mode" background image so the
   offline/maintenance page doesn't show a stray background. */
body.offline-mode {
  background-image: none;
}

/* Helix/JPB page builder: full-width ("stretched") sections lose their
   left/right padding because the row container ignores viewport gutters.
   Restores consistent side padding on 100vw sections. */
.jpb-section[style*="max-width: 100vw"]>.jpb-row-container {
  padding-left: 30px;
  padding-right: 30px;
}


/* --------------------------------------------------------------------------
   3. SCROLLBAR & SMOOTH SCROLL
   -------------------------------------------------------------------------- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--ox-gold) transparent;
  scroll-behavior: smooth;
}

html * {
  -webkit-font-smoothing: antialiased;
}


/* --------------------------------------------------------------------------
   4. FONTS (@font-face)
   Note: the Roboto weight → filename mapping below (500 → Regular,
   700 → Medium, 900 → Bold) is copied as-is from the source file. Double
   check it matches the actual font files before reusing on a new site.
   Paths assume the standard Helix Ultimate template folder structure
   (/templates/shaper_helixultimate/fonts/...) plus a local ../fonts/ folder
   next to this stylesheet for the Google-served Roboto/Merriweather cuts.
   -------------------------------------------------------------------------- */

/* Bootstrap Icons */
@font-face {
  font-family: "bootstrap-icons";
  src: url("/templates/shaper_helixultimate/fonts/bootstrap/bootstrap-icons.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "bootstrap-icons";
  src: url("/templates/shaper_helixultimate/fonts/bootstrap/bootstrap-icons.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Font Awesome 6 Free */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  src: url('/media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  src: url('/media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  src: url('/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2') format('woff2');
  font-display: swap;
}

/* --- Základ --- */
[class*="ox-"] {
  box-sizing: border-box;
}

.ox-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 22px;
}

.ox-narrow {
  max-width: 820px;
}

.ox-center {
  text-align: center;
}

.ox-mt {
  margin-top: 2.4rem;
}

.ox-section {
  padding: 4.5rem 0;
  background: var(--ox-white);
  font-family: var(--ox-font-sans);
  color: var(--ox-ink);
}

.ox-section-alt {
  background: var(--ox-cream);
}

.ox-section h2,
.ox-page-head h1,
.ox-hero-title {
  font-family: var(--ox-font-serif);
  color: var(--ox-petrol);
  line-height: 1.18;
  margin: 0 0 1.1rem;
}

.ox-section h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
}

.ox-section h3 {
  font-family: var(--ox-font-sans);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ox-petrol);
  margin: 0 0 .55rem;
}

.ox-section p {
  line-height: 1.75;
  margin: 0 0 1.1rem;
}

.ox-section a:not([class]) {
  color: var(--ox-petrol-soft);
  font-weight: 600;
}

/* --- Eyebrow (malý nadpis nad titulkom) --- */
.ox-eyebrow {
  display: inline-block;
  font-family: var(--ox-font-sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ox-gold);
  margin: 0 0 .9rem;
}

.ox-eyebrow.ox-center {
  display: block;
  text-align: center;
}

.ox-eyebrow-light {
  color: var(--ox-gold-light);
}

/* --- Tlačidlá --- */
.ox-btn {
  display: inline-block;
  padding: .95rem 1.9rem;
  border-radius: 999px;
  font-family: var(--ox-font-sans);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  margin: .3rem .35rem .3rem 0;
  border: 2px solid var(--ox-gold);
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

.ox-btn:hover {
  transform: translateY(-2px);
}

.ox-btn-gold {
  background: linear-gradient(135deg, var(--ox-gold), #b58b33);
  color: var(--ox-petrol-deep) !important;
  box-shadow: 0 10px 24px rgba(201, 162, 75, .38);
}

.ox-btn-gold:hover {
  box-shadow: 0 14px 30px rgba(201, 162, 75, .5);
}

.ox-btn-dark {
  background-color: var(--ox-petrol);
  color: var(--ox-white) !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.ox-btn-dark:hover {
  background-color: var(--ox-petrol-soft);
}

.ox-btn-outline {
  border: 2px solid var(--ox-gold);
  color: var(--ox-gold-light) !important;
  background: transparent;
}

.ox-section .ox-btn-outline {
  color: var(--ox-petrol) !important;
  border-color: var(--ox-petrol);
}

.ox-btn-xl {
  padding: 1.15rem 2.6rem;
  font-size: 1.15rem;
}

.ox-btn-block {
  display: block;
  text-align: center;
  margin: .5rem 0;
}

/* --- HERO --- */
.ox-hero {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(201, 162, 75, .22), transparent 60%),
    linear-gradient(150deg, var(--ox-petrol-deep) 0%, var(--ox-petrol) 55%, var(--ox-petrol-soft) 100%);
  color: var(--ox-white);
  padding: 6rem 0 5rem;
  font-family: var(--ox-font-sans);
  position: relative;
  overflow: hidden;
}

.ox-hero::after {
  /* jemná zlatá linka na spodku */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--ox-gold), transparent);
}

.ox-hero-title {
  color: var(--ox-white);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  max-width: 18ch;
}

.ox-hero-sub {
  font-size: 1.14rem;
  line-height: 1.7;
  max-width: 56ch;
  color: #dfe9e8;
  margin: 0 0 2rem;
}

.ox-hero-subby {
  color: #dfe9e8;
}

.ox-hero-cta {
  margin-bottom: 2.2rem;
}

.ox-hero-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  padding: 0;
  margin: 0;
}

.ox-hero-badges li {
  font-size: .88rem;
  font-weight: 600;
  padding: .5rem 1.05rem;
  border: 1px solid rgba(227, 201, 138, .45);
  border-radius: 999px;
  color: var(--ox-gold-light);
}

/* --- Hlavička podstránok --- */
.ox-page-head {
  background: linear-gradient(150deg, var(--ox-petrol-deep), var(--ox-petrol));
  color: var(--ox-white);
  padding: 4.2rem 0 3.4rem;
  font-family: var(--ox-font-sans);
  border-bottom: 4px solid var(--ox-gold);
}

.ox-page-head h1 {
  color: var(--ox-white);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
}

.ox-page-lead {
  color: #dfe9e8;
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 62ch;
  margin: 0;
}

/* --- Dvojstĺpcové rozloženie --- */
.ox-two-col {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 75px;
  align-items: start;
}

.ox-two-col.reverse {
  grid-template-columns: 1fr 1.5fr;
}

/* --- Karta so štatistikami (úvod) --- */
.ox-intro-card {
  background: var(--ox-petrol);
  border-radius: var(--ox-radius);
  padding: 2.2rem;
  box-shadow: var(--ox-shadow);
}

.ox-stat {
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(227, 201, 138, .25);
}

.ox-stat:last-child {
  border-bottom: 0;
}

.ox-stat-num {
  display: block;
  font-family: var(--ox-font-serif);
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--ox-gold-light);
}

.ox-stat-label {
  color: #cfdedd;
  font-size: .95rem;
  line-height: 1.5;
}

/* --- Karty služieb --- */
.ox-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 2.4rem;
}

.ox-cards-2 {
  grid-template-columns: repeat(2, 1fr);
}

.ox-card {
  background: var(--ox-white);
  border: 1px solid #e8e2d4;
  border-top: 3px solid var(--ox-gold);
  border-radius: var(--ox-radius);
  padding: 1.9rem 1.7rem;
  transition: transform .2s ease, box-shadow .2s ease;
}

.ox-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ox-shadow);
}

.ox-card-icon {
  font-size: 2rem;
  margin-bottom: .8rem;
}

.ox-card p {
  color: var(--ox-muted);
  font-size: .96rem;
  margin: 0;
}

/* --- Sekcia objednania --- */
.ox-booking {
  background: linear-gradient(150deg, var(--ox-petrol-deep), var(--ox-petrol));
  color: var(--ox-white);
}

.ox-booking h2 {
  color: var(--ox-white);
}

.ox-booking-lead {
  color: #dfe9e8;
  max-width: 66ch;
  margin: 0 auto 2.6rem;
  font-size: 1.08rem;
}

.ox-booking-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.ox-step {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(227, 201, 138, .3);
  border-radius: var(--ox-radius);
  padding: 1.8rem 1.6rem;
}

.ox-booking .ox-step h3 {
  color: var(--ox-gold-light);
}

.ox-booking .ox-step p {
  color: #dfe9e8;
  font-size: .96rem;
  margin: 0;
}

.ox-booking .ox-step a {
  color: var(--ox-gold-light);
  font-weight: 700;
}

.ox-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ox-gold);
  color: var(--ox-petrol-deep);
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.ox-booking-note {
  color: var(--ox-gold-light);
  font-weight: 600;
  margin-top: 1rem;
}

/* kroky na svetlom pozadí (kontakt) */
.ox-section-alt .ox-step {
  background: var(--ox-white);
  border-color: #e8e2d4;
}

.ox-section-alt .ox-step h3 {
  color: var(--ox-petrol);
}

.ox-section-alt .ox-step p {
  color: var(--ox-muted);
}

/* --- Zvýraznený box + zoznamy --- */
.ox-highlight {
  background: var(--ox-cream);
  border-left: 4px solid var(--ox-gold);
  border-radius: 0 var(--ox-radius) var(--ox-radius) 0;
  padding: 1.6rem 1.8rem;
  margin: 1.6rem 0 1.9rem;
}

.ox-section-alt .ox-highlight {
  background: var(--ox-white);
}

.ox-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ox-check-list li {
  padding: .42rem 0 .42rem 1.9rem;
  position: relative;
  line-height: 1.6;
}

.ox-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .42rem;
  color: var(--ox-gold);
  font-weight: 800;
}

.ox-num-list {
  padding-left: 1.2rem;
  margin: 0 0 1rem;
}

.ox-num-list li {
  padding: .35rem 0;
  line-height: 1.6;
}

.ox-plain-list {
  list-style: disc;
}

/* --- Bočný panel služby --- */
.ox-service-aside {
  background: var(--ox-cream);
  border: 1px solid #e8e2d4;
  border-radius: var(--ox-radius);
  padding: 2rem 1.8rem;
  position: sticky;
  top: 90px;
}

.ox-section-alt .ox-service-aside {
  background: var(--ox-white);
}

.ox-aside-note {
  font-size: .88rem;
  color: var(--ox-muted);
  margin: 1rem 0 0;
}

.ox-aside-baby .ox-baby-time {
  font-size: 1.25rem;
  color: var(--ox-petrol);
  line-height: 1.5;
}

/* --- Kontaktná stránka --- */
.ox-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.ox-contact-card {
  background: var(--ox-cream);
  border: 1px solid #e8e2d4;
  border-radius: var(--ox-radius);
  padding: 2rem 1.8rem;
}

.ox-contact-card h2 {
  font-size: 1.25rem;
  font-family: var(--ox-font-sans);
  font-weight: 700;
}

.ox-contact-primary {
  background: var(--ox-petrol);
  border: 0;
}

.ox-contact-primary h2,
.ox-contact-primary p {
  color: var(--ox-white);
}

.ox-phone-big {
  display: block;
  font-family: var(--ox-font-serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--ox-gold-light) !important;
  text-decoration: none !important;
  margin: .4rem 0 .2rem;
}

.ox-phone-mid {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ox-gold-light) !important;
  text-decoration: none !important;
  margin-bottom: 1rem;
}

.ox-hours {
  width: 100%;
  border-collapse: collapse;
  margin: .4rem 0;
}

.ox-hours td {
  padding: .5rem 0;
  border-bottom: 1px dashed #ddd3bd;
}

.ox-hours td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--ox-petrol);
}

.ox-address {
  line-height: 1.8;
}

.ox-floor {
  color: var(--ox-gold);
  font-size: 1.1rem;
}

.ox-company {
  padding: 2rem 0;
  background: var(--ox-petrol-deep);
}

.ox-company-info {
  color: #9db4b3;
  font-size: .85rem;
  line-height: 1.8;
  margin: 0;
}

/* --- Scroll-reveal animácie (spolupracuje s custom.js) --- */
.ox-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}

.ox-reveal.ox-visible {
  opacity: 1;
  transform: none;
}

/* --- Sticky lišta „Zavolať" na mobile (vkladá custom.js) --- */
.ox-callbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--ox-petrol-deep);
  border-top: 2px solid var(--ox-gold);
  padding: .7rem 1rem;
  text-align: center;
}

.ox-callbar a {
  color: var(--ox-gold-light) !important;
  font-weight: 800;
  font-size: 1.08rem;
  text-decoration: none !important;
  font-family: var(--ox-font-sans);
}

/* ============================================================
   HEADER (logo + menu + CTA)
   ============================================================ */
.ox-header {
  background: var(--ox-white);
  position: sticky;
  top: 0;
  z-index: 9998;
  font-family: var(--ox-font-sans);
  border-bottom: 1px solid #eee5d2;
  transition: box-shadow .2s ease;
}

.ox-header.ox-scrolled {
  box-shadow: 0 6px 24px rgba(9, 42, 44, .1);
}

.ox-header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: .7rem;
  padding-bottom: .7rem;
}

.ox-logo {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none !important;
  margin-right: auto;
}

.ox-logo-icon {
  display: flex;
}

.ox-logo-text strong {
  display: block;
  font-family: var(--ox-font-serif);
  font-size: 1.25rem;
  color: var(--ox-petrol);
  line-height: 1.1;
}

.ox-logo-text small {
  color: var(--ox-muted);
  font-size: .72rem;
  letter-spacing: .04em;
}

.ox-nav {
  display: flex;
  gap: 1.4rem;
}

.sp-megamenu-parent>li {
  padding: 0 15px;
}

.sp-megamenu-parent>li:last-child>a {
  padding: 0;
}

.sp-megamenu-parent>li>a,
.sp-megamenu-parent>li>span {
  line-height: 32px;
  padding: 0;
}

.sp-megamenu-parent>li>a,
.sp-megamenu-parent>li>span,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a {
  color: var(--ox-ink) !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: .95rem;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  font-family: var(--ox-font-sans);
}

.sp-megamenu-parent>li.active>a {
  font-weight: 600;
}

.sp-megamenu-parent>li:hover a,
.sp-megamenu-parent>li:hover span,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover>a,
.sp-megamenu-parent>li.active>a,
.sp-megamenu-parent>li.active:hover>a {
  color: var(--ox-petrol) !important;
  border-bottom-color: var(--ox-gold);
}

.ox-header-cta {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.ox-btn-header {
  padding: .65rem 1.3rem;
  font-size: .92rem;
  margin: 0;
}

.ox-burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: .4rem;
}

.ox-burger span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  background: var(--ox-petrol);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}

.ox-burger.ox-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.ox-burger.ox-open span:nth-child(2) {
  opacity: 0;
}

.ox-burger.ox-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============================================================
   DEKORATÍVNE TVARY (blob / oblúk ako v referenčnom layoute)
   ============================================================ */
.ox-hero,
.ox-section {
  position: relative;
  overflow: hidden;
}

.ox-blob {
  position: absolute;
  z-index: 0;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 26px solid var(--ox-gold);
  opacity: .16;
  pointer-events: none;
  transform: rotate(-25deg);
  border-left-color: transparent;
  /* efekt „C" oblúka */
}

.ox-blobby {
  position: absolute;
  z-index: 0;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 40px solid var(--ox-gold);
  opacity: .16;
  pointer-events: none;
  transform: rotate(-25deg);
  border-left-color: transparent;
}

.ox-blob-gold {
  border-color: var(--ox-gold);
  border-left-color: transparent;
}

.ox-footer .ox-blob-gold {
  transform: rotate(180deg);
}

.ox-blob-teal {
  border-color: var(--ox-petrol-soft);
  border-top-color: transparent;
  opacity: .18;
}

.ox-hero .ox-container,
.ox-section .ox-container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   FOTKY A PLACEHOLDERY
   ============================================================ */
.ox-photo {
  display: block;
  width: 100%;
  border-radius: var(--ox-radius);
  object-fit: cover;
  box-shadow: var(--ox-shadow);
}

.ox-photo-hero {
  aspect-ratio: 4 / 4.4;
  border: 4px solid rgba(227, 201, 138, .5);
}

.ox-photo-card {
  aspect-ratio: 16 / 10;
  /* margin-bottom: 1.3rem; */
}

.ox-map {
  aspect-ratio: 21 / 9;
  border: 0;
}

.ox-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.5px solid #b4c4bf;
  color: #52655f;
  font: 700 .95rem/1.5 var(--ox-font-sans);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
}

.ox-photo-placeholder img {
  border-radius: 16px;
  object-fit: cover;
  transition: transform .5s ease-in;
}

.ox-photo-placeholder:not(.home) img:hover {
  transform: scale(1.5);
}

.ox-photo-placeholder small {
  font-weight: 500;
  opacity: .75;
}

.ox-photo-dark {
  background:
    radial-gradient(circle at 30% 25%, rgba(201, 162, 75, .3), transparent 55%),
    linear-gradient(140deg, #123f43, #0c3134);
  border-color: rgba(227, 201, 138, .4);
  color: var(--ox-gold-light);
}

/* --- Hero mriežka (text + foto) --- */
.ox-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* ============================================================
   PÁS POISŤOVNÍ + INFOGRAFIKA
   ============================================================ */
.ox-insurance {
  background: var(--ox-cream);
  border-bottom: 1px solid #eee5d2;
  padding: 1.4rem 0;
  font-family: var(--ox-font-sans);
}

.ox-insurance .ox-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  text-align: center;
}

.ox-insurance-label {
  margin: 0;
  color: var(--ox-muted);
  font-size: .92rem;
  font-weight: 600;
}

.ox-insurance-logos {
  display: flex;
  gap: .8rem;
}

.ox-ins-badge {
  padding: .5rem 1.4rem;
  background: var(--ox-white);
  border: 2px solid var(--ox-gold);
  border-radius: 999px;
  font-weight: 800;
  color: var(--ox-petrol);
  letter-spacing: .03em;
}

.ox-infoband {
  background: var(--ox-cream);
}

.ox-info-icons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.4rem;
  margin-top: 2.6rem;
  text-align: center;
}

.ox-info-item strong {
  display: block;
  color: var(--ox-petrol);
  margin: .9rem 0 .3rem;
  font-size: .98rem;
}

.ox-info-item p {
  color: var(--ox-muted);
  font-size: .84rem;
  line-height: 1.5;
  margin: 0;
}

.ox-info-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  font-size: 1.9rem;
  background: var(--ox-white);
  border: 2px solid var(--ox-gold);
  box-shadow: 0 8px 20px rgba(201, 162, 75, .22);
  transition: transform .2s ease;
}

.ox-info-item:hover .ox-info-circle {
  transform: translateY(-5px) scale(1.06);
}

/* ============================================================
   FOOTER
   ============================================================ */
.ox-footer {
  /* background: linear-gradient(160deg, var(--ox-petrol) 0%, var(--ox-petrol-deep) 70%); */
  color: #cfdedd;
  font-family: var(--ox-font-sans);
  padding-top: 3.6rem;
}

.ox-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.4rem;
  position: relative;
  z-index: 1;
  padding-bottom: 2.6rem;
}

.ox-footer h3 {
  color: var(--ox-gold-light);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.ox-footer p {
  font-size: .93rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}

.ox-footer-logo {
  font-family: var(--ox-font-serif);
  font-size: 1.45rem;
  color: var(--ox-white);
  font-weight: 700;
}

.ox-footer-ins strong {
  color: var(--ox-gold-light);
}

.ox-footer-nav a {
  display: block;
  color: #cfdedd !important;
  text-decoration: none !important;
  padding: .3rem 0;
  font-size: .95rem;
}

.ox-footer-nav a:hover {
  color: var(--ox-gold-light) !important;
}

.ox-footer-bottom {
  border-top: 1px solid rgba(227, 201, 138, .25);
  padding: 1.2rem 0;
}

.ox-footer-bottom p {
  color: #8aa5a4;
  font-size: .8rem;
  margin: 0;
  text-align: center;
}

/* --- Responzivita --- */
@media (max-width: 991px) {

  .ox-two-col,
  .ox-cards,
  .ox-booking-steps,
  .ox-contact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ox-service-aside {
    position: static;
  }

  .ox-info-icons {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1rem;
  }

  .ox-hero-grid {
    grid-template-columns: 1fr;
  }

  .ox-photo-hero {
    max-width: 480px;
    margin: 0 auto;
  }

  .ox-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* mobilné menu */
  .ox-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--ox-white);
    border-bottom: 3px solid var(--ox-gold);
    box-shadow: 0 16px 30px rgba(9, 42, 44, .15);
    padding: .6rem 1.4rem 1rem;
  }

  .ox-nav.ox-open {
    display: flex;
  }

  .ox-nav a {
    padding: .85rem 0;
    border-bottom: 1px solid #efe9db;
  }

  .ox-burger {
    display: block;
  }

  .ox-btn-header {
    display: none;
  }
}

@media (max-width: 768px) {

  .ox-two-col,
  .ox-two-col.reverse,
  .ox-contact-grid,
  .ox-booking-steps {
    grid-template-columns: 1fr;
  }
  
  .reverse .ox-service-aside {
    order: 2;
  }

  .ox-btn {
    text-align: center !important;
  }

}

@media (max-width: 640px) {

  .ox-cards,
  .ox-cards-2,
  .ox-booking-steps,
  .ox-contact-grid {
    grid-template-columns: 1fr;
  }

  .ox-info-icons {
    grid-template-columns: repeat(2, 1fr);
  }

  .ox-footer-grid {
    grid-template-columns: 1fr;
  }

  .ox-blob {
    display: none;
  }

  .ox-section {
    padding: 3rem 0;
  }

  .ox-hero {
    padding: 4rem 0 3.4rem;
  }

  .ox-btn-xl {
    padding: 1rem 1.6rem;
    font-size: 1.02rem;
  }

  .ox-callbar {
    display: block;
  }

  body {
    padding-bottom: 48px;
  }
  
  .ox-hero-badges {
    justify-content: center;
  }


  .doublebtn {
    display: grid;
    justify-content: center;
  }
  /* miesto pre sticky lištu */
}

/* --- Prístupnosť: menej animácií, ak si to používateľ želá --- */
@media (prefers-reduced-motion: reduce) {
  .ox-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ox-btn,
  .ox-card {
    transition: none;
  }
}

#sp-bottom {
  padding: 0;
}

#sp-bottom .sp-module {
  margin-bottom: 0;
}

#sp-main-body {
  padding: 0;
}

/* Desktop mega-menu dropdown: default Helix dropdown has no spacing/shadow */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

body.ltr .sp-megamenu-parent>li.sp-has-child.dropdown-open>a:after,
body.ltr .sp-megamenu-parent>.klienti-separator.sp-has-child.dropdown-open>span:after {
  font-family: "Font Awesome 6 Free";
  content: "";
}

/* a) child link color/specificity fix */
.offcanvas-menu .offcanvas-inner ul.menu li.active>a, .offcanvas-menu .offcanvas-inner ul.menu li.active>.nav-header, .offcanvas-menu .offcanvas-inner ul.menu li.active>.mod-menu__heading {
  color: var(--ox-gold);
}

.offcanvas-menu .offcanvas-inner ul.menu>li>a,
.offcanvas-menu .offcanvas-inner ul.menu>li>span,
.offcanvas-menu .offcanvas-inner .sp-contact-info>li>a,
.offcanvas-menu .offcanvas-inner .social-icons>li>a {
  opacity: 1;
}

.offcanvas-menu .offcanvas-inner ul.menu-child li.active a,
.offcanvas-menu .offcanvas-inner ul.menu>li li:hover a {
  color: var(--ox-gold) !important;
}

.offcanvas-menu .offcanvas-inner ul.menu>li li a {
  color: var(--primary-foreground) !important;
}

/* b) mobile dynamic viewport height fix */
.offcanvas-menu {
  height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  height: 100dvh !important;
  height: 100vh !important;
  min-height: 100dvh !important;
  min-height: 100vh !important;
  height: auto !important;
  padding-bottom: env(safe-area-inset-bottom);
}

.offcanvas-menu .offcanvas-inner {
  max-height: calc(100svh - 60px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Supporting structural styles for the dark offcanvas pattern */
.offcanvas-menu .offcanvas-inner .sp-module:not(:last-child) {
  margin-right: 0;
  margin-bottom: 30px;
}

.offcanvas-menu .offcanvas-inner ul.menu>li {
  overflow: visible;
}

.offcanvas-menu .offcanvas-inner ul.menu>li>a,
.offcanvas-menu .offcanvas-inner ul.menu>li>span,
.offcanvas-menu .offcanvas-inner .sp-contact-info>li>a,
.offcanvas-menu .offcanvas-inner .social-icons>li>a {
  opacity: 1;
}

.offcanvas-menu .offcanvas-inner ul.menu>li>a,
.offcanvas-menu .offcanvas-inner ul.menu>li>span {
  padding: 15px 0;
  color: var(--primary-foreground);
  font-weight: 500;
}

.offcanvas-menu .offcanvas-inner ul.menu li.active span {
  color: var(--primary);
}

.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>span>.menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.menu-separator>.menu-toggler {
  color: var(--primary-foreground);
  border-radius: 50%;
  font-size: 20px;
}

.offcanvas-menu .offcanvas-inner ul.menu>li>ul li a {
  padding: 12px 0;
  display: block;
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   12. SCROLL-UP BUTTON
   -------------------------------------------------------------------------- */
.sp-scroll-up {
  bottom: 65px;
  right: 15px;
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 18px;
  color: #fff;
  background: rgba(100, 100, 100, 0.4);
}

.ox-btn-offcnvs {
  margin-left: 25px;
}

@media (max-width: 1199px) {
  .sp-megamenu-wrapper {
    display: none !important;
  }

  #offcanvas-toggler {
    display: inline-flex !important;
  }
}

.ox-btn span {
  white-space: nowrap;
}

.why-sek, .foo-sek {
  overflow: hidden;
}

.about-amb {
  align-items: center;
}

.ox-footer .logo-image {
  margin-bottom: 10px;
}

@media (max-width: 575px) {
  #sp-header {
    height: 60px;
  }
}