/* =========================================================
   STEFANUTTO — Design System CSS v3
   Light-only, compact, balanced
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,400&family=DM+Sans:wght@300;400;500&display=swap');

:root {
   --font-display: 'Fraunces', Georgia, serif;
   --font-body: 'DM Sans', sans-serif;
   --color-bg: #F5F1EB;
   --color-bg-alt: #EDE7DC;
   --color-section-light: #F7F1E6;
   --color-surface: #FFFFFF;
   --color-border: #D5CBB8;
   --color-ink: #1A1410;
   --color-ink-muted: #5C5147;
   --color-ink-light: #8C7E6F;
   --color-primary: #2E5E3E;
   --color-primary-dk: #1D3D28;
   --color-primary-lt: #4A8A5E;
   --color-primary-bg: #E8F0EB;
   --color-accent: #8B3A1C;
   --color-accent-lt: #C4622E;
   --color-accent-bg: #F5EAE3;
   --color-gold: #B8953A;
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 16px;
   --radius-xl: 24px;
   --radius-pill: 999px;
   --shadow-sm: 0 1px 3px rgba(26, 20, 16, .06);
   --shadow-md: 0 4px 16px rgba(26, 20, 16, .08);
   --shadow-lg: 0 12px 40px rgba(26, 20, 16, .12);
   --shadow-card: 0 2px 8px rgba(26, 20, 16, .06), 0 6px 20px rgba(26, 20, 16, .06);
   --transition-slow: 0.35s ease;
   --max-width: 1100px;
   --content-px: clamp(1rem, 4vw, 2.5rem);
   --header-offset: 88px;
}

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

html, body {
   overflow-x: hidden;
   width: 100%;
}

::selection {
   background: #C8A96E;
   color: #1A140F;
}

::-moz-selection {
   background: #C8A96E;
   color: #1A140F;
}

body {
   background: var(--color-bg);
   color: var(--color-ink);
   font-family: var(--font-body);
   font-size: 15px;
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
}

a {
   color: var(--color-primary);
   text-decoration: none;
}

a:hover {
   color: var(--color-primary-dk);
}

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

ul {
   list-style: none;
}

h1,
h2,
h3,
h4 {
   font-family: var(--font-display);
   color: var(--color-ink);
   line-height: 1.15;
   letter-spacing: -0.02em;
}

h1 {
   font-size: 2.25rem;
   font-weight: 700;
}

h2 {
   font-size: 1.75rem;
   font-weight: 600;
}

h3 {
   font-size: 1.25rem;
   font-weight: 600;
}

h4 {
   font-size: 1.1rem;
   font-weight: 600;
}

.text-primary {
   color: var(--color-primary);
}

.container {
   max-width: var(--max-width);
   margin: 0 auto;
   padding: 0 var(--content-px);
}

/* ============================================================
   TOPBAR — dark, centered
   ============================================================ */
.nav-topbar {
   background: var(--color-ink);
   padding: 8px 0;
   font-size: 13px;
   color: rgba(255, 255, 255, 0.7);
}

.nav-topbar-inner {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   flex-wrap: wrap;
}

.nav-topbar a {
   color: rgba(255, 255, 255, 0.7);
}

.nav-topbar a:hover {
   color: #fff;
}

.nav-topbar-sep {
   color: rgba(255, 255, 255, 0.2);
}

/* Background Textures */
.bg-pattern-cross-light {
   position: relative;
}

.bg-pattern-cross-light::before {
   content: '';
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 0;
   background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.bg-pattern-cross-light>* {
   position: relative;
   z-index: 1;
}

.bg-pattern-cross-dark {
   position: relative;
}

.bg-pattern-cross-dark::before {
   content: '';
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 0;
   background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.bg-pattern-cross-dark>* {
   position: relative;
   z-index: 1;
}



/* ============================================================
   NAVIGATION — light
   ============================================================ */
.nav-main {
   background: var(--color-surface);
   border-bottom: 1px solid var(--color-border);
}

#main-header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   width: 100%;
   display: flex;
   flex-direction: column;
   background: var(--color-surface);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.main-content {
   padding-top: var(--header-offset);
}

.nav-main-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-top: 10px;
   padding-bottom: 10px;
}

/* Logo — Bag in Box v obdélníku */
.logo {
   display: flex;
   align-items: center;
   gap: 12px;
   text-decoration: none;
}

.logo-box {
   border: 2px solid var(--color-primary);
   border-radius: var(--radius-md);
   padding: 6px 14px;
}

.logo-main {
   font-family: var(--font-display);
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--color-primary);
   line-height: 1;
   letter-spacing: -0.02em;
}

.logo-sub {
   font-family: var(--font-body);
   font-size: 13px;
   font-weight: 400;
   color: var(--color-ink-muted);
}

.logo-sro {
   color: var(--color-primary);
   font-weight: 500;
}

.main-nav {
   display: flex;
   align-items: center;
   gap: 28px;
}

.nav-links {
   display: flex;
   gap: 22px;
}

.nav-links a {
   font-size: 13px;
   color: var(--color-ink-muted);
   font-weight: 500;
   padding-bottom: 2px;
   border-bottom: 1.5px solid transparent;
}

.nav-links a:hover,
.nav-links a.active {
   color: var(--color-ink);
   border-bottom-color: var(--color-primary);
}

/* Dropdown */
.has-dropdown {
   position: relative;
}

.dropdown {
   position: absolute;
   top: 100%;
   left: -12px;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
   min-width: 210px;
   padding: 6px 0;
   opacity: 0;
   visibility: hidden;
   z-index: 200;
}

.has-dropdown:hover .dropdown {
   opacity: 1;
   visibility: visible;
}

.dropdown li a {
   display: block;
   padding: 8px 20px;
   color: var(--color-ink);
   font-size: 13px;
   border-bottom: none;
}

.dropdown li a:hover {
   background: var(--color-primary-bg);
   color: var(--color-primary);
}

/* Nav CTA */
.nav-cta {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--color-primary);
   color: #fff;
   padding: 8px 16px;
   border-radius: var(--radius-md);
   font-size: 11px;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.06em;
}

.nav-cta:hover {
   background: var(--color-primary-dk);
   color: #fff;
}

/* Hamburger & Mobile Actions */
.header-mobile-actions {
   display: none;
   align-items: center;
   gap: 20px;
}

.mobile-cart-icon {
   display: inline-flex;
   align-items: center;
   position: relative;
   color: var(--color-ink);
}

.mobile-cart-icon:hover {
   color: var(--color-primary);
}

.bubble-count {
   position: absolute;
   top: -8px;
   right: -10px;
   background: var(--color-accent);
   color: #fff;
   font-size: 10px;
   font-weight: 700;
   height: 18px;
   min-width: 18px;
   border-radius: 9px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 4px;
}

.hamburger {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   width: 26px;
   height: 22px;
   position: relative;
   z-index: 110;
}

.hamburger span {
   display: block;
   width: 100%;
   height: 2px;
   background: var(--color-ink);
   position: absolute;
   left: 0;
}

.hamburger span:nth-child(1) {
   top: 2px;
}

.hamburger span:nth-child(2) {
   top: 10px;
}

.hamburger span:nth-child(3) {
   top: 18px;
}

.hamburger.active span:nth-child(1) {
   top: 10px;
   transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
   opacity: 0;
}

.hamburger.active span:nth-child(3) {
   top: 10px;
   transform: rotate(-45deg);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   border: none;
   cursor: pointer;
   font-family: var(--font-body);
   font-weight: 500;
   letter-spacing: 0.02em;
   text-decoration: none;
   text-align: center;
   justify-content: center;
}

.btn-primary {
   background: var(--color-primary);
   color: #fff;
   padding: 11px 24px;
   border-radius: var(--radius-md);
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
}

.btn-primary:hover {
   background: var(--color-primary-dk);
   box-shadow: var(--shadow-md);
   color: #fff;
}

/* Hero-specific button overrides — accent on green background */
.hero .btn-primary {
   background: var(--color-accent);
}
.hero .btn-primary:hover {
   background: var(--color-accent-lt);
}

.btn-accent {
   background: var(--color-accent);
   color: #fff;
   padding: 11px 24px;
   border-radius: var(--radius-md);
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
}

.btn-accent:hover {
   background: var(--color-accent-lt);
   color: #fff;
}

.btn-outline {
   background: transparent;
   color: var(--color-primary);
   padding: 10px 23px;
   border-radius: var(--radius-md);
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   border: 1.5px solid var(--color-primary);
}

.btn-outline:hover {
   background: var(--color-primary-bg);
}

.btn-outline-light {
   background: transparent;
   color: #fff;
   padding: 10px 23px;
   border-radius: var(--radius-md);
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   border: 1.5px solid rgba(255, 255, 255, .4);
}

.btn-outline-light:hover {
   border-color: #fff;
   color: #fff;
   background: rgba(255, 255, 255, .1);
}

.btn-ghost {
   background: transparent;
   color: var(--color-ink-muted);
   padding: 10px 18px;
   border-radius: var(--radius-md);
   font-size: 13px;
   border: 1.5px solid var(--color-border);
}

.btn-ghost:hover {
   border-color: var(--color-ink-muted);
   color: var(--color-ink);
}

.btn-sm {
   padding: 7px 14px;
   font-size: 11px;
}

.btn-lg {
   padding: 14px 30px;
   font-size: 14px;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
   padding: 48px 0;
}

.section--alt {
   background: var(--color-bg-alt);
}

.section--light {
   background: var(--color-section-light);
}

.section--green-light {
   background-color: #f1f5f2;
}

.section--bg1 {
   background-color: #f5f1eb;
}

.section--bg2 {
   background-color: #ede7dc;
}

.section-eyebrow {
   display: block;
   font-family: var(--font-body);
   font-size: 11px;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: var(--color-primary);
   margin-bottom: 8px;
}

.section-header {
   text-align: center;
   margin-bottom: 32px;
}

