/* ============================================================
   VOVKANYCH — salon stylesheet (ported from the luxury prototype)
   Loaded AFTER bauhaus.css so it wins for salon components.
   Legacy Filkorn CSS no longer loads on the FE (head.php gate),
   so plain class-based CSS is safe here.
   Tokens come from bauhaus.css :root (--gold/--navy/--cream/...).
   ============================================================ */

/* ── Grain overlay ─────────────────────────────────────────── */
.grain{
  pointer-events:none; position:fixed; inset:0; z-index:999;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── Top bar / header ──────────────────────────────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:20px 4.2vw; display:grid;
  grid-template-columns:auto 1fr auto; align-items:center; gap:30px;
  transition:.45s var(--ease);
  background:linear-gradient(to bottom, rgba(5,7,10,.78), rgba(5,7,10,.02));
}
.topbar.scrolled{
  padding:12px 4.2vw; background:rgba(5,7,10,.9);
  backdrop-filter:blur(18px); border-bottom:1px solid rgba(224,191,121,.18);
}
.brand{ display:flex; flex-direction:column; align-items:flex-start; color:var(--ivory); }
.brand img{
  width:100px; height:auto; object-fit:contain;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.38)); transition:.45s var(--ease);
}
.brand span{ display:none; }
.topbar.scrolled .brand img{ width:118px; }
.nav{
  display:flex; justify-content:center; gap:44px; align-items:center;
  color:rgba(255,250,242,.9); font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:.22em;
}
.nav a{ transition:.3s; position:relative; }
.nav a:hover{ color:var(--gold-2); }
.nav a.is-active{ color:var(--gold-2); }
.nav a.is-active:after{
  content:''; position:absolute; left:0; right:0; bottom:-13px; height:1px; background:var(--gold-2);
}
/* ── Dropdown submenus (Admin → Menus; e.g. E-shop → categories) ── */
.nav .nav-item{ position:relative; display:inline-flex; align-items:center; }
.nav .nav-item > a{ display:inline-flex; align-items:center; gap:5px; }
.nav .nav-caret{ font-size:8px; opacity:.75; }
.nav .nav-dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  min-width:230px; display:flex; flex-direction:column; gap:2px;
  background:var(--dark,#0B1020); border:1px solid rgba(196,154,99,.30); border-radius:14px;
  padding:10px; box-shadow:0 26px 70px -34px rgba(0,0,0,.7);
  opacity:0; visibility:hidden; transition:.22s var(--ease); z-index:300;
}
.nav .nav-item:hover .nav-dropdown, .nav .nav-item:focus-within .nav-dropdown{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(6px);
}
.nav .nav-dropdown a{ padding:9px 14px; border-radius:9px; white-space:nowrap; letter-spacing:.14em; color:rgba(255,250,242,.9); }
.nav .nav-dropdown a:hover{ background:rgba(196,154,99,.14); color:var(--gold-2); }
/* mobile drawer sub-items */
.mobile-nav .m-sub{ padding-left:22px; font-size:.9em; opacity:.82; letter-spacing:.06em; }
/* right-side actions cluster — cart + reservation, vertically centred with nav */
.nav-actions{ justify-self:end; display:flex; align-items:center; gap:24px; }
.cart-link{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  color:var(--ivory); transition:.3s var(--ease);
}
.cart-link:hover{ color:var(--gold-2); }
.cart-link svg{ width:23px; height:23px; }
.cart-badge{
  position:absolute; top:-9px; right:-11px; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--gold-2); color:var(--dark);
  font-family:var(--ff-body); font-size:11px; font-weight:600; line-height:18px;
  text-align:center; align-items:center; justify-content:center;
}
.nav-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(224,191,121,.72); color:var(--gold-2);
  padding:15px 22px; border-radius:0; letter-spacing:.24em; font-size:10px;
  text-transform:uppercase; transition:.4s var(--ease); white-space:nowrap;
}
.nav-btn:hover{ background:var(--gold-2); color:var(--dark); }
.nav-btn .nav-btn-short{ display:none; }
.topbar.scrolled .nav-btn{ padding:13px 22px; }
.burger{ display:none; background:none; border:none; color:var(--ivory); font-size:28px; cursor:pointer; line-height:1; padding:4px; min-width:44px; min-height:44px; align-items:center; justify-content:center; }

/* No-hero shop pages (cart, checkout, PDP) set body.shop-plain: the fixed header
   has no dark hero to sit over, so render it solid (readable ivory text on any
   bg) and reserve top space so page content clears the ~110px bar. */
body.shop-plain{ padding-top:115px; }
body.shop-plain .topbar:not(.scrolled){
  background:rgba(5,7,10,.96); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(224,191,121,.14);
}
@media (max-width:620px){ body.shop-plain{ padding-top:78px; } }
/* Journal post (no-hero content page) — same treatment as shop-plain: the fixed
   header has no dark hero to sit over, so render it solid AND reserve top space so
   the breadcrumb strip clears the ~72px bar (it was rendering behind the header).
   The breadcrumb <section> adds its own 32px top padding → ~116px total (≈ shop-plain). */
body.post-page{ padding-top:84px; }
body.post-page .topbar:not(.scrolled){
  background:rgba(5,7,10,.96); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(224,191,121,.14);
}
@media (max-width:620px){ body.post-page{ padding-top:46px; } }
/* Cormorant Garamond is only loaded at 400–600; the shop Bauhaus templates ask
   for 700/800 → the browser fakes bold (clunky). Force the loaded elegant
   weights on shop-page headings so they read like the salon pages. */
body.shop-plain h1, body.shop-plain h2, body.shop-plain h3{ font-weight:500 !important; }
/* The global section{padding:120px} (salon landing sections) bleeds into the
   inline-styled shop <section> blocks — checkout steps, cart/PDP sections — and
   inflates each with ~240px of empty vertical padding (huge gaps between steps).
   Neutralise it; shop sections space themselves via inline styles + flex gaps. */
body.shop-plain section{ padding:0; }

/* ── Mobile nav drawer (works with engine scripts.php burger JS) ── */
.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(420px,86vw); z-index:200;
  background:var(--dark); color:var(--ivory); padding:96px 42px 42px;
  transform:translateX(100%); transition:.5s var(--ease);
  display:flex; flex-direction:column; overflow-y:auto;
  border-left:1px solid rgba(196,154,99,.18);
}
/* `display:flex` MUST be repeated here: bauhaus.css carries a legacy barber rule
   `@media(max-width:900px){ .mobile-nav.open{ display:block } }` (specificity 0,2,0)
   that out-specifies our base `.mobile-nav{ display:flex }` (0,1,0) when the drawer
   is open ≤900px — flipping it to block so the links flowed inline. Matching that
   specificity here (and loading after bauhaus.css) restores the flex column. */
