.wpcf7 .screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	word-wrap: normal !important;
}

.wpcf7 .hidden-fields-container {
	display: none;
}

.wpcf7 form .wpcf7-response-output {
	margin: 2em 0.5em 1em;
	padding: 0.2em 1em;
	border: 2px solid #00a0d2; /* Blue */
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #46b450; /* Green */
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #dc3232; /* Red */
}

.wpcf7 form.spam .wpcf7-response-output {
	border-color: #f56e28; /* Orange */
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #ffb900; /* Yellow */
}

.wpcf7-form-control-wrap {
	position: relative;
}

.wpcf7-not-valid-tip {
	color: #dc3232; /* Red */
	font-size: 1em;
	font-weight: normal;
	display: block;
}

.use-floating-validation-tip .wpcf7-not-valid-tip {
	position: relative;
	top: -2ex;
	left: 1em;
	z-index: 100;
	border: 1px solid #dc3232;
	background: #fff;
	padding: .2em .8em;
	width: 24em;
}

.wpcf7-list-item {
	display: inline-block;
	margin: 0 0 0 1em;
}

.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
	content: " ";
}

.wpcf7-spinner {
	visibility: hidden;
	display: inline-block;
	background-color: #23282d; /* Dark Gray 800 */
	opacity: 0.75;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 100%;
	padding: 0;
	margin: 0 24px;
	position: relative;
}

form.submitting .wpcf7-spinner {
	visibility: visible;
}

.wpcf7-spinner::before {
	content: '';
	position: absolute;
	background-color: #fbfbfc; /* Light Gray 100 */
	top: 4px;
	left: 4px;
	width: 6px;
	height: 6px;
	border: none;
	border-radius: 100%;
	transform-origin: 8px 8px;
	animation-name: spin;
	animation-duration: 1000ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7-spinner::before {
		animation-name: blink;
		animation-duration: 2000ms;
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes blink {
	from {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.wpcf7 [inert] {
	opacity: 0.5;
}

.wpcf7 input[type="file"] {
	cursor: pointer;
}

.wpcf7 input[type="file"]:disabled {
	cursor: default;
}

.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed;
}

.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
	direction: ltr;
}

.wpcf7-reflection > output {
	display: list-item;
	list-style: none;
}

.wpcf7-reflection > output[hidden] {
	display: none;
}
#cookie-notice{position:fixed;min-width:100%;height:auto;z-index:100000;font-size:13px;letter-spacing:0;line-height:20px;left:0;text-align:center;font-weight:400;font-family:-apple-system,BlinkMacSystemFont,Arial,Roboto,"Helvetica Neue",sans-serif}#cookie-notice,#cookie-notice *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#cookie-notice.cn-animated{-webkit-animation-duration:.5s!important;animation-duration:.5s!important;-webkit-animation-fill-mode:both;animation-fill-mode:both}#cookie-notice.cn-animated.cn-effect-none{-webkit-animation-duration:1ms!important;animation-duration:1ms!important}#cookie-notice .cookie-notice-container{display:block}#cookie-notice.cookie-notice-hidden .cookie-notice-container{display:none}#cookie-notice .cookie-revoke-container{display:block}#cookie-notice.cookie-revoke-hidden .cookie-revoke-container{display:none}.cn-position-top{top:0}.cn-position-bottom{bottom:0}.cookie-notice-container{padding:15px 30px;text-align:center;width:100%;z-index:2}.cookie-revoke-container{padding:15px 30px;width:100%;z-index:1}.cn-close-icon{position:absolute;right:15px;top:50%;margin:-10px 0 0 0;width:15px;height:15px;opacity:.5;padding:10px;border:none;outline:0;background:0 0;box-shadow:none;cursor:pointer}.cn-close-icon:focus,.cn-close-icon:focus-visible{outline:2px solid currentColor;outline-offset:3px}.cn-close-icon:hover{opacity:1}.cn-close-icon:after,.cn-close-icon:before{position:absolute;content:' ';height:15px;width:2px;top:3px;background-color:grey}.cn-close-icon:before{transform:rotate(45deg)}.cn-close-icon:after{transform:rotate(-45deg)}#cookie-notice .cn-revoke-cookie{margin:0}#cookie-notice .cn-button{margin:0 0 0 10px;display:inline-block}#cookie-notice .cn-button:not(.cn-button-custom){font-family:-apple-system,BlinkMacSystemFont,Arial,Roboto,"Helvetica Neue",sans-serif;font-weight:400;font-size:13px;letter-spacing:.25px;line-height:20px;margin:0 0 0 10px;text-align:center;text-transform:none;display:inline-block;cursor:pointer;touch-action:manipulation;white-space:nowrap;outline:0;box-shadow:none;text-shadow:none;border:none;-webkit-border-radius:2rem;-moz-border-radius:2rem;border-radius:2rem;text-decoration:none;padding:8.5px 10px;line-height:1;color:inherit}.cn-text-container{margin:0 0 6px 0}.cn-buttons-container,.cn-text-container{display:inline-block}.cn-compliance-warning{display:block;color:#f5a623!important;font-size:12px;line-height:18px;margin:4px 0 8px 0}.cn-compliance-warning .cn-warning-icon{color:#f5a623!important;margin-right:4px}.cn-compliance-warning strong{color:#f5a623!important}.cn-compliance-warning a{color:#f5a623!important;text-decoration:underline}.cn-compliance-warning a:hover{color:#ffb84d!important}#cookie-notice.cookie-notice-visible.cn-effect-none,#cookie-notice.cookie-revoke-visible.cn-effect-none{-webkit-animation-name:fadeIn;animation-name:fadeIn}#cookie-notice.cn-effect-none{-webkit-animation-name:fadeOut;animation-name:fadeOut}#cookie-notice.cookie-notice-visible.cn-effect-fade,#cookie-notice.cookie-revoke-visible.cn-effect-fade{-webkit-animation-name:fadeIn;animation-name:fadeIn}#cookie-notice.cn-effect-fade{-webkit-animation-name:fadeOut;animation-name:fadeOut}#cookie-notice.cookie-notice-visible.cn-effect-slide,#cookie-notice.cookie-revoke-visible.cn-effect-slide{-webkit-animation-name:slideInUp;animation-name:slideInUp}#cookie-notice.cn-effect-slide{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}#cookie-notice.cookie-notice-visible.cn-position-top.cn-effect-slide,#cookie-notice.cookie-revoke-visible.cn-position-top.cn-effect-slide{-webkit-animation-name:slideInDown;animation-name:slideInDown}#cookie-notice.cn-position-top.cn-effect-slide{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@-webkit-keyframes slideInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOutDown{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes slideInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOutUp{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@media all and (max-width:900px){.cookie-notice-container #cn-notice-text{display:block}.cookie-notice-container #cn-notice-buttons{display:block}#cookie-notice .cn-button{margin:0 5px 5px 5px}}@media all and (max-width:480px){.cookie-notice-container,.cookie-revoke-container{padding:15px 25px}}/*
Theme Name: Janachowska Concept Store
Theme URI: https://janachowska.pl
Author: Janachowska
Author URI: https://janachowska.pl
Description: Pełny motyw WordPress dla Janachowska Concept Store — butik modowy z kolekcjami, rezerwacją wizyt, blogiem i formularzem kontaktowym. Wymaga ACF Pro.
Version: 5.6.15
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: janachowska
Tags: custom-menu, custom-logo, featured-images, full-width-template, theme-options
*/

/* ========================================
   LOCAL FONTS — Self-hosted Barlow & Lato
   (PF Marlet Display remains in Adobe Fonts)
   ======================================== */
@font-face {
  font-family: 'barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/wp-content/themes/janachowska-theme/assets/fonts/barlow-300.woff2') format('woff2');
}
@font-face {
  font-family: 'barlow';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/wp-content/themes/janachowska-theme/assets/fonts/barlow-300-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/themes/janachowska-theme/assets/fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'barlow';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/themes/janachowska-theme/assets/fonts/barlow-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/wp-content/themes/janachowska-theme/assets/fonts/lato-300.woff2') format('woff2');
}
@font-face {
  font-family: 'lato';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/wp-content/themes/janachowska-theme/assets/fonts/lato-300-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/themes/janachowska-theme/assets/fonts/lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/themes/janachowska-theme/assets/fonts/lato-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/wp-content/themes/janachowska-theme/assets/fonts/lato-700.woff2') format('woff2');
}

/* ========================================
   CSS VARIABLES — Design Tokens from Figma
   ======================================== */
:root {
  /* Brand colors */
  --jcs-gold: #bc8f4d;
  --jcs-gold-hover: #a67d3d;
  --jcs-dark: #333333;
  --jcs-black: #000000;
  --jcs-white: #ffffff;
  --jcs-bg: #ffffff;
  --jcs-bg-warm: #faf8f5;
  --jcs-cream: #F5F3EF;
  --jcs-border: #ebebeb;
  --jcs-footer-bg: #333333;

  /* Typography — Typekit project: zfz5cdn */
  --font-display: 'pf-marlet-display', Georgia, serif;
  --font-body: 'barlow', Arial, sans-serif;
  --font-ui: 'lato', Arial, sans-serif;

  /* Spacing */
  --container-max: 1640px;
  --content-max: 1080px;
  --container-px: 2.5rem;
  --container-px-mobile: 1.5rem;
}

/* ========================================
   RESET & BASE
   ======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--jcs-dark);
  background-color: var(--jcs-bg);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ========================================
   TYPOGRAPHY UTILITIES
   ======================================== */
.font-display {
  font-family: var(--font-display);
}

.font-body {
  font-family: var(--font-body);
}

.font-ui {
  font-family: var(--font-ui);
}

/* ========================================
   LAYOUT UTILITIES
   ======================================== */
.jcs-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-px-mobile);
  padding-right: var(--container-px-mobile);
}

