@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300..600&display=swap');

/* ============================================================
   skinspecialist.cz / bioby.cz — ss-kontakt-1.css — v1
   PRODUCTION CSS for /kontakt/ page (Shoptet Stránka)
   HYBRID PATTERN — ZERO JS. HTML lives in Shoptet page body
   (Vzhled a Obsah → Stránky → /kontakt/ → Zdrojový kód).

   DETECTION: body.in-kontakt (type-page)

   ZÁVISLOST: vyžaduje ss-docs-3.css (generic type-page rules mají
   :not(.in-kontakt), takže do /kontakt/ nebleedují). Nasadit SOUČASNĚ.

   OBSAH: intro → 2-sloupec (kontakty | mapa) → otevírací doba (cream band)
          → B2B cross-link (sage band). Bez formuláře (per zadání).
   TOKENS z style.css?v=11 (fallbacky included).
   ============================================================ */


/* ============================================================
   0) NEUTRALIZE Shoptet page chrome — full-width breakout base
   (stejný pattern jako ss-b2b-3)
   ============================================================ */
body.in-kontakt aside.sidebar,
body.in-kontakt .sidebar-left,
body.in-kontakt .sidebar-right,
body.in-kontakt .sidebar { display: none !important; }

body.in-kontakt .container.content-wrapper,
body.in-kontakt .content-wrapper-in,
body.in-kontakt main#content,
body.in-kontakt main#content.narrow,
body.in-kontakt main#content .content-inner,
body.in-kontakt .pageArticleDetail,
body.in-kontakt .pageArticleDetail > [itemprop="about"] {
  display: block !important;
  background: transparent !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: none !important;
}
body.in-kontakt { background: var(--ss-canvas, #F2EBDB); }
body.in-kontakt .breadcrumbs-wrapper { display: none !important; }

/* ss-docs SLUG pravidlo `body.type-page.in-kontakt .content-wrapper-in` přidává
   padding clamp(48–96) [strany] clamp(64–112) !important (spec 0,3,1) → béžový pruh
   DOLE (před footerem) i zbytečná mezera NAHOŘE. Přebíjíme ID specificitou (1,2,1). */
body.in-kontakt #content-wrapper .content-wrapper-in {
  padding: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Hide native Shoptet page title (article header h1) — náš intro h2 stays */
body.in-kontakt .pageArticleDetail > header,
body.in-kontakt .pageArticleDetail > header[itemprop="headline"],
body.in-kontakt article.pageArticleDetail > header { display: none !important; }


/* ============================================================
   1) ROOT — break out to full viewport width
   ============================================================ */
body.in-kontakt .ss-kontakt {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--ss-canvas, #F2EBDB);
  font-family: var(--ss-sans, sans-serif);
  color: var(--ss-text, #0F0F0F);
  overflow: hidden;
}
body.in-kontakt .ss-k__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(16px, 2vw, 32px);
}
body.in-kontakt .ss-k__inner--narrow { max-width: 680px; text-align: center; }
body.in-kontakt .ss-k__sec { padding: clamp(32px, 3.5vw, 56px) 0; }


/* ============================================================
   2) SHARED — eyebrow / heading / lead
   ============================================================ */
body.in-kontakt .ss-k__eyebrow {
  display: block;
  font-family: var(--ss-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ss-sage, #6B8B85);
  margin: 0 0 16px;
}
body.in-kontakt .ss-k__h2 {
  font-family: var(--ss-serif, serif);
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ss-black, #0F0F0F);
  margin: 0 0 18px;
}
body.in-kontakt .ss-k__h2 em { font-style: italic; color: var(--ss-sage, #6B8B85); }
body.in-kontakt .ss-k__lead {
  font-family: var(--ss-body-serif, 'Source Serif 4', Georgia, serif);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  margin: 0;
}


/* ============================================================
   3) INTRO — centered head
   ============================================================ */
/* Intro top = standardní 56px sekce (z .ss-k__sec) — konzistentní s ostatními
   sekcemi. Skutečný viník velké mezery byl ss-docs wrapper padding (fix výše), ne intro. */
body.in-kontakt .ss-k__intro { padding-bottom: clamp(10px, 1.5vw, 20px); }
body.in-kontakt .ss-k__head { max-width: 720px; margin: 0 auto; text-align: center; }
body.in-kontakt .ss-k__head .ss-k__lead { margin: 0 auto; max-width: 560px; }


/* ============================================================
   4) MAIN — 2-col: contact details | map
   ============================================================ */
body.in-kontakt .ss-k__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
body.in-kontakt .ss-k__details { display: flex; flex-direction: column; }
body.in-kontakt .ss-k__row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: clamp(16px, 1.8vw, 22px) 0;
  border-bottom: 1px solid var(--ss-border-soft, rgba(15, 15, 15, .08));
  text-decoration: none;
  color: inherit;
}
body.in-kontakt .ss-k__row:first-child { padding-top: 0; }
body.in-kontakt .ss-k__row-ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ss-sage, #6B8B85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ss-sage, #6B8B85);
  flex-shrink: 0;
  transition: background .25s cubic-bezier(.4,0,.2,1), color .25s cubic-bezier(.4,0,.2,1);
}
body.in-kontakt .ss-k__row-ic svg { width: 20px; height: 20px; display: block; }
body.in-kontakt .ss-k__row-body { display: flex; flex-direction: column; gap: 4px; padding-top: 3px; }
body.in-kontakt .ss-k__row-label {
  font-family: var(--ss-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
}
body.in-kontakt .ss-k__row-val {
  font-family: var(--ss-body-serif, 'Source Serif 4', Georgia, serif);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.4;
  color: var(--ss-black, #0F0F0F);
  transition: color .25s cubic-bezier(.4,0,.2,1);
}
/* Ikona reaguje na hover u VŠECH řádků (i nelinkových); text mění barvu jen u linků */
body.in-kontakt .ss-k__row:hover .ss-k__row-ic { background: var(--ss-sage, #6B8B85); color: #fff; }
body.in-kontakt a.ss-k__row:hover .ss-k__row-val { color: var(--ss-terracotta, #9A7A5F); }

body.in-kontakt .ss-k__map {
  border-radius: 8px;
  overflow: hidden;
  background: var(--ss-cream, #E8DDC8);
  min-height: 400px;
  height: 100%;
}
body.in-kontakt .ss-k__map iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
  display: block;
}


/* ============================================================
   4b) SALON STORY — 2-col foto + povídání (kosmetička, prostor)
   ============================================================ */
body.in-kontakt .ss-k__salon-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
body.in-kontakt .ss-k__salon-photo {
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ss-cream, #E8DDC8);
}
body.in-kontakt .ss-k__salon-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.in-kontakt .ss-k__salon-copy p {
  font-family: var(--ss-body-serif, 'Source Serif 4', Georgia, serif);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--ss-text, #0F0F0F);
  margin: 0 0 16px;
}
body.in-kontakt .ss-k__salon-sign {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ss-border-soft, rgba(15, 15, 15, .08));
  font-family: var(--ss-serif, serif);
  font-size: 18px;
  color: var(--ss-black, #0F0F0F);
}
body.in-kontakt .ss-k__salon-sign span {
  display: block;
  margin-top: 3px;
  font-family: var(--ss-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
}


/* ============================================================
   4c) ÚŘEDNÍ ÚDAJE — 3-col: fakturační / vrácení / bankovní
   ============================================================ */
body.in-kontakt .ss-k__official-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
}
body.in-kontakt .ss-k__official-title {
  font-family: var(--ss-serif, serif);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ss-black, #0F0F0F);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ss-border-soft, rgba(15, 15, 15, .08));
}
body.in-kontakt .ss-k__official-body p {
  font-family: var(--ss-body-serif, 'Source Serif 4', Georgia, serif);
  font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.7;
  color: var(--ss-text, #0F0F0F);
  margin: 0 0 14px;
}
body.in-kontakt .ss-k__official-body p:last-child { margin-bottom: 0; }
body.in-kontakt .ss-k__official-body strong { font-weight: 600; color: var(--ss-black, #0F0F0F); }
body.in-kontakt .ss-k__official-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 11px 22px;
  font-family: var(--ss-sans, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--ss-black, #0F0F0F);
  border-radius: 4px;
  transition: background .25s cubic-bezier(.4,0,.2,1), gap .25s cubic-bezier(.4,0,.2,1);
}
body.in-kontakt .ss-k__official-link:hover { background: var(--ss-sage, #6B8B85); gap: 12px; }


/* ============================================================
   5) OPENING HOURS — full-bleed cream band, card
   ============================================================ */
body.in-kontakt .ss-k__hours-sec { background: var(--ss-cream, #E8DDC8); }
body.in-kontakt .ss-k__hours-card { max-width: 620px; margin: 0 auto; text-align: center; }
body.in-kontakt .ss-k__hours-title {
  font-family: var(--ss-serif, serif);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ss-black, #0F0F0F);
  margin: 0 0 clamp(20px, 2.4vw, 32px);
}
body.in-kontakt .ss-k__hours { list-style: none; margin: 0; padding: 0; }
body.in-kontakt .ss-k__hours li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(15, 15, 15, .12);
}
body.in-kontakt .ss-k__hours li:last-child { border-bottom: 0; }
body.in-kontakt .ss-k__hours li > span:first-child {
  font-family: var(--ss-sans, sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ss-black, #0F0F0F);
}
body.in-kontakt .ss-k__hours li > span:last-child {
  font-family: var(--ss-body-serif, 'Source Serif 4', Georgia, serif);
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ss-terracotta, #9A7A5F);
}
body.in-kontakt .ss-k__hours-note {
  font-family: var(--ss-sans, sans-serif);
  font-size: 12.5px;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  margin: clamp(18px, 2vw, 24px) 0 0;
}


/* ============================================================
   6) B2B CROSS-LINK — full-bleed sage band
   ============================================================ */
body.in-kontakt .ss-k__b2b { background: var(--ss-sage, #6B8B85); color: #fff; }
body.in-kontakt .ss-k__b2b .ss-k__eyebrow { color: rgba(255,255,255,.7); }
body.in-kontakt .ss-k__b2b .ss-k__h2 { color: #fff; }
body.in-kontakt .ss-k__b2b .ss-k__h2 em { color: rgba(255,255,255,.7); }
body.in-kontakt .ss-k__b2b-lead {
  font-family: var(--ss-body-serif, 'Source Serif 4', Georgia, serif);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: rgba(255,255,255,.85);
  margin: 0 auto clamp(28px, 3vw, 36px);
  max-width: 460px;
}
body.in-kontakt .ss-k__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  font-family: var(--ss-sans, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  transition: background .25s cubic-bezier(.4,0,.2,1), color .25s cubic-bezier(.4,0,.2,1), gap .25s cubic-bezier(.4,0,.2,1);
}
body.in-kontakt .ss-k__btn--white { background: #fff; color: var(--ss-black, #0F0F0F); }
body.in-kontakt .ss-k__btn--white:hover { background: var(--ss-cream, #E8DDC8); color: var(--ss-black, #0F0F0F); gap: 12px; }


/* ============================================================
   7) RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  body.in-kontakt .ss-k__grid { grid-template-columns: 1fr; gap: 28px; }
  body.in-kontakt .ss-k__map { order: 2; min-height: 320px; }
  body.in-kontakt .ss-k__map iframe { min-height: 320px; }
  body.in-kontakt .ss-k__salon-grid { grid-template-columns: 1fr; gap: 28px; }
  body.in-kontakt .ss-k__salon-photo { order: -1; max-width: 360px; margin: 0 auto; }
  body.in-kontakt .ss-k__official-grid { grid-template-columns: 1fr; gap: 32px; }
}


/* ============================================================
   8) REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.in-kontakt .ss-k__row-ic,
  body.in-kontakt .ss-k__row-val,
  body.in-kontakt .ss-k__btn { transition: none; }
}