.mobile-nav.open{ display:flex; transform:translateX(0); box-shadow:-30px 0 80px rgba(0,0,0,.5); }
.mobile-nav a{
  color:var(--ivory); text-transform:uppercase; letter-spacing:.22em; font-size:13px;
  padding:18px 0; border-bottom:1px solid rgba(196,154,99,.12); transition:.3s;
}
.mobile-nav a:hover{ color:var(--gold); }
.mobile-nav .m-book{
  margin-top:30px; border:1px solid var(--gold); color:var(--gold); text-align:center;
  padding:18px; letter-spacing:.24em; border-bottom:1px solid var(--gold);
}
.mobile-nav .m-book:hover{ background:var(--gold); color:var(--dark); }
.mobile-nav-close{
  position:absolute; top:30px; right:34px; background:none; border:none;
  color:var(--ivory); font-size:30px; cursor:pointer; line-height:1;
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero{
  min-height:100vh; color:var(--ivory); display:flex; align-items:center;
  padding:190px 5vw 80px; position:relative; overflow:hidden; background:#05070a;
}
.hero-video{
  position:absolute; inset:0; width:110%; height:100%;
  object-fit:cover; object-position:80% center; z-index:0; opacity:.92;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(3,5,8,.96) 0%, rgba(3,5,8,.82) 35%, rgba(3,5,8,.28) 68%, rgba(3,5,8,.08) 100%),
    linear-gradient(180deg, rgba(3,5,8,.32), rgba(3,5,8,.2)),
    radial-gradient(circle at 78% 32%, rgba(224,191,121,.18), transparent 32%);
}
.hero:before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 12% 45%, rgba(224,191,121,.08), transparent 34%);
  pointer-events:none;
}
.hero-copy{ position:relative; z-index:2; max-width:760px; text-align:center; margin-left:1.2vw; margin-top:70px; }
.eyebrow{
  display:inline-flex; align-items:center; justify-content:center; gap:22px;
  color:var(--gold-2); font-size:12px; text-transform:uppercase; letter-spacing:.62em;
  font-weight:500; margin-bottom:32px; font-family:var(--ff-body);
}
.eyebrow:before, .eyebrow:after{ content:''; width:90px; height:1px; background:currentColor; opacity:.8; }
.hero h1{
  font-family:'Cormorant Garamond',serif; font-weight:400; line-height:1.12;
  letter-spacing:.065em; text-transform:uppercase; font-size:clamp(40px,4.6vw,68px);
  margin-bottom:26px; text-shadow:0 18px 40px rgba(0,0,0,.45); color:var(--ivory);
}
.hero h1 em{ font-style:normal; color:var(--ivory); }
.hero p{
  max-width:680px; font-family:'Outfit',sans-serif; font-size:clamp(16px,1.35vw,21px);
  line-height:1.9; color:rgba(255,250,242,.86); margin:0 auto 42px;
}
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; justify-content:center; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:64px;
  padding:0 38px; border-radius:0; text-transform:uppercase; letter-spacing:.28em;
  font-size:12px; font-weight:500; transition:.4s var(--ease); cursor:pointer;
  font-family:var(--ff-body);
}
.btn.gold{ background:transparent; border:1px solid var(--gold); color:var(--gold); }
.btn.gold:hover{ transform:translateY(-3px); background:var(--gold); color:var(--dark); box-shadow:0 22px 55px rgba(200,155,77,.25); }
.btn.clear{ color:var(--ivory); border:1px solid rgba(255,250,242,.3); background:transparent; }
.btn.clear:hover{ border-color:var(--gold); color:var(--gold); }

/* ── Section scaffolding ───────────────────────────────────── */
section{ padding:120px 5vw; position:relative; }
.container{ max-width:1240px; margin:auto; }
.section-head{ max-width:1200px; margin:0 auto 60px auto; }
.section-head.center{ text-align:center; }
.section-head h2{
  font-family:'Cinzel',serif; font-size:clamp(30px,3.8vw,52px); line-height:1.08;
  letter-spacing:.055em; font-weight:500; margin-top:18px; max-width:1100px;
  margin-left:auto; margin-right:auto;
}
.section-head p{
  margin-top:22px; font-size:18px; color:var(--muted); max-width:850px;
  margin-left:auto; margin-right:auto;
}

/* ── Intro / manifest ──────────────────────────────────────── */
.intro{ background:linear-gradient(180deg, var(--ivory), var(--cream)); }
.intro-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; }
.portrait-card{
  min-height:620px; border-radius:38px;
  background:linear-gradient(rgba(7,16,27,.1), rgba(7,16,27,.45)),
    url('/uploads/vovkanych/imagesabout.png') center center / cover no-repeat;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.portrait-card:after{
  content:'VOVKANYCH'; position:absolute; bottom:28px; left:30px;
  color:rgba(255,250,242,.75); font-family:'Cinzel',serif; letter-spacing:.28em; font-size:13px;
}
.manifest{
  background:rgba(255,250,242,.62); border:1px solid rgba(128,97,60,.14);
  border-radius:38px; padding:clamp(34px,5vw,64px); box-shadow:0 20px 80px rgba(7,16,27,.08);
}
.manifest h3{
  font-family:'Cormorant Garamond',serif; font-size:clamp(34px,4vw,56px); line-height:1.05;
  font-style:italic; color:var(--brown); margin-bottom:24px;
}
.manifest p{ color:var(--muted); font-size:17px; margin-bottom:18px; }

/* ── Services (dark) ───────────────────────────────────────── */
.services{ background:var(--dark); color:var(--ivory); overflow:hidden; }
.services:before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 10% 10%, rgba(224,191,121,.16), transparent 30%),
            radial-gradient(circle at 90% 80%, rgba(224,191,121,.08), transparent 28%);
}
.services .container{ position:relative; z-index:2; }
.services .section-head p{ color:rgba(255,250,242,.6); }

/* generic 4-col service cards (used by services page) */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.service-card{
  min-height:330px; padding:34px; border:1px solid rgba(224,191,121,.2); border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  position:relative; overflow:hidden; transition:.45s var(--ease);
}
.service-card:hover{ transform:translateY(-8px); border-color:rgba(224,191,121,.55); background:rgba(255,255,255,.075); }
.service-card .num{ color:var(--gold-2); font-size:13px; letter-spacing:.2em; margin-bottom:70px; }
.service-card h3{ font-family:'Cinzel',serif; font-size:22px; letter-spacing:.08em; margin-bottom:16px; }
.service-card p{ color:rgba(255,250,242,.62); font-size:15px; }