@media (min-width: 1024px) {
  .jcs-container {
    padding-left: var(--container-px);
    padding-right: var(--container-px);
  }
}

.jcs-content {
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-px-mobile);
  padding-right: var(--container-px-mobile);
}

@media (min-width: 1024px) {
  .jcs-content {
    padding-left: var(--container-px);
    padding-right: var(--container-px);
  }
}

/* ========================================
   GOLD TOP BAR
   ======================================== */
.jcs-top-bar {
  width: 100%;
  background-color: var(--jcs-gold);
  min-height: 40px;
  position: relative;
  z-index: 60;
}

.jcs-top-bar p {
  font-family: var(--font-ui);
  font-weight: 400;           /* Figma: Lato Regular 400 */
  color: var(--jcs-white);
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;            /* Figma: Lato 16px */
  letter-spacing: 0;          /* Figma: 0 letterSpacing */
  line-height: 40px;
}

.jcs-top-bar .mobile-lines {
  display: none;
}

@media (max-width: 639px) {
  .jcs-top-bar p.desktop-line {
    display: none;
  }
  .jcs-top-bar .mobile-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    gap: 2px;
  }
  .jcs-top-bar .mobile-lines span {
    font-family: var(--font-ui);
    color: var(--jcs-white);
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
  }
}

/* ========================================
   HEADER / NAVIGATION
   ======================================== */
.jcs-header {
  width: 100%;
  z-index: 50;
  /* Only transition color/bg, not position — avoids jump animation */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  /* No fixed height — header grows naturally to include the search bar */
}

.jcs-header.transparent {
  background: transparent;
  position: absolute;
  top: 40px; /* desktop top bar height */
  left: 0;
  right: 0;
}

/* Mobile: top bar is taller (3 lines), adjust header position */
@media (max-width: 639px) {
  .jcs-header.transparent {
    top: var(--top-bar-height, 96px);
  }
}