.section-header h2 {
   margin-bottom: 6px;
}

.section-desc {
   font-size: 14px;
   color: var(--color-ink-muted);
   line-height: 1.7;
   max-width: 520px;
   margin: 0 auto;
}

/* ============================================================
   PAGE HEADER — dark green to match hero
   ============================================================ */
.page-header {
   background: var(--color-primary);
   padding: 48px 0;
   text-align: center;
   position: relative;
   overflow: hidden;
   color: #fff;
}

.page-header::before {
   content: '';
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 0;
   background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.page-header::after {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 80% 50%, rgba(200, 169, 110, 0.15), transparent 50%);
   pointer-events: none;
   z-index: 0;
}

.page-header > * {
   position: relative;
   z-index: 1;
}

.page-header h1 {
   font-size: 2.25rem;
   font-weight: 700;
   margin-bottom: 6px;
   color: #fff;
}

.page-header p {
   color: rgba(255, 255, 255, 0.8);
   font-size: 15px;
}

.breadcrumb {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.8);
   margin-top: 12px;
}

.breadcrumb a {
   color: #fff;
   text-decoration: none;
}

.breadcrumb a:hover {
   text-decoration: underline;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
   background: url('../img/hero_bg.jpg') center/cover no-repeat;
   color: #fff;
   position: relative;
   overflow: hidden;
   width: 100%;
   max-width: 100vw;
   padding: 64px 0;
   display: flex;
   align-items: center;
}

.hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.70);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   z-index: 0;
   pointer-events: none;
}

.hero--compact {
   padding: 48px 0;
   background: var(--color-primary);
}

.hero::after {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 50% 50%, rgba(200, 169, 110, 0.15), transparent 60%);
   pointer-events: none;
   z-index: 0;
}

.hero-inner {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: 40px;
   align-items: center;
   position: relative;
   z-index: 1;
   width: 100%;
}

.hero h1 {
   font-size: clamp(1.75rem, 4vw, 3.25rem);
   font-weight: 700;
   color: #fff;
   line-height: 1.08;
   letter-spacing: -0.03em;
   margin-bottom: 12px;
}

.hero h1 em {
   font-style: italic;
   color: var(--color-gold);
}

.hero p {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.9);
   line-height: 1.65;
   margin-bottom: 32px;
   max-width: 540px;
}

.hero-actions {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
}

.hero-inner--single {
   grid-template-columns: 1fr;
   text-align: center;
   max-width: 980px;
   margin: 0 auto;
}

.hero-inner--single > div {
   width: 100%;
   max-width: 980px;
   margin: 0 auto;
}

.hero-inner--single p {
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
}

.hero-inner--single .hero-actions {
   justify-content: center;
}

.home-about {
   background: #f8f4ee;
}

.home-about-grid {
   display: grid;
   grid-template-columns: .55fr 1.45fr;
   gap: 34px;
   align-items: start;
}

.home-about-media {
   display: flex;
   align-items: center;
   justify-content: center;
   align-self: start;
   padding-top: 2px;
}

.home-about-media img {
   width: min(100%, 220px);
   max-height: 280px;
   object-fit: contain;
   filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12));
   transform-origin: center;
   transition: transform .2s ease-out;
}

.home-about-content h2 {
   margin-bottom: 12px;
   font-size: clamp(1.72rem, 2.7vw, 2.25rem);
}

.home-about-copy {
   columns: 2;
   column-gap: 26px;
}

.home-about-sro {
   color: var(--color-primary);
}

.home-about-content p {
   color: var(--color-ink-muted);
   font-size: 15.5px;
   line-height: 1.66;
   margin-bottom: 10px;
   max-width: 80ch;
   break-inside: avoid;
}

.home-about-signature {
   display: block;
   margin-top: 10px;
   width: min(100%, 160px);
   height: auto;
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
   border-radius: 0 !important;
   padding: 0 !important;
}

.home-about-mobile-inline-image {
   display: none;
}

/* Hero collage (stable editorial layout) */
.hero-collage {
   width: 100%;
   max-width: 520px;
   margin-left: auto;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
}

.hero-collage-item {
   background: rgba(255, 255, 255, 0.95);
   border-radius: var(--radius-lg);
   border: 1px solid rgba(255, 255, 255, 0.65);
   box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
   padding: 10px;
   overflow: hidden;
   animation: heroFadeIn .7s ease both;
}

.hero-collage-item:nth-child(2) {
   animation-delay: .08s;
}

.hero-collage-item:nth-child(3) {
   animation-delay: .16s;
}

.hero-collage-item:nth-child(4) {
   animation-delay: .24s;
}

.hero-collage-item img {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: contain;
   display: block;
   background: #fff;
   border-radius: var(--radius-md);
}

.hero-collage-item span {
   display: block;
   margin-top: 8px;
   padding: 0 4px 2px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .02em;
   color: var(--color-primary);
   text-transform: uppercase;
}

@keyframes heroFadeIn {
   from {
      opacity: 0;
      transform: translateY(8px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@media (prefers-reduced-motion: reduce) {
   .hero-collage-item {
      animation: none;
   }
}

/* ============================================================
   ABOUT GRID
   ============================================================ */
.about-grid {
   display: grid;
   grid-template-columns: 1fr 1.5fr;
   gap: 40px;
   align-items: center;
}

.about-content h2 {
   margin-bottom: 16px;
}

.about-content p {
   font-size: 14px;
   color: var(--color-ink-muted);
   line-height: 1.7;
   margin-bottom: 12px;
}

.about-image {
   text-align: center;
}

.about-image img {
   border-radius: var(--radius-lg);
}

/* ============================================================
   GRIDS
   ============================================================ */
.grid {
   display: grid;
   gap: 20px;
}

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

.grid-3 {
   grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
   grid-template-columns: repeat(4, 1fr);
}

/* ============================================================
   CAT-CARD (category/service card) — with icon and aligned button
   ============================================================ */
.cat-card {
   display: flex;
   flex-direction: column;
   background: linear-gradient(180deg, #fff 0%, #fcfbf8 100%);
   border-radius: 18px;
   overflow: hidden;
   box-shadow: 0 10px 26px rgba(26, 20, 16, .08);
   border: 1px solid rgba(46, 94, 62, .26);
   text-decoration: none;
   color: var(--color-ink);
   transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.cat-card:hover {
   border-color: rgba(139, 58, 28, .45);
   box-shadow: 0 16px 32px rgba(26, 20, 16, .12);
   transform: translateY(-4px);
   color: var(--color-ink);
}

.cat-card-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 80px;
   background: var(--color-primary-bg);
   color: var(--color-primary);
}

.cat-card-icon svg {
   width: 36px;
   height: 36px;
}

.cat-card img {
   width: 100%;
   height: 256px;
   object-fit: contain;
   background: #fff;
   padding: 18px 18px 14px;
   border-bottom: 1px solid rgba(213, 203, 184, .72);
}

.cat-card-body {
   padding: 20px 22px 22px;
   display: flex;
   flex-direction: column;
   flex: 1;
}

.cat-card-body h3 {
   font-family: var(--font-display);
   margin-bottom: 8px;
   font-size: 1.45rem;
   color: var(--color-ink);
}

.cat-card-body p {
   font-size: 15px;
   color: var(--color-ink-muted);
   line-height: 1.62;
   flex: 1;
   margin-bottom: 18px;
}

.cat-card-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 10px 20px;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--color-primary);
   border: 1.8px solid var(--color-primary);
   border-radius: 12px;
   margin-top: auto;
   align-self: flex-start;
   background: rgba(232, 240, 235, .52);
   transition: background .2s ease, color .2s ease;
}

.cat-card:hover .cat-card-link {
   background: var(--color-primary);
   color: #fff;
}

/* ============================================================
   SUBCAT GRID — with icons
   ============================================================ */
.subcat-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
}

.subcat-card {
   background: var(--color-surface);
   border-radius: var(--radius-lg);
   padding: 16px;
   box-shadow: var(--shadow-sm);
   text-align: left;
   border: 1px solid var(--color-border);
}

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

.subcat-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 12px;
   color: var(--color-primary);
}

.subcat-icon svg {
   width: 32px;
   height: 32px;
}

.subcat-card h4 {
   font-family: var(--font-display);
   font-size: 1rem;
   margin-bottom: 8px;
}

.subcat-card p {
   font-size: 13px;
   color: var(--color-ink-muted);
   line-height: 1.5;
   margin: 0;
}

.subcat-card--visual {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   text-decoration: none;
   color: inherit;
}

.subcat-thumb {
   width: 74px;
   height: 74px;
   flex-shrink: 0;
   object-fit: contain;
   background: #fff;
   border-radius: var(--radius-md);
   border: 1px solid var(--color-border);
   padding: 8px;
}