/* services mosaic (home) */
.services-mosaic{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:60px; }
.tile-strih{ grid-column:span 1; }
.tile-farbenie{ grid-column:span 3; }
.tile-tricho{ grid-column:span 1; }
.tile-headspa{ grid-column:span 5; min-height:320px; }
.tile-masaz{ grid-column:span 2; min-height:320px; }
.service-tile{
  min-height:300px; position:relative; overflow:hidden; border-radius:18px;
  border:1px solid rgba(224,191,121,.25); display:block; color:#fff;
}
.service-tile img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:.6s; }
.service-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.72)); }
.service-tile > div{ position:absolute; left:40px; right:40px; bottom:24px; z-index:2; }
.service-tile h3{ font-family:'Cormorant Garamond',serif; font-size:34px; line-height:1.05; font-weight:400; margin-bottom:12px; }
.tile-farbenie h3{ font-size:52px; }
.service-tile p{ font-size:15px; opacity:.88; max-width:320px; }
.service-tile span{ color:var(--gold); }
.service-tile:hover img{ transform:scale(1.08); }

/* ── Experience / process ──────────────────────────────────── */
.experience{ background:var(--cream); }
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; counter-reset:step; }
.step{ padding:36px 28px; border-top:1px solid var(--line); position:relative; }
.step:before{
  counter-increment:step; content:'0' counter(step); display:block; color:var(--gold);
  font-family:'Cinzel',serif; margin-bottom:26px; letter-spacing:.12em;
}
.step h3{ font-size:20px; margin-bottom:12px; color:var(--text); font-family:'Cinzel',serif; letter-spacing:.04em; }
.step p{ color:var(--muted); font-size:15px; }

/* ── Owner banner ──────────────────────────────────────────── */
/* Prototype look: the full studio photo (cover) under the original translucent black gradient —
   FULL-WIDTH, edge to edge, no side margins. The block takes the image's own 3:2 aspect-ratio,
   so `cover` shows the ENTIRE frame with zero crop at any width and the whole couple always
   stays in. Trade-off: height grows with width (≈1278px at 1920px wide), so on very wide
   monitors the feet can sit just below the first screenful. */