.jcs-header.white {
  position: sticky;
  top: 0;
  background: var(--jcs-white);
  border-bottom: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* Scrolled state: white header stays sticky — no position change needed, no jump */
.jcs-header.white.scrolled {
  /* sticky already handles this; just update visual state */
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Scrolled state for transparent header: switch to fixed + slide-in animation */
.jcs-header.transparent.scrolled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--jcs-white);
  border-bottom: 1px solid var(--jcs-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  animation: slideDown 0.3s ease;
  will-change: transform;
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Scrolled state overrides transparent — must use higher specificity */
.jcs-header.scrolled .jcs-nav a,
.jcs-header.transparent.scrolled .jcs-nav a {
  color: var(--jcs-black) !important;
}

.jcs-header.scrolled .jcs-nav a:hover,
.jcs-header.scrolled .jcs-nav a.active,
.jcs-header.transparent.scrolled .jcs-nav a:hover,
.jcs-header.transparent.scrolled .jcs-nav a.active {
  color: var(--jcs-gold) !important;
}

.jcs-header.scrolled .jcs-header-right a,
.jcs-header.transparent.scrolled .jcs-header-right a {
  color: var(--jcs-black) !important;
}

.jcs-header.scrolled .jcs-header-logo svg path {
  fill: var(--jcs-black);
}

.jcs-header.scrolled .jcs-mobile-toggle svg {
  stroke: var(--jcs-black);
}

/* Transparent header: when scrolled, also needs logo swap to dark */
.jcs-header.transparent.scrolled .jcs-header-logo svg path {
  fill: var(--jcs-black);
}

.jcs-header-inner {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  position: relative;
}

/* Mobile: hamburger left, logo centered absolutely */
@media (max-width: 1023px) {
  .jcs-header-inner {
    justify-content: flex-start;
  }
  .jcs-header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .jcs-header-right {
    margin-left: auto;
  }
}

@media (min-width: 640px) {
  .jcs-header-inner {
    padding: 0 24px;
  }
}

@media (min-width: 1024px) {
  .jcs-header-inner {
    padding: 0 40px;
  }
}

/* Logo */
.jcs-header-logo svg {
  height: 44px;
  width: auto;
}

@media (max-width: 639px) {
  .jcs-header-logo svg {
    height: 32px;
  }
}

/* Nav links */
.jcs-nav {
  display: none;
  align-items: center;
  gap: 28px;
}

@media (min-width: 1024px) {
  .jcs-nav {
    display: flex;
  }
}

/* Reset wp_nav_menu list structure */
.jcs-nav ul,
.jcs-nav-list {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jcs-nav li,
.jcs-nav-list li {
  display: contents;
}
.jcs-nav li.menu-item-has-children {
  display: block;
  position: relative;
}
.jcs-nav li.menu-item-has-children > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 8px;
  z-index: 50;
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
}
.jcs-nav li.menu-item-has-children:hover > ul {
  display: block;
}
.jcs-nav li.menu-item-has-children > ul > li {
  display: block;
}
.jcs-nav li.menu-item-has-children > ul > li > a {
  display: block;
  padding: 8px 20px;
  font-size: 16px;
  color: var(--jcs-black) !important;
  background: var(--jcs-white);
  white-space: nowrap;
}
.jcs-nav li.menu-item-has-children > ul {
  background: var(--jcs-white);
  border: 1px solid var(--jcs-border);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  min-width: 260px;
}

.jcs-nav a {
  font-family: var(--font-ui);
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.48px;
  white-space: nowrap;
  transition: color 0.2s;
  color: var(--jcs-black); /* Default: dark text (white overridden for transparent header) */
}

.jcs-header.transparent .jcs-nav a {
  color: var(--jcs-white);
}

.jcs-header.transparent .jcs-nav a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.jcs-header.white .jcs-nav a {
  color: var(--jcs-black);
}

.jcs-header.white .jcs-nav a:hover,
.jcs-nav a.active {
  color: var(--jcs-gold);
}

/* Dropdown */
.jcs-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.jcs-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 8px;
  z-index: 50;
}

.jcs-dropdown:hover .jcs-dropdown-menu {
  display: block;
}

.jcs-dropdown-inner {
  background: var(--jcs-white);
  border: 1px solid var(--jcs-border);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 12px 0;
  min-width: 260px;
}

.jcs-dropdown-inner a {
  display: block;
  padding: 8px 20px;
  font-family: var(--font-ui);
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.3px;
  color: var(--jcs-black) !important;
  transition: all 0.2s;
}

.jcs-dropdown-inner a:hover {
  color: var(--jcs-gold);
  background: var(--jcs-bg-warm);
}

/* Header right — phone + Zapytaj Izę */
.jcs-header-right {
  display: none;
  align-items: center;
  gap: 20px;
}

@media (min-width: 1024px) {
  .jcs-header-right {
    display: flex;
  }
}

.jcs-header-right a {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--jcs-black); /* Default: dark text */
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}

.jcs-header.transparent .jcs-header-right a {
  color: var(--jcs-white);
}

.jcs-header.transparent .jcs-header-right a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.jcs-header.white .jcs-header-right a {
  color: var(--jcs-black);
}

.jcs-header.white .jcs-header-right a:hover {
  color: var(--jcs-gold);
}

/* Zapytaj Izę button */
.jcs-zapytaj-ize {
  text-transform: uppercase;
}

.jcs-iza-avatar {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.jcs-iza-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.jcs-iza-avatar .sparkle-icon {
  position: absolute;
  top: -2px;
  left: -2px;
}

/* Mobile menu */
.jcs-mobile-toggle {
  display: block;
  padding: 4px;
}

@media (min-width: 1024px) {
  .jcs-mobile-toggle {
    display: none;
  }
}

.jcs-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
}

.jcs-mobile-menu.open {
  display: block;
}

.jcs-mobile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.jcs-mobile-panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 280px;
  background: var(--jcs-white);
  box-shadow: 10px 0 25px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  animation: slideInLeft 0.2s ease;
  will-change: transform;
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.jcs-mobile-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--jcs-border);
}

.jcs-mobile-panel nav a {
  display: block;
  padding: 12px 20px;
  font-family: var(--font-ui);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.48px;
  color: var(--jcs-black);
  transition: color 0.2s;
}

.jcs-mobile-panel nav a:hover {
  color: var(--jcs-gold);
}

.jcs-mobile-panel nav .sub-menu a {
  padding-left: 36px;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: rgba(0, 0, 0, 0.7);
}

/* Accessibility: visually hidden but screen-reader accessible */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ========================================
   STICKY SEARCH BAR (inside scrolled header)
   ======================================== */
.jcs-sticky-search {
  display: block; /* always visible — below nav on white header */
  padding: 0 24px 12px;
  background: var(--jcs-white);
  border-top: none;
}

.jcs-sticky-search-inner {
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d4c9b8;
  border-radius: 2px;
  padding: 10px 16px;
  background: #fff;
}