.subcat-meta {
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

.subcat-link {
   margin-top: 12px;
   color: var(--color-primary);
   font-size: 12px;
   font-weight: 700;
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

/* ============================================================
   PRODUCT CARDS — rounded images, no crop
   ============================================================ */
.product-card {
   background: var(--color-surface);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   border: 1px solid var(--color-border);
   display: flex;
   flex-direction: column;
}

.product-card:hover {
   box-shadow: var(--shadow-md);
   border-color: rgba(46, 94, 62, 0.3);
}

.product-card-img {
   padding: 16px;
   background: var(--color-surface);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   min-height: 160px;
}

.product-card-img img {
   max-width: 100%;
   max-height: 160px;
   object-fit: contain;
   border-radius: var(--radius-lg);
}

.badge-sold-out {
   position: absolute;
   top: 12px;
   left: 12px;
   background: var(--color-accent);
   color: #fff;
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   padding: 3px 8px;
   border-radius: var(--radius-pill);
}

.product-card-body {
   padding: 16px 20px 20px;
   display: flex;
   flex-direction: column;
   flex: 1;
   border-top: 1px solid var(--color-border);
   background: #fff;
}

.product-card-body h3 {
   font-family: var(--font-body);
   font-size: 14px;
   font-weight: 500;
   margin-bottom: 8px;
   line-height: 1.4;
   color: var(--color-ink-muted);
}

.product-card-body h3 a {
   color: inherit;
}

.product-card-body h3 a:hover {
   color: var(--color-primary);
}

.product-card-price-wrap {
   margin-bottom: 16px;
}

.product-card-price {
   font-family: var(--font-display);
   font-size: 1.15rem;
   font-weight: 700;
   color: var(--color-primary);
   display: block;
   margin-bottom: 2px;
}

.product-card-dph {
   font-family: var(--font-body);
   font-size: 11px;
   color: var(--color-ink-light);
   font-weight: 400;
}

.product-card-actions {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
   margin-top: auto;
}

/* ============================================================
   FILTERS
   ============================================================ */
.filter-bar {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 28px;
   justify-content: center;
}

.filter-btn {
   padding: 7px 16px;
   border-radius: var(--radius-pill);
   font-size: 13px;
   font-weight: 500;
   color: var(--color-ink-muted);
   border: 1.5px solid var(--color-border);
   background: transparent;
   text-decoration: none;
   cursor: pointer;
}

.filter-btn:hover {
   border-color: var(--color-primary);
   color: var(--color-primary);
}

.filter-btn.active {
   background: var(--color-primary);
   color: #fff;
   border-color: var(--color-primary);
}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.product-detail {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   align-items: start;
}

.product-detail-img {
   background: var(--color-surface);
   border-radius: var(--radius-xl);
   padding: 32px;
   box-shadow: var(--shadow-card);
}

.product-detail-img img {
   width: 100%;
   object-fit: contain;
   border-radius: var(--radius-lg);
}

.product-detail-info h1 {
   margin-bottom: 12px;
   font-size: 1.75rem;
}

.product-detail-price {
   font-family: var(--font-display);
   font-size: 1.6rem;
   font-weight: 600;
   color: var(--color-ink);
   margin-bottom: 16px;
}

.product-detail-desc {
   font-size: 14px;
   color: var(--color-ink-muted);
   line-height: 1.8;
}

.qty-input {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 20px;
}

.qty-input label {
   font-size: 13px;
   font-weight: 500;
}

.qty-input input {
   width: 70px;
   padding: 8px 12px;
   border: 1.5px solid var(--color-border);
   border-radius: var(--radius-md);
   font-family: var(--font-body);
   font-size: 13px;
   text-align: center;
}

.qty-input input:focus {
   border-color: var(--color-primary);
   outline: none;
   box-shadow: 0 0 0 3px rgba(46, 94, 62, .1);
}

/* ============================================================
   CART
   ============================================================ */
.cart-table {
   width: 100%;
   border-collapse: collapse;
   background: var(--color-surface);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-card);
   font-size: 13px;
}

.cart-table th {
   background: var(--color-primary-bg);
   color: var(--color-ink);
   padding: 12px 16px;
   text-align: left;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   font-weight: 600;
}

.cart-table td {
   padding: 12px 16px;
   border-bottom: 1px solid var(--color-border);
}

.cart-product {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
   min-width: 0;
}

.cart-product span {
   display: block;
   min-width: 0;
   max-width: 100%;
   overflow-wrap: anywhere;
   word-break: break-word;
   line-height: 1.4;
}

.product-mini-card img {
   width: 100%;
   height: 140px;
   object-fit: contain;
   border-radius: var(--radius-md);
   margin-bottom: 16px;
   background: var(--color-bg);
}

.cart-product img {
   width: 44px;
   height: 44px;
   object-fit: contain;
   border-radius: var(--radius-sm);
   background: var(--color-bg);
}

.cart-qty {
   width: 55px;
   padding: 6px;
   border: 1.5px solid var(--color-border);
   border-radius: var(--radius-md);
   text-align: center;
   font-family: var(--font-body);
   font-size: 13px;
}

.cart-remove {
   color: var(--color-accent);
   font-size: 13px;
}

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr;
   gap: 40px;
}

.cart-summary {
   background: var(--color-surface);
   border-radius: var(--radius-xl);
   padding: 28px;
   box-shadow: var(--shadow-card);
   position: sticky;
   top: 80px;
}

.cart-summary h3 {
   font-family: var(--font-display);
}

.cart-summary-row {
   display: flex;
   justify-content: space-between;
   padding: 8px 0;
   font-size: 13px;
   color: var(--color-ink-muted);
   border-bottom: 1px solid var(--color-border);
}

.cart-summary-total {
   font-weight: 600;
   color: var(--color-ink);
   font-size: 15px;
   border-bottom: none;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-group {
   margin-bottom: 18px;
}

.form-group label {
   display: block;
   font-size: 13px;
   font-weight: 500;
   color: var(--color-ink);
   margin-bottom: 5px;
}

.form-group input,
.form-group textarea,
.form-group select {
   width: 100%;
   padding: 10px 14px;
   border: 1.5px solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-bg);
   color: var(--color-ink);
   font-family: var(--font-body);
   font-size: 13px;
   outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
   color: var(--color-ink-light);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px rgba(46, 94, 62, .1);
   background: var(--color-surface);
}

.form-group textarea {
   resize: vertical;
   min-height: 100px;
}

.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
}

.checkbox-group {
   display: flex;
   gap: 8px;
   align-items: flex-start;
   font-size: 13px;
   margin-bottom: 18px;
}

.checkbox-group a {
   text-decoration: underline;
}

.honeypot {
   position: absolute;
   left: -9999px;
}

/* ============================================================
   BLOG
   ============================================================ */
.blog-card {
   display: flex;
   flex-direction: column;
   background: var(--color-surface);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-card);
   color: var(--color-ink);
}

.blog-card:hover {
   color: var(--color-ink);
}

.blog-card-img {
   height: 150px;
   background: var(--color-bg-alt);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.blog-card-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.blog-card-body {
   padding: 18px;
}

.blog-date {
   font-size: 11px;
   color: var(--color-ink-light);
   margin-bottom: 4px;
}

.blog-card-body h3 {
   font-family: var(--font-display);
   font-size: 1.1rem;
   margin-bottom: 6px;
}

.blog-card-body p {
   font-size: 13px;
   color: var(--color-ink-muted);
   line-height: 1.55;
   margin-bottom: 10px;
}

.blog-detail {
   max-width: 720px;
   margin: 0 auto;
}

.blog-meta {
   font-size: 13px;
   color: var(--color-ink-light);
   margin-bottom: 24px;
}

.blog-content {
   line-height: 1.75;
   font-size: 15px;
}

.blog-content h2,
.blog-content h3 {
   margin: 28px 0 12px;
}

.blog-content p {
   margin-bottom: 14px;
}

.blog-content img {
   border-radius: var(--radius-lg);
   margin: 20px 0;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
}

.contact-info h2 {
   margin-bottom: 24px;
}

.contact-info-item {
   display: flex;
   gap: 12px;
   margin-bottom: 18px;
}

.contact-info-item .icon {
   width: 40px;
   height: 40px;
   background: var(--color-primary-bg);
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   color: var(--color-primary);
}

.contact-info-item .icon svg {
   width: 18px;
   height: 18px;
}

.contact-info-item a {
   color: var(--color-primary);
}

.contact-form {
   background: var(--color-surface);
   border-radius: var(--radius-xl);
   padding: 28px;
   box-shadow: var(--shadow-card);
}

/* ============================================================
   TABLES
   ============================================================ */
.spec-table {
   width: 100%;
   border-collapse: collapse;
   background: var(--color-surface);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-card);
   font-size: 13px;
}

.spec-table thead tr {
   background: var(--color-primary-bg);
}

.spec-table th {
   padding: 12px 16px;
   text-align: left;
   font-weight: 600;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--color-ink);
}

.spec-table tbody tr {
   border-bottom: 1px solid var(--color-border);
}

.spec-table tbody tr:hover {
   background: var(--color-bg);
}

.spec-table tbody tr:last-child {
   border-bottom: none;
}

.spec-table td {
   padding: 12px 16px;
   color: var(--color-ink);
}

.spec-table td strong {
   color: var(--color-primary);
}

/* ============================================================
   CTA BANNER — light version
   ============================================================ */
.cta-banner {
   background: var(--color-primary-bg);
   border-top: 1px solid rgba(46, 94, 62, .15);
   border-bottom: 1px solid rgba(46, 94, 62, .15);
   padding: 48px 0;
   text-align: center;
}

.cta-banner h2 {
   font-family: var(--font-display);
   font-size: 1.75rem;
   margin-bottom: 4px;
}

.cta-banner p {
   color: var(--color-ink-muted);
   font-size: 14px;
}

/* ============================================================
   VIDEO
   ============================================================ */
.video-wrap {
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-card);
   aspect-ratio: 16/9;
}

.video-wrap iframe {
   width: 100%;
   height: 100%;
   border: none;
}

/* ============================================================
   SORTIMENT HERO — green, matching main hero
   ============================================================ */
.sortiment-hero {
   background: var(--color-primary);
   padding: 48px 0;
   position: relative;
   overflow: hidden;
   color: #fff;
}

.sortiment-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 0;
   background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.sortiment-hero::after {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 80% 50%, rgba(200, 169, 110, 0.15), transparent 50%);
   pointer-events: none;
   z-index: 0;
}

.sortiment-hero-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 32px;
   align-items: center;
   position: relative;
   z-index: 1;
}

.sortiment-hero-content h1 {
   font-size: 2rem;
   margin-bottom: 12px;
   color: #fff;
}

.sortiment-hero-content h1 span {
   color: var(--color-gold);
}

.sortiment-hero-content p {
   color: rgba(255,255,255,0.7);
   font-size: 14px;
   line-height: 1.7;
}