.owner-banner{ position:relative; width:100%; aspect-ratio:1537/1023; overflow:hidden; background:#141210; margin:0; }
.owner-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left center; z-index:0; }
/* original prototype gradient: translucent black — dark on the right (quote), clear on the left (couple) */
.owner-banner::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to left, rgba(0,0,0,.78), rgba(0,0,0,.08)); }
.owner-banner-content{ position:absolute; top:50%; transform:translateY(-50%); right:250px; width:500px; z-index:5; color:#fff; text-align:center; }
.owner-banner-content h2{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:30px;
  line-height:1.4; letter-spacing:.02em; margin:22px 0 28px; color:#fff;
}
.owner-banner-content p{ color:#fff; font-size:20px; margin:30px 0; }
.owner-name{ margin-top:35px; color:var(--gold); font-size:34px; font-family:'Cormorant Garamond',serif; }
.owner-banner .btn{ margin-top:20px; }

/* ── Why ───────────────────────────────────────────────────── */
.why{ background:linear-gradient(180deg, var(--ivory), #f0e2cc); }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.why-card{
  background:rgba(255,250,242,.7); border:1px solid rgba(128,97,60,.14);
  border-radius:30px; padding:38px; box-shadow:0 18px 60px rgba(7,16,27,.07);
}
.why-card h3{ font-family:'Cinzel',serif; font-size:20px; letter-spacing:.06em; margin-bottom:16px; }
.why-card p{ color:var(--muted); font-size:15px; }

/* ── Portfolio slider ──────────────────────────────────────── */
.portfolio{ padding:120px 0; background:#07101b; }
.portfolio .section-head{ padding:0 5vw; }
.portfolio .section-head h2{ color:#fff; }
.portfolio .section-head p{ color:rgba(255,255,255,.75); }
.portfolio-slider{ position:relative; overflow:hidden; margin-top:60px; padding:0 5vw; }
.portfolio-track{ display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; }
.portfolio-track::-webkit-scrollbar{ display:none; }
.portfolio-track img{ min-width:32%; height:500px; object-fit:cover; border-radius:24px; flex-shrink:0; }
.slider-btn{
  position:absolute; top:50%; transform:translateY(-50%); width:60px; height:60px;
  border:none; border-radius:50%; background:var(--gold); color:#07101b; font-size:32px;
  cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center;
}
.slider-btn.prev{ left:25px; }
.slider-btn.next{ right:25px; }

/* ── Premium products ──────────────────────────────────────── */
.products{ padding:120px 0; background:#f8f5ef; }
.products .section-head{ padding:0 5vw; text-align:center; }
.premium-products-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:60px; padding:0 5vw; }
.premium-product{ background:#fff; border:1px solid rgba(128,97,60,.12); box-shadow:0 20px 55px rgba(0,0,0,.08); transition:.4s; overflow:hidden; }
.premium-product:hover{ transform:translateY(-8px); box-shadow:0 30px 80px rgba(0,0,0,.12); }
.product-photo{ display:block; height:460px; padding:34px 30px; box-sizing:border-box; overflow:hidden; background:#fff; }
.product-photo img{ width:100%; height:100%; object-fit:contain; transition:transform .6s var(--ease); }
.premium-product:hover .product-photo img{ transform:scale(1.05); }
/* Full-bleed variant — photo carries its own background, fills the frame edge-to-edge */
.product-photo--cover{ padding:0; }
.product-photo--cover img{ object-fit:cover; }
.product-info{ padding:30px; }
.product-info span{ color:var(--gold); font-size:11px; text-transform:uppercase; letter-spacing:2px; }
.product-info h3{ margin:14px 0; font-size:24px; color:var(--ink-2); font-family:'Cormorant Garamond',serif; }
.product-info h3 a{ color:inherit; text-decoration:none; transition:color .3s var(--ease); }
.product-info h3 a:hover{ color:var(--gold); }
.product-info p{ color:var(--muted); margin-bottom:25px; }
.product-bottom{ display:flex; justify-content:space-between; align-items:center; gap:14px; border-top:1px solid rgba(128,97,60,.15); padding-top:20px; }
.product-bottom strong{ font-size:22px; color:var(--ink-2); }
.product-bottom strong s{ opacity:.45; font-weight:400; font-size:.72em; margin-left:6px; }
.product-bottom a{ color:var(--gold); text-transform:uppercase; letter-spacing:2px; font-size:12px; }
.product-bottom .js-add-to-cart{
  background:none; border:1px solid var(--gold); color:var(--gold); white-space:nowrap;
  text-transform:uppercase; letter-spacing:1.5px; font-size:11px; font-weight:500; font-family:'Outfit',sans-serif;
  padding:11px 20px; border-radius:999px; cursor:pointer; transition:.3s var(--ease);
}
.product-bottom .js-add-to-cart:hover{ background:var(--gold); color:#fff; }
.all-products-btn{ text-align:center; margin-top:60px; }

/* ── Reviews ───────────────────────────────────────────────── */
.reviews{ padding:130px 5vw; background:var(--dark); color:var(--ivory); }
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:60px; }
.review-card{ padding:42px; border:1px solid rgba(224,191,121,.25); background:rgba(255,255,255,.035); transition:.4s; }
.review-card:hover{ transform:translateY(-8px); border-color:var(--gold); }
.stars{ color:var(--gold); letter-spacing:5px; margin-bottom:25px; }
.review-card p{ font-family:'Cormorant Garamond',serif; font-size:24px; line-height:1.5; font-style:italic; margin-bottom:30px; }
.review-card h3{ color:var(--gold); font-size:14px; letter-spacing:2px; text-transform:uppercase; }

/* ── Booking ───────────────────────────────────────────────── */
.booking{ padding:130px 5vw; background:#07101b; color:#fffaf2; }
.booking-box{ max-width:950px; margin:auto; padding:60px; border:1px solid rgba(224,191,121,.25); background:rgba(255,255,255,.035); }
.booking-form{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:50px; }
.field{ display:flex; flex-direction:column; gap:10px; }
.field.full{ grid-column:1 / -1; }
.field label{ color:var(--gold); font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.field input, .field select, .field textarea{
  width:100%; padding:17px 20px; background:rgba(255,255,255,.04);
  border:1px solid rgba(224,191,121,.25); border-radius:12px;
  color:#fff; font-family:'Outfit',sans-serif; font-size:15px; outline:none;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,250,242,.42); }
.field textarea{ min-height:130px; resize:vertical; }
/* background-COLOR (not the shorthand) on focus so the select/date icons survive */
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); background-color:rgba(255,255,255,.06); }
.field select option{ color:#111; }
/* Unified select — strip native chrome, add a gold chevron to match the inputs */
.field select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C49A63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center;
}
/* Date field — same box as the inputs + custom calendar glyph; the native popup
   is dark (color-scheme) and opens on click anywhere via showPicker() (scripts.php). */
.field input[type="date"]{
  -webkit-appearance:none; appearance:none; cursor:pointer; color-scheme:dark; padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C49A63' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.field input[type="date"]::-webkit-calendar-picker-indicator{ opacity:0; cursor:pointer; }
.booking-btn{
  grid-column:1 / -1; height:60px; background:transparent; border:1px solid var(--gold);
  color:var(--gold); text-transform:uppercase; letter-spacing:3px; cursor:pointer; transition:.4s;
}
.booking-btn:hover{ background:var(--gold); color:#07101b; }

/* ── CTA section ───────────────────────────────────────────── */
.cta-section{ background:var(--dark); color:var(--ivory); text-align:center; padding:140px 5vw; overflow:hidden; position:relative; }
.cta-section:before{
  content:''; position:absolute; width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle, rgba(224,191,121,.2), transparent 64%);
  left:50%; top:50%; transform:translate(-50%, -50%);
}
.cta-inner{ position:relative; z-index:2; max-width:820px; margin:auto; }
.cta-inner img{ width:120px; margin:0 auto 30px; filter:drop-shadow(0 15px 35px rgba(0,0,0,.35)); }
.cta-inner h2{ font-family:'Cinzel',serif; font-size:clamp(36px,5vw,72px); line-height:1.08; letter-spacing:.055em; margin-bottom:24px; }
.cta-inner p{ color:rgba(255,250,242,.7); font-family:'Cormorant Garamond',serif; font-size:26px; font-style:italic; margin-bottom:38px; }

/* ── Gallery grid (galeria page) ───────────────────────────── */
.gallery{ background:var(--ivory); }
.gallery-grid{ display:grid; grid-template-columns:1.15fr .85fr 1fr; gap:20px; align-items:end; }
.gallery-item{ border-radius:32px; box-shadow:var(--shadow); overflow:hidden; position:relative; min-height:420px; background:linear-gradient(135deg, #dac5a4, #fff7e8); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.atelier-gallery{ display:flex; gap:20px; margin-top:40px; }
.atelier-gallery img{ flex:1; width:0; height:280px; object-fit:cover; border-radius:24px; display:block; }

/* ── Page hero (interior pages) ────────────────────────────── */
.page-hero{
  min-height:38vh; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:152px 5vw 56px; position:relative; overflow:hidden; color:var(--ivory); background:#05070a;
}
.page-hero .ph-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.7; }
.page-hero:after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(3,5,8,.7), rgba(3,5,8,.55)); }
.page-hero .container{ position:relative; z-index:2; }
.page-hero h1{ font-family:'Cormorant Garamond',serif; font-weight:400; text-transform:uppercase; letter-spacing:.06em; font-size:clamp(28px,3vw,44px); color:var(--ivory); }
.page-hero p{ margin-top:16px; color:rgba(255,250,242,.82); font-size:16px; max-width:600px; margin-left:auto; margin-right:auto; }

/* Owner requests (2026-06-16): hide wishlist/compare for visitors. */
.wishlist-btn, .compare-btn, .js-wishlist-toggle, .js-compare-toggle{ display:none !important; }
/* 2026-07-01: category-overview tiles RE-ENABLED (full catalog now seeded). */

/* ── Reveal animation ──────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(34px); transition:.9s var(--ease); }
.reveal.visible{ opacity:1; transform:translateY(0); }

/* ── Footer (luxury) ───────────────────────────────────────── */
/* ── Footer — multi-column luxury (Round 4) ─────────────────────── */
.luxury-footer{ background:var(--dark); padding:72px 5vw 40px; border-top:1px solid rgba(196,154,99,.18); color:var(--ivory); }
.footer-inner{ max-width:1220px; margin:0 auto; }
.footer-cols{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr 1fr; gap:40px 32px; align-items:start; }
.footer-col{ display:flex; flex-direction:column; gap:11px; min-width:0; }
.footer-col h4{ font-family:var(--ff-display); font-size:15px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin:0 0 5px; }
.footer-col a{ color:rgba(255,249,240,.72); text-decoration:none; font-size:13.5px; letter-spacing:.02em; transition:color .25s var(--ease); }
.footer-col a:hover{ color:var(--gold); }
.footer-col-brand img{ width:140px; height:auto; object-fit:contain; margin-bottom:4px; }
.footer-tagline{ color:rgba(255,249,240,.5); font-size:13px; line-height:1.6; max-width:34ch; margin:0; }
.footer-social{ display:flex; gap:16px; margin-top:8px; }
.footer-social a{ font-size:12px; text-transform:uppercase; letter-spacing:.14em; }
.footer-col-contact .footer-addr,
.footer-col-contact .footer-hours{ color:rgba(255,249,240,.6); font-size:13px; line-height:1.6; }
.footer-line{ height:1px; background:rgba(196,154,99,.22); margin:48px 0 22px; }
/* Payment strip (Comgate merchant guideline: card-scheme marks in the footer) */
.footer-payments{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:0 0 20px; }
.footer-pay-label{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,249,240,.45); }
.footer-pay-badges{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pay-badge{ display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 12px; border:1px solid rgba(255,249,240,.22); border-radius:7px; background:rgba(255,255,255,.04); color:#FFF9F0; font-size:11.5px; letter-spacing:.04em; }
.pay-badge svg{ display:block; }
.pay-badge-visa{ font-weight:800; font-style:italic; letter-spacing:.08em; font-size:13px; }
.footer-pay-provider{ font-size:12px; color:rgba(255,249,240,.5); }
.footer-pay-provider a{ color:var(--gold); text-decoration:none; }
.footer-pay-provider a:hover{ opacity:.8; }
.footer-company{ display:inline-block; margin-top:4px; color:rgba(255,249,240,.38); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.luxury-footer .footer-bottom p{ color:rgba(255,249,240,.5); font-size:12.5px; margin:0; }
.footer-credit{ text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:rgba(255,255,255,.42); }
.footer-credit a{ color:var(--gold); text-decoration:none; transition:.3s; }
.footer-credit a:hover{ opacity:.8; }
@media (max-width:900px){
  .footer-cols{ grid-template-columns:1fr 1fr; gap:34px 24px; }
  .footer-col-brand{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .footer-cols{ grid-template-columns:1fr; gap:28px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:991px){
  .premium-products-grid{ grid-template-columns:1fr; }
  .reviews-grid{ grid-template-columns:1fr; }
  .booking-form{ grid-template-columns:1fr; }
  .booking-box{ padding:35px; }
  .portfolio-track img{ min-width:85%; height:400px; }
  .services-mosaic{ grid-template-columns:1fr; }
  .tile-strih, .tile-farbenie, .tile-tricho, .tile-headspa, .tile-masaz{ grid-column:span 1; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .owner-banner{ aspect-ratio:auto; height:auto; min-height:560px; }
  /* On mobile drop the desktop 3:2 aspect-ratio and let the banner size to its content;
     keep `cover` and bias the crop left — the pair sits in the LEFT third of this wide shot. */
  .owner-banner img{ object-fit:cover; object-position:14% center; }
  .owner-banner::after{ background:linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.36) 42%, rgba(0,0,0,.82) 100%); }
  .owner-banner-content{ position:relative; top:0; right:0; left:0; transform:none; width:auto; margin:0 auto; padding:72px 24px 52px; }
}
/* Header → burger switch at ≤1200px: the 8-item Slovak nav needs ~1265px to sit
   beside the brand + actions without overlapping (it spilled into them on tablets),
   so collapse to the drawer here too. Actions reorder to [Rezervácia][cart][burger]
   per owner request (flex order on the .nav-actions cluster). */
@media (max-width:1200px){
  /* Nav collapses to the burger drawer → lay the bar out as a simple flex row
     (brand left · actions right). The 3-col grid with the middle nav hidden let
     the greedy 1fr column collapse the brand's auto track to ~8px (img
     max-width:100% circular dependency) once the actions cluster got wider —
     the logo shrank to a sliver on /sluzby/. Flex sizes the brand to its logo. */
  .topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .brand{ flex-shrink:0; }   /* keep the logo at full size, never shrink it */
  .nav{ display:none; }
  .burger{ display:flex; order:3; }
  .nav-btn{ display:inline-flex; order:1; }
  .cart-link{ order:2; }
}
@media (max-width:980px){
  .intro-grid, .gallery-grid{ grid-template-columns:1fr; }
  /* grid items default to min-width:auto → the "Chcem konzultáciu" button's
     min-content forced the track to 421px and overflowed the viewport. */
  .portrait-card, .manifest{ min-width:0; }
  .process, .why-grid{ grid-template-columns:repeat(2,1fr); }
  .portrait-card{ min-height:440px; }
  .atelier-gallery{ flex-wrap:wrap; }
  .atelier-gallery img{ flex:1 1 45%; }
}
@media (max-width:620px){
  section{ padding:84px 22px; }
  .topbar{ padding:14px 20px; }
  .brand img{ width:64px; }
  .hero{ padding:130px 22px 70px; }
  .hero h1{ font-size:42px; }
  .process, .why-grid{ grid-template-columns:1fr; }
  .service-card{ min-height:auto; }
  .service-card .num{ margin-bottom:36px; }
  .btn{ width:100%; padding:0 22px; letter-spacing:.18em; }
  .reviews, .booking{ padding:90px 22px; }
  /* Mobile actions: prominent "Rezervácia" pill + roomy tap targets. The gap is
     tightened so the bigger button still fits beside cart+burger down to 320px. */
  .nav-actions{ gap:10px; }
  .nav-btn{ padding:13px 16px; font-size:11px; letter-spacing:.12em; }
  .nav-btn .nav-btn-full{ display:none; }
  .nav-btn .nav-btn-short{ display:inline; }
  .cart-link{ padding:7px; }
  /* The eyebrow's two 90px flanking rules + .62em tracking overflow narrow
     screens (e.g. "Rezervácia termínu" → 369px). Trim the rules + tracking. */
  .eyebrow{ gap:12px; letter-spacing:.34em; font-size:11px; max-width:100%; }
  .eyebrow:before, .eyebrow:after{ width:24px; }
  /* Keep the header the SAME compact size when scrolled on phones. The desktop
     "grow on scroll" rules (.topbar.scrolled .brand img → 118px; .topbar.scrolled
     .nav-btn → 22px padding) out-specify the @620 compact sizes, so on scroll the
     logo + button ballooned, overflowed the tight bar and collapsed the cart icon.
     These match that specificity (0,3,1 / 0,3,0) and sit later → they win. */
  .topbar.scrolled{ padding:12px 20px; }
  .topbar.scrolled .brand img{ width:64px; }
  .topbar.scrolled .nav-btn{ padding:13px 16px; }
  /* Never let the action icons shrink — keeps the cart svg from clipping to 0. */
  .cart-link, .nav-btn, .burger{ flex-shrink:0; }
  .cart-link svg{ flex-shrink:0; }
}

/* ── Breadcrumbs (storefront) ──────────────────────────────────
   style.css/shop.css are gated OFF on Bauhaus pages, so the breadcrumb <ol>
   had no flex rule and stacked vertically. Define it here (loaded on every
   shop page). Rendered UNDER the .page-hero H1 (see catalog.php). */
.page-hero .breadcrumb{ margin-top:18px; }
/* .page-hero has a dark photo/overlay bg → breadcrumb needs LIGHT text (the base
   .breadcrumb colours are dark, for any light-bg usage). */
.page-hero .breadcrumb a{ color:rgba(255,250,242,.72); }
.page-hero .breadcrumb a:hover{ color:var(--gold); }
.page-hero .breadcrumb .sep{ color:rgba(255,250,242,.4); opacity:1; }
.page-hero .breadcrumb [aria-current]{ color:#fff; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; list-style:none; margin:0; padding:0;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.breadcrumb li{ display:inline-flex; align-items:center; gap:8px; }
.breadcrumb a{ color:var(--muted); text-decoration:none; transition:color .2s var(--ease); }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb .sep{ color:var(--muted); opacity:.5; }
.breadcrumb [aria-current]{ color:var(--ink-2); }

/* ── E-shop: catalog grid + product cards (salon, no legacy shop.css) ── */
.shop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1280px; margin:0 auto; padding:10px 5vw 50px; }
/* ── Uniform product-image panel ───────────────────────────────
   Every product photo (transparent PNG, white-bg JPG or placeholder) sits on the
   SAME soft white card so the shop reads consistently and nothing crops (contain).
   Reused by: PLP cards (.shop-card-img below), MODE-A cards (product-card.php inline
   via .vk-img-panel), the home "Prémiové produkty" strip, and the PDP main image. */
:root{ --shop-img-bg:#fff; --shop-img-radius:14px; --shop-img-border:1px solid rgba(196,154,99,.16); --shop-img-pad:9%; }
.vk-img-panel{ background:var(--shop-img-bg); border:var(--shop-img-border); border-radius:var(--shop-img-radius); }
.vk-img-panel img{ width:100%; height:100%; object-fit:contain; }

.shop-card{ position:relative; display:flex; flex-direction:column; background:transparent; border:none; transition:transform .4s var(--ease); }
.shop-card:hover{ transform:translateY(-5px); }
.shop-card:hover .shop-card-title{ color:var(--gold); }
.shop-card-img{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; box-sizing:border-box; padding:var(--shop-img-pad);
  background:var(--shop-img-bg); border:var(--shop-img-border); border-radius:var(--shop-img-radius); }
.shop-card-body{ padding:20px 4px 4px; display:flex; flex-direction:column; gap:7px; flex:1; }
.shop-card-brand{ color:var(--gold); font-size:11px; text-transform:uppercase; letter-spacing:.2em; }
.shop-card-title{ display:block; color:var(--ink-2); line-height:1.25; text-decoration:none; }
.shop-card-title:hover{ color:var(--gold); }
.shop-card-price{ display:flex; align-items:baseline; gap:10px; margin-top:8px; }
.shop-card-btn{ margin-top:16px; min-height:52px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--navy); color:var(--ivory); border:1px solid var(--navy); font-family:var(--ff-body); font-size:12px; text-transform:uppercase; letter-spacing:.18em; cursor:pointer; transition:.3s var(--ease); text-decoration:none; }
.shop-card-btn:hover{ background:var(--gold); border-color:var(--gold); color:var(--dark); }
.shop-card-btn svg{ width:16px; height:16px; }
.shop-card-btn--quote{ background:transparent; color:var(--navy); border-color:var(--navy); }
.shop-card-btn--quote:hover{ background:var(--navy); color:var(--ivory); }
.bk-card-badge{ border-radius:0 !important; box-shadow:none !important; }
.wishlist-btn{ position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.92); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); transition:.3s; }
.wishlist-btn:hover, .wishlist-btn.active{ color:var(--gold); border-color:var(--gold); }
.shop-empty{ text-align:center; padding:110px 5vw; color:var(--muted); max-width:620px; margin:0 auto; }
.shop-empty p{ margin-top:20px; font-size:18px; }
.shop-pagination{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; padding:30px 5vw 90px; }
.shop-page-link{ min-width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px; border:1px solid var(--line); color:var(--ink); text-decoration:none; letter-spacing:.06em; transition:.3s; }
.shop-page-link:hover, .shop-page-link.active{ background:var(--navy); color:var(--ivory); border-color:var(--navy); }
@media (max-width:1100px){ .shop-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){ .shop-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (max-width:480px){ .shop-grid{ grid-template-columns:1fr; } }

/* ============================================================
   E-SHOP CATALOG CHROME — salon re-skin of /obchod/ (PLP).
   The legacy shop.css is gated off (barber theme); these rules
   recreate the catalog layout — sidebar filters, toolbar, sort,
   category tiles — in the VOVKANYCH salon aesthetic.
   ============================================================ */

/* ── Catalog layout — filter sidebar RE-ENABLED (2026-07-01). Desktop = 2-col
   (268px filter sidebar + products); mobile stacks the filter above the grid. ── */
.shop-layout{
  max-width:1320px; margin:0 auto; padding:40px 5vw 96px;
  display:grid; grid-template-columns:268px minmax(0,1fr); gap:34px; align-items:start;
}
.shop-main{ min-width:0; }
.shop-sidebar{ display:block; }
.shop-filter-toggle{ display:none; }
@media(max-width:900px){
  .shop-layout{ display:block; }
  .shop-sidebar{ position:static; max-height:none; overflow:visible; padding-right:0; margin-bottom:28px; }
}
/* the standalone .shop-grid carries its own width/padding for full-bleed use
   (home, search) — neutralise it when nested inside the catalog main column */
.shop-main .shop-grid{ max-width:none; margin:0; padding:0; grid-template-columns:repeat(3,1fr); gap:28px; }
/* Round 4: 3 larger cards/row on category + /obchod/ (few products → bigger cards).
   Scoped to .shop-main so these win over the base .shop-grid @media steps. */
@media (max-width:1000px){ .shop-main .shop-grid{ grid-template-columns:repeat(2,1fr); gap:22px; } }
@media (max-width:560px){  .shop-main .shop-grid{ grid-template-columns:1fr; } }
.shop-main .shop-pagination{ padding-left:0; padding-right:0; padding-top:44px; }
.shop-results{ min-height:200px; }

/* ── Sidebar shell ── */
.shop-sidebar{
  position:sticky; top:104px; align-self:start;
  max-height:calc(100vh - 132px); overflow-y:auto; padding-right:12px;
}
.shop-sidebar::-webkit-scrollbar{ width:5px; }
.shop-sidebar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.shop-sidebar-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.shop-sidebar-header h3{ font-family:var(--ff-display); font-size:25px; font-weight:500; color:var(--ink-2); letter-spacing:.01em; }
.shop-sidebar-close{ display:none; background:none; border:none; font-size:26px; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px; }

/* ── Filter groups ── */
.filter-group{ padding:20px 0; border-bottom:1px solid var(--line); }
.filter-group-title,
.filter-group-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  font-family:var(--ff-body); font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; color:var(--gold); background:none; border:none; padding:0; cursor:pointer;
}
.filter-group-title{ margin-bottom:14px; }
/* The SVG carries no width/height attrs → without this it rendered huge. */
.filter-chevron{ width:15px; height:15px; flex-shrink:0; transition:transform .3s var(--ease); color:var(--gold); opacity:.7; }
.filter-group-toggle[aria-expanded="false"] .filter-chevron{ transform:rotate(-90deg); }
.filter-group-toggle:hover .filter-chevron{ opacity:1; }
.filter-group-body.collapsed{ display:none; }
.filter-group-body{ margin-top:14px; }
.filter-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.filter-list--scroll{ max-height:230px; overflow-y:auto; padding-right:4px; }
.filter-scroll-area{ }
.filter-check{
  display:flex; align-items:center; gap:11px; cursor:pointer; padding:7px 0;
  font-family:var(--ff-body); font-size:14px; color:var(--ink);
}
.filter-check input[type=checkbox]{
  appearance:none; -webkit-appearance:none; flex-shrink:0; width:17px; height:17px;
  border:1px solid var(--gold); background:var(--ivory); cursor:pointer; position:relative; transition:.2s var(--ease);
}
.filter-check input[type=checkbox]:checked{ background:var(--navy); border-color:var(--navy); }
.filter-check input[type=checkbox]:checked::after{
  content:""; position:absolute; left:5px; top:1.5px; width:5px; height:9px;
  border:solid var(--ivory); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.filter-label{ flex:1; }
.filter-check:hover .filter-label{ color:var(--navy); }
.filter-count{ flex-shrink:0; font-size:12px; color:var(--muted); letter-spacing:.02em; }
.filter-hint{ font-size:12px; color:var(--muted); line-height:1.5; margin-top:8px; font-style:italic; }
.filter-cat-all-link{
  display:inline-block; margin-bottom:12px; font-size:12px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:3px;
}
.filter-cat-all-link:hover{ color:var(--gold); border-color:var(--gold); }
.filter-color-swatch{ width:18px; height:18px; border-radius:50%; border:1px solid var(--line); flex-shrink:0; }

/* price range inputs */
.filter-price-inputs{ display:flex; align-items:center; gap:10px; }
.filter-price-inputs input[type=number]{
  width:100%; padding:10px 12px; border:1px solid var(--line); background:var(--ivory);
  font-family:var(--ff-body); font-size:14px; color:var(--ink); -moz-appearance:textfield;
}
.filter-price-inputs input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.filter-price-inputs input:focus{ outline:none; border-color:var(--gold); }
.filter-price-currency{ color:var(--muted); font-size:14px; }

/* sidebar action buttons */
.shop-filter-actions{ display:flex; gap:10px; margin-top:22px; }
.shop-filter-reset,
.shop-filter-apply{
  flex:1; min-height:46px; padding:0 16px; font-family:var(--ff-body); font-size:11px;
  text-transform:uppercase; letter-spacing:.18em; cursor:pointer; transition:.3s var(--ease); border:1px solid var(--navy);
}
.shop-filter-reset{ background:transparent; color:var(--navy); }
.shop-filter-reset:hover{ background:var(--brand-soft); }
.shop-filter-apply{ background:var(--navy); color:var(--ivory); }
.shop-filter-apply:hover{ background:var(--gold); border-color:var(--gold); color:var(--dark); }

/* ── Toolbar (count + sort) ── */
.shop-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:30px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.shop-toolbar-left{ display:flex; align-items:center; gap:18px; }
.shop-toolbar-right{ display:flex; align-items:center; gap:12px; }
.shop-filter-toggle{ display:none; }  /* desktop: sidebar always visible; mobile handled below */
.shop-count{ font-size:13px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
.shop-sort{
  appearance:none; -webkit-appearance:none; padding:11px 42px 11px 18px;
  border:1px solid var(--line); background:var(--ivory)
    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='%23C49A63' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right 15px center;
  font-family:var(--ff-body); font-size:13px; color:var(--ink); cursor:pointer; letter-spacing:.02em; transition:.3s var(--ease);
}
.shop-sort:hover{ border-color:var(--gold); }
.shop-sort:focus{ outline:none; border-color:var(--gold); }

/* ── Category overview (eyebrow meta + tiles) ── */
.shop-overview-eyebrow{
  display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-bottom:22px;
  font-family:var(--ff-body); font-size:11px; text-transform:uppercase; letter-spacing:.22em; color:var(--muted);
}
.shop-overview-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.shop-overview-sep{ color:var(--gold); }
.shop-overview-headline{ color:var(--ink-2); letter-spacing:.16em; }

.category-highlight{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:44px; }
.category-highlight-card{
  display:flex; align-items:center; gap:14px; padding:15px 16px; background:var(--bg-card);
  border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--ink-2); transition:.35s var(--ease);
}
.category-highlight-card:hover{ border-color:var(--gold); box-shadow:0 18px 44px rgba(11,16,32,.10); transform:translateY(-3px); }
.category-highlight-icon{ flex-shrink:0; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--gold); background:rgba(196,154,99,.10); border:1px solid rgba(196,154,99,.22); transition:.35s var(--ease); }
.category-highlight-card:hover .category-highlight-icon{ background:rgba(196,154,99,.18); border-color:var(--gold); }
.category-highlight-icon svg{ width:22px; height:22px; }
.category-highlight-icon img{ width:100%; height:100%; object-fit:contain; }
.category-highlight-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
/* Wrap long Slovak category names to 2 lines instead of clipping with an ellipsis. */
.category-highlight-text strong{ font-family:var(--ff-body); font-size:14px; font-weight:600; letter-spacing:.01em; color:var(--ink-2);
  line-height:1.22; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.category-highlight-count{ font-size:11.5px; color:var(--muted); letter-spacing:.04em; }
.category-highlight-arrow{ flex-shrink:0; color:var(--gold); transition:transform .3s var(--ease); }
.category-highlight-card:hover .category-highlight-arrow{ transform:translateX(4px); }
/* the "Všetky kategórie" tile renders dark (navy, via inline style) — keep its text light */
.category-highlight-card--alle{ color:var(--ivory); }
.category-highlight-card--alle:hover{ box-shadow:0 16px 40px rgba(11,16,32,.22); }

/* ── Category SEO copy — editable long-form text shown BELOW the product grid
   + pagination on every /obchod/{category}/ page (admin: Products → Categories →
   SEO Content). Salon-styled, comfortable reading measure. ── */
.category-seo-content{ margin:56px auto 8px; padding-top:38px; border-top:1px solid var(--line); max-width:820px; color:var(--ink-2); }
.category-seo-content h1,.category-seo-content h2,.category-seo-content h3{ font-family:var(--ff-display); font-weight:500; color:var(--ink); line-height:1.2; margin:0 0 14px; }
.category-seo-content h2{ font-size:clamp(22px,3vw,28px); }
.category-seo-content h3{ font-size:19px; margin-top:26px; }
.category-seo-content p{ font-size:15px; line-height:1.8; color:var(--muted); margin:0 0 14px; }
.category-seo-content ul,.category-seo-content ol{ font-size:15px; line-height:1.8; color:var(--muted); padding-left:20px; margin:0 0 14px; }
.category-seo-content a{ color:var(--gold); }

/* ── PDP "Použitie" tab — usage text + product video ───────────────
   Single column by default; text|video 2-col on desktop when both exist.
   Video shows WHOLE clip (no crop): iframes keep 16:9; local mp4 renders at
   its natural aspect (portrait OWAY loops stay uncropped), height-capped. */
.pdp-usage{ display:flex; flex-direction:column; gap:30px; }
.pdp-usage-text{ display:flex; flex-direction:column; gap:30px; min-width:0; }
.pdp-usage-video{ min-width:0; }
.pdp-usage-video-frame--embed{ position:relative; width:100%; aspect-ratio:16/9; border:1px solid var(--hairline); border-radius:12px; overflow:hidden; background:#000; }
.pdp-usage-video-frame--embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.pdp-usage-video-el{ display:block; width:100%; height:auto; max-height:78vh; object-fit:contain; background:#000; border:1px solid var(--hairline); border-radius:12px; }
@media (min-width:900px){
  .pdp-usage--split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,40%); gap:44px; align-items:start; }
  .pdp-usage--split .pdp-usage-video{ position:sticky; top:96px; }
  .pdp-usage--split .pdp-usage-video-el{ max-height:70vh; }
}

/* ── PDP related-product slider arrows (desktop); mobile uses swipe ── */
.pdp-slider-nav{ display:flex; gap:10px; flex-shrink:0; }
.pdp-slider-btn{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(196,154,99,.45);
  background:transparent; color:var(--navy,#0B1020); font-size:20px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; transition:.2s var(--ease); }
.pdp-slider-btn:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
@media (max-width:640px){ .pdp-slider-nav{ display:none; } }

/* ── Catalog header (root /obchod/ intro: H1 + subtitle) ── */
.page-hero + .shop-layout{ padding-top:20px; }

/* ── Responsive ── */
@media (max-width:1100px){
  .shop-layout{ grid-template-columns:236px minmax(0,1fr); gap:30px; }
  .category-highlight{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px){
  .shop-layout{ grid-template-columns:1fr; gap:0; padding-top:26px; }
  .shop-sidebar{ position:static; max-height:none; overflow:visible; padding-right:0; margin-bottom:34px; padding-bottom:26px; border-bottom:1px solid var(--line); }
}
@media (max-width:560px){
  .category-highlight{ grid-template-columns:1fr; }
  .shop-toolbar{ flex-wrap:wrap; gap:12px; }
}

/* ── Mobile filter drawer (Round 4) ────────────────────────────────
   ≤900px: the sidebar becomes an off-canvas panel (overlay + slide-in),
   opened by the "Filtre" toolbar button, closed by ×, overlay, Esc or the
   sticky "Zobraziť výsledky" button. Placed AFTER the plain-stack rules
   above so it wins the cascade. Desktop keeps the static sidebar. */
.shop-filter-overlay{ display:none; }
.shop-filter-done{ display:none; }
@media (max-width:900px){
  .shop-filter-toggle{ display:inline-flex; align-items:center; gap:8px; padding:11px 16px;
    background:transparent; border:1px solid var(--gold); color:var(--ink-2);
    font-family:var(--ff-body); font-size:13.5px; letter-spacing:.02em; border-radius:10px;
    cursor:pointer; min-height:44px; transition:background .2s var(--ease); }
  .shop-filter-toggle:hover{ background:rgba(196,154,99,.08); }

  .shop-sidebar{ position:fixed; top:0; left:0; z-index:1200; display:flex; flex-direction:column;
    width:min(88vw,360px); height:100dvh; max-height:none; margin:0; padding:0;
    background:var(--ivory,#FFF9F0); border:none; box-shadow:0 24px 64px rgba(11,16,32,.30);
    transform:translateX(-100%); transition:transform .32s var(--ease); overflow:hidden; }
  .shop-sidebar.is-open{ transform:translateX(0); }
  .shop-sidebar-header{ flex-shrink:0; padding:18px 20px; margin:0; }
  .shop-sidebar-close{ display:block; }
  .shop-sidebar #shopFilterForm{ display:flex; flex-direction:column; flex:1; min-height:0; }
  .shop-sidebar .filter-scroll-area{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 20px 8px; }
  .shop-sidebar .shop-filter-actions{ flex-shrink:0; display:flex; align-items:center; gap:12px;
    padding:14px 20px; background:var(--ivory,#FFF9F0); border-top:1px solid var(--line); }

  .shop-filter-done{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    background:var(--navy,#0B1020); color:#fff; border:1px solid var(--navy,#0B1020); border-radius:10px;
    padding:13px 16px; font-family:var(--ff-body); font-size:14px; font-weight:600; cursor:pointer; min-height:46px; }

  .shop-filter-overlay{ display:block; position:fixed; inset:0; z-index:1150; background:rgba(11,16,32,.5);
    opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease); }
  .shop-filter-overlay.is-visible{ opacity:1; visibility:visible; }
  body.shop-filters-open{ overflow:hidden; }
}