.jcs-sticky-search-inner svg {
  flex-shrink: 0;
  color: #888;
  width: 18px;
  height: 18px;
}

.jcs-sticky-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Lato', var(--font-body), sans-serif;
  /* 16px minimum prevents iOS auto-zoom on focus */
  font-size: 16px;
  font-weight: 300;
  color: var(--jcs-black);
  letter-spacing: 0.2px;
  line-height: 1;
}

.jcs-sticky-search-submit {
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #888;
  display: flex;
  align-items: center;
  line-height: 1;
}

.jcs-sticky-search-submit:hover {
  color: var(--jcs-black);
}

.jcs-sticky-search-input::placeholder {
  color: #aaa;
}

/* ========================================
   HERO SLIDER
   ======================================== */
.jcs-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 746px;
}
@media (max-width: 1023px) {
  .jcs-hero {
    height: 449px;
  }
}

.jcs-hero-slide {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 0 0 100%;
}

.jcs-hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jcs-hero-slide .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.jcs-hero-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 0 24px;
}

.jcs-hero-content h1,
.jcs-hero-content h2 {
  font-family: var(--font-display);
  color: var(--jcs-white);
  font-weight: 300;
  line-height: 1.4;
  max-width: 700px;
  white-space: pre-line;
  font-size: 30px; /* mobile */
}

.jcs-hero-content p {
  font-family: 'barlow', var(--font-body), sans-serif;
  font-style: normal;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
  margin-top: 24px;
  max-width: 500px;
  white-space: pre-line;
  font-size: 16px; /* mobile */
  line-height: 26px;
}

@media (min-width: 1024px) {
  .jcs-hero-content h1,
  .jcs-hero-content h2 {
    font-size: 48px;
  }
  .jcs-hero-content p {
    font-size: 24px;
  }
}

/* Hero arrows */
.jcs-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  color: var(--jcs-white);
  transition: background 0.2s;
}

.jcs-hero-arrow:hover {
  background: rgba(255, 255, 255, 0.4);
}

.jcs-hero-arrow.prev { left: 16px; }
.jcs-hero-arrow.next { right: 16px; }

/* Hero dots */
.jcs-hero-dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 12px;
}

.jcs-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.2s;
}

.jcs-hero-dot.active {
  background: var(--jcs-white);
}

/* ========================================
   HERO SLIDER (new wrapper — .jcs-hero-slider)
   Supports both image slides and Vimeo video background.
   ======================================== */
.jcs-hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 746px;
}
@media (max-width: 1023px) {
  .jcs-hero-slider {
    height: 449px;
  }
}
/* --- Video background layer --- */
.jcs-hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0a0a0a;
}
/* Native HTML5 <video> background — object-fit:cover fills container perfectly */
.jcs-hero-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fills container, crops excess — no black bars */
  object-position: center center;
  pointer-events: none;
  display: none; /* hidden by default; shown via breakpoint rules below */
}
/* Single video (same for all breakpoints) — always visible */
.jcs-hero-video-el:not(.jcs-hero-video-desktop):not(.jcs-hero-video-mobile) {
  display: block;
}
/* Desktop video: shown on >=768px */
@media (min-width: 768px) {
  .jcs-hero-video-desktop {
    display: block;
  }
}
/* Mobile video: shown on <768px */
@media (max-width: 767px) {
  .jcs-hero-video-mobile {
    display: block;
  }
}
/* In video mode, hero-content must be absolutely positioned to fill section */
.jcs-hero.has-video .jcs-hero-content {
  position: absolute;
  inset: 0;
  z-index: 10;
  height: auto;
}
/* Dark gradient overlay over video — matches image slide overlay */
.jcs-hero.has-video .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.45) 50%,
    rgba(0,0,0,0.55) 100%
  );
  pointer-events: none;
}
/* Legacy selector kept for compatibility */
.jcs-hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
/* --- Slide track --- */
.jcs-hero-slider .slider-track {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.jcs-hero-slider .slider-track.video-mode {
  position: absolute;
  inset: 0;
}
.jcs-hero-slider .slider-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.jcs-hero-slider .slider-slide.active {
  opacity: 1;
}
/* Image-mode: slides stack inside track */
.jcs-hero-slider .slider-track:not(.video-mode) .slider-slide {
  position: relative;
  height: 100%;
  flex: 0 0 100%;
}
/* Per-slide overlay (image mode) */
.jcs-hero-slider .slider-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
/* In video mode, per-slide overlay is transparent (global overlay handles it) */
.jcs-hero-slider .slider-track.video-mode .slider-overlay {
  background: transparent;
}
/* Slide content (title, subtitle, CTA) */
.jcs-hero-slider .slider-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}
.jcs-hero-slider .slider-content h1 {
  font-family: var(--font-display);
  color: var(--jcs-white);
  font-weight: 300;
  line-height: 1.4;
  max-width: 700px;
  font-size: 30px;
}
.jcs-hero-slider .slider-content p {
  font-family: 'barlow', var(--font-body), sans-serif;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
  margin-top: 24px;
  max-width: 500px;
  font-size: 16px;
  line-height: 26px;
}
@media (min-width: 1024px) {
  .jcs-hero-slider .slider-content h1 {
    font-size: 48px;
  }
  .jcs-hero-slider .slider-content p {
    font-size: 24px;
  }
}
/* Slider navigation arrows */
.jcs-hero-slider .slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  color: var(--jcs-white);
  transition: background 0.2s;
  border: none;
  cursor: pointer;
}
.jcs-hero-slider .slider-arrow:hover {
  background: rgba(255, 255, 255, 0.4);
}
.jcs-hero-slider .slider-prev { left: 16px; }
.jcs-hero-slider .slider-next { right: 16px; }
/* Slider dots */
.jcs-hero-slider .slider-dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 12px;
}
.jcs-hero-slider .slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.2s;
}
.jcs-hero-slider .slider-dot.active {
  background: var(--jcs-white);
}

/* ========================================
   SECTION LABELS (Gold uppercase)
   ======================================== */
.jcs-section-label {
  font-family: var(--font-ui);
  font-size: 12px;        /* Figma: Lato 12px, letter-spacing 0.4px */
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--jcs-gold);
  margin-bottom: 16px;
}