.sortiment-hero-img img {
   border-radius: var(--radius-xl);
   max-width: 350px;
   margin: 0 auto;
   box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

.sortiment-section {
   padding: 40px 0;
}

.sortiment-section+.sortiment-section {
   border-top: 1px solid var(--color-border);
}

.sortiment-section h2 {
   margin-bottom: 12px;
}

/* Product mini grid */
.product-mini-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 20px;
}

.product-mini-card {
   background: var(--color-surface);
   border-radius: var(--radius-lg);
   border: 1px solid var(--color-border);
   padding: 16px;
   text-align: left;
   box-shadow: var(--shadow-sm);
}

.product-mini-card:hover {
   box-shadow: var(--shadow-md);
   transform: translateY(-2px);
}

.product-mini-card img {
   width: 100%;
   aspect-ratio: 4 / 3;
   max-height: 220px;
   object-fit: contain;
   margin-bottom: 12px;
   border-radius: var(--radius-md);
   border: 1px solid var(--color-border);
   background: #fff;
   padding: 10px;
}

.product-mini-card h4 {
   font-size: 1rem;
   font-family: var(--font-display);
   margin-bottom: 4px;
   line-height: 1.25;
}

.product-mini-card p {
   font-size: 13px;
   color: var(--color-ink-muted);
   line-height: 1.45;
}

/* ============================================================
   THANK YOU, PAGINATION, ALERTS, COOKIE
   ============================================================ */
.thankyou {
   text-align: center;
   padding: 64px 0;
}

.thankyou h1 {
   margin-bottom: 12px;
}

.order-number {
   font-family: var(--font-display);
   font-size: 1.3rem;
   color: var(--color-primary);
   margin-bottom: 24px;
   font-weight: 600;
}

.pagination {
   display: flex;
   justify-content: center;
   gap: 6px;
   margin-top: 28px;
}

.pagination a,
.pagination span {
   padding: 8px 14px;
   border-radius: var(--radius-md);
   font-size: 13px;
   font-weight: 500;
   border: 1.5px solid var(--color-border);
   color: var(--color-ink-muted);
}

.pagination a:hover {
   border-color: var(--color-primary);
   color: var(--color-primary);
}

.pagination .active {
   background: var(--color-primary);
   color: #fff;
   border-color: var(--color-primary);
}

.alert {
   padding: 12px 18px;
   border-radius: var(--radius-md);
   font-size: 13px;
   margin-bottom: 18px;
   border-left: 3px solid;
}

.alert-success {
   background: var(--color-primary-bg);
   border-color: var(--color-primary);
   color: var(--color-primary-dk);
}

.alert-error {
   background: var(--color-accent-bg);
   border-color: var(--color-accent);
   color: var(--color-accent);
}

.cookie-banner {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 3000;
   background: var(--color-surface);
   border-top: 1px solid var(--color-border);
   padding: 12px 0;
}

.cookie-inner {
   max-width: var(--max-width);
   margin: 0 auto;
   padding: 0 var(--content-px);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
}

.cookie-inner p {
   color: var(--color-ink-muted);
   font-size: 13px;
}

.cookie-inner p a {
   text-decoration: underline;
}

.cookie-actions {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
}

@media (max-width: 760px) {
   .cookie-inner {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
   }

   .cookie-actions {
      width: 100%;
   }

   .cookie-actions .btn {
      flex: 1;
      justify-content: center;
   }
}

/* ============================================================
   FOOTER
   ============================================================ */
.main-footer {
   background: #F9F4EE;
   padding: 42px 0 0;
   border-top: 1px solid #e7dece;
   margin: 0;
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr;
   gap: 40px;
}

.footer-logo {
   font-family: var(--font-display);
   font-size: 1.2rem;
   font-weight: 700;
   color: #2a2217;
   margin-bottom: 10px;
}

.footer-logo span {
   color: var(--color-primary);
}

.footer-desc {
   font-size: 13px;
   color: #5f5242;
   line-height: 1.55;
   margin-bottom: 16px;
}

.footer-info p {
   font-size: 13px;
   color: #5f5242;
   line-height: 1.8;
}

.footer-heading {
   font-family: var(--font-display);
   font-size: 1.1rem;
   font-weight: 600;
   margin-bottom: 16px;
}

.footer-contact {
   margin-bottom: 16px;
}

.footer-contact strong {
   font-size: 15px;
   line-height: 1.4;
}

.footer-contact p {
   font-size: 14px;
   color: #5f5242;
   line-height: 1.55;
}

.footer-contact p + p {
   margin-top: 2px;
}

.footer-contact a {
   color: var(--color-primary);
}

.contact-person-card strong {
   font-size: clamp(1.1rem, 1.6vw, 1.35rem);
   color: var(--color-ink);
}

.contact-person-card p {
   font-size: clamp(1rem, 1.2vw, 1.08rem);
}

.footer-nav li {
   margin-bottom: 6px;
}

.footer-nav a {
   font-size: 13px;
   color: #5f5242;
}

.footer-nav a:hover {
   color: var(--color-primary);
}

.footer-bottom {
   margin-top: 26px;
   padding: 14px 0;
   border-top: 1px solid #e7dece;
   background: #1A140F;
   border-radius: 0;
}

.footer-bottom p {
   font-size: 11.5px;
   color: #f2e9dd;
   font-weight: 500;
   text-align: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
   .grid-4 {
      grid-template-columns: repeat(2, 1fr);
   }

   .hero-inner {
      grid-template-columns: 1fr;
      text-align: center;
   }

   .hero p {
      margin: 0 auto 24px;
   }

   .hero-actions {
      justify-content: center;
   }

   .sortiment-hero-inner {
      grid-template-columns: 1fr;
      text-align: center;
   }

   .sortiment-hero-img img {
      margin: 16px auto 0;
   }

   .about-grid {
      grid-template-columns: 1fr;
   }

   .home-about-grid {
      grid-template-columns: 1fr;
      gap: 28px;
   }

   .home-about-media {
      order: 2;
   }

   .home-about-media img {
      width: min(100%, 200px);
      max-height: 260px;
   }

   .home-about-content {
      order: 1;
   }

   .home-about-content h2 {
      font-size: clamp(1.6rem, 4.4vw, 2.1rem);
   }

   .home-about-content p {
      font-size: 15px;
   }

   .about-image {
      text-align: center;
      margin-bottom: 24px;
   }
   
   .about-image img {
      max-width: 240px;
   }
}

@media (max-width: 768px) {
   .header-mobile-actions {
      display: flex;
   }

   .nav-cta {
      display: none;
   }

   .hamburger {
      display: block;
   }

   .main-nav {
      position: fixed;
      top: 0;
      right: -100%;
      width: 80%;
      max-width: 320px;
      height: 100vh;
      background: var(--color-surface);
      flex-direction: column;
      padding: 60px 24px 24px;
      gap: 20px;
      z-index: 100;
      align-items: flex-start;
      border-left: 1px solid var(--color-border);
      box-shadow: -8px 0 40px rgba(26, 20, 16, .15);
   }

   .main-nav.open {
      right: 0;
   }

   .nav-links {
      flex-direction: column;
      gap: 10px;
   }

   .nav-links a {
      font-size: 14px;
      color: var(--color-ink);
   }

   .dropdown {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: none;
      background: transparent;
      padding-left: 16px;
   }

   .dropdown li a {
      color: var(--color-ink-muted);
      padding: 6px 0;
   }

   .dropdown li a:hover {
      background: transparent;
      color: var(--color-primary);
   }

   .nav-topbar-inner {
      gap: 10px;
   }

   .grid-2,
   .grid-3 {
      grid-template-columns: 1fr;
   }

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

   .product-detail {
      grid-template-columns: 1fr;
   }

   .checkout-grid {
      grid-template-columns: 1fr;
   }

   .contact-grid {
      grid-template-columns: 1fr;
   }

   .footer-grid {
      grid-template-columns: 1fr;
      gap: 28px;
   }

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

   .subcat-card--visual {
      flex-direction: column;
      align-items: flex-start;
   }

   .subcat-thumb {
      width: 100%;
      height: 140px;
   }

   h1 {
      font-size: 1.75rem;
   }

   h2 {
      font-size: 1.5rem;
   }

   .page-header {
      padding: 32px 0;
   }

   .hero {
      padding: 40px 0;
   }

   .section {
      padding: 36px 0;
   }
}

/* ============================================================
   CART TOAST
   ============================================================ */
.cart-toast {
   position: fixed;
   bottom: 24px;
   right: 24px;
   background: var(--color-surface);
   border-radius: var(--radius-lg);
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
   padding: 16px 20px;
   display: flex;
   align-items: center;
   gap: 16px;
   opacity: 0;
   visibility: hidden;
   z-index: 1000;
   border: 1px solid var(--color-border);
}

.cart-toast.show {
   transform: translateY(0);
   opacity: 1;
   visibility: visible;
}

.cart-toast-content {
   display: flex;
   align-items: center;
   gap: 12px;
   font-weight: 500;
   font-size: 14px;
   color: var(--color-ink);
}

.floating-contact {
   position: fixed;
   bottom: 24px;
   left: 24px;
   background: var(--color-accent);
   color: #fff;
   padding: 14px 22px;
   border-radius: var(--radius-pill);
   display: inline-flex;
   align-items: center;
   gap: 10px;
   box-shadow: var(--shadow-lg);
   z-index: 900;
   font-family: var(--font-body);
   font-size: 13px;
   font-weight: 500;
   text-decoration: none;
   letter-spacing: 0.02em;
}

.floating-contact:hover {
   background: var(--color-accent-lt);
   box-shadow: 0 8px 30px rgba(139, 58, 28, .35);
   color: #fff;
}

.floating-contact-label {
   white-space: nowrap;
}

@media (max-width: 480px) {
   .floating-contact {
      bottom: 16px;
      left: 16px;
      padding: 12px 18px;
      font-size: 12px;
   }

   .cart-toast {
      bottom: 16px;
      right: 16px;
      left: 16px;
      justify-content: space-between;
   }
}