/* ========================================
   SECTION HEADINGS
   ======================================== */
.jcs-heading {
  font-family: var(--font-display);
  font-weight: 300;       /* Figma: PF Marlet Display Light 300 for most headings */
  color: var(--jcs-dark);
  line-height: 1.15;
}

.jcs-heading em,
.jcs-heading .gold {
  font-style: italic;
  color: var(--jcs-gold);
}

.jcs-heading-48 {
  font-size: clamp(28px, 3.33vw, 48px); /* Figma: 48px desktop */
  line-height: 1.0;                     /* Figma: 48px / 24px lineH = tight */
}

.jcs-heading-36 {
  font-size: clamp(24px, 2.43vw, 35px); /* Figma: 35px for FAQ headings */
  line-height: 1.14;                    /* Figma: 40px lineH */
}

/* ========================================
   BODY TEXT
   ======================================== */
.jcs-body-text {
  font-family: var(--font-body);
  font-weight: 300;           /* Figma: Barlow Light 300 */
  color: var(--jcs-black);
  font-size: clamp(16px, 1.67vw, 24px); /* Figma: 24px desktop */
  line-height: 35px;          /* Figma: 35px lineH for Barlow 300 24px */
}

@media (max-width: 1023px) {
  .jcs-body-text {
    font-size: 16px;
    line-height: 26px;
  }
}

/* ========================================
   GOLD BUTTONS
   ======================================== */
.jcs-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--jcs-gold);
  color: var(--jcs-white);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  transition: background-color 0.2s;
  cursor: pointer;
}

.jcs-btn-gold:hover {
  background-color: var(--jcs-gold-hover);
}

.jcs-btn-gold.size-240 {
  width: 240px;
  height: 39px;
}

.jcs-btn-gold.size-278 {
  width: 278px;
  height: 43px;
}

.jcs-btn-gold.size-320 {
  width: 320px;
  height: 39px;
}

/* ========================================
   TRZY STREFY (Homepage)
   ======================================== */
/* Desktop: 96px bottom padding */
@media (min-width: 1024px) {
  .jcs-trzy-strefy {
    padding-bottom: 96px !important;
  }
}

.jcs-trzy-strefy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

@media (min-width: 768px) {
  .jcs-trzy-strefy-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 1024px) {
  .jcs-trzy-strefy-grid {
    gap: 40px;
  }
}

.jcs-trzy-strefy-card {
  position: relative;
  display: block;
  overflow: hidden;
  height: 568px;
}

@media (min-width: 768px) {
  .jcs-trzy-strefy-card {
    height: auto;
    aspect-ratio: 520 / 568;
  }
}

.jcs-trzy-strefy-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.jcs-trzy-strefy-card:hover img {
  transform: scale(1.05);
}

.jcs-trzy-strefy-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.2) 50%, transparent);
}

.jcs-trzy-strefy-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 20px 32px;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .jcs-trzy-strefy-content {
    padding: 24px 24px 40px;
  }
}

@media (min-width: 1024px) {
  .jcs-trzy-strefy-content {
    padding: 32px 32px 54px;
  }
}

.jcs-trzy-strefy-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--jcs-gold);
  height: 24px;
  padding: 0 10px;
  margin-bottom: 16px;
  align-self: flex-start;
}

.jcs-trzy-strefy-badge span {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--jcs-white);
  line-height: 24px;
}

.jcs-trzy-strefy-content h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--jcs-white);
  margin-bottom: 12px;
  white-space: pre-line;
}

.jcs-trzy-strefy-content p {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.3vw, 20px);
  font-weight: 400;
  line-height: 24px;
  color: var(--jcs-white);
}

/* ========================================
   KAFELKI (Homepage)
   ======================================== */
/* Desktop: 96px gap between STREFY and KAFELKI sections */
@media (min-width: 1024px) {
  .jcs-kafelki-section {
    padding-top: 96px !important;
  }
}

.jcs-kafelki-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .jcs-kafelki-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .jcs-kafelki-grid {
    gap: 40px;
  }
}

.jcs-kafelek {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  background: transparent;
  border: 1px solid var(--jcs-gold);
  padding: 36px 32px 32px;
  min-height: 234px;
}

.jcs-kafelek-label {
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.48px;
  line-height: 24px;
  color: var(--jcs-black);
}

.jcs-kafelek-desc {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 400;
  letter-spacing: 0.8px;
  line-height: 24px;
  color: var(--jcs-black);
}

.jcs-kafelek-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--jcs-black);
  padding: 6px 20px;
  height: 33px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.48px;
  line-height: 24px;
  color: var(--jcs-black);
}

.jcs-kafelek-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  text-transform: uppercase;
  background: var(--jcs-gold);
  padding: 6px 20px;
  height: 33px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.48px;
  line-height: 24px;
  color: var(--jcs-white);
  transition: opacity 0.2s;
}

.jcs-kafelek-btn-gold:hover {
  opacity: 0.8;
}

/* ========================================
   O NAS (Homepage)
   ======================================== */
.jcs-onas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 1024px) {
  .jcs-onas-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.jcs-onas-text {
  display: flex;
  flex-direction: column;
}

.jcs-onas-spacer {
  display: none;
}

@media (min-width: 1024px) {
  .jcs-onas-spacer {
    display: block;
    padding-top: 177px;
  }
}

.jcs-onas-paragraph {
  font-family: var(--font-body);
  font-weight: 300;     /* Figma: Barlow Light 300 */
  color: var(--jcs-black);
  max-width: 800px;
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 26px;
}

@media (min-width: 1024px) {
  .jcs-onas-paragraph {
    font-size: 24px;
    line-height: 35px; /* Figma: 35px lineH for Barlow 300 24px */
  }
}

.jcs-onas-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  background: var(--jcs-gold);
  width: 320px;
  height: 39px;
  transition: opacity 0.2s;
}

@media (min-width: 1024px) {
  .jcs-onas-btn {
    align-self: flex-start;
  }
}

.jcs-onas-btn:hover {
  opacity: 0.8;
}

.jcs-onas-btn span {
  text-transform: uppercase;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.48px;
  line-height: 24px;
  color: var(--jcs-white);
}

.jcs-onas-image-wrap {
  position: relative;
  aspect-ratio: 800 / 924;
  overflow: hidden;
}

.jcs-onas-quote {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
}

@media (min-width: 1024px) {
  .jcs-onas-quote {
    padding: 54px;
  }
}

/* ========================================
   OCS SECTIONS (alternating 2-col layout)
   ======================================== */
.jcs-ocs-section {
  overflow: hidden;
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .jcs-ocs-section {
    /* Measured: ~620-640px per section at 1440px viewport */
    min-height: 620px;
  }
}

/* Desktop: equal 50/50 columns, image fills full column height */
.jcs-ocs-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile: text first, image second */
}

/* Mobile: text always first, image always below */
@media (max-width: 1023px) {
  .jcs-ocs-grid .jcs-ocs-text { order: 1; }
  .jcs-ocs-grid .jcs-ocs-img  { order: 2; }
}

@media (min-width: 1024px) {
  .jcs-ocs-grid {
    /* Measured: text col ~735px, image col ~705px at 1440px viewport → ~50/50 */
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .jcs-ocs-grid.img-right .jcs-ocs-text { order: 1; }
  .jcs-ocs-grid.img-right .jcs-ocs-img  { order: 2; }
  .jcs-ocs-grid.img-left  .jcs-ocs-text { order: 2; }
  .jcs-ocs-grid.img-left  .jcs-ocs-img  { order: 1; }
}

.jcs-ocs-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Mobile: 40px top/bottom, 24px sides */
  padding: 40px 24px;
}

@media (min-width: 1024px) {
  .jcs-ocs-text {
    /* Measured: ~80px padding top, ~64px sides */
    padding: 80px 72px;
  }
}

.jcs-ocs-desc p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.75;
  color: var(--jcs-dark);
  margin-top: 16px;
}

.jcs-ocs-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

@media (max-width: 1023px) {
  .jcs-ocs-buttons {
    flex-direction: column;
    align-items: flex-start;
  }
  .jcs-ocs-buttons .jcs-btn-gold {
    width: 100%;
    max-width: 320px;
  }
}

/* Image column: fills full height of the grid row */
.jcs-ocs-img {
  overflow: hidden;
  /* Mobile: measured ~468px at 390px viewport */
  height: 468px;
  width: 100%;
}

@media (min-width: 1024px) {
  .jcs-ocs-img {
    /* Desktop: fills full section height (~620px measured) */
    height: 100%;
    min-height: 620px;
    width: 100%;
  }
}

.jcs-ocs-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ========================================
   COLLECTION TILES (Kolekcje page) — legacy aliases kept for back-compat
   ======================================== */

/* ── Heading section ── */
.jcs-kolekcje-heading-section {
  text-align: center;
  padding: 48px 24px 36px;
}

.jcs-kolekcje-heading-section h1 em.gold {
  font-style: italic;
  color: var(--jcs-gold);
}

/* ── Grid section wrapper ── */
.jcs-kolekcje-grid-section {
  padding: 0 0 64px;
}

/* ── Grid layout ── */
.jcs-kolekcje-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

@media (min-width: 768px) {
  .jcs-kolekcje-grid-section {
    padding: 0 24px 80px;
  }
  .jcs-kolekcje-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: var(--container-max);
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  .jcs-kolekcje-grid-section {
    padding: 0 40px 80px;
  }
  .jcs-kolekcje-grid {
    gap: 32px;
  }
}

/* ── Individual tile ── */
.jcs-kolekcje-tile {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  height: 395px;
}

@media (min-width: 768px) {
  .jcs-kolekcje-tile {
    height: auto;
    aspect-ratio: 520 / 568;
  }
}

/* Image */
.jcs-kolekcje-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s ease;
  display: block;
}

.jcs-kolekcje-tile:hover img {
  transform: scale(1.05);
}

/* Placeholder when no image */
.jcs-kolekcje-tile-placeholder {
  width: 100%;
  height: 100%;
  background: #c8b9a8;
}

/* Overlay: linear gradient from bottom (black 82%) to 50% height */
.jcs-kolekcje-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0) 50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 20px 24px;
}

/* Badge / label — sits directly above title */
.jcs-kolekcje-tile-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--jcs-gold);
  padding: 4px 10px;
  height: 24px;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--jcs-white);
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
}

.jcs-kolekcje-tile-badge svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

/* Bottom text block */
.jcs-kolekcje-tile-bottom {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Title */
.jcs-kolekcje-tile-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  color: var(--jcs-white);
  line-height: 1.15;
  margin: 0;
}

@media (min-width: 768px) {
  .jcs-kolekcje-tile-title {
    font-size: clamp(22px, 2.2vw, 34px);
  }
}

/* Description */
.jcs-kolekcje-tile-desc {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.88);
  line-height: 24px;
  margin: 0;
}

@media (min-width: 768px) {
  .jcs-kolekcje-tile-desc {
    font-size: 13px;
    line-height: 19px;
  }
}

/* ── Legacy aliases (old CPT-based template) ── */
.jcs-collection-grid { display: grid; grid-template-columns: 1fr; gap: 7px; }
@media (min-width: 768px) { .jcs-collection-grid { grid-template-columns: repeat(3,1fr); gap: 24px; } }
@media (min-width: 1024px) { .jcs-collection-grid { gap: 32px; } }
.jcs-collection-tile { position: relative; overflow: hidden; height: 393px; }
@media (min-width: 768px) { .jcs-collection-tile { height: auto; aspect-ratio: 520/568; } }
.jcs-collection-tile img { width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .5s ease; }
.jcs-collection-tile:hover img { transform:scale(1.05); }
.jcs-collection-tile .tile-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,.2) 50%,transparent); display:flex; flex-direction:column; justify-content:flex-end; padding:24px; }
.jcs-collection-tile .tile-badge { display:inline-flex; align-items:center; gap:6px; background:var(--jcs-gold); padding:4px 12px; height:24px; font-family:var(--font-ui); font-size:10px; letter-spacing:.4px; text-transform:uppercase; color:var(--jcs-white); margin-bottom:12px; width:fit-content; }
.jcs-collection-tile h3 { font-family:var(--font-display); font-size:clamp(24px,2.5vw,36px); font-weight:400; color:var(--jcs-white); line-height:1.15; margin-bottom:8px; }
.jcs-collection-tile .tile-desc { font-family:var(--font-body); font-size:14px; font-weight:300; color:rgba(255,255,255,.85); line-height:20px; }