@media (max-width: 480px) {
   .grid-4 {
      grid-template-columns: 1fr;
   }

   .form-row {
      grid-template-columns: 1fr;
   }

   .subcat-grid {
      grid-template-columns: 1fr;
   }

   .product-mini-grid {
      grid-template-columns: 1fr;
   }

   .nav-topbar {
      display: none;
   }

   :root {
      --header-offset: 72px;
   }


   .hero h1 {
      font-size: 1.5rem;
      word-wrap: break-word;
   }

   .home-about-content p {
      font-size: 15px;
   }

   .section-header h2 {
      font-size: 1.35rem;
   }

   .container {
      padding: 0 16px;
   }
}

/* ============================================================
   PRODUCT CAROUSEL — horizontal scroll, 4 items on desktop
   ============================================================ */
.products-carousel-section {
   padding: 48px 0;
   overflow: hidden;
}

.products-carousel-section .section-header {
   margin-bottom: 24px;
}

.products-carousel-wrap {
   display: flex;
   gap: 20px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
   padding-bottom: 16px;
   scrollbar-width: thin;
   scrollbar-color: var(--color-border) transparent;
}

.products-carousel-wrap::-webkit-scrollbar {
   height: 6px;
}

.products-carousel-wrap::-webkit-scrollbar-track {
   background: transparent;
}

.products-carousel-wrap::-webkit-scrollbar-thumb {
   background: var(--color-border);
   border-radius: 3px;
}

.products-carousel-wrap .product-card {
   flex: 0 0 calc(25% - 15px);
   min-width: 220px;
   scroll-snap-align: start;
}

@media (max-width: 1024px) {
   .products-carousel-wrap .product-card {
      flex: 0 0 calc(33.333% - 14px);
   }
}

@media (max-width: 768px) {
   .products-carousel-wrap .product-card {
      flex: 0 0 calc(50% - 10px);
   }
}

@media (max-width: 480px) {
   .products-carousel-wrap .product-card {
      flex: 0 0 85%;
   }
}

/* ============================================================
   SOURCE CONTENT (normalized blocks)
   ============================================================ */
.source-content-section {
   padding: 44px 0;
   border-top: 1px solid rgba(213, 203, 184, 0.6);
}

.source-content-section:first-of-type {
   border-top: none;
}

.source-row {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 24px;
   margin-bottom: 26px;
}

.source-row:last-child {
   margin-bottom: 0;
}

.source-row-inner {
   margin-top: 6px;
   margin-bottom: 16px;
}

.source-col {
   grid-column: span 12;
   min-width: 0;
}

.source-col-1-2 {
   grid-column: span 6;
}

.source-col-1-3 {
   grid-column: span 4;
}

.source-col-2-3 {
   grid-column: span 8;
}

.source-col-1-4 {
   grid-column: span 3;
}

.source-col-3-4 {
   grid-column: span 9;
}

.source-col-1-5 {
   grid-column: span 3;
}

.source-text {
   color: var(--color-ink);
}

.source-text h1,
.source-text h2,
.source-text h3,
.source-text h4 {
   margin-bottom: 10px;
   color: var(--color-primary-dk);
}

.source-text h2 {
   font-size: clamp(1.5rem, 2.8vw, 2rem);
}