/* ========================================
   KARUZELA PRODUKTOWA (Kolekcja page)
   ======================================== */
.jcs-kol-carousel-section {
  width: 100%;
  background: #f0ede8;
  padding: 36px 24px;
  margin: 0;
}

.jcs-kol-carousel-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Placeholder shown when carousel plugin is not active */
.jcs-kol-carousel-placeholder {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #999;
  text-align: center;
}

/* Hide placeholder once the carousel plugin injects real content */
.jcs-kol-carousel-section:not(.jcs-kol-carousel-empty) .jcs-kol-carousel-placeholder:not(:only-child) {
  display: none;
}

/* ========================================
   FAQ SECTION
   ======================================== */
/* FAQ label: Figma spec — Lato 16px 400, letter-spacing 2.24px, lineHeight 24px, #bc8f4d */
.jcs-faq-section .jcs-section-label {
  font-size: 16px;
  letter-spacing: 2.24px;
  margin-bottom: 28px;
  display: block !important;
}
/* FAQ section padding: 160px top+bottom on both mobile and desktop */
.jcs-faq-section {
  padding-top: 160px !important;
  padding-bottom: 160px !important;
}

/* Mobile: extra top margin to clear the map section */
@media (max-width: 1023px) {
  .jcs-faq-section {
    margin-top: 250px !important;
  }
}

/* "Zobacz wszystkie pytania" link */
.jcs-faq-all-link {
  display: block;
  margin-top: 40px;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  color: #000000;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s;
  letter-spacing: 0;
}

.jcs-faq-all-link:hover {
  color: var(--jcs-gold);
  text-decoration-color: var(--jcs-gold);
}
.jcs-faq-item {
  border-bottom: 1px solid var(--jcs-border);
}

.jcs-faq-question-h3 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.jcs-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 35px);
  font-weight: 400;
  color: var(--jcs-dark);
  line-height: 40px;
}

@media (max-width: 1023px) {
  .jcs-faq-question {
    line-height: 30px;
  }
}

.jcs-faq-question svg {
  flex-shrink: 0;
  transition: transform 0.3s;
}

.jcs-faq-item.open .jcs-faq-question svg {
  transform: rotate(180deg);
}

.jcs-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.jcs-faq-item.open .jcs-faq-answer {
  max-height: 800px;
  padding-bottom: 24px;
}

.jcs-faq-answer p {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 300;
  color: var(--jcs-black);
  line-height: 35px;
}

@media (max-width: 1023px) {
  .jcs-faq-answer p {
    line-height: 25px;
  }
}


/* Mobile-only ZNAJDŹ NAS heading above map */
.jcs-map-mobile-heading {
  display: block;
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .jcs-map-mobile-heading {
    display: none;
  }
}
/* Hide the label+heading in right column on mobile (shown via mobile heading above) */
@media (max-width: 1023px) {
  .jcs-map-info .jcs-section-label,
  .jcs-map-info h2,
  .jcs-map-info-label,
  .jcs-map-info-heading {
    display: none;
  }
}

/* ========================================
   MAP SECTION
   ======================================== */

/* Layout used in map-section.php: map LEFT, info RIGHT on desktop */
.jcs-map-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 1024px) {
  .jcs-map-layout {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
  /* Map column (first child) stays on left — no order change needed */
  .jcs-map-col {
    order: 1;
  }
  .jcs-map-info {
    order: 2;
  }
}

.jcs-map-col iframe,
.jcs-map-col .jcs-map-placeholder {
  width: 100%;
  height: 300px;
}

@media (min-width: 768px) {
  .jcs-map-col iframe,
  .jcs-map-col .jcs-map-placeholder {
    height: 450px;
  }
}

@media (min-width: 1024px) {
  .jcs-map-col iframe,
  .jcs-map-col .jcs-map-placeholder {
    height: 570px;
  }
}

.jcs-map-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 1024px) {
  .jcs-map-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

.jcs-map-block {
  width: 100%;
  height: 300px;
}

@media (min-width: 768px) {
  .jcs-map-block {
    height: 450px;
  }
}

@media (min-width: 1024px) {
  .jcs-map-block {
    height: 570px;
  }
}

/* ========================================
   FOOTER
   ======================================== */
.jcs-footer {
  background-color: var(--jcs-footer-bg);
  min-height: 274px;
}

.jcs-footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 48px var(--container-px-mobile);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

@media (min-width: 1024px) {
  .jcs-footer-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 4rem;
    height: 274px;
    gap: 16px;
  }
}

/* Footer links */
.jcs-footer-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 220px;
}

@media (min-width: 1024px) {
  .jcs-footer-links {
    align-items: flex-start;
  }
}

.jcs-footer-links a {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 49px;
  text-transform: uppercase;
  color: var(--jcs-white);
  transition: color 0.2s;
}

.jcs-footer-links a:hover {
  color: var(--jcs-gold);
}

/* Footer center — logo only */
.jcs-footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.jcs-footer-center .jcs-footer-logo svg {
  width: 240px;
  height: auto;
}

/* Footer address — right column on desktop, centered on mobile */
.jcs-footer-address {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 33px;
  color: var(--jcs-white);
  text-align: center;
  min-width: 220px;
}

@media (min-width: 1024px) {
  .jcs-footer-address {
    text-align: right;
  }
}

.jcs-footer-maps {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .jcs-footer-maps {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
  }
}

.jcs-footer-map-btn {
  display: inline-block;
  opacity: 0.85;
  transition: opacity 0.2s;
  line-height: 0;
}

.jcs-footer-map-btn:hover {
  opacity: 1;
}

/* ========================================
   CONTACT FORM (own + CF7 inside .jcs-form wrapper)
   ======================================== */
.jcs-form input[type="text"],
.jcs-form input[type="email"],
.jcs-form input[type="tel"],
.jcs-form input[type="url"],
.jcs-form input[type="number"],
.jcs-form input[type="date"],
.jcs-form input[type="time"],
.jcs-form input[type="search"],
.jcs-form textarea,
.jcs-form select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--jcs-border);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--jcs-dark);
  background: var(--jcs-white);
  transition: border-color 0.2s;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.jcs-form input[type="text"]:focus,
.jcs-form input[type="email"]:focus,
.jcs-form input[type="tel"]:focus,
.jcs-form input[type="url"]:focus,
.jcs-form input[type="number"]:focus,
.jcs-form input[type="date"]:focus,
.jcs-form input[type="time"]:focus,
.jcs-form input[type="search"]:focus,
.jcs-form textarea:focus,
.jcs-form select:focus {
  outline: none;
  border-color: var(--jcs-gold);
}
.jcs-form label,
.jcs-form .wpcf7-form-control-wrap > label {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--jcs-dark);
  display: block;
  margin-bottom: 8px;
}
/* CF7 field wrappers — add spacing between fields */
.jcs-form .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 20px;
}
.jcs-form p {
  margin-bottom: 20px;
}
/* CF7 submit button — inherit jcs-btn-gold style */
.jcs-form input[type="submit"],
.jcs-form .wpcf7-submit {
  display: inline-block;
  padding: 14px 40px;
  background: var(--jcs-gold);
  color: var(--jcs-white);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  width: auto;
}
.jcs-form input[type="submit"]:hover,
.jcs-form .wpcf7-submit:hover {
  background: var(--jcs-dark);
}
/* CF7 validation messages */
.jcs-form .wpcf7-not-valid-tip {
  font-family: var(--font-body);
  font-size: 12px;
  color: #c0392b;
  margin-top: 4px;
  display: block;
}
.jcs-form .wpcf7-response-output {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 16px;
  margin-top: 16px;
  border: 1px solid var(--jcs-border);
}
/* CF7 acceptance checkbox */
.jcs-form .wpcf7-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
}
.jcs-form .wpcf7-acceptance input[type="checkbox"] {
  width: auto;
  margin-top: 3px;
  flex-shrink: 0;
}
.jcs-form .wpcf7-acceptance .wpcf7-list-item-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--jcs-dark);
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0;
}
}

/* ========================================
   BLOG
   ======================================== */
.jcs-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .jcs-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .jcs-blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.jcs-blog-card {
  overflow: hidden;
}

.jcs-blog-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.jcs-blog-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--jcs-dark);
  line-height: 1.3;
  margin-top: 16px;
}

.jcs-blog-card .meta {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--jcs-gold);
  margin-top: 8px;
}

.jcs-blog-card .excerpt {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--jcs-dark);
  line-height: 24px;
  margin-top: 12px;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */
.hide-mobile {
  display: none;
}

@media (min-width: 1024px) {
  .hide-mobile {
    display: block;
  }
  .hide-desktop {
    display: none;
  }
}


/* Mobile-only ZNAJDŹ NAS heading above map */
.jcs-map-mobile-heading {
  display: block;
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .jcs-map-mobile-heading {
    display: none;
  }
}
/* Hide the label+heading in right column on mobile (shown via mobile heading above) */
@media (max-width: 1023px) {
  .jcs-map-info .jcs-section-label,
  .jcs-map-info h2,
  .jcs-map-info-label,
  .jcs-map-info-heading {
    display: none;
  }
}

/* ========================================
   MAP SECTION ORDER (desktop)
   ======================================== */
/* lg-order-1 = map (LEFT), lg-order-2 = text (RIGHT) */
@media (min-width: 1024px) {
  .lg-order-1 { order: 1; }
  .lg-order-2 { order: 2; }
}
/* Override: the map block in HTML has lg-order-1 but was showing on right.
   Root cause: WordPress/Gutenberg may have assigned order values reversed.
   Force correct visual order via direct CSS targeting. */
@media (min-width: 1024px) {
  .jcs-map-grid > .lg-order-1 { order: 1 !important; }
  .jcs-map-grid > .lg-order-2 { order: 2 !important; }
}

/* Mobile: map section — text info ABOVE map, map 100% width */
@media (max-width: 1023px) {
  .jcs-map-grid {
    display: flex;
    flex-direction: column;
  }
  /* Text info column (lg-order-2) shows first on mobile */
  .jcs-map-grid > .lg-order-2 {
    order: -1 !important;
  }
  .jcs-map-grid > .lg-order-1 {
    order: 0 !important;
  }
  /* Map block: full width, break out of container padding.
     The negative margins expand the element horizontally but the
     parent height is determined by the element's height (300px).
     We ensure the section has enough bottom padding so FAQ starts below. */
  .jcs-map-block {
    width: 100vw;
    margin-left: calc(-1 * var(--container-px-mobile));
    margin-right: calc(-1 * var(--container-px-mobile));
    /* Ensure the block participates in normal flow height calculation */
    display: block;
    position: relative;
  }
  /* The section itself must have enough bottom padding to clear the map */
  .jcs-map-section {
    padding-bottom: 40px !important;
  }
}
@media print{/**
 * Janachowska Concept Store — Components CSS
 * Additional styles that supplement style.css
 */

/* ========================================
   SWIPER OVERRIDES
   ======================================== */
.jcs-hero-swiper .swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ========================================
   CONTACT FORM AJAX HANDLER
   ======================================== */
#jcs-contact-form .form-success,
#jcs-contact-form-mobile .form-success {
  color: #166534;
}

#jcs-contact-form .form-error,
#jcs-contact-form-mobile .form-error {
  color: #991b1b;
}

/* ========================================
   BOOKING FORM SELECT STYLING
   ======================================== */
.jcs-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* ========================================
   SCROLL-TO-TOP BUTTON (optional)
   ======================================== */
.jcs-scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  background: var(--jcs-gold);
  color: var(--jcs-white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 40;
}

.jcs-scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================
   SINGLE COLLECTION PAGE
   ======================================== */
.jcs-single-collection-hero {
  width: 100%;
  aspect-ratio: 1640 / 760;
  object-fit: cover;
}

.jcs-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .jcs-product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .jcs-product-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
  }
}

.jcs-product-card {
  overflow: hidden;
}

.jcs-product-card img {
  width: 100%;
  aspect-ratio: 240 / 400;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.jcs-product-card:hover img {
  transform: scale(1.05);
}

/* ========================================
   PAGE TRANSITIONS
   ======================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.jcs-animate-in {
  animation: fadeInUp 0.6s ease forwards;
}

}