.source-text h3 {
   font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.source-text p,
.source-text li {
   font-size: 15px;
   color: var(--color-ink-muted);
   line-height: 1.75;
}

.source-text ul,
.source-text ol {
   margin: 0 0 16px 18px;
}

.source-text a {
   color: var(--color-primary);
   text-decoration: underline;
   text-decoration-color: rgba(46, 94, 62, 0.35);
   text-underline-offset: 2px;
}

.source-text img,
.source-toggle-content img,
.source-rich-block img {
   width: 100%;
   max-width: 560px;
   height: auto;
   border-radius: var(--radius-md);
   border: 1px solid var(--color-border);
   background: #fff;
   padding: 8px;
   margin: 12px 0;
}

.source-rich-block {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: 20px;
}

.source-rich-block article {
   margin-bottom: 18px;
}

.source-rich-block article:last-child {
   margin-bottom: 0;
}

.source-image {
   border-radius: var(--radius-xl);
   overflow: hidden;
   border: 1px solid var(--color-border);
   background: #fff;
   box-shadow: var(--shadow-sm);
}

.source-image img {
   width: 100%;
   max-height: 500px;
   object-fit: contain;
   background: #fff;
   padding: 18px;
}

.source-gallery {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
   gap: 14px;
}

.source-gallery-item {
   border-radius: var(--radius-md);
   overflow: hidden;
   border: 1px solid var(--color-border);
   background: #fff;
}

.source-gallery-item img {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
}

.source-card {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: var(--color-surface);
   box-shadow: var(--shadow-sm);
}

.source-card-image {
   background: #fff;
   border-bottom: 1px solid var(--color-border);
}

.source-card-image img {
   width: 100%;
   max-height: 220px;
   object-fit: contain;
   padding: 14px;
}

.source-card-body {
   padding: 16px 18px 18px;
}

.source-card-body h3 {
   font-size: 1.05rem;
   margin-bottom: 8px;
}

.source-card-text p {
   font-size: 14px;
   color: var(--color-ink-muted);
   line-height: 1.65;
   margin-bottom: 10px;
}

.source-section--dotace .source-card {
   border-color: rgba(46, 94, 62, 0.24);
}

.source-section--dotace .source-card-body h3 {
   display: flex;
   align-items: center;
   gap: 8px;
}

.source-section--dotace .source-card-body h3::before {
   content: '';
   width: 20px;
   height: 20px;
   flex-shrink: 0;
   border-radius: 999px;
   background: var(--color-primary-bg);
   border: 1px solid rgba(46, 94, 62, .4);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e5e3e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 12px;
}

.home-source-alt .source-section--dotace {
   padding-bottom: 28px;
   background: #EDE3D4;
}

.home-source-alt .source-section--dotace .source-row:last-child {
   margin-bottom: 24px;
}

.source-section--staceni {
   background: linear-gradient(180deg, #eef5f1 0%, #e5efe9 100%);
}

.source-section--staceni .source-row:first-child .source-text {
   max-width: 980px;
}

.source-section--staceni .source-col-1-2 .source-text {
   background: linear-gradient(180deg, #ffffff 0%, #f8fcf9 100%);
   border: 1px solid rgba(46, 94, 62, .2);
   border-radius: 16px;
   padding: 20px 20px 16px;
   box-shadow: 0 8px 16px rgba(29, 61, 40, .08);
   height: 100%;
   position: relative;
}

.source-section--staceni .source-col-1-2 .source-text::before {
   content: '';
   display: block;
   width: 44px;
   height: 3px;
   border-radius: 999px;
   background: var(--color-primary);
   margin-bottom: 12px;
}

.source-section--staceni .source-col-1-2 .source-text h4 {
   color: var(--color-primary-dk);
   margin-bottom: 8px;
   font-size: 1.12rem;
}

.source-section--staceni .source-col-1-2 .source-text p {
   font-size: 14px;
   line-height: 1.65;
   color: var(--color-ink-muted);
}

.source-toggle {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   background: #fff;
   margin-bottom: 12px;
   overflow: hidden;
}

.source-toggle summary {
   cursor: pointer;
   padding: 14px 16px;
   font-family: var(--font-display);
   font-size: 1rem;
   font-weight: 600;
   color: var(--color-ink);
   background: #faf8f4;
}

.source-toggle[open] summary {
   border-bottom: 1px solid var(--color-border);
}

.source-toggle-content {
   padding: 14px 16px 16px;
}

.source-toggle-content p,
.source-toggle-content li {
   font-size: 14px;
   line-height: 1.7;
   color: var(--color-ink-muted);
}

.source-toggle--static {
   border-style: dashed;
   background: #fff;
}

.source-toggle--static .source-toggle-title {
   padding: 14px 16px;
   font-family: var(--font-display);
   font-size: 1rem;
   font-weight: 600;
   color: var(--color-ink);
   line-height: 1.4;
   background: #fff;
}

.source-anchor-targets {
   position: relative;
   height: 0;
   overflow: visible;
}

.source-anchor-targets span {
   display: block;
   position: relative;
   top: -96px;
   visibility: hidden;
}

.source-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 8px;
}

.source-video-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
   margin-top: 14px;
   max-width: 860px;
   margin-left: auto;
   margin-right: auto;
}

.source-video-embed {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: #fff;
   box-shadow: var(--shadow-sm);
}

.source-video-embed iframe {
   display: block;
   width: 100%;
   aspect-ratio: 16 / 9;
   border: 0;
}

.sortiment-detail-layout .source-video-list {
   width: 100%;
}

@media (max-width: 979px) {
   .sortiment-detail-layout .source-video-list {
      width: 100%;
      max-width: 100%;
   }
}


.source-map {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: #fff;
   box-shadow: var(--shadow-sm);
}

.source-map iframe {
   width: 100%;
   height: 380px;
   border: 0;
}

/* ============================================================
   SORTIMENT DETAIL MODE — unified redesign
   ============================================================ */
.sortiment-detail-layout .source-content-section--sortiment-detail {
   padding: 56px 0;
   border-top: 1px solid rgba(213, 203, 184, 0.72);
   background: #fff;
}

.sortiment-detail-layout>.source-content-section--sortiment-detail:first-child {
   background: #fdf9f2;
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-row {
   gap: 26px;
   margin-bottom: 22px;
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-text p,
.sortiment-detail-layout .source-content-section--sortiment-detail .source-text li,
.sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle-content p,
.sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle-content li {
   color: #463d35;
   line-height: 1.78;
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-text ul,
.sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle-content ul {
   list-style: disc;
   margin: 0 0 14px 20px;
   padding: 0;
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-text ol,
.sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle-content ol {
   list-style: decimal;
   margin: 0 0 14px 20px;
   padding: 0;
}

.sortiment-detail-layout .source-content-section--title-only {
   padding-bottom: 18px;
}

.sortiment-detail-layout .source-content-section--title-only + .source-content-section--detail-body {
   padding-top: 18px;
   border-top: none;
}

/* Calm pair-based section alternation (title + following body keep the same tone). */
.sortiment-detail-layout .source-content-section--title-only,
.sortiment-detail-layout .source-content-section--title-only + .source-content-section--detail-body {
   background: #fff;
}

.sortiment-detail-layout .source-content-section--title-only:nth-of-type(4n-1),
.sortiment-detail-layout .source-content-section--title-only:nth-of-type(4n-1) + .source-content-section--detail-body {
   background: #f8f3e9;
}

.sortiment-detail-layout .source-content-section--title-only .source-card {
   background: transparent;
   border: none;
   box-shadow: none;
}

.sortiment-detail-layout .source-content-section--title-only .source-card-body {
   padding: 0;
}

.sortiment-detail-layout .source-content-section--title-only .source-card-body h3 {
   font-size: clamp(1.35rem, 2.8vw, 2rem);
   line-height: 1.2;
   color: var(--color-primary-dk);
   margin: 0;
}

.sortiment-detail-layout .source-content-section--detail-body .source-col-1-3 {
   display: grid;
   gap: 12px;
   align-content: start;
}

.sortiment-detail-layout .source-content-section--detail-body .source-card,
.sortiment-detail-layout .source-content-section--detail-body .source-image {
   border-color: rgba(213, 203, 184, 0.9);
   box-shadow: 0 8px 18px rgba(35, 29, 24, 0.06);
   background: #fff;
}

.sortiment-detail-layout .source-content-section--detail-body .source-card-image {
   background: #fff;
}

.sortiment-detail-layout .source-content-section--detail-body .source-card-image img,
.sortiment-detail-layout .source-content-section--detail-body .source-image img {
   background: #fff;
   object-fit: contain;
}

.sortiment-detail-layout .source-content-section--detail-body .source-buttons {
   margin-top: 4px;
   gap: 8px;
}

.sortiment-detail-layout .source-content-section--detail-body .source-buttons .btn {
   min-width: 170px;
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle {
   margin-bottom: 10px;
   border-radius: 14px;
   border: 1px solid rgba(207, 194, 173, 0.92);
   box-shadow: 0 5px 14px rgba(29, 24, 20, 0.05);
   background: #fff;
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle summary {
   position: relative;
   background: #fbf8f2;
   padding: 14px 48px 14px 16px;
   font-size: 1.03rem;
   line-height: 1.4;
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle summary::marker,
.sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle summary::-webkit-details-marker {
   display: none;
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle summary::after {
   content: '+';
   position: absolute;
   right: 16px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 1.1rem;
   font-family: var(--font-body);
   color: var(--color-primary);
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle[open] summary::after {
   content: '−';
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle-content {
   padding: 16px;
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle-content img {
   margin: 10px 0 2px;
}

.sortiment-detail-layout>.source-content-section--sortiment-detail:first-child .source-row-inner:last-child .source-col-1-4 {
   grid-column: span 6;
}

.sortiment-detail-layout>.source-content-section--sortiment-detail:first-child .source-row-inner:last-child .source-text {
   background: #fff;
   border: 1px solid rgba(205, 190, 164, 0.82);
   border-radius: 16px;
   padding: 16px 18px;
   box-shadow: none;
   margin-bottom: 12px;
}

.sortiment-detail-layout>.source-content-section--sortiment-detail:first-child .source-row-inner:last-child .source-text:last-child {
   margin-bottom: 0;
}

.sortiment-detail-layout>.source-content-section--sortiment-detail:first-child .source-row-inner:last-child .source-text h4 {
   margin: 0 0 8px;
   font-size: clamp(1.65rem, 1.2rem + 0.8vw, 2rem);
   line-height: 1.12;
   color: var(--color-primary-dk);
   letter-spacing: -0.01em;
}

.sortiment-detail-layout>.source-content-section--sortiment-detail:first-child .source-row-inner:last-child .source-text p {
   margin: 0;
   line-height: 1.48;
   font-size: 0.98rem;
}

.sortiment-detail-layout>.source-content-section--sortiment-detail:first-child .source-row-inner:last-child .source-text a {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 8px;
   text-decoration: none;
   border-bottom: 1px solid rgba(47, 106, 72, 0.22);
   color: #2f6a48;
   font-weight: 500;
   transition: color .2s ease, border-color .2s ease;
}

.sortiment-detail-layout>.source-content-section--sortiment-detail:first-child .source-row-inner:last-child .source-text a:hover {
   color: #204a32;
   border-color: rgba(32, 74, 50, 0.42);
}

@media (max-width: 900px) {
   .sortiment-detail-layout>.source-content-section--sortiment-detail:first-child .source-row-inner:last-child .source-text {
      border-radius: 14px;
      padding: 14px 14px 12px;
      margin-bottom: 10px;
   }

   .sortiment-detail-layout>.source-content-section--sortiment-detail:first-child .source-row-inner:last-child .source-text h4 {
      font-size: clamp(1.45rem, 6vw, 1.82rem);
      margin-bottom: 7px;
   }
}

.source-promo {
   background: linear-gradient(135deg, rgba(46, 94, 62, 0.95), rgba(29, 61, 40, 0.95));
   color: #fff;
   border-radius: var(--radius-xl);
   padding: clamp(22px, 3vw, 34px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: var(--shadow-lg);
   background-size: cover;
   background-position: center;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
}

.source-promo::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 84% 22%, rgba(184, 149, 58, .2), transparent 55%);
   z-index: 0;
}

.source-promo > * {
   position: relative;
   z-index: 1;
}

.source-promo h2 {
   color: #fff;
   margin-bottom: 8px;
}

.source-promo-text h4 {
   color: #fff;
   font-size: clamp(1.15rem, 2.2vw, 1.55rem);
   margin-bottom: 4px;
   letter-spacing: .02em;
}

.source-promo-text p {
   color: rgba(255, 255, 255, 0.88);
   font-size: 16px;
   line-height: 1.68;
}

.source-promo .source-buttons {
   margin-top: 0;
}

.source-promo .source-buttons .btn {
   white-space: nowrap;
}

.source-section--eshop-promo .source-promo,
.source-promo--eshop {
   min-height: 206px;
   border-radius: 10px;
   border: 1px solid rgba(181, 164, 122, .22);
   box-shadow: 0 14px 34px rgba(8, 10, 9, .26);
   background:
      radial-gradient(circle at 18% 24%, rgba(181, 164, 122, .12) 0 2px, transparent 2px) 0 0 / 58px 58px,
      #2c2c27;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 24px;
   padding: clamp(28px, 3.8vw, 44px) clamp(26px, 4.4vw, 52px);
}

.source-section--eshop-promo .source-promo::before,
.source-promo--eshop::before {
   content: none;
}

.source-section--eshop-promo .source-promo-text,
.source-promo--eshop .source-promo-text {
   width: 100%;
   text-align: left;
}

.source-section--eshop-promo .source-promo-text h4,
.source-promo--eshop .source-promo-text h4,
.source-promo--eshop h2 {
   font-family: var(--font-display);
   font-size: clamp(2.1rem, 4.2vw, 3.2rem);
   font-weight: 700;
   line-height: 1.08;
   letter-spacing: -0.02em;
   margin-bottom: 10px;
   color: #f0ede6;
}

.source-section--eshop-promo .source-promo-text p,
.source-promo--eshop .source-promo-text p {
   font-size: clamp(1rem, 1.9vw, 1.9rem);
   color: rgba(240, 237, 230, .82);
   line-height: 1.35;
   max-width: 34ch;
}

.source-section--eshop-promo .source-buttons,
.source-promo--eshop .source-buttons,
.source-promo--eshop .source-buttons--eshop-fallback {
   justify-self: end;
   margin-top: 0;
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
}

.source-section--eshop-promo .source-promo .btn.btn-accent,
.source-promo--eshop .btn.btn-accent {
   border-radius: 3px;
   padding: 13px 28px;
   font-size: 11px;
   letter-spacing: .12em;
   font-weight: 600;
   text-transform: uppercase;
   background: #b5a47a;
   border-color: #b5a47a;
   color: #1a1a16;
}

.source-section--eshop-promo .source-promo .btn.btn-accent:hover,
.source-promo--eshop .btn.btn-accent:hover {
   background: #c9b98e;
   border-color: #c9b98e;
}

.source-section--eshop-promo .source-promo .btn.btn-outline,
.source-promo--eshop .btn.btn-outline {
   border-radius: 3px;
   padding: 13px 28px;
   font-size: 11px;
   letter-spacing: .12em;
   font-weight: 600;
   text-transform: uppercase;
   background: transparent;
   border-color: rgba(240, 237, 230, .24);
   color: rgba(240, 237, 230, .68);
}

.source-section--eshop-promo .source-promo .btn.btn-outline:hover,
.source-promo--eshop .btn.btn-outline:hover {
   border-color: rgba(240, 237, 230, .55);
   color: #f0ede6;
}

.source-text--staceni-intro,
.source-text--dotace-intro {
   position: relative;
   padding-left: 0;
}

.source-text--staceni-intro::before,
.source-text--dotace-intro::before {
   content: none;
}

.source-text--staceni-intro::after,
.source-text--dotace-intro::after {
   content: none;
}

.home-source-alt .source-content-section {
   border-top: 1px solid rgba(213, 203, 184, 0.5);
   padding: 52px 0;
}

.home-source-alt .source-content-section:first-child {
   border-top: none;
}

.home-source-alt .source-content-section:nth-child(odd) {
   background: #f6f0e5;
}

.home-source-alt .source-content-section:nth-child(even) {
   background: #ece3d4;
}

.home-source-alt .source-content-section:last-child {
   padding-bottom: 20px;
   background: #ece3d4;
}

.contact-map-full {
   width: 100%;
   border-top: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
   margin: 0;
}

.contact-map-full iframe {
   display: block;
   width: 100%;
   height: 390px;
   border: 0;
}

@media (max-width: 980px) {
   .source-col-1-2,
   .source-col-1-3,
   .source-col-2-3,
   .source-col-1-4,
   .source-col-3-4,
   .source-col-1-5 {
      grid-column: span 12;
   }

   .source-row {
      gap: 18px;
      margin-bottom: 20px;
   }

   .home-about-copy {
      columns: 1;
      column-gap: 0;
   }

   .source-map iframe {
      height: 300px;
   }

   .source-promo {
      flex-direction: column;
      align-items: flex-start;
   }

   .source-section--eshop-promo .source-promo,
   .source-promo--eshop {
      grid-template-columns: 1fr;
      min-height: 0;
      gap: 14px;
      border-radius: 8px;
      padding: 22px 18px;
   }

   .source-section--eshop-promo .source-promo-text,
   .source-promo--eshop .source-promo-text {
      justify-self: stretch;
      text-align: center;
   }

   .source-section--eshop-promo .source-promo-text p,
   .source-promo--eshop .source-promo-text p {
      max-width: none;
   }

   .source-section--eshop-promo .source-buttons,
   .source-promo--eshop .source-buttons,
   .source-promo--eshop .source-buttons--eshop-fallback {
      justify-self: center;
      justify-content: center;
   }

   .sortiment-detail-layout .source-content-section--sortiment-detail {
      padding: 40px 0;
   }

   .sortiment-detail-layout .source-content-section--title-only {
      padding-bottom: 10px;
   }

   .sortiment-detail-layout .source-content-section--title-only + .source-content-section--detail-body {
      padding-top: 10px;
   }

   .sortiment-detail-layout .source-content-section--detail-body .source-buttons .btn {
      width: 100%;
      min-width: 0;
   }

   .sortiment-detail-layout>.source-content-section--sortiment-detail:first-child .source-row-inner:last-child .source-col-1-4 {
      grid-column: span 12;
   }

   .contact-map-full iframe {
      height: 320px;
   }
}

@media (max-width: 640px) {
   .source-content-section {
      padding: 34px 0;
   }

   .source-gallery {
      grid-template-columns: 1fr 1fr;
      gap: 10px;
   }

   .source-image img {
      max-height: 340px;
      padding: 12px;
   }

   .source-card-image img {
      max-height: 180px;
   }

   .source-map iframe {
      height: 240px;
   }
}

/* ============================================================
   MICRO-ANIMATIONS — fade-in on scroll, hover enhancements
   ============================================================ */


/* Nav link underline grow */
.nav-links a::after {
   content: '';
   position: absolute;
   bottom: -2px;
   left: 50%;
   width: 0;
   height: 1.5px;
   background: var(--color-primary);
}
.nav-links a {
   position: relative;
}
.nav-links a:hover::after,
.nav-links a.active::after {
   width: 100%;
   left: 0;
}

/* Footer links subtle hover */

.footer-nav a:hover {
   padding-left: 4px;
}

/* Section eyebrow gentle pulse on scroll-in */
@keyframes eyebrow-in {
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MOBILE REDESIGN V4 — unified public UI
   ============================================================ */
:root {
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-5: 20px;
   --space-6: 24px;
   --space-7: 32px;
   --space-8: 40px;
   --space-9: 48px;
}

body.nav-open {
   overflow: hidden;
}

#main-header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   box-shadow: none;
   transition: box-shadow 0.22s ease, border-color 0.22s ease;
}

#main-header.is-scrolled {
   box-shadow: 0 10px 28px rgba(26, 20, 16, 0.12);
}

.main-content {
   padding-top: var(--header-offset);
   min-height: calc(100vh - var(--header-offset));
}

.nav-main-inner {
   min-height: 76px;
}

.mobile-nav-head,
.mobile-nav-footer,
.mobile-nav-close,
.nav-overlay {
   display: none;
}

.nav-overlay[hidden] {
   display: none !important;
}

.main-nav {
   gap: 26px;
}

.main-nav .nav-links {
   align-items: center;
   flex-wrap: nowrap;
}

.nav-links > li {
   white-space: nowrap;
}

.nav-links a {
   white-space: nowrap;
}

@media (max-width: 1024px) {
   .nav-topbar {
      display: none;
   }

   .section {
      padding: 40px 0;
   }

   .home-about-grid {
      grid-template-columns: 1fr;
      gap: 22px;
   }

   .home-about-content {
      order: 1;
   }

   .home-about-media {
      order: 2;
      justify-content: flex-start;
   }

   .home-about-copy {
      columns: 1;
   }
}

@media (max-width: 900px) {
   .header-mobile-actions {
      display: flex;
   }

   .hamburger {
      display: block;
   }

   .nav-cta {
      display: none;
   }

   .nav-main-inner {
      min-height: 68px;
      padding-top: 8px;
      padding-bottom: 8px;
   }

   .logo-box {
      padding: 5px 11px;
   }

   .logo-main {
      font-size: 1rem;
   }

   .logo-sub {
      font-size: 12px;
   }

   .main-nav {
      position: fixed;
      inset: 0;
      width: 100vw;
      max-width: none;
      height: 100dvh;
      background: linear-gradient(180deg, #f9f4ee 0%, #f5efe5 100%);
      border-left: none;
      border-top: 1px solid rgba(213, 203, 184, 0.8);
      z-index: 1120;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
      padding: max(14px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom));
      transform: translateX(100%);
      transition: transform 0.28s ease;
      overflow-y: auto;
   }

   .main-nav.open {
      transform: translateX(0);
   }

   .mobile-nav-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(46, 94, 62, 0.22);
   }

   .mobile-nav-kicker {
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-primary);
      font-weight: 700;
   }

   .mobile-nav-close {
      display: inline-flex;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(46, 94, 62, 0.3);
      background: #fff;
      align-items: center;
      justify-content: center;
      position: relative;
   }

   .mobile-nav-close span {
      position: absolute;
      width: 16px;
      height: 2px;
      background: var(--color-ink);
      border-radius: 999px;
   }

   .mobile-nav-close span:first-child {
      transform: rotate(45deg);
   }

   .mobile-nav-close span:last-child {
      transform: rotate(-45deg);
   }

   .main-nav .nav-links {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: stretch;
   }

   .main-nav .nav-links > li {
      background: #fff;
      border: 1px solid rgba(205, 192, 168, 0.86);
      border-radius: 14px;
      padding: 0 14px;
      box-shadow: 0 3px 10px rgba(26, 20, 16, 0.05);
   }

   .main-nav .nav-links > li > a {
      display: block;
      border-bottom: 0;
      padding: 14px 0;
      font-size: 1.15rem;
      line-height: 1.25;
      font-family: var(--font-display);
      color: var(--color-ink);
   }

   .main-nav .nav-links > li > a.active {
      color: var(--color-primary);
   }

   .main-nav .nav-links > li.has-dropdown {
      padding-top: 6px;
      padding-bottom: 4px;
   }

   .main-nav .has-dropdown .dropdown {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: 1px solid rgba(46, 94, 62, 0.2);
      border-radius: 12px;
      background: #faf8f3;
      min-width: 0;
      margin-top: 8px;
      padding: 8px 12px 6px;
   }

   .main-nav .has-dropdown .dropdown li a {
      padding: 10px 4px;
      color: var(--color-ink-muted);
      font-size: 14px;
      border-bottom: 1px solid rgba(213, 203, 184, 0.6);
   }

   .main-nav .has-dropdown .dropdown li:last-child a {
      border-bottom: 0;
   }

   .mobile-nav-footer {
      display: grid;
      gap: 10px;
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid rgba(46, 94, 62, 0.2);
   }

   .mobile-nav-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 11px 18px;
      border-radius: 12px;
      background: var(--color-primary);
      color: #fff;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      font-weight: 600;
   }

   .mobile-nav-action--secondary {
      background: #fff;
      color: var(--color-primary);
      border: 1px solid rgba(46, 94, 62, 0.35);
   }

   .mobile-nav-contact {
      display: grid;
      gap: 6px;
   }

   .mobile-nav-contact a {
      font-size: 14px;
      color: var(--color-ink-muted);
   }

   .nav-overlay {
      position: fixed;
      inset: 0;
      z-index: 1110;
      border: 0;
      margin: 0;
      padding: 0;
      background: rgba(11, 8, 6, 0.44);
      display: none;
   }

   body.nav-open .nav-overlay {
      display: block;
   }

   .nav-links a::after {
      content: none;
   }
}

/* Home */
.home-about {
   background: linear-gradient(180deg, #f7f1e7 0%, #fbf7f1 100%);
}

.home-about-grid {
   grid-template-columns: 1.35fr 0.65fr;
   gap: 28px;
   align-items: center;
}

.home-about-content {
   order: 1;
}

.home-about-content h2 {
   margin-bottom: 10px;
}

.home-about-copy {
   columns: 1;
}

.home-about-content p {
   max-width: 74ch;
}

.home-about-media {
   order: 2;
   justify-content: center;
}

.home-about-media img {
   width: clamp(130px, 20vw, 210px);
   max-height: 260px;
}

@media (min-width: 901px) {
   .home-about .home-about-media {
      width: 100%;
      justify-content: center;
      align-items: center;
   }

   .home-about #tap-wine-img {
      display: block;
      position: relative;
      left: 50%;
      transform: translateX(-50%) rotate(var(--tap-wine-rotation, 0deg));
   }
}

.home-about-mobile-inline-image {
   transform: rotate(var(--tap-wine-rotation, 0deg));
}

.home-about-signature {
   width: min(100%, 140px);
   margin-top: 12px;
}

.home-services .grid-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 22px;
}

.home-services .cat-card {
   min-height: 100%;
}

.home-services .cat-card img {
   background: #fff;
}

.home-source-alt .source-content-section {
   padding: 46px 0;
}

.home-source-alt .source-content-section:last-child {
   padding-bottom: 0;
}

.home-latest-blog {
   padding-top: 28px;
}

/* E-shop and content cards on mobile */
@media (max-width: 900px) {
   #main-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1200;
   }

   .main-content {
      padding-top: var(--header-offset);
   }

   .hero {
      padding: 34px 0;
   }

   .hero h1 {
      font-size: clamp(1.65rem, 7vw, 2.25rem);
      line-height: 1.12;
   }

   .hero p {
      font-size: 15px;
      margin-bottom: 24px;
   }

   .hero-actions {
      gap: 12px;
   }

   .hero-actions .btn {
      width: 100%;
      justify-content: center;
   }

   .section-header {
      margin-bottom: 24px;
   }

   .home-services .grid-4,
   .grid-4 {
      grid-template-columns: 1fr;
      gap: 16px;
   }

   .home-about-media {
      display: none;
   }

   .home-about-mobile-inline-image {
      display: block;
      width: min(100%, 230px);
      max-height: 270px;
      object-fit: contain;
      margin: 8px auto 16px;
      transform-origin: 50% 50%;
      filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.12));
   }

   .home-about .container {
      padding-left: 14px;
      padding-right: 14px;
   }

   .cat-card img {
      height: 220px;
      padding: 14px;
   }

   .cat-card-body {
      padding: 16px;
   }

   .cat-card-body h3 {
      font-size: 1.28rem;
   }

   .cat-card-link {
      width: 100%;
      justify-content: center;
   }

   .products-carousel-section {
      padding: 40px 0;
   }

   .products-carousel-wrap .product-card {
      min-width: 74%;
   }

   .filter-bar {
      justify-content: flex-start;
      overflow-x: auto;
      flex-wrap: nowrap;
      padding-bottom: 8px;
   }

   .filter-btn {
      white-space: nowrap;
      min-height: 38px;
   }

   .product-detail {
      gap: 22px;
   }

   .product-detail-img {
      padding: 20px;
   }

   .cart-table {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
   }

   .cart-summary {
      position: static;
   }

   .blog-detail {
      max-width: none;
   }

   .blog-content {
      font-size: 15px;
      line-height: 1.72;
   }

   .contact-form {
      padding: 20px;
      border-radius: 16px;
   }

   .contact-map-full iframe {
      height: 300px;
   }
}

/* Sortiment detail readability and section rhythm */
.sortiment-detail-layout .source-content-section--sortiment-detail {
   padding: clamp(38px, 6vw, 60px) 0;
   border-top: 1px solid rgba(213, 203, 184, 0.84);
}

.sortiment-detail-layout .source-content-section--sortiment-detail:nth-of-type(odd) {
   background: #faf4e8;
}

.sortiment-detail-layout .source-content-section--sortiment-detail:nth-of-type(even) {
   background: #efe6d7;
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-col-1-5,
.sortiment-detail-layout .source-content-section--sortiment-detail .source-col-1-4 {
   grid-column: span 4;
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-col-1-3 {
   grid-column: span 4;
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-col-2-3 {
   grid-column: span 8;
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-text p,
.sortiment-detail-layout .source-content-section--sortiment-detail .source-text li {
   word-break: normal;
   overflow-wrap: break-word;
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-card-text a {
   font-weight: 600;
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-card-body h3 {
   font-size: clamp(1.3rem, 2.2vw, 1.72rem);
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle--static {
   border-style: solid;
   border-color: rgba(213, 203, 184, 0.95);
   background: #fffdfa;
   box-shadow: none;
}

.sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle--static .source-toggle-title {
   background: transparent;
   color: var(--color-primary-dk);
   font-size: clamp(1.02rem, 1.35vw, 1.22rem);
   line-height: 1.48;
}

.sortiment-detail-layout .source-content-section--title-only,
.sortiment-detail-layout .source-content-section--title-only + .source-content-section--detail-body {
   background: #f7efe2;
}

.sortiment-detail-layout .source-content-section--title-only {
   padding: clamp(24px, 3vw, 34px) 0 8px;
}

.sortiment-detail-layout .source-content-section--title-only + .source-content-section--detail-body {
   padding-top: 8px;
   border-top: none;
}

.sortiment-detail-layout .source-content-section--title-only .source-card-body h3 {
   font-size: clamp(1.92rem, 3vw, 2.75rem);
   line-height: 1.14;
   margin: 0;
}

@media (max-width: 900px) {
   .sortiment-detail-layout .source-content-section--sortiment-detail .source-col-1-5,
   .sortiment-detail-layout .source-content-section--sortiment-detail .source-col-1-4,
   .sortiment-detail-layout .source-content-section--sortiment-detail .source-col-1-3 {
      grid-column: span 12;
   }

   .sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle summary {
      padding: 12px 42px 12px 14px;
      font-size: 1rem;
   }

   .sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle-content {
      padding: 12px 14px 14px;
   }
}

@media (min-width: 901px) and (max-width: 980px) {
   .sortiment-detail-layout .source-content-section--sortiment-detail .source-col-1-5,
   .sortiment-detail-layout .source-content-section--sortiment-detail .source-col-1-4 {
      grid-column: span 4;
   }

   .sortiment-detail-layout .source-content-section--sortiment-detail .source-col-1-3 {
      grid-column: span 4;
   }

   .sortiment-detail-layout .source-content-section--sortiment-detail .source-col-2-3 {
      grid-column: span 8;
   }
}

/* Mobile polish v5: home about + cart + contact */
@media (max-width: 900px) {
   .home-about .container {
      max-width: none;
      width: 100%;
      padding-left: 16px;
      padding-right: 16px;
   }

   .home-about-grid {
      grid-template-columns: 1fr;
      gap: 14px;
   }

   .home-about-content,
   .home-about-copy {
      width: 100%;
      max-width: none;
   }

   .home-about-content {
      display: flex;
      flex-direction: column;
   }

   .home-about-copy {
      columns: 1;
      column-gap: 0;
      order: 2;
   }

   .home-about-content p {
      max-width: none;
      width: 100%;
      line-height: 1.6;
   }

   .home-about-mobile-inline-image {
      order: 3;
      margin: 16px auto 0;
   }

   .home-about-signature {
      width: min(100%, 120px);
   }

   .cart-table {
      display: block;
      overflow: visible;
      background: transparent;
      box-shadow: none;
      border-radius: 0;
   }

   .cart-table thead {
      display: none;
   }

   .cart-table tbody,
   .cart-table tr,
   .cart-table td {
      display: block;
      width: 100%;
   }

   .cart-table tr {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: 14px;
      box-shadow: var(--shadow-sm);
      padding: 12px;
      margin-bottom: 12px;
   }

   .cart-table td {
      border-bottom: 0;
      padding: 8px 0;
   }

   .cart-table td[data-label]::before {
      content: attr(data-label);
      display: block;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--color-ink-light);
      margin-bottom: 4px;
   }

   .cart-table td[data-label="Produkt"]::before {
      display: none;
   }

   .cart-product {
      align-items: flex-start;
      gap: 12px;
   }

   .cart-product img {
      width: 58px;
      height: 58px;
   }

   .cart-qty {
      width: 90px;
      height: 38px;
      font-size: 14px;
   }

   .cart-remove {
      display: inline-flex;
      padding: 8px 10px;
      background: var(--color-accent-bg);
      border-radius: 10px;
   }

   .cart-actions {
      align-items: stretch !important;
   }

   .cart-actions .btn {
      width: 100%;
      justify-content: center;
   }

   .contact-grid {
      gap: 18px;
   }

   .contact-info,
   .contact-form {
      border-radius: 14px;
   }

   .contact-info-item {
      padding: 10px 12px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid var(--color-border);
   }

   .contact-form {
      padding: 16px;
   }

   .contact-form .btn {
      width: 100%;
      justify-content: center;
   }

   .contact-map-full {
      border-top: 0;
   }

   .contact-map-full iframe {
      height: 260px;
   }
}

/* Final audit overrides (must stay after all layout/media rules) */
@media (min-width: 901px) {
   .home-about .home-about-media {
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 24px;
      padding-bottom: 24px;
   }

   .home-about #tap-wine-img {
      display: block;
      margin: 0 auto;
      width: clamp(220px, 24vw, 320px);
      max-width: 100%;
      max-height: none;
   }
}

.home-source-alt .source-section--dotace {
   background: #EDE3D4;
}

.home-source-alt .source-section--dotace .container {
   padding-bottom: 52px;
}

.home-source-alt .source-section--dotace .source-row:last-child {
   margin-bottom: 0;
}

/* Final mobile/layout fixes v91 */
.sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle summary::after {
   content: none !important;
}

@media (max-width: 900px) {
   .cart-table {
      white-space: normal !important;
   }

   .cart-product,
   .cart-table td,
   .cart-product span {
      min-width: 0;
   }

   .cart-product span {
      overflow-wrap: anywhere;
      word-break: break-word;
      white-space: normal;
   }

   .sortiment-detail-layout .source-content-section--sortiment-detail .source-row {
      grid-template-columns: 1fr !important;
      gap: 14px;
   }

   .sortiment-detail-layout .source-content-section--sortiment-detail .source-col-1-5,
   .sortiment-detail-layout .source-content-section--sortiment-detail .source-col-1-4,
   .sortiment-detail-layout .source-content-section--sortiment-detail .source-col-1-3,
   .sortiment-detail-layout .source-content-section--sortiment-detail .source-col-2-3 {
      grid-column: 1 / -1 !important;
      width: 100%;
      max-width: 100%;
   }

   .sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
   }

   .sortiment-detail-layout .source-content-section--sortiment-detail .source-toggle summary {
      padding-right: 14px;
   }
}